HTML

Conteúdo abordado nesta página


Home

É o conjunto de conhecimento adquirido que possibilita criar, desenvolver e gerir paginas para internet.


HTML (HyperText Markup Language), não é uma linguagem de programação e sim uma linguagem de marcação de textos usada para estruturar página para web interpretada pelo Browser.

XML (EXtensible Markup Language), é uma extensão da linguagem HTML do qual reúne todas as vantagens do antecessor e amplia a linguagem com a possibilidade de criar suas próprias tags de marcação da linguagem.

XHTML (EXtensible HyperText Markup Language), resume-se a união de duas linguagens, o HTML e o XML. Tendo como objetivo uma linguagem real das melhores tags do HTML e o avanço do XML.

Vantagens do XHTML

Esta linguagem já se tornou o padrão da web e com a principal vantagem de compatibilidades com todos os navegadores de internet. Dentre outras segue com novas tags de marcação, estrutura mais organizada, a padronização e validação pela W3C.

Diferenças entre HTML e XHTML

As principais diferenças são voltadas ao que não era necessário no HTML aqui se tornam obrigatório. Então vejamos as mais notáveis e importantes tendo isso como regra básica do XHTML.

A programação da página neste momento pode ser desenvolvida em qualquer editor de texto simples, bastando apenas de salvar o documento com a extensão .htm ou .html neste caso o mais utilizado e sem nenhuma diferença estre estes dois tipos para que torne um arquivo de página de internet e não apenas um arquivo do tipo texto.
Neste caso enquanto desenvolvemos a programação dentro do editor de texto, dá se o nome de código fonte da página de web. Enquanto que o teste é feito no Browser (Navegador de Internet).

É importante ressaltar que nomes de arquivos e pastas devem ser com letras minúsculas, sem espaços, sem caracteres, sem acentuação, aceitando apenas o uso se necessário de underline (Tecla de traço inferior "_").
Durante o desenvolvimento de um site teremos muitos arquivos e é extremamente importante a organização destes entre pastas.
Outra coisa a ser notada é que uma estrutura de uma página de internet é o HTML puro e básico, independentemente da linguagem de programação a ser adotada.

Declaração do DOCTYPE

No XHTML toda página inicia com a declaração de <!DOCTYPE> que neste caso não é uma tag. Este tem a finalidade declarar a linguagem a ser utilizada e a validação dos códigos junto ao W3C.

Ficando a declaração completa da seguinte maneira:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Estrutura padrão do documento</title>
</head>
<body>
Conteúdo do documento HTML / XHTML no W3C
</body>
</html>

Resultado Estrutura documento

!DOCTYPE (Document Type Definition, ou DTD) tem a finalidade de indicar a linguagem e a versão usada no código desta página.

html PUBLIC sendo html a indicação da linguagem de marcação usada e PUBLIC um indicador formal público como definição no tipo do documento.

"-//W3C//DTD XHTML 1.0 Transitional//EN" referenciando ao catálogo padrão da W3C, o DTD é o tipo do documento e sua linguagem e versão compatível e o EN identifica o idioma Inglês do código no padrão mundial.

Existem 03 tipos de documentos básicos, vejamos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Transitional: O modo mais comum, onde é utilizado na migração do HTML para o XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Strict: Para código100% XHTML e não aceita erros

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset: Utilizado quando se utiliza FRAMES (quadros) no site

<html>...</html> Usado para definir a estrutura padrão de documento HTML/XHTML, estas por sua vez são de uso obrigatório de abertura e fechamento do documento. Dentro destas tags é que irão compor todo o conteúdo da página a ser exibida no navegador.
Mas para concluir a estrutura básica ainda temos que falar do atributo de html, cabeçalho e corpo.

<xmlns="http://www.w3.org/1999/xhtml">

xmlns Parâmetro do qual informa o browser que código a ser executado é um código XHTML conforme recomendações da W3C.

<head>...</head> Usado para definir a área de cabeçalho do documento. Entre estas tags também se define título da página, definição de meta-tags além de scripts de JavaScript e CSS externos.

Caracteres no documento:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Os caracteres para documentos XML e HTML é Padrão Unicode. A indicação desta declaração no documento evita erros de leituras de caracteres na página.
Declarações para codificação de conteúdos em utf-8 é a melhor escolha para a maioria dos propósitos dos documentos, contudo não é a única possibilidade.


<title>...</title> Usado para definir o título da página que será apresentado na barra de título do navegador.

