Você está na página 1de 19
DESIGN WEB
DESIGN WEB

HTML - INTRODUÇÃO

Prof.ª. Giorgia Barreto L. Parrião [2017]

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)

junto com a Web  Linguagem de Marcação Baseada em Hipertexto  Diversas versões: 4 (atual)

4

QUEM CUIDA DO HTML?

W3C: World Wide Web Consortium;

WHATWG: Web Hypertext Application Technology Working Group.

CUIDA DO HTML?  W3C : World Wide Web Consortium;  WHATWG : Web Hypertext Application
CUIDA DO HTML?  W3C : World Wide Web Consortium;  WHATWG : Web Hypertext Application

SEPARAÇÃO EM CAMADAS

HTML:

Conteúdo;

Dados e estrutura;

CSS:

Apresentação;

Formatação, layout, cores, fontes, posicionamento.

JavaScript:

Comportamentos;

Programaçã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;

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>

Numeradas: <ol> <li>

</li> </ul> </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

Profª Giorgia Barreto Lima Parrião

11

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>

Profª Giorgia Barreto Lima Parrião

12

<a

Ex:

E-mail:

href=“mailto:nome@dominio”> e-mail </a>

<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” >

Destino: < a name =“chave”>

</A>

</A>

Âncora: < a href =“#chave” >  Destino: < a name =“chave”> </A> </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)

Profª Giorgia Barreto Lima Parrião

14

<img

Sintaxe:

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

Profª Giorgia Barreto Lima Parrião

15

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

Profª Giorgia Barreto Lima Parrião

16

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

Profª Giorgia Barreto Lima Parrião

17

BIBLIOGRAFIA



Silva, Mauricio S. Fundamentos de HTML 5 e CSS3. São Paulo:

Novatec, 2015.

Profª Giorgia Barreto Lima Parrião

18

Obrigada!

Obrigada!!!

Prof.ª. Giorgia Barreto