Part I: Getting Started with HTML and CSS on the Web

� por isso que � importante entender HTML e CSS. Voc� pode usar HTML para
controlar que vai para uma p�gina da web, e voc� usar CSS para controlar onde e
como
parece; o que parece (ou soa, ou ainda se sente) como; e como ele se comporta. HTML
e CSS s�o essenciais para uma p�gina web bem trabalhada, assim que voc� deve
dedicar
a mesma aten��o e energia para a compreens�o de HTML e CSS, nem um em
detrimento do outro.
2
Encontro da estrutura e
os componentes de
HTML
Neste cap�tulo
? Entendimento a sintaxe e as regras em linguagens de marca��o
? Examinando entidades na marca��o
? Organizando p�ginas da web
? Explorando uma p�gina web
Trabalhar com uma linguagem de marca��o, como HTML exige que voc�
compreenda as conven��es usadas para inserir a marca��o em um arquivo de
texto e fazer sentido das cordas �s vezes enigm�ticas de texto que voc� pode
ver como um resultado.
Mas, como voc� obter os detalhes, tudo come�a a fazer um certo tipo de sentido - um
sentido que voc� deve procurar desenvolver e cultivar, se voc� quiser construir ou
editar marca��o em p�ginas da web. Fique com a gente aqui, por favor, como falar
com
voc� atrav�s de alguns detalhes importantes envolvidos na leitura e compreens�o
HTML.
Como qualquer Idioma: Sintaxe e Regras
HTML � chamado de linguagem de marca��o por uma boa raz�o: agarra, texto normal
comum e insere v�rias seq��ncias em que o texto para definir, organizar e gerenciar
o
fluxo ea seq��ncia de conte�do em p�ginas da web. As cordas inseridas definir a
marca��o, que navegadores - ou outros programas especiais conhecidos como agentes
de utilizador - debru�ar sobre e usar (junto com CSS, � claro) para orientar a sua
visualiza��o dos conte�dos inclu�dos.
Como qualquer linguagem, HTML est� sujeito a uma sintaxe espec�fica, que define a
ordem em que a marca��o deve ou pode aparecer em uma p�gina web. H� tamb�m
grande quantidade de regras interessantes sobre que tipo de marca��o � legal em
alguns
lugares, mas ilegal em outros. Isto pode parecer um conceito dif�cil, mas essas
restri��es
em HTML ilustra o que isso significa e por que faz muito sentido:
26 Part I: Getting Started with HTML and CSS on the Web
? O elemento <caption> � para fornecer uma legenda para uma tabela. Assim, um s�
aparecem dentro <table> marca��o. Se voc� deseja fornecer uma legenda para uma
figura, voc� deve usar o <figcaption> elemento em seu lugar. Voc� precisa empregar
a
marca��o certa para os usos corretos em HTML.
?HTML reconhece v�rios tipos de listas, que pode organizar os itens de texto com
n�meros ou marcadores. Os itens da lista empregar o <li> </ li> tags para
identificar
elementos em tais listas. � por isso que essas marcas particulares s�o legais
apenas se
ocorrer dentro de algum tipo de elemento da lista, como <ul> </ ul> (uma ou lista
desordenada, com marcadores) ou <ol> </ ol> (um ordenado, ou lista numerada ).
Cap�tulo 5 abrange listas em grande detalhe. Esse cap�tulo fala sobre a
marca��o para criar v�rias listas em p�ginas da Web usando HTML.
? HTML suporta todos os tipos de campos e controles de entrada de formul�rios
on-line. Tal como acontece com tabelas, elementos de formul�rios relacionados
podem aparecer apenas dentro de um par de <form> </ form>. H� lotes de
elementos e atributos em formul�rios relacionados que podem aparecer apenas em
tal contexto. Estes incluem v�rios tipos de entrada, v�rios tipos de caixas de
texto,
controles de bot�o, e muito mais. Todos eles s�o legais apenas em um formul�rio, de
modo que deve ocorrer entre <form> e </ form> em uma p�gina web para que
possam trabalhar.
Cap�tulo 7 abrange formas em grande detalhe. Este cap�tulo explica a marca��o
para criar todos os tipos de formul�rios em p�ginas web usando HTML.
HTML Entendimento resume em grande parte para apreender como criar a marca��o
ele usa (que � a sintaxe) e compreender a ordem (ou contexto) em que os elementos
de
marca��o individuais podem aparecer. Essas s�o as regras para a cria��o de HTML
v�lida ou legal. Grande parte deste livro � dedicada a um ou ambos destes t�picos.
As
mesmas observa��es s�o v�lidas para CSS tamb�m, pelo caminho, a n�o ser que a
sintaxe e as regras para a sua express�o s�o diferentes porque CSS � uma linguagem
de
marca��o diferente do HTML.
Codifica��o de cores a marca��o
Como apresentamos HTML e CSS informa��es em nossos exemplos de c�digo deste
livro, usamos codifica��o de cores para ajud�-lo a distinguir o que � o que por
meio de
marca��o. Aqui est� uma chave de cor que voc� deve ter em mente que voc� ler nossas
v�rias listagens de c�digo em outras partes do livro:
Chapter 2: Meeting the Structure and Components of HTML 27
Temos colorir marca��o apenas em listagens de c�digo e blocos de c�digo, pois afeta
a
legibilidade muito quando c�digo aparece na c�pia do corpo - ou seja, dentro de
par�grafos comuns de texto como este. Nos par�grafos como este, n�s simplesmente
usar uma fonte diferente, espa�amento simples - como voc� j� viu em nossas
discuss�es
sobre <form> e <table> marca��o (e outros elementos HTML) na se��o anterior.
S� mais uma coisa: Se voc� usar um editor de HTML, como o Aptana Studio, HTMLKit,
Dreamweaver, KompoZer, ou o que quer, voc� encontrar essas ferramentas
tamb�m usam a cor do texto para ajudar a identificar os diferentes tipos de
marca��o.
Infelizmente, nenhum deles fazer isso no exatamente da mesma maneira, de modo que
o esquema de cores que apresentamos aqui neste livro ser� diferente dependendo do
editor HTML que voc� usa.
Quebrando os elementos
Os elementos s�o os blocos de constru��o para HTML. Voc� us�-los para descrever
cada
peda�o de texto em sua p�gina web. Elementos s�o feitos de tags e os conte�dos
dentro
(ou entre) essas tags. Em HTML, existem dois tipos principais de elementos:
? Elementos com conte�do composto de um par de tags e qualquer texto
que fica entre as tags de abertura e fechamento do par
? Elementos que inserir algo na p�gina, utilizando uma �nica tag
Pares de tags em HTML
Elementos que descrevem o conte�do usar um par de tags para marcar o in�cio eo fim,
com tudo in between representando o conte�do do elemento. Pares de tag come�ar
com uma tag de abertura, seguido de algum conte�do, e terminar com uma marca de
fechamento, como este: <title> T�tulos s�o f�ceis, o conte�do � duro </ title>.
Conte�do - como artigos, apartes, par�grafos, t�tulos, tabelas e listas - sempre
usa pares
de tags, onde
? A tag de abertura (<tag>) informa ao navegador, "O elemento come�a aqui."
? A tag de fechamento (</ tag>) informa ao navegador, "O elemento termina aqui."
Conte�do real � o material entre a abertura e fechamento de tags. Aqui est� um
trecho
do par�grafo bio do Ed em www.edtittel.com/about/about-ed. html:
<p>Ed Tittel has worked over 30 years in the computing
industry. He�s worked as a software developer and
development manager, a networking consultant, a trainer
and course developer, and a technical evangelist . . . </p>
28 Part I: Getting Started with HTML and CSS on the Web
tags simples
Elementos que inserir algo em uma p�gina s�o chamados de elementos vazios
(porque eles encerram nenhum conte�do) e usar uma �nica tag, como este: <tag
single>.
Imagens e quebras de linha inserir algo em um arquivo HTML e usar uma �nica tag
(elemento vazio) - ou seja, <img. . .> E <br>, respectivamente.
Em HTML5, elementos vazios n�o necessitam de tratamento especial. Em uma vers�o
anterior conhecido como XHTML (baseado na linguagem de marca��o XML),
elementos vazios s�o obrigados a terminar com uma barra pouco antes do par�ntese
angular de fecho, ent�o o que n�s escrevemos como <tag single-> na p�gina anterior
em
HTML5 (e HTML4, para que o assunto) seria escrito como <-tag single />. Para
compatibilidade com vers�es anteriores com HTML4, isso muitas vezes seria escrito
como <-tag single /> porque esse espa�o anterior � barra habilitado navegadores
mais
antigos para reconhecer o elemento corretamente, mesmo se eles n�o analisar a
marca��o como XHTML. Voc� pode encontrar o espa�o extra ea barra de fechamento
em p�ginas que voc� olha, ent�o n�o deixe que te incomoda. Estas contor��es n�o se
aplicam mais em HTML5.
Por exemplo, o elemento <img> faz refer�ncia a uma imagem. Quando o navegador
exibe a p�gina, ele substitui o elemento <img> com o arquivo que ele aponta. (Um
atributo faz o que aponta, como � mostrado na pr�xima se��o.)
No entanto atraente o conceito possa parecer, voc� n�o pode fazer os seus pr�prios
elementos HTML. Elementos legais para HTML pertence a um conjunto muito
espec�fico - se voc� usar elementos que n�o pertencem a esse conjunto, o navegador
simplesmente ignora-los. Os elementos que voc� pode usar s�o definidos nas v�rias
especifica��es HTML. (A vers�o da especifica��o do HTML5 que era atual como
est�vamos escrevendo este livro pode ser encontrado em www.w3.org/TR/html51.)
marca��o Nesting
Algumas estruturas de p�ginas HTML podem conter elementos aninhados. Pense
neles como malas que se encaixam perfeitamente um dentro do outro. Por exemplo,
uma lista de marcadores usa dois tipos de elementos:
? O elemento <ul> especifica que a lista n�o estiver ordenada (com marcadores).
? O elemento <li> marca cada item da lista. (Li significa "item da lista.")
Quando voc� combina elementos usando essa abordagem, voc� deve fechar todos os
elementos de item de lista dentro antes de fechar o elemento da lista n�o ordenada,
como este:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Chapter 2: Meeting the Structure and Components of HTML 29
Adicionando Atributos para seu HTML
Atributos introduzir variedade e especificidade de como um elemento descreve o
conte�do ou como elemento que funciona ou se comporta. Atributos permitem que
voc� use elementos de forma diferente dependendo das circunst�ncias. Por exemplo, o
elemento <img> usa o atributo src para especificar um local para uma imagem que
voc�
deseja exibir:
<img src=�images/header.png� alt=�header graphic�
width=�800� height=�160� title=�banner graphic�>
Neste pouco de HTML, o elemento <img> � uma bandeira geral para o navegador
que voc� deseja incluir uma imagem. Os atributos lidar com todos os detalhes:
? O atributo src fornece os detalhes para a imagem que voc� deseja usar -
header.png
neste caso
? O atributo width e height dar informa��es sobre como exibir a imagem na
p�gina.
? O atributo alt fornece uma alternativa de texto para a imagem, o que � �til
porque
um texto �nico navegador pode exibir o texto, ou um leitor de texto-para-fala pode
dizer
isso em voz alta para os deficientes visuais.
? O atributo title cria uma mensagem de texto pop-up que aparece sobre a
imagem quando o usu�rio move o mouse dentro de suas fronteiras.
Cap�tulo 9 descreve o elemento <img> e seus atributos em detalhe glorioso.
Se voc� deseja definir atributos para qualquer elemento HTML, eles devem aparecer
dentro da tag de abertura para esse elemento, ou dentro da tag apenas para um
elemento vazio. Pertencem ap�s o nome do elemento, mas antes do par�ntese
angular de fecho nessa tag, como este:
<tag attribute1=�value� attribute2=�value�>
Regras de sintaxe HTML5 decreto que atribuem valores devem aparecer sempre entre
aspas, mas voc� pode incluir atributos e seus valores em qualquer ordem que desejar
dentro da tag de abertura ou de uma �nica tag de um elemento vazio.
Cada elemento HTML tem uma cole��o de atributos que podem ser usados com ele,
mas voc� n�o pode misturar e combinar os atributos e elementos, com tudo. Alguns
atributos podem ter qualquer texto como um valor, porque esse valor pode ser
qualquer
coisa de, tal como a localiza��o de uma imagem ou uma p�gina para a qual voc�
gostaria de liga��o. Outros atributos impor uma lista espec�fica de valores que
podem
ser tomadas, tais como as suas op��es para o alinhamento de texto em uma c�lula da
tabela (esquerda, direita, centro, e assim por diante).
30 Part I: Getting Started with HTML and CSS on the We