educacaoprofissional.seduc.ce.gov.br...Escola Estadual de Educação Profissional [EEEP] Ensino...

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 SilvaCíntia Reis de Oliveira

Fernanda Vieira RibeiroFrancisco Aislan da Silva Freitas

João Paulo de Oliveira LimaLiane Coe Girão Cartaxo

Mirna Geyla Lopes BrandãoMoribe Gomes de Alcântara

Niltemberg Oliveira de CarvalhoPaulo Ricardo do Nascimento Lima

Renanh Gonçalves de AraújoRenato William rodrigues de Souza

Atualização – 2018

Paulo Ricardo do Nascimento Lima

========================================================================

Informática – HTML / CSS 1


SUMÁRIO

APRESENTAÇÃO.........................................................................................................................................41.0 INTRODUÇÃO AO HTML....................................................................................................................5

1.1. O HTML5 ...........................................................................................................................................71.2. Criando documentos em HTML 5.......................................................................................................71.3. Utilizando algumas TAGs básicas.....................................................................................................101.4. DOCTYPE, language e charset.........................................................................................................11

1.4.1. DOCTYPE.................................................................................................................................111.4.2. Metatag CHARSET...................................................................................................................12

1.5. Caracteres Especiais..........................................................................................................................131.5.1. Resolvendo problemas com caracteres especiais e acentuação.....................................................131.6. Comentários em HTML....................................................................................................................142.1. Trabalhando com textos: Tags - <Hn>, <P>, <BR> e &nbsp...........................................................152.2. Novos Elementos Estruturais............................................................................................................17

3.0 Exemplos de Tags...................................................................................................................................193.1 Estrutura e criação do arquivo HTML...............................................................................................19Passo 3: Salve a página HTML................................................................................................................203.2 HTML Básico.....................................................................................................................................213.2.1 Títulos..............................................................................................................................................213.2.2 Parágrafos........................................................................................................................................213.2.3 Links................................................................................................................................................223.2.4 Imagens...........................................................................................................................................223.2.5 Botões..............................................................................................................................................223.2.6 Listas...............................................................................................................................................223.3 Elementos HTML...............................................................................................................................233.4 Atributos.............................................................................................................................................253.5 Cabeçalhos.........................................................................................................................................283.6 Parágrafos...........................................................................................................................................293.7 Estilos.................................................................................................................................................313.8 Formatação de Texto..........................................................................................................................323.9 Comentários.......................................................................................................................................343.10 Cores................................................................................................................................................353.11 Links.................................................................................................................................................393.12 Imagens............................................................................................................................................443.13 Tabelas..............................................................................................................................................483.14 Listas................................................................................................................................................533.15 Classes..............................................................................................................................................563.16 Atributo Id........................................................................................................................................573.17 Iframes..............................................................................................................................................573.18 Layouts.............................................................................................................................................583.19 Forms................................................................................................................................................58

4.0 Uploading páginas..................................................................................................................................655.0 Web standards e validação.....................................................................................................................666.0 Dicas finais.............................................................................................................................................687.0 Introdução - CSS....................................................................................................................................70

7.1 O que é CSS?.....................................................................................................................................707.2 Como o CSS trabalha?.......................................................................................................................717.3 Cores e fundos....................................................................................................................................757.4 Fontes.................................................................................................................................................837.5 Estilo da fonte [font-style].................................................................................................................847.6 Font size [font-size]............................................................................................................................85



7.7 Textos.................................................................................................................................................867.8 Links...................................................................................................................................................897.9 Identificando e agrupando elementos (class e id)..............................................................................937.10 Agrupando elementos (span e div)...................................................................................................967.11 O box model.....................................................................................................................................987.12 Margin e padding.............................................................................................................................997.13 Bordas............................................................................................................................................1027.14 Altura e largura...............................................................................................................................1067.15 Flutuando elementos (floats)..........................................................................................................1077.16 Posicionando elementos.................................................................................................................1107.17 Camada sobre camada com z-index (Layers).................................................................................1137.18 Web standards e validação..............................................................................................................115

REFERÊNCIAS:........................................................................................................................................116



APRESENTAÇÃO

No intuito de deixar claro à(o) professor(a) o que é esperado do aluno ao final da disciplina, este manualpropõ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 emsala 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 depá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 paradesenvolvimento web.

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

Este material teve como grande contribuição e referência para alguns capítulos o material do projetoMEDIOTEC – SEDUC, como apostilas do módulo II, em uma verificação e adaptação do material, porser um material muito importante e de altíssima qualidade, aproximando bastante a experiência à praticado 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 omercado 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.



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 emapenas uma hora.

Outros pensam - erroneamente - que softwares avançados e caros é necessários para fazer sites. É verdadeque existem muitos programas diferentes, que afirmam que eles podem criar um site para você. Algunsmais 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. Omanual 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ãose preocupe - aprender a fazer sites é muito divertido e dá uma tremenda quantidade de satisfação quandovocê consegue.

