Lembretes HTML

<< Click to Display Table of Contents >>

Navigation:  Html >

Lembretes HTML

Previous pageReturn to chapter overviewNext page

Estrutura básica

 

<html>

 

  <head>

  <title></title>

  </head>

 

  <body>

  </body>

 

</html>

 

Validador de html

 

http://validator.w3.org

 

Estrutura com assinatura do DOCTYPE (Transitional)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

   "http://www.w3.org/TR/html4/loose.dtd">

 

 <html> 

<head> 

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 

    <title>Minha viagem pelo Brasil em um Segway</title>

  </head>

  <body>

 

    <h1>Segway no Brasil</h1>

    <p>

      Documentacao de minha viagem pelo Brasil em meu proprio Segway!

    </p>

 

    <h2>20 de agosto de 2005</h2>

    <a href="images/segway1.jpg"><img src="images/peq.jpg" title="meleca" alt="alterna"></a>

    <p>

      Bem, ja percorri 5.000 km e passei por alguns lugares muito

      interessantes no caminho

    </p>

  </body>

</html>

 

Estrutura com assinatura do DOCTYPE (strict)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 

   "http://www.w3.org/TR/html4/strict.dtd">

 

<html> 

  <head> 

     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 

     <title>Minha viagem pelo Brasil em um Segway</title>

  </head>

  <body>

 

    <h1>Segway no Brasil</h1>

    <p>

      Documentação de minha viagem pelo Brasil em meu proprio Segway!

      <br>

    </p>

 

    <h2>20 de agosto de 2005</h2>

    <p>

    <a href="images/segway1.jpg"><img src="images/peq.jpg" title="meleca" alt="alterna"></a>

      <br>Bem, ja percorri 5.000 km e passei por alguns lugares muito

      interessantes no caminho

    </p>

  </body>

</html>

 

Atributos básicos

 

<p>É usado para parágrafo.</p>

<b>Torna o texto negrito.</b>

<i>Texto em itálico</i>

 

<h1>Cabeçalho</h1>

<h2>Subtítulo</h2>

<h3>Sub-subtítulo</h3> 

 

É usado para parágrafo.

Torna o texto negrito. Texto em itálico

Cabeçalho

Subtítulo

Sub-subtítulo

 

Atributos avançados

 

<em>Este texto está no modo ENFATIZADO (por padrao eh italico)</em>

<small>Este é um texto bem pequeno</small>

<blockquote>Indentação diferenciada para destaque de texto</blockquote>

Aqui está uma exemplo<code>for i = 1 to 200</code>

linha1<br>linha2

<hr>este atributo coloca uma linha horizontal

 

Este texto está no modo ENFATIZADO (por padrao eh italico)
Este é um texto bem pequeno

Indentação diferenciada para destaque de texto

Aqui está uma exemplofor i = 1 to 200
linha1
linha2
este atributo coloca uma linha horizontal

 

Listas

 

Lista ordenada

 

<ul>

  <li>Um item de lista</li>

  <li>Outro item de lista</li>

</ul>

 

 

  • Um item de lista
  • Outro item de lista

Lista numerada

 

<ol>

  <li>Primeiro item da lista</li>

  <li>Segundo item da lista</li>

</ol>

 

 

  1. Primeiro item da lista
  2. Segundo item da lista

 

Lista de definição

 

<dl>

  <dt>Html</dt>

    <dd> Html Basico</dd>

      <dt> Aprender</dt>

</dl>

 

 

Html
Html Basico
Aprender

Lista mistas

 

<OL type="I">

  <LI>Seção I</LI>

  <OL type="A">

    <LI>tópico A</LI>

    <UL TYPE="disc">

      <LI>Ítem 1</LI>

      <LI>Ítem 2</LI>

      <UL TYPE="square">

        <LI>Sub-ítem 1</LI>

        <LI>Sub-ítem 2</LI>

      </UL>

      <LI>Ítem 3</LI>

    </UL>

    <LI>tópico B</LI>

    <UL TYPE="disc">

      <LI>Ítem 1</LI>

      <UL>

        <LI>Sub-ítem 1</LI>

        <LI>Sub-ítem 2</LI>

        <LI>Sub-ítem 3</LI>

      </UL>

    </UL>

  </OL>

</OL>

 

 

 

 

 

  1. Seção I
    1. tópico A
      • Ítem 1
      • Ítem 2
        • Sub-ítem 1
        • Sub-ítem 2
      • Ítem 3
    2. tópico B
      • Ítem 1
        • Sub-ítem 1
        • Sub-ítem 2
        • Sub-ítem 3

 

O atributo type pode ser:

 
1: lista numerada;

A: lista com letras maiúsculas;

a: lista com letras minúsculas;

I: lista com algarismos romanos usando caracteres maiúsculos

i: lista com algarismos romanos usando caracteres minúsculos

 

Links

 

<a href="../outro_dir.html">Acessar o site</a>

<a href="http://www.site.com.br">Acessar o site</a>

<a href="mailto:nobody@html.net">Enviar e-mail para nobody em HTML</a>

 

Acessar o site
Acessar o site
Enviar e-mail para nobody em HTML

 

Âncoras dentro da própria página

 

  <body>

 

    <p><a href="#heading1">Link para cabeçalho 1</a></p>

    <p><a href="#heading2">Link para cabeçalho 2</a></p>

 

    <h1 id="heading1">Cabeçalho 1</h1>

    <p>Texto texto texto texto</p>

 

    <h1 id="heading2">Cabeçalho 2</h1>

    <p>Texto texto texto texto</p>

  

  </body>

 

Imagens

 

<img src="images/logo.png">

<a href="http://www.html.net"><img src="logo.png"></a>

<img src="logo.gif" alt="logotipo do HTML.net">

<img src="logo.gif" title="Aprenda HTML no site HTML.net">

<img src="logo.png" width="141" height="32">

 

Tabelas

 

<table border="1">

  <tr>

    <td>Célula 1</td>

    <td>Célula 2</td>

  </tr>

  <tr>

    <td>Célula 3</td>

    <td>Célula 4</td>

  </tr>

</table>

 

Célula 1 Célula 2
Célula 3 Célula 4

 

<table border="1" width="30%">

<td align="right" valign="top">Célula 1</td>

 

Para primeira linha ocupar as 3 colunas:

 

<table border="1">

  <tr>

    <td colspan="3">Célula 1</td>

  </tr>

  <tr>

    <td>Célula 2</td>

    <td>Célula 3</td>

    <td>Célula 4</td>

  </tr>

</table>

 

Célula 1
Célula 2 Célula 3 Célula 4

 

Para primeira coluna ocupar as 3 linhas:

 

<table border="1">

  <tr>

    <td rowspan="3">Célula 1</td>

    <td>Célula 2</td>

  </tr>

  <tr>

    <td>Célula 3</td>

  </tr>

  <tr>

    <td>Célula 4</td>

  </tr>

</table>

 

Célula 1 Célula 2
Célula 3
Célula 4

 

Botão  (VER MAIS SOBRE)

 

<button>

  Olá isto é um <b>botão</b>

  <br>

  <br>

    Posso colocar quebras de linha nele!

  <hr>

    E outras coisas

  <br>

  <img src="http://www.criarweb.com/images/logo_desarrollo_web.gif" width="261" height="35" alt="">

</button>