Apostila htmlcsswordpressEDITADA

HTML5, CSS3 e WORDPRESS
ndice
Introduo
Baixando os arquivos de dados
Requisitos
Sobre Notepad ++
Sobre HTML e CSS
HTML5
HTML bsico Tags
HTML Tag Sintaxe
Cabea e Corpo Tag
CSS
CSS Sintaxe
Id e class Seletores
Seletores CSS
Criando uma nova pgina da Web
Criando uma pgina inicial
Estrutura pgina da Web bsica
Recuo
Adicionando uma pgina de ttulo
Salvando e visualizando a pgina Web
Adicionando uma folha de estilo interna
Definir a cor de fundo
Criando um Wrapper
Criando uma classe para o Wrapper
Checkpoint Um
Criando a estrutura de pgina da Web dentro do
recipiente
Adicionando uma bandeira
Adicionando uma barra de navegao
Checkpoint Dois
Adicionando os principais recipientes contedo
Adicionando o contedo principal
Adicionando o rodap
Adicionando texto para a pgina Web
Checkpoint Trs
Styling bsica de texto 4
Apndice
Introduo
Sites podem ser criados usando uma das muitas linguagens de

programao (por exemplo, HTML, JSP, PHP,ASP, ASP.NET, ou
Perl). Entre essas linguagens, o HTML a linguagem baseada em
texto mais bsica, e tem sido utilizada em web design desde 1989. O
HTML consiste em duas partes: 1) Contedo que ser exibido em um
navegador, e 2) marcao ou tags, que so informaes codificadas
que so geralmente escondidas dos usurios das pginas de
web. Esta apostila de trs partes ir ajudar os usurios a criar um site
bsico usando conhecimentos fundamentais de HTML. A primeira
parte abrange conceitos bsicos de web design, incluindo o uso de
divises para organizar o layout de pgina, barra de menu para
vincular vrias pginas, e CSS3 para melhorar os elementos de uma
pgina web.
Onde Trabalhar
Sobre HTML e CSS
HyperText Markup Language (HTML) e Cascading Style Sheets (CSS)

so duas das tecnologias fundamentais para a construo de pginas
web.
HTML a linguagem que descrever a estrutura da pgina.
CSS a linguagem que descrever a apresentao da pgina,
incluindo cores, layout, e fontes. A separao do cdigo em HTML e
CSS faz com que seja mais fcil de manter os sites e de reproduzir o
estilo em outras pginas.
HTML5
HTML5 ainda um trabalho em andamento e tem sido assim desde
junho de 2004. A maioria das tags que eram compatveis em verses
anteriores do HTML ainda so compatveis nesta verso, no entanto,
elas no so mais usadas pois melhores solues j foram
encontradas. HTML5 ainda no uma verso final, mas j produz um
grande impacto na web.
Tags bsicas de HTML

O HTML usa tags para descrever a estrutura das pginas web. Os
navegadores usam as tags HTML de um documento para interpretar o
contedo e exibi-lo como uma pgina. Para cada pgina web baseada
em HTML, existem vrias tags que so sempre inseridas no
documento:
<! DOCTYPE>, <html>,<head>, <title> e <body>

(veja a Figura 2) .
Figura 2 - cdigo fonte para um HTML pgina em branco
Sintaxe das Tags HTML

