Curso de HTML/Introdução

A sintaxe XHTML

O XHTML é a reformulação do HTML baseada no XML. O XHTML tem atualmente três versões, 1.0 e 1.1, ambas linguagens de marcação seguras que se tornaram uma recomendação da W3C, e uma nova versão 2.0 ainda em desenvolvimento.

Características obsoletas

Frames, do inglês quadro, servem para dividir a sua página em várias telas, possibilitando que seja mostrada mais de uma página na mesma tela.

Quando for fazer um frame, ao invés de inserir a tag <body> após a tag </head> deverá utilizar <frameset>.

Atributos de FRAMESET

cols: define as colunas do frame em pixel ou porcentagem. <frameset cols=”X.X”>
rows: define as linhas do frame em pixel ou porcentagem. <frameset rows=”X.X”>
border: define a espessura da borda frameset border=”X”

Já a tag <frame> é inserida entre as tags <frameset></frameset>, ela especifica as páginas que irão abrir nos frames correspondentes.

Atributos de FRAME

src: especifica o endereço que será carregado. <frame src="endereço">
name: nomeia o frame <frame name="nome_frame">
norezise: determina que o frame não poderá ser redimensionando. <frame noresize>

Exemplo de página com frame

<html>
<head>
<title>Exemplo Frame</title>
</head>
<frameset cols="30%,*">
<frame src="http://pt.wikipedia.org/wiki/P%C3%A1gina_principal">
<frameset  cols="30%,*" >
<frame src="http://pt.wikipedia.org/wiki/P%C3%A1gina_principal">
<frame src="http://pt.wikipedia.org/wiki/P%C3%A1gina_principal">
</frameset>
</html>

Página

Introdução/Contexto

Este módulo precisa ser revisado por alguém que conheça o assunto (discuta).

HTML - HiperTextMarkupLanguage - Linguagem de Marcação de Hipertexto.

O HTML é uma linguagem derivada da SGML, criada com o fim específico de formatar textos para a World Wide Web. Neste curso são apresentados os fundamentos do HTML tal como é usado e padronizado pelo W3C (World Wide Web Consortium). Atualmente, o nome correto para a recomendação do W3C é XHTML, mas a continuação do uso de "HTML" não constitui um erro grave (existindo algumas diferenças entre eles que iremos ver mais à frente).

O principal a saber, antes de iniciar o estudo da HTML, é que se trata de um padrão desrespeitado por companhias de'software, que frequentemente incluem "extensões" da linguagem em seus aplicativos. Entretanto, é preciso tomar cuidado para não usar essas extensões, que limitam a correta exibição das páginas em determinados navegadores. Neste curso, portanto, é apresentado o HTML padrão e o XHTML segundo, também, as suas diferenças, conforme [1] e [2].

Material necessário'

Um editor de textos:

Pode ser o Notepad (bloco de notas) do Windows, mas é recomendável algum que suporte a sintaxe HTML, como o Jedit, Vim, Emacs, ou qualquer um de sua preferência.

Um navegador

O Internet Explorer serve, mas é recomendável o uso do Mozilla Firefox ou do Opera, que são mais compatíveis com as regras W3C.

O que é o HTML?

OHTMLé bastante utilizada atualmente, para confecção de documentos e exibição principalmente na Web. A HTML foi inicialmente uma derivada da SGML, uma meta-linguagem (ou seja, uma linguagem para criação de linguagens) com todos os elementos para marcar dados ou textos com atributos. Atualmente, a HTML, ou XHTML, é uma derivada da XML.

A marcação, referida no nome da HTML, é nada mais do que indicar partes especiais num texto simples. Por exemplo: partes em negrito, partes em itálico, inserção de imagens, etc.

Já o hipertexto é o meio no qual vários documentos estão ligados entre si por meio de um ou mais'linksou ligações, áreas de texto especiais que ativam outros documentos com um clique. A ligação pode se estabelecer estruturalmente, também - no cabeçalho do documento pode haver indicação de documento-pai, documento seguinte, etc -, mas é mais comum definir-se a ligação dentro do próprio texto.

