HTML - Thiago Giovanella · 2017-02-16 · A lista de atributos incluídos e removidos acima foi...

HTML

Do Básico ao fim do MundoThiago Giovanella - http://www.tgiovanella.com.br

Informação de direitos autorais

Revisão 1.0

Este e-book foi desenvolvido com conteúdo público disponível na

internet e pode ser compartilhado livremente contanto que dê-se as

devidas referências ao seu produtor original.

2

Introdução

3

HTML - Do Básico ao Fim do Mundo

O objetivo deste e-book é apresentá-lo ao ambiente de desenvolvimento web e móvel. Para tanto, é imprescindível que você domine as linguagens de marcação que orquestram tudo isso.

Saiba, independente da linguagem de programação Cliente/Servidor que você adotar,no final das contas, tudo se transformará em HTML, CSS e Javascript. Portanto, você precisa aprender isso!

4


O conteúdo certamente não contemplará toda a imensidão das possibilidades que o HTML 5 proporciona, mas sem dúvida alguma levará você a um nível onde será possível desenvolver o próprio aprendizado, além é claro, de excelentes aplicações web e móveis e aíentão ao Fim do Mundo(Ou o mais próximo possível)!

5


A estrutura deste livro é muito simples e funcional, assim como o HTML.

● Breve Histórico do HTML e HTML 5 (Breve mesmo)● Meta tags e Layout● Textos, Parágrafos e Demarcadores● Listas e Links● Formulários● Imagens e Player multimídia

6


Ok, vamos logo ao assunto! Compreender o que é HTML, HTML 5 e porquê isso é tão importante para a sua carreira de desenvolvedor web e móvel.

7

HTML e HTML 5

8

Parte 1 Breve histórico e apresentação do HTML e

HTML 5

9

HTML

Trocando em miúdos, o HTML é uma linguagem para publicação de conteúdo multimídia (textos, vídeos, imagens, áudios e etc) na web.A sigla HTML significa Hypertext Markup Language, o que em

uma tradução livre poderia ser Lingaugem de Marcação de Hypertexto.

Nota: Apesar de não ser uma linguagem de programação, o HTML é quem suporta toda a estrutura de uma página web.

10

HTML

Hypertextos são conjuntos de elementos ligados por conexões. Estes elementos podem ser desde vídeos e áudios até mesmo arquivos de documentos ou mesmo textos.

O Hypertexto permite a comunicação dos dados, uma vez que os elementos são ligados entre si e dessa maneira, permitem a distribuição dos dados. Esta linguagem é adotada e compreendida universalmente por todos os programas navegadores e consumidores de conteúdo da web.

Se você se interessou pela história do HTML, consulte este link:https://developer.mozilla.org/pt-BR/docs/HTML/Introduction 11

HTML

Uma página web com HTML é desenvolvida lançando mão de elementos pré definidos, que descrevem características específicas para o navegador. Estes elementos, chamados de TAGs funcionam como orientações para o navegador web do que é e o que precisa ser feito com cada parte do conteúdo da página.

Nem todas as tags são exibidas ao usuário, muitas delas desenvolvem funções de estruturação e organização da página e mesmo que muitas pessoas não saibam, há muito mais coisa em uma página web do que se pode ver. E essas coisas são vitais para o funcionário da página. 12

HTML

Uma página web é dividida primeiramente entre Cabeça (Head) e Corpo (Body).

A cabeça é responsável por informações ao navegador e motores de busca, já o corpo compreende o conteúdo que será exibido ao usuário da página.

Arquivos de estilo, scripts, dados de geolocalização, idioma e direitos autorais são exemplos do que compõe o conteúdo da cabeça de uma página web

13

HTML

Tudo isso, seja Head ou Body, fica organizado dentro de uma Tag chamada de HTML (<HTML>), dessa e com os atributos das Tags que vamos aprender logo a diante, é possível configurar uma série de informações para os navegadores interpretarem a nossa página corretamente.

14

HTML 5

A migração para o HTML 5 não é algo assustador, nem tão confuso, pelo contrário, o código da página fica mais fácil de compreender, aumenta a produtividade e de quebra deixa a página mais leve e mais bem indexada pelos robôs de busca.

Um único porém aqui é que se você ainda estiver utilizando Microsoft Internet Explorer 8 ou inferir, não vai conseguir tirar vantagem dessas melhorias, portanto, não faça isso!

Vamos ver alguma coisa na prática!

15

Algumas mudanças apresentadas no HTML 5

Algumas tags deixaram de ser válidas a partir do HTML 5 pois produzem efeitos indesejáveis ou foram substituídos por equivalentes em CSS.

Além das tags alguns atributos também foram removidos e outros incluídos para contemplar principalmente a navegação nos demais dispositivos que não PCs e notebooks.

16

Atributos removidos

align como atributo da tag caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr.• alink, link, text e vlink como atributos da tag body.• background como atributo da tag body.• bgcolor como atributo da tag table, tr, td, th e body.• border como atributo da tag table e object.• cellpadding e cellspacing como atributos da tag table.• char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th,thead e tr.• clear como atributo da tag br.• compact como atributo da tag dl, menu, ol e ul.• frame como atributo da tag table.

17

Atributos removidos

• frameborder como atributo da tag iframe.• height como atributo da tag td e th.• hspace e vspace como atributos da tag img e object.• marginheight e marginwidth como atributos da tag iframe.• noshade como atributo da tag hr.• nowrap como atributo da tag td e th.• rules como atributo da tag table.• scrolling como atributo da tag iframe.• size como atributo da tag hr.• type como atributo da tag li, ol e ul.• valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr.• width como atributo da tag hr, table, td, th, col, colgroup e pre.

18

Atributos removidos

• rev e charset como atributos da tag link e a.• shape e coords como atributos da tag a.• longdesc como atributo da tag img and iframe.• target como atributo da tag link.• nohref como atributo da tag area.• profile como atributo da tag head.• version como atributo da tag html.• name como atributo da tag img (use id instead).• scheme como atributo da tag meta.• archive, classid, codebase, codetype, declare e standby como atributos datag object.• valuetype e type como atributos da tag param.• axis e abbr como atributos da tag td e th.• scope como atributo da tag td. 19

Atributos Incluídos

O atributo autofocus pode ser especificado nos elementos input (exceto quando ha atributo hidden atribuido), textarea, select e button.• A tag a passa a suportar o atributo media como a tag link.• A tag form ganha um atributo chamado novalidate. Quando aplicado o formulario pode ser enviado sem validacao de dados.• O elemento ol ganhou um atributo chamado reversed. Quando ele e aplicado os indicadores da lista sao colocados na ordem inversa, isto e, da forma descendente.• O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos de fieldset sao desativados.• O novo atributo placeholder pode ser colocado em inputs e textareas.

20

Atributos incluídos

