Comece a entender HTML

A linguagem da Web

1 A única coisa que separa você da Web é a capacidade de aprender a falar a linguagem:
Hyper Text Markup Language, ou HTML. Portanto, prepare-se para algumas aulas de linguagem. Depois deste capítulo, não só você entenderá alguns elementos básicos do HTML, como também será capaz de falar HTML com um pouco de estilo. Ora, no final deste livro você estará falando HTML como se tivesse nascido em Weblândia.

A Web matou um artista
Oque faz um servidor Web
O que você escreve (o HTML)
O que o browser cria
Sua grande pausa no Café Starbuzz
Crie a página Web do Starbuzz
Como criar um arquivo HTML (Mac)
Como criar um arquivo HTML (Windows)
Enquanto isso, de volta ao Café Starbuzz
Abra sua página Web em um browser
Leve sua página para um test drive
Outro test drive
Conheça o elemento style
Dê ao Starbuzz um pouco de estilo
Passeando com estilo
Papo na frente da lareira
Ponto de Bala
Soluções dos exercícios


Va além com o hipertexto

Conheça o 'HT' do HTML

2 Alguém disse "hipertexto"? O que é isso? Bem, é toda a base da Web. No Capítulo 1, examinamos o HTML e descobrimos que é uma ótima linguagem de marcação (o ML' do HTML) para a descrição da estrutura das páginas Web. Agora vamos dar uma olhada no 'HT' do HTML, o hipertexto, que nos libertará de uma única página e nos mostrará os links para outras páginas. Durante o caminho vamos encontrar um novo e poderoso elemento, o elemento <a>, e aprenderemos como o fato de ser "relativo" é uma coisa muito legal. Portanto, aperte seu cinto de segurança - você aprenderá algumas coisas sobre o hipertexto.

Bar Use a Cabeça, novo e melhorado
Crie um novo bar
O que fizemos
O que o browser faz
Entenda os atributos
Dificuldades técnicas
Planeje seus caminhos
Corrija os problemas com as figuras
Solução dos exercícios

Construção de blocos

Construção de páginas Web

3 Alguém me disse que eu criaria páginas Web neste livro. Você certamente já aprendeu bastante até aqui: tags, elementos, links, caminhos... Mas tudo isso é inútil se você não criar algumas páginas Web fantásticas com esse conhecimento. Neste capítulo, vamos começar a construção: você verá uma página Web desde sua concepção até sua planta, fará sua fundação e construção e até mesmo dará alguns toques finais. Você só precisará de seu capacete e do cinto de ferramentas, assim como estaremos adicionando novas ferramentas e oferecendo o conhecimento que daria muito orgulho ao melhor dos construtores.

Do diário para o site web a 20 km/h
O rascunho do design
Do rascunho para o esboço.
Do esboço para uma pagina Web
Faça um test drive da página Web do Tonico
Conheça o elemento <q>
Parágrafos loooooongos
Adicione um <blockquote >
A verdade por trás do mistério<q> e <blockquote
É claro que você poderá usar o elemento <p> para criar uma lista
A construção de listas no HTML em dois passos fáceis
Colocar um elemento dentro de outro se chama "aninhamento
Para entender os relacionamentos de aninhamento, desenhe uma figura
Use o aninhamento para garantir que suas tags coincidam
E daí
Soluções dos exercícios

Conecte-se

Uma Viagem à Weblândia

4 As páginas Web são o melhor prato servido na Internet. Até aqui, você criou páginas HTML que vivem apenas em seu próprio computador. Você também criou Iinks para páginas que estão apenas em seu computador. Vamos mudar tudo isso. Neste capítulo, encorajamos você a colocar essas páginas Web na Internet, onde seus amigos, fãs e clientes possam vê-Ias. Vamos revelar também os segredos sobre a vinculação a outras páginas ao fazer um crack do código h, t, t, p, :, 1, 1, w, w. w. Portanto, pegue suas coisas, nossa próxima parada é a Weblândia.

Coloque o Starbuzz (ou você mesmo) na Web
Encontre uma empresa de hospedagem
Como você pode obter um nome de domínio? A mudança
Coloque seus arquivos na pasta raiz
Todo o FTP que você pode colocar em duas páginas
Devolta aos negócios
Avenida Principal, UR.L
Oque é o protocolo HTTP
Oque é um path absoluto?
Como funcionam as paginas padrão
Como fazemos o link para outros Web sites
Crie um link para "Conversa sobre Cafeína"
Página Web "nos trinques"
Faça um link com outra página
Use o elemento <a> para criar um destino
Como fazer um link para âncoras de destino
Abra uma nova janela usando "target..
Soluções dos exercícios


Adicione,imagem a sua pagina

Conheça a mídia

5 Sorria e diga "xis". Na verdade, sorria e diga "gif", "jpg" ou "png" - essas serão suas opções quando estiver "desenvolvendo figuras" para a Web. Neste capítulo, você aprenderá a adicionar o seu primeiro tipo de mídia a suas páginas: as imagens. Tirou algumas fotos digitais que precisa disponibilizar? Explicaremos como. Mas antes de chegarmos a tudo isso, você precisa ser formalmente apresentado ao elemento <img>, não é? Por essa razão, desculpe-nos, não estávamos sendo rudes. mas o problema é que nunca vimos uma apresentação decente. Para compensá-lo, aqui está um capítulo inteiro sobre <img>. No final deste capítulo, você saberá todos os prós e contras da utilização de elementos <img> e de seus atributos. Também verá exatamente como esse pequeno elemento faz com que o browser execute um monte de trabalho extra para recuperar e exibir suas imagens.

Como o browser trabalha com imagens
Como funcionam as imagens
E agora, a apresentação formal: conheça o elemento <img>
Sempre ofereça uma alternativa
Crie um site de fã-clube extraordinário: "myPod
Ei! A imagem e muito grande
Corrija o HTML de "myPod"
Refaça o site para utilizar miniaturas
E então, como coloco links em imagens?
Que formato devo utilizar
Ser ou não ser transparente? Eis a questão
Espere aí, qual ia cor do background da página Web?
Veja só o logo com o acabamento
Adicione o logo à página Web "myPod"
Soluções dos exercícios

Padrões, conformidades e tudo o mais

HTML sério

6 O que há mais para saber sobre o HTML? Você já está no caminho de dominar o HTML. Na verdade, já é hora de seguir para as CSS e aprender como tornar toda essa marcação insípida em algo fabuloso, não é mesmo? Antes disso, precisamos garantir que o seu HTML está realmente enxuto (você sabe... abotoado, em forma. finalizado) e vamos fazer isso encarando com mais seriedade a maneira como escrevemos nosso HTML. Não nos interprete mal, você está escrevendo HTML de primeira classe, mas há algumas coisinhas que pode fazer para ajudar o browser a exibir suas páginas com precisão e garantir que pequenos erros não apareçam em sua marcação. O que há aqui para você? Páginas que são exibidas com maior uniformidade entre os browsers (e que sejam legíveis em dispositivos móveis e leitores de tela para os deficientes visuais), páginas que são carregadas com mais rapidez e páginas que com certeza funcionarão muito bem com as CSS. Prepare-se, este é o capitulo onde você se
transformará em um profissional da Web.

Uma breve história do HLTML
Suas paginas no podem colocar o browser em "quirks mode
Adicione a definição do tipo de documento,
W3C
Valide o Bar Use a Cabeça
Houston, temos um problema
Adicione uma tag <meta> para especificar o tipo de conteúdo
Faça o validador feliz com uma tag de conteúdo <meta>
Funciona na terceira vez?
Altere o DOCTYPE para strict
Temos a validação
Corrija o erro de aninhamento
Mais uma chance para sermos rigorosos.
HTML 4.01 rigoroso, pegue o manual
Papo na frente da lareira
Arqueologia do HTML
Soluções dos exercícios

Mude para o XHTML

Coloque o 'X' no HTML

7 Temos escondido um grande segredo de você. Sabemos que você pensa que comprou um livro sobre HTML, mas este, na verdade, é um livro sobre XHTML disfarçado. Na verdade, temos ensinado a você XHTML. Você deve estar pensando, mas o que afinal é XHTML? Bem, conheça o eXtensible HTML - também conhecido como XHTML - a próxima geração do HTML. É mais enxuto, tem mais recursos e mais compatibilidade com um grande número de dispositivos, além dos browsers. Neste pequeno capitulo, vamos levar você do HTML para o XHTML em três passos simples. Portanto, vire a página, você está quase lá. ..(e então estará nas CSS)

O que é XML)
O que isso tem a ver com o HTML
Para quê você usaria o XHTML?
A lista de afazeres do XHTML 1.0
Mude do HTML rigoroso para o XHTML 1.0
Validação: ela não vale só para o HTML
Papo na frente da lareira
HTML ou XHTML? A escolha é sua
Soluções dos exercícios

Conheça a CSS

Adicione um pouco de estilo

8 Alguém me disse que haveria CSS neste livro. Até aqui, você se concentrou em aprender o XHTML e em como ele pode criar a estrutura de suas páginas Web. Mas como você pode ver, a idéia do browser sobre estilos deixa muito a desejar. É claro que você poderia chamar o esquadrão da moda, mas nós não precisamos disso. Com as CSS, você controlará totalmente a apresentação de suas páginas, quase sempre sem sequer alterar o seu XHTML. Será que é assim tão fácil? Bem, você terá que aprender uma nova linguagem; afinal, a Weblândia é uma cidade bilíngüe. Depois de ler este capitulo para aprender a linguagem das CSS, você será capaz de ficar em ambos os lados da Rua Principal e entabular uma conversa.

Você não está mais no Kansas
Aconteceu no «Minha Casa, Sua Casa" de Weblandia
Use as CSS com o XHTML
Vamos sublinhar também a mensagem de boas-vindas
Nós temos a tecnologia: especifique uma segunda regra, s6 para o <hi >
Crie o arquivo "bar.css..
Faça o link de "bar.html" com a folha de estilos externa
Já é hora de falarmos sobre herança
E se movêssemos a fonte para o alto da árvore genealógica?
Ignore a herança
Crie um seletor para a classe
Leve as classes mais além
O menor e mais rápido manual do mundo sobre como aplicar estilos
Quem recebe a herança
Garanta a validação das CSS do Bar
Soluções dos exercícios

Aplique estilo com fontes e cores

Expanda seu vocabulário

9 Suas aulas de linguagem CSS estão transcorrendo bem. Você já sabe o básico das CSS e sabe como criar regras CSS para selecionar e determinar o estilo dos elementos. Agora você precisa aumentar seu vocabulário, e isso significa conhecer algumas propriedades novas e aprender o que elas podem fazer por você. Neste capítulo, vamos trabalhar com algumas das propriedades mais comuns que afetam a exibição do texto. Para fazer isso, você precisará aprender algumas coisas sobre fontes e cores. Você verá que não precisa ficar empacado nas fontes que todo mundo usa ou nos tamanhos e estilos desajeitados que o browser utiliza como padrão para os parágrafos e títulos. Também veremos que há muito mais nas cores do que podemos ver.

Texto e fontes vistos de 9.000 metros
Afinal, o que é uma família de fontes
Especifique famílias de fontes usando as CSS
Faça uma limpeza no Diário do Toco
Como devo lidar com o fato de que todo mundo tem fontes diferentes
Sim, mas como devo especificar o tamanho das minhas fontes
Vamos fazer estas mudanças no tamanho das fontes na pagina Web do Tonico
Adicione estilo a suas fontes
Crie um estilo para as citações do Tonico com um pouco de itálicoComo funcionam as cores da Web
Como eu especifico as cores da Web? Deixe-me contar as maneiras
O guia de dois minutos sobre os códigos hexadecimais
Como encontrar as cores da Web
De volta à pagina do Tonico
Tudo o que você sempre quis saber sobre decorações de texto
Remova o sublinhado
Soluções dos exercícios

O modelo da caixa

Seja íntimo dos elementos

10 Para ter uma criação Web avançada, você precisa conhecer realmente seus
materiais de construção. Neste capítulo, vamos olhar mais de perto nossos materiais de construção: os elementos do XHTML. Vamos colocar os elementos de bloco e alinhamento no microscópio e ver do que são feitos. Você verá como é possível controlar todos os aspectos da construção de um elemento com as CSS. Mas não vamos parar por aí: você também verá como pode conferir aos elementos identidades únicas. E, como se já não fosse o bastante, você descobrirá porque deve usar múltiplas folhas de estilo.

O bar recebe uma atualização
Comece com algumas atualizações simples
Olhe a nova altura da linha
Prepare-se para algumas grandes renovações
Um exame mais minucioso do modelo de caixa
O que você pode fazer com caixas
Crie o estilo de garantia
Enchimento, bordas e margens para a garantia
Adicione algum enchimento
Agora vamos adicionar algumas margens
Adicione uma imagem de fundo
Corrija a imagem de fundo
Como adicionar o enchimento apenas ao lado esquerdo
Como aumentar a margem apenas do lado direito
Ajuste e finalização das bordas
O atributo "id”
Use um "id" no bar
Faça um mix nas folhas de estilo novamente
Utilize múltiplas folhas de estão
Soluções dos exercícios

Diva e spans

Construção avançada na Web

11 Já é hora de se preparar para a construção pesada. Neste capítulo vamos apresentar dois novos elementos do XHTML, chamados <div> e <span>. Eles não são simples tocos de madeira, mas vigas de aço. Com <div> e <span>, você construirá estruturas de suporte sérias, e uma vez colocadas no lugar, você será capaz de aplicar estilos de novas e poderosas maneiras.Agora, não pudemos deixar de notar que o seu cinto de ferramentas das CSS está realmente começando a ficar cheio, portanto é hora de mostrar alguns atalhos para facilitar a especificação de todas essas propriedades. E, também temos convidados especiais neste capítulo, as pseudo-classes, que permitirão a criação de alguns seletores muito interessantes (se você está pensando que 'pseudo-classes" seria um grande nome para sua próxima banda, tire seu cavalinho da chuva, nós já passamos na sua frente)

Um exame minucioso do HTML dos elixires
Vamos ver como podemos dividir uma página em seções lógicas
Adicione uma borda
Um test drive sobre a borda
Adicione um estilo real à seção dos elixires
plano do jogo
Trabalhe com a largura dos elixires
Adicione alguns estilos básicos aos elixires
Precisamos de uma maneira de selecionar os descendentes Precisamos
Alteração da cor dos títulos do elixir
Corrija a altura da linha
Já hora de tomar um pequeno atalho
Adicione <span> em três passos faceis
O elemento <a> e suas múltiplas personalidades
Como é possível aplicar estilo aos elementos com base em seu estado?
414 Coloque as pseudo-classes para funcionar
já no é hora de falarmos sobre "cascata"
A cascata
Bem-vindo ao jogo "Qual é minha especificidade? Juntando tudo
Soluções dos exercícios

Layout e posicionamento

Arrume os elementos

12 Já é hora de ensinar aos elementos do seu XHTML alguns truques novos. Não vamos deixar que os elementos do XHTML fiquem apenas sentados; já é hora de fazê-los levantar e nos ajudar na criação de algumas páginas com Iayouts reais. Como? Bem, você já tem uma boa idéia sobre os elementos estruturais <div> e <span>, e sabe tudo sobre o funcionamento do modelo caixa, não é? Portanto, agora está na hora de usar todo esse conhecimento para criar alguns designs reais. Não, não estamos falando apenas de mais algumas cores de fonte ou de fundo, mas de designs totalmente profissionais com layouts com múltiplas colunas. Este é o capítulo onde as peças de tudo que você aprendeu se encaixam

Você fez o Super-Poder Cerebral
Use o fluxo, Luke
E os elementos em linha
Como tudo funciona junto
Como fazer um elemento flutuar
Nos bastidores do bar
O novo Starbuzz
Mova a barra lateral para baixo do título
Defina a largura da barra lateral e deixe-a flutuar
Corrija o problema das duas colunas
Defina a margem na seção principal
Voltamos à correção do problema de sobreposição
Lado direito apertado, lado esquerdo solto
Designs líquidos e congelados
Como funciona o posicionamento absoluto?
Altere as CSS do Starbuzz
Uma troca que pode ser feita para corrigir o rodapé
Posicione o premio
Como funciona o posicionamento fixo
Utilize um valor negativo na propriedade "left"
Torne-se relativo
Para as três colunas e além
Soluções dos exercícios

Tabelas e mais listas

Torne-se tabular

13 Se anda como uma mesa e fala como uma mesa... Há momentos na vida em que temos que lidar com os temidos dados tabu/ares. Seja para criar uma página que represente o inventário de sua empresa durante o ano anterior, ou para um catálogo de sua coleção de Ursinhos Carinhosos (não se preocupe, não contaremos para ninguém). Você sabe que precisa fazê-los em HTML; mas como? Bem, aqui temos uma grande oferta para você: ligue agora e receba em apenas um capítulo os segredos que permitirão que você coloque seus próprios dados dentro das tabelas do HTML. E tem mais: juntamente com cada pedido oferecemos nosso guia exclusivo de estilo para as tabelas do HTML. E, se você ligar agora, receberá inteiramente grátis nosso guia de estilo para listas do HTML. Não perca tempo, ligue agora!

Como criar tabelas com o XHTMI?
O que o browser cria
Dissecamos as tabelas
Adicione uma legenda e um resumo
Antes de aplicar o estilo, vamos colocar a tabela de volta na página do Tonico
Vamos juntar aquelas bordas
Que tal umas cores?
O Tonico fez uma descoberta interessante
Outra olhada na tabela do Tonico
Como dizer às células para se estenderem por mais uma linha
A tabela nova e melhorada
Problemas no paraíso
Sobreponha as CSS para os títulos aninhados da tabela
Dê um polimento final ao site do Tonico
Soluções dos exercícios

Formulários XHTML

Torne-se interativo

14 Até aqui toda sua comunicação na Web tem sido da seguinte maneira: da sua página para seus visitantes. Nossa, não seria legal se os seus visitantes pudessem conversar com você? É aqui que entram os formulários HTML: quando você coloca formulários em suas páginas (com alguma ajuda de um servidor Web), elas serão capazes de obter feedback dos clientes, receber uma solicitação on-line, obter o próximo movimento em um jogo on-line ou receber os votos em uma pesquisa vai para o trono ou não vai". Neste capítulo, vamos conhecer toda uma equipe de elementos do XHTML que trabalham juntos para a criação de formulários Web. Você aprenderá também um pouco sobre o que acontece por detrás dos panos no servidor de suporte aos formulários, e falaremos até sobre como manter estes formulários cheios de estilo (um tópico controverso: leia e veja por quê).

Como funcionam os formulários
Como os formulários funcionam no browser
O que você escreve em XHTML
O que é criado pelo browser
Como funciona o elemento «form
Prepare-se para construir o formulário da Máquina de Grãos
Adicione o elemento <form>
Como funcionam os nomes do elemento <form>
De volta para colocarmos aqueles elementos <input> em seu XHTML
Adicione mais alguns elementos de entrada a seu formulário
Adicione o elemento < select >
Ofereça ao cliente as opções de grãos moídos ou inteiros
Como apertar os botões de rádio
Complete o formulario
Adicione as caixas de verificação e a área de texto
Veja o GET em ação
Tabular ou não tabular? Eis a questão
Coloque os elementos do formulário em uma tabela
Aplique estilo ao formulário e à tabela com as CSS
Soluções dos exercícios

Apêndice as sobras

Os dez melhores tópicos (que não mencionamos)

15 Falamos sobre vários assuntos, e você já está terminando o livro. Vamos morrer de saudades de você, mas antes de o deixarmos ir, não seria correto mandá-lo para o mundo sem um pouco mais de preparação. Não é possível colocar tudo o que você precisa saber neste pequeno capitulo. Na verdade, originalmente nós incluímos tudo o que você precisa saber sobre XHTML e CSS (e que não tinha sido explicado nos capítulos anteriores), reduzindo o tamanho da fonte para 0,00004. Coube tudo perfeitamente, mas ninguém conseguia ler. Portanto, jogamos quase tudo fora e mantivemos as melhores partes para este capítulo.
Mais seletores
Frames
Multimídia e Flash
Ferramentas para a criação de páginas Web
Scripts do lado cliente
Scripts do lado servidor
Deixe tudo afinado para os mecanismos de busca
Um pouco mais sobre folhas de estilo para a impressão
Páginas para dispositivos móveis
Blogs