<body>...</body> Usado para o corpo da página, onde todo o conteúdo que irá aparecer na página deverá estar entre esta tag.

Formatação de conteúdos dentro da página

<br/> Esta tag poder ser usado simplesmente como única, bastando o uso da barra de fechamento após o comando. A cada <br/> inserido representa uma quebra de linha.

<font>...</font> A formatação de fontes possui os atributos de tamanho, cor e tipo. Estes atributos podem ser utilizados em conjunto e não importando a ordem em forem referenciados.

<font size=” ”...</font> Neste exemplo veremos o atributo de size (tamanho), onde “1” é o menor tamanho e “7” o maior tamanho de fonte em xhtml.

<font size="1">Texto com tamanho 1</font>
<br/>
<font size="2">Texto com tamanho 2</font>
<br/>
<font size="3">Texto com tamanho 3</font>
<br/>
<font size="4">Texto com tamanho 4</font>
<br/>
<font size="5">Texto com tamanho 5</font>
<br/>
<font size="6">Texto com tamanho 6</font>
<br/>
<font size="7">Texto com tamanho 7</font>

Img_fontes

<font color=” “>...</font> As cores dever ser definidas em tonalidades sólidas. Elas podem ser escritas pelo seu nome em inglês ou pelo código hexadecimal conforme exemplos abaixo:

<font size="5" color="red">Texto em formatado na cor vermelha com nome</font><br/>
<font size="5" color="#0000ff">Texto em formatado na cor azul com o código</font><br/><br/>

Tabela de cores <br/><br/>

black = preta = #000000 <br/>
blue = azul = #0000ff <br/>
gold = ouro = #ffd700 <br/>
gray = cinza = #808080 <br/>
green = verde = #008000 <br/>
navy = azul-marinho = #000080 <br/>
orange = laranja = #ffa500 <br/>
pink = rosa = #ffc0cb <br/>
red = vermelha = #ff0000 <br/>
silver = prata = #c0c0c0 <br/>
teal = verde-azulado = #008080 <br/>
white = branca = #ffffff <br/>
yellow = amarela = #ffff00 <br/>

Cores

<font face=” ”>...</font> É o tipo da fonte a ser utilizada. Recomenda-se utilizar as fontes padrões para textos, pois fontes diferenciadas podem apenas funcionar na máquina do desenvolvedor local da página e quando este site for hospedado o visitante corre o risco de não ter instalado esta fonte no seu computador e assim esta formatação ser automaticamente trocada pelo padrão do seu navegador.

Texto sem formatação de fonte, usando o padrão do navegador.<br/>
<font face="verdana">Texto formatado com a fonte Verdana.</font><br/>
<font face="arial">Texto formatado com a fonte Arial.</font><br/>
<font face="tahoma">Texto formatado com a fonte Tahoma.</font><br/>
<font face="times new roman">Texto formatado com a fonte Times New Roman.</font><br/>
<font face="lucida sans unicode">Texto formtado com a fonte Lucida Sans Unicode.</font><br/>
<font face="comic sans ms">Texto formatado com a fonte Comic Sans MS.</font><br/>

Tipo_fonte

A formatação de fontes possui estilos que podem ser aplicadas a frases, palavras, sílabas, ou a caracteres individuais. Portanto abaixo exemplos de aplicações de diversos estilos.

Texto sem nenhuma formatação ou alteração de aparência.<br/><br/>
<i>texto em itálico</i> com a tag "i"<br/><br/>
<b>texto em negrito</b> com a tag "b"<br/><br/>
<u>texto sublinhado</u> com a tag "u"<br/><br/>
<em>texto enfatizado</em> com a tag "em"<br/><br/>
<small>texto pequeno</small> com a tag "small"<br/><br/>
<strong>texto forte</strong> com a tag "strong"<br/><br/>
<ins>texto inserido</ins> com a tag "ins"<br/><br/>
<del>texto removido</del> com a tag "del"<br/><br/>
<tt>texto similar ao da máquina de escrever</tt> com a tag "tt"<br/><br/>
<strike>texto riscado</strike> com a tag "strike"<br/><br/>
texto <sup>superior</sup> com a tag "sup"<br/><br/>
texto <sub>abaixo</sub> com a tag "sub"<br/><br/>
m<sup>2</sup> com a tag "sup"<br/><br/>
H<sub>2</sub>O -  com a tag "sub"<br/><br/>Linha horizontal<hr/>

