Curso HTML

Curso de HTML
O curso proposto resultado da experincia da Pr-

Informtica em ministrar treinamentos para
capacitao na rea de TI ao longo dos seus 26 anos.

O objetivo principal do curso ensinar tcnicas para
construo de sites usando a linguagem HTML.

a nica coisa constante no mundo a mudana

HTML (HyperText Markup Language - Linguagem de
Marcao de Hipertexto) e a uma linguagem
considerada a base de todas as outras linguagens de
desenvolvimento de projetos para WEB.
A linguagem HTML baseada me tags, as tags
constituem um conjunto comandos interpretados pelo
navegador.
As tags tem o seguinte formato:
<html> </html>
As tags tem na maioria das vezes o formato a seguir:
<comando> Sinal de menor o comando desejado e
sinal de maior para iniciar o bloco de comando.
</comando> Sinal de menor, barra o comando para
fechar o bloco.
A tag inicial de uma Home Page :
<HTML>
</HTML>
A tag HTML conta ao navegador que o bloco de
comando a seguir um cdigo HTML e deve ser
interpretado pelo navegador.
A tag para definirmos o titulo do navegador :
<TITLE>Minha primeira home page</TITLE>

A tag para definirmos o titulo da pgina :
<HEAD>Universidade Galxia</HEAD>

A tag HEAD pode ter seu tamanho definido pelas tags:
<H1></H1> Maior ttulo possvel
<H2></H2> Segundo maior ttulo possvel
<H3></H3> ...
<H4></H4>
<H5></H5>

Para que possamos melhorar a visualizao de nossas
pginas, podemos utilizar a tag <FONT></FONT>.
A tag font tem os seguintes parmetros:
Color => Cor da fonte em ingls Ex. Red.
Face => Tipo da font Ex. Comic Sans Ms
Size => Tamanho da fonte em pixels Ex. 14

Para a formatao de um texto podemos usar vrias
combinaes do comando font, como mostrado.

<HEAD><FONT COLOR = RED FACE = ARIAL>
Universidade Galxia
</FONT></HEAD>

Para o alinhamento de um texto podemos usar as tags
<CENTER> Texto </CENTER>

<HEAD><H1><FONT COLOR = RED FACE = ARIAL> <CENTER>
Universidade Galxia
</CENTER></FONT></H1></HEAD>

Determinados pelos marcadores <BODY></BODY>, o
corpo e a parte da pgina que contem informaes
que sero visualizadas na tela.
Para mudarmos a cor de fundo de uma pagina
utilizaremos a tag BODY com a seguinte sintaxe.

<BODY BGCOLOR = COR>
O nome da cor deve estar em ingls, ex.: Gray, red,
yelow, blue, black.
Podemos utilizar ainda o nmero que identifica a cor
em questo.

Escolhendo cores padro para os texto e para os Links

<BODY TEXT="cor" LINK="cor" VLINK="cor" ALINK="cor>

Esses atributos determinam as cores para o texto geral da
pgina (TEXT), Links no visitados (LINK), Links j visitados
(VLINK) e o Link no momento que ele e ativado (ALINK).
As cores devem ser dadas preferencialmente em valores
hexadecimais.
Podemos ainda colocar uma figura como plano de
fundo em nossas pginas, para isto usamos a seguinte
tag:

<BODY BACKGROUND = caminho\imagem>

Exemplo:
<BODY BACKGROUND=img\fundo.gif">
Para se colocar imagens em uma pagina HTML. Usa-se
o marcador <IMG> dentro das delimitaes do
<BODY>.

<IMG SRC=caminho\imagem>

Exemplo:
< IMG SRC =img\foto.gif">
Este atributo especifica o tipo de alinhamento entre a imagem e
o texto da pagina. As opes de alinhamento so: LEFT, RIGHT,
TOP, MIDDLE, BOTTOM e CENTER.

<IMG SRC="IMAGEM" ALIGN="alinhamento">

Exemplo:
< IMG SRC =img\foto.gif ALIGN = CENTER>
Este atributo determina a espessura da borda da imagem. No
caso de uma imagem sem bordas, este atributo no precisa ser
citado.

<IMG SRC="IMAGEM" BORDER="valor">

Exemplo:
< IMG SRC =img\foto.gif BORDER=2>
Estes atributos especificam a largura e a altura da imagem. Podem
ser dados os valores em pixels ou serem proporcionais ao tamanho
que a figura ocupara na pagina. Uma figura com dimenses
proporcionais as vezes sofre um efeito "stretch", ou seja, aparece
repuxada na pagina.

<IMG SRC="IMAGEM" WIDTH="LARGURA" HEIGHT="ALTURA">

Exemplo:
< IMG SRC =img\foto.gif WIDTH="333" HEIGHT="200">

O atributo ALT exibe uma descrio quando o cursor move-se sobre a
imagem. Existem usurios que utilizam navegadores incapazes de
exibir imagens ou ajustam o navegador para no carregar
imediatamente as imagens, devido a demora no carregamento das
paginas.

<IMG SRC="IMAGEM" ALT="TEXTO DESCRITIVO">