O HTML, como linguagem de marcação de hipertextos, permite fazer muitas coisas, desde inserir e formatar texto, até inserir imagens, passando por organizar os conteúdos em tabelas, inserir objetos em formatos de terceiros (tal como Flash, Java, ActiveX, entre outros). Outras coisas são também possíveis em linguagens comerciais derivadas da HTML; neste caso, as características adicionais limitam-se a alguns navegadores ou renderizadores de página. Resumidamente, um navegador ou renderizador é um programa que transforma o código HTML, escrito pelo autor, em uma página de exibição coerente. A HTML é uma linguagem com uma sintaxe rígida em certos aspectos, principalmente se houver interesse em respeitar toda sua norma - alguns programas conseguem contornar pequenas violações.

Como o próprio nome diz, o HTML é uma linguagem de marcação, isso significa que, quando ao trabalhar com HTML, devemos marcar os pontos de início e fim de alterações/formatações.

Essa marcação é feita através de comandos denominadostag's e seus respectivos atributos e ocorre da seguinte forma:

<tag atributo1="valor1" atributo2='valor2'>Texto a ser formatado</tag>

Existem algumas exceções à essa regra, como as tag's usadas para inserir objetos como imagens e quebras de linha. Como você podem ter observado, é possível colocar o valor dos atributos entre apóstrofes (') ou entre aspas (").

O HTML é uma linguagem padronizada, apesar de haver várias extensões. As versões oficiais e padronizadas são publicadas pelo World Wide Web Consortium (ou, abreviadamente, W3C).

Introdução/Uma rápida introdução ao HTML

O que é uma tag?

Um documento HTML não é nada mais do que um arquivo de texto plano, escritas em um arquivo com a extensão HTML, Então você me pergunta: como se faz para aumentar o tamanho da letra, colocar em negrito, itálico, mudar a cor e todo tipo de coisa que vejo na Internet? A resposta é, para isso usa-se sequências de caracteres para indicar ao navegador que alguma parte do seu texto, não deve ser mostrada como o resto, que aquele pedaço, deve ser vermelho e em itálico, para aumentar a visibilidade e chamar atenção, o nome desta sequência de caracteres é chamada de tag (em inglês significa marcação, dando sentido ao Markup (marcação da sigla HTML), que sempre começam com o caractere <(menor que) e terminam com o'>(maior que). Devido a isso, quando for necessário inserir um destes caracteres numa página html, deve-se usar a notação <(lowerthan - menor que) e >(greterthan - maior que), respectivamente, já que o que vier depois do < será entendido como umatag, resultando em vários problemas na apresentação do seu documento. Atagé um comando que diz como um texto será entendido, ou formatado pelo navegador. Existem dois tipos detags, as como a tag <n> que marca um bloco de texto, em que é obrigatório haver uma marca dizendo onde termina a formatação, no caso, o negrito, sendo no caso destatag</n>(repare na barra, que ocorre no fechamento de todas astagsque marcam um bloco); e astagsque terminam nela mesma, como atag<br />, que indica um salto de linha, e não há nada mais a ser dito(repare no espaço e na barra no final, diferente do outro tipo detag).

Segundo a W3C todas astagsdevem ser escritas em minúsculo.

Estrutura básica de um documento HTML

<html>

<head>

<title> Título </title>

</head>

<body>

<p> Este é um parágrafo </p>

</body>

</html>

Veja acima, que todas astagsabertas, foram fechadas, o documento começa com atag<html> e termina com o fechamento destatag</html>. O fechamento de umatagé representada pela /.

<html>'- marca do início do documento HTML
<head>- início do cabeçalho
<title>- título
<body>- corpo do documento
<p>- parágrafo

Atributos das'tags

Quando umatagpossui um atributo, ele é inserido antes do > na abertura datag, ou antes do espaço . <tag atributo="valor">texto</tag> ou <tag atributo="valor" />

Font

Uma fonte é um conjunto de números, símbolos e caracteres. Uma fonte descreve uma determinada face de tipos, juntamente com outras qualidades, como tamanho, espaçamento e densidade.

Color

O atributocoloré utilizado para modificar a cor de um pedaço de texto e pode receber 3 tipos de valores:

Hexadecimal

Neste a cor é representada por um valor em hexadecimal que indica a cor no sistema RGB, ficando #abcdfe

RGB
Nome da cor:

Neste caso o valor e um nome de cor pré-definida

Black #000000	Green #008000	Silver #C0C0C0	Lime #00FF00
Black Black#000000	Olive #808000	White #FFFFFF	Yellow #FFFF00
Navy #000080	Maroon #800000	Red #FF0000	Blue #0000FF>
Purple #800080	Teal #008080	Fuchsia #FF00FF	Aqua #00FFFF

Size

O atributosize'é usado para modificar o tamanho da fonte de um pedaço de texto.

Relativo: quando se utiliza os sinais de maior e menor para indicar que aquele texto deve ser maior x ou menor x que a fonte do local.
Nomeado: big small x-big

Os elementos do HTML/Agrupamento de conteúdo

Tal como qualquer linguagem de marcação, a HTML tem marcas ou elementos (conforme nomenclatura oficial do W3C). Os elementos são diferenciados do texto comum por uma marca de início - o "<" e uma marca de final - o ">". Tecnicamente, de acordo com a XML, tudo que está dentro de um "< >" é uma marcação (Markup), e tudo que não está dentro, um texto (CharData).

Podemos vulgarmente classificar os elementos de marcação em dois tipos: os elementos normais e os elementos simples.

Elementos normais

Chamamos de elementos normais aos elementos de marcação que obrigatoriamente aparecem aos pares, envolvendo um trecho de texto. Sua função é atribuir uma propriedade ao texto envolvido, e somente ao texto envolvido. Sendo assim, nos elementos normais há sempre uma marcação de abertura e uma marcação diferenciada no fechamento.

Texto em itálico

Exemplo de texto em itálico:

Tal como a torre pisa <i>estas palavras</i> estão inclinadas.

Saída:

Tal como a torre pisa estas palavras estão inclinadas.

É possível fazer marcações "em cascata", ou seja, marcar trechos dentro de trechos marcados com outra característica.

Texto em negrito

Exemplo de texto sublinhado dentro de texto em negrito.

<b>O Fortuna, velut luna statu variabilis, <u>semper crescis aut decrescis...</u></b>

O Fortuna, velut luna statu variabilis, semper crescis aut decrescis...

Cruzamento de atributos

Não cruze atributos distintos. Embora o HTML possa ser permissivo quanto a isso, o XHTML já não o é:

Exemplo de cruzamento de atributos distintos (Não faça isto nos seus projetos)

<b>Cruzamentos entre atributos distintos <i>dá sempre para</b> o torto</i>.

Saída:

Cruzamentos entre atributos distintos dá sempre para o torto.

Elementos simples

Os elementos simples são aqueles que se encontram sempre sozinhos, pois a sua função é produzir no texto ou na página alguma exibição especial - ou indicar alguma coisa que não precisa necessariamente ser exibida.

Como não possuem marca de fechamento, os elementos simples são caracterizados por uma barra inclinada/ao final, antes do ">". Quaisquer elementos simples deve ter essa barra, para indicar ao navegador que não é preciso procurar uma marcação de fechamento. (Isso simplifica o processo de exibição da página, em alguns programas.)

Linha Horizontal

Exemplo - linha horizontal:

Nome: Alberto<hr />Idade: 46 anos

Saída

Nome: Alberto

Idade: 46 anos

Mudança de linha

Exemplo - Mudança de uma linha:

E eu disse que poderia mudar de linha<br />mas ninguém acreditou!

Saída:

E eu disse que poderia mudar de linha
mas ninguém acreditou!

Mudança de parágrafo

Exemplo da mudança de parágrafo:

É recomendável antes de qualquer texto escrever-se<p>, para possibilitar a mudança de parágrafo:

<p>Era uma vez um parágrafo</p><p>Era uma vez outro parágrafo</p>
<p>...tantos parágrafos que poderiam existir aqui</p>

Saída:

Era uma vez um parágrafo

Era uma vez outro parágrafo

...tantos parágrafos que poderiam existir aqui

Estrutura básica

Todo documento HTML obedece a uma estrutura padrão composta por 3'tagsou elementos essenciais e mais alguns atributos.

A estrutura é a seguinte:

<html>
 <head>
  <title>Título da Página</title>
 </head>
 <body>
  "Conteúdo da página"
 </body>
</html>

A saída na Janela de umbrowserseria

Explicação dastagsda estrutura básica

Tags <html></html>'

Esta é atagmais famosa do HTML. Ela inicia e termina todos os documentos HTML que seguem o padrão W3C. Todo o conteúdo que será exibido ou utilizado pela páginawebdeve estar declarado entre elas nas devidas sub-tags.

Tags <head></head>'

Mais conhecidas comotagsde cabeçalho, elas podem conter as seguintes declarações:

Do Título da página:<title></title>'

De estilos CSS que a página utilizará:<style></style>'

DescriptsJavaScript, VBscript, etc:<script></script>'

De meta dados:<meta>'

Delinksque permitem a adição de outros conteúdos dependendo dobrowsersendo utilizado:<link>'

Tags <title></title>'

Sãotagsutilizadas para definir o título da página. Este título é sempre exibido na Barra de Título dobrowser.

Tags <body></body>'

Definem o local onde deve estar o conteúdo dositee a estrutura na qual ele será exibido. Entre essastagsserá incluído o conteúdo da página que poderá ser estruturado através de tabelas ou com o uso de estilos CSS. Podem ser adicionadoslinksque farão a ligação com outras páginaswebe utilizados os recursos que foram declarados entre as tags <head></head> (scripts, estilos CSS etc).

Os elementos do HTML/Dados tabulares

Tabelas

Para se iniciar uma tabela dentro do documento html usa-se a tagtable, porém são necessárias as tagstd e trpara construí-la.

<table>
  <tr>
    <td>Uma célula</td>
    <td>Outra célula</td>
  </tr>
  <tr>
    <td>Uma célula em quebra de coluna</td>
    <td>Uma última tabela</td>
  </tr>
</table>

A saída seria:

Uma célula	Outra célula
Uma célula em quebra de coluna	Uma última tabela

Parâmetros de Table

Para se manipular o aspecto gráfico e a disposição de uma tabela usam-se vários parâmetros

Width

width dá o comprimento da tabela na página. Um comprimento width pode ter o seu valor em pixels ou em percentagem de espaço. 100% representa a ocupação máxima do espaço disponível para a tabela.

<!-- A tabela tem de largura 250 pixels -->
<table width="250">
  <tr>
     <td>Tabela de uma célula</td>
  </tr>
</table>

<!-- A tabela ocupa 70% do espaço disponível para ela -->
<table width="70%">
  <tr>
    <td>Table de uma célula</td>
  </tr>
</table>

A saída desta última tabela é:

Table de uma célula

Height

Assim como widtho parâmetro height comporta-se da mesma maneira, alterando a altura da tabela.

<table height="150">
  <tr>
    <td>Uma célula</td>
  </tr>
</table>

A saída é:

Uma célula

Border, Bgcolor e bdcolor

Borderdefine a espessura da borda da tabela; Bgcolordefine a cor de fundo da tabela; Bdcolor ou bordercolor define a cor da borda da tabela;

<table border="4" bdcolor="green" bgcolor="grey">
  <tr>
    <td>Uma mistura de cores berrante!</td>
  </tr>
</table>

A saída seria:

Uma mistura de cores berrante!

Cellpadding

Cellpadding aumenta ou diminui a borda interior em cada célula.

<table cellpadding="5">
  <tr>
    <td>Padding 5</td>
  </tr>
</table>

A saída é:

Padding 5

Outra célula

Cellspacing

Aumenta o espaço entre células.

<table cellspaccing="5">
  <tr>
    <td>CellSpacing é 5</td>
  </tr>
</table>

CellSpacing é 5	Outra célula
Repare no espaço que elas têm entre si

<td>

No corpo da tabela existem várias tags que representam a forma como os dados são visualizados: assim são controladores da organização do espaço. <td> representa o conteúdo dentro de uma tabela. td quer dizer table data.

<table>
 <tr>
  <td>Conteúdo</td>
 </tr>
</table>

<tr>

<tr> controla e incrementa uma nova linha na tabela. tr quer dizer table row.

<table>
 <tr> <!-- Linha de começo é sempre necessária -->
  <td>
 </tr>
 <tr> <!-- Nova linha -->
 </tr>
</table>

<th>

<th> é a linha mestra e não pode ser deformada por outras de nível inferior, sendo assim qualquer uma das outras terá que se ajustar a esta. Embora seja aconselhável a inserção desta tag numa das linhas que queremos para mestra, não é necessária atualmente pois os ajustes da tabela são feitos pelo conteúdo da tag style.

<table>
 <th>
  <td></td>
 </th>
 <tr>
  <td></td>
 </tr>
</table>

Imagens

Podemos criar imagens usando a marcação img.

Exemplo:

<img src="imagem.jpg" alt="A minha imagem">

Neste caso nós estamos a requisitar a imagem denominada imagem.jpg incluindo o parâmetro src e damos-lhe um comentário com o parâmetro alt. Estes dois são os parâmetros obrigatórios exigidos pela W3C. Existem mais opções para alteração do aspecto da imagem:

Width

Para se alterar a largura da imagem recorre-se ao parâmetro width

<!-- Altera a largura da imagem para 200 pixels -->
<img src="imagem.jpg" alt="A minha imagem" width="200">

<!-- Altera a largura da imagem para 75% do seu valor real -->
<img src="imagem.jpg" alt="A minha imagem" width="75%">

Height

Pode-se alterar a altura da imagem com o parâmetro height através da referência por percentagem %assim como por pixelagempx

<!-- Altera a largura e a altura da imagem para 200 e 100 pixels respectivamente -->
<img src="imagem.jpg alt="A minha imagem" width="200" height="100">

<!-- Altera somente a altura da imagem para 150 pixels -->
<img src="imagem.jpg" alt="A minha imagem" height="150">

É necessário ter sempre em atenção o uso do parâmetro alt numa imagem para assegurar a compatibilidade com as normas da W3C. Se não se quiser comentar nada na imagem pode-se somente deixar em branco o valor de alt.

Align

Podemos sempre alinhar as imagens na página para torná-la mais agradável e atraente. Para isso usa-se o parâmetro align

<!-- Alinhar uma imagem à direita -->
<img src="imagem.jpg" alt="Uma imagem alinhada à direita" align="right">

Border

Por padrão uma imagem que é inserida no documento HTML apresenta uma borda de 2 pontos de espessura. Com o parâmetro border é possível diminuir, retirar ou aumentar essa borda em torno da imagem.

Para mudar a cor da borda inserida diretamente na imagem, utilizar a seguinte linha de comando:

<img src="imagem.jpg" alt="Uma imagem bem contornada" style = "border:#ffcc66 solid 10px;">

Normalmente usa-se uma técnica muito mais atraente: contornar a imagem com uma tabela.

<!-- Aumentar para 4 pontos a borda da imagem -->
<img src="imagem.jpg" alt="Uma imagem!" border="4">

<!-- Fazer desaparecer a borda em volta da imagem -->
<img src="imagem.jpg" alt="Uma imagem sem borda" border="0">

<!-- Usar uma tabela para contornar a imagem -->
<table border="4" bdcolor="green" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="imagem.jpg" alt="Uma imagem bem contornada" border="0"></td>
  </tr>
</table>

Links

Para fazermos uma imagem com uma hiperligação basta usar a tag acomo se usa no texto.

<a href="http://www.dominio.com/pagina" target="_parent">
  <img src="imagem.jpg" alt="Imagem com ligação" border="0">
</a>

Curiosidade

Podemos criar uma galeria de imagens clicáveis usando todos os parâmetros de cima. Encolhemos as imagens e criamos umlinkà imagem original, organizando-as dentro de uma tabela.

<table width="300" border="1" bdcolor="grey" cellpadding="1" cellspacing="1">
  <tr>
    <td width="100" height="100"><a href="imagem1.jpgl"><img src="imagem1.jpg" alt="Imagem 1"
                                      width="200" height="200" border="0"></a></td>
    <td width="100" height="100"><a href="imagem2.jpgl"><img src="imagem2.jpg" alt="Imagem 2"
                                      width="200" height="200" border="0"></a></td>
    <td width="100" height="100"><a href="imagem3.jpgl"><img src="image3.jpg" alt="Image 3"
                                      width="200" height="200" border="0"></a></td>
  </tr>
  <tr>
    <td width="100" height="100"><a href="imagem4.jpgl"><img src="imagem4.jpg" alt="Imagem 1"
                                      width="200" height="200" border="0"></a></td>
    <td width="100" height="100"><a href="imagem5.jpgl"><img src="imagem5.jpg" alt="Imagem 2"
                                      width="200" height="200" border="0"></a></td>
    <td width="100" height="100"><a href="imagem6.jpgl"><img src="image6.jpg" alt="Image 3"
                                      width="200" height="200" border="0"></a></td>
  </tr>
</table>

A Saída dentro de um browser teria o seguinte aspecto (ao clicar-se numa imagem, abrir-se-á na mesma janela a respectiva imagem, mas no tamanho normal):

Os elementos do HTML/Metadados

As metatagssão usadas para diversas ocasiões. É possível fazer passar aobrowserinformações acerca do conteúdo, do autor, de descrições, etc, assim como controlar fluxo de informação e indexação acrawlersdos serviços de motores de busca.
Para se usar este recurso, usamos a tag <meta> dentro do corpo de <head>, composto pelos parâmetros HTTP-EQUIV, name e content.

<html>
<head>
  <title>Página</title>
  <meta http-equiv="Refresh" content="60" />
</head>
<body>
</body>
</html>

No exemplo acima, atagmeta indica aobrowserque a página em questão deve ser atualizada de 60 em 60 segundos. Outrastagsmeta podem ser combinadas de forma a criarem outras instruções. De seguida apresentamos mais umas.

Indexação

Como já foi referido, as metatagspodem ser usadas para informar aoscrawlersdos motores de busca o tipo de dados, as páginas, etc que podem ou não ser indexadas. Essas instruções são passadas usando o parâmetro name="robots" seguido da instrução que queremos passar aocrawlercom content="<informação a passar ao crawler>". Exemplos destas metatags parabots:

<meta name="robots" content="INDEX" />: Este parâmetro informa aocrawlerque pode indexar a página, ou seja, indexar a informação que se encontra nela.
<meta name="robots" content="FOLLOW" />: Este parâmetro passa aocrawlera informação das hiperligações existentes na página, levando-o a segui-las para poder ou não - consoante as metatagsque existirem nas outras páginas - a indexar a informação lá existente.
<meta name="robots" content="NOINDEX" />: Com isto estamos a pedir aocrawlerpara não indexar a página referida.

Também é possível combinar vários parâmetros:

<meta name="robots" content="INDEX,NOFOLLOW" />: Lendo isto, ocrawlerindexará a página referida mas não seguirá as hiperligações sugeridas no resto do documento.

Descrição

Com estastagsdescritivas, podemos oferecer ao serviço de indexação ou motor de busca um texto personalizado e descritivo da página, ao invés das primeiras linhas que contem.

<meta name="description" content="Esta é a página pessoal do Vitor!" />

Não há muita variação possível aqui, a descrição é feita de apenas uma forma.

Palavras chave

Para quecrawlersindexem por categorias, precisamos fazer passar uma metatag com palavras chave acerca dosite:

<meta name="keywords" content="palavra chave nº1, palavra chave nº2, ..." />

Autor

É possível fazer passar informação do autor da página através dasmetatags. A forma de uso é a seguinte, desconhecendo-se atualmente outra forma de atuar.

<meta name="author" content="Lightningspirit" />

Cache

Podemos através dasmetatagsoptar por não fazercachetanto à página como aos ficheiros nela submetidos nobrowserdo cliente.

<meta http-equiv="cache-control" content="no-cache" />

ou

<meta http-equiv="Pragma" content="no-cache" />

Refresh e redirecionamentos

Com o mesmo http-equiv, é possível fazer passar aobrowser o refresh da página de x em x segundos:

<meta http-equiv="Refresh" content="60" />: De 60 em 60 segundos (1 em 1 minuto) o browser atualizará a página

Do mesmo modo, acrescentando apenas um parâmetro, é possível redirecionar o browser para outra página:

<meta http-equiv="Refresh" content="3;URL:página de destino" />: Ao entrar nesta página, o cliente é redirecionando dentro de 3 segundos para a URL especificada.

Os elementos do HTML/Texto

Editores de HTML

Como já tivemos oportunidade de observar, o código de um documento HTML é texto puro (isto é, é completamente traduzível através da tabela de caracteres ASCII). Visto isto, qualquer editor de texto sem formatação permite escrever código HTML. Seguem-se alguns exemplos:

Notepad (Windows)
Vim (Unix)
Emacs (Unix)
Xemacs (Unix e Windows)
Wordpad (Windows)
Edit (DOS)

Obviamente que para trabalhos mais complexos o melhor é usar-se um editor HTML especializado. Existem muitos gratuitos na internet. Seguem-se alguns exemplos:

PHP Editor - Editor de PHP compacto e completo. Também serve para HTML.
AceHTML Free - Versão gratuita do aclamado AceHTML. Possui muitas funções. É a melhor opção para edição de HTML.
Sothink HTML - Para quem tem um computador lento e precisa de poupar memória, este editor de HTML é dos melhores que andam pela rede.
OpenOffice.org - Para quem tem o OpenOffice ou queira instalá-lo, também poderá usar a ferramenta de edição de HTML existente no pacote.

Seja qual for a sua opção, aconselho-o a vasculhar pelo menos todos estes quatro programas aqui apresentados. Depois de um tempo a experimentá-lo poderá perceber qual deles é o melhor para a sua situação.

Marcações básicas

O primeiro passo é criar um ficheiro vazio e dar-lhe a extensão .html. Para detalhes sobre como fazer isto consulte a documentação do seu Interface com o Utilizador (User Interface). Seguidamente é necessário abrir o ficheiro vazio com o editor de texto escolhido.

Começa-se por inserir a estrutura básica dos documentos HTML que, como já vimos, é composta por um mínimo de 3 TAGs normais (<html>, <head> e <body>):

<html>
  <head>
    <title>Título da Página</title>
  </head>
  <body>
    DOCUMENTO HTML<hr />Este documento tem o propósito de mostrar
    somente o que existe
    em &lt;body&gt; saí no corpo do ''browser''.
  </body>
</html>

A saída é a seguinte:

Os elementos do HTML/Usando seletores em elementos HTML

CSS - Cascading Style Sheet

Introdução

Folhas de estilo em cascata (CSS) é a formatação de seu (X)HTML, qualquer alteração (cor de fonte, tamanho de fonte, tamanho da alguma coluna, etc.) no HTML, antigamente deveria ser feita em todas as páginas de seu site.

Agora que já vimos HTML, podemos ver como estilizar nosso documento HTML. A estilização permite que criemos estilos para os nossos documentos HTML, de modo a colocar uma "cara" nos documentos, podemos mudar a cor do fundo, a fonte, criar caixas com bordas, e muito mais. Mais aí você me pergunta: "Eu já não posso fazer isso em HTML"?

Mas porque?

Simples, os sites antigamente eram desenvolvidos com a estrutura junto com a formatação, isso gerava um trabalho imenso a cada alteração. E o código desses sites eram sujos demais, com tabelas desnecessárias e diversas "sujeiras" criadas por editores WYSIWYG.

Com o bom uso da CSS isso é possível ser contornado sem alterar a estrutura do projeto web.

Por que devo usar CSS?

Código enxuto, deixa seu (X)HTML a ser usado para sua função principal, sem sujar o código, focando na acessibilidade e semântica;
Facilidade de manutenção;
Otimização de tempo de carregamento da página.

Atributos CSS e seus efeitos

Nome	Valor	Valor inicial	Herdado?	Percentagens (padrão: N/A)	Grupo de Mídias
background-attachment	scroll \| fixed \| inherit	scroll	no		visual
background-color	<color> \| transparent \| inherit	transparent	no		visual
background-image	<uri> \| none \| inherit	none	no		visual
background-position	[ [ <percentage> \| <length> \| left \| center \| right ] [ <percentage> \| <length> \| top \| center \| bottom ]? ] \| [ [ left \| center \| right ] \|\| [ top \| center \| bottom ] ] \| inherit	0% 0%	no	refer to the size of the box itself	visual
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit	repeat	no		visual
background	['background-color' \|\| 'background-image' \|\| 'background-repeat' \|\| 'background-attachment' \|\| 'background-position'] \| inherit	see individual properties	no	allowed on 'background-position'	visual

Sintaxe CSS

A sintaxe CSS é bem simples, segue abaixo um exemplo:

 seletor {
   propriedade: valor;
 }

Onde:

seletor é a tag HTML que você quer estilizar. propriedade é a propriedade CSS que você quer aplicar para o seletor. valor é o valor a ser declarado para propriedade.

Seletores

Existe diversas formas de estilizar um seletor, desde estilizar um seletor genérico, por exemplo:

 div {
    propriedade: valor;
 }

 /* Desta forma todos elementos 'DIV' receberiam as declarações CSS. */

Até estilizar apenas um único elemento, por exemplo, um elemento com o atributo 'ID' (lembre-se que em seu (X)HTML não pode existir elementos com o atributo 'ID' igual):

#ElementoUnico {
    propriedade: valor;
}

/* Desta forma apenas o elemento com ID = ElementoUnico receberia as declarações CSS. */

Nota: No caso de estilização por 'ID' não há diferenças se escrevermos "#ElementoUnico" ou "div#ElementoUnico" Veremos a seguir que pode existir diferenças na estilização utilizada desta forma com elementos com o atributo 'CLASS'.

Seletor de tag

Como já vimos, é o seletor CSS utilizado para elementos genéricos.

Exemplo:

p {
    propriedade: valor;
}

/* Desta forma todos elementos 'P' receberiam as declarações CSS. */

Seletor de ID

Como já vimos, é o seletor CSS utilizado para um elemento específico. Este seletor vem sempre acompanhado de "#" antes da 'ID'

Exemplo:

#ElementoUnico {
    propriedade: valor;
}