• O elemento area agora suporta os atributos href lang e rel como os elementos a e link• O elemento base agora suporta o atributo target assim como o elemento a. O atributo target tambem nao esta mais descontinuado nos elementos a e area porque sao uteis para aplicacoes web.

21

Nota importante

A lista de atributos incluídos e removidos acima foi copiada da apostila de HTML 5 disponibilizada na internet pelo escritório Brasil da W3C.

Existem atributos e tags que foram removidas porque ferem características de acessibilidade, outras porque seu efeito é puramente visual e deve ser desenvolvido com CSS. A relação completa você consegue acessando o site do W3C.

22

HTML na Prática

23

Parte 2 Estrutura fundamental e layout.

24

Doctype

Como a nossa página web é lida de cima para baixo, assim também será o nosso aprendizado. Neste caso então, a primeira informação que precisamos oferecer em uma página web é o tipo do documento. Como os navegadores conseguem ler e exibir diferentes tipos de documentos, é fundamental que a gente informe exatamente de qual tipo de mídia se trata aquele arquivo.

25

Doctype

Em versões mais antigas do HTML (4.01, por exemplo) a gente precisava informar em qual "versão" do (X)HTML o nosso documento estava.

Este X foi "incorporado" ao HTML para informar que a linguagem fora reformulada para Linguagem de Marcação de Hypertexto Extensível (Extensible Markup Language), uma aplicação da linguagem XML.

26

Doctype

Esta linguagem já apresentava uma série de vantagens sobre a sua predecessora:

● Mais enxuta e clara;● Mais fácil de manter e processar;● Rigor da estrutura reduz ambiguidade;● Possibilitar ser interpretada por um número maior de

plataformas (smartphone, tvs, etc).

27

Doctype

Neste caso então o XHTML poderia ser, Strict, Transational ou Frameset.

● Strict: O documento apresenta somente marcadores estruturais (html) sendo livre de qualquer marcação de Css.

● Transitional: Viabilizada uma boa formatação para navegadores antigos ou desatualizados, que não aceitavam arquivos de CSS separados do HTML.

● Frameset: Permite o uso de Frames para repartir a janela dos navegadores (Isso é realmente antigo).

28

Doctype

Uma declaração de Doctype em uma página com HTML em versão inferior ao 5 poderia ficar, por exemplo da seguinte maneira:

Após a adoção do HTML 5 basta declarar:

29

a tag HTML

Após informar em sua página o tipo do documento, podemos então começar a escrever o nosso documento HTML propriamente dito, neste momento, já devemos declarar algumas daquelas informações que não serão exibidas claramente ao usuário, mas que farão muita diferença na exibição e indexação da nossa página pelos robôs de busca.

30

a tag HTML

Abrimos a tag HTML e adicionamos dois atributos, o primeiro informando o idioma principal da página e o segundo indicado a forma de leitura do texto da página.

