<!DOCTYPE html PUBLIC...> <html> <head> </head> <body> </body> </html>

Tamanho: px

Começar a partir da página:

Download "<!DOCTYPE html PUBLIC...> <html> <head> </head> <body> </body> </html>"

Zilda Laranjeira Damásio
8 Há anos
Visualizações:

1 <!DOCTYPE html PUBLIC......> <html> <head> </head> <body> </body> </html>

2 Estrutura de um documento criado com o Dreamweaver. (versão xhtml strict)

3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>new Document</title> </head> <body> </body> </html>

org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta

4 Particularizando

5 O tipo de DTD (document type definition) indica ao browser qual o tipo de marcação que está a ser usada e um link para o documento: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd">

o documento: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

6 Abre a tag do elemento html e declara a linguagem usada no documento. Define o tipo de documento como xhtml, versão 1.0, restrita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

7 Abre a tag do elemento html e declara a linguagem usada no documento: <html xmlns=" xml:lang="en" lang="en">

8 Na head do documento é escrito o titulo do documento e são definidas as meta tags que informam o browser do tipo de conteúdo, do conjunto de caracteres usados. É na head que se definem os links para os ficheiros externos: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>new Document</title> </head>

É na head que se definem os links para os ficheiros externos: <head> <meta

9 <body> No corpo do documento está o conteúdo visível na janela do browser. </body>

10 Tipos de DOCTYPES html

11 Strict <!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01//EN" " strict.dtd">

12 Transitional <!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01 Transitional//EN" " loose.dtd">

13 Frameset <!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01 Transitional//EN" " frameset.dtd">

14 Tipos de DOCTYPES xhtml

15 Strict <!DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Strict//EN" " DTD/xhtml1-strict.dtd">

16 Transitional <!DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Transitional//EN" " DTD/xhtml1-transitional.dtd">

17 Frameset <!DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Frameset// EN" " DTD/xhtml1-frameset.dtd">

18 Informa o browser da versão de xml usada e a codificação dos caracteres: <?xml version="1.0" encoding="utf-8"?>

19 Metatags: <meta name="keywords" content="plavras chaves, separadas, por, virgulas" /> <meta name="description" content="uma pequena descrição sobre o conteúdo do site" /> <meta name="revisit-after" content="30 Days" /> <meta name="robots" content="all,index" /> <meta name="author" content="aula de Laboratório / Leonel Cunha" />

site" /> <meta name="revisit-after" content="30 Days" /> <meta name="robots"

20 Links declarados na head; favicon, css e javascript: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="stylesheet.css" type="text/ css"media="all" /> <script type="text/javascript" src="javascriptfile.js"></script>

21 Estrutura de divisões

22 Os marcadores permitem definir e organizar o conteúdo no documento, segundo uma estrutura com significado. <h1>marcadores</h1> O conteúdo é seccionado em partes lógicas chamadas elementos definidos nos seus extremos pelos marcadores (tags). Um elemento é texto envolvido por um par de marcadores.

23 <h1>este é um título</h1> <p>este é um bloco de texto muito curto. bloco de texto curto, com uma quebra de linha<br /> bloco de texto muito curto. bloco de texto muito curto. </p> <p>bloco de texto muito curto.</p>

24 Estrutura de um documento xhtml de transição utilizando div's.

25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>new Document</title> </head> <body> <div id="contentor"> <div id="cabeca"></div> <ul id="menu_principal"> <li><a href="link.html">botao</a></li> <li><a href="link.html">botao</a></li> <li><a href="link.html">botao</a></li> <li><a href="link.html">botao</a></li> </ul> <div id="principal"> <h1>bla bla bla</h1> <p>bloco de texto</p> </div> <div id="secundario"></div> <div id="rodape"></div> </div> </body> </html>

26 Em xhtml todos os elementos devem ser fechados, inclusive os elementos vazios <hr /> <br /> <img />

27 Atributos e valores do elemento. Um elemento pode conter atributos com determinados valores. Ao nome do atributo src corresponde o valor imagem.jpg, ao nome atributo alt corresponde o valor imagem de um carro azul: <img src="imagem.jpg" alt=" imagem do carro azul" >

28 Box Model O browser faz o render dos elementos do documento como se estivessem contidos em caixas, que podem ter padding, margins e contorno. Os elementos podem ser de nível inline ou block.

29 Box Model

30 div: padding margin e border

31 Neste exemplo a div caixa ocupa 100px na janela do browser.

32 Margin collapse

33 Margin collapse

34 Margin collapse

35 Margin collapse

36 Os elementos podem ser de nível inline ou block.

37 Elementos Inline

38 Elementos block

39 Elementos genéricos Inline <span>texto</span> Block <div>conteúdo</div>

40 Fim.

Documentos relacionados

Webdesign A tag HEAD e as Meta tags

Webdesign A tag HEAD e as Meta tags Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net HEAD Como vimos anteriormente, o nosso documento HTML é