Exemplo:
< IMG SRC =img\foto.gif ALT="Foto de uma casa">

<P> Texto </P> Delimita um pargrafo. E possvel omitir o elemento
de fim </p> sem que isto cause problemas. Resultado da aplicao
deste marcador e uma linha em branco antes do inicio do pargrafo.

<P>Este o meu pargrafo que eu acabei de fazer agora mas como tenho
que inventar este texto estou digitando coisas sem sentido e aleatoriamente
por isso fica muito difcil entender o que estou digitando.</P>

O marcador de pargrafo possui um atributo opcional o ALIGN que serve
para configurar o alinhamento do pargrafo. O atributo ALIGN pode conter
valores como LEFT, CENTER, RIGHT e JUSTIFY que significam
respectivamente esquerda, centro, direita e justificado.

<P ALIGN = JUSTIFY>Este o meu pargrafo que eu acabei de fazer agora
mas como tenho que inventar este texto estou digitando coisas sem sentido
e aleatoriamente por isso fica muito difcil entender o que estou
digitando.</P>

Obs.: No esquecer de explicar o redimensionamento do navegador.
Existem alguns rgos nacionais e internacionais que
regulamentam algumas norma e prticas em diversas reas da
TI entre eles, podemos destacar: COBIT, ITIL, IEEE, ISO, W3C
e outros.
Importncia do <TITLE> </TITLE>
Alem mostrar o ttulo na barra do navegador, a tag <TITLE>
tem grande importncia, pois a maioria dos programas de busca
iniciam coletagem de informaes na tag <TITLE> do arquivo
index dos sites.

No devemos escrever textos longos na tag, pois a mesma
pode ficar cansativa se muito longa.

Algumas informaes so pertinentes, nome da empresa e
principal produto.

O HEAD ruim, mas bom.
A tag <HEAD> extremamente limitada acerca da formatao
do texto e alinhamento e pode ser substituda pela tag <FONT>
mas a mesma tem muita importncia, pois mecanismos de
busca lem o seu contedo para cache do site
1
.

1 Cache: tcnica que armazena diversas informaes do sites
para tornar a busca mais rpida.
Para melhor utilizao dos cdigos HTML podemos utilizar alguns melhores
mtodos de formatao, neste caso aplica-se aos pargrafos. Pargrafos
mau definidos tornam os cdigos HTML confusos e de difcil compreenso,
por isso, a codificao da pagina deve ser feita de forma clara e organizada.

<P align="justify"><font color="#003399" face="Courier New, Courier, monospace
size = 4>
Este o meu pargrafo que eu acabei de fazer agora mas como tenho que inventar
este texto estou digitando coisas sem sentido e aleatoriamente por isso fica muito
difcil entender o que estou digitando
</font></P>
<BR> - Marcador utilizado para separar duas linhas. E importante observar que
o marcador <BR> deve vir no final da linha que se quer separar.
________________________________________________________

<HR> - Utilizadas para dar destaque a ttulos ou para criar a sensao de
quebra entre um item de informao e outro. O marcador <HR> (Horizontal
Line) pode ser utilizado com ou sem parmetros. O comprimento da linha
WIDTH pode ser a largura exata da linha ou uma porcentagem da largura da
tela.
<HR SIZE="espessura da linha em pixels" WIDTH="comprimento da linha ALIGN="alinhamento da linha">
________________________________________________________

&nbsp - (Mgico) Faz com que o navegador mostre um espao em branco.
<B> TEXTO EM NEGRITO </B><BR>
<BIG> TEXTO EM FONTE MAIOR </BIG><BR>*****
<BLINK> EXIBE TEXTO PISCANDO </BLINK> <BR>*****
<I>TEXTO EM TALICO </I><BR>
<U>EXIBE O TEXTO SUBLINHADO </U><BR>
<SMALL>TEXTO EM FONTE MENOR </SMALL><BR>
<STRIKE>TEXTO RISCADO </STRIKE><BR>
<SUB>TEXTO EM SUBSCRITO </SUB><BR>
<SUP>TEXTO SOBRESCRITO </SUP><BR>
<TT>EXIBE O TEXTO USANDO FONTE EM TAMANHO FIXO</TT>

<ADDRESS> TEXTO </ADDRESS> - Exibe o texto em itlico utilizado para
indicar o endereo (postal, e-mail ou ambos) do autor do documento HTML.
Insere uma quebra de pargrafo <BR> antes e outra depois do texto e
geralmente e o ultimo item exibido no documento.

<BLOCKQUOTE> texto com margem </BLOCKQUOTE> - Destaca o texto
deixando-o com uma margem maior.

<CITE> TEXTO </CITE> - Exibe o texto em itlico utilizado para citaes de
livros, filmes, obras, etc.

<CODE> TEXTO </CODE> - Exibe o texto em fonte tamanho fixo (como
Courier) e e utilizado para identificar trechos de cdigos de programas.

<EM> TEXTO </EM> - Exibe o texto em itlico usado para enfatizar um texto.

