2. Linguagem de Programação
• O que é HTML
• HTML não é uma linguagem de programação, e sim linguagem de
marcação, pois não é depurada ou compilada.
3. Linguagem de Programação
• HTML é uma abreviação de Hypertext Markup Language, que
traduzindo para o português significa Linguagem de Marcação de
Hypertexto.
• Resumindo em uma frase: o HTML é uma linguagem para publicação
de conteúdo (texto, imagem, vídeo, áudio e etc) para a Web
4. Linguagem de Programação
• Para entender melhor como o HTML funciona, vamos conversar sobre
duas palavras que fazem parte do seu nome: Markup (marcação) e
Hypertext (hipertexto).
• O HTML é baseado no conceito de Hipertexto, que é uma forma de
organizar conteúdo de forma não linear. Hipertexto são conjuntos de
elementos – ou nós – ligados por conexões. Estes elementos podem
ser palavras, imagens, vídeos, áudio, documentos etc.
5. Linguagem de Programação
• HTML foi criado para ser uma linguagem independente de
plataformas, browsers e outros meios de acesso. Interoperabilidade
significava menos custo. Você cria apenas um código e este código
pode ser lido por diversos meios, ao invés de versões diferentes para
diversos dispositivos. Dessa forma, evitou-se que a Web fosse
desenvolvida em uma base proprietária,
6. Linguagem de Programação
MARCAÇÃO
• A web não é apenas acessada por seres humanos. A informação
publicada é totalmente reutilizada pelos meios de acesso. Os meios
de acesso são qualquer coisa que acesse a web e consuma seu
conteúdo. Pode ser os sistemas de busca, seu browser, um leitor de
tela, seu smartphone, ou qualquer outro sistema ou dispositivo
utilizado pelos usuários ou robôs.
• Estes meios de acesso não conseguem distinguir visualmente os
elementos exibidos na tela. É por isso que o HTML é baseado em
marcação.
7. Linguagem de Programação
MARCAÇÃO
• Nós marcamos a informação, dando significado a estes objetos,
tornando-os legíveis para os meios de acesso.
• Assim, quando marcamos um título com h1, h2 ou h3, indicamos para
os meios de acesso que determinado bloco de texto é um título, com
uma determinada importância e assim por diante com os outros
elementos
8. Linguagem de Programação
O que é o HTML5?
• O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as
regras de marcação que usaremos no HTML5 e no XHTML, eles
também definem APIs que formarão a base da arquitetura web.
9. Linguagem de Programação
Estrutura básica, DOCTYPE e charsets
• A estrutura básica do HTML5 continua sendo praticamente a mesma
das versões anteriores, mas com menos código. Segue abaixo como a
estrutura básica pode ser seguida:
12. Linguagem de Programação
• <html lang=“pt-br">
• O atributo LANG é necessário para que os user-agents saibam qual a
linguagem principal do documento.
13. Linguagem de Programação
• <head>
• A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD
ficam os metadados.
• Metadados são informações sobre a página e o conteúdo ali
publicado.
14. Linguagem de Programação
• <meta charset="UTF-8">
• No nosso exemplo há uma metatag responsável por chavear qual tabela
de caractéres a página está utilizando. Nas versões anteriores ao
HTML5, essa tag era escrita da forma abaixo:
<meta http-equiv.=“Content-Type” contente=“text/html; charset=utf-8>
15. Linguagem de Programação
• <meta name="viewport" content="width=device-width,
initial-scale=1.0">
• Este metatag é responsável para se utilizar um site responsivo
16. Linguagem de Programação
• <title>Document</title>
• Este tag é responsável pelo título da pagina, ou seja, na barra de
título do site.
17. Linguagem de Programação
• <body>
• Tag body é o corpo da página onde serão apresentados o conteúdo da
página.
18. • Vamos começar a trabalhar com HTML na prática?
• Abra o VISUAL STUDIO CODE
• Vamos instalar o Live Server:
Linguagem de Programação
19. Linguagem de Programação
Tag p usada para criarmos parágrafos
<p> </p>
Tag br usado para quebra de linha
• <br />
• Tag b estilo Negrito
• <b> </b>
• Tag b estilo Itálico
• <i> </i>
• Tag b estilo Itálico
• <u> </u>
20. Linguagem de Programação
• Tags de Níveis de Cabeçalho usados para Títulos e Destaca
• <h1></h1>
•
<h2></h2>
•
<h3></h3>
•
<h4></h4>
•
<h5></h5>
•
<h6></h6>
21. Linguagem de Programação
• Fontes para Textos
• <font></font>
• Tag fonte usando para formatação de fonte no texto
• <font face="" size="" color=""> </font>
