Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Disciplina:

HTML & CSS

========================================================================
Apostila destinada ao Curso Técnico de Nível Médio em Informática das Escolas Estaduais de
Educação Profissional – EEEP

Equipe de Elaboração - 2012

Adriano Gomes da Silva

Cíntia Reis de Oliveira
Fernanda Vieira Ribeiro
Francisco Aislan da Silva Freitas
João Paulo de Oliveira Lima
Liane Coe Girão Cartaxo
Mirna Geyla Lopes Brandão
Moribe Gomes de Alcântara
Niltemberg Oliveira de Carvalho
Paulo Ricardo do Nascimento Lima
Renanh Gonçalves de Araújo
Renato William rodrigues de Souza

Atualização – 2018
Paulo Ricardo do Nascimento Lima
========================================================================

Informática – HTML / CSS 1

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

SUMÁRIO

APRESENTAÇÃO.........................................................................................................................................4
1.0 INTRODUÇÃO AO HTML....................................................................................................................5
1.1. O HTML5 ...........................................................................................................................................7
1.2. Criando documentos em HTML 5.......................................................................................................7
1.3. Utilizando algumas TAGs básicas.....................................................................................................10
1.4. DOCTYPE, language e charset.........................................................................................................11
1.4.1. DOCTYPE.................................................................................................................................11
1.4.2. Metatag CHARSET...................................................................................................................12
1.5. Caracteres Especiais..........................................................................................................................13
1.5.1. Resolvendo problemas com caracteres especiais e acentuação.....................................................13
1.6. Comentários em HTML....................................................................................................................14
2.1. Trabalhando com textos: Tags - <Hn>, <P>, <BR> e &nbsp...........................................................15
2.2. Novos Elementos Estruturais............................................................................................................17
3.0 Exemplos de Tags...................................................................................................................................19
3.1 Estrutura e criação do arquivo HTML...............................................................................................19
Passo 3: Salve a página HTML................................................................................................................20
3.2 HTML Básico.....................................................................................................................................21
3.2.1 Títulos..............................................................................................................................................21
3.2.2 Parágrafos........................................................................................................................................21
3.2.3 Links................................................................................................................................................22
3.2.4 Imagens...........................................................................................................................................22
3.2.5 Botões..............................................................................................................................................22
3.2.6 Listas...............................................................................................................................................22
3.3 Elementos HTML...............................................................................................................................23
3.4 Atributos.............................................................................................................................................25
3.5 Cabeçalhos.........................................................................................................................................28
3.6 Parágrafos...........................................................................................................................................29
3.7 Estilos.................................................................................................................................................31
3.8 Formatação de Texto..........................................................................................................................32
3.9 Comentários.......................................................................................................................................34
3.10 Cores................................................................................................................................................35
3.11 Links.................................................................................................................................................39
3.12 Imagens............................................................................................................................................44
3.13 Tabelas..............................................................................................................................................48
3.14 Listas................................................................................................................................................53
3.15 Classes..............................................................................................................................................56
3.16 Atributo Id........................................................................................................................................57
3.17 Iframes..............................................................................................................................................57
3.18 Layouts.............................................................................................................................................58
3.19 Forms................................................................................................................................................58
4.0 Uploading páginas..................................................................................................................................65
5.0 Web standards e validação.....................................................................................................................66
6.0 Dicas finais.............................................................................................................................................68
7.0 Introdução - CSS....................................................................................................................................70
7.1 O que é CSS?.....................................................................................................................................70
7.2 Como o CSS trabalha?.......................................................................................................................71
7.3 Cores e fundos....................................................................................................................................75
7.4 Fontes.................................................................................................................................................83
7.5 Estilo da fonte [font-style].................................................................................................................84
7.6 Font size [font-size]............................................................................................................................85
Informática – HTML / CSS 2
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

7.7 Textos.................................................................................................................................................86
7.8 Links...................................................................................................................................................89
7.9 Identificando e agrupando elementos (class e id)..............................................................................93
7.10 Agrupando elementos (span e div)...................................................................................................96
7.11 O box model.....................................................................................................................................98
7.12 Margin e padding.............................................................................................................................99
7.13 Bordas............................................................................................................................................102
7.14 Altura e largura...............................................................................................................................106
7.15 Flutuando elementos (floats)..........................................................................................................107
7.16 Posicionando elementos.................................................................................................................110
7.17 Camada sobre camada com z-index (Layers).................................................................................113
7.18 Web standards e validação..............................................................................................................115
REFERÊNCIAS:........................................................................................................................................116

Informática – HTML / CSS 3

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

APRESENTAÇÃO

No intuito de deixar claro à(o) professor(a) o que é esperado do aluno ao final da disciplina, este manual
propõe os objetivos de aprendizagem referentes ao tema, acompanhado do conteúdo de cada disciplina.
Disponibiliza uma bibliografia para o(a) professor(a), subsidiando-o(a) para aprofundar os debates em
sala de aula, bem como, uma bibliografia de referência do Manual.

O objetivo deste material é mostrar um pouco sobre a linguagem HTML e CSS para desenvolvimento de
páginas e conteúdos para à internet, bem como despertar no aluno a curiosidade de investir mais nessa
área a fim de aprofundar seus conhecimentos na descoberta de novas linguagens e métodos para
desenvolvimento web.

A abordagem deste material terá a missão de orientar melhor ao professor no que é essencial no
desenvolvimento de conteúdos para a internet.

Este material teve como grande contribuição e referência para alguns capítulos o material do projeto
MEDIOTEC – SEDUC, como apostilas do módulo II, em uma verificação e adaptação do material, por
ser um material muito importante e de altíssima qualidade, aproximando bastante a experiência à pratica
do técnico em informática na área de desenvolvimento para web.

Outras referências de pesquisa e adaptação, foram de matérias de sites e artigos confiáveis da internet.

O material em questão já havia sido desenvolvido pela antiga turma de produção dos materiais, onde há
sempre a necessidade de atualizações e ajustes para a demanda e o novo perfil de profissional que o
mercado necessita.

Por isso faça um bom proveito dos conhecimentos aqui destacados, e que você possa ir muito mais além,
com práticas e vivências no dia a dia para a sua preparação no seu processo de aprendizagem.

Informática – HTML / CSS 4

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

1.0 INTRODUÇÃO AO HTML

HTML é a base para o Internet People muitas vezes achamos que é extremamente difícil fazer um site.
Isso não é o caso! Todo mundo pode aprender a fazer um site. E se você ler, você terá feito uma em
apenas uma hora.

Outros pensam - erroneamente - que softwares avançados e caros é necessários para fazer sites. É verdade
que existem muitos programas diferentes, que afirmam que eles podem criar um site para você. Alguns
mais completos que outros. Mas se você deseja que seja feito certo, você deve fazê-lo sozinho.
Felizmente, é simples e gratuito e você já tem todo o software que você precisa.

O objetivo deste manual é dar-lhe uma introdução fácil, ainda completa e correta de como fazer sites. O
manual parte do zero e não requer nenhum conhecimento prévio de programação.

O manual não pode mostrar-lhe tudo. Então, dedicação e vontade de aprender são obrigatórios. Mas não
se preocupe - aprender a fazer sites é muito divertido e dá uma tremenda quantidade de satisfação quando
você consegue.

De maneira simples e objetiva podemos definir Web Design como o conjunto de atividades responsáveis
por estruturar meios, relacionando texto com imagens e conteúdo multimídia em geral, para disseminar
informações na internet. O web designer utiliza-se de conhecimentos técnicos formais para atuar em
inúmeras áreas, dentre as quais podemos destacar a criação de web sites (ou apenas sites).

Com o crescimento contínuo da grande rede mundial de computadores, denominada internet, a criação de
aplicativos e conteúdo em geral para a mesma tornou-se um poderoso mercado consumidor de
profissionais como designer e programadores.

Hoje podemos considerar a internet como um dos maiores, mais velozes e mais ramificados meios de
comunicação, um grande exemplo que comprova esse fato são as redes sociais. No entanto, qualquer
crescimento traz, atrelado a si, um aumento no padrão de qualidade do conteúdo que será consumido.
Desse modo, é de suma importância que o Web Designer, conheça e saiba utilizar diversas ferramentas de
criação, além de possuir conhecimento técnico aprimorado.

O objetivo do nosso curso é proporcionar conhecimento na utilização de ferramentas para criação de

conteúdo e páginas web. Dessa forma, estudaremos conteúdos como: HTML 5, CSS e BOOTSTRAP.

Antes de iniciarmos nossos estudos é necessário que tenhamos alguns conceitos bem fixados, já que
muitos desses termos serão mencionados no decorrer do curso.

WWW: Abreviação de World Wide Web, é um sistema de documentos em hipermídia (hypertextos,

vídeos, sons, imagens, etc.) que são interligados. É constantemente utilizada como sinônimo de internet.

SITE: Conjunto de páginas web que representam uma pessoa, empresa ou instituição na web.

BROWSER: Também denominado de navegador, é um software utilizado para ler e interpretar as

páginas web, possibilitando que os usuários interajam com as mesmas. É através do browser que
“navegamos” na internet.

URL: Uniform Resource Locator – Localizador Uniforme de Recursos é uma sequência de caracteres que
define o endereço de um site ou recurso da web.

HTTP (Hypertext Transfer Protocol): Protocolo de Transferência de Hipertexto é um protocolo de

Informática – HTML / CSS 5
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

comunicação (presente na camada de aplicação, segundo o Modelo de Referência OSI) muito utilizado na
internet.

FTP (File Transfer Protocol): é uma forma de transferir arquivos. Pode referir-se tanto ao protocolo
quanto ao programa que implementa este protocolo.

HTML é a "língua mãe" do seu navegador Tim Berners-Lee criou o HTML

original (e outros protocolos associados como o HTTP) em uma estação
NeXTcube usando o ambiente de desenvolvimento NeXTSTEP.

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. Sua solução, combinada com a
então emergente internet pública (que tornaria-se a Internet) ganhou atenção
mundial.

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. Atualmente a sintaxe do HTML é muito mais rígida, permitindo
um código mais preciso.

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 (retrocompatibilidade), os
navegadores ainda hoje conseguem interpretar páginas web que estão longe de ser um código HTML
válido.

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 como uma aplicação formal
para o SGML (com uma DTD em SGML definindo a gramática). 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).[1]
Apesar disso, em 2000 a linguagem tornou-se também uma norma internacional (ISO/IEC 15445:2000).
A última especificação HTML lançada pela W3C foi a recomendação HTML 4.01, publicada no final de
1999. Uma errata ainda foi lançada em 2001.

Desde a publicação do HTML 3.5 no final de 1997, o grupo de trabalho da W3C tem cada vez mais — e
de 2002 a 2006, de forma exclusiva — focado no desenvolvimento do XHTML, uma especificação
HTML baseada em XML que é considerada pela W3C como um sucessor do HTML.[2][3][4] O XHTML
faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser
processado e estendido.

Em janeiro de 2008 a W3C publicou a especificação do HTML5, a próxima versão do HTML, como
Working Draft. Apesar de sua sintaxe ser semelhante a de SGML, o HTML5 abandonou qualquer
tentativa de ser uma aplicação SGML e, definiu explicitamente sua própria serialização "html", além de
uma alternativa baseada em XML, o XHTML5.

O que você vê quando você exibir uma página na Internet é a interpretação do seu navegador de HTML.
Para ver o código HTML de uma página na internet, basta clicar em "Exibir" no menu superior do seu
navegador e escolha "Source".

Informática – HTML / CSS 6

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

1.1. O HTML5

Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas que
deveriam ser seguidas ao produzir códigos. Desde esse tempo, assuntos como: necessidade da separação
do código estrutural, da formatação, assim como princípios de acessibilidade foram trazidos para
discussões entre fabricantes e desenvolvedores.

Contudo, o HTML4 ainda não trazia diferencial real para a semântica do código. o HTML4 também não
facilitava a manipulação dos elementos via Javascript ou CSS. Se você quisesse criar um sistema com a
possibilidade de Drag’n Drop (arrastar e soltar elementos) de elementos, era necessário criar um grande
script, com bugs e que muitas vezes não funcionavam de acordo em todos os browsers.

O HTML5 veio como a versão atualizada do HTML4. O WHATWG, que é um grupo de trabalho de
pessoas interessadas na evolução do HTML e as tecnologias ligadas a tal, é o responsável por definir as
regras de marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que formarão a
base da arquitetura web. Essas APIs são conhecidas como DOM Level 0.

Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o

desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja
transparente para o usuário final.

Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu
trabalho da melhor maneira possível, permitindo por meio de suas APIs a manipulação das características
destes elementos, de forma que o website ou a aplicação continue leve e funcional.

Com o surgimento do HTML5, algumas tags foram criadas enquanto outras tiveram suas funções
modificadas e/ou descontinuadas. Isso tudo devido as versões antigas do HTML não conterem um padrão
universal exigido pelo W3C, para a criação de seções comuns e específicas como rodapé, cabeçalho,
sidebar, menus, nomenclatura de IDs, Classes ou tags assim como um método de captura automática das
informações localizadas nos rodapés dos websites.

O HTML5 modifica a forma de como escrevemos código e organizamos a informação na página. Seria
mais semântica com menos código, mais interatividade sem a necessidade de instalação de plugins e
perda de performance. É a criação de código interoperável, pronto para futuros dispositivos e que facilita
a reutilização da informação de diversas formas através da aplicação do conceito de retrocompatibilidade
onde, nenhum site deverá ter de ser refeito totalmente para se adequar aos novos conceitos e regras. O
HTML5 está sendo criado para que seja compatível com os browsers recentes, possibilitando a utilização
das novas características imediatamente.

1.2. Criando documentos em HTML 5

Antes de iniciarmos os códigos é válido conhecer um pouco sobre a nomenclatura, como os códigos são
lidos pelos browsers e o que é necessário para começar a escrever os códigos em HTML.

HTML significa Hyper Text Markup Language e ao contrário do que muitos ainda pensam, não é uma
linguagem de programação e sim de marcação interpretada por um navegador. Em html as informações
estão ligadas na forma de páginas que são transferidas de um computador remoto para o usuário, onde
obrowser faz o trabalho de interpretar os códigos e mostrar a página que o usuário vê.

Requisitos para o desenvolvimento de uma página WEB:

Informática – HTML / CSS 7

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

• Conhecer a linguagem HTML;

• Um bom editor de texto para gerar o seu código fonte (Bloco de notas, Gedit, Notepad++, Sublime
Text, NetBeans, Eclipse, entre outros);

• Um navegador de internet (Internet Explorer, Mozilla Firefox, Chrome, Opera, Safari, entre
outros) para visualizar as suas páginas. Obs.: É importante possuir mais de um navegador para
poder testar e visualizar o funcionamento do código em cada um deles pois você perceberá que
existem pequenas diferenças de um para o outro.

Assim como em outras linguagens, o HTML possui uma sintaxe própria e que devem seguir algumas
regras. Esses comandos são denominados de TAGs e nada mais são do que marcas padrões, utilizadas
para fazer indicações a um browser.

As TAGs aparecem sempre entre sinais de “menor que” (<) e “maior que” (>);

Geralmente são utilizadas aos pares, onde a TAG de finalização de um comando qualquer é finalizada
com a precedência de uma barra (/). Por exemplo: <html> e </html>

Qualquer documento HTML é construído através da utilização das TAGs, seguindo a estrutura abaixo.

<Nome_da_TAG Atributo_1=“valor_1” Atributo_2=valor_2”>.....</Nome_da_TAG>

Tudo que se encontra entre a tag (…..), seja um texto, imagem ou outro elemento qualquer, receberá a
formatação definida pela tag e seu(s) atributo(s). Os símbolos <> indicam que a tag foi “aberta”, ou seja,
o efeito de marcação desta tag atuará até que a mesma seja “fechada” com os símbolos </>. É importante
ressaltar que algumas tags não necessitam de “fechamento”, porém isso pode ser resolvido colocando a
“/” dentro da tag de abertura, ao final do nome: <br />.