● lang = "pt-BR" - Indica que o idioma (language) da página é Português do Brasil (A lista completa e oficial pode ser encontrada no link abaixo: http://www.w3schools.com/tags/ref_language_codes.asp

● dir = "ltr" significa que a direção da leitura é da esquerda para a direita (left to right).

31

http://www.w3schools.com/tags/ref_language_codes.asp

http://www.w3schools.com/tags/ref_language_codes.asp

Meta tags

Podemos considerar que meta-datas são informações sobre um dado específico, neste caso, as meta tags definem meta-datas sobre o documento HTML. Como estarão dentro da HEAD da página, não serão exibidas para os visitantes, mas como veremos, são fundamentais.

As meta tags mais comuns no desenvolvimento web são as que definem descrição da página, palavras chaves, autor, data da última modificação da página e etc.

Nota: Aprenda sobre Search Engine Optimization para entender como isso é vital para o sucesso da sua aplicação. 32

Meta tags

A aplicação da tag Meta é muito simples, você precisará definir mais 2 ou 3 atributos para identificar com clareza qual informação pretende deixar registrada.

os atributos podem ser:

● charset● http-equiv● content● name

33

Meta tags

Charset definem qual a codificação usada no HTML do documento. A codificação é responsável por "desenhar" os textos e números de uma página.

Idiomas que utilizam acentos e outros que não utilizam possuem codificação diferente, assim como aquelas que possuem elementos que não estão presentes em todos os idiomas, Russo, Árabe, etc.

Muito comum no Brasil, utilizar o UTF-8, padrão internacional ou o ISO-8859-1.

34

Meta tags

Neste caso, você pode optar por escrever esta meta tag das seguintes maneiras, por exemplo:

<meta charset="UTF-8"> ou <meta charset="ISO-8859-1">

Optando pelo UTF-8, em alguns casos você precisará escrever o correspondente da tabela ASCII de uma letra ascentuada ou corre o risco de tê-la impressa com efeitos desagradáveis:

A palavra Avó precisa ser escrita Avó por exemplo.

35

Meta tags

O atributo http-equiv necessariamente vem acompanhado do atributo content pois o http-equiv define qual informação estamos informando e o content informa qual o valor para a informação.

O http-equiv pode possuir os valores, por exemplo:

● content-type: que define o tipo do conteúdo● default-style: que define o estilo padrão da página● refresh: que força a página a recarregar a cada x segundos● cache-control: que define como o navegador deve tratar o cache● content-language: que ajuda os robôs de busca a indexar a página por

idioma 36

Meta tags

Exemplos do http-equiv:

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="content-language" content="pt-BR">

<meta http-equiv="content-type" content="text/html">

<meta http-equiv="refresh" content="30">

37

Meta tags

O atributo name também vem acompanhado do atributo content e define um meta dado pelo seu nome podendo ser, por exemplo:

● application-name: Define o nome da aplicação● author: Define o autor do conteúdo do site● description: Dá uma descrição resumida do conteúdo da página● generator: Descreve qual ferramenta foi usada para construir a página● keywords: define palavras chaves para o conteúdo da página● robot: dá informações sobre a indexação da página por robôs de busca

38

Meta tags

o name ainda possui um valor muito importante que é o robot. Com isso podemos definir se queremos ou não que a nossa página seja indexada pelos robôs de busca.

Por mais que isso pareça bobagem, isso é de extrema importância para a segurança de sua página de administração de conteúdo por exemplo. Ou sites e aplicações que ainda estão em período de testes e homologação.

Neste caso o atributo content desta meta pode assumir os valores (all, Index e Follow) quando queremos que a página seja indexada e (noIndex, NoFollow e None) quando queremos que a página seja ignorada.

39

Meta tags

Apesar de pouco usadas, existem outros atributos e valores para as meta tags de uma página. Elas desempenham funções específicas para uma ferramenta ou navegador e podem ser úteis em determinados momentos, apesar de não serem tão comuns.

Deem uma olhada no link abaixo para compreenderem:https://developer.mozilla.org/pt-PT/docs/Utilizando_meta_tags

40

https://developer.mozilla.org/pt-PT/docs/Utilizando_meta_tags

https://developer.mozilla.org/pt-PT/docs/Utilizando_meta_tags

Title

Uma outra informação muito importante para o nosso site é o título. Este título além de ser usado pelos buscadores também é a informação que descreve a nossa página na Aba do navegador.

Diferente das tags que vimos até o momento e mais parecida com a maioria das tags que veremos, a tag Title precisa ser aberta e fechada, mantendo o seu conteúdo dentro da "tag que abre" e da "tag que fecha".

41

Title

Para abrir a tag title, a gente utiliza a forma normal:

<title>

Porém para fechar, logo após o sinal de menor (<) a gente utiliza uma barra voltada para a direita (/), ficando da seguinte maneira:

</title>

Assim, o nosso título ficaria:

<title>HTML - Do Básico ao Fim do Mundo</title> 42

A tag LINK

A tag link, funciona um pouco diferente do que o seu nome possa sugerir. A tag que cria links para navegação como em menus, por exemplo, é a tag A; a tag LINK define arquivos de fontes externas que são usadas no documento.

O uso mais comum para esta tag é a inclusão de arquivos de folhas de estilo CSS em um documento HTML, no entanto, ainda é possível usá-la de outras maneiras, veremos.

43

A tag LINK

A tag link lança mão de um atributo especial para definir qual é a relação do arquivo externo com o documento que estamos editando. Este atributo é o rel e deve ser sempre usado corretamente.

O exemplo abaixo demonstra a inserção de um arquivo de CSS externo, que encontra-se dentro da mesma pasta que o arquivo HTML que estamos editando, observe:

<link rel="stylesheet" href="arquiv_estilo.css">

44

A tag LINK

No caso do arquivo css, devemos ainda informar mais alguns parâmetros para que o nosso código obedeça as normas e funcione corretamente.

<link rel="stylesheet" type="text/css" media="screen" href="arquivo.css">

● rel: define a relação do arquivo externo com o html● type: define o metatype do arquivo externo● media: define a mídia onde o arquivo será usado● href: determina o endereço do arquivo que deverá ser incluído

45

A tag LINK

Você pode ter arquivos de CSS definindo as configurações corretas para a página exibida no computador ou configurada para a impressão por exemplo, basta que você informe corretamente o arquivo CSS com o atributo media definido, assim você não precisará criar versão para impressão do seu conteúdo html, apenas mais um arquivo css. Isso lhe poupará muito tempo, acredite.

<link rel="stylesheet" type="text/css" media="screen" href="arquivo.css">

<link rel="stylesheet" type="text/css" media="print" href="imprimir.css">

46

A tag LINK

Você pode ainda com a tag link definir caminhos alternativos para o conteúdo da página via Atom FEED.

<link rel="alternate" type="application/atom+xml" title="feed" href="/feeds/>

Ou se for de sua necessidade, definir os arquivos com histórico de atualização de um conteúdo. Muito útil para blogs, por exemplo.

<link rel="archives" type="text/html" href="/arquivo/>

47

A tag SCRIPT

Assim como se recomenda manter os estilos CSS em arquivos separados, faz-se a mesma recomendação para os scripts, no entanto, a tag script é a tag utilizada tanto para incluir arquivos externos quanto para definir scripts javascript diretamente no arquivo html, a diferença fica por conta do atributo src que é definido quando queremos abrir um arquivo externo e suprimido quando vamos escrever o script local.

48

A tag SCRIPT

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

<script>

alert("Olá mundo!");

</script>

49

https://code.jquery.com/jquery-3.1.1.slim.min.js

LayoutsNo início do desenvolvimento e evolução da web, as páginas eram organizadas utilizando tabelas. Não existiam maneiras mais simples de organizar e separar o conteúdo das páginas, esta era uma tarefa realmente complicada de se fazer e por certo tempo existiram e se popularizaram ferramentas buscando tornar este trabalho mais simples.

Com a adoção do CSS, as páginas ganharam o conceito de "tableless" que em uma tradução livre significa "sem tabelas", dessa maneira usava-se uma tag específica para definir as áreas do conteúdo - geralmente a DIV - e fazia-se as parametrizações via CSS. Muito melhor! 50

Layouts

o conceito de tableless ainda é presente e válido, no entanto, não se usa mais somente a tag DIV para definir as áreas do conteúdo. No HTML 5 algumas outras tags foram implementadas para definir mais claramente a semântica da página, que são:

● Header: Seção do cabeçalho do site● Nav: Seção onde ficam as opções de navegação do site● Section: Demais seções do site● article: Seção com o conteúdo principal daquela página● aside: Seção lateral, geralmente com conteúdo complementar● footer: Seção do rodapé da página

51

Layout

52

Layout

A utilização correta destas tags, assim como as demais que veremos para títulos, subtítulos e links de navegação são de suma importância por questões de semântica e acessibilidade.

Mantenha em mente que o seu site precisa fazer sentido mesmo quando nenhum css esteja aplicado, dessa maneira, buscadores e leitores de telas (ferramenta assistiva utilizada por deficientes visuais para navegar na internet).

53

LayoutAté o momento, o que aprendemos nos permite fazer a estruturação básica do nosso layout, que já representa bastante informação, mas que ainda precisará de mais tags e de CSS para fazer sentido e ficar bonito para o nosso visitante.

Veremos um exemplo na próxima imagem, onde também iremos aprender a escrever comentários no nosso HTML. Comentários não são exibidos mas podem ajudar muito o desenvolvedor na hora de, principalmente, dar manutenção em um código mais antigo.

Os comentários são escritos sempre abrindo com 54

Exemplo:

55

DIV

A tag DIV já foi mencionada anteriormente e provavelmente você a encontrou na imagem do exemplo anterior. Esta tag sem dúvidas é a coringa na tarefa de desenvolver layouts e posicionar o conteúdo em uma página.

A tag DIV cria um delimitador de espaço, separando vertical e horizontalmente o conteúdo que estiver dentro dela. No exemplo que vimos acima, ela estava circulando todo o conteúdo do site, dessa maneira, no futuro, ficará mais fácil posicionar todas as áreas de uma página.O segredo da div está em trabalhar em conjunto com CSS. 56

SECTION

A tag section define uma nova seção no documento, ou seja, as áreas que compõem a página em questão.

No caso de uma página inicial de um site as seções podem ser de notícias, de links patrocinados, de fotos de divulgação e etc.

57

NAV

A tag nav representa uma seção especial da página que contém os links para outras partes do site, em outras palavras, o menu principal de navegação do site.

Claro que você pode ter mais de uma seção de navegação em seu site, basta usar a tag corretamente.

58

ARTICLE

a tag article representa a seção principal da página e também determina que aquele conteúdo pode ser redistribuído em Feeds, no caso de blogs ou páginas que contenham notícias, por exemplo.

59

ASIDE

A seção definida pela tag aside geralmente é constituída de conteúdo complementar, como promoções, anúncios publicitários, notas, etiquetas para o conteúdo e etc.

60

HEADER

A tag header comporta o conteúdo do cabeçalho do site ou da página em questão, geralmente contém inclusive o menu de navegação e a tag nav.

61

FOOTER

Como o nome sugere, o footer é a seção da página que contém o rodapé, Geralmente é o último elemento da página e contém informações finais e de apoio.

O footer pode ser usado para seções e também para a página inteira.

62

TIME

A tag time serve para demarcar parte do texto que contém um horário e/ou data.

63

HGROUP

a tag hgroup serve para agrupar títulos em um documento pois as vezes o documento contém múltiplos níveis com título, subtítulos e etc.

64

Títulos

Outro elemento muito importante para a semântica do seu código e organização do conteúdo sem dúvidas é o título da sua página. Para este fim, o HTML conta com a tag <h> (de heading).

A letra H na tag é sempre sucedida de um número que vai de 1 a 6. Este número define a importância daquele título para o conteúdo, sendo o H1 o título principal, o H2, o subtítulo e os demais para títulos de seções e etc.

65

Exemplos

66

Títulos

É importante obedecer esta ordem. Como veremos em CSS, é possível fazer com que um H6 se pareça mais importante que um H1, no entanto, devemos sempre manter em mente a semântica e aquela ideia de que a página precisa fazer sentido mesmo sem CSS, dessa maneira todos saem ganhando, você, os buscadores e os seus visitantes com deficiência visual.

67

Fim desta parte

Bem, chegamos ao fim desta parte do livro. Nas próximas páginas falaremos mais propriamente do conteúdo textual da nossa página.

Veremos como definir parágrafos, abreviações e demais recursos para que o nosso texto seja um sucesso.

Espero que esteja gostando do conteúdo.

68

Tabelas

Antes do conceito de tableless e do CSS, as tabelas eram amplamente usadas para estruturar e organizar o conteúdo das páginas. Era uma tarefa árdua, penosa e qualquer deslize ocasionaria em anomalias terríveis.

Nos dias de hoje, as tabelas são muito bem usadas para demonstrar dados tabulados, criar relatórios e etc. Por este motivo vale a pena saber como bem usá-las.

69

Tabelas

As tags relacionadas com a tarefa de se criar tabelas em um site são:

● table: Responsável por organizar e definir o que faz parte da table● thead: Define quais linhas fazem parte do cabeçalho do conteúdo● tbody: Define quais linhas fazem parte da relação do conteúdo● tfoot: Define quais linhas fazem parte do rodapé do conteúdo● th: Define que as células são cabeçalhos (table header)● tr: Adiciona uma nova linha a tabela (table row)● td: Adiciona colunas a linha da tabela

70

Tabelas

Além das tags relacionadas na página anterior, existem outras que favorecem a acessibilidade do seu site. Veremos este conteúdo em um novo material.

Por ora vamos focar em aprender como desenvolver boas tabelas para nosso conteúdo.

71

Table

A tag table como dito anteriormente, delimita o conteúdo da tabela. todas as demais tags precisam estar organizadas entre a abertura e o fechamento desta tag.

A tag table permite alguns atributos de formatação que não veremos, uma vez que a boa prática sugere que usemos o CSS.

<table>



</table>

72

TR

A tag tr adiciona uma nova linha na tabela. As tags que definem as colunas da linha precisam estar dentro da abertura e fechamento desta tag.

<table>

<tr>  </tr>

</table>

73

TD e TH

As tags td e th delimitam o conteúdo das colunas da tabela. A diferença é que a tag th é usada para colunas de cabeçalho e a td para colunas do conteúdo da tabela.

74

THEAD e TFOOT

As tags thead e tfoot definem quais linhas fazem parte do cabeçalho e do rodapé do conteúdo da tabela. Dessa maneira, independente de onde você escreva as tags, elas sempre ficarão organizadas e serão exibidas no local correto.

Por mais que isso pareça desimportante, quando você estiver desenvolvendo aplicações com linguagens de programação e seu conteúdo for dinâmico, isso pode te ajudar muito a construir a interface.

75

THEAD e TFOOT

76

COLSPAN e ROWSPAN

Você deve ter notado que todas as linhas, com exceção do rodapé possúem 3 colunas, enquanto o rodapé é composto por somente duas colunas.

para que isso fosse possível usamos um atributo na tag td chamado de colspan. Este atributo define que uma coluna estará ocupando o espaço de 2 ou mais colunas na linha. Este recurso nada mais é que o "mesclar" você deve ter conhecido nos softwares de planilhas eletrônicas como o Microsoft Excel.

77

COLSPAN e ROWSPAN

Para produzir efeito parecido, porém entre colunas da vertical, usamos o atributo rowspan.

É muito importante perceber que o número de "<td>" precisa ser definido com cuidado. No exemplo que vimos acima, quando a uma das colunas da linha mesclou-se com a coluna ao lado, esta por sua vez foi suprimida do código, ou seja, não devemos escrevê-la.

78

COLSPAN e ROWSPAN

Vai ser muito fácil perceber que há algo errado com a sua tabela pois ela vai apresentar algumas deformações.

82

Parte 3 Trabalhando com textos no HTML

83

Textos, parágrafos e demarcadores

Trabalhar com textos em HTML é muito simples, nós teremos basicamente que verificar como trabalhar com parágrafos, quebras de linha e uma tag especial para demarcação de parte do texto, a tag span.

Por último, como já vimos anteriormente, em alguns casos teremos que digitar algumas representações da tabela ASCII para conseguir incluir alguns símbolos ou resolver problemas de conversão de caracteres por conta do idioma (meta charset, lembram?).

84

P

a tag p delimita um parágrafo em um texto. Quando um texto é inserido dentro da tag p, automáticamente ele ganha um espaçamento dos demais textos da página. Este espaçamento é padrão mas pode ser alterado através de CSS.

A aplicação da tag é simples, basta delimitarmos o conteúdo do parágrafo com <p> e </p>.

<p>Um texto dentro de um parágrafo</p>

85

BR

A tag br (braking row, ou quebra de linha em português) serve para "pular" de linha, ou em outras palavras, saltar para a linha abaixo em um texto.

A tag br também é utilizado, ainda que incorretamente, para espaçar elementos não textuais em uma página.

Esta tag é uma das raras que não precisamos abrir e fechar, uma vez que ela não circula nenhum conteúdo, basta aplicá-la onde for necessário.

<br> 86

SPAN

A tag span é utilizada para delimitar partes de um texto "em linha" e é muito útil pois não cria nenhuma alteração no visual.

Imagine que você queria deixar em vermelho somente o seu nome em uma parágrafo inteiro, como faria? Utilizar a tag p iria gerar quebras e espaçamento. Compreendeu onde o span entra? Isso é muito útil, acredite!

<p>O meu nome é <span>Thiago Giovanella</span> e eu gosto de HTML</p>

87

Caracteres especiais em ASCII

Alguns caracteres que não fazem parte do teclado do seu computador podem não ser bem renderizados em sua página, caso o seu charset esteja definido para UTF-8 ou ISO-8859-1 por exemplo. Para evitarmos problemas, nós escrevemos o seu correspondente em ASCII, então, quando a página é carregada, o símbolo irá ser exibido sem anomalias.Uma outra oportunidade para se usar estes símbolos é quando queremos definir espaços entre caracteres (as s im, por exemplo).

as s im

O non-break space é o espaço em branco. 88


89


90

Tags de formatação - itálico, negrito e sublinhado

NO HTML 5 as tags responsáveis por criar efeitos visuais de negrito, itálico e sublinhado foram descontinuadas, uma vez que devemos fazer este tipo de formatação utilizando CSS.

91

Parte 4 Listas e Links

92

Listas em HTML

Listas são extremamente úteis em uma página HTML, podemos criar listas em textos, podemos enumerar e elencar características, objetos, atributos e etc, mas também podemos criar lista de links para navegação.

O objetivo desta parte do e-book é demonstrar as listas ordenadas, não ordenadas e também links para arquivos externos e para áreas dentro do mesmo documento.

93

UL - Lista não ordenada

Uma lista não ordenada é aquela lista de tópicos, demarcada onde pretendemos listar uma série de elementos que possuem relação com o tema, porém a ordem não é importante ou pelo menos não informada. É a lista mais utilizada e simples pois não possui nenhum atributo especial relacionado.

A tag da lista não ordenada é a UL de unordered list a usamos abrindo a e fechando a com os itens circundados por estas duas partes da tag.

<ul></ul>

94

OL - Listas Ordenadas

Uma lista ordenada é usada quando desejamos enumerar elementos, seguindo uma ordem de importância, procedência ou mesmo aleatória mas sem deixar de ter uma referência como necessidade.

A lista ordenada permite ainda alguns atributos:

Type: Define o tipo do marcador que pode ser 1 (padrão), A, a, I ou i.

Reverse: (true ou false) define que a lista deverá ser exibida ao contrário (9,8,7, etc).

Start: define o valor inicial da lista 95

Itens de lista - LI

Um List Item é o ítem da lista, independente se ela é ordenada ou não. A sua aplicação é bastante simples, basta inserir quantos LI precisa dentro da sua UL ou OL.

<ul>

<li>Eu sou um item de lista</li> <li>Eu sou outro item da lista</li>

</ul>

96

Links

Links são elementos clicáveis que permitem que o usuário da aplicação ou site navegue pelo conteúdo disponível. Um link é criado pela tag A. Esta tag pode fazer referência a conteúdos dentro da mesmo documento, arquivos dentro do mesmo domínio ou mesmo arquivos externos.

É possível configurar algumas informações para o funcionamento do link. Estas configurações podem ou não ser percebidas pelo usuário mas sem dúvida fará diferença para a semântica do seu site.

97

A

href: Este atributo determina qual o destino do link ao ser clicado.

Quando queremos que o link nos leve até alguma parte específica do conteúdo visível, devemos descrever o nome do elemento âncora utilizando #. Um exemplo disso são os botões de "voltar ao topo" comuns em sites grandes.

<a href='#topo'>Voltar ao topo</a>

98

A

href: Quando o conteúdo destino é um outro arquivo dentro do mesmo domínio, basta que a gente informe o endereço do arquivo a partir da página de origem do link.

<a href='outroarquivo.html'>Link 1</a>

<ha href='/pasta/pasta/outroarquivo.html'>Link 2</a>

<ha href='../outroarquivo.html'>Link 3</a>

99

A

Quando se trata de um conteúdo externo, devemos informar o endereço completo, inclusive o protocolo usado, caso contrário o navegador interpretará o endereço como sendo de um arquivo local e o seu link não funcionará.

<a href='https://www.google.com.br'>Link externo</a>

<a href='http://www.uol.com.br'>Link externo para o UOL</a>

100

http://www.google.com.br

http://www.google.com.br

A

download: Mais uma novidade do HTML 5, neste atributo definimos o endereço do arquivo que deverá ser baixado quando clicarmos no link.

hreflang: Define o idioma da página que se abrirá quando clicarmos no link.

media: Determina para que tipo de dispositivo o conteúdo a seguir é otimizado.

101

A

name: Determina o nome do link. Para que o "voltar ao topo" funciona, por exemplo, precisamos criar um link no topo da página e determinar o seu nome conforme exemplo anterior.

<a href='#' name='topo'></a>

E então para o link:

<a href='#topo'>Voltar ao topo</a>

102

rel: Define qual o tipo de relação que o arquivo especificado no link possui com a página em questão.

● alternate: Uma versão alternativa da página, em outro idioma por exemplo.● author: determina que o link especifica o autor do conteúdo (por motivos

de SEO).● bookmark: Para fins de SEO, esta relação determina que o link é um link

permanente para o conteúdo.● external: Especifica que o conteúdo que abrirá é um conteúdo externo.● help: Especifica que o link leva a uma página ou arquivo de ajuda.● licence: trata-se do arquivo contendo a licença de uso do conteúdo.● next: em um blog por exemplo, carregará a próxima página.● nofollow: robôs de busca não devem seguir.

A

103

A

Continuando …

● noreferrer: não devem gravar a referência feita ao site que abrirá.● noopener: nem gravar o nome do arquivo que deu origem a aquela entrada.● prev: trata-se de um link para a página anterior.● search: trata-se de um link para uma página de busca.● tag: é uma tag (etiqueta) para o referente documento.

target: determina se o conteúdo deverá ser aberto na mesma página ou em uma nova aba. Opções para frames não são mais recomendados (_top, _parent, etc), neste caso você pode deixar este atributo suprimido ou informar que abrirá em uma nova aba com _blank.

type: Deixa claro qual o tipo de arquivo que o link abrirá. 104

A - Exemplo

<a href='quemsoueu.html' target='_blank' rel='author'>Meu currículo</a>

<a href='ajuda.html' target='_blank' rel='help'>Estou com dúvidas</a>

<a href='foto.png' target='_blank' type='image/png'>Foto</a>

105

Parte 5 Formulários

106

Formulários

Formulários são partes fundamentais de todos os tipos de sites e aplicações web, é através de um formulário que o usuário pode realizar grande parte da sua interação com a interface, cadastrando dados, submetendo arquivos ou mesmo escolhendo entre configurações ou itens.

Para que um formulário seja bem desenvolvido, existem algumas opções de tags e pretendemos vê-las a partir de agora.

107

Formulários

Para criamos formulários podemos lançar mão dos seguintes recursos:

● Form;● Input;● Select;● Textarea;● File;● Button;

108

Form

A tag form existe para agrupar os campos de um formulário e definir a ação e a forma com que os dados contidos em cada campo dentro de sí. Apesar de ser possível submeter dados com javascript sem a utilização da tag form, este procedimento não é correto.

Outra questão importante sobre a tag form é que delimitando os campos de cada formulário é possível ter mais de um formulário dentro de uma mesma página.

109

FormExistem inúmeros atributos que determinam o funcionamento do formulário e devem ser aplicados quando necessários na tag form. São eles.

accept-charset: Determina a charset (idioma) do texto quando submetidos pelo formulário;

action: determina o endereço do arquivo que deve ser executado quando o evento de submeter os dados do formulário for acionado. Quando deixado em branco, o formulário executa a mesma página.

<form action='processa_login.php'> 110

Form

autocomplete: Inserida na versão 5 do HTML, determina se o formulário conterá autocomplete em seus campos, sim ou não.

enctype: Determina qual o tipo de codificação os dados devem receber quando submetidos via POST. Os valores podem ser (application/x-www-form-urlencoded, multipart/form-data

ou text/plain). O padrão é text/plain. Quando o seu formulário contiver um arquivo para ser enviado em anexo, é fundamental que a opção seja multipart/form-data, caso contrário seu formulário será enviado mas seu arquivo anexo não.

111

Form

method: Determina o método de envio dos dados do formulário. As opções são GET ou POST. Via GET os valores podem ser recuperados pela URL do site. Muito útil quando se quer criar uma página de busca por exemplo, permitindo que a URL da busca seja compartilhada. Via POST os valores não são recuperáveis via URL, são sensivelmente mais seguros que GET. É importante escolher com sabedoria para criar aplicações úteis e seguras ao mesmo tempo.

112

novalidate: Também inserido no HTML 5 determina que os dados dos campos contidos no formulário não passarão por validação (também feita com HTML 5).

name: Determina o nome do formulário.

target: Quando submetemos o formulário ele pode sobrescrever a aba que estamos usando ou carregar uma nova. Muito semelhante ao funcionamento dos links. Os valores podem ser:

● _blank: para abrir em uma nova aba;● _self, _parent e top: utilizandos quando os sites continham frames. Hoje

isso não é mais recomendado.

Form

113

Form - Exemplo

<form method='post' action='executa.php' enctype='multipart/form-data'>



</form>

114

INPUT

A tag INPUT é sem dúvida a tag mais dinâmica de todas as tags de formulários. Com esta tag podemos fazer pelo menos 22 campos de formulários diferentes no HTML 5.

Basicamente, o que diferencia um campo de formulário dos demais feitos com a tag INPUT é o atributo type. Em alguns casos, outros atributos ajudam a melhorar o funcionamento do campo, mas em geral basicamente precisamos definir o tipo do campo no atributo type mesmo.

115

Input

Os tipos de campos que podemos ter com o INPUT são:

● button● checkbox● color● date● datetime-local● email● file● hidden● image● month● number

● password● radio● range● reset● search● submit● tel● text● time● url● week 116

Input - button

O tipo button cria um botão simples no formulário. Este botão não possui nenhuma ação específica ou autodeclarada mas pode ser usado para os mais diferentes fins, principalmente quando associado à alguma ação com javascript.

<input type='button' value='Isto é só um botão'>

117

Input - checkbox

Checkboxs são campos de seleção que permitem mais de uma opção selecionada. Este tipo de campo é muito utilizado em pesquisas ou cadastros onde o usuário pode ter mais de uma escolha e todas devem ser consideradas. Neste caso o atributo value define o valor do item quando selecionado.

<input type='checkbox' value='1'> Escolha 1 <br><input type='checkbox' value='2'> Escolha 2 <br><input type='checkbox' value='3'> Escolha 3 <br><input type='checkbox' value='4'> Escolha 4 <br>

118

Input - Color

Adicionado no HTML 5, permite que o usuário escolha uma cor através de uma palheta de cores e então salva o seu correspondente RGB como valor do campo.

<input type='color'>

119

Input - Date, Datetime-local e Time

Outra opção adicionada com HTML 5. Permite que o usuário determine uma data e/ou um horário sem a necessidade de máscaras com javascript.

<in<input type='date'>

<in<input type='datetime-local'>

<in<input type='time'>

120

Input - Email

Outro tipo que foi inserido com o HTML 5, determina que o campo em questão receberá um e-mail e permite que o formato do e-mail seja validado em tempo de execução e sem a necessidade de javascript.

Suas características visuais são exatamente iguais ao tipo de texto comum.

<input type='email'>

121

Input - File

O tipo file cria um campo no formulário que permite ao usuário anexar arquivos de seu próprio computador.

<input type='file'>

122

Input - Hidden

O tipo hidden cria um campo de formulário invisível. Apesar de não parecer, este campo é extremamente útil, este campo permite que o programador transporte dados junto ao formulário sem a intervenção do usuário. Isso pode ser necessário quando se deseja fazer formulários para edição de algum dado gravado no banco de dados do site, por exemplo.

<input type='hidden'>

123

Input - Image

O tipo image atua como um botão de enviar do formulário, porém, permite que no lugar do visual padrão do botão seja adicionada alguma imagem.

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

124

Input - Month e Week

Outras duas opções adicionadas com o HTML 5, permitem que, de maneira semelhante aos tipos date, datetime-local e time, o usuário selecione o mês ou mesmo a semana do ano. Muito interessantes e eliminam algumas linhas de código no caso destas informações serem necessárias.

<input type='week'>

<input type='month'>

125

Input - Number

Muito semelhante ao campo do tipo texto no visual, porém ele oferece um controle para que o usuário escolha o número ao invés de digitar e também garante que nenhuma informação não numérica seja inserida no campo.

<input type='number'>

126

Input - Password

O campo de formulário do tipo password garante que os caracteres digitados dentro de sí não sejam exibidos, muito útil para digitação de senhas, daí o seu nome.

<input type='password'>

127

O campo de formulário do tipo radio funciona de maneira muito semelhante ao campo checkbox, no entanto, além do visual diferenciado (checkbox são caixinhas quadradas, enquanto radio são círculos), o tipo radio somente permite uma única opção.

Para que a página identifique quais radio fazem parte do mesmo grupo de seleção, é importante que estes tenham o mesmo valor para o atributo name.

Input - Radio

128

Input - Range

O campo do tipo range sem dúvida é uma das adições mais legais do HTML 5, pelo menos visualmente. Ele cria um elemento para que o cliente selecione um valor arrastando uma bolinha sobre uma barra, como um volume ou equalizador.

Para que este elemento funcione perfeitamente, talvez você precise adicionar mais alguns atributos. Veremos isso com detalhes mais adiante.

<input type=“range” min=“1” max=“10”>

129

Input - Search

O input do tipo search a primeira vista é exatamente igual ao campo padrão de texto, no entanto, quando o usuário digita algum termo para pesquisa, ele exige um “X” no canto direito. Este botão quando acionado limpa os tempos da pesquisa, bem simples porém muito útil também.

<input type=‘search’>

130

Input - URL e Tel

Os campos de formulário dos tipos URL e Tel também não são nada diferentes do campo padrão de texto, no entanto, por questões de semântica, o uso com a declaração correta do tipo do campo pode fazer muita diferença para o desempenho do seu site.

131

Input

accept: no caso de usar o type como 'file', define quais tipos de arquivos serão aceitos.

alt: fornece uma descrição alternativa ao campo do formulário. Questão de acessibilidade.

autocomplete: define se o campo em questão permite o recurso de autocompletar.

autofocus: determina qual campo do formulário deve receber foco no carregamento da página.

132

Input

checked: caso o type seja 'radio' ou 'checkbox' determina se o campo deve vir selecionado ou não.

dirname: especifica a direção que o texto será lido. No nosso padrão será sempre ltr de “left to right”.

disabled: define que o campo está desativado e por este motivo não pode ser manipulado. Seu valor também não é submetido quando envia-se o formulário.

form: especifica os IDs dos formulários ao qual este campo pertence. 133

Input

formaction: semelhante ao atributo action da tag form.

formenctype: semelhante ao atributo enctype da tag form, usado para nos tipos submit e image.

formmethod: semelhante ao atributo method da tag form, usado para os tipos submit e image.

formnovalidate: semelhante ao novalidate da tag form.

formtarget: semelhante ao atributo target da tag form, usado para os tipos submit e image.

134

Input

height: define a altura do campo input, porém, só funciona com campo do tipo image.

list: faz referência a uma lista de valores possíveis para um campo input e assim criar um autocomplete bem fácil.

<input list="paises" name="pais"> <datalist id="paises"> <option value="Brasil"> <option value="Argentina"> <option value="Uruguai"> <option value="Paraguai"> <option value="Chile"> </datalist>

135

Input

max: define o valor máximo para um campo range por exemplo.

maxlength: define a quantidade máxima de caracteres que o valor do campo pode receber.

min: define um valor mínimo para o campo range por exemplo.

multiple: define que o campo do tipo file poderá ter mais de um arquivo selecionado.

name: define o nome do campo. Este nome será usado pelas linguagens do lado servidor (PHP e ASP) por exemplo.

136

Input

pattern: Para fazermos validação do formulário diretamente com o HTML 5 eventualmente pode ser preciso especificar alguma expressão regular para definir as regras de validação. A expressão regular deve ser informado neste atributo.

placeholder: Aquele texto que fica preenchendo o campo do formulário e desaparece assim que o campo ganha o foco.

readonly: Diferente do disabled, neste caso o campo é somente leitura mas será enviado com o submit.

137

Input

required: define que o preenchimento do campo é obrigatório antes do envio do formulário.

size: define o tamanho (em número de caracteres) do campo do formulário.

src: nos campos do tipo image, este atributo define o endereço da imagem;

step: define o intervalo dos valores para o campo do input. Muito útil para os tipos range e number.

138

Input

value: define o valor (conteúdo) do campo do formulário. Quando um usuário preenche o campo do formulário, o valor informado fica dentro deste atributo.

width: define a largura da imagem quando o tipo do input é image.

139

Input - Exemplos

Faça um teste e note a diferença

<input type="range" min="1" max="15" step="5">

<input type="range" min="1" max="15" step="0.5">

<input type="range" min="1" max="15" step="2">

140

Input - Exemplos

<form method="post" action="teste.php" id="formulario_padrao">

<input type="email" id="email" name="email" placeholder="Seu e-mail">

<input type="password" id="password" name="password" placeholder="Sua senha">

<input type="submit" id="enviar" name="enviar" value="Enviar">

</form>

141

Textarea

O campo TEXTAREA é o campo do formulário com múltiplas linhas e colunas. Geralmente em um formulário de contato, utiliza-se o TEXTAREA para o campo da mensagem justamente por permitir mais de uma linha de respostas.

A grande diferença do textarea é que para ele, precisamos abrir e fechar a tag, conforme exemplo abaixo.

<textarea></textarea>

142

Textarea

Podemos definir características visuais para o textarea através do CSS, no entanto, ele possui alguns atributos que são importantes e devem ser considerados ao utilizar este campo de formulário.

143

Textarea

cols: define a largura do campo em número de colunas.

rows: define a altura do campo em número de linhas.

wrap: o valor padrão para este atributo é “soft” e isto significa que ao ser enviado, o formulário não acrescentará nenhuma quebra de linha ou linha nova. Na exibição, o texto digitado ocupará o espaço disponível. Atribuindo o valor “hard”, será necessário informar também o atributo “cols” e ao ser enviado, o texto, chegando na quantidade de colunas especificadas, automaticamente inserirá uma quebra de linha.

144

Textarea

Autofocus, dirname, disabled, form, name, placeholder, readonly, required, e id que vimos na tag INPUT também podem ser usados no TEXTAREA.

145

Textarea - Exemplo

<textarea cols=“20” rows=“5” id=“comentario” name= “comentario”></textarea>

146

Select

Um campo do tipo SELECT cria um menu dropdown de opções para que o usuário escolha, dessa forma o usuário terá que encontrar uma opção dentre as disponíveis não sendo possível digitar.

É bastante útil quando se deseja trazer informações de um banco de dados para facilitar a escolha do usuário e também para manter um padrão nas respostas.

147

Select

Este campo é bastante simples de ser feito, possui poucos atributos diferentes do que já vimos e utiliza da tag OPTIONS para criar a sua lista de opções.

148

Select

multiple: por padrão o select só permite a escolha de uma opção, informando este atributo, ele permitirá mais de um resultado selecionado.

size: define qual o tamanho do select para exibição, ou seja, quantos options ele mostrará. O padrão é um, mas você pode deixar o seu campo maior na vertical, mostrando mais opções.

Demais atributos como disabled, autofocus, required, id e name que vimos no INPUT também podem ser usados com SELECT.

149

Option

Quando vimos o atributo list do INPUT, aprendemos como criar uma lista de possíveis opções, nesta ocasião já usamos a tag OPTION e voltaremos a utilizar quando precisarmos incluir no nosso formulário um campo do tipo SELECT.

A tag OPTION é muito simples, possui poucos atributos nem por isso deixa de ser extremamente eficaz.

150

Option

Disabled: conforme vimos no INPUT.

Label: cria uma etiqueta curta para o valor da opção.

selected: define que dentre todas as opções, esta é a selecionada como padrão. Quando o usuário seleciona uma opção de um SELECT, este atributo passa a ser verdadeiro no OPTION em questão.

value: onde é informado o valor que será enviado quando o submit for acionado no formulário.

151

Option - Exemplos

<select name="estados" size="2" multiple>

<option value="rj">Rio de Janeiro</option>

<option value="sp">São Paulo</option>

<option value="mg" selected>Minas Gerais</option>

<option value="go">Goiás</option>

</select>

152

Parte 6 Multimídia - Áudio, vídeo e imagem

153

Multimídia - Áudio, Vídeo e Imagem

Com o HTML 5 ficou muito mais fácil inserir arquivos de áudio, vídeo ou mesmo trabalhar com imagens para diferentes dispositivos.

Neste capítulo veremos rapidamente as novidades e aprenderemos a inserir arquivos multimídia em nosso site.

Aproveite.

154

IMG

A tag para inserir imagem em um site é a tag IMG desde o início da web, no entanto, ela ganhou alguns recursos que a tornaram ainda mais legais.

A Aplicação da tag IMG é bastante simples basta um ou dois atributos para que a imagem seja exibida na página, no entanto, precisamos levar em conta questões de responsividade e de acessibilidade, por isso existem tantos outros atributos a serem usados.

155

IMG

alt: oferece um pequeno texto alternativo a imagem. Caso a imagem não possa ser exibida por algum motivo, o texto irá descrever o que a imagem continha. Muito importante para a acessibilidade, inclusive.

crossorigin: permite imagens de sites externos para serem usados como camadas;

height: define a altura da imagem. Apesar de que é melhor fazer isso com CSS, ;)