<KBD> texto em fonte mono espaada </KBD> - Exibe o texto em fonte tamanho
fixo utilizado para indicar dados introduzidos pelo teclado.

<SAMP> TEXTO </SAMP>
Exibe o texto em uma fonte tamanho fixo (como Courier) utilizado para indicar
textos representados seqenciais de caracteres literais e mensagens de computador.

<STRONG> TEXTO </STRONG>
Exibe o texto em negrito utilizado para destacar um texto.

<VAR> TEXTO </VAR> Exibe o texto em itlico utilizado para destacar um nome
de varivel que o usurio deve substituir por um valor real.
Utilizadas como um recurso essencial para o layout geral da pagina atravs do
posicionamento de imagens e texto, as tabelas so compostas de linhas dentro
das quais so colocadas clulas de contedo. O contedo de cada clula pode ser
texto, imagem ou ate mesmo outra tabela. Uma tabela e delimitada com os
marcadores <TABLE></TABLE>, sendo que dentro destes marcadores so
colocadas as linhas e as colunas da tabela.

<TR> Indica o incio de uma nova linha na tabela
<TD> Indica uma coluna na tabela
</TD> Indica o final daquela coluna na tabela
</TR> Indica o final da linha na tabela

Contar pra que serve realmente o <div align="center">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
1 2 3
4 5 6
7 8 9
Podemos ainda alinhar o texto da tabela usando os seguintes parmetros:
<TABLE ALIGN="LEFT">
<TABLE ALIGN="RIGHT">
<TABLE ALIGN="CENTER">

Para definir o tamanho usaremos:
<TABLE WIDHT="largura da tabela" HEIGHT="altura da tabela">

Para largura da borda usaremos:
<TABLE BORDER="espessura da borda">

Especificar o deslocamento do contedo da clula em relao as bordas:
<TABLE CELLPADDING="valor">

Especifica o espaamento entre as clulas da tabela.
<TABLE CELLPACING="valor">

BORDERCOLOR e BGCOLOR
<TABLE BORDERCOLOR="valor hexadecimal" BGCOLOR="valor hexadecimal">
Especifica respectivamente a cor da borda e a cor da tabela. As cores devem ser dadas
em valores hexadecimais.

BACKGROUND
<TABLE BACKGROUND="imagem">

O mundo maior do que pensamos.
E a internet?
E os usurios?
E os computadores?
E os Navegadores, quantos so. (IE6, IE7, IE8, Firefox, Slim
Browser, Conqueror, Acoo Browser, Google Chrome, Avant
Browser, Opera Tor , Safari, e etc) so hoje mais de 450
publicados.
A grande pergunta :

O meu site vai funcionar bem em todos?

R1: Crie um ambientes de teste, instale pelo menos os mais
utilizados em seu PC e navegue pelo seu site.

R2: Capture as telas dos que apresentarem diferenas estticas
ou de resultado dos comandos.

R2: Contrate empresas especializadas em teste de software.
Os cdigos dos sites, portais e intranets so interpretados de
duas formas:

Interpretados pelo cliente: O prprio navegador
responsvel pela interpretao do cdigo. Ex.: HTML, DHTML,
CSS, VBScript e JavaScript.

Interpretados pelo servidor: obrigado que haja um
servidor que interpreta o cdigo e retorna para cliente em
forma de HTML. Ex.: ASP, PHP e Ruby On Rails.

Hyperlinks so caminhos dinmicos para outros site, paginas,
ou reas do mesmo documento.
1 - Para Sites:
<a href = http://site> Texto do site</a>
2 - Para pginas:
<a href = pagina.htm>Texto da pagina</a>
3 - Para reas do documento: Ancoras
<a name=rea"></a> cria a rea
<a href="#rea"> vai para a rea
4 - para reas em paginas.
<a href = pagina.htm#rea>Texto da pagina / rea</a>
Exemplo de link a partir de uma imagem
<a href="outrapagina.html"><img src=Imagen" border="0"></a>

Exemplo de link de download de arquivo
<a href="arquivo.zip>Clique para baixar</a>

Exemplo de link para e-mail
<a href="mailto:mail@seuprovedor.com.br">Fale Conosco </a>
E possvel colocar vdeo em uma pagina HTML utilizando o marcador <IMG>. A
nica diferena e que se acrescenta o atributo DYNSRC.

<IMG DYNSRC="origem do vdeo START="opo LOOP="nmero">

Para que o vdeo seja iniciado, automaticamente no carregamento da pagina e
preciso utilizar START="FILEOPEN

Para que o vdeo seja iniciado quando o usurio passar o mouse sobre ele e preciso
usar START="MOUSEOVER
LOOP: Especifica o numero de vezes que o vdeo vai ser exibido. Para que o vdeo
seja exibido
continuamente e preciso utilizar LOOP=INFINITE

Obs.: No precisa especificar o atributo START; apenas se no quiser a funo FILEOPEN, pois essa opo e padro.
<EMBED SRC="vdeo" WIDTH="valor" HEIGHT="valor" AUTOSTART="opo LOOP="opo">

O Mercado embed mostra os videos com um mini player com os botes de
EXECUTAR, PARAR, PAUSAR, ETC