Formatacao_fonte

<h1>...</h1> Os títulos de níveis são utilizados de maneira rápida e prática para títulos de documentos, ondes estes recebem tamanho diferenciado, destacado em negrito e com espaçamento.
Os seus tamanhos são definidos como <h1> o maior título de nível e <h6> sendo o menor título.

<h1>Título de Nível 1</h1>
<h2>Título de Nível 2</h2>
<h3>Título de Nível 3</h3>
<h4>Título de Nível 4</h4>
<h5>Título de Nível 5</h5>
<h6>Título de Nível 6</h6>

Titulo_nivel

Os alinhamentos podem ser feitos de diversas maneiras, aplica-se a alinhar textos, títulos, tabelas, imagens, agrupamentos em blocos de textos entre outros.

<p>...</p> Representa parágrafo, que por sua vez todo início de um novo parágrafo esta tag faz com que o novo conteúdo inicia automaticamente com os devidos espaçamentos sem a necessidade do uso de quebra de nova linha.

Parágrafos recebem os seguintes atributos de alinhamentos:

left = Alinhamento à esquerda
center = Alinhamento Centralizado
right = Alinhamento à direita
justify = Alinhamento Justificado

Estes atributos podem ser utilizados da seguinte maneira:

<p align="right">Texto alinhado a direita</p>

<center> Este atributo de alinhamento de parágrafo poder ser utilizado individualmente sem a necessidade do uso da tag <p>, veja:
<center>Texto centralizado</center>

<pre>...</pre> São usadas quando há a necessidade de preservar o formato original de um texto dentro do código fonte, este por sua vez mantém todos os espaçamentos, tabulações e linhas quebradas com o uso da tecla enter.

<blockquote>...</blockquote> Separa-se parágrafos em blocos de citação, recebendo um espaçamento de tabulação da margem esquerda. Cada <blockquote> representa um espaçamento.

<div>...</div> Utilizado como divisão de área e que pode ser aplicado atributos de formatação comumente em folhas de estilos CSS que veremos mais adiante.



Home

Listas

As listas são utilizadas para organizar as informações em forma de tópicos com marcadores ou numeradores.

A criação de listas é bem simples. Primeiro definimos o TIPO de lista, se ordenada "OL" ou se não ordenada "UL", depois definimos cada item da lista "LI".

Tipos de Listas Ordenadas

1 = Lista numérica comum
A = Lista alfabética maiúscula
a = Lista alfabética minúscula
I = Algarismos romanos maiúsculos
i = Algarismos romanos minúsculos

<h2>Lista ordenada com números</h2>
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>


<h2>Lista ordenada com letras maiúsculas</h2>
<ol type="a" start="3">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>


<h2>Lista ordenada com letras minúsculas</h2>
<ol type="a">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>


<h2>Lista ordenada com romanos maiúsculos</h2>
<ol type="i">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>

Listas_ordenada

Tipos de Listas não ordenadas

O atributo de listas não ordenadas é o Type, que define o tipo de MARCADOR que será usado, circular, quadrado ou redondo. Quando este atributo for suprimido, a lista usará o marcador redondo.

SQUARE = Marcadores quadrados
CIRCLE = Marcadores circulares
DISC = Marcadores redondos

<h2>Lista não ordenada padrão</h2>
<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>

<h2>Lista não ordenada com circle.</h2>
<ul type="circle">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>

<h2>Lista não ordenada com square.</h2>
<ul type="square">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>
Lista_padrao

Imagem é o principal recurso visual de um site, mas também o mais desagradável guando a imagem não for de boa qualidade e ou bem tratada, tornando o site muito pesado e dificultando o carregamento completo da página.

O uso de imagens dentro de uma página HTML/XHTML dever ser apenas para os formatos de arquivos .jpg e .gif .png por se tratar de imagens leves. Mas para isso estas imagens devem ser tratadas ou trabalhadas em outros softwares como Fireworks, Photoshop entre outros programas de edição e tratamentos de imagens.

Para inserir uma imagem usamos a tag órfã <img /> do qual permite incluir uma imagem no documento, mas em conjunto com o parâmetro src, este por sua vez identifica o nome e o local do arquivo referenciado.

É extremamente importante a organização dos arquivos dentro da pasta de um projeto, consideramos então que todas as imagens a serem utilizadas estejam organizadas dentro de uma pasta com o nome de “imagens”.