156

IMG

ismap: especifica a imagem como uma mapa de pixels para uma ação server-side. Trocando em miudos, ele vai enviar para o servidor a relação de pixels nos eixos X.Y de onde a imagem for clicada.

longdesc: Em alguns casos, o atributo alt não é suficiente para descrever a imagem, neste caso, cria-se um arquivo html com a descrição detalhada e neste atributo informa a URL da página contendo a descrição.

sizes: especifica diferentes tamanhos para a imagem para diferentes layouts da página. Ainda prefiro o css, rs. 157

IMG

src: atributo que permite informar o endereço do arquivo da imagem que queremos exibir na página.

srcset: permite informar diferentes imagens para diferentes tamanhos da página. O navegador se encarrega de fazer o restante e escolher a melhor imagem para exibir.

usemap: permite mapear as áreas da imagem e criar diferentes links dependendo da região que a imagem for clicada.

width: permite definir a largura da imagem para a exibição.158

IMG - Exemplos

<img srcset="original.jpg 800w, fotogrande.jpg 1200w, fotogigante.jpg 3000w" alt="Foto de um carro esportivo">

No exemplo acima informamos três diferentes tamanhos para a imagem e permitimos que o navegador escolha a melhor para exibir.

159

Audio

A tag AUDIO lhe permitirá adicionar arquivos de som na sua página. Se o player terá controles ou não é questão de parametrizar com os atributos necessários.