O mesmo comando pode ser usado para sons.
Tipos: "DISC" , "CIRCLE" ou "SQUARE"

Sintaxe:
<UL Type = Disc>
<LI> Lista cada um dos subitens da lista </LI>
</UL>
Exemplo:
<ul>
<li> Curitiba </li>
<li> So Paulo </li>
<li> Rio de Janeiro </li>
</ul>
<OL start=Valor"> Onde start define o nmero inicial da lista
<LI> Lista cada um dos subitens da lista </LI>
</OL>
Exemplo:
<ol start = 3>
<li> Curitiba </li>
<li> So Paulo </li>
</ol>
TYPE:
Define o tipo de numerao aplicada na lista.
<ol type="A"> Assim em vez de aparecer 1, 2, 3 ... ira aparecer A, B, C ...
<li> Curitiba </li>
<li> So Paulo </li>
</ol>

<DL>
<DT> Termos a ser definidos </DT>
</DL>

Exemplo:
<DL>
<DT> Banana </DT>
<DD>Banana Ma </DD>
<DD>Banana Nanica </DD>
<DT> Mamo </DT>
<DD>Mamo Papaia </DD>
</DL>

um utilitrio HTML que possibilita cadastros, pesquisas, envio de
comentrios, e-mails desde que combinado com uma linguagem estruturada
aumentando (Java, ASP, PHP Rubi) um formulrio HTML uma pagina Web
que contem, alem de texto, elementos especiais chamados controles,
representados por caixas de checagem, botes, caixas de seleo, campos
de textos, etc.

A TAG usado e <FORM></FORM> para marcar o inicio e o fim do
Formulrio.

A tag form pode receber alguns parmetros como veremos a seguir.
<FORM NAME=nome METHOD=valor ACTION=Ao>
elementos do formulrios
</FORM>

Para o parmetro NAME informamos o nome do formulrio.

Para o parmetro METHOD informaremos GET OU POST onde:
GET uma cadeia de pedido, por exemplo: ydoc.asp?var1.
POST uma cadeia de envio de dados, por exemplo: respostas.php.

Para o parmetro ACTION o nome da pagina, banco de dados que cedera ou
recebera os dados.
Caixa de texto: So campos onde o usurio poder entrar com dados do tipo
texto como nome, fone, e-mail.

Exemplo:
<p>Entre com seu nome:<INPUT TYPE=TEXT NAME=Nome></p>

Input: Comando que indica uma entrada de dados.
Type = text: Indica que a entrada uma caixa de texto
Name: Indica o nome da caixa de texto, usada para a interao com
outros programas.
Opcionalmente podemos utilizar o parmetro VALUE = valor para mostrar
a caixa de texto j preenchida.
Podemos ainda utilizar os parmetros Size e MAXLENGTH para definir o
tamanho da caixa e o mximo de caracteres permitidos, me pixels.
Caixa de texto como senha: So campos onde o usurio poder entrar com
dados do tipo texto e utilizar * para ocultar o texto.
Exemplo:
<p>Entre com sua senha<INPUT TYPE = "password" name=Senha>

Todos os parmetros do tipo TEXT podem ser aplicados ao tipo Password.
Caixa de texto com mltiplas linhas: So campos onde o usurio poder
entrar com dados do tipo texto em uma rea maior e mais visvel, pode
conter ate 4000 caracteres.

Exemplo:
Sugestes:<BR> <textarea name="sugestao" cols="25" rows="6">
</textarea>

Todos os parmetros do tipo TEXT podem ser aplicados ao tipo Password e
os comandos cols (nmero de colunas, cada coluna um caracter) rows
(numero de linhas, cada linha mostra uma linha de texto).

Caixa de combinao: O marcador SELECT permite a criao de uma lista de
opes a serem escolhidas pelo usurio.

Exemplo:

Sexo:<SELECT NAME=sexo SIZE=2>
<OPTION VALUE=Masculino> Masculino </OPTION>
<OPTION VALUE=Feminino> Feminino </OPTION>
</SELECT>

Caixa de listagem: Permite que na tela aparea uma lista com mais de uma opo,
podendo o usurio escolher mais de uma. A criao de caixas de listagem com
mltipla seleo idntica a criao de caixas de listagem sem mltiplas selees
com exceo do atributo MULTIPLE que deve ser acrescentado.

Exemplo:
<SELECT NAME=interesses SIZE=5 MULTIPLE>
<OPTION VALUE=vazio>Escolha a rea de interesse</OPTION>
<OPTION VALUE=iniciant>Curso de iniciantes</OPTION>
<OPTION VALUE=formprof>Formao profissional</OPTION>
<OPTION VALUE=ctec>Cursos Microsoft CTEC</OPTION>
<OPTION VALUE=todos>Todos</OPTION>
</SELECT>

Caixa de listagem: Permite que na tela aparea uma lista com mais de uma opo,
podendo o usurio escolher mais de uma. A criao de caixas de listagem com
mltipla seleo idntica a criao de caixas de listagem sem mltiplas selees
com exceo do atributo MULTIPLE que deve ser acrescentado.

