HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)

Tamanho: px

Começar a partir da página:

Download "HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)"

Vítor Gabriel Amarante Gusmão
6 Há anos
Visualizações:

1 HTML HyperText Markup Language (Linguagem de marcação de hypertext) Tags de marcação Referência v Rui Menino

2 tags Para formatar e paginar o texto dentro de uma página html, foi definido o conceito tag de marcação. Uma tag é composta por um inicio, um conteúdo e um fim <em> mais texto e mais tags </em>

3 Documento html O próprio documento html é definido por várias tag: <!DOCTYPE html> <html> <head> <title>espaa</title> <link rel="icon" type="image/gif" href="gato.gif" /> <meta name="author" content="rui Menino" /> <meta name="description" content="canários e gatos" /> <meta name="keywords" content="canário, gato, mascote" /> <meta charset= "utf-8" /> </head> <body bgcolor=grey> aqui fica o conteúdo da página </body> </html>

4 HTML5 A primeira linha é: <!DOCTYPE html> que define que a página está a usar a norma HTML5

5 Dentro da tag <head> (1) <title>espaa</title> <link rel="icon" type="image/gif" href="peppa.gif" /> Resultado: Gif com dimensões 48x48 pixeis

6 Dentro da tag <head> (2) Autor da página: <meta name="author" content="rui Menino" /> Descrição do conteúdo da página (no máximo 90 caracteres): <meta name="description" content="canários e gatos" /> Palavras chaves que descrevem a página, curtas, máximo 150 caracteres: <meta name="keywords" content="canário, gato, mascote" />

7 Dentro da tag <head> (3) Tabela de caracteres a ser usada: <meta charset= "utf-8" /> Outra tabela muito usada, especialmente para caracteres latinos (ansi): <meta charset= "iso " /> Atenção, a tabela de caracteres tem que ser a mesma que estiver definida no notepad++ isso = ansi

8 Alguns parâmetros da tag BODY bgcolor =grey background="bgimage.jpg" Exemplos <body bgcolor=red> <body bgcolor= #ff0000>

9 exemplos Exemplos de tag <strong>ola</strong> ola <em> ola </em> ola <strong> ou <b>- negrito <em> ou <i> - itálico

10 Combinação de tags <strong><em> ola </em></strong> ou <b> <i> olá </i> </b> olá

11 Tags para cabeçalho <h1> título </h1> <h2> sub - título </h2> <h3> texto </h3> Etc

12 Alinhar parágrafos Parágrafo centrado <p align="center"> ola </p> Align pode ser center, left ou right Align =alinhar

13 <img > e <br > tags sem terminador mudança de linha (break) <br /> imagem <img src="poeta.gif" width="32" height="32" /> Width = largura Height = altura São facultativos

14 Linha horizontal exemplo <hr /> <hr align="center" width="300px" size="5" color=red />

15 distancias As distancias usadas nas tabelas (ou em outras tags html) podem ser em: Pixeis width = 300px ou width = 300 Percentagem width = 50% Exemplo <hr width="50%" /> Esta linha vai ter comprimento de 50% da largura

16 Fazer listas não ordenadas <ul> <li>gato</li> <li>cão</li> <li>cavalo</li> </ul> medalha de ouro medalha de prata medalha de bronze

17 Fazer listas ordenadas <ol> <li>medalha de ouro</li> <li>medalha de prata</li> <li>medalha de bronze</li> </ol> 1. medalha de ouro 2. medalha de prata 3. medalha de bronze

18 Listas dentro de listas <ul> <li>medalha de ouro <ul> <li>natação</li> <li>corrida</li> <li>hipismo</li> </ul> </li> <li>medalha de prata</li> <li>medalha de bronze</li> </ul> medalha de ouro Natação Corrida Hipismo medalha de prata medalha de bronze

19 Hyperlink (1) Um exemplo de uma tag Hyperlink <a href=" nossa escola</a> a nossa escola