No entanto, quando for informar o arquivo de áudio, é importante entender que nem todos os navegadores aceitam todos os tipos, portanto, segue a lista oficial da W3C.

160

Audio

Navegador MP3 WAV OGG

Internet Explorer Sim Não Não

Chrome Sim Sim Sim

Firefox Sim Sim Sim

Safari Sim Sim Não

Opera Sim Sim Sim

161

Audio

autoplay: este atributo define que a música deve começar a tocar mesmo sem a intervenção do usuário.

controls: define que o player deve ter controles de volume, play, pause, etc.

loop: como o nome sugere, informa ao player que ele deve ficar repetindo o áudio assim que ele chegar ao final.

muted: define que o player deve ficar com o volume no "mudo".

162

Audio

preload: o desenvolvedor pode informar quando ele quer que o arquivo do áudio seja pré-carregado. As opções são "auto", "metadata"e none. Opções autoexplicativas.

src: assim como no caso da imagem, é onde informamos o endereço do arquivo que desejamos usar. Neste caso, porém, o atributo é informado na tag SOURCE e não na tag AUDIO.

163

Audio

<audio controls loop>

<source src="aviao.mp3" type="audio/mpeg">

<source src="aviao.ogg" type="audio/ogg">

<source src="avio.wav" type="audio/wav">

