Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. Nenhuma parte deste livro, sem autorização prévia por escrito da editora, poderá ser reproduzida ou transmitida sejam quais forem os meios empregados: eletrônicos, mecânicos, fotográficos, gravação ou quaisquer outros. Diretor editorial Luis Matos
Coordenador editorial Bóris Fatigati
Preparação Adir de Lima
Revisão Fabiana Chiotolli
Arte Francine C. Silva Karine Barbosa
Capa Marcos Mazzei
1ª edição - 2013 Dados Internacionais de Catalogação na Publicação (CIP) Angélica Ilacqua CRB-8/7057
F439g Ferreira, Silvio Guia prático de HTML5 / Silvio Ferreira. – São Paulo: Universo dos Livros, 2013. 168 p. ISBN: 978-85-7930-376-0
1. Informática 2. HTML5 3. Webdesign I. Título 13-0165
CDD 005.75
Introdução efinições i niciais HTML são siglas de Hypertext Markup Language. A tradução em bom português é Linguagem de Marcação de Hipertexto. É uma linguagem usada para criar páginas para Web e com ela é possível criar as marcações no conteúdo de uma página. Uma página da web pode possuir itens como imagens, parágrafos, títulos, subtítulos, vídeos, tabelas, listas etc. E para criar cada um deles utilizamos elementos HTML que irão marcar e definir o tipo de item em questão. Esses elementos HTML são chamados de tags. Assim, existem tags para criar parágrafos, títulos, para definir imagens, quebra de linhas, enfim, para tudo que for feito em uma página web existe uma tag específica. Exemplos: para criar um parágrafo utiliza-se a tag
; para carregar uma imagem na página há a tag ; para criar tabelas há a tag
; para títulos existe a tag ; entre várias outras. Como é possível observar, tags são digitadas entre os sinais menor que (<) e maior que (>). Grande parte das tags precisa, quando utilizada, ser fechada. A tag de fechamento utiliza o caractere barra (/). Veja abaixo o exemplo do uso da tag
para definir um parágrafo.
Curso de HTML5 – Com Silvio Ferreira
Aqui há a tag
definindo um parágrafo, o texto (Curso de HTML5 – Com Silvio Ferreira) e o fechamento da tag com o uso de
. O fechamento da tag é necessário para definir onde termina o parágrafo. Não é toda tag que precisa ser fechada. Por exemplo: a tag é usada para definir uma quebra de linha. Ela não precisa ser fechada. Apenas define uma quebra de linha. No decorrer do livro há explicações detalhadas sobre o uso de diversas tags. Tags, atributos e valores Uma tag pode possuir atributos e valores. Vejamos como exemplo o uso da tag
que é utilizada para criar tabelas:
Nessa tag
digitamos um atributo, que é border. Com esse atributo, podemos especificar uma borda nas células da tabela. E o valor do atributo neste exemplo é 1. Valores de atributos são digitados sempre depois do sinal de igual (=). É importante saber diferenciar esses três elementos (tag, atributo e valor), pois são usados comumente ao trabalharmos com HTML, principalmente no HTML 4.01. No HTML5, muitos atributos (e consequentemente seus valores) de tags não são usados, pois foram excluídos. Isso ocorreu porque suas funções são facilmente realizadas por meio de CSS. Tais questões serão abordadas em detalhes no decorrer do livro.
Hipe Hipertexto rtexto e hipe hiperl rliinks Duas Du as palavra p alavrass muito muito comuns comuns no vocabulário de desenvolvedores de senvolvedores web, profissionais e estu es tudant dantes es do meio meio são s ão hipertexto hipertexto e hiperlinks. hiperlinks. No próprio própr io sign si gnificado ificado das siglas HTML aparece a palavra pal avra hipertexto (Hypertext Markup Language). Hipertexto Hipertexto é uma uma palavra pal avra cujo significado significado está ligado li gado à ideia i deia de um text textoo que apresent apr esentaa diversos di versos caminh caminhos os diferen di ferentes tes de leitura, cujas partes pa rtes estão es tão interconectadas. interconectadas. De forma mais mais objetiva, ele é composto de páginas que irão possuir links. Um link (ou hiperlink) é um elemento clicável que nos permite permite acessar outras outras páginas ou arquivos na web. Um Um link pode ser um texto, texto, um uma imagem imagem ou ambos.
Um novo HTML? O HTML5 é um novo HTML? Tudo irá mudar a partir da adoção dessa nova versão? Essas são apenas algum algumas das dúvidas que desenvolvedores de websites websi tes e estudantes estudantes podem ter ter ao se aventurarem nessa nova versão do HTML. O HTML5 é uma nova versão do HTML 4.01, que foi concebida para permitir que programadores possam gerar gerar códigos códi gos mais mais organizados, organizados, bem estruturados, estruturados, com a utili utilização zação das marcaçõe marcaçõess de forma forma correta e separando definitivamente a marcação do conteúdo da formatação do layout. Além de permitir permitir a construção construção de websites web sites com mais acessibi ace ssibilidad lidade. e. A partir dessa des sa nova versão, versão , ele é usado soment somentee para criar cria r as marcações e estruturar estruturar o conteúdo do documento. O HTML5 nasceu para ser usado de forma semântica. E a formatação do conteúdo, ou seja, o layout? Como serão definidos as cores dos textos, a fonte, fundos, posicionamentos dos elementos na página, uso de bordas, enfim, como será definida toda a aparência visual da página? Tudo isso passa a ser papel indispensável de CSS – Cascading Cascading Style S tyle Sheets (Folhas de Estilo Estilo em e m Cascata), e que pode ser chamada chamada somente somente por Folhas Fol has de Estilo. No HTML HTML 4.01 não existia existia obrig obri gatoriament atoriamentee essa separação. se paração. O uso de CSS era comum comum, porém, porém, o HTML ainda era usado para definir a aparência dos elementos da página. Vejamos alguns exemplos: O uso da tag para definir a cor, família de fonte e tamanho dos textos. Tag
com atributo align para alinhar parágrafos (esquerda, direita, justificado, centro). Tag
centraliza elementos variados (textos, imagens, tabelas etc.). Utilização de atributos que definem borda (border), alinhamento (align), cor de fundo (bgcolor), imagem de fundo (background), entre outros. Esses são apenas a penas alguns alguns exem exemplos plos de HTML sendo usados para definir definir a aparência, apar ência, o visual vi sual de elementos diversos. Com HTML5 isso não é mais permitido. A partir dessa versão, tags HTML são usadas para criar marcações no conteúdo conteúdo e CSS para formatar formatar e dar todo o visual da página página web. web . No HTML HTML5, 5, algum algumas tags tags que são comum comument entee usadas no no HTML HTML 4.01 foram excluídas. excluídas. Outras Outras tiveram seus significados modificados e novas tags foram criadas. Portanto, programar com HTML5 exige uma nova forma de pensar. Ao criar uma página para a eb, tudo que que for feito e construído construído nela passa pass a a ter significado. significado. A págin pá ginaa irá ir á possuir poss uir cabeçalhos, cabeçal hos, menu enus, s, artig ar tigos, os, conteúdo relacionado rela cionado e rodapé. r odapé. E cada parte pa rte dela possui novas tags tags que as identificam categoricamente no código. O código passa a ser se r mais lim li mpo e organizado. organizado. A sua interpretação interpretação também também passa a ser s er mais fácil.
Um programador, programador, ao a o analisar o código, códi go, irá ident i dentificar ificar e entender entender com mais rapidez cada parte e cada tag do código. Não é soment somentee o fator fator hum humano que que passa a ser s er beneficia beneficiado. do. Sistemas Sistemas baseados na web, que que de algum alguma forma forma irão ir ão acessar ace ssar a página web, também também irão se beneficiar beneficiar deste novo código. Sites de busca como como o Google Google (www.google.com.br ( www.google.com.br ), ), Achei (www.achei.com.br ( www.achei.com.br ), ), Alta Vista (www.altavista.com www.altavista.com), ), ent e ntre re outros, outros, encontrarão encontrarão as inf i nform ormações ações com mais mais facilidade. facilidade . Se eles precisarem preci sarem de um uma inform informação ação do cabeçalho cabeç alho ou do rodapé, por ex e xemplo, emplo, encontrarão encontrarão facilmente facilmente porque essas partes da página estarão devidament devidamentee marcadas marcadas no código. E o que que isso sign s ignifica ifica na prática? Na prática teremos sistemas sistemas de busca mais mais precisos pre cisos.. Ao fazer fazer um uma busca em um site, o resultado exibido será s erá mais coerent coer entee e relevant rele vantee em relação ao que procuramos procuramos e as inf i nform ormações ações estarão mais bem definidas. Teremos, assim, uma garantia maior de acessar sites que realmente possuem aquilo que que procuramos. procuramos. Todas as t ags do HTML5 são novas? Definitivamente não. O HTML5 usa diversas tags do HTML 4.01, entretanto, devemos estar atentos pois muitos atributos de tags não são compatíveis no HTML5. Mesmo que uma determinada tag seja compatível, seus atributos podem não ser mais usados. Mais adiante, retornaremos a este ponto ponto ao particularizar as tags compatíveis compatíveis e as incompatíveis incompatíveis com HTML HTML5. 5. O que há de novo? O HTML5 foi criado em prol de uma web mais semântica. Isso significa que teremos um código padronizado e organiz organizado. ado. Para isso is so ser possível pos sível foram criadas cria das diversas diver sas novas tags tags enquant enquantoo outras outras foram excluídas. Como Como o objetivo deste de ste tópico é citar as novidades, ovidades , vamos falar apenas das tags tags estruturais. estruturais. Há diversas divers as outras tags tags novas que não abordarem abordar emos os por ora, mas, no decorrer do curso, irem i remos os conhecêconhecêlas. A estruturação de páginas é o tópico que mais sofreu mudanças no HTML5. Há agora tags específicas especí ficas para cada parte par te de uma uma página. Essas partes podem pod em ser chamadas chamadas de seções. Como podemos observar na Fi Figura gura 1.1 1. 1, a página está dividida em diversas partes (ou seções). Cada uma delas é definida por uma nova tag. São elas: : cabeçalho de uma seção. Como vemos, cabeçalhos podem ser usados no documento