OBS: As tags HTML não são case sensitive, ou seja, não diferenciam letras maiúsculas de minúsculas.
Portanto, tanto faz você escrever <html></html> como <HTML></HTML> porém, por boas práticas de
conduta, é indicado que tudo seja escrito em caixa baixa (letra minúscula).

O que é necessário para iniciar?

Muito provavelmente você já tem tudo que precisa.

Você tem um "navegador".

Um navegador é o programa que torna possível navegar e abrir sites.Não é importante qual navegador
você usa. O mais comum é o Microsoft Internet Explorer. Mas há outros, como Opera e Mozilla Firefox e
todos eles podem ser usados.

Você pode ter ouvido falar ou até mesmo usado, programas como o Microsoft FrontPage, Macromedia
Informática – HTML / CSS 8
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Dreamweaver ou mesmo Microsoft Word, que pode ou afirmam que eles podem criar websites para você.

Esqueça esses programas por enquanto! Eles não são de nenhuma ajuda para você, quando aprender a
codificar seu próprio site.

Em vez disso, você precisa de um editor de texto simples. Se você estiver usando Windows, você pode
usar o Wordpad, que normalmente é encontrado no menu Iniciar, Programas em Acessórios:

Se você não estiver usando o Windows, você pode usar um editor de texto similar. Por exemplo, Pico
(Linux) ou TextEdit (Mac).

Bloco de notas é um programa de edição de texto básico que é excelente para codificação, porque não
interfere com o que você está digitando. Ele lhe dá o controle completo. O problema com muitos dos
programas que afirmam que podem criar sites é que eles têm um monte de funções padrão, que você pode
escolher. A desvantagem é que, tudo precisa se encaixar nestas funções padrão. Assim, este tipo de
programas, muitas vezes não é possível criar um site exatamente como você quer. Ou ainda mais irritante
- fazem alterações em seu código escrito à mão. Com o bloco de notas ou outros editores de texto simples,
você só tem a si mesmo para agradecer por seus acertos e erros.

Informática – HTML / CSS 9

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Um navegador e o Notepad (ou um editor de texto similar) é tudo que você precisa para fazer seus
próprios sites.

Preciso estar on-line?

Você não precisa estar conectado à Internet, para construir seus sites.

Você pode fazer o site no disco rígido do seu computador e enviá-lo para a Internet quando ele for
concluído.

Ou ainda pode utilizar o Notepad++, como sugestão mais comum de uso:

1.3. Utilizando algumas TAGs básicas

Tags são etiquetas que utiliza para marcar o início e o fim de um elemento. Todas as marcas têm o mesmo
formato: começam com um sinal de menor "<" e terminam com um sinal de maior que ">".

De um modo geral, existem dois tipos de tags - tags de abertura: <html> e tags de fechamento: </ html>.
A única diferença entre uma tag de abertura e uma tag de fechamento é a barra "/". Você rotular
conteúdo, colocando-o entre uma tag de abertura e uma tag de fechamento.

HTML é tudo sobre os elementos. Para aprender HTML é aprender e usar marcas diferentes.

Agora conheceremos a estrutura básica do HTML e com ela, construiremos a nossa primeira página web,
com o tão famoso “Olá Mundo” (Hello World).

• <html> </html>: a tag html é utilizada para definir o início e o fim de um arquivo do tipo HTML, ou
seja, ela é a primeira tag a ser “aberta” e a última a ser “fechada”.

• <head> </head>: a tag head é utilizada para definir o cabeçalho do documento html, é dentro da
delimitação desta tag que inserimos informações como título da página web, tipo de codificação (quando
necessário) e indicação de documentos importados.
Informática – HTML / CSS 10
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

• <title> </title>: a tag title é utilizada para definir o nome da página web, ou seja, seu título, que
aparecerá nas abas dos navegadores. Esta tag deve ser inserida dentro da delimitação da tag head, pois faz
parte do cabeçalho do documento html.

• <body> </body>: a tag body é utilizada para definir o “corpo” da página html, ou seja, é onde estará
contido todo o conteúdo da página web.

As tags acima são as mais básicas, porém necessárias em qualquer documento html. A partir delas
podemos criar uma página web simples. Para a criação de um documento html não é necessário nenhum
tipo de compilador ou qualquer aplicativo específico, basta usarmos qualquer editor de texto simples,
contudo, é necessário que esse documento seja salvo com a extensão .html, dessa forma, quando
solicitarmos a execução do arquivo, o mesmo será executado por um browser.

1.4. DOCTYPE, language e charset.

1.4.1. DOCTYPE

O Doctype deve ser a primeira linha de código do documento, ou seja, antes da tag html, ele indica para o
navegador e para outros meios qual a especificação de código utilizar. Na versão 4.01 do HTML temos
três tipos de doctype, a escolha de qual utilizar varia de acordo com o caso em que o site/aplicação web se
encaixa. Vejamos abaixo os tipos de doctype e quando utilizar cada um.

• Doctype Strict – Usado em códigos HTML “limpos”, ou seja, que não possuem misturas entre estilo e
conteúdos. É usada em conjunto com estilos CSS. É também a declaração de doctype mais rígida, não
aceitando a utilização de nenhum elemento em desuso. A sintaxe do doctype strict é a seguinte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

• Doctype Transitional – Este tipo de doctype inclui tanto os elementos estruturais como os elementos de
apresentação (desaconselhados, porque misturam estilo com conteúdos). Deve ser usado, quando somos
obrigados a manter a compatibilidade com browsers que não suportam os estilos CSS ou em casos em que
estamos em uma transição de código, ou seja, ainda existe código de formatação junto com código de
conteúdo. A sintaxe do doctype transitional é a seguinte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

• Doctype Frameset – Este tipo de doctype consiste basicamente no doctype transitional com suporte a
utilização de frame (quadros). A sintaxe do doctype frameset é a seguinte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

Como podemos notar cada doctype possui uma utilização específica e são validados um por um DTD
(Veja o link ao final de cada doctype). Em versões anteriores, era necessário referenciar o DTD
diretamente no código. Porém, com o surgimento do HTML5, a necessidade de utilização dessa referência
passou a ser responsabilidade do browser. O Doctype é uma “tag especial” do HTML, mas uma instrução
para que o browser tenha informações sobre qual versão de código a marcação foi escrita. Em HTML 5 o
novo modo de declarar o doctype é:

<!DOCTYPE html>

Informática – HTML / CSS 11

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

1.4.2. Metatag CHARSET

Para definirmos qual codificação de caracteres utilizaremos em nossa página web, usamos a tag meta com
seus atributos, dentre os quais o principal é o charset. Vejamos a nova maneira de definir a codificação de
caracteres em HTML 5:

<meta charset="utf-8">

Nas versões anteriores ao HTML 5, essa tag era escrita da forma abaixo:

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

Essa forma antiga continuará a ser suportada no HTML5, contudo, é mais indicado que você utilize a
nova forma. Podemos perceber que o HTML5 veio como uma forma de simplificar a escrita dos códigos.

A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas
de outros países é algo que vai contra a tradição e seus ideais. Por isso, foi criado uma tabela que suprisse
essas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milhão
de caracteres. Em vez de cada região ter sua tabela de caracteres, é muito mais sensato haver uma tabela
padrão com o maior número de caracteres possíveis. Atualmente a maioria dos sistemas e browsers
utilizados por usuários suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode você
garante que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo.

O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o
programa, nem a língua.

Praticando!

Exercício 1.1: Agora exercitaremos o que aprendemos até o momento, para isso utilizaremos um editor de
texto simples onde digitaremos as seguintes linhas de código:

<!DOCTYPE html>

<html lang=“pt-br”>

<head>

<title>Primeira página HTML</title>

</head>

<body>

Minha primeira página em HTML

</body>

</html>

Perceba que foi utilizado um atributo dentro da TAG de abertura<html>, ela serve para indicar qual
idioma padrão será utilizado. Com a seguinte linha de código: <html lang=“pt-br”>, estamos indicando
que o idioma é o português brasileiro. Isso facilita com que os mecanismos de buscas como Google,
consigam encontrar seu site mais facilmente através dos filtros de linguagem.

Informática – HTML / CSS 12

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Depois salvaremos o arquivo com o seguinte nome: primeira_pagina_html.html e executaremos no

browser para visualizarmos o resultado.

A página que acabamos de criar é bem simples, porém, já é possível entender como funciona o processo
de criação de uma página web, utilizando a linguagem HTML. Obs.: Caso o seu navegador ainda esteja
desatualizado, você observará que algo de errado aconteceu com a acentuação (caracteres), mas não se
preocupe resolveremos isso.

1.5. Caracteres Especiais

Caracteres Acentuados no Português:

Caracteres Comerciais:

1.5.1. Resolvendo problemas com caracteres especiais e acentuação.

Em alguns casos podemos ter problemas na visualização de caracteres especiais, embora seja muito
incomum já que hoje a maioria dos navegadores já possui essa solução integrada. Para resolvermos esse
pequeno problema utilizaremos uma meta tag no cabeçalho do nosso documento.

Note que a tag meta não possui tag de fechamento. Vejamos abaixo:

<head>

<meta charset=“utf-8” />

</head>

Abra sua página, primeira_pagina_html.html faça a alteração incluindo a tag meta salve e perceba que a
acentuação (caracteres) estão corretos.
Informática – HTML / CSS 13
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

<!DOCTYPE html>

<html lang=“pt-br”>

<html>

<head>

<meta charset= “utf-8”>

<title> Primeira página HTML </title>

</head>

<body>

Minha primeira página HTML

</body>

</html>

Obs.: Apesar dos navegadores atualizados não possuírem mais esse problema com caracteres, é
recomendada a utilização da tag meta como forma preventiva pois, não sabemos se o usuário também
possuirá seu navegador já atualizado.

1.6. Comentários em HTML.

Quando aprendemos a escrever códigos, somos guiados pelas orientações de professores, de algum
tutorial que vimos na internet, ou por algum livro, tudo é fácil de entender e o melhor, funciona!

Os comentários são de extrema importância em um código HTML, pois com eles entendemos o que cada
trecho/linha de código está fazendo. Obviamente tudo que é descrito em forma de comentário não aparece
na página web, podendo ser visualizado apenas no código fonte da página web. Em seu código HTML
tudo que estiver entre as marcações <!-- e --> será compreendido como comentário.

Vejamos um exemplo abaixo:

<body>

<!-- Tudo que estiver aqui dentro, é um comentário. -->

Isso aqui não é um comentário!

</body>

Informática – HTML / CSS 14

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

2.0 Conhecendo outras TAGs

A partir de agora conheceremos outras tags que possibilitarão uma melhor estruturação da nossa página
web. É importante ressaltar que a estrutura básica de qualquer página HTML possuirá quase sempre o
mesmo código principal (o que utilizamos no nosso primeiro documento: primeira_pagina_html.html),
mudando apenas o conteúdo encontrado no corpo da página web (entre a abertura e o fechamento da tag
body), por isso iremos muitas vezes reaproveitar esse código na construção de novas páginas.

2.1. Trabalhando com textos: Tags - <Hn>, <P>, <BR> e &nbsp

Nessa seção aprenderemos a criar cabeçalhos e parágrafos para textos de nossa página web, também
aprenderemos a criar quebra de linha. Primeiramente aprenderemos a criar diversos níveis de cabeçalhos
que podem ser usados para criar títulos para textos que se encontram no corpo de sua página web, ou seja,
dentro da tag body.

Veja um exemplo de uso:

<body>

<h1> Cabeçalho de nível 1 </h1>

<h2> Cabeçalho de nível 2 </h2>

<h3> Cabeçalho de nível 3</h3>

<h4> Cabeçalho de nível 4 </h4>

<h5> Cabeçalho de nível 5 </h5>

<h6> Cabeçalho de nível 6 </h6>

</body>

Obs.: Perceba que H1 não é “letra grande” como muita gente por ai ainda ensina. Tamanho de letra e
outras formatações poderão ser vistas mais à frente quando utilizarmos a CSS. As tags <Hn> significam
hierarquia de títulos, em resumo, <h2> é subtítulo de <h1>, <h3> é subtítulo de <h2> e de <h1> e assim
sucessivamente.

No “novo” HTML5, existe uma maneira semântica de agrupar esses títulos, utilizando a nova tag
chamada <hgroup>. Perceba que visualmente ela não alterará nada pois essa tag atua na semântica da
escrita do código. Como se pode perceber, os títulos têm algo em comum e todos vêm escritos de forma
seguida, portanto, eles devem ser “agrupados”. Perceba também, que podemos utilizar mais de um
cabeçalho de mesmo nível e não há necessidade que eles tenham numeração seguidas. Vejamos o exemplo
a seguir:

<body>

<hgroup>

<h1> Projeto e-Jovem </h1>

<h1> Módulo II </h1>

Informática – HTML / CSS 15

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

<h5> Des. Web I </h5>

<h3> Html e CSS</h3>

</hgroup>

</body>

Para o HTML, o “enter” e a tecla de espaço do seu teclado, não funciona. Veremos agora, como resolver
sempre que precisarmos dar “enters” ou vários espaços em nossas páginas: A tag p é responsável por
inserir quebra de linha entre um parágrafo e outro. Veja o exemplo:

<body>

<p> Insira aqui o seu texto</p>

</body>

Até então a quebra de linha em nossa página HTML é feita pelo próprio browser, porém é interessante
que tenhamos controle sobre isso, uma vez que, em algumas situações precisamos definir como ocorrerá a
quebra de linha. Para isso, utilizamos a tag <br>. Vejamos um exemplo:

<body>

Primeira linha do texto.<br />

Segunda linha do texto.<br />

Terceira linha do texto.

</body>

O caractere especial conhecido por &nbsp é o responsável por atuar como a tecla de espaço do seu
computador. Cada &nbsp aplicado, significa um espaço dado:

<body>

Primeira palavra. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Segunda

palavra

</body>

Informática – HTML / CSS 16

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

2.2. Novos Elementos Estruturais

No HTML5, como existe uma importância semântica muito grande, existem tags especiais para organizar
a estrutura da criação do layout de uma página.

• HEADER: Como o próprio nome pode sugerir, ela que vai encabeçar uma região de seu site. Cuidado
para não confundir com a tag <head>, que serve para informar características da página. O que existe no
<header> será, de fato, exibido no seu site.

Geralmente é um o título de um artigo, slogan, logotipo de sua empresa/site.

• NAV: O elemento nav representa uma seção da página que contém links para outras partes do website.
Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links
importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e
também para compor o menu principal do site.

• ASIDE: O elemento aside representa um bloco de conteúdo que referencia o conteúdo secundário de um
website. O aside pode ser representado por conteúdos em sidebars, em textos impressos, publicidade ou
até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal
do website.

• SECTION: A tag section define uma nova seção genérica no documento. Por exemplo, a página inicial
de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de
contato e chamadas para conteúdo interno.

• ARTICLE: O elemento article representa uma parte da página que poderá ser distribuído e reutilizável
em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas
um bloco de texto comum.

• FOOTER: O elemento footer representa literalmente o rodapé da página. Seria o último elemento antes
de fechar a tag HTML. O footer não precisa aparecer necessariamente no final de uma seção.

Agora que já conhecemos alguns dos novos elementos estruturais do HTML5 podemos colocar a “mão na
massa” e praticar para que possamos fixar, de maneira mais eficiente, o conhecimento.

Praticando!

Exercício 01.18: O cliente lhe passou um esboço de como deseja que o site seja desenvolvido. Tente criar
o layout utilizando as novas tags estruturais do HTML5, conforme representado na figura a seguir:

DICA: utilize o http://br.lipsum.com/ para gerar o texto para seu site.

Informática – HTML / CSS 17

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Informática – HTML / CSS 18

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.0 Exemplos de Tags