</audio>

164

Video

A tag VIDEO pouco difere da tag AUDIO, na verdade todos os atributos da tag AUDIO existem na tag VIDEO e mais algumas para deixar o nosso player ainda mais interessante.

Da mesma forma que um arquivo de áudio pode não ser aceito em algum navegador, assim também é com arquivos de vídeos, logo, segue a tabela de arquivos suportados.

165

Video

Navegador MP4 WebM OGG

Internet Explorer Sim Não Não

Chrome Sim Sim Sim

Firefox Sim(versão 21 no Windows, 30 no Linux)

Sim Sim

Safari Sim Não Não

Opera Sim (versão 25) Sim Sim

166

Video

Além dos atributos todos que vimos para players de áudio, ainda existem para os vídeos:

height: define a altura do player.

poster: define uma imagem para servir de capa para o player (semelhante ao que o Youtube faz).

width: define a largura do player.

167

Video - Exemplo

<video width="600" height="420" poster="capa.jpg" controls>

<source src="videos/filminho.mp4" type="video/mp4">

<source src="videos/filminho.ogg" type="video/ogg">

<source src="videos/filminho.webm" type="video/webm">

Seu navegador não permite exibição de vídeos

</video>

168

FIM!

169

Fim!

170

Obrigado por ter baixado este material.