De maneira simples e objetiva podemos definir Web Design como o conjunto de atividades responsáveispor estruturar meios, relacionando texto com imagens e conteúdo multimídia em geral, para disseminarinformações na internet. O web designer utiliza-se de conhecimentos técnicos formais para atuar eminú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 deaplicativos e conteúdo em geral para a mesma tornou-se um poderoso mercado consumidor deprofissionais como designer e programadores.

Hoje podemos considerar a internet como um dos maiores, mais velozes e mais ramificados meios decomunicação, um grande exemplo que comprova esse fato são as redes sociais. No entanto, qualquercrescimento 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 decriação, além de possuir conhecimento técnico aprimorado.

O objetivo do nosso curso é proporcionar conhecimento na utilização de ferramentas para criação deconteú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á quemuitos 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 aspá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 quedefine o endereço de um site ou recurso da web.

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



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

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

HTML é a "língua mãe" do seu navegador Tim Berners-Lee criou o HTMLoriginal (e outros protocolos associados como o HTTP) em uma estaçãoNeXTcube usando o ambiente de desenvolvimento NeXTSTEP.

Na época a linguagem não era uma especificação, mas uma coleção deferramentas para resolver um problema de Tim: a comunicação e disseminaçãodas pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com aentão emergente internet pública (que tornaria-se a Internet) ganhou atençãomundial.

As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que ajudou aqueles semfamiliaridade com a publicação na Web. Atualmente a sintaxe do HTML é muito mais rígida, permitindoum código mais preciso.

Através do tempo, a utilização de ferramentas para autoria de HTML aumentou, assim como a tendênciaem tornar a sintaxe cada vez mais rígida. Apesar disso, por questões históricas (retrocompatibilidade), osnavegadores ainda hoje conseguem interpretar páginas web que estão longe de ser um código HTMLválido.

A linguagem foi definida em especificações formais na década de 1990, inspiradas nas propostas originaisde Tim Berners-Lee em criar uma linguagem baseada em SGML para a Internet. A primeira publicaçãofoi esboçada por Berners-Lee e Dan Connolly, e publicada em 1993 na IETF como uma aplicação formalpara o SGML (com uma DTD em SGML definindo a gramática). A IETF criou um grupo de trabalho parao HTML no ano seguinte, e publicou o HTML 2.0 em 1995. Desde 1996, as especificações HTML vêmsendo 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 de1999. 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 — ede 2002 a 2006, de forma exclusiva — focado no desenvolvimento do XHTML, uma especificaçãoHTML baseada em XML que é considerada pela W3C como um sucessor do HTML.[2][3][4] O XHTMLfaz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de serprocessado e estendido.

Em janeiro de 2008 a W3C publicou a especificação do HTML5, a próxima versão do HTML, comoWorking Draft. Apesar de sua sintaxe ser semelhante a de SGML, o HTML5 abandonou qualquertentativa de ser uma aplicação SGML e, definiu explicitamente sua própria serialização "html", além deuma 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 seunavegador e escolha "Source".



1.1. O HTML5

Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas quedeveriam ser seguidas ao produzir códigos. Desde esse tempo, assuntos como: necessidade da separaçãodo código estrutural, da formatação, assim como princípios de acessibilidade foram trazidos paradiscussõ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ãofacilitava a manipulação dos elementos via Javascript ou CSS. Se você quisesse criar um sistema com apossibilidade de Drag’n Drop (arrastar e soltar elementos) de elementos, era necessário criar um grandescript, 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 depessoas interessadas na evolução do HTML e as tecnologias ligadas a tal, é o responsável por definir asregras de marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que formarão abase 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 odesenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que sejatransparente para o usuário final.

Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seutrabalho da melhor maneira possível, permitindo por meio de suas APIs a manipulação das característicasdestes 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çõesmodificadas e/ou descontinuadas. Isso tudo devido as versões antigas do HTML não conterem um padrãouniversal 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 dasinformaçõ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. Seriamais semântica com menos código, mais interatividade sem a necessidade de instalação de plugins eperda de performance. É a criação de código interoperável, pronto para futuros dispositivos e que facilitaa reutilização da informação de diversas formas através da aplicação do conceito de retrocompatibilidadeonde, nenhum site deverá ter de ser refeito totalmente para se adequar aos novos conceitos e regras. OHTML5 está sendo criado para que seja compatível com os browsers recentes, possibilitando a utilizaçãodas 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ãolidos 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 é umalinguagem de programação e sim de marcação interpretada por um navegador. Em html as informaçõesestão ligadas na forma de páginas que são transferidas de um computador remoto para o usuário, ondeobrowser 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:



• Conhecer a linguagem HTML;

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

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

Assim como em outras linguagens, o HTML possui uma sintaxe própria e que devem seguir algumasregras. Esses comandos são denominados de TAGs e nada mais são do que marcas padrões, utilizadaspara 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 é finalizadacom 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á aformataçã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 </>. É importanteressaltar 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 deconduta, é 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 navegadorvocê usa. O mais comum é o Microsoft Internet Explorer. Mas há outros, como Opera e Mozilla Firefox etodos eles podem ser usados.