/* Desta forma apenas o elemento com ID = ElementoUnico receberia as declarações CSS. */

Seletor de Classe

No (X)HTML pode (e deve) ser re-aproveitadas classes de elementos que recebem as mesmas declarações. Este seletor vem sempre acompanhado de "." antes da 'CLASS'

Exemplo:

CÓDIGO HTML:

<a class="estilosIguais" href="#">Link A</a>
<a class="estilosIguais" href="#">Link B</a>

CÓDIGO CSS:

.linksIguais {
    color:red;
    text-decoration:underline;
}
/* Desta forma todos os ELEMENTOS com a classe 'estilosIguais" receberia as declarações CSS. */

Por quê se disse "ELEMENTOS" e não "LINKS HTML"? Por causa da forma que o CSS foi escrito.

Declarando apenas a classe como seletor, você está indicando que TODOS elementos com esta classe (seja link, ou não) receberá as propriedades do CSS.

Se o seu desejo for especificar estas propriedades apenas para links, você deve indicar a tag alvo antes da classe:

Exemplo:

CÓDIGO HTML:

<a class="estilosIguais" href="#">Link A</a>
<a class="estilosIguais" href="#">Link B</a>

<p class="estilosIguais">Este parágrafo receberá as declarações CSS?</p>

CÓDIGO CSS:

a.linksIguais {
    color:red;
    text-decoration:underline;
}
/* Desta forma todos os ELEMENTOS <a>, com a classe 'estilosIguais" receberia as declarações CSS. */