Aula2htmlparte1 170822203614 PDF

DESIGN WEB
HTML - INTRODUÇÃO
Prof.ª. Giorgia Barreto L. Parrião [2017]
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.
SEPARAÇÃO EM CAMADAS
 HTML:
 Conteúdo;
 Dados e estrutura;
 CSS:
 Apresentação;
 Formatação, layout, cores, fontes, posicionamento.
 JavaScript:
 Comportamentos;
 Programação.
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:
<img src=“imagem.png" alt=“imagem" title=“imagem" width="150" height="150" />
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).

 .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.

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

Aula2htmlparte1 170822203614 PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula2htmlparte1 170822203614 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

DESIGN WEB

QUEM CUIDA DO HTML?

 Metainformações: <meta>, <title>...

 Texto: <p>, <code>, <br>, <strong>...

 Links: <a>, <base>...

 Imagens: <img>, <area>....

 Objetos: <object>, <param>...

 Tabelas: <table>, <tr>, <td>...

 Scripting / Programação: <script>, <noscript> ...

 Apresentação / Formatação: <b>, <i>, <sup>

 Quebra de Linha: <br> ... <br/>

Profª Giorgia Barreto Lima Parrião 10

Profª Giorgia Barreto Lima Parrião 11

Profª Giorgia Barreto Lima Parrião 12

 Âncora: São utilizados para indexar documentos.

Profª Giorgia Barreto Lima Parrião 14

<img src=“imagem.png" alt=“imagem" title=“imagem" width="150" height="150" />

 .jpg: É indicado para imagens com gradação de pixel complexa(variação de cores,

Profª Giorgia Barreto Lima Parrião 15

Profª Giorgia Barreto Lima Parrião 16

Profª Giorgia Barreto Lima Parrião 17

Profª Giorgia Barreto Lima Parrião 18

Prof.ª Giorgia Barreto Lima Parrião 19

Você também pode gostar