As Tags HTML so palavras-chave entre colchetes angulares (<e>). Tags
HTML normalmente vm em pares (por exemplo, <corpo> e </corpo>). A
primeira tag em um par chamado de tag de abertura, e a segunda tag
chamado de tag de fechamento. A tag de abertura consiste no nome do tag
entre colchetes angulares (por exemplo, <corpo>). A tag de fechamento o
mesmo que a tag de abertura, mas possui uma barra (/) antes do nome da tag
(por exemplo, </corpo>).
Tags de Cabealho e Corpo
Pginas da web so divididos em duas sees: o cabealho e o corpo. A seo
da cabea onde voc define o ttulo da pgina web, fornece metadados sobre
a pgina (por exemplo, palavras-chave, caractere codificado), adiciona as
folhas de estilo, e insere scripts. A seco do corpo inclui todo o contedo da
pgina web, ou seja, a parte que os visitantes iro ver, incluindo textos,
hiperlinks, imagens, tabelas, listas, etc.
CSS
O CSS usado para controlar o estilo e layout de pginas da web. CSS pode
ser adicionado a um documento HTML das trs seguintes maneiras:
Uma folha de estilo externa (arquivo CSS) ideal quando o estilo
aplicado a muitas pginas. Isto permite alterar a aparncia e o layout de
um site inteiro editando apenas um arquivo. Cada pgina deve conter
um link para a sua folha de estilo usando a tag <link> na seo de
cabealho.
Uma folha de estilo interna pode ser usada se um documento tem um
estilo nico. Estilos internos so definidos na seo de cabealho
usando a tag <style>.
Um estilo alinhado pode ser usado se um estilo deve ser aplicado em
uma nica ocorrncia em um elemento. Para usar estilos alinhados,
utilize o atributo de estilo na tag relevante.
CSS Syntax
Uma regra CSS composta de duas partes: um seletor e uma ou mais
declaraes. O seletor designa ou tem como alvo o elemento HTML que voc
quer estilizar. A declarao instrui o navegador a exibir todos os elementos