Exemplo:
<SELECT NAME=interesses SIZE=5 MULTIPLE>
<OPTION VALUE=vazio>Escolha a rea de interesse</OPTION>
<OPTION VALUE=iniciant>Curso de iniciantes</OPTION>
<OPTION VALUE=formprof>Formao profissional</OPTION>
<OPTION VALUE=ctec>Cursos Microsoft CTEC</OPTION>
<OPTION VALUE=todos>Todos</OPTION>
</SELECT>

Caixa de Checagem: O valor CHECKBOX no atributo TYPE define uma caixa de
checagem. Na pratica, as caixas de checagem aparecem em grupos e os usurios
podem escolher uma ou mais opes..

Exemplo:
<p>Escolha a rea de interesse</p>
<INPUT TYPE=CHECKBOX NAME=caixa1 VALUE=iniciant> Cursos para
iniciantes<Br>
<INPUT TYPE=CHECKBOX NAME=caixa2 VALUE=formprof> Cursos de
formao
profissional<Br>
<INPUT TYPE=CHECKBOX NAME=caixa3 VALUE=ctec> Cursos da Microsoft
CTEC

CHECKED: atributo opcional que pode ser utilizado quando se deseja que a opo j
aparea selecionada na pagina.

Boto de opo: O valor RADIO no atributo TYPE define um boto de escolha. Na
pratica os botes de escolha aparecem em grupos e podem permitir que apenas uma
opo seja escolhida dentre as existentes.

Exemplo:
<p>Escolha a rea de interesse</p>
<INPUT TYPE=RADIO NAME=radio1 VALUE=iniciante> Cursos para
iniciantes<Br>
<INPUT TYPE=RADIO NAME=radio1 VALUE=formprof> Cursos formao
profissional<Br>
<INPUT TYPE=RADIO NAME=radio1 VALUE=ctec> Cursos Microsoft
CTEC<Br>

CHECKED: atributo opcional que pode ser utilizado quando se deseja que a opo j
aparea selecionada na pagina.

Boto LIMPA/CANCELA
<INPUT TYPE=RESET VALUE=texto que aparece no boto> O valor RESET no
atributo TYPE define um boto que limpa todos os campos, devolvendo os
mesmos valores de quando a pagina foi carregada. No atributo VALUE, pode-se
definir o que ser escrito no boto. Caso nenhum valor seja definido, aparecera
somente RESET.
Boto SUBMIT
<INPUT TYPE=SUBMIT VALUE=texto que aparece no Boto> O valor SUBMIT
no atributo TYPE define um boto que aciona o envio das informaes
preenchidas no formulrio ao programa interpretador. O atributo VALUE define o
que ser escrito no boto. Caso nenhum valor seja definido, aparecera somente
SUBMIT.

Introduo:

Folhas de estilos em cascata Cascading Style Sheets (CSS) uma ferramenta
para construo do layout de websites. Permite que voc projete websites com uma
tcnica completamente diferente da convencional e possibilita uma considervel
reduo de tempo de trabalho. Conhecer CSS uma necessidade para qualquer um
envolvido com o projeto web.

Para usar CSS necessrio um conhecimento bsico de HTML.

Qual a diferena entre CSS e HTML?

HTML usado para estruturar contedos. CSS usado para formatar contedos
estruturados.

Quais so os benefcios do uso de CSS?

CSS uma revoluo no mundo do web design. Os benefcios concretos do uso de
CSS incluem:
controle do layout de vrios documentos a partir de uma simples folha de estilos;
maior preciso no controle do layout;
aplicao de diferentes layouts para servir diferentes mdias (tela, impressora, etc.);
emprego de variadas, sofisticadas e avanadas tcnicas de desenvolvimento.

Quais so os benefcios do uso de CSS?

CSS uma revoluo no mundo do web design. Os benefcios concretos do uso de
CSS incluem: controle do layout de vrios documentos a partir de uma simples folha
de estilos; maior preciso no controle do layout; aplicao de diferentes layouts para
servir diferentes mdias (tela, impressora, etc.); emprego de variadas, sofisticadas e
avanadas tcnicas de desenvolvimento.

A sintaxe bsica das CSS
Suponha que desejamos uma cor de fundo vermelha para a pgina web:
Usando HTML podemos fazer assim:

Com CSS o mesmo resultado ser obtido assim:

<body bgcolor="#FF0000>
body {background-color: #FF0000;}
Voc pode aplicar CSS a um documento de trs maneiras distintas. Os trs mtodos
de aplicao esto exemplificados a seguir. Recomendamos que voc foque no
terceiro mtodo, ou seja o mtodo externo.

Mtodo 1: In-line (o atributo style)

Mtodo 2: Interno (a tag style)

Mtodo 3: Externo (link para uma folha de estilos)

Uma maneira de aplicar CSS pelo uso do atributo style do HTML. Tomando como
base o exemplo mostrado anteriormente a cor vermelha para o fundo da pgina pode
ser aplicada conforme mostrado a seguir:
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta uma pgina com fundo vermelho</p>
</body>
</html>
Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como
mostrado a seguir:
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta uma pgina com fundo vermelho</p>
</body>
</html>
O mtodo recomendado o de lincar para uma folha de estilos externa. Usaremos
este mtodo em nosso treinamento.

Uma folha de estilos externa um simples arquivo de texto com a extenso .css. Tal
como com qualquer outro tipo de arquivo voc pode colocar uma folha de estilos tanto
no servidor como no disco rgido.

Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css.

O "truque" criar um link no documento HTML (default.htm) para a folha de estilos
(style.css). O link criado em uma simples linha de cdigo HTML como mostrado a
seguir:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Notar que o caminho para a folha de estilos indicado no atributo href. Esta linha de
cdigo deve ser inserida na seo header do documento HTML, isto , entre as tags
<head> e </head>. Conforme mostrado abaixo:
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
...
body {
background-color: #FF0000;
}
default.htm
style.css
Vamos aprender como aplicar cores de primeiro plano e cores de fundo no seu
website. Abordaremos ainda os mtodos avanados de controle e posicionamento
de imagens de fundo. Sero explicadas as seguintes propriedades CSS:

color
background-color
background-image
background-repeat
background-attachment
background-position
background
A propriedade color define a cor do primeiro plano de um elemento.
Considere, por exemplo, que desejamos que todos os cabealhos de primeiro nvel
no documento sejam na cor vermelha. O elemento HTML que marca tais cabealhos
o elemento <h1>. O cdigo a seguir define todos os <h1> na cor vermelha.

h1 {
color: #ff0000;
}
A propriedade background-color define a cor do fundo de um elemento.
O elemento <body> contm todo o contedo de um documento HTML. Assim, para
mudar a cor de fundo da pgina, devemos aplicar a propriedade background-color
ao elemento <body>.

body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
A propriedade CSS background-image usada para definir uma imagem de fundo.

body {
background-image: url(img.tipo");
}
h1 {
color: #990000;
background-color: #FC9804;
}
A tabela a seguir mostra os quatro diferentes valores para background-repeat.

Parmetro Descrio
Background-repeat: repeat-x A imagem se repete na horizontal
background-repeat: repeat-y A imagem se repete na vertical
background-repeat: repeat
A imagem se repete na tanto na
horizontal como na vertical
background-repeat: no-repeat A imagem no se repete
A propriedade background-attachment define se a imagem ser fixa ou se ir rolar
juntamente com o elemento que a contm.
Value Description
Background-attachment: scroll A imagem rola com a pgina
Background-attachment: fixed A imagem fixa
body {
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
Por padro uma imagem de fundo posicionada no canto superior esquerdo da
tela.
A propriedade background-position permite alterar este posicionamento padro e
colocar a imagem em qualquer lugar na tela.

Existem vrias maneiras de definir o posicionamento da imagem na tela definindo
valores para background-position. Todas elas se utilizam de um sistema de
coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px
do topo e a 200px do lado esquerdo da janela do navegador.

As coordenadas podem ser expressas em percentagem da largura da janeja, em
unidades fixas (pixels, centmetros, etc.) ou pode-se usar as palavras top, bottom,
center, left e right. A figura a seguir ilustra o modelo de coordenadas:
Value Description
background-position: 2cm 2cm
A imagem posicionada a 2 cm da esquerda e 2 cm
para baixo na pgina
background-position: 50% 25%
A imagem centrada na horizontal e a um quarto
(25%) para baixo na pgina
background-position: top right
A imagem posicionada no canto superior direito
da pgina
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Com background voc declara vrias propriedades de modo abreviado,
economizando digitao e alguns bytes, alm de tornar a folha de estilo mais
fcil de se ler e entender
Nesta lio estudaremos as fontes e como aplic-las usando CSS. Veremos como
criar situaes para que determinada fonte seja visualizada pelo usurio mesmo
no estando instalada em seu sistema operacional. Descreveremos as seguintes
propriedades CSS:
font-family
font-style
font-variant
font-weight
font-size
font
h1 {
font-family: arial, verdana, sans-serif;
}

h2 {
font-family: "Times New Roman", serif;
}
Estilo da fonte [font-style]
h2 {font-family: "Times New Roman", serif; font-style: italic;}

Fonte variante [font-variant]
h1 {font-variant: small-caps;} h2 {font-variant: normal;}

Peso da fonte [font-weight]
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Tamanho da fonte [font-size]
h1 {font-size: 30px;} h2 {font-size: 12pt;}
h3 {font-size: 120%;} p {font-size: 1em;}

Compilando [font]
p {
font: italic bold 30px arial, sans-serif;
}
p {
text-indent: 30px; 
}

th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}

Decorao de textos [text-decoration]
h1 {
text-decoration: underline, overline ou line-through;
}

A propriedade text-transform controla a capitalizao (tornar maiscula)
do texto. Voc pode escolher capitalize, uppercase ou lowercase independentemente
de como o texto foi escrito no cdigo HTML.

capitalize Capitaliza a primeira letra de cada palavra. Por exemplo: pro informtica"
transforma-se para Pro Informtica ".

uppercase Converte todas as letras para maiscula. Por exemplo: pro informtica "
transforma-se para PRO INFORMATCA".

lowercase Converte todas as letras para minscula. Por exemplo: " PRO
INFORMATCA " transforma-se para" pro informtica ".

h1 {
text-transform: uppercase;
}
O espaamento entre os caracteres de um texto controlado pela propriedade
letter-spacing. O valor desta propriedade define o espao entre os caracteres. Por
exemplo, se voc deseja um espao de 3px entre as letras do texto de um pargrafo
<p> e de 6px entre as letras do texto de um cabealho <h1> o cdigo a seguir
dever ser usado.

h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Voc pode aplicar aos links tudo que aprendeu nas lies anteriores (mudar
cores, fontes, sublinhados, etc). A novidade aqui que voc pode definir as
propriedades de maneira diferenciada de acordo com o estado do link ou seja
visitado, no visitado, ativo ou com o ponteiro do mouse sobre o link. Isto possibilita
adicionar interessantes efeitos ao seu website. Para estilizar estes efeitos voc usar
as chamadas pseudo-classes.

O que pseudo-classe?
Uma pseudo-classe permite estilizar levando em conta condies diferentes ou
eventos ao definir uma propriedade de estilo para uma tag HTML.
Vamos ver um exemplo. Como voc j sabe, links so marcados no HTML com tags
<a>. Podemos ento usar a como um seletor CSS:

a {
color: blue;
}
Um link pode ter diferentes estados.
Por exemplo, pode ter sido visitado
ou no visitado. Voc usar pseudo-
classes para estilizar links visitados e
no visitados.
a:link {
color: blue;
}

a:visited {
color: red;
}
Use as pseudo-classes a:link e a:visited para estilizar links no
visitados e visitados respectivamente. Links ativos so estilizados com a
pseudo-classe a:active e a:hover, esta ltima a pseudo-classe para links
com o ponteiro do mouse sobre ele.
A seguir explicaremos com mais detalhes e exemplificao, as
quatro pseudo-classes.
a:link {
color: green;
}
A pseudo-classe :link usada para links no visitados.

No exemplo a seguir links no vistados sero na cor verde.
a:visited {
color: yellow;
}
A pseudo-clases :visited usada para links visitados. No
exemplo a seguir links visitados sero na cor amarela:
a:active {
background-color: red;
}
A pseudo-classe :active usada para links ativos.

No exemplo a seguir links ativos tero seu fundo na cor
vermelha:

Voc pode usar text-decoration:none; para remover o
sublinhado dos links.
Em alguns casos voc deseja aplicar estilos a um elemento ou grupo de
elementos em particular. Nesta lio veremos como usar class e id para
estilizar elementos.

Como definir uma cor para um determinado cabealho, diferente da cor
usada para os demais cabealhos do website? Como agrupar links em
diferentes categorias e estilizar cada categoria diferentemente? Estas so
algumas das questes que iremos responder nesta lio.

Agrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes tipos de uvas
usadas na produo de vinho branco e de vinho tinto. O cdigo HTML
conforme mostrado abaixo:
Veja uma lista de links sem formatao

<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>

<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Vamos criar a seguintes classes no style.css ou outro arquivo.

a {
color: blue;
}

a.whitewine {
color: #FFBB00;
}

a.redwine {
color: #800000;
}
Com esta configurao nossa lista ter outro visual.

<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>

<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Alm de agrupar elementos podemos
atribuir identificao a um nico
elemento. Isto feito usando o atributo
id.

O que h de especial no atributo id que
no poder existir dois ou mais
elementos com a mesma id, ou seja em
um documento apenas um e somente um
elemento poder ter uma determinada id.
Cada id nica. Para casos em que haja
necessidade de mais de um elemento
com a mesma identificao usamos o
atributo class. A seguir um exemplo de
possvel uso de id:
No arquivo de estilos
vamos criar o seguite
id.

#c1-2 {
color: red;
}
<h1>Captulo 1</h1>
...
<h2>Captulo 1.1</h2>
...
...
<h1>Captulo 2</h1>
...
...
<h3>Captulo 2.1.2</h3>
...
<h1 id="c1">Captulo 1</h1>
...
<h2 id="c1-1">Captulo 1.1</h2>
...
...
<h1 id="c2">Captulo 2</h1>
...
...
<h3 id="c2-1-2">Captulo 2.1.2</h3>
...
O elemento <span> um elemento neutro e que no adiciona qualquer tipo de
semntica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar
efeitos visuais a partes especficas do texto no seu documento.

Um exemplo deste uso mostrado na citao abaixo de autoria de Benjamin Franklin:

<p>Dormir cedo e acordar cedo faz o homem saudvel, rico e sbio.</p>

Folha de estilos:
span.benefit {
color:red;
}

<p>Dormir cedo e acordar cedo faz o homem<span
class="benefit">saudvel</span>,<span class="benefit">rico</span>e
<span class="benefit">sbio</span>.</p>
Enquanto <span> usado dentro de um elemento nvel de bloco como vimos no
exemplo anterior, <div> usado para agrupar um ou mais elementos nvel de
bloco.

Diferenas parte, o agrupamento com <div> funciona mais ou menos da mesma
maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados
Unidos agrupados segundo suas filiaes polticas:

#democrats {
background:blue;
}
entrada no CSS
#republicans {
background:red;
}
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>