Você pode ter ouvido falar ou até mesmo usado, programas como o Microsoft FrontPage, Macromedia



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 acodificar seu próprio site.

Em vez disso, você precisa de um editor de texto simples. Se você estiver usando Windows, você podeusar 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ãointerfere com o que você está digitando. Ele lhe dá o controle completo. O problema com muitos dosprogramas que afirmam que podem criar sites é que eles têm um monte de funções padrão, que você podeescolher. A desvantagem é que, tudo precisa se encaixar nestas funções padrão. Assim, este tipo deprogramas, 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.



Um navegador e o Notepad (ou um editor de texto similar) é tudo que você precisa para fazer seuspró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 forconcluí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 mesmoformato: 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ê rotularconteú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, ouseja, 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 dadelimitação desta tag que inserimos informações como título da página web, tipo de codificação (quandonecessário) e indicação de documentos importados.Informática – HTML / CSS 10


• <title> </title>: a tag title é utilizada para definir o nome da página web, ou seja, seu título, queaparecerá nas abas dos navegadores. Esta tag deve ser inserida dentro da delimitação da tag head, pois fazparte 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 delaspodemos criar uma página web simples. Para a criação de um documento html não é necessário nenhumtipo 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, quandosolicitarmos 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 onavegador e para outros meios qual a especificação de código utilizar. Na versão 4.01 do HTML temostrês tipos de doctype, a escolha de qual utilizar varia de acordo com o caso em que o site/aplicação web seencaixa. 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 econteúdos. É usada em conjunto com estilos CSS. É também a declaração de doctype mais rígida, nãoaceitando 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 deapresentação (desaconselhados, porque misturam estilo com conteúdos). Deve ser usado, quando somosobrigados a manter a compatibilidade com browsers que não suportam os estilos CSS ou em casos em queestamos em uma transição de código, ou seja, ainda existe código de formatação junto com código deconteú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 autilizaçã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 DTDdiretamente no código. Porém, com o surgimento do HTML5, a necessidade de utilização dessa referênciapassou a ser responsabilidade do browser. O Doctype é uma “tag especial” do HTML, mas uma instruçãopara que o browser tenha informações sobre qual versão de código a marcação foi escrita. Em HTML 5 onovo modo de declarar o doctype é:

<!DOCTYPE html>



1.4.2. Metatag CHARSET

Para definirmos qual codificação de caracteres utilizaremos em nossa página web, usamos a tag meta comseus atributos, dentre os quais o principal é o charset. Vejamos a nova maneira de definir a codificação decaracteres 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 anova 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 pessoasde outros países é algo que vai contra a tradição e seus ideais. Por isso, foi criado uma tabela que suprisseessas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milhãode caracteres. Em vez de cada região ter sua tabela de caracteres, é muito mais sensato haver uma tabelapadrão com o maior número de caracteres possíveis. Atualmente a maioria dos sistemas e browsersutilizados 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 oprograma, nem a língua.

Praticando!

Exercício 1.1: Agora exercitaremos o que aprendemos até o momento, para isso utilizaremos um editor detexto 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 qualidioma padrão será utilizado. Com a seguinte linha de código: <html lang=“pt-br”>, estamos indicandoque 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.



Depois salvaremos o arquivo com o seguinte nome: primeira_pagina_html.html e executaremos nobrowser para visualizarmos o resultado.

A página que acabamos de criar é bem simples, porém, já é possível entender como funciona o processode criação de uma página web, utilizando a linguagem HTML. Obs.: Caso o seu navegador ainda estejadesatualizado, você observará que algo de errado aconteceu com a acentuação (caracteres), mas não sepreocupe 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 muitoincomum já que hoje a maioria dos navegadores já possui essa solução integrada. Para resolvermos essepequeno 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 aacentuação (caracteres) estão corretos.


<!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émpossuirá seu navegador já atualizado.

1.6. Comentários em HTML.

Quando aprendemos a escrever códigos, somos guiados pelas orientações de professores, de algumtutorial 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 cadatrecho/linha de código está fazendo. Obviamente tudo que é descrito em forma de comentário não aparecena página web, podendo ser visualizado apenas no código fonte da página web. Em seu código HTMLtudo que estiver entre as marcações  será compreendido como comentário.

Vejamos um exemplo abaixo:

<body>



Isso aqui não é um comentário!

</body>


2.0 Conhecendo outras TAGs

A partir de agora conheceremos outras tags que possibilitarão uma melhor estruturação da nossa páginaweb. É importante ressaltar que a estrutura básica de qualquer página HTML possuirá quase sempre omesmo 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 tagbody), 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émaprenderemos a criar quebra de linha. Primeiramente aprenderemos a criar diversos níveis de cabeçalhosque 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>


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




</body>

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

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

<body>

<hgroup>

<h1> Projeto e-Jovem </h1>

<h1> Módulo II </h1>



<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 resolversempre que precisarmos dar “enters” ou vários espaços em nossas páginas: A tag p é responsável porinserir 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 é interessanteque tenhamos controle sobre isso, uma vez que, em algumas situações precisamos definir como ocorrerá aquebra 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 seucomputador. Cada &nbsp aplicado, significa um espaço dado:

<body>

Primeira palavra. Segunda

palavra

</body>



2.2. Novos Elementos Estruturais

No HTML5, como existe uma importância semântica muito grande, existem tags especiais para organizara 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. Cuidadopara 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 linksimportantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé etambé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 umwebsite. O aside pode ser representado por conteúdos em sidebars, em textos impressos, publicidade ouaté mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principaldo website.

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

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

• FOOTER: O elemento footer representa literalmente o rodapé da página. Seria o último elemento antesde 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 namassa” 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 criaro 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.



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



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:



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>:



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):



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).



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:



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 sevocê precisa fazer o seu documento lido por analisadores XML, você deve fechar todos os elementosHTML 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



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 serexibida.

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, tamanhoetc.

O ATRIBUTO LANG

A linguagem do documento podem ser declarados na tag <html>.Informática – HTML / CSS 26


A linguagem é declarada com o atributo lang.

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



O ATRIBUTO TITLE

Aqui, um atributo title é adicionado ao elemento <p>. O valor do atributo de título será exibido como umadica 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 formenos 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 qualquerposiçã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 apresentadocomo uma linha horizontal.

O <hr> é um elemento usado para separar o conteúdo (ou definir uma mudança) em uma página HTML:



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 documentoHTML 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 deconteúdo.

Com o HTML, você não pode alterar a saída, adicionando espaços extras ou linhas extras em seu códigoHTML.

O navegador irá remover quaisquer espaços extras e linhas extras quando a página é exibida:



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:



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:



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 foramprojetados para exibir tipos especiais de texto:

• <b> - Texto em negrito

• <strong> - texto Importante



• <i> - O texto em itálico

• <em> - texto enfatizado

• <mark> - texto marcado

• <small> - texto pequeno

• <del> - O texto excluído

• <ins> - Texto inserido



• <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-fonteHTML.

Com os comentários que você pode colocar notificações e lembretes no seu HTML:



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:



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 valormais 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:



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 quedecimal 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



VALOR HSL

Em HTML, uma cor pode ser especificada usando tonalidade, a saturação, e luminosidade (HSL), sob aforma:

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 aopacidade para uma cor.



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 oseu 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>:



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. Muitosservidores 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 ....).



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 é opadrão)

• _parent - Abre o documento vinculado no quadro pai

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



• 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 umapá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:



Cap 8, 9,10 ...



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 podevê-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:



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 dasimagens:

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 pastano atributo src:



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 umtexto:

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é:



O atributo name da <map> marca está associado com os <img>'s atributo usemap e cria uma relaçãoentre a imagem e o mapa.

O elemento <map> contém um número de <area> e etiquetas, que definem as áreas clicáveis naimagem-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-imageno corpo do elemento:

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



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:



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:



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:



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:



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:



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:



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:



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 deum 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:



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 elementoscom o nome da classe especificada.

Em CSS, para selecionar elementos com uma classe específica, escrever um personagem, período seguidopelo nome da classe (.):

Use CSS para estilizar todos os elementos com o nome da classe "cidade":



3.16 Atributo Id

O atributo id especifica um id único para um elemento HTML (o valor deve ser exclusivo dentro dodocumento HTML).

O valor do ID pode ser usado por CSS e JavaScript para executar determinadas tarefas para um únicoelemento 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 usadopara exibir um arquivo local dentro da página.



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 umabarra 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 deelementos de entrada, como campos de texto, caixas de seleção, botões de rádio, botões de envio, e muitomais.

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ãoalguns exemplos:



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 deum número limitado de opções:

O BOTÃO ENVIAR

<input type="submit">define um botão para enviar os dados do formulário paraum formulário-manipulador.

A forma de manipulador é tipicamente uma página do servidor com um script para processar dados deentrada.

A forma de manipulador é especificado no formulário ação atributo:



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 clicano 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 doformulá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, umquadro, 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.



O ATRIBUTO METHOD

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



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çode 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étodoPOST 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:



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:



BOTÃO RESET

<input type="reset">define um botão de reset que irá repor todos os valores do formulário para seusvalores 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.



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 mundopara 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 FTPgratuito.

Se você tiver acesso à Internet, você já deve ter algum espaço no servidor gratuito para o seu site. O seuespaç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ê configuraruma conta de e-mail (Hotmail menos por exemplo), você pode registrar para o espaço livre no servidor deInternet. 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 tero 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 doiscomputadores através da Internet para que você possa transferir arquivos do seu computador para outrocomputador (servidor). Você pode não ter um programa desse tipo ainda, mas, felizmente, isso pode serbaixado 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.comcom FileZilla. Mas o processo é, mais ou menos, o mesmo para todos os fornecedores de programas e deFTP.

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ê deveagora 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"):