identificados pelo seletor de um modo particular. Cada declarao consiste de
uma propriedade (atributo do estilo que deseja mudar) e um valor, e sempre
termina com um ponto e vrgula (;). As declaraes so cercadas por
chaves({e}). A regra na Figura 3 todos os pargrafos do documento HTML e
os exibe centrados e na cor vermelha.
Figura 3 - Sintaxe CSS
ID e Classe de Seletores
Alm de definir um estilo para um elemento HTML, o CSS permite que voc
especifique o seu prprio seletor de chamada ID e classe. O seletor de ID
usado para especificar um modelo de um elemento original e nico. Ele usa
o atributo id do elemento HTML, e definido com o sinal numrico (#). O
seletor de classe usado para especificar o estilo de um determinado grupo de
elementos. Ao contrrio do seletor de ID, o seletor de classe mais
frequentemente usado em vrios elementos. Isso permite que voc defina um
estilo particular para muitos elementos HTML com a mesma classe. O seletor
de classe usa o atributo de classe HTML, e definido com um ponto (.).
CSS seletores
Seletores CSS oferecem vrias maneiras de selecionar suas tags HTML para
estilizar (ver Tabela 1) .
NOTA: Para mais informaes sobre seletores CSS,
visita http://www.w3.org/TR/CSS2/selector.html .
Tabela 1 - CSS Seletores
seletor
Sintaxe
Descrio
Exemplo
identidade
seletor
#box {propriedade: valor;}
Afectar qualquer tag com o
Caixa de ID aplicada a ele.
<p id = "box">
Este texto afetado.
</ p>
Classe
seletor
.box {propriedade: valor;}

Afectar qualquer tag com o
caixa de classe aplicado a ele.
<p class = "box">
Este texto afetado.
</ p>
etiqueta
seletor
p {propriedade: valor;}
Afetar todos os tags <p> em
o documento HTML.
<p>
Este texto afetado.
</ p>
Criana
seletor
p> a {propriedade: valor;}
Afetar todos os tags <a>
onde o pai um <p>
tag.
<p>
<a>
Este texto afetado.
</a>
</ p>
Pseudo
seletor
a: hover {propriedade: valor;} s ser aplicvel a definida
estilo no mouse sobre.
<a> Passe o mouse sobre esta
texto. </a>
Criando uma Nova Pgina
Cada site construdo dentro de um diretrio em um servidor web, e cada
pgina um arquivo separado neste diretrio. Quando um visitante entra em
uma Uniform Resource Locator (URL) em uma barra de endereo de um
navegador sem um nome de arquivo no final (por
exemplo, http://www.ojalai.com), o servidor procura para uma arquivo padro
e o exibe automaticamente. Na maioria dos servidores, a pgina padro em um
diretrio nomeada index.html.
Criando uma pgina inicial (home)
Quando voc comear a construir seu site, voc deve primeiro criar o sua
home e nome-la index.html.
Para criar uma home page:
1. Inicie o Notepad ++.
2. Se a rea de texto no estiver em branco, clique no boto Novo
na barra de ferramentas.
3. Clique em Arquivo no menu e selecione Salvar como.
4. Na caixa Nome do arquivo, digite index.html.
5. Clique em Salvar como e selecione Todos os tipos (*. *) na lista.
6. Salve na rea de Trabalho.
7. Clique no boto Criar nova pasta, mude o nome da pasta para site, e em
seguida pressione a tecla Enter.
8. Passe o arquivo index.html para a pasta site.
Estrutura Bsica de uma Pgina Web
Esta seo abrange os elementos mais bsicos que voc precisar para criar a
estrutura do seu documento HTML5. A primeira coisa que voc precisa
adicionar no seu documento uma declarao doctype que permite que
navegadores web saibam em qual a verso da linguagem a pgina escrita.
Em seguida, voc precisa adicionar a tag <html> que conta aos navegadores
web que este um documento HTML. Voc tambm precisa adicionar a tag
<head> que um continer para todos os elementos de cabealho, e a tag
<body>, que contm todo o contedo de um documento HTML. Alm disso,
voc pode definir o caractere de codificao que ser utilizado no documento
(por exemplo, utf-8).
Para criar uma estrutura bsica pgina da web:
1. No Notepad++, insira o seguinte cdigo na rea de texto.
<! doctype html>
<html lang = "pt">
<head>
<title> </ title>
<meta charset = "utf-8">
</ head>
<body>
</ body>
</ html>
NOTA: Mantenha sempre a identao.

Identao
Identar o cdigo fonte de qualquer linguagem de programao
absolutamente crucial. Isso torna o cdigo mais limpo e muito mais fcil de
ler. A tecla Tab muito utilizada para identar o cdigo-fonte. Em via de regra,
voc deve identar cada vez que voc inserir um elemento em outro
elemento. Isto conhecido como nesting (colocar no ninho, aninhado).
Exemplo:
<body>
<p>
Este um pargrafo aninhado.
</ p>
</ body>
No exemplo acima, a tag <p> aninhada na tag <body>. Cada tag em um
documento HTML est aninhada dentro da tag <html>, exceto a tag <!
doctype> que deve ser colocado na parte superior do
Documento HTML, antes da tag <html>.
Adicionando uma Pgina de Ttulo
A tag <title> define o ttulo da pgina e necessria em todos os documentos
HTML. O ttulo aparece na barra de ttulo dos navegadores. Ela tambm
fornece um ttulo para a pgina quando ela adicionada aos
favoritos, e exibe um ttulo para a pgina em resultados de pesquisas.
Para adicionar um ttulo de pgina:
1. Coloque o cursor entre a tag de abertura <title> e a de
fechamento </ title>, e escreva Oficina HTML.
Salvando e visualizando a pgina Web
Salvar a pgina logo no incio uma boa ideia por muitos motivos. Primeiro,
um bom hbito salvar seu trabalho periodicamente para que nada se perca em
caso de um erro do sistema. Segundo, d um nome ao arquivo que est sendo
trabalhado para que ele possa ser referenciado a partir de outros
arquivos. Terceiro e mais importante do ponto de vista de web design, permite
links de uma pgina para outra para ser relativo (ou seja, em vez
de http://www.mywebsite.com/webpage_2.html, o link ser
webpage_2.html). Isso ajuda a tornar mais fcil o funcionamento perfeito do
site offline, ou on-line, pois os links esto fazendo referncia a arquivos na
mesma pasta ou subpasta.
Para guardar e visualizar a pgina web:
1. Clique no menu Arquivo e selecione Salvar. Ou, pressione Ctrl + S.
2. D um duplo clique no arquivo index.html localizado na pasta

site para visualizar a pgina em uma janela do navegador.
Adicionando uma Folha de Estilo Interna
Nesta lio, a tag <style> adicionada seo de cabealho do documento,
que ser mais tarde usada para adicionar estilos.
Para adicionar a tag <style>:
1. Adicione uma nova linha abaixo da tag <meta>.
2. Digite <style>, pressione a tecla Enter quatro vezes para criar vrias
linhas em branco e, em seguida, digite </ style> (veja a Figura 4) .
NOTA: Pressione a tecla Tab para identar apropriadamente.
Figura 4 Tag <style> Adicionada Seo de Cabealho
Adicionando uma Cor de Fundo
O fundo de uma pgina define o tom para todo o site. Ao definir um fundo,
importante definir algo simples. O fundo dever reforar o contedo da
pgina, no o dominar. Podem ser utilizados dois tipos de fundos: uma nica
cor slida ou uma imagem. Nessa lio, uma cor de fundo ser definida
usando CSS.
Para definir uma cor de fundo:
1. Coloque o cursor na primeira linha em branco entre tag de
abertura <style> e a tag de fechamento </style>, em seguida, digite a
seguinte regra CSS para alterar a cor de fundo cinza claro.
body{
background-color: # CCCCCC;
}
NOTA: Certifique-se de aplicar a identao apropriada; alinhar a chave de
fechamento com o seletor body (veja Figura 5).
Figura 5 - regra CSS Definir a cor de fundo
2. Para ver o resultado, salve o arquivo e, em seguida, atualize a pgina
na janela do navegador.
Criando um Wrapper
Criar um wrapper uma parte essencial da criao de qualquer pgina web. O

wrapper ajuda a conter todo o seu contedo e d uma referncia mais
confivel para elementos de posicionamento em sua pgina.
Para criar um wrapper:
Coloque o cursor na linha em branco entre a tag de abertura <body> e a de
fechamento </ body>, e, em seguida, digite o seguinte cdigo.
<div class = "wrapper">
</ div>
NOTA: Certifique-se de aplicar a identao apropriada. Alm disso, crie
vrias linhas em branco entre as tags de abertura e fechamento para a insero
do contedo.
Criando uma Classe para o Wrapper
Um elemento div com uma classe de wrapper no faz nada se oaclasse
de wrapper no estiver definida.
Para definir uma nova classe:
Adicione uma nova linha antes da tag de fechamento </ style>, e em seguida,
digite a seguinte regra CSS.
div.wrapper {
width: 1000px;
height: 800px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
NOTA: A propriedade width define a largura do elemento div; 1.000 pixels,
a high define a altura do elemento; 800 pixels; margin-left: auto; e marginright: auto; so usados centrar o elemento; e border cria uma borda em torno
do elemento que de largura 1 pixel, slido (como oposio a pontilhado ou
tracejado) e preto.
NOTA: Usar margin-left: auto; e margin-right: auto; atualmente a mais
eficaz e compatvel forma de centralizar elementos em uma pgina.
na janela do navegador.
Primeiro Ponto para Verificar

Este o primeiro de trs pontos de verificao dentro desta
apostila. Certifique-se de que o seu documento que est sendo criado
semelhante ao arquivo verificar_1.html localizado na pasta de arquivos de
dados (veja Figura 6) .
Figura 6 - Cdigo Fonte no Arquivo verificar_1.html
Criando a estrutura de pgina da Web dentro do Container
At este ponto, a pgina da web que est sendo criada tem um fundo colorido
e as linhas gerais de uma caixa, que o wrapper ou conteiner. Nesta seo, um
banner e uma barra de navegao sero adicionados pgina.
Adicionando um Banner
Um elemento div pode ser colocado no topo da pgina web para servir como
um recipiente para um texto ou uma imagem que representa o site.
Para adicionar um banner:
1. Coloque o cursor na linha em branco entre a tag deabertura <div
class = "wrapper"> e a tag de fechamento </ div> e, em seguida, digite o
seguinte cdigo.
<div class = "banner"> </ div>
2. Para definir uma nova classe para o banner, adicione uma nova linha
antes da tag de fechamento </ style>, e em seguida, digite a seguinte regra
CSS.
div.banner {
width: 750px;
height: 90px;
position: relative;
top: 0px;
margin-left: auto;
margin-right: auto;
}
NOTA: A declarao position: relative; um pouco complexa e usada para
lhe dar mais de uma escolha de como voc quer o posicionamento do seu
elemento em relao aos seus arredores; top: 0px; move o elemento de modo
que a parte superior do elemento estar na parte superior do elemento pai, que
neste caso o wrapper.
Adicionando uma barra de navegao

Outro elemento div pode ser colocado abaixo do banner para servir como a
barra de navegao para chegar a outras pginas em seu site.
Para adicionar uma barra de navegao:
1. Adicione uma nova linha aps <div class = "banner"> </ div> e,
em seguida, digite o seguinte cdigo. <div class = "nav"> </ div>
2. Para definir uma nova classe para a barra de navegao, adicione
uma nova linha antes da tag de fechamento </ style>, e, em seguida, digite a
seguinte regra CSS.
div.nav {
background-color: # 5c5c5c;
width: 750px;
height: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
top: 3px;
border: 1px solid preta;
}
NOTA: Declarando position: relative;, a barra de navegao aparecer
naturalmente aps o Banner. Alm disso, 3 pixels de espao sero adicionados
entre a parte superior da barra de navegao e a parte inferior do banner.
3. Pressione Ctrl + S para salvar as alteraes.
Segundo Ponto para Verificar
Este o segundo ponto de controle dentro desta apostila. Certifique-se de que
o documento que est sendo criado semelhante
ao arquivo verificar_2.html localizado na pasta de arquivos (ver Figura 7) .
NOTA: O cdigo mostrado na Figura 7 apenas o cdigo adicionado desde o
primeiro ponto para verificar.
Figura 7 Cdigo Fonte do arquivo verificar_2.html
Adicionando os Principais Contedos do Container
At este ponto, a pgina Web que est sendo criado inclui um container e a
poro superior da pagina. Nesta seo, containers importantes adicionais
sero inclusos pgina.
Adicionando o Contedo Principal

Nesta lio, um elemento div ser colocado abaixo da barra de navegao para
servir como um rcontainer para o contedo principal da pgina web.
Para adicionar o contedo principal:
1. Adicione uma nova linha aps <div class = "nav"> </ div> e, em
seguida, digite o seguinte cdigo.
<div class = "main"> </ div>
2. Para definir uma nova classe para o contedo principal, adicione uma
nova linha antes da tag de fechamento </ style>, e, em seguida, digite a
seguinte regra CSS.
div.main {
position: relative;
top: 6px;
width: 750px;
height: 600px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
NOTA: Declarando position: relative;, o contedo principal aparecer
automaticamente aps o barra de navegao. Alm disso, 6 pixels de espao
so adicionados entre a parte superior do contedo principal e a parte inferior
da barra de navegao.
Adicionando o Rodap
Um rodap (footer) pode ser adicionado na parte inferior da pgina da web
para ajudar a dar algumas informaes sobre a pgina ou para fornecer uma
grande rea para links teis.
Para adicionar um rodap:
1. Adicione uma nova linha aps <div class = "main"> </ div> e, em
seguida, digite o seguinte cdigo.
<div class = "footer"> </ div>
2. Para definir uma nova classe para o rodap, adicione uma nova linha
antes da tag de fechamento </ style>, e, em seguida, digite a seguinte
regra CSS.
div.footer {
background-color: black;
height: 180px;
width: 752px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 8px;
z-index: 1;
color: white;
}
NOTA: A declarap z-index: 1; d ao rodap um z-index de 1, o que
significa que ele vai estar acima todos os outros elementos. O z-index uma
maneira de mudar as camadas dos elementos sem ter que reorganizar as tags
<div>.
Adicionando Texto Pgina Web
A maioria das pginas web so feitas de uma grande quantidade de texto. H
muitas coisas que voc pode fazer para fazer a sua pgina de texto parecer
mais interessante.
Para adicionar texto:
1. Adicione uma nova linha entre a tag de abertura <div class =
"main"> e a tag de fechamento </ div>,
e digite o cdigo a seguir.
<p class = "bem-vindas">
Este um texto.
</ p>
NOTA: A tag <p> define um pargrafo.
2. Para definir uma nova classe para o pargrafo, acrescente uma nova
linha antes da tag de fechamento </ style>, e, em seguida, digite a seguinte
regra CSS.
p.bem-vindas {
margin-left: 14px;
margin-right: 15px;
text-indent: 16px;
}
NOTA: A regra CSS acima s ir afetar a tag <p> com a classe bem-vindas.
no navegador.
Terceiro Ponto para Verificar
Este o terceiro ponto de controle dentro desta apostilha. Certifique-se de que
o documento que est sendo criado semelhante
ao arquivo verificar_3.html localizado na pasta de arquivos (ver Figura 8).
NOTA: O cdigo mostrado na Figura 8 mostra apenas o cdigo adicionado
aps o segundo ponto para verificar.
Figura 8 - Cdigo fonte no arquivo verificar_3.html
Estilizao Bsica de Texto
Textos HTML podem ser formatados e estilizados da mesma maneira que em
outros programas, como o Microsoft Word. Para adicionar mais estilos ao
texto, tente adicionar algumas das declaraes a seguir enumeradas para a
classe de texto
(p.bem-vindas).
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
color: red;
color: blue;
color: # 00FF00;
font-size: 20px;
Apndice
Tabela 2 - Utilizadas Normalmente tags HTML
etiqueta
Descrio
<a>
Define um hiperlink.
<b>
Faz texto em negrito.
<body>
Define o corpo do documento.
<br>
Insere uma nica quebra de linha.
<em>
Processa como texto enfatizou.
<form>
Usado para criar um formulrio HTML.
<h1> para <h6>
Definir posies.
<head>
Continer para todos os elementos da cabea.
<hr>
Cria uma linha horizontal.
<html>
Informa ao navegador que este um documento HTML.
<i>
Processa o texto em itlico.
<img>
Define uma imagem.
<input>
Especifica um campo de entrada.
<li>
Define um item da lista.
<Menu>
Usado para criar uma lista de opes de menu.
<ol>
Define uma lista ordenada.
<p>
Define um pargrafo.
<table>
Define uma tabela HTML.
<td>
Define uma clula normal em uma tabela HTML.
<th>
Define uma clula de cabealho em uma tabela HTML.
<title>
Define o ttulo do documento.
<tr>
Define uma linha em uma tabela HTML.
<ul>
Define uma lista no ordenada (com marcadores).
Tabela 3 - comumente usados cdigos HTML Cor

Cor
Cdigo
Cor
Cdigo
Preto
# 000000
verde
# 008000
Prata
# C0C0C0
Lima
# 00FF00
Cinzento
# 808080
Oliva
# 808000
Branco
#FFFFFF
Amarelo
# FFFF00
Maroon
# 800000
Marinha
# 000080
Vermelho
# FF0000
Azul
# 0000FF
Roxa
# 800080
Cerceta
# 008080
Fcsia
# FF00FF
gua
# 00FFFF
Para mais cdigos de cores HTML, visite:
Webmonkey ( http://www.webmonkey.com/2010/02/color_charts/ )

colourlovers ( http://www.colourlovers.com/blog/2007/06/30/ultimatehtml
colorhex
cdigo-list / )
ComputerHope ( http://www.computerhope.com/htmcolor.htm )

Apostila htmlcsswordpressEDITADA

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apostila htmlcsswordpressEDITADA

Caricato da

Copyright:

Formati disponibili

HTML5, CSS3 e WORDPRESS

Sites podem ser criados usando uma das muitas linguagens de

HyperText Markup Language (HTML) e Cascading Style Sheets (CSS)

Tags bsicas de HTML

<! DOCTYPE>, <html>,<head>, <title> e <body>

Sintaxe das Tags HTML

quer estilizar. A declarao instrui o navegador a exibir todos os elementos

.box {propriedade: valor;}

NOTA: Mantenha sempre a identao.

2. D um duplo clique no arquivo index.html localizado na pasta

Criar um wrapper uma parte essencial da criao de qualquer pgina web. O

Primeiro Ponto para Verificar

Adicionando uma barra de navegao

Adicionando o Contedo Principal

Tabela 3 - comumente usados cdigos HTML Cor

Potrebbero piacerti anche