3.1 Estrutura e criação do arquivo HTML

Abaixo está uma visualização de uma estrutura da página HTML e como as tags devem ser organizadas
no documento base html:

Faça você mesmo!

Passo 1: Abra o bloco de notas (PC)

• Windows 7 ou anterior:

• Abra Iniciar > Programas> Acessórios> Bloco de Notas ou digite notepad na pesquisa

Informática – HTML / CSS 19

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Passo 2: escrever alguns códigos HTML

Escrever ou copiar alguns códigos HTML no bloco de notas.

Passo 3: Salve a página HTML

Salve o arquivo no seu computador. Selecione Arquivo> Salvar como no menu Bloco de Notas.
Nomeie o arquivo "index.htm" e definir a codificação para UTF-8 (que é a codificação preferida para
arquivos HTML).

Você pode usar .htm ou .html como extensão de arquivo. Não há diferença, é até você.
Passo 4: visualizar a página HTML em seu navegador
Abra o arquivo HTML salvo no seu navegador favorito (clique duas vezes no arquivo, ou clique com o
botão direito - e escolha "Abrir com").
O resultado será muito semelhante a este:

Informática – HTML / CSS 20

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.2 HTML Básico

3.2.1 Títulos
Cabeçalhos HTML são definidas com <h1> até <h6>.
<h1>define o título mais importante. <h6>define o título menos importante:

3.2.2 Parágrafos
Parágrafos HTML são definidos com a tag <p>:

Informática – HTML / CSS 21

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.2.3 Links
Links HTML são definidas com a <a>tag:
O destino do link é especificado no atributo href.
Os atributos são usados para fornecer informações adicionais sobre os elementos HTML.

3.2.4 Imagens
Imagens HTML são definidas com a <img>tag.
O arquivo de origem ( src ), texto alternativo ( alt ), width e height são fornecidos como atributos:

3.2.5 Botões
Botões HTML são definidas com a <button>tag:

3.2.6 Listas
Listas HTML são definidas com a <ul> (lista não ordenada / bala) ou <ol> (ordenado / lista numerada),
seguido por <li> (os itens da lista):

Informática – HTML / CSS 22

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.3 Elementos HTML

Um elemento HTML geralmente consiste de uma tag de início e fim, com o conteúdo inserido entre:
< Tagname > Conteúdo vai aqui ... < / tagname >

desde a marca de início até a marca de fim:

< P > Meu primeiro parágrafo. < / P >

Elementos HTML sem conteúdo são chamados de elementos vazios. Os elementos vazios não tem uma
marca de fim, tal como o elemento <br> (o que indica uma quebra de linha).
Elementos HTML podem ser aninhados (elementos podem conter elementos).
Todos os documentos HTML consistem em elementos HTML aninhados.
Este exemplo contém quatro elementos HTML:

O <html> elemento define o todo documento.

Tem um início tag <html> e um fim tag </ html>.
O elemento de conteúdo é outro elemento HTML (o <body> elemento).

Informática – HTML / CSS 23

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O <body>elemento define o corpo do documento.

Tem um início tag <body> e um fim tag </ body>.
O elemento de conteúdo é de dois outros elementos HTML ( <h1>e <p>).

O <h1>elemento define um título .

Tem um início tag <h1> e um fim tag </ h1>.
O elemento de conteúdo é: meu primeiro título.

O <p>elemento define um ponto .

Tem um início tag <p> e um fim tag </ p>.
O elemento de conteúdo é: Meu primeiro parágrafo.

NÃO SE ESQUEÇA DA TAG END.

Alguns elementos HTML serão exibidos corretamente, mesmo se você esquecer a marca de fim:

Informática – HTML / CSS 24

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O exemplo acima funciona em todos os navegadores, porque a tag de fechamento é considerada opcional.
ELEMENTOS HTML VAZIO
Elementos HTML sem conteúdo são chamados de elementos vazios.
<br> é um elemento vazio sem uma marca de fechamento (a tag <br> define uma quebra de linha).
Elementos vazios podem ser "fechados" na tag de abertura assim: <br />.
O HTML5 não requerem elementos vazios a serem fechadas. Mas se você quiser validação rigorosa, ou se
você precisa fazer o seu documento lido por analisadores XML, você deve fechar todos os elementos
HTML corretamente.
USE MINÚSCULAS ETIQUETAS
Tags HTML não são maiúsculas de minúsculas: <P> significa o mesmo que <p>.
O padrão HTML5 não requer tags minúsculas, mas W3C recomenda minúsculas em HTML,
e exige minúsculas para tipos de documentos mais rigorosos, como XHTML.

3.4 Atributos
Atributos fornecem informações adicionais sobre os elementos HTML.
O ATRIBUTO HREF
Links HTML são definidas com a <a>tag. O endereço do link é especificado no atributo href:

O ATRIBUTO SRC
Imagens HTML são definidas com a <img> tag.
O nome do arquivo de origem da imagem é especificado no atributo src:

A LARGURA E ALTURA ATRIBUTOS

Informática – HTML / CSS 25

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Imagens em HTML têm atributos que especifica a largura e altura da imagem:

O ATRIBUTO ALT
O alt é o atributo que especifica um texto alternativo para ser usado, quando uma imagem não pode ser
exibida.
O valor do atributo pode ser lido por leitores de tela. Desta forma, alguém "escuta" para a página da Web,
por exemplo, uma pessoa cega, pode "ouvir" o elemento.

O atributo alt também é útil se a imagem não existe.

O ATRIBUTO DE ESTILO
O style é um atributo usado para especificar o estilo de um elemento, como a cor, tipo de letra, tamanho
etc.

O ATRIBUTO LANG
A linguagem do documento podem ser declarados na tag <html>.
Informática – HTML / CSS 26
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

A linguagem é declarada com o atributo lang.

Declarando uma língua é importante para aplicativos de acessibilidade (leitores de tela) e motores de
busca:

Informática – HTML / CSS 27

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O ATRIBUTO TITLE
Aqui, um atributo title é adicionado ao elemento <p>. O valor do atributo de título será exibido como uma
dica de ferramenta quando você passa o mouse sobre o parágrafo:

3.5 Cabeçalhos
OS TÍTULOS SÃO IMPORTANTES
Os motores de busca usam os cabeçalhos para indexar a estrutura do conteúdo de suas páginas web.
É importante usar títulos para mostrar a estrutura do documento.
Usar a tag <h1> deve ser utilizado para posições principais, seguido de <h2>, em seguida, o que for
menos importante usar <h3>, e assim por diante.
TÍTULOS MAIORES
Cada título HTML tem um tamanho padrão. No entanto, você pode especificar o tamanho de qualquer
posição com o atributo style, utilizando a propriedade CSS font-size:

LINHAS HORIZONTAIS
A tag <hr> define uma ruptura temática em uma página HTML, e é mais frequentemente apresentado
como uma linha horizontal.
O <hr> é um elemento usado para separar o conteúdo (ou definir uma mudança) em uma página HTML:

Informática – HTML / CSS 28

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O ELEMENTO <HEAD>
O <head> é elemento que não tem nada a ver com cabeçalhos HTML.
O <head> é apenas um recipiente para metadados. Metadados HTML são dados sobre o documento
HTML que não são exibidos.
O <head> está colocado entre <html> e <body>:

3.6 Parágrafos
A HTML <p> define um parágrafo:

Você não pode ter certeza de como o texto em HTML será exibido.
Grandes ou pequenas telas e janelas redimensionadas irão criar resultados diferentes de exibição de
conteúdo.
Com o HTML, você não pode alterar a saída, adicionando espaços extras ou linhas extras em seu código
HTML.
O navegador irá remover quaisquer espaços extras e linhas extras quando a página é exibida:

Informática – HTML / CSS 29

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

QUEBRAS DE LINHA HTML

O HTML <br> elemento define uma quebra de linha .
Use <br> se você deseja uma quebra de linha (uma nova linha) sem iniciar um novo parágrafo:

TEXTO PRÉ-FORMATADO
O HTML <pre> elemento define texto pré-formatado.
O texto dentro de um <pre> elemento é apresentado numa fonte de largura fixa (geralmente mensageiro),
e que preserva ambos os espaços e as quebras de linha:

Informática – HTML / CSS 30

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.7 Estilos
Definir o estilo de um elemento HTML, pode ser feito com o atributo style.
O HTML atributo style tem a seguinte sintaxe:

COR DE FUNDO
A propriedade background-color define a cor de fundo para um elemento HTML.
Este exemplo define a cor de fundo para uma página:

COR DO TEXTO
A propriedade color define a cor do texto para um elemento HTML:

FONTES
A propriedade font-family define a fonte a ser usado para um elemento HTML:

Informática – HTML / CSS 31

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

TAMANHO DO TEXTO
A propriedade font-size define o tamanho do texto para um elemento HTML:

ALINHAMENTO DE TEXTO HTML

A propriedade text-align define o alinhamento do texto horizontal para um elemento HTML:

3.8 Formatação de Texto

ELEMENTOS FORMATAÇÃO HTML
O HTML também define elementos especiais para a formatação de texto, ele usa elementos como <b>
e <i> para a formatação de saída, como negrito ou itálico texto. Elementos de formatação foram
projetados para exibir tipos especiais de texto:

• <b> - Texto em negrito

• <strong> - texto Importante

Informática – HTML / CSS 32

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

• <i> - O texto em itálico

• <em> - texto enfatizado

• <mark> - texto marcado

• <small> - texto pequeno

• <del> - O texto excluído

• <ins> - Texto inserido

Informática – HTML / CSS 33

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

• <sub> - Texto Subscrito

• <sup> - texto sobrescrito

3.9 Comentários
Você pode adicionar comentários a sua fonte HTML usando a seguinte sintaxe:

Observe que há um ponto de exclamação (!) Na tag de abertura, mas não na marca de fechamento.
Os comentários não são exibidos pelo navegador, mas podem ajudar a documentar seu código-fonte
HTML.
Com os comentários que você pode colocar notificações e lembretes no seu HTML:

Informática – HTML / CSS 34

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Caso precise comentar várias linhas ou blocos HTML:

3.10 Cores
As cores HTML são especificadas usando nomes de cores predefinidas ou valores RGB, HEX, HSL,
RGBA, HSLA.
Tabela de cores HTML:
Acesse: https://www.w3schools.com/colors/colors_names.asp
COR DE FUNDO
Você pode definir a cor de fundo para elementos HTML:

COR DO TEXTO
Você pode definir a cor do texto:

Informática – HTML / CSS 35

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

COR DA BORDA
Você pode definir a cor das bordas:

VALORES DE CORES
Em HTML, as cores também podem ser especificadas usando valores RGB, valores HEX, valores HSL,
valores RGBA e valores HSLA:
Para a cor "Tomate":

RGB (255, 99, 71)

ff6347 #
HSL (9, 100%, 64%)

VALOR RGB
Em HTML, uma cor pode ser especificada como um valor RGB, usando a seguinte fórmula:
RGB ( vermelho, verde , azul )
Cada parâmetro (vermelho, verde e azul) define a intensidade da cor entre 0 e 255.
Por exemplo, RGB (255, 0, 0) é apresentado como vermelho, vermelho porque é definido para o valor
mais alto (255) e os outros são definidos como 0.
Para exibir a cor preta, todos os parâmetros de cor deve ser definida como 0, assim: rgb (0, 0, 0).
Para exibir a cor branca, todos os parâmetros de cor deve ser definida para 255, assim: rgb (255, 255,
255).
Exemplo misturando os valores RGB abaixo:
Informática – HTML / CSS 36
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

RGB (255, 99, 71)

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

VALOR HEX
Em HTML, uma cor pode ser especificada utilizando um valor hexadecimal no formulário:
# rrggbb
Onde rr (vermelho), gg (verde) e bb (azul) são valores hexadecimais entre 00 e seguintes (o mesmo que
decimal 0-255).
Por exemplo, # ff0000 é exibida como vermelho, porque o vermelho está definido para seu valor mais alto
(ff) e os outros estão definidas para o valor mais baixo (00).
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

Informática – HTML / CSS 37

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

VALOR HSL
Em HTML, uma cor pode ser especificada usando tonalidade, a saturação, e luminosidade (HSL), sob a
forma:
HSL ( tonalidade , saturação , luminosidade )
Tonalidade é um grau na roda de cores de 0 a 360. 0 é vermelho, verde é 120, e 240 é azul.
Saturação é um valor percentual, 0% significa um tom de cinzento, e 100% é a cores.
Luminosidade é também uma percentagem, 0% é preto, 50% não é clara ou escura, de 100% é branco.
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

RGBA VALOR
Os valores de cor rgba são uma extensão de valores de cor RGB com um canal alfa, que especifica a
opacidade para uma cor.

Informática – HTML / CSS 38

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Um valor de cor RGBA é especificado com:

rgba ( vermelho, verde , azul, alfa )
O parâmetro alfa é um número entre 0.0 (totalmente transparente) e 1.0 (não transparente em tudo):

3.11 Links
Os links são encontrados em quase todas as páginas da web. Links permitem que os usuários a clicar o
seu caminho a partir de uma página para outra.
Você pode clicar em um link e saltar para outro documento.
Quando você move o mouse sobre um link, a seta do mouse vai se transformar em um pouco de lado.
A ligação não tem que ser um texto. Pode ser uma imagem ou qualquer outro elemento HTML.
Em HTML, links são definidas com a tag <a>:

Informática – HTML / CSS 39

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O atributo href especifica o endereço de destino ( https://www.w3schools.com/html/ ) do link.

O texto do link é a parte visível (Visite o nosso tutorial HTML).
Clicando no link texto vai mandar você para o endereço especificado.
Sem uma barra no final de endereços de subpastas, você pode gerar dois pedidos para o servidor. Muitos
servidores adiciona automaticamente uma barra ao final do endereço, e em seguida, criar um novo pedido.
LIGAÇÕES LOCAIS
O exemplo acima usou uma URL absoluta (um endereço web completo).
Uma ligação local (link para o mesmo site) é especificado com uma URL relativa (sem http: // www ....).

Informática – HTML / CSS 40

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

CORES HTML LINK

Por padrão, um link aparecerá como esta (em todos os navegadores):

• Um link não visitado é sublinhado e azul

• Um link visitado é sublinhado e roxo

• Uma link ativo é sublinhado e vermelho

Você pode alterar as cores padrão, usando CSS:

LINKS EM HTML - O ATRIBUTO DE DESTINO

O atributo target especifica onde abrir o documento vinculado.
O atributo de destino pode ter um dos seguintes valores:

• _blank - Abre o documento vinculado em uma nova janela ou aba

• _self - Abre o documento vinculado na mesma janela / aba, uma vez que foi clicado (este é o
padrão)

• _parent - Abre o documento vinculado no quadro pai

• _top - Abre o documento vinculado no corpo completo da janela

Informática – HTML / CSS 41

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

• FrameName - Abre o documento vinculado em um quadro chamado

Este exemplo vai abrir o documento vinculado em uma nova janela do navegador / tab:

IMAGEM COMO LINK

É comum o uso de imagens como links:

border:0; é adicionado para evitar que no IE9 (e anteriores) de exibir uma borda ao redor da imagem
(quando a imagem é um link).
BOOKMARK
Marcadores HTML são usados para permitir que os leitores possam pular para partes específicas de uma
página da Web.
Os marcadores podem ser útil se sua página é muito longa.
Para fazer um marcador, você deve primeiro criar o marcador, e depois adicionar um link para ele.
Quando o link é clicado, a página vai deslocar para o local com o marcador.
Em primeiro lugar, criar um marcador com o atributo id:

Em seguida, adicione um link para o marcador ( "Ir para Capítulo 4"), a partir da mesma página:

Ou, adicione um link para o marcador ( "Ir para Capítulo 4"), a partir de outra página:

Informática – HTML / CSS 42

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Cap 8, 9,10 ...

Informática – HTML / CSS 43

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.12 Imagens
As imagens podem melhorar o design e a aparência de uma página web.

Em HTML, imagens são definidas com a tag <img>.

A tag <img> é vazio, ele contém apenas atributos, e não tem uma marca de fechamento.
O atributo src especifica a URL (endereço web) da imagem:

O ATRIBUTO ALT
O atributo alt fornece um texto alternativo para uma imagem, se o usuário por algum motivo não pode
vê-lo (por causa da conexão lenta, um erro no atributo src, ou se o usuário usa um leitor de tela).
O valor do atributo alt deve descrever a imagem:

Informática – HTML / CSS 44

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

TAMANHO DA IMAGEM - LARGURA E ALTURA

Você pode usar o atributo style para especificar a largura e a altura de uma imagem.
Alternativamente, você pode usar os atributos width e height:

O widthe heightatributos sempre define a largura e altura da imagem em pixels.

LARGURA E ALTURA, OU ESTILO?
Os atributos width, height e style são válidos em HTML5.
No entanto, sugerimos usar o atributo style. Ela impede que folhas de estilos de alterar o tamanho das
imagens:

IMAGENS EM OUTRA PASTA

Se não for especificado, o navegador espera encontrar a imagem na mesma pasta que a página web.
No entanto, é comum armazenar imagens em uma sub-pasta. Você deve, então, incluir o nome da pasta
no atributo src:

Informática – HTML / CSS 45

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

IMAGENS EM OUTRO SERVIDOR

Alguns sites armazenam suas imagens em servidores de imagem.
Na verdade, você pode acessar imagens a partir de qualquer endereço de web no mundo:

IMAGENS ANIMADAS
HTML permite GIFs animados:

FLOATING IMAGEM
Use a propriedade do CSS float para deixar o imagem flutuante para a direita ou para a esquerda de um
texto:

MAPAS DE IMAGEM
A tag <map> define uma imagem-mapa. Uma imagem-mapa é uma imagem com áreas clicáveis.
Faça o exemplo abaixo, e clique na imagem do computador, telefone, ou xícara de café:

Informática – HTML / CSS 46

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O atributo name da <map> marca está associado com os <img>'s atributo usemap e cria uma relação
entre a imagem e o mapa.
O elemento <map> contém um número de <area> e etiquetas, que definem as áreas clicáveis na
imagem-mapa.
IMAGEM DE FUNDO
Para adicionar uma imagem de fundo em um elemento HTML, use a propriedade CSS background-image:
Para adicionar uma imagem de fundo em uma página web, especifique a propriedade background-image
no corpo do elemento:

Para adicionar uma imagem de fundo em um parágrafo, especifique a propriedade background-image no

elemento P:

Informática – HTML / CSS 47

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.13 Tabelas
Uma tabela HTML é definida com a tag <table>.
Cada linha da tabela é definida com <tr>. Um cabeçalho da tabela é definida com <th>. Por padrão,
títulos de tabela estão em negrito e centrado. Um dados / célula da tabela é definida com <td>.

Os <td> são os recipientes de dados da tabela.

Eles podem conter todos os tipos de elementos HTML; texto, imagens, listas, outras tabelas, etc.
Se você não especificar uma borda para a tabela, ele será exibido sem linhas.
As linhas são definidas usando a propriedade CSS border:

Informática – HTML / CSS 48

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Se você quiser as linhas de borda simples, adicione a propriedade CSS border-collapse:

ESPAÇAMENTO DA CÉLULA
O espaçamento da célula especifica o espaço entre o conteúdo e a borda da célula.
Para definir o espaçamento, use a propriedade CSS padding:

Informática – HTML / CSS 49

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

POSIÇÕES DO TEXTO NA TABELA

Por padrão, títulos de tabela estão em negrito e centrado.
Para alinhar à esquerda os títulos de tabela, use a propriedade CSS text-align:

Você pode usar outras posições como: center para centralizar e higth para alinhar a direita.

ESPAÇAMENTO BORDER
O espaçamento da borda especifica o espaço entre as células.
Para definir o espaçamento da borda de uma mesa, use a propriedade CSS border-spacing:

Informática – HTML / CSS 50

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

MESCLAR COLUNAS
Para fazer uma mesclagem de células em mais de uma coluna, utilize o atributo colspan:

MESCLAR LINHAS
Para fazer uma mesclagem de células em mais de uma linha, utilize o atributo rowspan:

Informática – HTML / CSS 51

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

LEGENDA DA TABELA
Para adicionar uma legenda a tabela, utilize a tag <caption>:
A tag <caption> deve ser colocada logo após a tag <table>.

UM ESTILO ESPECIAL PARA UMA TABELA

Para definir um estilo especial para uma tabela, crie um id com um estilo específico para ela:

Informática – HTML / CSS 52

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.14 Listas
LISTA HTML NÃO-ORDENADA
Uma lista não ordenada começa com <ul>. Cada item da lista começa com <li>.
Os itens da recebem marcadores de itens por padrão:

LISTA HTML NÃO ORDENADA - ESCOLHA DE ITEM MARCADOR

O CSS list-style-type é usada para definir o estilo do marcador item da lista:

LISTA NUMERADA
Uma lista ordenada começa com <ol>. Cada item da lista começa com <li>.
Os itens da lista serão marcados com números por padrão:

Informática – HTML / CSS 53

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Lista de atributos
O type da <ol>, define o tipo do marcador do item da lista:

DESCRIÇÃO DA LISTA
HTML também suporta descrição nas listas.
A descrição de listas é uma lista de termos, com uma descrição de cada termo.
A <dl> define a lista de inscrição, a <dt> define o termo (nome), e o <dd> descreve cada termo:

Informática – HTML / CSS 54

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

LISTAS HTML ANINHADAS

Listas podem ser aninhadas (listas dentro de listas):

LISTA COM CONTROLE DE CONTAGEM

Por padrão, uma lista ordenada começará a contar a partir de 1. Se você quer começar a contar a partir de
um determinado número, você pode usar o atributo start:

LISTA HORIZONTAL COM CSS OU MENU

Listas HTML podem ser denominadas de várias maneiras diferentes com CSS.
Uma maneira popular é ao estilo de uma lista horizontal, para criar um menu de navegação:

Informática – HTML / CSS 55

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.15 Classes
O atributo class especifica um ou mais nomes de classe para um elemento HTML.
O nome da classe pode ser usado por CSS e JavaScript para executar determinadas tarefas para elementos
com o nome da classe especificada.
Em CSS, para selecionar elementos com uma classe específica, escrever um personagem, período seguido
pelo nome da classe (.):
Use CSS para estilizar todos os elementos com o nome da classe "cidade":

Informática – HTML / CSS 56

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.16 Atributo Id
O atributo id especifica um id único para um elemento HTML (o valor deve ser exclusivo dentro do
documento HTML).
O valor do ID pode ser usado por CSS e JavaScript para executar determinadas tarefas para um único
elemento com o valor especificado id.
Em CSS, para selecionar um elemento com um ID específico, escrever um personagem cardinal (#),
seguido pelo ID do elemento:

3.17 Iframes
Um iframe é usado para exibir uma página web dentro de uma página web ou também pode ser usado
para exibir um arquivo local dentro da página.

Informática – HTML / CSS 57

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

3.18 Layouts
Sites, muitas vezes exibem conteúdo em várias colunas (como uma revista ou jornal).
O HTML5 oferece novos elementos semânticos que definem as diferentes partes de uma página web:

<Header> - Define um cabeçalho para um documento ou uma seção

<Nav> - Define um recipiente para links de navegação
<Section> - Define uma seção em um documento
<Artigo> - Define um artigo autónomo independente
<Aside> - Define o conteúdo de lado a partir do conteúdo (como uma
barra lateral)
<Footer> - Define um rodapé de um documento ou de uma seção
<Details> - Define detalhes adicionais
<Summary> - Define um título para o <detalhes> elemento

Há quatro maneiras diferentes para criar layouts de várias colunas. Cada caminho tem seus prós e contras:

• tabelas HTML (não recomendado)

• propriedade CSS flutuador

• flexbox CSS

• framework CSS

3.19 Forms
O elemento <form> define uma forma que é utilizada para recolher dados de entrada de utilizador:
Um formulário HTML contém elementos de formulário, elementos de formulário são diferentes tipos de
elementos de entrada, como campos de texto, caixas de seleção, botões de rádio, botões de envio, e muito
mais.
O ELEMENTO <INPUT>
O elemento <input> é o mais importante elemento de formulário.
O elemento <input> pode ser apresentado de várias maneiras, dependendo do tipo de atributo, aqui estão
alguns exemplos:

Informática – HTML / CSS 58

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

RADIO BUTTON INPUT

<input type="radio"> define um botão de rádio. Botões de rádio permitem que o usuário escolha um de
um número limitado de opções:

O BOTÃO ENVIAR
<input type="submit">define um botão para enviar os dados do formulário para
um formulário-manipulador.
A forma de manipulador é tipicamente uma página do servidor com um script para processar dados de
entrada.
A forma de manipulador é especificado no formulário ação atributo:

Informática – HTML / CSS 59

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O ATRIBUTO ACTION
O atributo action define a ação a ser executada quando o formulário é enviado.
Normalmente, os dados do formulário é enviado para uma página web no servidor quando o usuário clica
no botão enviar.
No exemplo acima, os dados do formulário é enviado para uma página no servidor chamado
"/action_page.php". Esta página contém um script do lado do servidor que lida com os dados do
formulário:

Se o atributo action for omitido, a ação está definida para a página atual.
O ATRIBUTO TARGET
O atributo target especifica se o resultado apresentado será aberto em uma nova aba do navegador, um
quadro, ou na janela atual.
O valor padrão é " _self", que significa o formulário será enviado na janela atual.
Para tornar o resultado formulário aberto em uma nova aba do navegador, use o valor " _blank":

Outros valores legais são " _parent", " _top", ou um nome que representa o nome de um iframe.

Informática – HTML / CSS 60

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O ATRIBUTO METHOD
O atributo method especifica o método HTTP ( GET ou POST ) para ser utilizado quando da
apresentação de dados do formulário:

Informática – HTML / CSS 61

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

QUANDO USAR GET?

O método padrão ao enviar dados do formulário é GET.
No entanto, quando GET é usado, os dados do formulário apresentado será visível no campo de endereço
de página :

• Anexar formulário de dados para o URL em pares nome / valor

• O comprimento de um URL é limitado (cerca de 3000 caracteres)

• Nunca use GET para enviar dados sensíveis! (Será visível na URL)

• Útil para envios de formulários onde um usuário deseja marcar o resultado

• GET é melhor para dados não-seguros, como seqüências de consulta no Google

QUANDO USAR POST?

Sempre use POST se os dados do formulário contém informações confidenciais ou pessoais. O método
POST não exibe os dados do formulário apresentado no campo de endereço de página.

• POST não tem limitações de tamanho, e pode ser usado para enviar grandes quantidades de dados.

• envios de formulários com POST não pode ser marcada.

O ATRIBUTO DE NOME
Cada campo de entrada deve ter um atributo name a ser submetido.
Se o atributo name for omitido, os dados desse campo de entrada não será enviado a todos.
Este exemplo só apresentará o "Último nome" campo de entrada:

Informática – HTML / CSS 62

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

AGRUPANDO DADOS DE FORMULÁRIO COM <FIELDSET>

O <fieldset> é um elemento é usado para dados de grupo relacionados numa forma.
O <legend> define uma legenda para o <fieldset> elemento.

CAMPO DE TEXTO
<input type="text">define um campo de entrada de texto de uma linha:

CAMPO DE SENHA
<input type="password">define um campo de senha:

Informática – HTML / CSS 63

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

BOTÃO RESET
<input type="reset">define um botão de reset que irá repor todos os valores do formulário para seus
valores padrão:

RÁDIO
<input type="radio">define um botão de rádio.
Botões de rádio permitem que o usuário selecione apenas um de um número limitado de opções:

CAIXA DE SELEÇÃO
<input type="checkbox">define uma caixa de verificação.
Checkboxes permite que um usuário selecionar zero ou mais opções de um número limitado de opções.

Informática – HTML / CSS 64

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

4.0 Uploading páginas

Até agora, só você ter tido a satisfação de ver suas páginas. Agora é o momento para o resto do mundo
para ver suas obras-primas.
O mundo está preparado para isso?
O mundo está pronto!
Para obter o seu site na internet, você só precisa de algum espaço de servidor e um programa de FTP
gratuito.
Se você tiver acesso à Internet, você já deve ter algum espaço no servidor gratuito para o seu site. O seu
espaço no servidor, então, provavelmente, ser chamado de algo como http://home.provider.com/ ~
nomedousuario. Mas talvez seja necessário ativar o serviço.
Outra opção é obter algum espaço livre no servidor de Internet. Da mesma forma que você configurar
uma conta de e-mail (Hotmail menos por exemplo), você pode registrar para o espaço livre no servidor de
Internet. Várias empresas oferecem esse serviço - entre eles 000webhost.com (clique em "Compre Agora"
em "Hospedagem grátis") - ela só vai levar um par de minutos para se cadastrar.
Para ter acesso ao servidor, você precisa conhecer o "Nome do Host" (Por exemplo, ftp.seuhost.com) e ter
o seu nome de usuário e senha pronto.
É tudo que eu preciso?
Para acessar o servidor e fazer upload de suas páginas, você também precisa de um programa de FTP.
FTP é abreviação de File Transfer Protocol. Um programa de FTP é usado para conectar dois
computadores através da Internet para que você possa transferir arquivos do seu computador para outro
computador (servidor). Você pode não ter um programa desse tipo ainda, mas, felizmente, isso pode ser
baixado gratuitamente.
Existem diversos programas de FTP. Um dos melhores é o FileZilla, que é totalmente gratuito. Então,
agora você pode baixar o FileZilla em http://www.baixaki.com.br/download/filezilla.htm
E como faço para carregar as páginas?
Descrito a seguir é como você faz o upload de suas páginas para uma conta gratuita no 000webhost.com
com FileZilla. Mas o processo é, mais ou menos, o mesmo para todos os fornecedores de programas e de
FTP.
Abra o programa FTP enquanto estiver conectado à Internet. Insira "Host Name" ("ftp.seuhost.com" em
"Address"), nome de usuário (em "User") e senha (em "Password") e clique em "Connect". Você deve
agora ter acesso ao servidor. De um lado do programa que você pode ver o conteúdo do seu computador
("Local Site"), e do outro lado, você pode ver o conteúdo do servidor ("Remote Site"):

Informática – HTML / CSS 65

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Encontre seus documentos HTML e imagens em seu computador (no "Local site") e transferi-los para o
servidor ("Remote site") clicando duas vezes sobre eles. Agora o mundo inteiro pode vê-los! (Por
exemplo, no endereço http://seusite.com/page1.htm).
Nome de uma das páginas "index.htm" (ou "index.html") e que se tornará automaticamente a página
inicial. ou seja, se você digitar http://seusite.com(sem qualquer nome de arquivo) e abrirá
http://seusite.com/index.htm.
No longo prazo, pode ser uma boa idéia para comprar o seu próprio domínio (por exemplo
www.seudominio.com ou www. seudominio.com.br) procure evitar os endereços longos e complicados
que estão sendo atribuídos pelo seu provedor de Internet ou de prestadores de espaço no servidor gratuito.
Você pode encontrar e comprar domínios no registro.br.

5.0 Web standards e validação

Nesta lição, você terá um pouco de conhecimento mais teórico sobre HTML.
O que mais há para conhecer sobre HTML?
HTML pode ser codificado em muitas maneiras diferentes. E os navegadores podem ler HTML de
maneiras de diversas maneiras. Você poderia dizer que HTML tem muitos dialetos. É por isso que alguns
sites olhar diferente em diferentes navegadores.
Houve tentativas para se normatizar o HTML notadamente através do World Wide Web Consortium
(W3C) fundado por Tim Berners-Lee (yep! o grande que inventou o HTML). Mas tem sido uma estrada
longa e difícil.
Nos velhos tempos - quando os navegadores onde algo que você tinha para pagar - Netscape dominava o
mercado de browser. Naquela época, as normas para o HTML estavam nas suas versões 2.0 e 3.2. Mas,
com uma quota de mercado de mais de 90% Netscape não teria - e não - importa muito com normas
comuns. Pelo contrário, a Netscape inventava seus próprios elementos estranhos, que não funcionavam
em outros navegadores.

Informática – HTML / CSS 66

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Por muitos anos a Microsoft ignorou completamente a Internet. Depois de um tempo eles levaram a
competição com o Netscape e lançou seu navegador. As primeiras versões do navegador da Microsoft,
Internet Explorer, não eram melhores do que o Netscape no suporte às normas HTML. Mas a Microsoft
resolveu distribuir seu navegador gratuitamente (isto sempre é uma coisa popular para fazer) e Internet
Explorer logo se tornou o navegador mais popular.
A partir da versão 4 e 5 de Microsoft destinada a apoiar cada vez mais dos padrões HTML do W3C.
Netscape não conseguiu desenvolver uma nova versão do seu navegador e continuou a distribuir a versão
desatualizada 4.
O resto é história. Hoje, os padrões de HTML são chamados de 4.01 e XHTML. Agora é o Internet
Explorer que tem uma quota de mercado de mais de 90%. Internet Explorer ainda tem seus elementos
próprios, mas também suporta os padrões HTML do W3C. E assim como todos os outros navegadores,
como Mozilla, Opera, Netscape e Chrome.
Então, quando você desenvolve código HTML seguindo os padrões W3C, você faz sites que podem ser
vistos em todos os navegadores - agora e no futuro. E, felizmente, o que você aprendeu neste tutorial é
uma versão nova e mais rigorosa e mais limpa de HTML chamado XHTML.
Como posso saber qual versão é usada?
Com todos os diferentes tipos de HTML, você precisa dizer ao navegador que "dialeto" do HTML está, no
seu XHTML caso. Para fazer isso, você usa o Document Type. A Declaração de Tipo de Documento é
escrito sempre no topo do documento:

Além da Declaração de Tipo de Documento (a primeira linha no exemplo acima), que informa ao
navegador que você quer escrever XHTML, você também precisa adicionar informação extra na tag html,
usando os atributos xmlns e lang.
Xmlns é abreviação de "XML-Name-Space" e deve ter sempre o valor http://www.w3.org/1999/xhtml.
Isso é tudo que você precisa saber. Mas se você tem uma grande fome de conhecimento complicadas
poderá ler mais sobre namespaces no site do W3C.

Informática – HTML / CSS 67

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

No atributo lang você específica em que o idioma do documento está escrito dentro Por isso. O padrão
ISO 639 é usado, que lista os códigos de todas as línguas do mundo No exemplo acima a língua definida
como Inglês ("en").
Com um DTD o navegador sabe exatamente como deve ser lido e renderizado o HTML. Por isso, use o
exemplo acima como modelo para todos os seus futuros documentos HTML.
O DTD também é importante quando você deseja validar suas páginas.
Validar? Por que e como devo fazer isso?
Insira o DTD nas suas páginas e você pode sempre verificar erros no seu HTML usando validador
gratuito do W3C.
Para testar isso, fazer uma página e enviá-lo para a Internet. Agora, vá para validator.w3.org e digite o
endereço (URL) da página e validá-lo. Se seu HTML estiver correto, vai aparecer uma mensagem de
congratulações. Caso contrário, você receberá um relatório de erro dizendo exatamente o que e onde você
tenha feito algo errado. Faça alguns erros de propósito para ver o que acontece.
O validador não é útil somente para localizar um erro. Alguns navegadores tentam compensar a falta de
habilidades entre os desenvolvedores web, tentando corrigir os erros no código mostrando a página em
que acho que ele deve procurar. Em navegadores assim você nunca pôde ver um erro no seu próprio
navegador. No entanto, outros navegadores podem imaginar diferente ou não mostrar a página em tudo. O
validador pode ajudá-lo a encontrar erros que você nem sabia que existia.
Sempre valide suas páginas para ter certeza de que será sempre exibido corretamente.

6.0 Dicas finais

Parabéns, você chegou a lição final sobre HTML.
Então agora eu sei tudo?
Você aprendeu muito e agora você é capaz de fazer seus próprios sites! No entanto, o que você aprendeu é
o básico e ainda há muito mais a ser dominado. Mas agora você tem uma boa base a partir da qual
construir.
Nesta última lição, você receberá algumas dicas finais:
Primeiro, é uma boa idéia para manter a ordem e a estrutura em seus documentos HTML. Ao publicar
documentos bem organizados de você não só vai mostrar aos outros o seu domínio de HTML, mas
também irá torná-la consideravelmente mais fácil para si mesmo para manter uma visão geral.
Atenha-se aos padrões e validar as suas páginas. Isso não pode ser suficientemente sublinhado: Escreva
um XHTML claro, use o DTD e valide suas páginas no validator.w3c.org.
Coloque conteúdos nas suas páginas. Lembre-se que HTML é uma ferramenta, que permite apresentar
informações sobre a Internet, para se certificar de que não há informações para apresentar. Páginas bonitas
pode parecer bom, mas a maioria das pessoas usam a Internet para encontrar informações.
Evite sobrecarregar suas páginas com imagens pesadas e coisas extravagantes outro que encontrou na
Internet. Ela diminui o carregamento da página e pode ser confuso para os visitantes. Páginas que
demoram mais de 20 segundos para carregar podem perder até 50% de seus visitantes.
Lembre-se de adicionar seu site aos motores de busca / diretórios para que outras pessoas de sua família,
possam encontrar e se divertir. Na primeira página de todos os motores de busca, você encontrará um link
Informática – HTML / CSS 68
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

para adicionar novas páginas (o mais importante é o Google, mas também há outros como yahoo, cade e
etc...).
Neste manual, você aprendeu a usar o bloco de notas, que é um editor simples e muito fácil de usar, mas
talvez você vai encontrá-lo útil para usar um editor mais avançado que dá uma melhor visão e mais
possibilidades.
Como posso saber mais?
Primeiro de tudo, é importante que você continue a trabalhar e experimentar as coisas que você aprendeu
neste tutorial. Estude sites de outras pessoas e se você encontrar algo que você gosta ver como ele foi
feito com "View Source" ou Exibir o Código fonte da página.
(Clique em "Exibir" no menu no seu navegador e escolha "Source").

Pesquisar na Internet para exemplos e artigos sobre HTML. Existem muitos sites com ótimos conteúdos
sobre HTML.
Leia e faça perguntas nos Fóruns. Este é o lugar onde você se encontra com os verdadeiros especialistas
de quem você pode aprender muito. Por último, mas não menos importante, você deve - sempre que se
sentir pronto - continue e aprenda CSS.
A única coisa que resta é desejar-lhe horas de diversão com seu novo amigo, o HTML.
Vejo você na Internet :-)

Informática – HTML / CSS 69

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

7.0 Introdução - CSS

CSS é uma linguagem para estilos que define o layout de Folhas de Estilo HTML documents Cascading
(CSS) é uma ferramenta fantástica para construção do layout dos seus websites. Ele pode te salvar e
permite que você projete websites com uma forma completamente nova. CSS é uma necessidade para
quem trabalha com web design.
Este manual irá ajudar a começar com CSS em apenas algumas horas. É fácil de entender e ele vai te
ensinar todas as técnicas sofisticadas.
Aprender CSS é divertido. Como você vai junto com o manual, lembre-se de ter tempo suficiente para
seus experimentos com o que você aprende em cada aula.
Usar CSS é necessário um conhecimento básico de HTML. Se você não estiver familiarizado com
HTML, por favor, comece com o nosso manual de HTML antes de passar para CSS.
Qual software eu preciso?
Por favor, evite usar softwares tais como FrontPage, DreamWeaver ou Word para acompanhar este
manual. Softwares avançados não o ajudarão a aprender CSS. Em vez disso, ela vai limitá-lo e diminuir
seu aprendizado.
Tudo que você precisa é um editor de texto simples e gratuito, podemos continuar utilizando o bloco de
notas.
Um editor de texto simples é ideal para aprender HTML e CSS, pois não afetam ou alteram os códigos
digitados. Dessa forma, seus acertos e erros só pode ser atribuída a si mesmo - não o software.
Um navegador e um editor de texto simples é tudo que você precisa.
Vamos começar!

7.1 O que é CSS?

Talvez você já tenha ouvido falar em CSS, sem realmente saber o que é. Nesta lição você aprenderá mais
sobre o que CSS é e o que ela pode fazer por você.
CSS é um acrônimo para Cascading Style Sheets.
O que posso fazer com CSS?
CSS é uma linguagem para estilos que define o layout de documentos HTML.
Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo,
posicionamentos e muitas outras coisas. Basta esperar e ver!
HTML pode ser (in) devidamente usado para definir o layout de sites. Contudo CSS proporciona mais
opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais.
Depois de apenas algumas lições deste manual você será capaz de fazer suas próprias folhas de estilo
usando CSS para dar o seu site um grande visual.
Qual é a diferença entre CSS e HTML?
HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.

Informática – HTML / CSS 70

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Ok, isso soa um tanto técnico e confuso. Mas por favor, continue lendo. Tudo fará sentido em breve.
De volta aos bons velhos tempos quando um sujeito chamado Tim Berners Lee inventou a World Wide
Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos
definindo "isto é um cabeçalho" ou "isto é um parágrafo" usando tags HTML tais como <h1> e <p>.
À medida que a Web ganhava popularidade, os designers começaram a olhar para as possibilidades de
layout para os documentos on-line. Para atender a essa demanda, os fabricantes de navegadores (àquela
época a Netscape e a Microsoft) inventaram novas tags HTML tais como, por exemplo <font> que se
diferenciava das tags originais do HTML através da definição de layout - e não de estrutura.
Isso também levou a uma situação em que marcas de estrutura originais, tais como <table> foram sendo
cada vez mais utilizadas para páginas de layout em vez de adicionar estrutura ao texto. Muitas novas tags
para layout como <blink> eram suportadas somente por um tipo de navegador. "Você precisa do
navegador X para visualizar esta página" tornou-se comum nos websites.
CSS foi inventada para solucionar esta situação, fornecendo os web designers com oportunidades de
layout sofisticados suportados por todos os navegadores. Ao mesmo tempo, a separação do estilo de
apresentação de documentos a partir do conteúdo de documentos, faz a manutenção do site muito mais
fácil.
Quais são os benefícios de CSS?
CSS é uma revolução no mundo da web design. Os benefícios concretos do uso de CSS incluem:

• controle do layout de vários documentos de uma única folha de estilo; controle mais preciso do
layout;

• aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc);

• numerosas técnicas avançadas e sofisticadas.

Na próxima lição vamos dar uma olhada em como realmente funciona CSS e como começar.

7.2 Como o CSS trabalha?

Nesta lição você vai aprender como fazer a sua primeira folha de estilo. Você vai conhecer sobre o
modelo CSS básico e que código é necessário para usar CSS em um documento HTML.
Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML.
Assim, se você está acostumado a usar HTML para layout irá reconhecer muitos dos códigos. Vejamos
um exemplo concreto.
A sintaxe CSS básico:
Vamos dizer que queremos uma bela cor vermelha como fundo de uma página web:
Usando HTML podemos tê-lo feito assim:
<body bgcolor="#FF0000">

Com CSS o mesmo resultado pode ser obtido assim:

body {background-color: #FF0000;}

Informática – HTML / CSS 71

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Como você pode notar, os códigos são mais ou menos idêntico para HTML e CSS. O exemplo acima
também mostra o modelo CSS fundamental:

Mas onde você colocar o código CSS? Este é exatamente o que vai passar por cima agora.
Aplicando CSS a um documento HTML Há três maneiras que você pode aplicar CSS a um documento
HTML. Estes métodos são exemplificados a seguir. Recomendamos que você foque no terceiro método
ou seja, externo.
Método 1: In-line (o atributo style)
Uma maneira de aplicar CSS é usando o atributo style do HTML. Partindo do exemplo acima, com a cor
do fundo vermelho, ele pode ser aplicado como este:
<html>

<head>

<title>Meu Primeiro CSS</title>

</head>

<body style="background-color: #FF0000;">

<p>Essa é uma página vermelha</p>

</body>

</html>

Método 2: Interno (a tag style)

Outra maneira é incluir os códigos CSS usando a tag HTML <style>. Por exemplo como este:

<html>
Informática – HTML / CSS 72
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

<head>

<title> Meu Primeiro CSS </title>

<style type="text/css">

body {background-color: #FF0000;}

</style>

</head>

<body>

<p> Essa é uma página vermelha </p>

</body>

</html>

Método 3: Externo (link para uma folha de estilo)

O método recomendado é de vincular a uma folha de estilo chamada externa. Ao longo deste tutorial,
vamos utilizar este método em todos os nossos exemplos.
Uma folha de estilo externa é um simples arquivo de texto com a extensão. Css. Como qualquer outro
arquivo, você pode colocar a folha de estilo no seu servidor web ou no disco rígido. Por exemplo,
digamos que sua folha de estilos tenha sido nomeada de style.css e está localizada no diretório style. A
situação pode ser ilustrada da seguinte forma:

O truque é criar um link no documento HTML (default.htm) para a folha de estilo (style.css). O link pode
ser criado com uma linha de código HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />

Observe como o caminho para a folha de estilos é indicado no atributo href.

A linha de código deve ser inserido na seção de cabeçalho do código HTML ou seja, entre o <head> e </
head> tags. Como esta:
<html>

<head>
Informática – HTML / CSS 73
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

<title>Meu primeiro CSS</title>

<link rel="stylesheet" type="text/css"

href="style/style.css" />

</head>

<body>

...

Este link informa ao navegador que ele deve usar o layout do arquivo CSS ao exibir o arquivo HTML.
A coisa realmente inteligente disto é que vários documentos HTML podem ser ligados à folha de estilo
mesmo. Em outras palavras, um ficheiro de CSS pode ser usado para controlar a apresentação de muitos
documentos HTML.

Esta técnica pode poupar muito trabalho. Se você, por exemplo, gostaria de mudar a cor de fundo de um
site com 100 páginas, uma folha de estilo pode te salvar de ter que alterar manualmente todos os 100
documentos HTML.
Usando CSS a mudança pode ser feita em poucos segundos apenas alterando um código na folha de estilo
central.
Vamos colocar o que acabamos de aprender na prática.
Tente você mesmo...
Abra o bloco de notas (ou qualquer outro editor de texto que você usa) e crie dois arquivos - um arquivo
HTML e um arquivo CSS - com os seguintes conteúdos:
default.htm

<html>

<head>

<title>Meu primeiro css</title>

Informática – HTML / CSS 74
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

<link rel="stylesheet" type="text/css"

href="style.css" />

</head>

<body>

<h1> Minha primeira folha de estilos </h1>

</body>

</html>

style.css

body {

background-color: #FF0000;

Agora coloque os dois arquivos na mesma pasta. Lembre-se de salvar os arquivos com as extensões de
direito (respectivamente ". Htm" e ". Css") Abra default.htm no seu navegador e veja a página tem um
fundo vermelho.
Parabéns! Você fez a sua primeira folha de estilo!
Vamos para a próxima lição onde vamos dar uma olhada em algumas das propriedades em CSS.

7.3 Cores e fundos

Nesta lição você aprenderá como aplicar cores e cores de fundo para seus sites. Vamos olhar também para
métodos avançados para a posição e controlar imagens de fundo. As seguintes propriedades CSS será
explicado:
cor
background-color
background-image
background-repeat
background-attachmentfundo posição-fundo
Cor de primeiro plano: a propriedade 'color'
A propriedade color define a cor do primeiro plano de um elemento.
Por exemplo, imagine que queremos todos os títulos em um documento sejam na cor vermelha. As
manchetes são todas marcadas com o <h1> elemento HTML. O código abaixo define a cor dos elementos
<h1> para vermelho.
h1 {

Informática – HTML / CSS 75

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

color: #ff0000;

As cores podem ser inseridas como valores hexadecimais como no exemplo acima (# ff0000), ou você
pode usar os nomes das cores ("vermelho") ou RGB valores (RGB (255,0,0)).
A propriedade 'background-color'
A propriedade background-color define a cor de fundo de elementos.
O elemento <body> contém todo o conteúdo de um documento HTML.
Assim, para mudar a cor de fundo de uma página inteira, a propriedade de cor de fundo deve ser aplicada
ao elemento <body>.
Você também pode aplicar cores de fundo para outros elementos, inclusive os títulos e texto. No exemplo
abaixo, diferentes cores de fundo são aplicados elementos <body> e <h1>.
body {

background-color: #FFCC66;
}

h1 {

color: #990000;

background-color: #FC9804;

Observe que foram aplicadas duas propriedades para <h1>, dividindo-os por ponto e vírgula.
As imagens de fundo [background-image]
A propriedade CSS background-image é usado para inserir uma imagem de fundo.
Como um exemplo de uma imagem de fundo, usamos o android abaixo. Você pode baixar a imagem para
que você possa usá-lo em seu próprio computador (botão direito na imagem e escolha "salvar imagem
como"), ou você pode usar outra imagem, como você vê o ajuste.

Para inserir a imagem do android como uma imagem de fundo para uma página web, basta aplicar a
propriedade background-image para <body> e especificar a localização da imagem.
body {

background-color: #FFCC66;
Informática – HTML / CSS 76
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

background-image: url("android.gif");

h1 {

color: #990000;

background-color: #FC9804;

Resultado:

NB: Observe como é especificado o local da imagem como url ("android.gif").

Isto significa que a imagem está localizado na mesma pasta como a folha de estilo. Você também pode se
referir a imagens em outras pastas usando url ("/images / android.gif."). Ou até mesmo na Internet,
indicando o endereço completo do arquivo: url ("http://www.seusite.com.br/android.gif ").
Repita a imagem de fundo [background-repeat]
No exemplo acima, você notou que a imagem da borboleta repetiu tanto horizontalmente e verticalmente
para cobrir toda a tela? A propriedade background-repeat controla esse comportamento.
A tabela abaixo mostra os quatro diferentes valores para background-repeat.

Exemplos:
background-repeat: repeat-x

Informática – HTML / CSS 77

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

background-repeat: repeat-y

background-repeat: repeat

Informática – HTML / CSS 78

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

background-repeat: no-repeat

Por exemplo, para evitar a repetição de uma imagem de fundo o código deve ficar assim:
Bloqueio de imagem de fundo [background-attachment]
A propriedade background-attachment especifica se uma imagem de fundo é fixa ou rola junto com o
elemento que contém.
Informática – HTML / CSS 79
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Uma imagem de fundo fixa não se moverá com o texto quando um leitor se move para a página, enquanto
uma imagem de fundo desbloqueado vai rolar junto com o texto da página web.
A tabela abaixo mostra os quatro diferentes valores para background-attachment. Clique nos exemplos
para ver a diferença entre deslocamento e fixo.

Por exemplo, o código abaixo irá corrigir a imagem de fundo.

body {

background-color: #FFCC66;

background-image: url("Android.gif");

background-repeat: no-repeat;

background-attachment: fixed;

h1 {

color: #990000;

background-color: #FC9804;

Coloque imagem de fundo [background-position]

Por padrão, uma imagem de fundo é posicionada no canto superior esquerdo da tela. A propriedade
background-position permite alterar este posicionamento padrão e colocar a imagem de fundo onde quiser
na tela.
Existem inúmeras maneiras de definir os valores de background-position. No entanto, todos eles são
formatados como um conjunto de coordenadas. Por exemplo, as posições do valor '100px 200px 'a 100px
imagem de fundo a partir do lado esquerdo e 200px a partir do topo da janela do navegador.
As coordenadas podem ser expressas em percentagem da janela do navegador, unidades fixas (pixels,
centímetros, etc) ou você pode usar o top palavras, baixo, esquerda, centro e direita. O modelo abaixo
ilustra o sistema:

Informática – HTML / CSS 80

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

A tabela abaixo dá alguns exemplos.

O exemplo de código abaixo a imagem é posicionada no canto inferior direito:

body {

background-color: #FFCC66;

background-image: url("Android.gif");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

h1 {

color: #990000;

background-color: #FC9804;
Informática – HTML / CSS 81
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

A propriedade background é uma abreviação para todas as propriedades do fundo listados nesta lição.
Com fundo você pode comprimir várias propriedades e, assim, escrever sua folha de estilo em um
caminho mais curto o que torna mais fácil de ler.
Por exemplo, olhar para esses cinco linhas:
background-color: #FFCC66;
background-image: url("Android.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Usando fundo o mesmo resultado pode ser alcançado em apenas uma linha de código:
background: #FFCC66 url("Android.gif") no-repeat fixed right bottom;

A lista de ordem é como se segue:

[background-color] | [background-image] | [background-repeat] | [backgroundattachment]
| [background-position]
Se uma propriedade é deixada de fora, ele será automaticamente ajustado para o valor padrão. Por
exemplo, se o fundo de fixação e de fundo posição são levadas para fora do exemplo:
background: #FFCC66 url("Android.gif") no-repeat;

Essas duas propriedades que não estão especificados seria meramente definidas para seus valores padrão
que, como você sabe que são de rolagem e canto superior esquerdo.
Nesta lição, você já aprendeu novas técnicas que não seriam possíveis utilizando HTML. A diversão
continua na próxima lição que examina a ampla gama de possibilidades ao usar CSS para descrever as
fontes.

Informática – HTML / CSS 82

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

7.4 Fontes
Nesta lição você aprenderá sobre as fontes e como aplicá-las usando CSS.
Também vamos ver como contornar o problema que as fontes específicas escolhidas para um site só pode
ser visto se a fonte está instalado no PC usado para acessar o site. As seguintes propriedades CSS será
descrito:
font-family
font-style
font-variant
font-weight
font-size
fonte
Família da fonte [font-family]
A propriedade font-family é usada para definir uma lista priorizada de fontes para ser usado para exibir
um determinado elemento ou página web. Se a fonte primeira da lista não estiver instalada no computador
usado para acessar o site, a fonte próxima da lista será julgado até uma fonte adequada seja encontrada.
Existem dois tipos de nomes para definir fontes: família e nomes para famílias genéricas. Os dois termos
são explicados abaixo.
Font-Family
Exemplos de um nome de família (muitas vezes conhecido como "fonte") pode, por exemplo, ser "Arial",
"Times New Roman" ou "Tahoma".
Generic Family
Famílias genéricos pode ser melhor descrito como grupos de familiares de nomes com aparência
uniforme. Um exemplo é sans-serif, que é uma coleção de fontes sem "pés".
A diferença também pode ser ilustrada da seguinte forma:

Informática – HTML / CSS 83

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Quando você listar fontes para seu Web site, comece com aquela preferida, seguindo de algumas
alternativas. Recomenda-se a completar a lista com uma fonte genérica. Dessa forma, pelo menos, a
página será mostrado usando uma fonte da mesma família, se nenhuma das fontes especificadas estão
disponíveis.
Um exemplo de uma lista de prioridades das fontes poderia ser assim:
h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

Não há notícias marcados com <h1> será exibido usando a fonte "Arial". Se essa fonte não está instalado
no computador do usuário, "Verdana" será usado. Se ambas estiverem indisponíveis, uma fonte da família
sans-serif será usado para mostrar as manchetes.
Observe como o nome da fonte "Times New Roman" contém espaços e, portanto, está listado o uso de
aspas.

7.5 Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo abaixo, todos
os cabeçalhos <h2> será mostrado em itálico.
h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style:italic;}

Variante da fonte [font-variant]

A propriedade font-variant é usada para escolher entre o normal ou small-caps variantes de uma fonte.
Uma fonte small-caps é uma fonte que utiliza menor tamanho letras maiúsculas (caixa alta) em vez de
letras minúsculas. Confuso?
Dê uma olhada nestes exemplos:

Se font-variant for definida para small-caps e nenhuma fonte small-caps está disponível o navegador mais
provável mostrar o texto em maiúscula.
h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

[font-weight]
A propriedade font-weight define qual negrito ou "pesada" a fonte deve ser apresentado. Uma fonte pode
ser normal ou bold. Alguns navegadores suportam o uso de números entre 100-900 (em centenas) para
descrever o peso de uma fonte.
p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight:

Informática – HTML / CSS 84

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

bold;}

7.6 Font size [font-size]

O tamanho de uma fonte é definido pela propriedade font-size.
Existem muitas unidades diferentes (por exemplo, pixels e porcentagens) para escolher para descrever
tamanhos de fonte. Neste manual vamos nos concentrar nas unidades mais comuns e apropriadas. Os
exemplos incluem:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Há uma diferença fundamental entre as quatro unidades acima. 'Px' As unidades e 'pt' fazer o tamanho da
fonte absoluta, enquanto '%' e 'em' permitem ao usuário ajustar o tamanho da fonte como ele / ela vê o
ajuste.
Muitos usuários estão desabilitados, idosos ou simplesmente sofrem de baixa visão ou um monitor de má
qualidade. Para tornar seu site acessível a todos, você deverá usar unidades como '%' ou 'em'.
Abaixo você pode ver uma ilustração de como ajustar o tamanho do texto no Mozilla Firefox e Internet
Explorer. Tente você mesmo - característica pura, você não acha?
Internet Explorer

Mozilla Firefox

Informática – HTML / CSS 85

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Compiling [font]
Usando a propriedade font mão suma, é possível cobrir todas as propriedades de fonte diferentes em uma
única propriedade.
Por exemplo, imagine estas quatro linhas de código usadas para definir propriedades de fonte para <p>:
p{

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

Usando a propriedade mão curta, o código pode ser simplificada:

p{

font: italic bold 30px arial, sans-serif;

A ordem de valores para fonte é:

font-style | font-variant | font-weight | font-size | font-family
Você já aprendeu sobre algumas das possibilidades relativas a fontes. Lembre-se que uma das grandes
vantagens do uso de CSS para especificar fontes é que, em determinado momento, você pode mudar a
fonte em um site inteiro em apenas alguns minutos. CSS economiza tempo e facilita a sua vida. Na
próxima lição, vamos olhar para o texto.

7.7 Textos
Formatação e adicionando estilo de texto é uma questão fundamental para qualquer web designer. Nesta
lição você será apresentado às oportunidades CSS proporcionam para adicionar layout aos textos. As
propriedades a seguir serão descritas:
text-indent
text-align
Informática – HTML / CSS 86
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

text-decoration
letter-spacing
text-transform
Recuo do texto [text-indent]
A propriedade text-indent permite adicionar um toque elegante para parágrafos de texto, aplicando um
recuo à primeira linha do parágrafo. No exemplo abaixo de um 30px é aplicado a todos os textos
marcados com <p>:
p{

text-indent: 30px;

}
Alinhamento do texto [text-align]
A propriedade CSS text-align corresponde ao atributo align das antigas versões do HTML. Texto podem
ser alinhados para a esquerda, para a direita ou centrado. Em adição a isto, o valor justificar vai esticar
cada linha, de modo que ambas as margens esquerda e direita seja alinhadas. Você sabe que este layout a
partir de jornais e revistas.
No exemplo abaixo, o texto em cabeçalhos de tabela <th> está alinhado à direita, enquanto a tabela <td>
dados são centralizados. Além disso, os parágrafos de texto normais são justificadas:
th {

text-align: right;

td {

text-align: center;

p{

text-align: justify;

}
Decoração de texto [text-decoration]
A propriedade text-decoration faz com que seja possível adicionar diferentes "decorações" ou "efeitos" ao
texto. Por exemplo, você pode sublinhar o texto, tem uma linha através ou acima do texto, etc No
exemplo a seguir, <h1> são sublinhadas manchetes, <h2> são manchetes com uma linha acima do texto e
<h3> são manchetes com uma linha de que o texto.
h1 {

text-decoration: underline;

h2 {
Informática – HTML / CSS 87
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

text-decoration: overline;

h3 {

text-decoration: line-through;

Espaço carta [letter-spacing]

O espaçamento entre caracteres de texto pode ser especificado usando a propriedade letter-spacing. O
valor da propriedade é simplesmente a largura desejada.
Por exemplo, se você quiser um espaço de 3px entre as letras em uma <p> parágrafo de texto e 6px entre
as letras em manchetes <h1> o código abaixo poderia ser utilizado.
h1 {

letter-spacing: 6px;

p{

letter-spacing: 3px;

Transformação de texto [text-transform]

A propriedade text-transform controla a capitalização de um texto. Você pode escolher capitalize,
uppercase ou lowercase independentemente de como o texto foi escrito no código HTML.
Um exemplo poderia ser a palavra "título" que pode ser apresentado ao usuário como "CABEÇALHO" ou
"Manchete". Há quatro valores possíveis para transformar texto:
capitalizar – capitalize
Capitaliza a primeira letra de cada palavra. Por exemplo: "escola profissional" será "Escola Profissional".
maiúsculas – uppercase
Converte todas as letras em maiúsculas. Por exemplo: "escola profissional" será "ESCOLA
PROFISSIONAL".
minúsculas – lowercase
Converte todas as letras para minúsculas. Por exemplo: "ESCOLA PROFISSIONAL" será "Escola
Profissional".
nenhum – none
Não transformações - o texto é apresentado como ele aparece no código HTML.
Como exemplo, vamos usar uma lista de nomes. Os nomes estão marcados com <li> (lista de itens).
Vamos dizer que queremos nomes a serem capitalizados e os cabeçalhos ser apresentados em letras
maiúsculas.
Informática – HTML / CSS 88
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Tente dar uma olhada no código HTML para este exemplo e você verá que o texto realmente é em letra
minúscula.
h1 {

text-transform: uppercase;

li {

text-transform: capitalize;

Nos últimos três lições que você já aprendeu várias propriedades CSS, mas há muito mais a CSS. Na
próxima lição vamos dar uma olhada em links.

7.8 Links
Você pode aplicar tudo que aprendeu nas aulas anteriores para links (mudar cores, fontes, sublinhados,
etc.) A novidade é que o CSS permite que você defina essas propriedades de forma diferente, dependendo
se o link é visitado, não visitado, ativo ou se o cursor sobre o link. Isso torna possível adicionar efeitos de
fantasia e útil para seu site. Para controlar esses efeitos que você usa a chamada pseudo-classes.
O que é um pseudo-classe?
A pseudo-classe permite ter em conta condições diferentes ou eventos ao definir uma propriedade para
uma tag HTML.
Vejamos um exemplo. Como você sabe, links são marcados no HTML com tags <a>. Podemos, portanto,
usar um como um seletor CSS:
a{

color: blue;

Um link pode ter diferentes estados. Por exemplo, ele pode ser visitado ou não visitado. Você pode usar
pseudo-classes para atribuir estilos diferentes para links visitados e não visitados.
a:link {

color: blue;

a:visited {

color: red;

Use a: link e a: visited para não visitado e links visitados respectivamente. Links que estão ativos têm a
pseudo-classe a: active e a: hover é quando o cursor está no link.
Vamos agora passar por cada uma das quatro pseudo-classes com exemplos e explicações.
Informática – HTML / CSS 89
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Pseudo-classe: link
A pseudo-classe: link é usada para links que levam a páginas que o usuário não tenha visitado.
No exemplo de código a seguir links não vistados serão na cor verde.

a:link {

color: #6699CC;

Pseudo-classe: visited
A pseudo-classe: visited é usada para links que levam a páginas que o usuário
tenha visitado. Por exemplo, o código a seguir links visitados na cor amarela:
a:visited {

color: #660099;

Pseudo-classe: active
A pseudo-classe: active é usada para links ativos.
Este exemplo a seguir links ativos terão seu fundo na cor vermelha:
a:active {

background-color: #FFFF00;

Pseudo-classe: hover
A pseudo-classe: hover é usado quando o ponteiro do mouse paira sobre um link.
Isto pode ser usado para criar efeitos interessantes. Por exemplo, se queremos que os nossos links para ser
laranja e o texto para itálico quando o cursor está apontado para eles, o nosso CSS deve ser semelhante a
este:
a:hover {

color: orange;

font-style: italic;

Exemplo 1: Efeito quando o cursor está sobre o link

É comum a criação de efeitos diferentes quando o cursor está sobre um link.
Por isso vamos olhar para alguns exemplos extras relacionados com a pseudoclasse: hover.

Informática – HTML / CSS 90

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Exemplo 2: Espaçamento entre letras

Como você vai se lembrar da lição 5, o espaçamento entre as letras pode ser ajustado usando a
propriedade letter-spacing. Isto pode ser aplicado a liga para um efeito especial:

Informática – HTML / CSS 91

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

a:hover {

letter-spacing: 10px;

font-weight:bold;

color:red;

Exemplo 3: MAIÚSCULAS e minúsculas

Na lição 5 vimos a propriedade text-transform, que pode alternar entre letras maiúsculas e minúsculas.
Isto também pode ser usado para criar um efeito de ligações:
a:hover {

text-transform: uppercase;

font-weight:bold;

color:blue;

background-color:yellow;

Os dois exemplos dão uma idéia sobre as possibilidades quase infinitas de combinação de diferentes
propriedades. Você pode criar seus próprios efeitos - faça uma tentativa!
Exemplo 4: Removendo sublinhado dos links
Uma pergunta freqüente é como retirar o sublinhado dos links?
Você deve considerar cuidadosamente se é necessário remover o sublinhado como poderia diminuir a
usabilidade do seu site de forma significativa. As pessoas estão acostumadas a azul sublinhado links em
páginas da web e saber que eles podem clicar sobre eles. Até minha mãe sabe disso! Se você alterar o
sublinhado e cor dos links, há uma boa chance de que os usuários se confundem e, portanto, não recebe o
benefício integral do conteúdo do seu site.
Dito isto, é muito simples de remover o sublinhado dos links. Como você vai se lembrar da lição 5, a
propriedade text-decoration pode ser usado para determinar se o texto está sublinhado ou não. Para
remover o sublinhado, basta definir o valor do text-decoration como none.
a{

text-decoration:none;

Alternativamente, você pode definir text-decoration juntamente com outras propriedades para todos os
quatro pseudo-classes.
a:link {

color: blue;

text-decoration:none;
Informática – HTML / CSS 92
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

a:visited {

color: purple;

text-decoration:none;

a:active {

background-color: yellow;

text-decoration:none;

a:hover {

color:red;

text-decoration:none;

Nesta lição você aprendeu pseudo-classes, usando algumas das propriedades das lições anteriores. Isso
deve lhe dar uma ideia de algumas possibilidades das CSS.
Na próxima lição ensinaremos como definir propriedades para elementos específicos e grupos de
elementos.

7.9 Identificando e agrupando elementos (class e id)

Às vezes você deseja aplicar um estilo especial a um determinado elemento ou um determinado grupo de
elementos. Nesta lição, vamos dar uma olhada em como você pode usar class e id para especificar as
propriedades dos elementos selecionados.
Como você pode colorir um determinado cabeçalho, diferente dos outros títulos do seu site? Como você
pode agrupar links em diferentes categorias e dar a cada categoria um estilo especial? Estes são apenas
exemplos de questões que iremos responder nesta lição.
Agrupando elementos com classe.
Vamos dizer que temos duas listas de links de Apostilas diferentes usadas para Informática e
Enfermagem. O código HTML pode parecer com isto:
<p>Informática:</p>

<ul>

<li><a href="ri.htm">HTML/CSS</a></li>

<li><a href="ch.htm">P.O.O/JAVA</a></li>

<li><a href="pb.htm">Arquitetura e

Manutenção</a></li>
Informática – HTML / CSS 93
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

</ul>

<p>Enfermagem:</p>

<ul>

<li><a href="cs.htm">Saúde I</a></li>

<li><a href="me.htm">Saúde II</a></li>

<li><a href="pn.htm">Saúde Mental</a></li>

</ul>

Então queremos que as ligações de Informática para amarelo, os links de Enfermagem a ser vermelho e o
resto dos links existentes no site para ficar azul.
Para isso, dividimos os links em duas categorias. Isto é feito através da atribuição de uma classe para cada
link, usando o atributo class.
Vamos tentar definir algumas classes no exemplo acima:
<p>Informática:</p>

<ul>

<li><a href="ri.htm" class="whitewine">

HTML/CSS </a></li>

<li><a href="ch.htm" class="whitewine">

P.O.O/JAVA </a></li>

<li><a href="pb.htm"

class="whitewine">Arquitetura e Manutenção</a></li>

</ul>

<p>Enfermagem:</p>

<ul>

<li><a href="cs.htm" class="redwine">Saúde

I</a></li>

<li><a href="me.htm" class="redwine">Saúde

II</a></li>

<li><a href="pn.htm" class="redwine">Saúde

Mental</a></li>

</ul>

Informática – HTML / CSS 94

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Como mostrado no exemplo você pode definir as propriedades de elementos que pertencem a uma
determinada classe usando. Classname na folha de estilo do documento.
Identificação de elemento usando ID
Além de elementos do agrupamento, pode ser necessário para identificar um único elemento. Isto é feito
usando o ID de atributo.
O que é especial sobre o atributo id é que não pode haver dois elementos no mesmo documento com o
mesmo id. Cada ID tem de ser único. Em outros casos, você deve usar o atributo de classe em vez. Agora,
vamos dar uma olhada em um exemplo de um possível uso da id:
<h1>Capitulo 1</h1>

...

<h2> Capitulo 1.1</h2>

...

<h2> Capitulo 1.2</h2>

...

<h1> Capitulo 2</h1>

...

<h2> Capitulo 2.1</h2>

...

<h3> Capitulo 2.1.2</h3>

...

A descrição acima poderia ser cabeçalhos de um documento dividido em capítulos e parágrafos. Seria
natural para atribuir uma id para cada capítulo da seguinte maneira
<h1 id="c1"> Capitulo 1</h1>

...

<h2 id="c1-1"> Capitulo 1.1</h2>

...

<h2 id="c1-2"> Capitulo 1.2</h2>

...

<h1 id="c2"> Capitulo 2</h1>

...

<h2 id="c2-1"> Capitulo 2.1</h2>

...

Informática – HTML / CSS 95

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

<h3 id="c2-1-2"> Capitulo 2.1.2</h3>

...

Digamos que o título do capítulo 1.2 deve estar no vermelho. Isto pode ser feito de acordo com CSS:
#c1-2 {

color: red;

Como mostrado no exemplo acima, você pode definir as propriedades de um elemento específico usando
# id na folha de estilo do documento.
Nesta lição aprendemos que através do uso do seletores classe e ID, você é capaz de especificar as
propriedades de elementos específicos.
Na próxima lição, vamos dar uma olhada em dois elementos de HTML que é amplamente utilizado em
conexão com CSS: <span> e <div>.

7.10 Agrupando elementos (span e div)

Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente
usados em conjunto com os atributos class e id.
Nesta lição, vamos dar uma olhada no uso de <span> e <div> como exatamente estes dois elementos
HTML são de importância central no que diz respeito a CSS.
Agrupando com <span>

Agrupando com <div>

Agrupando com <span>

O <span> elemento é o que você poderia chamar um elemento neutro e que não acrescentam nada ao
próprio documento. Mas, com CSS, <span> pode ser usado para adicionar efeitos visuais a partes
específicas do texto em seus documentos.
Um exemplo disso poderia ser este de Steve Jobs:
<p>"Você pode encarar um erro como uma besteira a ser

esquecida, ou como um resultado que aponta uma nova

direção".</p>

Permite-nos dizer que um erro pode trazer benefícios. Para esse efeito, podemos marcar “nova direção”
<span>. Cada período é então adicionada uma classe, que podemos definir em nossa folha de estilo:
<p> Você pode encarar um erro como uma besteira a

ser esquecida, ou como um resultado que,

<span class="benefit">aponta</span>

uma nova <span class="benefit">direção</span>.</p>

Informática – HTML / CSS 96

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

A CSS que lhe pertence:

span.benefit {

color:red;

Claro que você também pode usar id para estilizar os elementos de <span>. Contanto que você se lembra,
que você terá que usar uma única id para cada um dos três elementos <span>, como você aprendeu na
aula anterior.
Agrupando com <div>
Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo anterior, <div>
é usado para agrupar um ou mais elementos nível de bloco.
Além desta diferença, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos dar
uma olhada em um exemplo com duas listas de presidentes de CREDES divide-se em:
<div id="CREDE">
<ul>

<li>EEEP 01</li>

<li>EEEP 02</li>

<li>EEEP 03</li>

</ul>

</div>

<div id="SEFOR">

<ul>

<li>EEEP 04</li>

<li>EEEP 05</li>

<li>EEEP 06</li>

</ul>

</div>

E na folha de estilo, podemos agrupar a estilização da mesma maneira como acima:

#CREDE {

background:blue;

#SEFOR {

background:red;}
Informática – HTML / CSS 97
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Nos exemplos acima, usamos somente <div> e <span> em coisas muito simples, tais como texto e cores
de fundo. Ambos os elementos têm o potencial para fazer coisas muito mais avançadas. No entanto, este
não será apresentado nesta lição. Vamos ver mais a frente.

7.11 O box model

O box model em CSS descreve as casas que estão sendo geradas pelos elementos HTML. O modelo de
caixa contém ainda opções detalhadas de ajuste de margens, bordas, padding e conteúdo para cada
elemento. O diagrama abaixo mostra como o modelo de caixa é construída:
O box model em CSS

A ilustração acima pode parecer muito teórico para olhar, então vamos tentar usar o modelo em um caso
real com um título e um texto. O HTML para o nosso exemplo é:
<h1> ESCOLA PROFISSIONAL DE EDUCAÇÃO PROFISSIONAL</h1>

<p> O Governo do Estado do Ceará está comprometido com a tarefa primordial de

elevar os resultados da escola pública, que atende a quase 90% da matrícula das
crianças e jovens do nosso Estado. No âmbito do Ensino Médio, última etapa da
educação básica, que ao longo dos últimos anos vem sofrendo um "arrasto"
decrescente nos resultados, os desafios para a melhoria da escola são
consideráveis. Para começo de conversa, é preciso foco na elevação do nível de
desempenho dos alunos em português e matemática, eixos que dão suporte a todo
processo de desenvolvimento da autonomia intelectual para as aprendizagens.

... assume também o desafio de promover a articulação do currículo do ensino

médio com a formação para o mundo do trabalho. Esta tarefa, ordenada pela nossa
legislação educacional, integra a política estadual para a juventude e pretende
qualificar o projeto pedagógico de escolas de ensino médio, preparando os jovens,
com boas formações técnicas, para a inserção nos processos produtivos e seguir
aprendendo com possibilidade de adaptação às demandas e às transformações
desses processos." (Trechos do artigo da secretária Izolda Cela, publicado no jornal
O Povo,24-06-2008)</p>
Informática – HTML / CSS 98
 Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O exemplo contém dois elementos: <h1> e <p>.

<% '
As propriedades que regulam as caixas diferentes são: margem de preenchimento e de fronteira. As
próximas duas aulas de lidar com exatamente essas três propriedades:
'
'
Lição 10: O box model - margem e padding
'
Lição 11: O box model – margem
'
'
Quando terminar essas duas lições, você vai dominar o modelo de caixa e ser capaz de formatar os seus
documentos muito mais fino e mais preciso do que na moda antiga usando tabelas em HTML.
%>
Nesta lição você foi apresentado para o modelo de caixa. Nas próximas lições seguintes, vamos dar uma
olhada em como criar e controlar elementos no modelo de caixa.

7.12 Margin e padding

Na lição anterior você foi apresentado o modelo de caixa. Nesta lição, veremos como você pode mudar a
apresentação de elementos, definindo as propriedades margin e padding.
Defina a margem em um elemento
Definindo padding de um elemento
Defina a margem em um elemento
Um elemento tem quatro lados: direito, superior esquerdo e inferior. A margem é a distância a partir de
cada lado para o elemento vizinho (ou as fronteiras do documento). Veja também o esquema da lição 9
para uma ilustração.
Como primeiro exemplo, vamos olhar como você definir as margens para o documento, ou seja, para o
elemento <body>. A ilustração abaixo mostra como queremos que as margens da página para ser.

Informática – HTML / CSS 99

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O código CSS para este ficaria como segue:

body {

margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;

Ou você pode escolher uma sintaxe mais elegante:

body {

margin: 100px 40px 10px 70px;

Você pode definir as margens da mesma maneira em quase todos os elementos. Por exemplo, podemos
optar por definir margens para todos os parágrafos marcados com <p>:
Informática – HTML / CSS 100
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

body {

margin: 100px 40px 10px 70px;

p{

margin: 5px 50px 5px 50px;

Definindo padding de um elemento

Padding pode também ser entendido como "enchimento". Isto faz sentido como enchimento não afecta a
distância do elemento para outros elementos, mas apenas define a distância entre a borda interior e ao
conteúdo do elemento.
O uso de padding pode ser ilustrado por olhar para um exemplo simples, onde todos os cabeçalhos têm
uma cor de fundo:
h1 {

background: yellow;

h2 {

background: orange;

Definindo padding para os cabeçalhos, alteramos a quantidade de recheio, haverá em torno do texto em
cada um deles:
h1 {

background: yellow;

padding: 20px 20px 20px 80px;

h2 {

background: orange;

padding-left:120px;

Informática – HTML / CSS 101

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Agora você já está no caminho para dominar o box model em CSS. Na próxima lição, vamos dar uma
olhada em como definir fronteiras em diferentes cores e formas aos elementos.

7.13 Bordas
As bordas podem ser utilizados para muitas coisas, por exemplo, como um elemento decorativo ou para
sublinhar uma separação das duas coisas. CSS proporciona infinitas possibilidades de uso de bordas em
suas páginas.
border-width
border-color
border-style
fronteira
A largura das bordas [border-width]
A largura das bordas é definida pela propriedade largura da borda, que pode obter os valores de finos,
médio, e de espessura, ou um valor numérico, indicado em pixels. A figura abaixo ilustra o sistema:

A cor das bordas [border-color]

Informática – HTML / CSS 102

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

A propriedade border-color define a cor que a borda tem. Os valores são os normais cor-valores, por
exemplo "# 123456", "rgb (123123123)" ou "amarelo".
Tipos de bordas [border-style]
Existem diferentes tipos de bordas disponíveis para escolha. A seguir apresentamos 8 tipos diferentes de
bordas como o Internet Explorer pode interpretá-los. Todos os exemplos são mostrados com a cor "ouro"
e a espessura "thin", mas pode naturalmente ser mostrada em outras cores e espessuras.
Os valores none ou hidden podem ser usados se você não quer qualquer borda.

Exemplos de definição de bordas

As três propriedades descritas acima podem ser colocados juntos por cada elemento e resultam em
diferentes bordas. Para ilustrar isso, vamos dar uma olhada em um documento onde se definir as
fronteiras diferentes para <h1>, <h2>, <ul> e <p>. O resultado pode não ser tão bonito, mas ilustra
algumas das muitas possibilidades:
h1 {

border-width: thick;

border-style: dotted;

border-color: gold;

h2 {

border-width: 20px;

border-style: outset;

border-color: red;
Informática – HTML / CSS 103
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

p{

border-width: 1px;

border-style: dashed;

border-color: blue;

ul {

border-width: thin;

border-style: solid;

border-color: orange;

Também é possível definir propriedades especialmente para o alto, baixo, direita ou esquerda fronteiras. O
exemplo a seguir mostra como:
h1 {

border-top-width: thick;

border-top-style: solid;

border-top-color: red;

border-bottom-width: thick;

border-bottom-style: solid;

border-bottom-color: blue;

border-right-width: thick;

border-right-style: solid;

Informática – HTML / CSS 104

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

border-right-color: green;

border-left-width: thick;

border-left-style: solid;

border-left-color: orange;

Compilação [border]
Como também é o caso de muitas outras propriedades, você pode compilar muitas propriedades em uma
borda usando.
Vamos dar uma olhada em um Exemplo:
p{

border-width: 1px;

border-style: solid;

border-color: blue;

Pode ser compilado em:

p{
Informática – HTML / CSS 105
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

border: 1px solid blue;

Nesta lição você aprendeu sobre as infinitas opções de CSS dá de bordas em suas páginas.
Na próxima lição, veremos como você definir as dimensões do modelo de caixa - altura e largura.

7.14 Altura e largura

Até agora, nós não nos preocupamos muito com as dimensões dos elementos com os quais trabalhamos.
Nesta aula, vamos dar uma olhada em como você pode facilmente definir a altura e a largura de um
elemento.
largura
altura
Definir a largura [width]
Com a largura de propriedade, você pode definir a largura de um elemento.
O exemplo simples a seguir nos fornece um texto em que caixa pode ser digitado:
div.box {

width: 200px;

border: 1px solid black;

background: orange;

Definir a altura [height]

No exemplo acima a altura da caixa é definido pelo conteúdo da caixa. Você pode afetar a altura de um
elemento com a propriedade height. Como exemplo vamos tentar fazer a caixa no exemplo 500px altura:
div.box {

height: 500px;

width: 200px;

border: 1px solid black;

background: orange;

Como você provavelmente pode ver, o modelo de caixa lhe dá muitas opções novas. Você pode ter sido o
uso de tabelas em HTML para criar seus layouts, até agora, mas com CSS e o box model você deve agora
ser capaz de criar layouts mais elegantes, precisos e de acordo com as recomendações do W3C.

Informática – HTML / CSS 106

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

7.15 Flutuando elementos (floats)

Um elemento pode ser lançada para a direita ou para a esquerda, utilizando o flutuador propriedade. Isto
quer dizer que a caixa com o seu conteúdo são deslocados para a direita ou para a esquerda em um
documento (ou a caixa contendo)
A figura a seguir ilustra o princípio:

Se, por exemplo, gostaria de ter uma quebra automática de texto em torno de uma imagem, o resultado
seria assim:

Como é feito?
O código HTML para o exemplo acima, a seguinte aparência:
<div id="Android">

<img src="Android.png" alt="Android">

</div>

<p> Android é um sistema operacional móvel que roda sobre o núcleo Linux,
embora por enquanto a sua versão do núcleo Linux divirja da versão oficial. Foi
inicialmente desenvolvido pelo Google e posteriormente pela Open Handset
Informática – HTML / CSS 107
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Alliance, mas a Google é a responsável pela gerência do produto e engenharia de

processos. </p>

Para obter a imagem flutuando à esquerda e o texto a cercá-lo, você só tem que definir a largura da caixa
que rodeia a imagem e, posteriormente, definir a propriedade float para a esquerda:
Outro exemplo: colunas
Flutuadores também pode ser usado para colunas de um documento. Para criar as colunas, você
simplesmente tem que estruturar as colunas desejadas no código HTML com <div> como segue:
<div id="column1">

<p>EEEP 00</p>

</div>

<div id="column2">

<p>EEEP 01</p>

</div>

<div id="column3">

<p>EEEP 02</p>

</div>

Agora, a largura desejada das colunas é definido como por exemplo 33%, e então você simplesmente
flutuar cada coluna para a esquerda, definindo a propriedade float:
#column1 {

float:left;

width: 33%;

#column2 {

float:left;

width: 33%;

#column3 {

float:left;

width: 33%;

O flutuador pode ser definido como qualquer direito, esquerdo ou nenhum.

A propriedade clear
Informática – HTML / CSS 108
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

A propriedade clear é usado para controlar como os elementos se seguem aos elementos floats no
documento deve se comportar.
Por padrão, os elementos subsequentes são movidos para cima para preencher o espaço disponível, que
será libertado quando a caixa está flutuaram para um lado. Olhe para o exemplo acima que o texto é
automaticamente movido para cima ao lado da foto de Bill Gates.
A propriedade clear pode assumir os valores left, right, ambos ou nenhum. O princípio é que, se claro, por
exemplo, é definido como tanto para uma caixa, a margem superior da caixa será sempre sob a margem
inferior dos possíveis caixas flutuantes que vêm de cima.
id="picture">

<img src="Android.png" alt="Android">

</div>

<h1>Android</h1>

<p class="floatstop">Android é um sistema operacional móvel que roda sobre o

núcleo Linux, embora por enquanto a sua versão do núcleo Linux divirja da versão
oficial. Foi inicialmente desenvolvido pelo Google e posteriormente pela Open
Handset Alliance, mas a Google é a responsável pela gerência do produto e
engenharia de processos.</p>

Para evitar que o texto flutue ao lado da imagem, podemos adicionar a seguinte regra CSS:
#picture {

float:left;

width: 100px;

.floatstop {

clear:both;

Informática – HTML / CSS 109

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

Flutuadores são úteis em muitas situações e, muitas vezes, ser utilizados em conjunto com o
posicionamento. Na próxima lição vamos dar uma olhada em como posicionar uma caixa, relativo ou
absoluto.

7.16 Posicionando elementos

Com posicionamento CSS, você pode colocar um elemento exatamente onde você quiser na sua página.
Combinado com floats (ver Aula 13), o posicionamento abre muitas possibilidades para criar um layout
avançado e preciso.
A seguir serão discutidos nesta lição:
O princípio de posicionamento CSS
O posicionamento absoluto
O posicionamento relativo
O princípio de posicionamento CSS
Imagine uma janela do navegador como um sistema de coordenadas:

Informática – HTML / CSS 110

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O princípio de posicionamento CSS é que você pode posicionar qualquer caixa de qualquer lugar no
sistema de coordenadas.
Vamos dizer que queremos posicionar um cabeçalho:

Se quisermos o cabeçalho posicionado a 100px do topo do documento e a 200px à esquerda do

documento, podemos usar o seguinte CSS:
h1 {

position:absolute;

top: 100px;

left: 200px;

O resultado será como se segue:

Como você pode ver, posicionar com CSS é uma técnica muito precisa para
colocar elementos. É muito mais fácil do que tentar usar tabelas, imagens
transparentes e tudo mais.
O posicionamento absoluto
Um elemento que está posicionado absoluto não obtém qualquer espaço no documento. Isto significa que
não deixa um espaço vazio após ser posicionado.
Para posicionar um elemento de forma absoluta a propriedade position é definida como absoluta. Você
pode então usar as propriedades esquerda, direita, superior, inferior e colocar a caixa.
Como exemplo de posicionamento absoluto escolhemos colocar 4 caixas em cada canto do documento:

Informática – HTML / CSS 111

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

#box1 {

position:absolute;

top: 50px;

left: 50px;

#box2 {

position:absolute;

top: 50px;

right: 50px;

#box3 {

position:absolute;

bottom: 50px;

right: 50px;

#box4 {

position:absolute;

bottom: 50px;

left: 50px;

Posicionamento relativo
Para posicionar um elemento relativamente a propriedade position deve ser definida para relative. A
diferença entre o posicionamento absoluto e relativo é como a posição está sendo calculada.
A posição para um elemento que é posicionada relativamente é calculado a partir da posição original no
documento. Isto significa que é mover o elemento para a direita, para a esquerda, para cima ou para baixo.
Desta forma, o elemento ainda obtém um espaço no documento após ser posicionado.
Como um exemplo de posicionamento relativo, podemos tentar posicionar três imagens relativamente à
sua posição original na página. Observe como as imagens deixam um espaço vazio nas suas posições
originais no documento:
#dog1 {

position:relative;

left: 350px;

Informática – HTML / CSS 112

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

bottom: 150px;

#dog2 {

position:relative;

left: 150px;

bottom: 500px;

#dog3 {

position:relative;

left: 50px;

bottom: 700px;

Nas duas aulas anteriores, você aprendeu como flutuar e posicionar elementos.
Estes dois métodos oferecem muitas oportunidades para construir suas páginas sem ter que usar alguns
dos métodos antiquados com tabelas e imagens transparentes no HTML. Use CSS vez. É mais preciso,
dá-lhe mais vantagens, e é também muito mais fácil de manter.

7.17 Camada sobre camada com z-index (Layers)

CSS opera em três dimensões - altura, largura e profundidade. Vimos as duas primeiras dimensões nas
aulas anteriores. Nesta lição, vamos aprender como colocar elementos em camadas. Em resumo, isto
significa que o fim do qual os elementos se sobrepõem um ao outro.
Para esse efeito, você pode atribuir a cada elemento um número (z-index). O sistema é que um elemento
com um número maior sobrepõe um elemento com um número mais baixo.
Vamos dizer que estamos a jogar poker e ter um royal flush. As cartas podem ser apresentadas de uma
forma onde cada cartão tem um z-index:

Neste caso, os números seguir em outro (1-5) mas o mesmo resultado pode ser obtido usando 5 números
diferentes. O importante é a sequência cronológica dos números (a ordem).
Informática – HTML / CSS 113
Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O código no exemplo a placa poderia ser assim:

#dez_ouro{

position: absolute;

left: 100px;

top: 100px;

z-index: 1;

#valete_ouro{

position: absolute;

left: 115px;

top: 115px;

z-index: 2;

#rainha_ouro {

position: absolute;

left: 130px;

top: 130px;

z-index: 3;

}
#rei_ouro {

position: absolute;

left: 145px;

top: 145px;

z-index: 4;

#az_ouro {

position: absolute;

left: 160px;

top: 160px;

z-index: 5;

Informática – HTML / CSS 114

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

O método é relativamente simples, mas as possibilidades são várias. Você pode colocar imagens no texto,
texto sobre texto etc.
As camadas podem ser usadas em muitas situações. Por exemplo, tente usar z-index para criar efeitos em
manchetes em vez de criar estes como elementos gráficos. Por um lado, é mais rápido para carregar o
texto e, por outro, fornece um ranking potencialmente melhor nos motores de busca.

7.18 Web standards e validação

W3C é a World Wide Web Consortium, que é uma organização independente que administra as normas do
código na web (HTML, CSS, XML e outros).
Microsoft, Fundação Mozilla e muitos outros fazem parte da W3C e de acordo sobre o futuro
desenvolvimento das normas.
Se você estiver trabalhando um pouco com web design, provavelmente sabe que não pode haver uma
grande diferença na forma como uma página web é apresentada em diferentes navegadores. Pode ser
muito frustrante e demorado para criar uma página web que pode ser visto no Mozilla, Internet Explorer,
Opera e todo o resto dos navegadores existentes.
A idéia de ter padrões é acordar um denominador comum sobre como utilizar as tecnologias da web. Isto
significa que, observando as normas, um desenvolvedor terá a certeza que o que ele ou ela não vai
funcionar de uma forma mais apropriada em diferentes plataformas. Por isso, recomendamos que você
faça backup o trabalho realizado pelo W3C e valide sua CSS, a fim de observar o padrão.
CSS validator
Se o validador não encontrar erros; essa imagem será mostrado, que você pode colocar no seu site para
ilustrar que você está usando codificação validados:

CSS válido!
O validador pode também ser encontrado neste link: http://jigsaw.w3.org/cssvalidator/

Informática – HTML / CSS 115

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

REFERÊNCIAS:

CARVALHO, A. HTML 4.1 & CSS 2.1: Manual Completo. 2ª ed. Book Express,

2004.

DEITEL, H. M.; DEITEL, P. J.; NIETO, T. R. Internet and World Wide Web: Como Programar.
Bookman, 2003.

FREEMAN, E. Use a cabeça: HTML com CSS e XHTML. Rio de Janeiro: Alta Books, 2008.

MACEDO, M. da S. Construindo Sites Adotando Padrões WEB. Ciência Moderna,

2004.

SILVA, M. S. Construindo Sites com CSS e (X) HTML. Novatec, 2007.

Fonte: http://tableless.com.br/html5/?chapter=1

Fonte: https://www.w3schools.com/html/

Fonte: https://www.w3schools.com/css/default.asp

Informática – HTML / CSS 116

Hino Nacional Hino do Estado do Ceará

Ouviram do Ipiranga as margens plácidas Poesia de Thomaz Lopes

De um povo heróico o brado retumbante, Música de Alberto Nepomuceno
E o sol da liberdade, em raios fúlgidos, Terra do sol, do amor, terra da luz!
Brilhou no céu da pátria nesse instante. Soa o clarim que tua glória conta!
Terra, o teu nome a fama aos céus remonta
Se o penhor dessa igualdade Em clarão que seduz!
Conseguimos conquistar com braço forte, Nome que brilha esplêndido luzeiro
Em teu seio, ó liberdade, Nos fulvos braços de ouro do cruzeiro!
Desafia o nosso peito a própria morte!
Mudem-se em flor as pedras dos caminhos!
Ó Pátria amada, Chuvas de prata rolem das estrelas...
Idolatrada, E despertando, deslumbrada, ao vê-las
Salve! Salve! Ressoa a voz dos ninhos...
Há de florar nas rosas e nos cravos
Brasil, um sonho intenso, um raio vívido Rubros o sangue ardente dos escravos.
De amor e de esperança à terra desce, Seja teu verbo a voz do coração,
Se em teu formoso céu, risonho e límpido, Verbo de paz e amor do Sul ao Norte!
A imagem do Cruzeiro resplandece. Ruja teu peito em luta contra a morte,
Acordando a amplidão.
Gigante pela própria natureza, Peito que deu alívio a quem sofria
És belo, és forte, impávido colosso, E foi o sol iluminando o dia!
E o teu futuro espelha essa grandeza.
Tua jangada afoita enfune o pano!
Terra adorada, Vento feliz conduza a vela ousada!
Entre outras mil, Que importa que no seu barco seja um nada
És tu, Brasil, Na vastidão do oceano,
Ó Pátria amada! Se à proa vão heróis e marinheiros
Dos filhos deste solo és mãe gentil, E vão no peito corações guerreiros?
Pátria amada,Brasil!
Se, nós te amamos, em aventuras e mágoas!
Porque esse chão que embebe a água dos rios
Deitado eternamente em berço esplêndido, Há de florar em meses, nos estios
Ao som do mar e à luz do céu profundo, E bosques, pelas águas!
Fulguras, ó Brasil, florão da América, Selvas e rios, serras e florestas
Iluminado ao sol do Novo Mundo! Brotem no solo em rumorosas festas!
Abra-se ao vento o teu pendão natal
Do que a terra, mais garrida, Sobre as revoltas águas dos teus mares!
Teus risonhos, lindos campos têm mais flores; E desfraldado diga aos céus e aos mares
"Nossos bosques têm mais vida", A vitória imortal!
"Nossa vida" no teu seio "mais amores." Que foi de sangue, em guerras leais e francas,
E foi na paz da cor das hóstias brancas!
Ó Pátria amada,
Idolatrada,
Salve! Salve!

Brasil, de amor eterno seja símbolo

O lábaro que ostentas estrelado,
E diga o verde-louro dessa flâmula
- "Paz no futuro e glória no passado."

Mas, se ergues da justiça a clava forte,

Verás que um filho teu não foge à luta,
Nem teme, quem te adora, a própria morte.

Terra adorada,
Entre outras mil,
És tu, Brasil,
Ó Pátria amada!
Dos filhos deste solo és mãe gentil,
Pátria amada, Brasil!