<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos
elementos HTML. O box model, detalha ainda, as opes de ajuste de margens, bordas,
padding e contedo para cada elemento. Abaixo apresentamos um diagrama representando a
estrutura de construo do box model:
A ilustrao anterior terica. Vamos explic-la na prtica tomando como base um cabealho e
um texto. O HTML para nosso exemplo (o texto foi retirado da Declarao Universal dos
Direitos Humanos e est no original em ingls) o mostrado abaixo:
<h1>Article 1:</h1>

<p>
All human beings are born free and equal in dignity and
rights. They are endowed with reason and conscience and
should act towards one another in a spirit of brotherhood
</p>

Embora possa parecer um pouco complicado, a ilustrao mostra como cada um dos elementos
contido em um box (uma caixa). Boxes que podem ser ajustados e controlados via CSS.
Na lio anterior vimos o box model. Nesta lio veremos como controlar a apresentao de
um elemento definindo as propriedades margin.
Margens do documento
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Forma compilada e magens de paragrafos

body {
margin: 100px 40px 10px 70px;
}

p {
margin: 5px 50px 5px 50px;
}
Padding pode tambm ser entendido como "enchimento". Isto faz sentido, porque padding no
computado na distncia entre elementos, padding define simplesmente a distncia entre a
borda e o contedo do elemento.
Definindo padding para os cabealhos, alteramos a quantidade de enchimento
existente ao redor de cada um deles:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}
Bordas podem ser usadas para muitas coisas, por exemplo, como elemento
decorativo ou para servir de linha de separao entre duas coisas. CSS
proporciona infinitas possibilidades de uso de bordas na pgina.
border-width
border-color
border-style
Exemplos de definio de bordas
border
A espessura das bordas [border-width] => border-width:2px;

