Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
APOSTILA DE HTML
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
APOSTILA DE
HTML
EDIMAR NOGUEIRA
BRASÍLIA 2015
Uma breve história do HTML
HTML(Hypertext Markup Language, Linguagem de Marcação de Hipertexto) é uma
linguagem de marcação utilizada para produzir páginas na web. Documentos HTML podem ser
interpretados por navegadores.
Tim Berners-Lee (físico britânico) criou o HTML original (e outros protocolos associados
como o HTTP) . Na época a linguagem não era uma especificação, mas uma coleção de
ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas
entre ele e seu grupo de colegas.
As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que
ajudou aqueles sem familiaridade com a publicação na Web. Através do tempo, a utilização de
ferramentas para autoria de HTML aumentou, assim como a tendência em tornar a sintaxe
cada vez mais rígida. Apesar disso, por questões históricas, os navegadores ainda hoje
conseguem interpretar páginas web que estão longe de ser um código HTML válido.(Assistir “A
guerra dos navegadores”)
A linguagem foi definida em especificações formais na década de 1990, inspiradas nas
propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML para
a Internet. A primeira publicação foi esboçada por Berners-Lee e Dan Connolly, e publicada
em 1993 na IETF( é uma comunidade internacional ampla e aberta (técnicos, agências,
fabricantes, fornecedores, pesquisadores) preocupada com a evolução da arquitetura
da Internet e seu perfeito funcionamento) . A IETF criou um grupo de trabalho para o HTML no
ano seguinte, e publicou o HTML 2.0 em 1995. Desde 1996, as especificações HTML vêm
sendo mantidas, com o auxílio de fabricantes de software, pela World Wide Web
Consortium(W3C).
Apesar disso, em 2000 a linguagem tornou-se também uma norma
internacional (ISO/IEC15445:2000). A última especificação HTML lançada pela W3C foi a
recomendação HTML 4.01, publicada no final de 1999.
Desde os primeiros dias da web, tem havido muitas versões do HTML:
Versão Ano
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2008
XHTML5 2013
Marcação Versus Programação
Que fique bem claro e entendido que escrever ou desenvolver HTML nada tem a ver com
programar. O processo para programar é muito mais complexo e segue uma metodologia
completamente diferente. Programar implica escrever comandos capazes de consultar,
comparar, decidir, escolher, escrever, receber, transmitir e todo um vasto conjunto de
comportamentos dinâmicos impossíveis de ser conseguidos com HTML.
Navegadores Web
Também conhecido como browser, é um programa destinado a visualizar documentos
desenvolvidos com linguagem de marcação. O propósito de um navegador (como o Google
Chrome, Internet Explorer, Firefox, Safari) é ler documentos HTML e exibi-las como páginas da
web. O navegador não exibe as tags HTML, mas usa as tags para interpretar o conteúdo da
página:
TAGS ou Comandos HTML
os elementos de marcação dos diferentes conteúdos de um documento são representados
por um par de Tag (também chamadas de etiquetas). Na marcação , usamos uma Tag de
abertura(inicial) e uma Tag de fechamento (final) entre as quais se insere o conteúdo.
A sintaxe correta de marcação
Tag de abertura Tag de fechamento
<h1>Texto do cabeçalho</h1>
conteúdo
Note que usamos o sinal de divisão para fazer o fechamento da Tag.
Estrutura básica de um documento HTML
Um programa HTML é dividido em tês partes Básicas: a estrutura principal, cabeçalho e
o corpo de texto. A estrutura básica de um documento HTML são as linhas obrigatórias e
essenciais para um bom funcionamento de uma página web.
<!DOCTYPE html>
<html>
<head>
<titlle></title>
</head>
<body>
aqui será montada a página
</body>
</html>
As etiquetas HTML não são sensíveis a caixa, portanto tanto faz escrever <HTML>,
<Html>, <html> ou <HtMl>.
<! DOCTYPE>
É a declaração do tipo de documento e deve ser escrito na primeira linha de marcação,
esta declaração ajuda o navegador a exibir uma página web corretamente.Há muitos
documentos diferentes na web, e um navegador só pode exibir uma página HTML 100%
corretamente se sabe o tipo de HTML e versão utilizada.
Sintaxe básica do DOCTYPE
<!DOCTYPE HTML>
Elemento HTML
Elemento HTML é a menor unidade de marcação. As Recomendações do W3c para a
HTML prevêem 91 elementos, dos quais 10 estão em desuso. Elementos em desuso são
aqueles que constam de uma lista do W3c para ser retirados das especificações para a
linguagem HTML em suas versões futuras, isso porque chegou à conclusão de que já não
cumprem mais suas finalidades ou não se enquadram nas atuais exigências da moderna
marcação.
<html>: Situada no início do documento </html>, localizada no final do cumento, são usadas
para delimitar o início e o fim da página.
Seção head:
A seção head de um documento designa-se a conter os elementos da linguagem
destinados a fornecer informações adicionais sobre o documento e dela deverá constar
obrigatoriamente o título do documento, marcando com o elemento title, e também com varios
outros elementos, tais como o elemento meta, elemento style, elemento javascripty entre
outros.
Cabeçalho
Dentro do cabeçalho podemos encontrar os seguintes elementos:
<title>: define o título da página, que é exibido na barra de título dos navegadores
<style type="text/css">: define formatação em CSS
<script type="text/javascript">: define programação de certas funções em página com
scripts, podendo adicionar funções de JavaScript.
<link>: define ligações da página com outros arquivos como , CSS, scripts, etc.
<meta>: define propriedades da página, como codificação de caracteres, descrição da página,
autor, etc.
Obs: as etiquetas <style> e <script> servem tanto para delimitar os espaços usados pelos
códigos na página quanto para invocar códigos existentes em outros arquivos externos.
Seção body:
A seção body de um documento destina-se a conter os elementos designados a marcar os
conteúdos que serão renderizados no navegador. Tudo o que voce vê em uma página quando
navega na internet esta contido na seção body da marcação do documento.
Comentários
Tal como ocorre com as linguagens de programação, podemos e devemos inserir
comentários em nossa marcação HTML, com a finalidade de facilitar o entendimento e a
manutenção do código, o comentário são pequenos textos explicativos inseridos na marcação
que são ignorados pelos navegadores e, em conseqüência, não são renderizados.
Comentário o uso correto
<!-- comentário-->
Renderização
Renderizar, diz-se que um navegador renderiza um documento web quando transforma a
marcação HTML do documento em algo capaz de ser lido e entendido pelo usuário. Quando
abrimos uma página de um site, podemos vê-la na tela do computador porque o navegador
renderizou a página para nós.
Atributos
Atributos HTML destinam-se a fornecer informações adicionais para um elemento HTML e
são declarados dentro da Tag de abertura do elemento.
Observe a marcação para um cabeçalho de nível 1, mostrado a seguir:
<h1 style=“color: red”>Cabeçalho Nível 1<h1>
Inserimos dentro da Tag de abertura <h1> o atributo style, destinado a informar ao
dispositivo de usuário que a cor das letras do cabeçalho deverá ser vermelha(red). Como
mostrado, a sintaxe para escrever um atributo consisteno nome do atributo seguido por um
valor, que deve ser colocado entre aspas e separado por um sinal de igual.
Marcação para caracteres especiais
A linguagem de marcação HTML admite uma sintaxe própria que, quando renderizada,
resulta visualmente em caracteres especiais ou símbolos. Existem os chamados conjuntos de
caracteres especiais, padronizados pelas normas ISO, nos quais cada símbolo tem uma
entidade correspondente para representá-lo. Inserir uma entidade na marcação HTML resulta
na Renderização do símbolo correspondente. Observe a seguir alguns símbolos, sua descrição
e as entidades que os representam.
Ex:
<p> Navegadores renderizam entidades como símbolos<br>
© este é o símbolo para direitos autorais<br>
® este para marca registrada<br>
& este para e comercial
</p>
Sintaxe para as cores
A linguagem de marcação HTML tem uma sintaxe própria para definir cores, elas podem
ser declaradas com uso de atributos[#FF0000, red], ou via as folhas de estilo em cascata.
Veremos a seguir as sintaxes válidas para declarar cores:
Sintaxe Hexadecimal
Esta é a sintaxe adotada pela quase totalidade dos desenvolvedores, e salvo condições
muito particulares ou gosto pessoal, não há por que não adotá-la. Nessa sintaxe, cada cor é
definida por uma seqüência de seis caracteres hexadecimais prescindidos de um sinal
tralha(#), como mostrado no exemplo:
#FFFFFF= cor branca; #000000= cor preta; #FF0000= cor vermelha
Note que a sintaxe é insensível ao tamanho das letras, isto é, você pode usar grafia em
maiúscula ou minúscula, indiferentemente, para o número hexadecimal. Obviamente será
impossível decorar o código de todas as cores, já que existem mais de 16 milhões de
combinações possíveis . Quando precisar de uma cor, consulte uma das diversas páginas da
web que fornecem tabela de cores.
Sintaxe RGB
Esta sintaxe é menos usada e conhecida e define a cor por uma lista de três números
colocados entre parênteses e separados por vírgula, precedida da sigla rgb:
Exemplo
rgb(0, 220, 90); rgb(10%, 90%, 45%)
Observe que são duas as formas de escrever a lista dos três números. Na primeira,
usamos um número entre 0 e 255 e, na segunda um valor em porcentagem de 0 a 100%. Não
é permitido misturar números com porcentagem para compor uma cor
Sintaxe por palavra-chave
Usamos o nome da cor em inglês, contudo somente 17 cores são validas para efeito de
marcação, são elas: (aqua; black; blue; fuchsia; gray; green; lime; marroon; navy; olive; orange;
purple; red; silver; teal; white e yellow).
Elementos e Atributos HTML
Faremos uma descrição dos elementos e seus atributos como previstos nas
recomendações do W3c para HTML. Examinaremos os 91 elementos e cada atributo por este
suportados. Os 91 elementos previstos nas recomendações do W3c podem ser classificados
segundo variados critérios, como por exemplo, elementos para marcar textos, elementos para
inserir mídia, elementos para marcar citações e assim por diante.
Atributos comuns
Apresentaremos os atributos que podem ser usados com cada um dos elementos. Existem
alguns atributos que são comuns à maioria dos elementos e para não repeti-los em todos os
elementos que iremos estudar, vamos examiná-los separadamente nesta seção.
Lembrando atributo: Atributos destinam-se a fornecer informações adicionais para um
elemento e são declarados dentro da tag de abertura do elemento.
Id- Atributo identificador único- Destina-se a atribuir um nome identificador para o elemento,
em um mesmo documento, o nome usado para identificar um elemento deve ser único, isto é,
não é válido atribuir o mesmo nome de id para mais de um elemento, id é usado para
especificar um estilo para um elemento único e exclusivo. O seletor id usa o atributo id do
elemento HTML, e é definido com uma "#“(tralha). A regra de estilo abaixo será aplicada ao
elemento com id = cor; diferente; abc3;cor-dois:
Exemplo de sintaxe de id para várias instancias
<p id=“cor”>Texto do Parágrafo marcado com o identificador cor</p>
<p id=“diferente”>Texto do Parágrafo marcado com o identificador diferente</p>
<p id=“abc3”>Texto do Parágrafo marcado com o identificador abc3</p>
<p id=“cor-dois”>Texto do Parágrafo marcado com o identificador cor-dois</p>
O valor do atributo id é um nome que se pode escolher à vontade. Existem restrições quanto
ao primeiro caractere do nome escolhido, tais como: não é válido começar o nome de um
atributo com um número ou hífen. Por outro lado o underscore(_) é válido. Mas afina qual é a
utilidade de se identificar um elemento no documento? Para ser usados em programas scripts
e folhas de estilo que tem a capacidade de se comunicar com a marcação HTML.
Class- Atributo classe- Destina-se a atribuir uma classe identificadora para o elemento. Trata-
se também de um atributo identificador e a diferença para o atributo identificador único é que
em um mesmo documento o nome classe pode ser usado para identificar várias instâncias de
um mesmo elemento, bem como elementos diferentes. Isso permite que você defina um estilo
particular de muitos elementos HTML com a mesma classe. O seletor de classe usa o atributo
de classe HTML, e é definido com um “.”.
Exemplo de sintaxe de class
<p class=“destaque-1”>Texto do páragrafo marcado com a classe destaque-1</p>
<h1 class=“destaque-1”> Cabeçalho do Nível 1 marcado com a classe destaque-1 </h1>
<li class=“destaque-1”> Item da classe marcado com a classe destaque-1 </li>
<code class=“destaque-1”> Fragmento do código marcado com a classe destaque-1
</code>
Para os elementos mostrados, uma folha de estilo é capaz de identificar os diferentes
elementos identificados com a mesma classe destaque-1 e estilizar todos eles com a mesma
cor, por exemplo.
Dir- Atributo direção do texto- Destina-se a especificar a direção da escrita do texto. Esse
atributo admite dois valores, a saber: ltr, sigla em inglês para left to right, que traduzimos por
“da esquerda para a direita”, e rtl, sigla em inglês para rigth to left, que traduzimos por “da
direita para esquerda”.
Exemplo:
<p dir="ltr">Texto com atributo de direção Esquerda para a direita</p>
<p dir="rtl">Texto com atributo de direção direita para a Esquerda </p>
Titles
Title- Atributo título- Destina-se a definir um título para o elemento em que é aplicado. As
recomendações do W3c não determinam um comportamento-padrão para renderização desse
atributo. Os navegadores são livres para interpretar esse atributo. Por exemplo: o Firefox 2.0
renderiza uma caixinha com o valor declarado no atributo quando o usuário aponta o ponteiro
do mouse sobre o conteúdo do elemento e o IE ignora visualmente o atributo. Maioria dos
elementos admite esse atributo, exceto os seguintes elementos(base, basefont, head, html,
meta, param, script e title).
Exemplo:
<p title=“Conteúdo do título”>Um parágrafo para exemplificar o atributo</p>
Style
Style- Atributo estilo- Destina-se a definir regras de estilo para o elemento em que é aplicado.
Com o uso desse atributo, você pode, por exemplo, aplicar cores, mudar o tamanho das letras,
posicionamentos e praticamente tudo que diga respeito à apresentação visual do conteúdo do
elemento em que o atributo for aplicado.
Exemplo:
<p style=“color:red; font-size: 60px;”>Um Parágrafo Modificado pelo o estilo.</p>
Elementos HTML e seus atributos
Nesta seção listaremos todos os elementos HTML em ordem alfabética.
A- Elemento âncora- Destina-se a marcar um conteúdo qualquer do documento
(texto,imagem,animação etc) com o qual o usuário poderá interagir, quer seja clicando com o
botão do mouse, e que se destina a interligar o documento a um outro documentoweb ou
conteúdo web qualquer. A descoberta desse elemento viabilizou e deu o poder e forçar para a
web. Com ele, originamos os hipertextos e conseguimos interligar tudo que estiver disponível
na internet, criando uma verdadeira teia mundial de informações.
Atributos específicos:
Href- Identifica o URL(endereço da web), onde esta hospedado o documento a ser aberto pelo
link:
<a href=“http://www.maujor.com/”>Site do Maujor</a>
Name- Identifica um determinado ponto do documento que poderá ser usado como destino de
um link( é a chamada navegação interna que acontece quando um link é acionado e, em vez
de abrir um documento novo, o navegador rola o documento atual para um ponto localizado no
próprio documento). O valor desse atributo ser único no documento, ou seja, não poderá haver
mais de um atributo name com o mesmo valor dentro do documento.
Target- Define como o documento destino do link será carregado ou aberto. Os valores
possíveis e seus significados são os seguintes.
Janela- o documento destino do link abre em uma das janelas do documento construído com
frames._blank – o documento destino do link abre em uma nova janela. _parent- o documento
destino do link abre na janela pai do documento atual. _self- o documento destino do link abre
na mesma janela do documento atual. _top- o documento destino do link abre no corpo da
janela do documento atual.
Abbr
Elemento para abreviaturas- destina-se a marcar ocorrências de abreviaturas em um texto. O
uso do atributo title com o valor do significado da abreviatura complementa o emprego desse
elemento.
Ex:
<abbr title=“HyperText Markup Language”>HTML</abbr>
Acronym
Elemento para acrônimos- destina-se a marcar ocorrências de acrônimos em um texto. O uso
do atributo title com o valor do significado do acrônimo complementa o emprego desse
elemento. Acrônimo é uma abreviatura.
Ex: <acronym title=“Escola Técnica de Ceilândia”>ETC</acronym>
Address
Elemento para endereço-Destina-se a marcar informações de contato com o responsável pelo
documento. Normalmente essa informação é colocada no ínicio ou no fim do documento e , em
geral, os navegadores renderizam o conteúdo desse elemento em itálico. O mais comum é
encontrar esse elemento no rodapé da página.
Ex:<address>
Edimar Nogueira
E-mail: nogueiraguerraetc@gmail.com
</address>
B
Elemento para negrito- Destina-se a marcar um texto que deva ser renderizado em negrito.
Ex:<p>Neste parágrafo<b>Estas palavras vão estar em negrito</b></p>
Base
Elemento base- Destina-se a definar um URL básico para um documento. Esse elemento deve
ser colocado na seção head do documento e serve como URL base para todos os endereços
relativos marcados no documento.
Ex: <base href=“http://www.maujor.com/”>
Big
Elemento para aumento de tamanho de fonte- destina-se a aumentar o tamanho da fonte de
um texto em relação ao contexto em que o elemento é declarado.
Ex: <p>Neste parágrafo<big>estas palavras</big> são renderizadas em fonte maior</p>
Body
Elemento do corpo do documento- Todo o conteúdo do documento a ser renderizado pelo
navegador deverá estar contido dentro desse elemento.
Atributo que se pode usar com o body
mailto:nogueiraguerraetc@gmail.com
http://www.maujor.com/
http://www.maujor.com/
background- Identifica o URL, onde está hospedada uma imagem que será colocada como
fundo da página. A imagem se repete tanto horizontalmente como verticalmente.
bgcolor- Define uma cor de fundo para o documento.
text- Define uma cor para os textos contidos no documento.
link- Define uma cor para links contidos no documento, que, ainda, não foram visitados.
vlink- Define uma cor para links contidos no documento, após terem sido visitados.
Br- Elemento vazio, elemento quebra de linha- Destina-se a inserir uma quebra de linha
quando da renderização de um conteúdo.
Ex: <p>Começa o texto do parágrafo e <br> daqui em diante mais texto em nova linha</p>
Button- Elemento botão- destina-se a criar um botão.
Atributos especifico
name- Define um nome para a instância do elemento. O nome é usado para que scripts ou
outros programas façam referência ao elemento.
value- Define um nome para o valor inicial do botão.
type- “submit” , ”button” , “reset”- Define a finalidade do botão.
submit- valor padrão; cria um botão destinado a enviar os dados de um formulário.
button- cria um botão que chama um script.
reset- Cria um botão destinado a restaurar um formulário a seu estado inicial.
Ex:
<button name=“envio” value=“envio” type=“submit”>Enviar</button>
<button name=“limpa” type=“reset”>Limpar</button>
<button name=“ok” type=“submit”><img src=“ok.gif” alt=“botão enviar”/></button>
Caption- Elemento legenda de tabela- Destina-se a criar a legenda descritiva para uma tabela.
Esse elemento deve ser colocado imediatemente na tag de abertura da tabela<table> sendo
único na tabela.
Atributos específicos- align=“top”- valor padrão em cima da tabela, “botton”- embaixo da tabela,
“left”- no lado esquerdo da tabela, “right”- no lado direito da tabela. Determina o posicionamento
da legenda em relação à tabela.
Ex:<table>
<caption”>Tabela de dados Financeiros Gerais</caption>
</table>
Center- elemento para centrar- os conteúdos inseridos dentro desse elemento serão centrados
no dispositivo de usuário.
Ex: <center>Marcação para conteúdos centrados...</center>
Cite- elemento para citação- Destina-se a conter uma citação ou referência a outro recurso.
<p>Para maiores detalhes consulte a <cite>Norma ABNT</cite></p>
Code- Elementos para códigos- Destina-se a conter fragmentos de código de computador, não
renderizar o código dentro de code.
Ex: <code>p{color:red}</code>
Col- Elemento vazio, elemento para atributos- Destina-se a agrupar atributos e informações
que devam ser compartilhados por uma ou mais colunas de uma tabela. Deve estar contido
dentro do elemento colgroup.
Atributos específicos
span- Define o número de colunas que compartilham das informações contidas no elemento.
width- Define a largura de cada uma das colunas compartilhadas pelo elemento.
align- Determina o alinhamento horizontal dos dados contidos dentro da célula das colunas
compartilhadas pelo elemento. Valores que align suporta:
left-alinhados à esquerda
center-alinhados ao centro
right-alinhados à direita
justify-justificado à esquerda e à direita
char-alinhados em torno de um caractere específico
valign- Determina o alinhamento vertical dos dados contidos dentro da célula das colunas
compartilhadas pelo elemento: Valores que valign suporta:
top- alinhados com a borda superior da célula.
middle- dados centraçizados verticalmente na célula.
bottom -alinhados com a borda inferior da célula.
baseline- todas as células em uma mesma linha serão alinhadas de modo que a primeira linha
de dados na célula sirva como base de alinhamento.
Ex:<table border="2">
<colgroup>
<col width="50" align="right"/>
<col span="3" width="100" align="center"/>
</colgroup>
<tr>
<td>dados</td>
<td>dados</td>
<td>dados</td>
<td>dados</td>
</tr>
<tr>
<td>dados</td>
<td>dados</td>
<td>dados</td>
<td>dados</td>
</tr>
</table>
Esse exemplo marca uma tabela com duas linhas e quatro colunas. A primeira coluna tem uma
largura de 50px e o conteúdo das suas células alinhado à direita. A segunda , terceira e quarta
coluna tem uma largura de 100px e o conteúdo de suas células alinhado ao centro.
Colgroup- Elemento para agrupar colunas- Destina-se a conter os elementos col definidos
para uma tabela. Tem as mesmas caracteristicas que o col, seguindo os mesmo atributos.
Ex:
<table border="2">
<colgroup width="50" align="right"></colgroup><colgroup spa="2" width="100"></colgroup>
<colgroup width="300"></colgroup>
<tr>
<td>dados</td>
<td>dados</td>
<td>dados</td>
<td>dados</td>
</tr>
<tr>
<td>dados</td>
<td>dados</td>
<td>dados</td>
<td>dados</td>
</tr>
</table>
Esse exemplo marca uma tabela com duas linhas e quatro colunas. A primeira coluna tem uma
largura de 50px e o conteudo das suas celulas alinhando à direita. As segundas e terceiras
colunas têm a largura de 100px. A quarta coluna tem a largura de 300px. Para as segunda,
terceira e quarta colunas, não se definiiu o alinhamento horizontal dos textos, nesse caso,
adota-se o alinhamento padrão à esquerda.
Dd- Elemento para lista – Destina-se a conter uma definição em um tipo de lista denominado
lista de definição. Este elemento deverá estar contido dentro do elemento dl e dt.
Dl- elemento lista de definição- elemento container para um tipo de lista denominando lista de
definição.
Dt- Elemento termo de lista- Destina-se a conter título a ser definido em um tipo de lista
denominado lista de definição. Esse elemento deverá estar contido do elemento dl.
Ex:
<dl>
<dt>Desempenho</dt>
<dd>Velocidade Máxima: 210 Km/h</dd>
<dd>Aceleração de 0 A 100 kM/h: 13s</dd>
<dt>Pesos</dt>
<dd>Carga Útil Máxima: 450kg</dd>
<dd>Em Ordem de Marcha: 900kg</dd>
</dl>
Del- elemento deletar- destina-se a marcar um fragmento de texto que tenha sido excluído,
substituído ou atualizado de uma versão anterior do documento. Esse elemento é usado em
conjuntocom o elemento ins. A maioria dos navegadores renderiza os conteúdos desse
elemento com uma linha cortando o texto.
Ex:<p>No texto deste parágrafo <del datetime="2013-09-09T08:15:30-03:00"> estas
palavras </del> forma atualizadas por <ins>estas palavras</ins>.</p
Dfn- elemento definição- destina-se a marcar a instância que define um termo contido no
documento. A maioria dos navegadores renderiza os conteúdos desse elemento em itálico.
Ex: <p><dfn>Cevina</dfn> é um segmento de reta que liga um vértice de um triângulon a um
ponto qualquer do lado oposto.</p>
Dir- este elemento destina-se a criar diretórios multicolunares para listas. Na maioria dos
navegadores, a renderizição é semelhante à de uma lista não ordenada, inclusive com os
marcadores de lista. Esse elemento foi substituído pelo elemento ul.
Div- elemento divisão- quando usado com atributos id e class, constitui-se em um poderoso
mecanismo para estruturar e estilizar conteúdos. Com ele, é possível criar blocos de conteúdos
capazes de ser posicionados e estilizados com folhas de estilo.
Atributos específicos- align= left, center, right, justify, determina o alinhamento horizontal
dos conteúdos do elemento.
EX: <div id="navegacao">
<h5>Menu</h5>
<ul>
<li><a href="#">Ínicio</a></li>
<li><a href="#">Meio</a></li>
<li><a href="#">Fim</a></li>
</ul>
</div>
Em- elemento enfase- Destina-se a marcar uma palavra ou texto a que se deseja dar enfase. A
renderização de textos marcados com esse elemento normalmente é em itálico. Leitores de
tela lêem esse elemento com entonação de voz diferente, informando ao usuário que tal texto
merece destaque.
Ex: <p>Neste parágrafo <em> Estas palavras</em> foram enfatizadas.</p>
Fieldset- Elemento conjunto de campos- Destina-se a criar um container para um conjunto de
controles (ou campos) de um formulário que tenha uma finalidade comum.
Ex:<fieldset>
<legend>Uso do Filedset</legend>
</fieldset>
Como colocar dois fieldset lado a lado:
Ex:<fieldset style="display: inline">
<fieldset style="display: inline">
<div style="width:500px; float:left">
Formulário 1:
<form>
Campo:<br><input type=text><br>
<input type=submit value=Enviar>
</form>
</div>
</fieldset>
<fieldset style="display: inline">
<div style="width:500px; float:left">
Formulário 2:
<form>
Campo:<br><input type=text><br>
<input type=submit value=Enviar>
</form>
</div>
</fieldset>
</fieldset>
Font- Elemento em desuso, este elemento destina se a definir a cor, o tamanho e a família das
fontes(letras) de um texto.
Atributos específicos
size- Este atributo destina-se a definir o tamanho da fonte. Seu valor deverá ser um dos
tamanhos padrão adotados em html, ou sejá, de 1 ao 7 com o uso dos sinais + e o -.
color- este atributo destina-se a definir uma cor para o texto.
face- este atributo destina-se a definir uma família para o texto.
Ex:<p>Neste texto<font size="4" color="red" face="arial, sans-serif"> Estas palavras</font> têm
fonte com tamanho igual a 4, na cor vermelha e pertencem a família arial.</p>
Form- este elemento destina-se a servir de container para os controles(ou campos) de
formulários, bem como a todos os demais elementos dos formulários.
Atributos específicos
name- Define um nome para o formulário. O nome é usado para que o scripts ou outros
programas façam referência ao formulário.
action- Identifica a URL, onde está hospedada a aplicação que ira processar o formulário.
method- get |post- Este atributo destina-se a definir o método HTTP a ser usado no envio dos
dados do formulário.
Ex: <fieldset>
<legend>Cadastro</legend>
<form name="formulario" method="post" action="recebedados.php"></form>
...conteúdo...
</fieldset>
Frame-Elemento vazio, elemento para quadros, deve ser colocado dentro do elemento
frameset (conjunto de frames,subdivisão de janelas), com a finalidade de compor um layout
onde a tela de apresentação da página é dividida em retângulos ou quadros, cada um deles
com seus conteúdos independentes. Os conteúdos de cada frame são documentos html
independentes neles inseridos com o uso do atributo src.
Atributos específicos
name- Define um nome para o frame. O nome é usado como referência para o destino do links.
src- Identifica a URL, onde está hospedado o documento que será apresentado no frame.
noresize- Impede que o usuário seja capaz de redimensionar o frame.
scrolling- define como será a rolagem para o frame.. Valores(auto, yes, no).
frameborder- Define a existencia ou não de uma borda de separação em volta do frame. 1
valor padrão e 0 sem valor.
marginwidth- Especifica a quantidade de pixel da quantidade de espaço que deve ser deixada
entre o conteúdo do frame e sua bordas esquerdas e direita(ou seja a margem horizontal do
frame).
marginheigth- Espscifica o valor em pixel da quantidade de espaço que deve ser deixada
entre o conteúdo do frame e suas bordas superior e inferior(margem vertical ).
Frameset- este elemento destina-se a servir de container para elementos frame. Em
documento criado com frames, esse elemento é obrigatórios e substitui o elemento body.
Atributos específicos
rows- Este atributo define o layout horizontal dos frames.
cols-Este atributo define o layout vertical dos frames.
H1-H6- Elemento para cabeçalho, existem seis níveis de cabeçalho: h1, h2, h3, h4, h5, h6,
esse elemento destina-se a marcar os títulos ou cabeçalhos das sessões de textos do
documento e, assim, indicar a estrutura dos conteúdos.
Ex:
<h1 align="left">Título em Ordem Decrescente 1</h1>
<h2 align="center">Título em Ordem Decrescente 2</h2>
<h3 align="right">Título em Ordem Decrescente 3</h3>
<h4 align="justify">Título em Ordem Decrescente 4</h4>
<h5 align="center">Títuloem Ordem Decrescente 5</h4>
<h6 align="center">Título em Ordem Decrescente 6</h6>
Head- Elemento cabeça do documento- Destina-se a marcar informações sobre o documento,
tais como título da página, links que relacionam o documento com outros documentos, idioma
principal e outras informações gerais sobre o conteúdo do documento. É deverá conter
obrigatóriamente o elemento title.
Hr- Elemento vazio, elemento fio horizontal, este elemento vazio que destina a criar um fio
horizontal no documento. O fio possui um efeito de sombra que lhe confere um aspecto de
relevo. Normalmente é usado para separar blocos de texto.
Atributo específicos
align-(left, center, right)
width- define o comprimento do fio. O valor padrão e 100%, o fio se estende por todo o
comprimento da página.
noshade- este atributo não requer um valor. Quando definido retirar o efeito de sombra do fio
renderizando em cor sólida.
size- este atributo define uma espessura para o fio.
Ex: <p>Um texto aqui....</p>
<hr align="center" width="100%" size="60px" noshade/>
<p>Outro texto aqui...</p>
Html- Elemento raiz do documento.
I- Elemento itálico, este é um elemento para aplicar estilo em linha e destina-se a obter um
efeito itálico no texto.
Ex:<p>No texto deste parágrafo<i> esras palavras</i> serão em itálico.</p>
IFrames (inline frames) é um recurso muito utilizado em websites. Consiste na inserção de
páginas web (arquivos) dentro de páginas web (arquivos) . Não confunda com Frames
(quadros). Frames são divisões da mesma página (arquivo) em seções, já iFrame não, são
páginas dentro de páginas.
Atributos básicos de uma iFrame
name (nome da iframe);
iD (identificação da iframe);
width (largura em pixels);
height (altura em pixels);
src (caminho para o conteúdo da iframe. Pode ser um URL , um outro arquivo , uma
imagem etc…);
scrolling (determina a presença ou não de barra de rolagem – yes, no, auto);
Ex:<iframe id=“etc” name="iframe01" src="http://www.etc.se.df.gov.br/"" width="600“
height="400" scrolling="Auto"></iframe>
<iframe id=“nogueira” name="iframe02" src=http://www.nogueiraetc.blogspot.com.br
border="no" width="400" height="200" scrolling="No" marginwidth="0" marginheight="0“
></iframe>
<a href="http://www.imasters.com.br" target="iframe01">LINK</a>
Esse último usado como menu.
Img- Elemento vazio, elemento imagem, este é um elemento vazio que se destina a inserir
uma imagem no documento. O uso do atributo src nesse elemento é obrigatório.
Atributos Específicos
name- Define um nome para a instância do elemento. O nome é usado para que scripts ou
outros programas façam referência ao elemento.
align- destina-se a definir a posição do elemento em relação ao seu contexto. Seus
Valores(botton, middle, top, left, right).
alt- fornece um texto alternativo, que descreve resumidamente o conteúdo do elemento.
src- identifica o url, onde está hospedada a imagem.
width- define a largura da imagem.
height-Define a altura da imagem.
hspace-define uma quantidade de espaço vazio a ser inserida à esquerda e à direita da
imagem.
vspace- define uma quantidade de espaço vazio a ser inserida em cima e embaixo da imagem.
Escolhendo Formatos de Imagens
A fim de apresentar imagens da melhor maneira possível, é essencial escolher formato de
arquivo adequado. Temos três tipos de formatos.
JPEG,GIF e PNG
O formato JPEG, cuja sigla significa Joint Pictures Expert Group, teve sua primeira
especificação disponibilizada em 1983 por um grupo que leva o mesmo nome. É um dos
padrões mais populares da internet por aliar duas características importantes: oferece níveis
razoáveis de qualidade de imagem e gera arquivos de tamanho pequeno quando comparado a
outros formatos, facilitando o seu armazenamento e a sua distribuição.
O JPEG possibilita isso porque é um formato que utiliza compressão de imagens. Mas, o que é
isso? Em poucas palavras, compressão consiste na eliminação de dados redundantes nos
arquivos. No caso de imagens, é possível fazer a compressão de forma que a retirada de
informações não prejudique a qualidade (lossless - sem perda), assim como é possível utilizar
níveis maiores de compressão que causam perdas visíveis (lossy - com perda).
Este último é o que acontece no JPEG: neste formato, quanto maior o nível de compressão,
menor será o tamanho do arquivo, porém pior será a qualidade da imagem. O nível de
compressão pode ser determinado em programas de tratamentos de imagens. Cada vez que
uma mesma imagem JPEG é salva, costuma-se perder qualidade, já que, geralmente, o
software utilizado para tratá-la aplica compressão, mesmo que mínima, toda vez que esta ação
é realizada.
Sigla para Graphics Interchange Format, o GIF é outro formato bastante popular na
internet. Foi criado pela CompuServe em 1987 e, assim como o JPEG, gera arquivos de
tamanho reduzido, no entanto, seu uso não é muito comum em fotografias, já que é capaz de
trabalhar com apenas 256 cores (8 bits). Assim, sua utilização é muito comum em ícones,
ilustrações ou qualquer tipo de imagem que não necessita de muitas cores.
Há, no entanto, uma característica que faz o formato GIF ser conhecido até os dias de
hoje: graças a uma revisão realizada em 1989, o padrão passou a ter a capacidade de suportar
http://www.nogueiraetc.blogspot.com.br/
animações. Em outras palavras, o GIF passou a permitir a inserção de uma sequência de
imagens em um único arquivo. Assim, quando um GIF nesta condição é exibido, cada uma das
imagens inseridas é mostrada seguindo uma ordem, dando ao usuário a sensação de
movimento.
O formato PNG, sigla para Portable Network Graphics, é um dos padrões mais recentes,
com a sua primeira especificação surgindo em 1996. Seu desenvolvimento foi motivado, em
parte, pela restrição de patente existente no formato GIF, conforme explica o tópico anterior.
O PNG reúne, portanto, as características que tornaram o GIF tão bem aceito: animação, fundo
transparente e compressão sem perda de qualidade, mesmo com salvamentos constantes do
arquivo. Porém, conta com um grande diferencial: suporta milhões de cores, não apenas 256,
sendo, com isso, uma ótima opção para fotos.
No aspecto da animação, o PNG, por si só, não possui tal capacidade. O que acontece é que
há uma variação chamada APNG (Animated Portable Network Graphics) que permite essa
característica. O esquema é o mesmo do padrão GIF: uma sequência de imagens inseridas em
um único arquivo. No caso, a primeira imagem é um arquivo PNG "normal", que é exibido em
situações onde, por algum motivo, a animação não pode ser executada. Há também uma
variação chamada MNG (Multiple-image Network Graphics) que possui a mesma finalidade.
Imagens no formato PNG possuem extensão .png, mesmo nas variações de animação,
embora, neste último caso, possa ser utilizado também nomes com .mng e .apng.
O PNG é um formato livre, criado desde o início para ser utilizado em qualquer aplicação sem
necessidade de pagamentos de licenças ou afins. Sua utilização é apoiada pela W3C.
Outros Formatos de imagens
Os formatos JPEG, PNG e GIF são os mais utilizados, principalmente na internet, mas
obviamente, não são os únicos. A seguir você confere uma breve descrição de alguns padrões
conhecidos, mas menos utilizados.
Formato Bitmap
O Bitmap é um dos formatos de imagens mais antigos e também um dos mais simples.
Bastante utilizado nos sistemas operacionais Microsoft Windows
Formato TIFF
Sigla para Tagged Image File Format, o TIFF consiste em um formato muito utilizado em
aplicações profissionais, como imagens para finalidades médicas ou industriais.
Formato RAW
O formato RAW (traduzindo, algo como "cru") é um pouco diferente dos demais. Trata-se de
um padrão que guarda todos os dados de uma foto, tal como esta foi gerada na câmera digita
ormato SVG
SVG é a sigla paraScalable Vector Graphics e, tal como o nome indica, trabalha com imagens
vetoriais. Trata-se de um formato aberto, desenvolvido pela W3C e que surgiu oficialmente em
2001.
Input- Elemento vazio, elemento para controle de formulários, o elemento input cria diversos
tipos de controles de formulário para entrada de dados do usuário. O tipo de controle criado é
definido pelo atributo type.
Atributo específicos
type- Define o tipo de controle criado, veja a seguir os valores e seus significados.
text- cria um campo para entrada de texto em uma linha.
password-cria um campo para entrada de senha ou dados que devam permanecer ocultos
quando digitados.
checkbox- cria uma caixa de seleção.
radio- cria um botão de seleção.
submit- cria um botão para envio de formulário.
reset- cria um botão que restaura o formulário ao seu estado inicial.
file- cria um campo para entrada de um arquivo local que deva ser enviado ao servidor.
http://www.w3.org/
hidden- cria um campo cujos dados entrados não são visíveis ao usuário.
imagem- cria um botão personalizado com uma imagem, que funciona como o botão de envio
de formulário.
button- cria um botão destinado a acionar um script para realizar uma determinada ação.
name- Define um nome para um instância do elemento. O nome é usado para que scripts ou
outros programas façam referência ao elemento.
alt- Fornece um texto alternativo que descreve resumidamente o input.
src- Identifica a URL, onde esta hospedada a imagem para o elemento input.
size- Define a largura inicial do controle em pixel, exceto para text e password.
maxlenght- para input dos tipos text e password, define o número máximo de caracteres que
podem ser dados como entrada no campo.
value- Define um valor inicial para o controle. Este atributo é de uso obrigatório para input dos
tipos checkbox e radio.
checked- Atributo usado somente para input dos tipos checkbox e radio que se destina a ativar
previamente estes controles.
disabled- Desabilita o controle para entrada de dados.
EX: <form action="" method="post">
NOME:<input type="text" name="nome" value=""/><br>
SENHA:<input type="password" name="senha" value="" maxlength="6"/><br><br>
SEU PROFESSOR FAVORITO:<br>
<input type="checkbox" name="diwb" value="diwb" checked="checked">DIWB<br>
<input type="checkbox" name="LV2" value="lv2" >LV2<br>
<input type="checkbox" name="Banco" value="banco">BANCO DE DADOS<br>
<input type="checkbox" name="pcc" value="pcc">PCC<br><br>
SEXO:<br>
<input type="radio" name="sexo" value="masculino">MASCULINO<br>
<input type="radio" name="sexo" value="feminino">FEMININO<br>
<input type="submit" name="enviar" value="ENVIAR">
<input type="reset" name="limpar" value="LIMPAR"><br>
</form>
Label- Elemento rótulo, destina-se a criar um rótulo ou etiqueta para um controle de formulário
que não tenha um rótulo implícito.
Atributos específicos
for-Este atributo destina-se a associar o rótulo a seu respectivo controle. O valor do atributo é
um id(identificador único)
Ex: <label for="nome">NOME:</label><br>
<input type="text" name="nome" id="nome">
Legend-Elemento legenda, destina-se a criar uma legenda para o elemento fieldset de um
formulário. A legenda de um fieldset incrementa a acessibilidade para agentes de usuários não
gráficos.
Atributos específicos
align= Determina o posicionamento da legenda em relação ao fieldset. Este atributo está em
desuso. Os valores possíveis
top- legenda em cima do fieldset.
bottom- legenda embaixo do fieldset.
left- legenda no lado esquerdo do fieldset.
right- legenda no lado direito do fieldset.
Ex: <fieldset>
<legend align="right">Informações Pessoais</legend>
...Conteúdo.....
</fieldset>
Li- Elemento item de lista, destina-se a marcar itens de lista. Deve ser inserido na marcação
como elemento-filho dos elementos ol e ul.
Atributos específicos
type- este atributo destina-se a definir um estilo visual para o marcador da lista, veja os valores
específicos.
1 os marcadores são números arábicos(1,2,3...)
a os marcadores são letras minúsculas (a,b,c...)
A os marcadores são letras Maiúsculas (A,B,C...)
i os marcadores são números romanos minúsculos(i,ii,iii)
I os marcadores são números romanos maiúsculo(I,II,III)
value- Este atributo define um número para item da lista. Por exemplo: se value=“8”, o item da
lista ordenada recebe o número 8. Note que se a lista for do tipo letras maiúscula, por exemplo,
o item da lista receberá, neste caso, a letra H, que é a oitava letra maiúscula do alfabeto.
Ex: <ol>
<li>Item 1</li>
<li type="A" value="3">Item 2</li>
<li>Item 3</li>
<li value="20">Item 4</li>
<li type="1" value="3">Item 5</li>
<li type="a" value="5">Item 6</li>
<li type="I" value="9">Item 7</li>
<li type="i" value="6">Item 8</li>
</ol><br>
<ol type="A" start="3" compact="compact">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol><br>
<ol type="1" start="7" compact="compact">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol><br>
Link- elemento link, define um link para outro documento. Ao contrário do elemento “a”, que é
colocado na seção body do documento, o elemento link deve aparecer na seção head do
documento e destina-se a apontar para documentos relacionados ao documento atual.
Atributos específicos
charset- este atributo destina-se a definir a codificação de caracteres adotada pelo documento
web que será aberto quando o link for acionado.
href- identifica a URL, onde esta hospedado a ser aberto pelo LINK.
hreflang- identifica o idioma principal no qual foi escrito o documento a ser aberto, Ex:pt-br
rel- define o relacionamento existente entre o documento atual e o documento destino do link.
type- define o tipo de documento.
Ex:<link rel="index" href="index/html"/>
<link rel="stylesheet" type="text/css" href="print.css" hreflang="pt-br"/>
Meta- Elemento para metadados, define metainformações, identifica propriedades do
documento, tais como autor, palavras-chaves, etc.
Atributos específicos
name- este atributo especifica um valor para propriedade nomeada.
content- este atributo especifica um valor uma propriedade nomeada.
http-equiv- este atributo pode ser usado em ligar do atributo name e destina-se a passar
informações no cabeçalho HTTP do documento.
Ex: <meta name=“autor” content=“Edimar Nogueira”/>
<meta http-equiv=“Content-Type” content=“text/html; charset=isso-8859-1”>
Ol- elemento lista ordenada, destina-se a servir de container para itens de listas (elementos li)
ordenadas. Listas ordenadas são aquelas cujos itens recebem uma marca de ordenação
sequencial que pode ser alfabética ou númerica.
Atributos específicos
type, este atributo destina-se a definir um estilo visual para o marcador da lista, seus valores
possíveis.
1 os marcadores são números arábicos(1,2,3...)
a os marcadores são letras minúsculas (a,b,c...)
A os marcadores são letras Maiúsculas (A,B,C...)
i os marcadores são números romanos minúsculos(i,ii,iii)
I os marcadores são números romanos maiúsculo(I,II,III)
start- este atributo define o ponto de partida do marcador da lista. O valor padrão para o ponto
de partida é 1, por exemplo: se start=“4”, o primeiro item da lista ordenada recebe o número 4,
o segundo, o número 5, e assim por diante. Note que a lista for do tipo letras maiúsculas, por
exemplo, o primeiro item da lista receberá, nesse caso, a letra D.
Ex:<ol type="A" start="3"compact="compact">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol><br>
<ol type="1" start="7" compact="compact">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Optgroup- elemento grupamento de opções, destina-se a agrupar opções relacionadas
contidas em um elemento select.
Atributos específicos
disabled- este atributo desativa as opções agrupadas impedindo que sejam escolhidas pelo
usuário.
label- este atributo define um nome para servir de rótulo ou legenda para agrupamento de
opções. O uso desse atributo é obrigatório.
Ex: <select name="cores">
<optgroup label="Cores">
<option>Vermelha</option>
<option>Verde</option>
<option>Azul</option>
<option>Preta</option>
</optgroup>
</select>
Option- elemento opção, destina-se a definir as opções contidas em um elemento select.
Atributos específicos
disabled- este atributo desativa a opção, impedindo que seja escolhida pelo usuário.
selected- este atributo especifica a opção inicialmente selecionada.
label- este atributo define um nome mais curto para servir de rótulo ou legenda para a opção.
value- este atributo define um valor inicial para a opção, se não for definido o valor, será o
próprio conteúdo da opção.
Ex:<select name="automoveis">
<option label="volks">Volkswagem</option>
<option value="fd">Ford</option>
<option>Chevrolet</option>
<option selected="selected">Fiat</option>
</select>
P- elemento parágrafo, destina-se a marcar um bloco de texto como parágarfo.
Ex: <p>Aqui entar um bloco de hoje...</p>
Pre- este elemento destina-se a marcar texto pré-formatados, ou seja, navegadores
renderizam os textos respeitando todos os espaços e quebras de linhas inseridas na marcação.
Normalmente, os textos são apresentados em fonte monoespaçadas. Um dos usos desse
elemento é para marcar trechos de códigos.
Q- elemento para citação inline, destina-se a marcar uma citação curta ou inline.
Ex:<p>Tim Berners-Lee disse:<q cite=“http://www.w3.org”> o W3C tem por objetivo conduzir
web ao seu pontencial máximo</q></p>
S-elemento taxado, destina-se a obter o efeito riscado em um texto. Mesmo comando para o
elemento strike
Ex: <p>Neste parágrafo <s> estas palavras</s> estão riscada.</p>
Samp- elemento dados de saída, destina-se a marcar textos ou caracteres que sejam saídas
de programas, scripts e códigos em geral.
Ex: <p>Ao executar o programa você obterá como resultado o texto:<samp>Alô
mundo</samp></p>
Script- este elemento destina-se a scripts inseridos no documento.
Atributos específicos
src- identifica o URL, onde está hospedado o script.
type-define o tipo de conteúdo.
Ex:Coloque este script no body:
<script type="text/javascript">
{
alert("Esta tudo OK!")
}
</script>
Select- elemento seleção, destina-se a criar uma lista de opções permitindo escolhas simples
ou múltiplas pelo usuário, o elemento select é um controle de formulários.
Atributos específicos
disabled- este atributo desativa o controle, impedindo a ação do usuário sobre ele.
size- este atributo define quantas opções estarão visíveis para seleção, sem necessidade de
abertura de ação sobre um mecanismo de rolagem.
name- define um nome para o controle. O nome é usado para que scripts ou outros programas
façam referência ao elemento.
Ex: <select name="frutas" size="10">
<option>Maça</option>
<option>Uva</option>
<option>Laranja</option>
<option>Melancia</option>
<option>Pêra</option>
</select>
Small- este elemento destina-se a definir um tamanho de fonte menor que o tamanho-padrão
para um fragmento de texto.
Ex:<p>Neste parágrafo <small> estas palavras </small> estão em tamanho menor.</p>
Span- este elemento destina-se a marcar conteúdos em linhas genericamente. É muito usado
em conjunto com o atributo class para estilizar conteúdos.
Ex: Esse código coloca no <head>...
<style>
.diferente{
font-variant: small-caps;
color: blueviolet;
}
</style>
................Esse no <body>
<p>Neste parágrafo<span class="diferente"> Estas Palavras</span> recebem uma estlização
diferente.</p>
Strong- este elemento destina-se a marcar uma palavra ou texto à que se deseja dar forte
ênfase. A renderização de texto marcados com esse elemento normalmente é em negrito.
Funciona como o elemento b.
Ex: <p>Neste parágrafo <strong> estas palavras </strong> foram fortemente enfatizadas.</p>
Style- este elemento destina-se a conter informações sobre estilos aplicáveis ao documento e
deve ser colocado na seção <head> do documento.
Ex:<style>
diferente{
font-variant: small-caps;
color: blueviolet;
}
</style>
Sub- este elemento destina-se a obter efeito subscrito.
Ex:<p>A formula da água é: H<sub>2</sub>O.</p>
Sup- este elemento destina-se a obter efeito sobrescrito.
Ex:<p>Esta área tem 200 Km<sup>2</sup>.</p>
Table- elemento tabela, destina-se a servir de container para todos os elementos de marcação
de tabela.
Atributos específicos
summary- este elemento fornece um sumário descritivo da finalidade e estrutura da tabela.
align- determina o alinhamento horizontal da tabela, tais como (left, center, right).
bgcolor- define uma cor de fundo para a tabela.
width- este atributo define uma largura para a tabela. Um valor igual a 100% define uma
largura em toda a janela do navegador.
border- este atributo define a largura em pixels de uma borda em volta da tabela.
cellpadding- este atributo define a quantidade interna de espaço vazio(ou margen internas)
entre a borda da célula e seu conteúdo.
cellspacing- este atributo define as margens entre as células da tabela, bem como entre as
células e a borda exterior da tabela.
frame- este elemento define quais lados de uma moldura, em volta da tabela, deverão ser
visíveis em navegador. Temos alguns valores:
void- não exibe moldura alguma, este é o valor padrão.
above- exibe o lado superior da moldura.
below- exibe o lado inferior da moldura.
hsides- exibe os lados superior e inferior da moldura.
lhs- exibe o lado esquerdo da moldura.
rhs- exibe o lado direito da moldura.
vsides- exibe o lado esquerdo e direito da moldura.
box- exibe os quatro lados da moldura.
border- exibe os quatro lados da moldura.
rules- este atributo define quais lado da borda, entrecélulas da tabela, deverão ser visíveis em
um navegador.
Temos alguns valores
none- não exibe borda alguma, valor padrão.
groups- exibe as bordas entre os grupos de linha e grupos de colunas de células.
rows- exibe as bordas entre as linhas das colunas.
cols- exibe as bordas entre as colunas das células.
all- exibe as bordas entre linhas e colunas das células.
Ex:
<table border="4" cellpadding="2" cellspacing="2" frame="box"
bgcolor="gray" width="50%" align="center">
<tr>
<td>Elemento da Tabela</td>
</tr>
</table>
Tbody- Elemento para o corpo de tabela, destina-se a agrupar as células que constituem o
corpo da tabela. O uso desse elemento não é obrigatório.
Tfoot- Elemento para rodapé da tabela, destina-se a agrupar as células que constituem o
rodapé da tabela.
Thead- Elemento para cabeça da tabela, destina-se a agrupar as células que constituem os
cabeçalhos da tabela.
Atributos específicos
align- determina o alinhamento horizontal dos dados inclusos dentro da células contidas no
elemento, veja valores possíveis(left, center, right, justify).
valign- determina o alinhamento vertical dos dados veja valores possíveis(top, middle, bottom,
baseline).
Ex:
<table>
<thead>
<tr><td bgcolor="yellow">Células do Cabeçalho</td>
</tr>
</thead><br>
<tbody>
<tr>
<td bgcolor="gray">Células do Corpo</td>
</tr>
</tbody><br>
<tfoot>
<tr>
<td bgcolor="red">Células do Rodapé</td>
</tr>
</tfoot>
</table>
Td- Elemento para células de tabela, destina-se a marcar uma célula de dados de uma tabela.
Este elemento deverá estar contido no elemento tr.
Atributos específicos
rowspan- define o número de linhas pelas quais a célula se espalha.
colspan- define o número de colunas pelas quais a célula se espalha.
width- define uma largura para a célula.
height- define uma altura para a célula.
align- define o alinhamento horizontal dos dados contidos dentro de uma célula, veja valores
possíveis(left, center, right, justify).
valign- define o alinhamento vertical dos dados contidos dentro da célula.
bgcolor- define uma cor de fundo para a célula.
Ex:
<table width="400" border="1" bordercolor="black">
<tr>
<td> linha 1, coluna 1</td>
<td>linha 2, coluna 2</td>
</tr>
<tr>
<td>linha 2, coluna 2</td>
<td> linha 2, coluna 2</td>
</tr>
<tr>
<td ROWSPAN="3"> 3 linhas mescladas</td>
<td> linha 4, coluna 2</td>
</tr>
<tr>
<td>Linha 5, coluna 2</td>
</tr>
<tr>
<td> linha 6, coluna 2</td>
</tr>
</table>
Textarea- Elemento para área de texto, este é um controle de formulário que se destina a criar
uma área multiplas para entrada de texto pelo usuário.
Atributos específicos
name- define um nome para o elemento.
rows- define o número de linhas visíveis na área de texto.
cols- define o número de colunas visíveis na área de texto.
disabled- desabilita o controle para entrada de dados
Ex:
<textarea name="text" rows="20" cols="80" disabled="">
.........conteúdo padrão
</textarea>
Title- elemento para um título de página, destina-se a marcar o título da página. Este elemento
mais importatnte de uma página web, deve estar contido obrigatoriamente na seção head do
documento.
Tr- Elemento para linhas de tabelas, destina-se a marcar uma linha de celulas em uma tabela.
Ex:
<table border="2">
<tr bgcolor="red"><td>Dados 1</td></tr>
<tr bgcolor="yellow"><td>Dados 2</td></tr>
<tr bgcolor="blue"><td>Dados 3</td></tr>
<tr bgcolor="green"><td>Dados 4</td></tr>
</table>
Tt- elemento para estilo teletipo, destina-se a marcar textos em fonte monoespaçada.
EX:<p>Neste parágrafo<tt>Estas palavras</tt> Estão em estilo teletipo.<p>
Ul- Elemento lista não ordenada, destina-se a servir de container para itens de lista(elementos
li) não ordenadas. Listas não ordenadas são aquelas cujositens recebem uma marca do lado
esquerdo de cada item.
Atributos específicos
type- Este atributo destina-se a definir um estilo visual para o marcador da lista, valores
possíveis.
Disc- os marcadores são um disco.
Square- os marcadores são um quadrado.
Circle- os marcadores são uma circunferência.
compact- este atributo, quando definido, faz com que o navegador renderize os itens da lista
em forma compacta.
Ex:
<table>
<tr>
<td bgcolor="red" >
<ul type="disc" compact="compact">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</td>
<td bgcolor="blue">
<ul type="circle" compact="compact">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</td>
<td bgcolor="orange">
<ul type="square" compact="compact">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</td>
</tr>
</table>
Continue navegando
Materiais relacionados
40 pág.
51 pág.
61 pág.
116 pág.
Perguntas relacionadas
Compartilhar