Introdução ao HTML

HTML - INTRODUÇÃOProf.ª. Giorgia Barreto L. Parrião [2017]
DESIGN WEB

DEFINIÇÃO
 HTML é a sigla de HyperText Markup Language, expressão inglesa que
significa "Linguagem de Marcação de Hipertexto".
 Consiste em uma linguagem de marcação utilizada para produção de
páginas na web, que permite a criação de documentos que podem ser lidos
em praticamente qualquer tipo de computador e transmitidos pela internet.

HTML - HYPERTEXT MARKUP LANGUAGE
 Inventada por Tim Berners-Lee no fim da década
de 80
 Nasceu junto com a Web
 Linguagem de Marcação Baseada em Hipertexto
 Diversas versões: 4 (atual) e 5 (futura)

4
QUEM CUIDA DO HTML?
 W3C: World Wide Web Consortium;
 WHATWG: Web Hypertext Application Technology Working Group.

 HTML:
 Conteúdo;
 Dados e estrutura;
 CSS:
 Apresentação;
 Formatação, layout, cores, fontes, posicionamento.
 JavaScript:
 Comportamentos;
 Programação.
SEPARAÇÃO EM CAMADAS

ESTRUTURA BÁSICA DE UMA PÁGINA HTML
 Doctype: indica a “versão” do HTML, veremos futuramente!
 <html>, <head>, <title>, <body>, <p>: Tags;

 <html> e </html>, indicam que se trata de um documento em HTML;
 <head> e </head>, delimitam o cabeçalho da página;
 <title> e </title>, definem o título da página; e
 <body> e </body>, delimitam o conteúdo a mostrar ao utilizador;
 <p> e </p>, delimitam um parágrafo.

TIPOS DE TAGS
 Estrutura: <html>, <head>, <body>...
 Metainformações: <meta>, <title>...
 Texto: <p>, <code>, <br>, <strong>...
 Links: <a>, <base>...
 Imagens: <img>, <area>....
 Objetos: <object>, <param>...

 Listas: <ol>, <ul>, <li>...
 Tabelas: <table>, <tr>, <td>...
 Formulários: <input>...
 Scripting / Programação: <script>, <noscript> ...
 Apresentação / Formatação: <b>, <i>, <sup>
 Desenho: <canvas>

TAGS DE TEXTO
 Paragrafo:<p> ... </p>
 Listas:
 Ordenadas: <ul> <li> ... </li> </ul>
 Numeradas: <ol> <li> ... </li> </ol>
 Quebra de Linha: <br> ... <br/>
 Cabeçalhos: h1 a h6
 <h1> Título </h1>
 <h6> Subtítulo 6 </h6>
Profª Giorgia Barreto Lima Parrião 10

TAGS DE LINKS (ÂNCORA / HYPERLINK)
Elemento: a
Atributos:
 href: especifica a URL de destino do link.
 name: define o nome e serve para marcar o lugar em que a âncora se encontra e a
identifica.
 target: define a janela de destino.
 _black: abre em nova janela do browser
 _self: abre na mesma janela do browser
 _top: a pagina é aberta e toda janela do browser

 hreflang: informa a linguagem da página destino
 type: define o tipo de conteúdo.
 mailto: especifica o e-mail de destino do link.
Sintaxe Básica
 Hyperlink:
<a href=“URL”> Nome do Site </a>
Ex: <a href="http://www.projecao.br">Uniprojeção</a>

 E-mail:
<a href=“mailto:nome@dominio”> e-mail </a>
Ex: <a href=“mailto:giorgia.parriao@projecao.br”>
Envie um e-mail à profa. Giorgia
</a>
 Âncora: São utilizados para indexar documentos.
 Âncora: < a href =“#chave” > ... </A>
 Destino: < a name =“chave”> ... </A>
13

TAG DE IMAGEM
Elemento: img
Atributos:
 src: localização (valor: URL) da imagem
 alt: descrição da imagem (cursor)
 width: determina largura da imagem
 height: determina altura da imagem
 title: nome da imagem (acessibilidade)

Sintaxe:
Extensões:
 .png: Formato de dados utilizado para imagens, criado para substituir o GIF, é livre e
recomendado pela W3C. Suporta uma maior gama de profundidade de cores, alta
compressão e é regulável. O que permite comprimir imagens sem perda de qualidade
e mantendo sua leveza.
 .jpg: É indicado para imagens com gradação de pixel complexa(variação de cores,
luz e sombras), mas não para cores chapadas (para este caso é melhor GIF ou BMP).
<img src=“imagem.png" alt=“imagem" title=“imagem" width="150" height="150" />

 .gif: Suporta apenas imagens indexadas e transparência em lugar de canal alfa, ou
seja, um pixel desta imagem pode ser ou totalmente opaco ou totalmente
transparente. Esse formato possibilita pequenas animações de forma simples ,
formadas por várias imagens GIF compactadas numa só. É utilizado para compactar
objetos em jogos eletrônicos, para usar como emoticon em mensageiros instantâneos e
para enfeitar sites na Internet.

EXERCÍCIO DE FIXAÇÃO
Crie um site, utilizando as tags de estrutura e as tags aprendidas nesta aula:
 Paragrafo
 Listas ordenadas e numeradas
 Hyperlink externo e e-mail
 Âncora
 imagem

BIBLIOGRAFIA
 Silva, Mauricio S. Fundamentos de HTML 5 e CSS3. São Paulo:
Novatec, 2015.

Prof.ª Giorgia Barreto Lima Parrião 19
Obrigada!
Obrigada!!!
Prof.ª. Giorgia Barreto

Introdução ao HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Introdução ao HTML

Semelhante a Introdução ao HTML (20)

Mais de Giorgia Barreto Lima Parrião

Mais de Giorgia Barreto Lima Parrião (20)

Introdução ao HTML