Encontre seus documentos HTML e imagens em seu computador (no "Local site") e transferi-los para oservidor ("Remote site") clicando duas vezes sobre eles. Agora o mundo inteiro pode vê-los! (Porexemplo, 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áginainicial. 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 exemplowww.seudominio.com ou www. seudominio.com.br) procure evitar os endereços longos e complicadosque 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 demaneiras de diversas maneiras. Você poderia dizer que HTML tem muitos dialetos. É por isso que algunssites 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 estradalonga e difícil.

Nos velhos tempos - quando os navegadores onde algo que você tinha para pagar - Netscape dominava omercado 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 normascomuns. Pelo contrário, a Netscape inventava seus próprios elementos estranhos, que não funcionavamem outros navegadores.



Por muitos anos a Microsoft ignorou completamente a Internet. Depois de um tempo eles levaram acompetiçã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 Microsoftresolveu distribuir seu navegador gratuitamente (isto sempre é uma coisa popular para fazer) e InternetExplorer 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ãodesatualizada 4.

O resto é história. Hoje, os padrões de HTML são chamados de 4.01 e XHTML. Agora é o InternetExplorer que tem uma quota de mercado de mais de 90%. Internet Explorer ainda tem seus elementospró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 servistos 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á, noseu 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 aonavegador 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 complicadaspoderá ler mais sobre namespaces no site do W3C.



No atributo lang você específica em que o idioma do documento está escrito dentro Por isso. O padrãoISO 639 é usado, que lista os códigos de todas as línguas do mundo No exemplo acima a língua definidacomo Inglês ("en").

Com um DTD o navegador sabe exatamente como deve ser lido e renderizado o HTML. Por isso, use oexemplo 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 validadorgratuito do W3C.

Para testar isso, fazer uma página e enviá-lo para a Internet. Agora, vá para validator.w3.org e digite oendereço (URL) da página e validá-lo. Se seu HTML estiver correto, vai aparecer uma mensagem decongratulaçõ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 dehabilidades entre os desenvolvedores web, tentando corrigir os erros no código mostrando a página emque acho que ele deve procurar. Em navegadores assim você nunca pôde ver um erro no seu próprionavegador. No entanto, outros navegadores podem imaginar diferente ou não mostrar a página em tudo. Ovalidador 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 qualconstruir.

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 publicardocumentos bem organizados de você não só vai mostrar aos outros o seu domínio de HTML, mastambé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: Escrevaum 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 apresentarinformações sobre a Internet, para se certificar de que não há informações para apresentar. Páginas bonitaspode 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 naInternet. Ela diminui o carregamento da página e pode ser confuso para os visitantes. Páginas quedemoram 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



para adicionar novas páginas (o mais importante é o Google, mas também há outros como yahoo, cade eetc...).

Neste manual, você aprendeu a usar o bloco de notas, que é um editor simples e muito fácil de usar, mastalvez você vai encontrá-lo útil para usar um editor mais avançado que dá uma melhor visão e maispossibilidades.

Como posso saber mais?

Primeiro de tudo, é importante que você continue a trabalhar e experimentar as coisas que você aprendeuneste tutorial. Estude sites de outras pessoas e se você encontrar algo que você gosta ver como ele foifeito 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údossobre HTML.

Leia e faça perguntas nos Fóruns. Este é o lugar onde você se encontra com os verdadeiros especialistasde quem você pode aprender muito. Por último, mas não menos importante, você deve - sempre que sesentir 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 :-)



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 epermite que você projete websites com uma forma completamente nova. CSS é uma necessidade paraquem trabalha com web design.

Este manual irá ajudar a começar com CSS em apenas algumas horas. É fácil de entender e ele vai teensinar todas as técnicas sofisticadas.

Aprender CSS é divertido. Como você vai junto com o manual, lembre-se de ter tempo suficiente paraseus 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 comHTML, 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 estemanual. Softwares avançados não o ajudarão a aprender CSS. Em vez disso, ela vai limitá-lo e diminuirseu aprendizado.

Tudo que você precisa é um editor de texto simples e gratuito, podemos continuar utilizando o bloco denotas.

Um editor de texto simples é ideal para aprender HTML e CSS, pois não afetam ou alteram os códigosdigitados. 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á maissobre 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 maisopçõ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 estilousando 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.



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 WideWeb, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textosdefinindo "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 delayout 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 sediferenciava 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 sendocada vez mais utilizadas para páginas de layout em vez de adicionar estrutura ao texto. Muitas novas tagspara layout como <blink> eram suportadas somente por um tipo de navegador. "Você precisa donavegador 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 delayout sofisticados suportados por todos os navegadores. Ao mesmo tempo, a separação do estilo deapresentação de documentos a partir do conteúdo de documentos, faz a manutenção do site muito maisfá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 dolayout;

• 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 omodelo 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. Vejamosum 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;}



Como você pode notar, os códigos são mais ou menos idêntico para HTML e CSS. O exemplo acimatambé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 documentoHTML. Estes métodos são exemplificados a seguir. Recomendamos que você foque no terceiro métodoou 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 cordo 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>



<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 outroarquivo, 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. Asituaçã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 podeser 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>



<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 estilomesmo. Em outras palavras, um ficheiro de CSS pode ser usado para controlar a apresentação de muitosdocumentos HTML.

