Download - HTML - Introducao
Marcação e Layout para Web
Me. Arthur Emanuel de Oliveira Carosia
Introdução
O que é HTML?• Linguagem de marcação hipertexto
• Linguagem de marcação para descrever páginas web
• Uma linguagem de marcação é um conjunto de tags
• Os documentos HTML são descrito por tags HTML
• Cada tag HTML descreve um conteúdo diferente do documento
Exemplo
...
Exemplo
...
DOCTYPE define o tipo do documento como HTML
Essa declaração ajuda o browser a exibir
corretamente a página web.
Exemplo
...
O conteúdo entre <html> e </html>
descreve um documento HTML
Exemplo
...
O texto entre <head> e </head>
apresenta informações sobre o documento
Exemplo
...
O texto entre <title> e </title> apresenta o título do
documento
Exemplo
...O texto
entre <body> e </body> descreve o conteúdo visível
da página
Exemplo
... O texto entre <h1> e </h1>
descreve um cabeçalho
Exemplo
...
O texto entre <p> e </p>
descreve um parágrafo
Web Browser
O navegador não exibe as tags HTML, apenas as usa para determinar como exibir o documento HTML.
O web brower (navegador) (Chrome, IE, Firefox, Safari) lê o conteúdo dos arquivos HTML para exibição.
Tags HTML Tags HTML são palavras-chave que estão entre
os símbolos < e >
<tagname>content</tagname>
Normalmente, elas estão em pares, como:
<p> e</p>
Tags HTML
Tags HTML são palavras-chave que estão entre os símbolos < e >
<tagname>content</tagname>
Normalmente, elas estão em pares, como:
<p> e</p>Tag de abertura
Tags HTML
Tags HTML são palavras-chave que estão entre os símbolos < e >
<tagname>content</tagname>
Normalmente, elas estão em pares, como:
<p> e</p>Tag de abertura Tag de fechamento
Estrutura de uma página HTML
...
Estrutura de uma página HTML
...
Região exibida no browser
Versões do HTML
...
Versões do HTML
...
<!DOCTYPE html>
Editores HTMLArquivos HTML podem ser desenvolvidos em editores de texto
profissionais.
Editores HTML
...
Adobe Dreamweaver
Editores HTML
...
Microsoft Expression Web
Editores HTML
...
CoffeeCup HTML Editor
Editores HTMLEntretanto, HTML pode ser desenvolvido também em editores
de texto simples, tais como Notepad++ e Notepad.
Notepad++ Notepad
Código HTML de uma página
Código HTML de uma página
ExercícioAbra o Notepad, digite o seguinte código HTML, salve-o como index.html e
abra-o em seu web browser.
Exemplos
Para cada exemplo, clique em Try it yourself.
http://www.w3schools.com/html/html_basic.asp
Elementos HTML Documentos HTML são construídos a partir de
elementos HTML
Elementos HTML Documentos HTML são construídos a partir de
elementos HTML
Elementos HTML são escritos com: - tag de abertura - tag de fechamento - conteúdo
Elementos HTML Documentos HTML são construídos a partir de
elementos HTML
Elementos HTML
Elementos HTML podem ser aninhados - Elementos contém outros elementos
Elementos HTML
Elementos HTML podem ser aninhados - Elementos contém outros elementos
O elemento <html> define o documento HTML completo
- Tag de abertura <html> - Tag de fechamento </html>.- O seu conteúdo é o elemento <body>
Elementos HTML
Elementos HTML podem ser aninhados - Elementos contém outros elementos
O elemento <body> define o conteúdo visível do HTML
- Tag de abertura <body> - Tag de fechamento </body>- O seu Conteúdo são os elementos<h1> e <p>.
Elementos HTML
Elementos HTML podem ser aninhados - Elementos contém outros elementos
O elemento <h1> define um cabeçalho
-Tag de abertura <h1> -Tag de fechamento </h1>- O seu conteúdo é: My First Heading.
Elementos HTML
Elementos HTML podem ser aninhados - Elementos contém outros elementos
O elemento <p> define um parágrafo
- Tag de abertura <p> - Tag de fechamento </p>- O seu conteúdo é: My first paragraph.
Elementos HTML Elementos HTML vazios -Elementos HTML sem conteúdo
<br>
Elementos HTML Elementos HTML vazios -Elementos HTML sem conteúdo
<br>
Não possuem tag de fechamento
Elementos HTML Elementos HTML vazios -Elementos HTML sem conteúdo
<br>
Não possuem tag de fechamento
Recomenda-se que elementos vazios sejam fechados na tag de abertura.
<br />
Atributos HTML
Atributos HTML Atributos HTML: - Fornecem informações adicionais sobre os elementos HTML
Atributos HTML Atributos HTML: - Fornecem informações adicionais sobre os elementos HTML
- São sempre especifiados na tag de abertura- Aparecem em pares nome/valor
nome=“valor”
Atributos HTML- Atributo lang
A linguagem do documento pode ser declarado na tag
<html> com o atributo lang
Declarar a linguagem é importante para acessibilidade
e engines de busca
Atributos HTML- Atributo href
Links HTML são definidos com a tag <a>
O endereço do link é especificado pelo atributo href
Atributos HTML- Atributos de tamanho de imagem
Imagens HTML são definidas com a tag<img>
Os atributos mais comuns indicam: endereço do arquivo (src), e tamanho da imagem (width and height)
Exemplos
Para cada exemplo, clique em Try it yourself.
http://www.w3schools.com/html/html_elements.asp
http://www.w3schools.com/html/html_attributes.asp
ExercíciosCrie uma página HTML que irá conter uma notícia retirada da internet.
A página deve conter título com o nome da notícia, cabeçalho destacando a notícia e por fim vários parágrafos detalhando-a.
Pesquise sobre o elemento <img> e seus atributos e insira no início da notícia uma imagem que a ilustre.
Use o elemento <a> para fazer o link a uma notícia relacionada.
W3Schools. Disponível em: http://www.w3schools.com/.
SILVA, M. S. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo em cascata. 1. ed. São Paulo: Novatec, 2008.
SILVA, O. J. HTML 4.0 e XHTML 1.0. 5. ed. São Paulo: Érica, 2008.
SILVA, M. S. Criando sites com HTML: sites de alta qualidade com HTML e CSS. 1. ed. São Paulo: Novatec, 2008.
Referências
Marcação e Layout para Web
Me. Arthur Emanuel de Oliveira Carosia