É importante lembrar também que no XHTML é obrigatório o uso da tag “alt” como texto alternativo dentro da imagem.

Inserir_imagem

Inserindo imagem JPG
<img src="imagens/logo.jpg" alt="Logo_Portal"/>

Inserindo imagem GIF
<img src="imagens/logo.gif" alt="Logo_Portal"/>

Inserindo imagem da web
<img src="http://www.portaldasmidias.com.br/imagens/logo.jpg" alt="Logo_Portal"/>

Link para fora de uma pasta use (..)
<img src="../imagens/logo.jpg" alt="Logo_Portal"/>

Atributos de imagens

No uso anterior os parâmetros de src e alt junto com <img/> é obrigatório, mas, além disso, podemos usar alguns atributos para a imagem do tipo tamanho, borda, title e mapeamento dentro do software do Dreamweaver.

Inserindo imagem com Título ou texto alternativo
<img src="imagens/logo.jpg" alt="Logo_Portal" title="Logo do site."/>

Inserindo imagem com Borda
<img src="imagens/logo.jpg" alt="Logo_Portal" border="10"/>

Inserindo imagem definição de largura e altura em pixels
<img src="imagens/logo.jpg" alt="Logo_Portal" width="400" height="100"/>

Inserindo imagem definição de largura e altura em porcentagem
<img src="imagens/logo.jpg" alt="Logo_Portal" width="100%" height="10%"/>

Inserindo imagem definição de alinhamento <center>
<center>
<img src="imagens/logo.jpg" alt="Logo_Portal, alinhado ao centro"/>
</center><br/>

Inserindo imagem definição de alinhamento <p align
<p align="right"><img src="imagens/logo.jpg" alt="Logo_Portal, alinhado à direita"/></p>

Fundo

O fundo pode ser definido com cor (bgcolor) ou imagem (background), estas mesmas funções também servem para definir fundo de tabela. Neste caso o fundo passa a ser uma propriedade de <body> ou <table>.

Cor de fundo da página em vermelho definido pelo nome da cor
<body bgcolor="red">

Cor de fundo da página em vermelho definido pelo código hexadecimal
<body bgcolor="#ff0000">

Cor de fundo da página definido por imagem
<body background="imagens/fundo.jpg">

Hiperlinks

Hipertexto (hiperlink), recurso de ligação entre páginas e objetos. Tudo na web é interligado simplesmente por link.

As tags <a>...</a> definem a ancoragem de ligação, enquanto o parâmetro href (hipertexto reference) define o destino. Para pontos de ligação interno usa-se name (nome) para estabelecer pontos de ligações locais.

Principais tipos de ligação:

Link para site externo usado para abrir página que não seja do próprio site, usa-se o protocolo http:// e também o atributo target="_blank" (Nova janela em branco), ou seja, o link será aberto em uma nova página do navegador.

Value Description
_blank abrir uma nova janela
_self próxima página
_parent o novo documento é carregado na janela completa
_top nesta página
framename nome de quadro

<a href="http://www.portaldasmidias.com.br" target="_blank">Portal das Midias</a>

Link para e-mail

mailto:

<a href="mailto:osmar.zafalon@gmail.com">Professor Osmar</a>


Link para e-mail com assunto, identificado pelo uso do mailto: (e-mail para) e quando configurado na máquina do usuário uma configuração de um programa de e-mail, faz com que uma nova mensagem seja aberta já com o e-mail referenciado no link e já com o subject (assunto)

<a href="mailto:osmar.zafalon@gmail.com?subject=Contato do site">Professor Osmar</a>

Link de âncora interno: dentro da propria página

Usado com o objetivo de criar um exemplo de sumário com link dentro da mesma página.

Define-se o endereço no local deseja com o parâmetro name:

<a name="topo" id="topo"></a>


Define-se o destino do link para o local ancorado com o parâmetro name:

<a href="#topo">Ir para o topo</a><br/>


Tabela

<table>...</table>

O uso de tabelas é comum em todo o site, pois através dela é que conseguimos organizar todas as informações e inserir objetos das páginas.


Imagem_tabela

<table border="10">
<tr>
<td>Célula 01</td>
<td>Célula 02</td>
<td>Célula 03</td>
</tr>
<tr>
<td>Célula 04</td>
<td>Célula 05</td>
<td>Célula 06</td>
</tr>
<tr>
<td>Célula 07</td>
<td>Célula 08</td>
<td>Célula 09</td>
</tr>
</table>
Célula 01 Célula 02 Célula 03
Célula 04 Célula 05 Célula 06
Célula 07 Célula 08 Célula 09



