INTRODUÇÃO HTML 1
TAGS Têm identificadores de início e de fecho Contidas entre os sinais de menor, "<", e maior, ">" Devem ser sempre escritas em minúsculas Exemplo: - Tag de abertura do corpo do documento - Tag de fecho do corpo do documento 2
Estrutura básica de uma página em <html> HTML TAGS... CABEÇALHO DO DOCUMENTO CORPO DO DOCUMENTO 3
EXEMPLO 1 A minha primeira i Página <html> <title>estrutura de uma página em HTML</title> Esta é a minha primeira i página em HTML!!! 4
Tags elementares: Cabeçalhos Existem seis níveis de cabeçalhos: h1, h2,., h6 do maior para o menor tamanho. Esta tag tem atributos opcionais: align, que pode assumir os valores: left, right, center e justify 5
EXEMPLO 2 Cabeçalhos <html> <title>os cabeçalhos</title> <h1> A minha primeira página </h1> <h2> O que é? </h2> <h3> Uma página construída em HTML </h3> <h4> Para que serve? </h4> <h5> Para aprender HTML </h5> <h6> CURSOTÉCNICO DE INFORMÁTICA</h6> 6
EXEMPLO 3 Atributo align <html> <title>alinhamento dos cabeçalhos </title> <h1 align= center> A minha primeira página </h1> <h2 align= right> O que é? </h2> <h3> Uma página construída em html </h3> <h4> Para que serve? </h4> <h5 align = center> Para aprender html </h5> <h6 align=right>curso TÉCNICO DE INFORMÁTICA </h6> 7
Tags Elementares - Parágrafos Os browsers não interpretam as mudanças de linha: Esta é a minha primeira página Esta é outra linha da minha primeira página Temos de usar parágrafos <p>esta é a minha primeira página </p> <p>esta é outra linha da minha primeira página</p> 8
EXEMPLO 4 Parágrafos <html> <title>parágrafos-1ª parte </title> <p> Esta é a minha primeira página </p> <p> Esta é outra linha da minha primeira página </p> 9
EXEMPLO 5 Align e Parágrafos <html> <title>alinhamento dos parágrafos</title> <p align= right> Esta é a minha primeira página </p> <p align= center>esta é outra linha da minha primeira página </p> 10
Tags Elementares Quebras de Linha As quebras de linha são utilizadas quando se pretende forçar uma mudança de linha, num determinado ponto do texto, sem criarmos um parágrafo, para isso utiliza-se a: tag <br> 11
EXEMPLO 6 Quebras de Linha <html> <title>quebras de linha </title> <p> </p> Esta <br> é a minha <br> primeira página 12
Tags Elementares - Divisões Para dividirmos uma página com linhas horizontais, utilizamos a tag <hr>. Esta tag tem principais atributos: align, noshade, size, width. 13
EXEMPLO 7 Divisões <html> <title>divisões</title> i </titl > <hr size= 20%, width= 100 pixels> <p> Esta é a minha primeira página</p> 14
Tags Elementares - Comentários Para colocar comentários num determinado documento, utiliza-se a tag de abertura <!- e a tag de fecho -> 15
EXEMPLO 8 Comentários <html> <title>comentários</title> tái </titl > <p> EsteTexto irá aparecer!! </p> <!-EsteTexto já não irá aparecer na minha página -> 16
Listas Tipos de Listas: Listas Od Ordenadas; d Listas t Desordenadas; d Listas de Definições; 17
EXEMPLO 9 Listas Ordenadas <html> <title>listas Ordenadas </title> <h3> Frutas </h3> <ol> <li>maçãs </li> <li>bananas </li> <li>uvas </li> <li>morangos </li> </ol> 18
EXEMPLO 10 Listas Ordenadas d com outras marcas <html> <title>listas ordenadas - outras marcas </title> <h4> Frutas </h4> <ol type=i> <li>maçãs </li> <li>bananas </li> <li>uvas </li> <li>morangos </li> </ol> 19
EXEMPLO 11 Listas Desordenadas <html> <title>listas desordenadas</title> <h4> Bebidas </h4> <ul> <li>água</li> <li>sumo</li> </li> </ul> <li>vinho</li> 20
EXEMPLO 12 Listas Desordenadas com outras marcas <title>listas desordenadas-outras marcas</title> <h4>sopas</h4> <ul type= square> <li> Caldo Verde</li> <li> Canja</li> </ul> <li> Creme de Coentros</li> 21
<html> <title>listas de Definições </title> <dl> EXEMPLO 13 Listas de Definições <dt>sopas</dt> <dd>primeiro prato de qualquer refeição</dd> <dt>sobremesas </dt> <dd>último prato de qualquer refeição, podendo ser fruta ou sobremesa</dd> </dl> 22
Fundo de uma Página Pode-se alterar um fundo de uma página, através de: Atribuição de uma cor Atribuição de uma imagem 23
EXEMPLO 14 Imagem de Fundo <html> <title>imagem de fundo</title> <body background= INSERIR UMA IMAGEM *> > Esta minha página tem uma imagem de fundo * = Colocar a localização da imagem no disco 24
EXEMPLO 15 Cor de Fundo <html> <title>cor de fundo </title> <body bgcolor = INSERIR UMA COR *> > Esta minha página tem uma cor de fundo * = Inserir a referencia RGB da cor, exemplo #4682b4 25
Formatações de texto Itálico, Negrito e Sublinhado Para colocar texto a negrito: <p> Esta <b> palavra </b> está em negrito. </p> Para colocar texto em itálico ou sublinhado : <p> Uma em <i> itálico </i> e outra em <u>sublinhado/u>. </p> Para alterar a cor, o tipo de letra e o tamanho utiliza-se a tag <font>, que pode conter os atributos opcionais: face, size e color. 26
<html> EXEMPLO 16 Formatações do Texto <title>formatações de texto</title> <font size=4 face=arial color=#800000><b>uma <i>boa </i>alimentação</b></font> <p> <font size= 5 face=comicsansms color=#ffcc00>deve ser <u>variada</u></font> </p> <font size= 2 face=castellar color=#ff6600>deve ser <u>equilibrada</u></font> 27
Imagens Para se incluírem imagens num documento HTML utiliza-se a tag <img>. O atributo scr é o mais importante, sem ele o browser apenas identifica um espaço reservado à imagem, mas esta não existe. <p> </p> <img src= imagem.jpg > 28
EXEMPLO 17 - Imagens <html> <title>imagens</title> <h4> Frutas </h4> <ul> <li><img src=imagens/morangos.jpg>morangos</li> <li><img src=imagens/cerejas.jpg>cerejas</li> <li><img src=imagens/ananás.jpg>ananás</li> </ul> 29
Imagens - Atributos O alinhamento das imagens em relação aos elementos circundantes do texto faz-se através do atributo align, que pode assumir os valores de right, left, top, middle,etc. Para se definir as dimensões, altura e largura, das imagens, utilizam-se os atributos height e width com os valores expressos em percentagem ou em pixels. Quando não for possível mostrar uma imagem o atributo alt permite definir um texto na página. pg 30
<html> EXEMPLO 18 Atributos das Imagens <title>listas desordenadas</title> <h4> Frutas </h4> <ul> <li><img src=imagens/morangos.jpg align=right >Morangos</li> <li><img src=nãohá.img alt= "Foto indisponível">cerejas</li> <li><img src=imagens/ananás.jpg width=45 height=45>ananás</li> </ul> 31