Hyperlink (2) Um exemplo de uma imagem dentro da tag Hyperlink <a href="www.aepaa.

20 Hyperlink (2) Um exemplo de uma imagem dentro da tag Hyperlink <a href=" </a> <img src="poeta.gif" /> Os hyperlinks costumam estar sublinhados. nossa es

21 cores <font color= blue" > Sou azul </font> Sou azul De que cor sou? <font color=#ff0080 > De que cor sou? </font>

22 Formatação de texto com <font> Formatar texto, com cor amarela, tamanho 3, e font arial <font color="yellow" size="3" face="arial"> Domingo de Páscoa </font>

23 Formatação de texto com tags texto negrito, grande e azul <b> </b> <font color="blue" size=14 face="verdana" > A nossa Escola </font> A nossa Escola

24 Painel rolante, <marquee> ola </marquee> <marquee > ola </marquee> <marquee direction=left> ola </marquee> <marquee bgcolor=pink> as rosas têm espinhos </marquee> <marquee width=400 > Yuppi!</marquee>

25 Parametros do <Marquee> WIDTH: largura HEIGHT: altura DIRECTION=LEFT RIGHT: direcção BEHAVIOR=SCROLL SLIDE ALTERNATE : tipo de movimento SCROLLDELAY: tempo que espera antes de mover SCROLLAMOUNT: distancia que move LOOP: qtd de voltas que dá BGCOLOR: cor de fundo HSPACE: espaço horizontal à volta VSPACE: espaço vertical à volta <marquee width=400 BGCOLOR=white BEHAVIOR=alternate > Yuppi!</marquee>

26 Tabelas As seguintes tag formam uma tabela de 2 linhas e 5 colunas <table> <tr> <td >nome</td> <td >idade</td> <td >modalidade</td> </tr> <tr> </tr> </table> <td> rui</td> <td>17</td> <td>basketball</td>

27 A mesma tabela com alguma formatação <table width="240" border="1" bordercolor="#ff0000" bgcolor="#ffffcc"> <tr> <td width="70">nome</td> <td width="80">idade</td> <td width="90">modalidade</td> </tr> <tr> nome idade modalidade <td> rui</td> rui 17 basketball <td>17</td> <td>basketball</td> </tr> </table>

28 Tabelas-1 Alguns parâmetros usados nas tabelas <table Cellspacing = "3" Cellpadding = "4 " border = "3" > Border = espessura das linhas Cellspacing = distancia entre células Cellpadding = margens interna das células

29 Tabelas-2 <tr align="" valign="" > align: alinhamento horizontal do conteúdo da linha (center, left, right ) valign: alinhamento vertical do conteúdo da linha (top, middle, bottom)

30 Tabelas-3 bgcolor= "red" cor de fundo da tabela, linha ou coluna background="dragon_5.gif cor de fundo da tabela, linha ou coluna width="400" height="100" comprimento e altura da tabela, linha ou coluna

31 Sobre as tabelas É possível, mas não é aconselhado usar tabelas para fazer o layout das páginas

32 DIV e SPAN 2 tags que não têm nenhuma característica, mas são muito usadas em CSS <span> *AQUI * </span> <div> *AQUI * </div>

33 NORMAS Até agora, html referia-se à norma HTML 4.0 Strict ou Transitional A tendencia é começar a usar a norma XHTML CSS Strict ou Transitional

34 história Publicação do HTML 3.5 no final de a 2006, desenvolvimento do XHTML, uma especificação HTML baseada em XML O XHTML faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser usado

35 XHTML Extended HyperText Markup Language Nesta variante mais moderna, todos os tags tem que terminar Ou conterem o terminador Ex.: <br />

36 história Em 2008 foi criada a primeira definição de HTML5.

37 Referências

Documentos relacionados

HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011

HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 HTML? INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 1 Hypertext Markup Language (Linguagem de