HTML

HTML

• Hypertext Markup Language: textos com links.

Anatomia das tags( elementos)

• Elemento:
• <> - Abertura de tag:
• </> - fechamento de tag:
• Exemplo:
• <p>conteúdo</p>

Atributos HTML

• São informações extras e configurações dos elementos.
• <img src=" url..." alt="exemplo">
• url e alt são atributos.
• As aspas podem ser omitidas, simples ou duplas, porém usam-se aspas duplas por conferência e boa prática.
• Atributos globais: Podem ser aplicados a qualquer tag.

Aninhamento de tags

• Hierarquia: Tag filha dentro de tag pai.
• <div>
• <p></p>
• </div>
• Fluxo: As Tags são lidas em efeito cascata.
• <p>1</p>
• <div>2</div>
• Posicionamento dos elementos: inline, block

Caracteres reservados

• Alguns caracteres são reservados para uso no próprio HTML, e para usarmos no conteúdo, precisamos colocá-los em códigos:
• &lt = <
• &gt = >
• &amp = &
• &quot = "
• &apos = '

Anatomia do documento HTML

• <!DOCTYPE html> - Mostra para alguns navegadores que estamos usando HTML 5
• <html> - É o root do documento
• <head> - Contém informações e configurações do documento
• <meta> - configuro os tipos de meta-dados
• <title> - Título do documento( aparece na aba do navegador)
• <body> - Onde fica o conteúdo em si
• <!DOCTYPE html>
• <html>
• <head>
• <meta>
• <title></title>
• </head>
• <body>
• </body>
• </html>

Títulos e parágrafos

• Títulos:
• h1 até h6 - Quanto menor, maior a prioridade.
• Evitar usar mais de 1 "h1" por página, para melhor semântica.
• <h1></h1>
• <h2></h2>
• <h3></h3>
• <h4></h4>
• <h5></h5>
• <h6></h6>
• Parágrafos:
• <p>conteúdo</p>
• Quebra de linha:
• <br>

Listas

• Ordenadas:
• <ol>
• <li>conteúdo</li>
• <li>conteúdo</li>
• <li>conteúdo</li>
• </ol>
• <li>conteúdo</li> - funciona sem encapsular em "ul" ou "ol", porém ñ é recomendado.
• Ñ ordenadas:
• <ul>
• <li>conteúdo</li>
• <li>conteúdo</li>
• <li>conteúdo</li>
• </ul>