| Conteúdo |
<br/>Comece a entender HTML<br/><br/>A linguagem da Web<br/><br/>1 A única coisa que separa você da Web é a capacidade de aprender a falar a linguagem:<br/>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.<br/><br/>A Web matou um artista<br/>Oque faz um servidor Web <br/>O que você escreve (o HTML)<br/>O que o browser cria<br/>Sua grande pausa no Café Starbuzz<br/>Crie a página Web do Starbuzz<br/>Como criar um arquivo HTML (Mac) <br/>Como criar um arquivo HTML (Windows)<br/>Enquanto isso, de volta ao Café Starbuzz<br/>Abra sua página Web em um browser<br/>Leve sua página para um test drive<br/>Outro test drive<br/>Conheça o elemento style<br/>Dê ao Starbuzz um pouco de estilo<br/>Passeando com estilo<br/>Papo na frente da lareira <br/>Ponto de Bala <br/>Soluções dos exercícios <br/><br/><br/>Va além com o hipertexto<br/><br/>Conheça o 'HT' do HTML<br/><br/>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.<br/><br/>Bar Use a Cabeça, novo e melhorado<br/>Crie um novo bar<br/>O que fizemos <br/>O que o browser faz <br/>Entenda os atributos<br/>Dificuldades técnicas<br/>Planeje seus caminhos<br/>Corrija os problemas com as figuras <br/>Solução dos exercícios<br/><br/>Construção de blocos <br/><br/>Construção de páginas Web<br/><br/>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.<br/><br/>Do diário para o site web a 20 km/h<br/>O rascunho do design <br/>Do rascunho para o esboço.<br/>Do esboço para uma pagina Web<br/>Faça um test drive da página Web do Tonico<br/>Conheça o elemento <q> <br/>Parágrafos loooooongos <br/>Adicione um <blockquote ><br/>A verdade por trás do mistério<q> e <blockquote<br/>É claro que você poderá usar o elemento <p> para criar uma lista<br/>A construção de listas no HTML em dois passos fáceis <br/>Colocar um elemento dentro de outro se chama "aninhamento <br/>Para entender os relacionamentos de aninhamento, desenhe uma figura <br/>Use o aninhamento para garantir que suas tags coincidam<br/>E daí <br/>Soluções dos exercícios<br/><br/>Conecte-se<br/><br/>Uma Viagem à Weblândia<br/><br/>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.<br/><br/>Coloque o Starbuzz (ou você mesmo) na Web<br/>Encontre uma empresa de hospedagem<br/>Como você pode obter um nome de domínio? A mudança<br/>Coloque seus arquivos na pasta raiz<br/>Todo o FTP que você pode colocar em duas páginas <br/>Devolta aos negócios<br/>Avenida Principal, UR.L <br/>Oque é o protocolo HTTP <br/>Oque é um path absoluto? <br/>Como funcionam as paginas padrão <br/>Como fazemos o link para outros Web sites<br/>Crie um link para "Conversa sobre Cafeína"<br/>Página Web "nos trinques"<br/>Faça um link com outra página<br/>Use o elemento <a> para criar um destino<br/>Como fazer um link para âncoras de destino<br/>Abra uma nova janela usando "target.. <br/>Soluções dos exercícios<br/><br/><br/>Adicione,imagem a sua pagina<br/><br/>Conheça a mídia<br/><br/>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.<br/><br/>Como o browser trabalha com imagens<br/>Como funcionam as imagens <br/>E agora, a apresentação formal: conheça o elemento <img> <br/>Sempre ofereça uma alternativa<br/>Crie um site de fã-clube extraordinário: "myPod <br/>Ei! A imagem e muito grande<br/>Corrija o HTML de "myPod"<br/>Refaça o site para utilizar miniaturas<br/>E então, como coloco links em imagens?<br/>Que formato devo utilizar <br/>Ser ou não ser transparente? Eis a questão<br/>Espere aí, qual ia cor do background da página Web?<br/>Veja só o logo com o acabamento <br/>Adicione o logo à página Web "myPod"<br/>Soluções dos exercícios<br/><br/>Padrões, conformidades e tudo o mais<br/><br/>HTML sério<br/><br/>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<br/>transformará em um profissional da Web.<br/><br/>Uma breve história do HLTML<br/>Suas paginas no podem colocar o browser em "quirks mode <br/>Adicione a definição do tipo de documento, <br/>W3C<br/>Valide o Bar Use a Cabeça<br/>Houston, temos um problema<br/>Adicione uma tag <meta> para especificar o tipo de conteúdo<br/>Faça o validador feliz com uma tag de conteúdo <meta> <br/>Funciona na terceira vez?<br/>Altere o DOCTYPE para strict <br/>Temos a validação<br/>Corrija o erro de aninhamento <br/>Mais uma chance para sermos rigorosos.<br/>HTML 4.01 rigoroso, pegue o manual<br/>Papo na frente da lareira<br/>Arqueologia do HTML<br/>Soluções dos exercícios<br/><br/>Mude para o XHTML<br/><br/>Coloque o 'X' no HTML<br/><br/>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)<br/><br/>O que é XML) <br/>O que isso tem a ver com o HTML<br/>Para quê você usaria o XHTML? <br/>A lista de afazeres do XHTML 1.0 <br/>Mude do HTML rigoroso para o XHTML 1.0<br/>Validação: ela não vale só para o HTML<br/>Papo na frente da lareira<br/>HTML ou XHTML? A escolha é sua<br/>Soluções dos exercícios<br/><br/>Conheça a CSS<br/><br/>Adicione um pouco de estilo<br/><br/>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.<br/><br/>Você não está mais no Kansas<br/>Aconteceu no «Minha Casa, Sua Casa" de Weblandia<br/>Use as CSS com o XHTML<br/>Vamos sublinhar também a mensagem de boas-vindas<br/>Nós temos a tecnologia: especifique uma segunda regra, s6 para o <hi > <br/>Crie o arquivo "bar.css.. <br/>Faça o link de "bar.html" com a folha de estilos externa<br/>Já é hora de falarmos sobre herança<br/>E se movêssemos a fonte para o alto da árvore genealógica? <br/>Ignore a herança<br/>Crie um seletor para a classe<br/>Leve as classes mais além<br/>O menor e mais rápido manual do mundo sobre como aplicar estilos<br/>Quem recebe a herança <br/>Garanta a validação das CSS do Bar<br/>Soluções dos exercícios<br/><br/>Aplique estilo com fontes e cores<br/><br/>Expanda seu vocabulário<br/><br/>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.<br/><br/>Texto e fontes vistos de 9.000 metros<br/>Afinal, o que é uma família de fontes <br/>Especifique famílias de fontes usando as CSS<br/>Faça uma limpeza no Diário do Toco<br/>Como devo lidar com o fato de que todo mundo tem fontes diferentes <br/>Sim, mas como devo especificar o tamanho das minhas fontes<br/>Vamos fazer estas mudanças no tamanho das fontes na pagina Web do Tonico<br/>Adicione estilo a suas fontes<br/>Crie um estilo para as citações do Tonico com um pouco de itálicoComo funcionam as cores da Web <br/>Como eu especifico as cores da Web? Deixe-me contar as maneiras<br/>O guia de dois minutos sobre os códigos hexadecimais<br/>Como encontrar as cores da Web<br/>De volta à pagina do Tonico<br/>Tudo o que você sempre quis saber sobre decorações de texto<br/>Remova o sublinhado<br/>Soluções dos exercícios <br/><br/>O modelo da caixa<br/><br/>Seja íntimo dos elementos<br/><br/>10 Para ter uma criação Web avançada, você precisa conhecer realmente seus<br/>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.<br/><br/>O bar recebe uma atualização<br/>Comece com algumas atualizações simples <br/>Olhe a nova altura da linha<br/>Prepare-se para algumas grandes renovações<br/>Um exame mais minucioso do modelo de caixa<br/>O que você pode fazer com caixas<br/>Crie o estilo de garantia<br/>Enchimento, bordas e margens para a garantia<br/>Adicione algum enchimento <br/>Agora vamos adicionar algumas margens<br/>Adicione uma imagem de fundo<br/>Corrija a imagem de fundo<br/>Como adicionar o enchimento apenas ao lado esquerdo <br/>Como aumentar a margem apenas do lado direito <br/>Ajuste e finalização das bordas<br/>O atributo "id”<br/>Use um "id" no bar <br/>Faça um mix nas folhas de estilo novamente<br/>Utilize múltiplas folhas de estão <br/>Soluções dos exercícios <br/><br/>Diva e spans<br/><br/>Construção avançada na Web<br/><br/>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)<br/><br/>Um exame minucioso do HTML dos elixires <br/>Vamos ver como podemos dividir uma página em seções lógicas <br/>Adicione uma borda<br/>Um test drive sobre a borda <br/>Adicione um estilo real à seção dos elixires<br/>plano do jogo <br/>Trabalhe com a largura dos elixires <br/>Adicione alguns estilos básicos aos elixires<br/>Precisamos de uma maneira de selecionar os descendentes Precisamos<br/>Alteração da cor dos títulos do elixir<br/>Corrija a altura da linha<br/>Já hora de tomar um pequeno atalho<br/>Adicione <span> em três passos faceis<br/>O elemento <a> e suas múltiplas personalidades<br/>Como é possível aplicar estilo aos elementos com base em seu estado?<br/>414 Coloque as pseudo-classes para funcionar<br/>já no é hora de falarmos sobre "cascata" <br/>A cascata<br/>Bem-vindo ao jogo "Qual é minha especificidade? Juntando tudo<br/>Soluções dos exercícios<br/><br/>Layout e posicionamento<br/> <br/>Arrume os elementos<br/><br/>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<br/><br/>Você fez o Super-Poder Cerebral <br/>Use o fluxo, Luke<br/>E os elementos em linha <br/>Como tudo funciona junto<br/>Como fazer um elemento flutuar<br/>Nos bastidores do bar<br/>O novo Starbuzz<br/>Mova a barra lateral para baixo do título<br/>Defina a largura da barra lateral e deixe-a flutuar<br/>Corrija o problema das duas colunas<br/>Defina a margem na seção principal<br/>Voltamos à correção do problema de sobreposição<br/>Lado direito apertado, lado esquerdo solto<br/>Designs líquidos e congelados<br/>Como funciona o posicionamento absoluto? <br/>Altere as CSS do Starbuzz<br/>Uma troca que pode ser feita para corrigir o rodapé<br/>Posicione o premio <br/>Como funciona o posicionamento fixo<br/>Utilize um valor negativo na propriedade "left" <br/>Torne-se relativo<br/>Para as três colunas e além<br/>Soluções dos exercícios<br/><br/>Tabelas e mais listas<br/><br/>Torne-se tabular<br/><br/>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!<br/><br/>Como criar tabelas com o XHTMI? <br/>O que o browser cria<br/>Dissecamos as tabelas<br/>Adicione uma legenda e um resumo<br/>Antes de aplicar o estilo, vamos colocar a tabela de volta na página do Tonico<br/>Vamos juntar aquelas bordas<br/>Que tal umas cores? <br/>O Tonico fez uma descoberta interessante<br/>Outra olhada na tabela do Tonico<br/>Como dizer às células para se estenderem por mais uma linha<br/>A tabela nova e melhorada<br/>Problemas no paraíso<br/>Sobreponha as CSS para os títulos aninhados da tabela<br/>Dê um polimento final ao site do Tonico<br/>Soluções dos exercícios <br/><br/>Formulários XHTML<br/><br/>Torne-se interativo<br/><br/>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ê).<br/><br/>Como funcionam os formulários<br/>Como os formulários funcionam no browser<br/>O que você escreve em XHTML<br/>O que é criado pelo browser<br/>Como funciona o elemento «form <br/>Prepare-se para construir o formulário da Máquina de Grãos<br/>Adicione o elemento <form><br/>Como funcionam os nomes do elemento <form> <br/>De volta para colocarmos aqueles elementos <input> em seu XHTML <br/>Adicione mais alguns elementos de entrada a seu formulário<br/>Adicione o elemento < select > <br/>Ofereça ao cliente as opções de grãos moídos ou inteiros<br/>Como apertar os botões de rádio<br/>Complete o formulario<br/>Adicione as caixas de verificação e a área de texto<br/>Veja o GET em ação<br/>Tabular ou não tabular? Eis a questão<br/>Coloque os elementos do formulário em uma tabela<br/>Aplique estilo ao formulário e à tabela com as CSS<br/>Soluções dos exercícios <br/><br/>Apêndice as sobras<br/><br/>Os dez melhores tópicos (que não mencionamos)<br/><br/>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.<br/>Mais seletores<br/>Frames<br/>Multimídia e Flash<br/>Ferramentas para a criação de páginas Web<br/>Scripts do lado cliente<br/>Scripts do lado servidor<br/>Deixe tudo afinado para os mecanismos de busca<br/>Um pouco mais sobre folhas de estilo para a impressão<br/>Páginas para dispositivos móveis <br/>Blogs<br/><br/><br/><br/> |
