Definições HTML 4.
1
• Referência: [Link]
Definições CSS 2.1
• Referências:
[Link]
[Link]
As Tags
• Podem ser maiúsculas ou minúsculas
• Possuem os caracteres "<" e ">" para marcar o início e o final.
• As tags possuem um comando iniciador e outro finalizador:
"</" e ">"
• Todo código HTML deve ser iniciado com a seguinte forma:
<HTML>
…
código html
…
</HTML>
Cabeçalho e Título
• Os cabeçalhos são marcados pelas tags "<HEAD>" e "</HEAD>"
• O Título da página, o que aparece na descrição da Janela do Browser
e na Impressão, é marcado pelas tags "<TITLE>" e "</TITLE>"
• Exemplo:
<HTML>
<HEAD>
<TITLE>Exemplo de Título</TITLE>
</HEAD>
</HTML>
META
• Servem para que sistemas externos identifiquem qual o tipo e
conteúdo da página HTML, sem precisar ler todo o conteúdo.
• São opcionais e invisíveis ao usuário, porém muito utilizados pelos
sistemas de busca.
• Exemplo:
<HTML>
<HEAD>
<TITLE>Exemplo de Título</TITLE>
<META name="description" content="Aqui vai toda a descrição do conteúdo
desta página">
<META name="keywords" content="Aqui estão as palavras chave desta
página">
</HEAD>
</HTML>
Corpo
• É a parte do HTML que é apresentada para os usuários. Exemplo:
Texto, Imagens, Links, …
• É marcado pelas tags "<BODY>" e "</BODY>"
• Parâmetros opcionais:
§ Bgcolor
§ Background
§ Text
§ Link
§ Vlink
§ Alink
§ Leftmargin
§ Topmargin
§ Dir
• Exemplo do famoso HELLO WORLD / OLÁ MUNDO:
<HTML>
<HEAD>
<TITLE>Olá Mundo</TITLE>
</HEAD>
<BODY>
Olá Mundo
</BODY>
</HTML>
Quebra de Linha e Parágrafo
• As quebras de linhas são marcadas pela tag "<BR>"
• As quebras de parágrafo são marcadas pela tag "<P>"
• A demarcação de um parágrafo é marcada pelas tags "<P>" e
"</P>"
• Exemplo
<HTML>
<HEAD>
<TITLE>Exemplo de quebra de linha</TITLE>
</HEAD>
<BODY>
Aqui é o texto da primeira linha<BR>
E aqui é o texto da segunda linha.
<P>
Aqui é o início de um outro parágrafo
<P>e aqui é a demarcação de outro parágrafo</P>
</BODY>
</HTML>
Formatação de Títulos
• Formatação Especial em 6 tamanhos, os quais são marcados pelas
tags "<H#>" e "</H#>", onde # é o número de 1 a 6
• Exemplo:
<HTML>
<HEAD>
<TITLE>Exemplo de títulos</TITLE>
</HEAD>
<BODY>
<H1>Título 1</H1>
<H2>Título 2</H2>
<H3>Título 3</H3>
<H4>Título 4</H4>
<H5>Título 5</H5>
<H6>Título 6</H6>
</BODY>
</HTML>
Estilos de Texto
• Negrito
• "<B>" e "</B>"
• Itálico
• "<I>" e "</I>"
• Sublinhado
• "<U>" e "</U>"
• Riscado
• "<S>" e "</S>"
• Texto aumentado
• "<BIG>" e "</BIG>"
• Texto diminuído
• "<SMALL>" e "</SMALL>"
• Texto subscrito
• "<SUB>" e "</SUB>"
• Texto sobrescrito
• "<SUP>" e "</SUP>"
• Mudança de fonte, tamanho e cor
• <FONT FACE="Verdana" SIZE="2" COLOR="red"> e </FONT>
Alinhamento de Texto
• Os textos podem ser alinhados à esquerda, direita, centralizado ou
justificado
• Marcações:
• <P align="left">Alinhamento à esquerda</P>
• <P align="center">Centralizado</P>
• <P align="right">Alinhamento à direita</P>
• <P align="justify">Justificado</P>
Listas
• Utilizadas para organizar as informações de maneira seqüencial e
alinhadas.
• Podem ser numeradas ou não
• Marcadores:
• Numeradas: "<OL TYPE=t>" e "</OL>"
• Não Numeradas: "<UL>" e "</UL>"
• Valores de type:
• t (default): Número
• A ou a: Alfabeto (Maiúscula e minúscula)
• I ou i: Numerais Romanos (Maiúsculo e minúsculo)
• Cada elemento da lista é precedido pela tag "<LI>"
• Exemplo:
<OL type=t>
<LI>Lista Numerada A
<LI>Lista Numerada B
</OL>
<UL>
<LI>Lista Não Numerada A
<LI>Lista Não Numerada B
</UL>
<OL type=a>
<LI>Alfabeto A
<LI>Alfabeto B
</OL>
<OL type=i>
<LI>Romano A
<LI>Romano B
</OL>
Linhas Horizontais
• Utilizadas para dividir áreas de texto.
• Marcador "<HR>"
• Configurações:
• Espessura (altura): <HR SIZE=X> (X por default é 2)
• Tamanho (largura): <HR WIDTH=50%> (onde o valor pode
ser em pixel ou percentual)
• Alinhamento: <HR ALIGN=LEFT> (onde o default é center)
• Sombreamento: <HR NOSHADE>
Hiperlinks
• São interligações de textos com outros textos ou arquivos.
• Podem ser identificados por texto sublinhados com cores diferentes
ou por imagens ou fotos, que mudam o formato do cursor ao
passarmos o mouse sobre eles.
• Marcador <A HREF="nome_arquivo.htm"></A>
• Há possibilidade de inserir um link para e-mail, basta utilizar o
atributo mailto como a seguir:
<a href="[Link] aqui para
enviar um e-mail</a>
• Âncoras:
• Para utilizarmos o recurso de âncora, precisamos nomear
algum ponto de uma página. Para isso utilizamos a
propriedade name, conforme a seguir:
<a name="item2">Item 2</a>
• Para fazermos uma chamada a um item de âncora, utilizamos
"#" na propriedade href, seguido do nome definido na âncora.
• Exemplo:
…
<a href="#item1">Item 1</a>
<a href="#item2">Item 2</a>
<a href="#item3">Item 3</a>
…
<a name="item1">Item 1</a><br>
Aqui vai a descrição do Item 1
<a name="item2">Item 2</a><br>
Aqui vai a descrição do Item 1
<a name="item3">Item 3</a><br>
Aqui vai a descrição do Item 3
…
Inserindo Imagens/Figuras
• Marcador <IMG SRC="[Link]" WIDTH="X"
HEIGHT="Y">
• Atributos opcionais:
§ WIDTH, tamanho horizontal com que a imagem aparece
na tela. Valor em pixel ou percentual. O Valor default é
o tamanho da imagem
§ HEIGHT, tamanho vertical com que a imagem aparece
na tela. Valor em pixel ou percentual. O Valor default
é o tamanho da imagem
§ ALIGN, alinhamento da imagem no documento. Valores
left, center ou right
§ VSPACE, espaço horizontal entre os textos e figuras
§ HSPACE, espaço horizontal entre as imagens
§ BORDER, largura da borda da imagem
• Há possibilidade de uma Imagem/Figura ser transformada em
hiperlink. Ou seja, hiperimagens. Para utilizar, basta unir os
marcadores de hiperlink com imagem, conforme exemplo abaixo:
<A HREF="[Link]"><IMG SRC="[Link]"
BORDER="0"></A>
Tabelas
• Marcador "<TABLE BORDER=X WIDTH=Y></TABLE>"
• Onde X é a largura da borda da tabela, e tem como valor
default 0
• Y é expressos em pixel ou em percentual.
• Atributos opcionais:
§ CELLSPACING, largura entre as bordas. Valor default 2
pixels
§ CELLPADDING, espaço entre os textos e a borda. Valor
default 2 pixels
§ ALIGN, alinhamento da tabela no documento. Valores
podem ser left, center ou right
• Linhas
§ Marcador "<TR></TR>"
• Célula
§ Marcador "<TD ALIGN=E VALIGN=F></TD>"
• Onde E tem os valores left, center ou right;
• F tem os valores top, middle, bottom ou
baseline;
§ Atributos opcionais:
• COLSPAN, soma de células (merge) em colunas.
Valores em quantidade de células
• ROWSPAN, soma de células (merge) em linhas.
Valores em quantidade de células
• Exemplo:
…
<TABLE ALIGN=CENTER>
<TR>
<TD>1a. Linha; 1a. Coluna</TD>
<TD>1a. Linha; 2a. Coluna</TD>
<TD>1a. Linha; 3a. Coluna</TD>
</TR>
<TR>
<TD>2a. Linha; 1a. Coluna</TD>
<TD>2a. Linha; 2a. Coluna</TD>
<TD>2a. Linha; 3a. Coluna</TD>
</TR>
</TABLE>
<TABLE BORDER=1 WIDTH=200>
<TR>
<TD>1a. Linha; 1a. Coluna</TD>
<TD>1a. Linha; 2a. Coluna</TD>
<TD>1a. Linha; 3a. Coluna</TD>
</TR>
<TR>
<TD>2a. Linha; 1a. Coluna</TD>
<TD>2a. Linha; 2a. Coluna</TD>
<TD>2a. Linha; 3a. Coluna</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100% ALIGN=RIGTH>
<TR>
<TD>1a. Linha; 1a. Coluna</TD>
<TD>1a. Linha; 2a. Coluna</TD>
<TD>1a. Linha; 3a. Coluna</TD>
</TR>
<TR>
<TD>2a. Linha; 1a. Coluna</TD>
<TD>2a. Linha; 2a. Coluna</TD>
<TD>2a. Linha; 3a. Coluna</TD>
</TR>
</TABLE>
…
Folhas de Estilo
• Facilidade, padronização e centralização do estilo de um site;
• Alteração das características de cada tag do HTML;
• Sintaxe:
Seletor {propriedade:valor}
• Seletor: é um elemento HTML, ou tag, por exemplo: B, A,
TABLE, TD, etc;
• Propriedade: é o nome da propriedade a ser alterada, por
exemplo: color, font-size, etc;
• Valor: é o conteúdo atribuído à propriedade.
• Exemplo que deixa os textos dos parágrafos com a fonte vermelha:
P {color:red;}
• Exemplo que deixa o texto padrão da página na cor azul e fonte
tahoma:
BODY {color: blue; font-family: tahoma;}
• Aplicação de uma Folha de Estilo
• São 4 tipos diferentes de utilização:
§ Linking
• É o mais utilizado.
• Criação de um arquivo central e todas as
páginas do site utilizam este estilo como
referência com a tag LINK no cabeçalho HEAD
da página.
• Exemplo:
<LINK REL=stylesheet
HREF="nome_arquivo.css" TYPE="text/css">
• Podemos definir vários arquivos css em a uma
mesma página
§ Embedding
• Coloca os comandos de folha de estilo dentro da
página HTML.
• Dentro da tag HEAD.
• Sintaxe:
<STYLE TYPE="text/css">
<!--
Definições do estilo
-->
</STYLE>
§ Importing
• Importa um arquivo css para dentro do arquivo
HTML
• Sintaxe:
<STYLE TYPE="text/css">
<!--
@IMPORT
URL([Link]
-->
</STYLE>
§ Inline
• Coloca os comandos das folhas de estilo dentro
das tags HTML, o que afeta somente este
comando.
• Exemplo:
<P STYLE="text-indent: 1cm; color:
green;">Parágrafo configurado para 1 cm de
distância e na cor verde.</P>
Frames
• Vantagens:
• Divisão da tela do browser em linhas ou colunas
• Útil para fixarmos um pedaço do browser na tela para
utilização de menu, cabeçalhos ou rodapés, por exemplo.
• Desvantagens:
• Perda de espaço na tela em caso de apresentação de grande
volume de informações, dificultando a programação e
diagramação da página.
• Cada frame possui um arquivo fonte HTML associado, e todos estes
fontes são interligados em um arquivo fonte chamado de LAYOUT.
• É neste arquivo de layout que configuramos a divisão da
janela.
• Marcador de layout <FRAMESET> </FRAMESET>
• Podemos ter várias tags <FRAMESET> encadeadas.
• Atributos:
§ ROWS: define que a janela será dividida em linhas;
§ COLS: define que a janela será dividida em colunas;
§ Exemplo:
<FRAMESET ROWS="X,Y...">
Onde X e Y podem ser representados por pixels,
percetuais ou "*";
• Para definirmos as páginas que compõem o frame, utilizamos
o seguinte marcador:
<FRAME SRC="[Link]" NAME="nomedoframe"
MARGINWIDTH="X" MARGINHEIGHT="Y" SCROLLING="Z"
NORESIZE>, onde":
NAME: nome da janela do frame;
MARGINWIDTH: opcional e indica o valor da margem
direita/esquerda do frame;
MARGINHEIGHT: opcional e indica o valor da margem
superior/inferior do frame;
SCROLLING: opcional e indica, com valores YES, NO, AUTO, a
barra de rolagem do frame;
NORESIZE: opcional e impede que o usuário mude o tamanho
do frame.
§ Para evitar erros em browser que não processam
frames, podemos deixar mensagens usando a tag
<NOFRAMES></NOFRAMES>.
• Exemplo:
<html>
<head>
<title>LAYOUT</title>
</head>
<frameset rows="100,*" frameborder="YES" border="0" >
<frame name="superior" scrolling="NO" src="[Link]"
NORESIZE >
<frameset cols="100,*" frameborder="YES" border="0" >
<frame name="menu" src="[Link]">
<frame name="conteudo" scrolling="YES"
src="[Link]">
</frameset>
</frameset>
<noframes>
<body>
Este browser não suporta frames
</body>
</noframes>
</html>
Formulários de Dados
• Marcadores <FORM METHOD="método"
ACTION="nome_programa"></FORM>
• Onde:
• nome_programa define qual o programa que irá processar
os dados do formulário.
• método define como os dados serão enviados para o servidor.
Este método pode ser de dois tipos:
§ GET: Método default que leva todo o conteúdo do
formulário anexado a URL, iniciando por "?" e cada
campo separado por "&". Por exemplo:
[Link]
autor=neto&email=[Link]@[Link]&tex
to=Descrição do Texto
§ POST: Método que leva todo o conteúdo do formulário
pela entrada padrão de cada sistema operacional, ou
seja, todo o conteúdo vai encapsulado e não visível
pelo usuário. Por exemplo:
[Link]
Campos de Entrada de Dados
• Marcadores <INPUT TYPE="tipocampo" NAME="nomecampo"
VALUE="valorcampo" SIZE="larguracampo"
MAXLENGHT="tamanhomaximocampo">
• Onde:
• tipocampo pode ser TEXT, PASSWORD ou HIDDEN
• nomecampo é o nome que identifica o campo. Portanto deve
ser único.
• valorcampo opcional e define o valor default para o campo.
• larguracampo opcional e define a largura do campo. Default
20
• tamanhomaximocampo opcional e configura o máximo de
caracteres que podem ser digitados no campo
• Exemplo:
…
Nome: <INPUT TYPE="text" NAME="nome" SIZE="30"
MAXLENGHT="50"><br>
Senha: <INPUT TYPE="password" NAME="senha" SIZE="10"
MAXLENGHT="10">
...
• Há outros quatro tipos de campo (type):
§ CHECKBOX: Utilizado para quadros de seleção, ou para
opções múltiplas
• O atributo CHECKED é opcional, e quando
existir, o campo já vem selecionado.
• Exemplo:
…
Informe como você gostaria de ser
contactado:<BR>
<INPUT TYPE="checkbox" NAME="contato"
VALUE="email" CHECKED> E-mail<BR>
<INPUT TYPE="checkbox" NAME="contato"
VALUE="telefone"> Telefone
…
§ RADIO: Utilizado para opções únicas.
• Exemplo:
…
Informe como você gostaria de ser
contactado:<BR>
<INPUT TYPE="radio" NAME="contato"
VALUE="email" CHECKED> E-mail<BR>
<INPUT TYPE="radio" NAME="contato"
VALUE="telefone"> Telefone
…
§ RESET: Utilizado para limpar TODOS os campos
existentes dentro do Formulário
§ SUBMIT: Utilizado para enviar TODOS os campos
existenstes dentro do Formulário para o Programa
definido no ACTION processar.
Áreas de Texto
• Marcadores: <TEXTAREA NAME="NomeCampo" ROWS="QtdeLinhas"
COLS="QtdeColunas">Aqui pode ir um texto padrão que já virá
preenchido</TEXTAREA>
• Exemplo:
…
Comentários<br>
<TEXTAREA NAME="comentarios" ROWS="5"
COLS="30"></TEXTAREA>
…
Listas de Seleção
• Marcadores: <SELECT NAME="NomeCampo"
SIZE="QuantidadeDeOpçõesQueIrãoAparecer"></SELECT>
• Para cada lista de seleção, temos opções.
§ Marcadores: <OPTION VALUE="ValorDaOpção">Descrição da
Opção</OPTION>
§ O Atributo SELECTED é opcional, e quando existir, deixa a
opção selecionada.
• O Atributo SIZE, define se o campo será da forma DropDown, ou uma
lista com X opções visíveis.
• Exemplo DropDown:
…
Selecione uma opção:<br>
<SELECT NAME="acesso">
<OPTION VALUE="Casa">Acesso da minha Casa</OPTION>
<OPTION VALUE="Trabalho">Acesso do Trabalho</OPTION>
<OPTION VALUE="Escola">Acesso da Escola</OPTION>
<OPTION VALUE="LAN">Acesso de uma LAN House</OPTION>
<OPTION VALUE="Outros">Outros Meios</OPTION>
</SELECT>
…
• Exemplo Lista:
…
Selecione uma opção:<br>
<SELECT NAME="acesso" SIZE="3">
<OPTION VALUE="Casa">Acesso da minha Casa</OPTION>
<OPTION VALUE="Trabalho">Acesso do Trabalho</OPTION>
<OPTION VALUE="Escola">Acesso da Escola</OPTION>
<OPTION VALUE="LAN">Acesso de uma LAN House</OPTION>
<OPTION VALUE="Outros">Outros Meios</OPTION>
</SELECT>
…