<!DOCTYPE html PUBLIC......> <html> <head> </head> <body> </body> </html>
Estrutura de um documento criado com o Dreamweaver. (versão xhtml strict)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" 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>
Particularizando
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" "http://www.w3.org/tr/xhtml1/dtd/ xhtml1-strict.dtd">
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"
Abre a tag do elemento html e declara a linguagem usada no documento: <html xmlns="http:// www.w3.org/1999/xhtml" xml:lang="en" lang="en">
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>
<body> No corpo do documento está o conteúdo visível na janela do browser. </body>
Tipos de DOCTYPES html
Strict <!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/ strict.dtd">
Transitional <!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/ loose.dtd">
Frameset <!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/ frameset.dtd">
Tipos de DOCTYPES xhtml
Strict <!DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/ DTD/xhtml1-strict.dtd">
Transitional <!DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/ DTD/xhtml1-transitional.dtd">
Frameset <!DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Frameset// EN" "http://www.w3.org/tr/xhtml1/ DTD/xhtml1-frameset.dtd">
Informa o browser da versão de xml usada e a codificação dos caracteres: <?xml version="1.0" encoding="utf-8"?>
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" />
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>
Estrutura de divisões
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.
<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>
Estrutura de um documento xhtml de transição utilizando div's.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" 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>
Em xhtml todos os elementos devem ser fechados, inclusive os elementos vazios <hr /> <br /> <img />
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" >
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.
Box Model
div: padding margin e border
Neste exemplo a div caixa ocupa 100px na janela do browser.
Margin collapse
Margin collapse
Margin collapse
Margin collapse
Os elementos podem ser de nível inline ou block.
Elementos Inline
Elementos block
Elementos genéricos Inline <span>texto</span> Block <div>conteúdo</div>
Fim.