Esta técnica pode poupar muito trabalho. Se você, por exemplo, gostaria de mudar a cor de fundo de umsite com 100 páginas, uma folha de estilo pode te salvar de ter que alterar manualmente todos os 100documentos HTML.

Usando CSS a mudança pode ser feita em poucos segundos apenas alterando um código na folha de estilocentral.

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 arquivoHTML e um arquivo CSS - com os seguintes conteúdos:

default.htm

<html>

<head>

<title>Meu primeiro css</title>Informática – HTML / CSS 74


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 aplicadaao elemento <body>.

Você também pode aplicar cores de fundo para outros elementos, inclusive os títulos e texto. No exemploabaixo, 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 paraque você possa usá-lo em seu próprio computador (botão direito na imagem e escolha "salvar imagemcomo"), 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 apropriedade background-image para <body> e especificar a localização da imagem.

body {




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

}

h1 {

color: #990000;


}

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 sereferir 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 verticalmentepara 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



background-repeat: repeat-y

background-repeat: repeat



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 oelemento que contém.Informática – HTML / CSS 79


Uma imagem de fundo fixa não se moverá com o texto quando um leitor se move para a página, enquantouma 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 exemplospara ver a diferença entre deslocamento e fixo.

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

body {


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

background-repeat: no-repeat;

background-attachment: fixed;

}

h1 {

color: #990000;


}

Coloque imagem de fundo [background-position]

Por padrão, uma imagem de fundo é posicionada no canto superior esquerdo da tela. A propriedadebackground-position permite alterar este posicionamento padrão e colocar a imagem de fundo onde quiserna tela.

Existem inúmeras maneiras de definir os valores de background-position. No entanto, todos eles sãoformatados como um conjunto de coordenadas. Por exemplo, as posições do valor '100px 200px 'a 100pximagem 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 abaixoilustra o sistema:



A tabela abaixo dá alguns exemplos.

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

body {





background-position: right bottom;

}

h1 {

color: #990000;




}

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 umcaminho mais curto o que torna mais fácil de ler.

Por exemplo, olhar para esses cinco linhas:





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. Porexemplo, 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ãoque, 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ãocontinua na próxima lição que examina a ampla gama de possibilidades ao usar CSS para descrever asfontes.



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ó podeser 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 exibirum determinado elemento ou página web. Se a fonte primeira da lista não estiver instalada no computadorusado 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 termossã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ênciauniforme. Um exemplo é sans-serif, que é uma coleção de fontes sem "pés".

A diferença também pode ser ilustrada da seguinte forma:



Quando você listar fontes para seu Web site, comece com aquela preferida, seguindo de algumasalternativas. Recomenda-se a completar a lista com uma fonte genérica. Dessa forma, pelo menos, apágina será mostrado usando uma fonte da mesma família, se nenhuma das fontes especificadas estãodisponí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á instaladono computador do usuário, "Verdana" será usado. Se ambas estiverem indisponíveis, uma fonte da famíliasans-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 deaspas.

7.5 Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo abaixo, todosos 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 deletras 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 maisprová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 podeser normal ou bold. Alguns navegadores suportam o uso de números entre 100-900 (em centenas) paradescrever o peso de uma fonte.

p {font-family: arial, verdana, sans-serif;}

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



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 descrevertamanhos de fonte. Neste manual vamos nos concentrar nas unidades mais comuns e apropriadas. Osexemplos 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 dafonte absoluta, enquanto '%' e 'em' permitem ao usuário ajustar o tamanho da fonte como ele / ela vê oajuste.

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 InternetExplorer. Tente você mesmo - característica pura, você não acha?

Internet Explorer

Mozilla Firefox



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 grandesvantagens do uso de CSS para especificar fontes é que, em determinado momento, você pode mudar afonte em um site inteiro em apenas alguns minutos. CSS economiza tempo e facilita a sua vida. Napró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. Nestalição você será apresentado às oportunidades CSS proporcionam para adicionar layout aos textos. Aspropriedades a seguir serão descritas:

text-indent

text-align



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 umrecuo à primeira linha do parágrafo. No exemplo abaixo de um 30px é aplicado a todos os textosmarcados 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 podemser alinhados para a esquerda, para a direita ou centrado. Em adição a isto, o valor justificar vai esticarcada linha, de modo que ambas as margens esquerda e direita seja alinhadas. Você sabe que este layout apartir 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" aotexto. Por exemplo, você pode sublinhar o texto, tem uma linha através ou acima do texto, etc Noexemplo 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 {



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. Ovalor 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 entreas letras em manchetes <h1> o código abaixo poderia ser utilizado.

h1 {

letter-spacing: 6px;

}

p {


}

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á "ESCOLAPROFISSIONAL".

minúsculas – lowercase

Converte todas as letras para minúsculas. Por exemplo: "ESCOLA PROFISSIONAL" será "EscolaProfissional".

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 letrasmaiúsculas.