A formatação Blink permite que um texto fique piscando em uma página. Pode-se aplicar outros formatos como cores, negrito, italico e alterar a fonte e o seu tamanho.

<blink>....</blink> Portal das Midias

A formatação Marquee permite um texto entrar na página e percorrê-la da direita para a esquerda ou em sentido contrário, como um letreiro.

<marquee>....</marquee> Portal das Midias



Home

Formulário

O uso do formulário eletrônico é um meio de comunicação entre o visitante e o administrador do site, do qual pode ser usado para cadastro, pesquisa, sugestão, reclamação, etc.

A configuração do formulário deve ter instruções de configurações de acordo com o provedor de hospedagem.

Diante disso é importante consultar o provedor de hospedagem e baixar um modelo de formulário ou um tutorial e desenvolvimento, já que pode ter formulários em HTML, ASP, PHP entre outros. O ideal é utilizar o gerador de formulário quando oferecido pelo provedor.

Importante, o formulário só funciona corretamente o envio das informações preenchidas quando hospedado e configurado de acordo com as ações de seu provedor de hospedagem, isto quer dizer que neste momento o máximo que podemos testar em nosso desenvolvimento local é o preenchimento dos campos e o botão limpar.

<form>...</form> tags do formulário

Abertura do formulário com método e uma ação fictícia de servidor

<form method="post" action="http://www.portaldasmidias.com.br/cgi-bin/formmail.cgi">


Action: configuração do provedor de hospedagem para a ação do formulário.

Post: método e envio do formulário por e-mail, existe também o método Get do qual armazena as informações em banco de dados.


Caixa de entrada do tipo oculta e nome do campo “mailto” com valor de envio
obrigatoriamente que seja e-mail do próprio domínio hospedado.

<input type="hidden" name="mailto" value="email@dominioproprio.com.br"/>


Definição de assunto do formulário a ser enviado.

<input type="hidden" name="subject" value="contato do site"/>


Redirecionamento para uma página de agradecimento após envio com Pageto ou Redirect.

<input type="hidden" name="pageto" value="http://www.alunosweb.com.br/obrigado.html"/>


Caixa de entrada do tipo texto, name representa o nome do campo e size o tamanho da caixa.

Deixe seu nome: <input type="text" name="nome" size="60"/><br/>


Caixa para entrada do e-mail limitado apenas a 5 caracteres
inviabilizando o preenchimento da informação, portanto altere este valor.

Deixe seu e-mail: <input type="text" name="email" size="60" maxlength="5"/> <br/>


Campo do tipo senha, com tamanho da caixa 10 e limitado ao máximo de 6 caracteres.

Digite sua senha: <input type="password" name="senha" size="10" maxlength="6"/><br/>


Campo do tipo botão circular, utilizado para opções sim ou não e neste caso já habilitado a opção sim.

Você gostou do site? <br/>
<input type="radio" name="gostou" value="sim" checked="checked"/> sim <br/>
<input type="radio" name="gostou" value="nao"/> não


Campo do tipo botão quadrado, utilizado para fazer várias seleções ao mesmo tempo,
neste caso o checked determina uma opção já selecionada.

Quais os sites que você mais visita? <br/>
<input type="checkbox" name="links" value="cade"/>Cadê
<input type="checkbox" name="links2" value="yahoo"/>Yahoo
<input type="checkbox" name="links3" value="google" checked="checked"/>Google
<input type="checkbox" name="links4" value="altavista"/>Alta Vist
a


<select>...</select> Lista de opções predefinidas.

Qual o esporte que você mais gosta?
<select name="opcoes" id="esporte">
<option>Natação</option>
<option>Futebol</option>
<option>Basquete</option>
</select>


<textarea>...</textarea> Campo com área de texto com várias linhas e colunas.

Deixe seus comentários:<br/>
<textarea name="comentarios" rows="5" cols="30"></textarea
>


Botão de Enviar e Limpar

<input type="submit" value="Enviar"/>
<input type="reset" value="Limpar"/>


Exemplo completo:





Deixe seu nome:

Deixe seu e-mail:

Digite sua senha:

Você gostou do site?
sim
não

Quais os sites que você mais visita?
Cadê Yahoo Google Alta Vista

Qual o esporte que você mais gosta?

Deixe seus comentários: