Se puder, imagine um tempo antes da invenção da Internet. Os sítios Web não existiam, e os livros, impressos em papel e encadernados, eram a sua principal fonte de informação. Foi necessário um esforço considerável – e leitura – para localizar a informação exacta que procurava.
Hoje pode abrir um web browser, saltar para o seu motor de busca à sua escolha, e pesquisar longe. Qualquer pedaço de informação imaginável repousa na ponta dos seus dedos. E é provável que alguém algures tenha construído um website com a sua pesquisa exacta em mente.
Com este livro vou mostrar-lhe como construir os seus próprios websites usando as duas linguagens de computador mais dominantes – HTML e CSS.
Antes de começarmos a nossa viagem para aprender a construir sítios web com HTML e CSS, é importante compreender as diferenças entre as duas línguas, a sintaxe de cada língua, e alguma terminologia comum.
O que são HTML & CSS?
HTML, HyperText Markup Language, dá estrutura e significado ao definir esse conteúdo como, por exemplo, cabeçalhos, parágrafos, ou imagens. CSS, ou Cascading Style Sheets, é uma linguagem de apresentação criada para dar estilo à aparência do conteúdo – utilizando, por exemplo, fontes ou cores.
As duas linguagens – HTML e CSS – são independentes uma da outra e devem permanecer assim. O CSS não deve ser escrito dentro de um documento HTML e vice-versa. Como regra, HTML representará sempre o conteúdo, e CSS representará sempre a aparência desse conteúdo.
Com este entendimento da diferença entre HTML e CSS, vamos mergulhar em HTML com mais detalhe.
Entendendo Termos HTML Comuns
Embora comece a usar HTML, provavelmente encontrará novos – e muitas vezes estranhos – termos. Com o tempo, tornar-se-á cada vez mais familiarizado com todos eles, mas os três termos HTML comuns com que deve começar são elementos, tags, e atributos.
Elements
Elements are identified by the use of less-than and greater than an angle brackets, < >, around the element name. Assim, um elemento parecerá o seguinte:
1 2
<a>
Tags
O uso de parênteses de menor e maior que os ângulos em torno de um elemento cria o que é conhecido como uma etiqueta. As etiquetas ocorrem mais frequentemente em pares de etiquetas de abertura e fecho.
Uma etiqueta de abertura marca o início de um elemento. Consiste num sinal menos do que o nome de um elemento, e depois termina com um sinal maior do que; por exemplo, <div>.
Uma etiqueta de fecho marca o fim de um elemento. Consiste num sinal menos do que uma barra e depois o nome do elemento, e depois termina com um sinal maior do que; por exemplo, </div>.
O conteúdo que fica entre as etiquetas de abertura e fecho é o conteúdo desse elemento. Uma ligação de âncora, por exemplo, terá uma etiqueta de abertura de <a> e uma etiqueta de fecho de </a>. O que fica entre estas duas etiquetas será o conteúdo da ligação de âncora.
Assim, as etiquetas de âncora terão uma aparência um pouco semelhante a esta:
1 2
<a>...</a>
Attributes
Attributes são propriedades utilizadas para fornecer informação adicional sobre um elemento. Os atributos mais comuns incluem o atributo id, que identifica um elemento; o atributo class, que classifica um elemento; o atributo src, que especifica uma fonte para conteúdos incorporáveis; e o atributo href, que fornece uma referência de hiperligação a um recurso ligado.
Atributos são definidos dentro da tag de abertura, após o nome de um elemento. Geralmente os atributos incluem um nome e um valor. O formato para estes atributos consiste no nome do atributo seguido de um sinal de igual e depois de um valor do atributo citado. Por exemplo, um <a> elemento incluindo um href atributo pareceria o seguinte:
1 2
<a href="http://shayhowe.com/">Shay Howe</a>
Termos HTML comuns Demo
Ver os Termos HTML Comuns da Caneta por Shay Howe (@shayhowe) em CodePen.
O código anterior exibirá o texto “Shay Howe” na página web e levará os utilizadores a http://shayhowe.com/ ao clicar no texto “Shay Howe”. O elemento de âncora é declarado com a abertura <a> e fecho </a> tags abrangendo o texto, e o atributo de referência e valor do hiperlink são declarados com href="http://shayhowe.com" na tag de abertura.
Fig 1
Síntese da sintaxe HTML incluindo um elemento, atributo, e tag
Agora que sabe o que são elementos HTML, tags, e atributos, vamos dar uma vista de olhos à montagem da nossa primeira página web. Se alguma coisa parecer nova aqui, não se preocupe – vamos decifrá-la à medida que avançamos.
Configurando a Estrutura do Documento HTML
Documentos HTML são documentos de texto simples guardados com um .html extensão de ficheiro em vez de um .txt extensão de ficheiro. Para começar a escrever HTML, precisa primeiro de um editor de texto simples que se sinta confortável a utilizar. Infelizmente, isto não inclui o Microsoft Word ou Páginas, uma vez que estes são editores de texto ricos. Dois dos mais populares editores de texto simples para escrever HTML e CSS são Dreamweaver e Sublime Text. As alternativas gratuitas também incluem Notepad++ para Windows e TextWrangler para Mac.
A declaração do tipo de documento, ou <!DOCTYPE html>, informa os navegadores web qual a versão de HTML que está a ser utilizada e é colocada logo no início do documento HTML. Como vamos utilizar a última versão do HTML, a nossa declaração de tipo de documento é simplesmente <!DOCTYPE html>. Após a declaração do tipo de documento, o elemento <html> significa o início do documento.
Dentro do elemento <html>, o elemento <head> identifica o topo do documento, incluindo quaisquer metadados (informação de acompanhamento sobre a página). O conteúdo no interior do elemento <head> não é exibido na própria página web. Em vez disso, pode incluir o título do documento (que é exibido na barra de título na janela do navegador), links para quaisquer ficheiros externos, ou quaisquer outros metadados benéficos.
Todo o conteúdo visível dentro da página web cairá no elemento <body>. Uma decomposição de uma estrutura típica de documentos HTML parece-se com isto:
HTML Document Structure Demo
Veja a Estrutura do Documento HTML da Caneta por Shay Howe (@shayhowe) em CodePen.
O código anterior mostra o documento começando com a declaração do tipo de documento, <!DOCTYPE html>, seguido directamente pelo elemento <html>. Dentro do elemento <html> vem o elemento <head> e <body> elementos. O elemento <head> inclui a codificação de caracteres da página através do elemento <meta charset="utf-8"> tag e o título do documento através do elemento <title>. O elemento <body> inclui um cabeçalho através do elemento <h1> e um parágrafo através do elemento <p>. Porque tanto o cabeçalho como o parágrafo estão aninhados dentro do elemento <body>, são visíveis na página web.
Quando um elemento é colocado dentro de outro elemento, também conhecido como aninhado, é uma boa ideia recuar esse elemento para manter a estrutura do documento bem organizada e legível. No código anterior, tanto o <head> como o <body> elementos estavam neste – e indentados – dentro do <html> elemento. O padrão de indentação para elementos continua à medida que novos elementos são adicionados dentro do elemento <head> e <body> elementos.
Elementos de Auto-Closing Elements
No exemplo anterior, o elemento <meta> tinha apenas uma etiqueta e não incluía uma etiqueta de fecho. Não temer, isto foi intencional. Nem todos os elementos consistem em etiquetas de abertura e fecho. Alguns elementos recebem simplesmente o seu conteúdo ou comportamento de atributos dentro de uma única etiqueta. O elemento <meta> é um destes elementos. O conteúdo do anterior <meta> elemento é atribuído com a utilização do atributo e valor do conjunto de caracteres. Outros elementos comuns de fecho automático incluem
<br>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<wbr>
A estrutura aqui delineada, fazendo uso do <!DOCTYPE html> tipo de documento e <html><head>, e <body> elementos, é bastante comum. Vamos querer manter esta estrutura de documentos à mão, pois vamos usá-la frequentemente ao criar novos documentos HTML.
Code Validation
Não importa quão cuidadosos sejamos ao escrever o nosso código, iremos inevitavelmente cometer erros. Felizmente, ao escrevermos HTML e CSS, temos validadores para verificar o nosso trabalho. O W3C construiu tanto validadores HTML como CSS que irão procurar erros no código. A validação do nosso código não só ajuda a renderizá-lo correctamente em todos os browsers, mas também nos ensina as melhores práticas para escrever código.
In Practice
Como web designers e programadores front-end, temos o luxo de assistir a uma série de grandes conferências dedicadas ao nosso ofício. Vamos compor a nossa própria conferência, Styles Conference, e construir um website para ela ao longo das seguintes lições. Aqui vamos nós!
Fig 1
Os nossos primeiros passos na construção do nosso website da Conferência de Estilos
Deixemo-nos afastar um pouco do HTML, e dêmos uma vista de olhos ao CSS. Lembre-se, o HTML irá definir o conteúdo e a estrutura das nossas páginas web, enquanto o CSS irá definir o estilo visual e a aparência das nossas páginas web.
Entendendo Termos CSS Comuns
Para além dos termos HTML, existem alguns termos CSS comuns com os quais se vai querer familiarizar. Estes termos incluem selectores, propriedades, e valores. Tal como com a terminologia HTML, quanto mais trabalhar com CSS, mais estes termos se tornarão uma segunda natureza.
Selectores
As elementos são adicionados a uma página web, eles podem ser estilizados usando CSS. Um selector designa exactamente a que elemento ou elementos dentro do nosso HTML se destina e aplica estilos (tais como cor, tamanho, e posição). Os seleccionadores podem incluir uma combinação de diferentes qualificadores para seleccionar elementos únicos, tudo dependendo de quão específicos desejamos ser. Por exemplo, podemos querer seleccionar cada parágrafo de uma página, ou podemos querer seleccionar apenas um parágrafo específico de uma página.
Selectores geralmente visam um valor de atributo, tal como um id ou class valor, ou visam o tipo de elemento, tal como <h1> ou <p>.
Com CSS, os selectores são seguidos por parênteses rectos, {}, que englobam os estilos a serem aplicados ao elemento seleccionado. O selector aqui visa todos os <p> elementos.
1 2
p { ... }
Propriedades
Após a selecção de um elemento, uma propriedade determina os estilos que serão aplicados a esse elemento. Os nomes das propriedades caem depois de um selector, dentro dos parênteses curly, {}, e imediatamente antes de dois pontos, :. Há numerosas propriedades que podemos usar, tais como backgroundcolorfont-sizeheight, e width, e novas propriedades são frequentemente adicionadas. No código seguinte, estamos a definir os elementos color e font-size propriedades a aplicar a todos os elementos <p>.
1 2 3 4 5
p { color: ...; font-size: ...; }
Valores
Até agora, seleccionámos um elemento com um selector e determinámos que estilo gostaríamos de aplicar com uma propriedade. Agora podemos determinar o comportamento dessa propriedade com um valor. Os valores podem ser identificados como o texto entre os dois pontos, :, e ponto e vírgula, ;. Aqui estamos a seleccionar todos os elementos <p> e a definir o valor do color propriedade a ser orange e o valor do font-size propriedade a ser 16 pixels.
1 2 3 4 5
p { color: orange; font-size: 16px; }
Para rever, no CSS o nosso conjunto de regras começa com o selector, que é imediatamente seguido por parênteses rectos. Dentro destes parênteses encaracolados estão as declarações que consistem em pares de bens e valores. Cada declaração começa com uma propriedade, que é seguida por dois pontos, o valor da propriedade, e finalmente um ponto-e-vírgula.
É uma prática comum traçar pares de propriedades e valores dentro dos parênteses encaracolados. Tal como no HTML, estes travessões ajudam a manter o nosso código organizado e legível.
Fig 1
Sintaxe do CSS incluindo um selector, propriedades, e valores
Conhecendo alguns termos comuns e a sintaxe geral do CSS é um grande começo, mas temos mais alguns itens a aprender antes de saltarmos demasiado fundo. Especificamente, precisamos de ver de perto como funcionam os selectores dentro de CSS.
Trabalhar com Selectores
Selectores, como mencionado anteriormente, indicam quais os elementos HTML que estão a ser estilizados. É importante compreender plenamente como utilizar os selectores e como podem ser alavancados. O primeiro passo é familiarizar-se com os diferentes tipos de selectores. Vamos começar com os selectores mais comuns: selectores de tipo, classe e ID.
Selectores de tipo
Selectores de tipo visam os elementos pelo seu tipo de elemento. Por exemplo, se desejarmos visar todos os elementos de divisão, <div>, usaríamos um selector de tipo de div. O código seguinte mostra um selector de tipo para os elementos de divisão, bem como o HTML correspondente que selecciona.
CSS
1 2
div { ... }
HTML
1 2 3
<div>...</div> <div>...</div>
Selectores de classe
Selectores de classe permitem-nos seleccionar um elemento com base no valor do atributo class. Os selectores de classe são um pouco mais específicos do que os selectores de tipo, pois seleccionam um grupo particular de elementos em vez de todos os elementos de um tipo.
Selectores de classe permitem-nos aplicar os mesmos estilos a diferentes elementos ao mesmo tempo, utilizando o mesmo class valor do atributo através de múltiplos elementos.
Com CSS, as classes são denotadas por um período principal, ., seguido pelo class valor do atributo. Aqui o selector de classes seleccionará qualquer elemento contendo o class valor do atributo awesome, incluindo tanto os elementos de divisão como os de parágrafo.
Selectores de ID são ainda mais precisos do que os selectores de classe, uma vez que visam apenas um elemento único de cada vez. Tal como os selectores de classe usam um elemento class valor do atributo como selector, os selectores de ID usam um elemento id valor do atributo como selector.
Independentemente do tipo de elemento em que aparecem, id valores do atributo só podem ser usados uma vez por página. Se utilizados, devem ser reservados para elementos significativos.
Com CSS, os selectores de ID são assinalados por um sinal de hash, #, seguido pelo id valor do atributo. Aqui o selector de ID seleccionará apenas o elemento contendo o id valor do atributo shayhowe.
CSS
1 2
#shayhowe { ... }
HTML
1 2
<div>...</div>
Selectores adicionais
Selectores são extremamente potentes, e os selectores aqui delineados são os selectores mais comuns que encontraremos. Estes selectores são também apenas o início. Existem muitos mais selectores avançados e estão prontamente disponíveis. Quando se sentir confortável com estes selectores, não tenha medo de olhar para alguns dos selectores mais avançados.
Muito bem, está tudo a começar a juntar-se. Adicionamos elementos a uma página dentro do nosso HTML, e podemos então seleccionar esses elementos e aplicar-lhes estilos usando CSS. Agora vamos ligar os pontos entre o nosso HTML e CSS, e pôr estas duas linguagens a trabalhar em conjunto.
Referenciando CSS
A fim de pôr o nosso CSS a falar com o nosso HTML, precisamos de referenciar o nosso ficheiro CSS dentro do nosso HTML. A melhor prática para referenciar o nosso CSS é incluir todos os nossos estilos numa única folha de estilo externa, que é referenciada de dentro do <head> elemento do nosso documento HTML. A utilização de uma única folha de estilo externa permite-nos utilizar os mesmos estilos em todo um site e fazer rapidamente alterações em todo o site.
Outras opções para acrescentar CSS
Outras opções para referenciar CSS incluem a utilização de estilos internos e em linha. Pode deparar-se com estas opções na natureza, mas elas são geralmente desaprovadas, uma vez que tornam a actualização de sítios web complicada e complicada.
Para criar a nossa folha de estilo CSS externa, vamos querer usar novamente o nosso editor de texto de escolha para criar um novo ficheiro de texto simples com um .css extensão de ficheiro. O nosso ficheiro CSS deve ser guardado dentro da mesma pasta, ou subpasta, onde se encontra o nosso ficheiro HTML.
Com o <head> elemento do documento HTML, o <link> elemento é utilizado para definir a relação entre o ficheiro HTML e o ficheiro CSS. Como estamos a ligar ao CSS, utilizamos o atributo rel com um valor de stylesheet para especificar a sua relação. Além disso, o atributo href (ou referência hyperlink) é utilizado para identificar a localização, ou caminho, do ficheiro CSS.
Considerar o seguinte exemplo de um documento HTML <head> elemento que faz referência a uma única folha de estilo externa.
Para que o CSS possa renderizar correctamente, o caminho do href valor do atributo deve estar directamente correlacionado com o local onde o nosso ficheiro CSS é guardado. No exemplo anterior, o ficheiro main.css é armazenado no mesmo local que o ficheiro HTML, também conhecido como directório raiz.
Se o nosso ficheiro CSS estiver dentro de uma subdirectoria ou subpasta, o valor do atributo href precisa de se correlacionar em conformidade com este caminho. Por exemplo, se o nosso ficheiro main.css fosse armazenado dentro de uma subdirectoria chamada stylesheets, o href valor do atributo seria stylesheets/main.css, utilizando uma barra para a frente para indicar a deslocação para uma subdirectoria.
Neste ponto as nossas páginas começam a ganhar vida, lenta mas seguramente. Não nos aprofundámos muito no CSS, mas talvez tenha reparado que alguns elementos têm estilos padrão que não declarámos dentro do nosso CSS. É o navegador que impõe os seus próprios estilos preferidos de CSS para esses elementos. Felizmente, podemos escrever estes estilos com bastante facilidade, que é o que vamos fazer a seguir usando CSS resets.
Usando CSS Resets
Todos os navegadores têm os seus próprios estilos por defeito para diferentes elementos. A forma como o Google Chrome renderiza cabeçalhos, parágrafos, listas, etc., pode ser diferente da forma como o Internet Explorer o faz. Para assegurar a compatibilidade entre navegadores, as reinicializações CSS tornaram-se largamente utilizadas.
As reinicializações CSS tomam cada elemento HTML comum com um estilo pré-definido e fornecem um estilo unificado para todos os navegadores. Estas reinicializações envolvem geralmente a remoção de qualquer tamanho, margens, acolchoados, ou estilos adicionais e a tonificação destes valores para baixo. Porque as cascatas de CSS, de cima para baixo – mais no topo da nossa folha de estilos – o nosso reset precisa de estar no topo da nossa folha de estilos. Ao fazê-lo, assegura-se que esses estilos são lidos em primeiro lugar e que todos os diferentes navegadores web estão a trabalhar a partir de uma linha de base comum.
Há um monte de diferentes reinicializações disponíveis para utilizar, todas elas com as suas próprias forças. Uma das reinicializações mais populares é a reinicialização de Eric Meyer, que foi adaptada para incluir estilos para os novos elementos HTML5.
Se se sentir um pouco mais aventureiro, existe também o Normalize.css, criado por Nicolas Gallagher. Normalize.css centra-se não na utilização de um reset duro para todos os elementos comuns, mas sim na definição de estilos comuns para estes elementos. Requer uma compreensão mais forte do CSS, bem como consciência do que gostaria que os seus estilos fossem.
Cross-Browser Compatibility & Testing
Como mencionado anteriormente, diferentes navegadores tornam os elementos de diferentes maneiras. É importante reconhecer o valor na compatibilidade entre navegadores e nos testes. Os websites não precisam de ter exactamente o mesmo aspecto em todos os browsers, mas devem estar próximos. Quais os browsers que deseja apoiar, e até que ponto, é uma decisão que terá de tomar com base no que é melhor para o seu website.
Em suma, há um punhado de coisas a ter em conta quando escrever CSS. A boa notícia é que tudo é possível, e com um pouco de paciência vamos descobrir tudo.
Na Prática
P>Apanhar de volta onde parámos em último lugar no nosso website da conferência, vamos ver se podemos acrescentar um pouco de CSS.
Tempo para verificar o nosso trabalho e ver se o nosso HTML e CSS estão a dar-se bem. Abrir agora o nosso index.html ficheiro (ou actualizar a página se já estiver aberta) dentro de um web browser deve mostrar resultados ligeiramente diferentes dos anteriores.
Fig 1
o nosso website da Conferência de Estilos com um reset CSS
Demo & Código Fonte
Below pode ver o website da Conferência de Estilos no seu estado actual, bem como descarregar o código fonte para o sítio web no seu estado actual.
Veja o website da Conferência de Estilos ou descarregue o código fonte (ficheiro Zip)
Sumário
Até agora, tudo bem! Demos alguns grandes passos nesta lição.
P>Pense só, agora já sabe o básico de HTML e CSS. À medida que continuamos e você passa mais tempo a escrever HTML e CSS, vai ficando muito mais confortável com as duas línguas.
Para recapitular, até agora cobrimos o seguinte:
A diferença entre HTML e CSS
Conhecendo elementos HTML, tags, e atributos
Configurando a estrutura da sua primeira página web
Conhecendo os selectores de CSS, propriedades, e valores
Trabalhar com selectores CSS
Referenciando CSS no seu HTML
O valor do CSS reinicia
Agora vamos dar uma olhada mais atenta ao HTML e aprender um pouco sobre semântica.
