HTML 5
Básico
HTML → Hiper Text Markup Language
(Não é uma linguagem de programação é de marcação)
→Tags definem como apresentar o conteúdo
→Relacionado com a forma de navegação
→Serve para construir a estrutura de uma página web
→Construímos o código com elementos de HTML
Sintaxe de Elementos de HTML(tag)
Ex: <tag>Texto</tag>
<tag> → Tag de abertura
</tag> → Tag de fechamento (/ indica o fechamento da tag)
Estrutura básica de HTML
Alinhamento: tag’s dentro de tag’s
→Primeira Tag a ser aberta é a última a ser fechada
Ex: <p><b>Esse parágrafo está em negrito</b></p>
→HTML não reconhece espaços se deve ter tag separatória
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE html> → informa a página que o código é HTML
<html> </html> →Elemento mãe, todos os códigos estarão dentro
dele
<head> </head>→Cabeçalho, aqui são inseridos os metadados da
página (Título, ícone, metadados, importação de scripts, etc)
<body> </body>→Corpo da página, todo conteúdo visível da página
(parágrafos, frases, tabelas, imagens, …)
Elementos de HTML
<!-- --> → Comentar o texto
<title> → Contem o título da página que aparece mo brownser,
fica dentro do elemento <head>
Sx: <title>Titulo da página</title>
Elementos para Conteúdo de Texto <body>
<p> → Paragrafo
<p>Paragrafo</p>
<hX> →Define o destaque de um texto, o X varia de 1 a 6, sendo
o 1 o maior e 6 o menor
<h1>Titulo Maior</h1>
…
<h6>Titulo Menor</h6>
<br> → Quebra de Linha
<hr> → Quebra uma linha e adiciona uma linha separatória
<small> → Altera o texto para pequeno
<small>Texto pequeno</small>
<i> →Texto em Itálico
<i>Texto em Itálico</i>
<em> →Texto em Itálico
<em>Texto em Itálico</em>
<strong> → Texto em negrito
<strong>Texto em Negrito</strong>
<q> → Texto com aspas
<q>Texto com aspas</q>
<mark> → Realça o texto (marca-texto)
<mark>Texto Realçado</mark>
<abbr> → Adiciona uma mensagem ao texto
<abrr title=”#”>Texto</abrr>
<u> → Texto sublinhado
<u>Texto sublinhado</u>
<s> → Texto rasurado
<s>Texto rasurado</s>
<sup> → eleva o texto
<sup>Texto</sup>
<sub> → abaixa o texto
<sub> texto </sub>
<span> →Permite agrupar uma parte de um texto
<p>Texto<span>Texto a ser agrupado</span>Texto</p>
<ul> → Lista desordenada
<ul>
<li>item</li>
…..
<li>item</li>
</ul>
<ol> → Lista ordenada
<ol>
<li>item</li>
…..
<li>item</li>
<ol>
<img> → Adicionar imagem
● src → indicar o local onde está a imagem
<img src=”endereço da imagem”>
<a> → Ancorar (adicionar) hiperligações (links)
● href → indicar o link ou arquivo que vai ser direcionado
<a href=”link ou arquivo”>Texto</a>
Atributos
→Todos os elementos de HTML podem conter atributos,
em alguns eles são obrigatórios
→São propriedades adicionais para configurar ou ajustar o
comportamento dos elementos
→Os atributos são fundamentais na relação do HTML com
o CSS e com o JavaScript
→Os atributos são inseridos nas Tag’s de abertura dos
elementos
Exemplo: Hiperlink reference (href) → <a href=”#”>Texto</a>
Sintaxe: os atributos podem conter um nome e um valor como no
caso do href, ou somente o valor
<tag nome_do_atributo= valor> ou <tag nome_do_atributo>
Tipos de atributos
→Globais: podem ser aplicados em todos os elementos HTML
→Específicos: podem ser aplicados somente em alguns elementos
Principais Atributos
id → identifica de forma única um elemento no documento HTML
class → lista de classes de um elemento HTML
src → indicar o local para onde vai
href → indicar o link ou arquivo que vai ser direcionado
target=”_blank” → abre a página em outra aba no browser
alt=“descrição” → mostra descrição da imagem caso ela não
carregue
Elementos Semânticos
→São elementos de HTML que permitem agrupar outros
elementos
→Não tem conteúdo
→Permite melhorar a organização da página HTML
→Criam condições para melhor uso do CSS
<header> → serve para indicar o cabeçalho, podendo conter logos,
links e etc
<header>Cabeçalho</header>
<div> → Agrupador genérico de outros elementos
<div> Tag’s </div>
<nav> →É usada para indicar uma seção de links de navegação
em uma página
<nav> Links </nav>
<section> →É usado para definir uma seção no html
<section>conteúdo da seção</section>
<article> →É usada para marcar um conteúdo que se constitua em
um componente autossuficiente em uma página, aplicação ou site
e que possa ser distribuído ou reusado de forma independente
<article>parágrafos</article>
<footer> →Marcar o rodapé
<footer>rodapé</footer>
Formas de Aplicação de Estilos no HTML
→Estilos em linha (inline): dentro da tag se utiliza o atributo style
que permite que estilos sejam definidos para os dados que
acompanham a Tag
Ex:
<p style=“color: red;”>Texto em vermelho</p>
*Recomendado evitar o uso, somente em casos específicos
→Uso do elemento <style>: dentro da Tag head é possível utilizar
a tag <style>…</style> dentro dela pode ser escrito os padrões de
CSS que serão utilizados pela página
Ex:
<style>
.titulo{
color: red;
}
</style>
*Recomendado evitar o uso caso haja outras páginas associadas,
dificulta a mudança de estilo padronizada
→Importação de folhas de Estilo: podemos dentro da tag <head>
importar um arquivo de estilos (.css) por meio da Tag <link>
Ex:
<link ref=”stylesheet” href=”arquivo.css”>
*Uso recomendado, permite a utilização da mesma folha de estilo
em diferentes páginas e facilita a mudança de estilo sincronizada
entre eles
Favicon
Favorite Icon é uma imagem identificadora do site, fica localizada
ao lado do title no brownser
→Adicionar favicon:
<link rel="shortcut icon" href="imagem.png" type="image/x-icon">