As cores das bordas [border-color] => border-color:#000000;

Tipos de bordas[border-style] => border-style:
(dotted,dashed,solid,double,gloove,ridge,inset,outset)
Forma compilada

p {
border: 1px solid blue;
}
At agora ainda no fizemos qualquer considerao sobre as dimenses dos elementos com
que trabalhamos. Nesta lio veremos como fcil atribuir uma altura e uma largura para um
elemento.

O exemplo a seguir constri um box dentro do qual podemos digitar um texto:

Css
#box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}

HTML
<div id ="box> texto</div>
Um elemento pode ser 'flutuado' esquerda ou direita com uso da propriedade float. Isto
significa que o box e seu contedo so deslocados para a direita ou para a esquerda do
documento (ou do bloco container)
Floats podem ser usados para construir colunas em um documento. Para criar as colunas
estruturamos as colunas no cdigo HTML usando <div> como mostrado a seguir:
CSS

#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
HTML

<div id="column1">
<p>Texto coluna1</p>
</div>

<div id="column2">
<p>Texto coluna2</p>
</div>

<div id="column3">
<p>Texto coluna 3</p>
</div>

Podemos utilizar o CSS para construo de menus de forma rpida e pratica, vamos partir de
uma lista cotoca, onde a classe menu_vertical ser criada em um css.
HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</Head>

<ul class="menu_vertical">
<li><a href="#">Home</a></li>
<li><a href="#">Histria</a></li>
<li><a href="#">Filosofia</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</HTML>
ul.menu_vertical {
margin: 0;
padding: 0;
list-style: none;
width:100;
height:auto;
}

ul.menu_vertical li a{
display: block;
padding: 10px;
color: #333;
background: #eee;
border-bottom: 1px solid #fff;
text-decoration: none;
width:100;
height:auto;
}

ul.menu_vertical li a:hover {
background: #ccc;
width:100;
height:auto;
}
HTML>
<head>
</Head>

<ul class="menu_vertical">
</ul>
</HTML>
Podemos utilizar o CSS para construo de menus de forma rpida e pratica, vamos partir de
uma lista cotoca, onde a classe menu_vertical ser criada em um css.
HTML>
<head>
</Head>

<ul class="menu_horizontal">
</ul>
ul.menu_horizontal {
margin: 0;
padding: 0;
list-style: none;
}

ul.menu_horizontal li {
display: inline;
}

ul.menu_horizontal li a{
float: left;
display: block;
padding: 10px;
color: #333;
background: #eee;
text-decoration: none;
}

ul.menu_horizontal li a:hover {
background: #ccc;
}
HTML>
<head>
</Head>

<ul class="menu_horizontal">
</ul>
</HTML>
Posio Absoluta e Relativa:

#topleft {

position:absolute;

top:0;

left:0;
}

Curso HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Curso HTML

Загружено:

Авторское право:

Доступные форматы

Curso de HTML

O curso proposto resultado da experincia da Pr-

Вам также может понравиться