Espero que você aproveita bastante, tire dúvidas e inicie a sua caminhada rumo ao fim do mundo!

qualquer dúvida entre em contato [email protected].

Não deixe de visitar o blog http://www.tgiovanella.com.br pretendo divulgar mais material por lá.

mailto:[email protected]

http://www.tgiovanella.com.br

Thiago Giovanella

Thiago Giovanella é Bacharel em Ciência da Computação, MBA em Gerenciamento de Projetos e Especialista em Redes de Computadores.

Programador PHP desde 2005, está muito feliz ao ver que cada vez mais aplicações web tem feito a diferença na estratégias das empresa.

Ah, esqueci de dizer, é vocalista da banda de Thrash Metal Motosserra Truck Clube. Procure no Youtube ;)

171

Thiago Giovanella

http://www.facebook.com/tgiovanella

http://www.twitter.com/tgiovanella


http://www.facebook.com/tgiovanellacursos

172









Informações Finais

Este material foi desenvolvido 100% sobre a plataforma do Google Drive (Google Apresentações) com imagens retiradas gratuitamente do Google Imagens.

A revisão do conteúdo foi feita integralmente no W3Schools obedecendo as mais novas exigências do padrão W3C.

Este material deve ser distribuído gratuitamente sob a pena do cramunhão te levar para o inferno se você cobrar qualquer centavo pela sua distribuição. Isso é sério, acredite!

173

HTML - Thiago Giovanella · 2017-02-16 · A lista de atributos incluídos e removidos acima foi...

Documents

Transcript of HTML - Thiago Giovanella · 2017-02-16 · A lista de atributos incluídos e removidos acima foi...