HTML - Introducao

transcript

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

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:

Tags HTML

Tags HTML são palavras-chave que estão entre os símbolos < e >

<p> e</p>Tag de abertura

Tags HTML

Tags HTML são palavras-chave que estão entre os símbolos < e >

<p> e</p>Tag de abertura Tag de fechamento

Estrutura de uma página HTML

Região exibida no browser

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

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 são escritos com: - tag de abertura - tag de fechamento - conteúdo

elementos HTML

Elementos HTML

Elementos HTML podem ser aninhados - Elementos contém outros elementos

Elementos HTML

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

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

O elemento <h1> define um cabeçalho

-Tag de abertura <h1> -Tag de fechamento </h1>- O seu conteúdo é: My First Heading.

Elementos HTML

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

Não possuem tag de fechamento

Elementos HTML Elementos HTML vazios -Elementos HTML sem conteúdo

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

- 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

HTML - Introducao

Technology