Tente dar uma olhada no código HTML para este exemplo e você verá que o texto realmente é em letraminú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. Napró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, dependendose o link é visitado, não visitado, ativo ou se o cursor sobre o link. Isso torna possível adicionar efeitos defantasia 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 parauma 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 usarpseudo-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 apseudo-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


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 serlaranja e o texto para itálico quando o cursor está apontado para eles, o nosso CSS deve ser semelhante aeste:

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.



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 apropriedade letter-spacing. Isto pode ser aplicado a liga para um efeito especial:



a:hover {


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 diferentespropriedades. 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 ausabilidade do seu site de forma significativa. As pessoas estão acostumadas a azul sublinhado links empáginas da web e saber que eles podem clicar sobre eles. Até minha mãe sabe disso! Se você alterar osublinhado e cor dos links, há uma boa chance de que os usuários se confundem e, portanto, não recebe obenefí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, apropriedade text-decoration pode ser usado para determinar se o texto está sublinhado ou não. Pararemover 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 osquatro pseudo-classes.

a:link {

color: blue;




}

a:visited {

color: purple;


}

a:active {

background-color: yellow;


}

a:hover {

color:red;


}

Nesta lição você aprendeu pseudo-classes, usando algumas das propriedades das lições anteriores. Issodeve lhe dar uma ideia de algumas possibilidades das CSS.

Na próxima lição ensinaremos como definir propriedades para elementos específicos e grupos deelementos.

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 deelementos. Nesta lição, vamos dar uma olhada em como você pode usar class e id para especificar aspropriedades 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 apenasexemplos 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 eEnfermagem. 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>



</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 oresto 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 cadalink, 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>



Como mostrado no exemplo você pode definir as propriedades de elementos que pertencem a umadeterminada 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 é feitousando o ID de atributo.

O que é especial sobre o atributo id é que não pode haver dois elementos no mesmo documento com omesmo 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>

...


...

<h1> Capitulo 2</h1>

...


...

<h3> Capitulo 2.1.2</h3>

...

A descrição acima poderia ser cabeçalhos de um documento dividido em capítulos e parágrafos. Serianatural 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>

...


...

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

...


...



<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 aspropriedades de elementos específicos.

Na próxima lição, vamos dar uma olhada em dois elementos de HTML que é amplamente utilizado emconexã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üentementeusados 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 elementosHTML 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 aopróprio documento. Mas, com CSS, <span> pode ser usado para adicionar efeitos visuais a partesespecí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>



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 naaula 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 daruma 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;}



Nos exemplos acima, usamos somente <div> e <span> em coisas muito simples, tais como texto e coresde fundo. Ambos os elementos têm o potencial para fazer coisas muito mais avançadas. No entanto, estenã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 decaixa contém ainda opções detalhadas de ajuste de margens, bordas, padding e conteúdo para cadaelemento. 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 casoreal 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 deelevar os resultados da escola pública, que atende a quase 90% da matrícula dascrianças e jovens do nosso Estado. No âmbito do Ensino Médio, última etapa daeducação básica, que ao longo dos últimos anos vem sofrendo um "arrasto"decrescente nos resultados, os desafios para a melhoria da escola sãoconsideráveis. Para começo de conversa, é preciso foco na elevação do nível dedesempenho dos alunos em português e matemática, eixos que dão suporte a todoprocesso de desenvolvimento da autonomia intelectual para as aprendizagens.

... assume também o desafio de promover a articulação do currículo do ensinomédio com a formação para o mundo do trabalho. Esta tarefa, ordenada pela nossalegislação educacional, integra a política estadual para a juventude e pretendequalificar 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 seguiraprendendo com possibilidade de adaptação às demandas e às transformaçõesdesses processos." (Trechos do artigo da secretária Izolda Cela, publicado no jornalO Povo,24-06-2008)</p>



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

<% '

As propriedades que regulam as caixas diferentes são: margem de preenchimento e de fronteira. Aspró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 seusdocumentos 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 umaolhada 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 aapresentaçã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 decada lado para o elemento vizinho (ou as fronteiras do documento). Veja também o esquema da lição 9para uma ilustração.

Como primeiro exemplo, vamos olhar como você definir as margens para o documento, ou seja, para oelemento <body>. A ilustração abaixo mostra como queremos que as margens da página para ser.



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, podemosoptar por definir margens para todos os parágrafos marcados com <p>:



body {


}

p {


}

Definindo padding de um elemento

Padding pode também ser entendido como "enchimento". Isto faz sentido como enchimento não afecta adistância do elemento para outros elementos, mas apenas define a distância entre a borda interior e aoconteúdo do elemento.

O uso de padding pode ser ilustrado por olhar para um exemplo simples, onde todos os cabeçalhos têmuma 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 emcada um deles:

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}



Agora você já está no caminho para dominar o box model em CSS. Na próxima lição, vamos dar umaolhada 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 parasublinhar uma separação das duas coisas. CSS proporciona infinitas possibilidades de uso de bordas emsuas 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]



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


}

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. Oexemplo 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;



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


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.



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. Foiinicialmente desenvolvido pelo Google e posteriormente pela Open HandsetInformática – HTML / CSS 107


Alliance, mas a Google é a responsável pela gerência do produto e engenharia deprocessos. </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



A propriedade clear é usado para controlar como os elementos se seguem aos elementos floats nodocumento deve se comportar.

Por padrão, os elementos subsequentes são movidos para cima para preencher o espaço disponível, queserá 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, porexemplo, é definido como tanto para uma caixa, a margem superior da caixa será sempre sob a margeminferior 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 onúcleo Linux, embora por enquanto a sua versão do núcleo Linux divirja da versãooficial. Foi inicialmente desenvolvido pelo Google e posteriormente pela OpenHandset Alliance, mas a Google é a responsável pela gerência do produto eengenharia 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;

}



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

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 layoutavanç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:



O princípio de posicionamento CSS é que você pode posicionar qualquer caixa de qualquer lugar nosistema 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 dodocumento, 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 quenã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:



#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. Adiferenç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 nodocumento. 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çõesoriginais no documento:

#dog1 {

position:relative;

left: 350px;



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 algunsdos 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 nasaulas anteriores. Nesta lição, vamos aprender como colocar elementos em camadas. Em resumo, istosignifica 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 elementocom 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 umaforma 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úmerosdiferentes. O importante é a sequência cronológica dos números (a ordem).



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;



}

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 emmanchetes em vez de criar estes como elementos gráficos. Por um lado, é mais rápido para carregar otexto 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 docódigo na web (HTML, CSS, XML e outros).

Microsoft, Fundação Mozilla e muitos outros fazem parte da W3C e de acordo sobre o futurodesenvolvimento das normas.

Se você estiver trabalhando um pouco com web design, provavelmente sabe que não pode haver umagrande diferença na forma como uma página web é apresentada em diferentes navegadores. Pode sermuito 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. Istosignifica que, observando as normas, um desenvolvedor terá a certeza que o que ele ou ela não vaifuncionar 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 parailustrar que você está usando codificação validados:

CSS válido!

O validador pode também ser encontrado neste link: http://jigsaw.w3.org/cssvalidator/



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


Hino do Estado do Ceará

Poesia de Thomaz LopesMúsica de Alberto NepomucenoTerra do sol, do amor, terra da luz!Soa o clarim que tua glória conta!Terra, o teu nome a fama aos céus remontaEm clarão que seduz!Nome que brilha esplêndido luzeiroNos fulvos braços de ouro do cruzeiro!

Mudem-se em flor as pedras dos caminhos!Chuvas de prata rolem das estrelas...E despertando, deslumbrada, ao vê-lasRessoa a voz dos ninhos...Há de florar nas rosas e nos cravosRubros o sangue ardente dos escravos.Seja teu verbo a voz do coração,Verbo de paz e amor do Sul ao Norte!Ruja teu peito em luta contra a morte,Acordando a amplidão.Peito que deu alívio a quem sofriaE foi o sol iluminando o dia!

Tua jangada afoita enfune o pano!Vento feliz conduza a vela ousada!Que importa que no seu barco seja um nadaNa vastidão do oceano,Se à proa vão heróis e marinheirosE vão no peito corações guerreiros?

Se, nós te amamos, em aventuras e mágoas!Porque esse chão que embebe a água dos riosHá de florar em meses, nos estiosE bosques, pelas águas!Selvas e rios, serras e florestasBrotem no solo em rumorosas festas!Abra-se ao vento o teu pendão natalSobre as revoltas águas dos teus mares!E desfraldado diga aos céus e aos maresA vitória imortal!Que foi de sangue, em guerras leais e francas,E foi na paz da cor das hóstias brancas!

Hino Nacional

Ouviram do Ipiranga as margens plácidasDe um povo heróico o brado retumbante,E o sol da liberdade, em raios fúlgidos,Brilhou no céu da pátria nesse instante.

Se o penhor dessa igualdadeConseguimos conquistar com braço forte,Em teu seio, ó liberdade,Desafia o nosso peito a própria morte!

Ó Pátria amada,Idolatrada,Salve! Salve!

Brasil, um sonho intenso, um raio vívidoDe amor e de esperança à terra desce,Se em teu formoso céu, risonho e límpido,A imagem do Cruzeiro resplandece.

Gigante pela própria natureza,És belo, és forte, impávido colosso,E o teu futuro espelha essa grandeza.

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

Deitado eternamente em berço esplêndido,Ao som do mar e à luz do céu profundo,Fulguras, ó Brasil, florão da América,Iluminado ao sol do Novo Mundo!

Do que a terra, mais garrida,Teus risonhos, lindos campos têm mais flores;"Nossos bosques têm mais vida","Nossa vida" no teu seio "mais amores."

Ó Pátria amada,Idolatrada,Salve! Salve!

Brasil, de amor eterno seja símboloO 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!

educacaoprofissional.seduc.ce.gov.br...Escola Estadual de Educação Profissional [EEEP] Ensino...

Documents

Transcript of educacaoprofissional.seduc.ce.gov.br...Escola Estadual de Educação Profissional [EEEP] Ensino...