E-book1: Estrutura de código fonte HTML & HTML5

Transcrição

1 E-book1: Estrutura de código fonte HTML & HTML5

2 Motivação! Existe um gargalo na área de tecnologia da informação. Ele tem nome e atende por formação profissional técnica. Venho observando esse gargalo a algum tempo, na verdade a 3 anos. Essa observação acompanha as experiências de formação de equipe, em projetos acadêmicos e profissionais em de 2013 a Essas foram as motivações para escrever esse ebook. Escrever um material capaz de ajudar pessoas a terem formação técnica, usando metologias de ensino e didática adequadas a teoria de bloom.

3 Introdução A área de tecnologia da informação passa por muitas mudanças ao longo do tempo. O mesmo acontece com a formação profissional técnica, que precisa acompanhar as mudanças para preparar pessoas para o mercado. Fazer marcações de formatação em hypertexto, é tarefa importante para quem para quem opta em trabalhar como front end. Não é para menos que iremos tratar de HTML e HTML5, objeto de estudo e uso pelos desenhadores de tela. Partindo do pressuposto que você não sabe nada ou sabe pouco, serei o seu guia para para os próximos da sua formação.

4 Estrutura de Código Fonte HTML e HTML5 Brasília, 26 de novembro de 2016.

5 Autor: Thiago Xavier da Silva. Treinamento: Estrutura de Código Fonte HTML e HTML5. Data: 26 de novembro de Licença: Creative Comons, deve ser citada a fonte e pode ser usada como meio didático.

6

7 Isso é um e-book ou um treinamento? R_ É um e-book de um treinamento, que faz parte do material didático, juntamente com video-aulas, fóruns, videoconferências e um banco de questões. O que é um e-book? R_ É uma abreviação do termo inglês eletronic book e significa livro em formato digital. Pode ser uma versão eletrônica de um livro que já foi impresso ou lançado apenas em formato digital. O que é um treinamento? R_ Para Goldstein (1991) Treinamento "é a aquisição sistemática de atitudes, conceitos, conhecimentos, regras ou habilidades que resulta em melhoria de desempenho no trabalho".

8 Sumário

9 Nossa visão sobre treinamento Para nós treinmaneto é um processo intencional e sistemático para estimular a aprendizagem de conhecimentos, habilidades e atitudes profissionais. É direcionado para a manutenção das competências técnicas e construção da rede de conhecimentos, para o desenvolvimento da capacidade intelectual e moral do ser humano. É um processo contínuo de identificação, descrição e quantificação de necessidades de aprendizagem, resultado esperado de um desempenho, seja de parte de uma organização ou de pessoas - quantidade, prazo, qualidade - para atingir um objetivo.

10 1. História do hipertexto Hypertexto é termo que remete a um texto ao qual se agregam conjuntos de informação em blocos de textos, palavras, imagens ou sons, cujo acesso se dá através de referências específicas, denominadas hiperlinks, ou simplesmente links. O hipertexto é um sistema que associa e relaciona documentos de texto uns aos outros. O acesso aos documentos interligados se dá através de um click sobre marcadores (tags e links) integrados nos textos, ou anexos aos textos. O sistema de Hipertextos mais conhecido é o World Wide Web (WWW), mas não é o único local que este meio de organizar a informação se apresenta. Utiliza-se um browser (navegador) serve para visualizar os documentos que contêm referências (hyperlinks ou, simplesmente, links) a outros documentos.

11 Com o aparecimento do PDF passou a ser possível produzir documentos nesse formato usando hyperlinks. Desse modo, melhora-se a navegação de documentos com muitas páginas. Estes PDFs podem integrar tipicamente um índice de temas, um índice remissivo com numerosas referências cruzadas. Desse modo, um livro digital (e-book) proporciona a mesma qualidade de navegação que um livro impresso. 2. O conceito de Vanevar Bush Vanevar Bush foi o primeiro a pensar seriamente no uso do hipertexto para resolver problemas de difusão e partilha de informações. Uma Biblia cheia de múltiplas referências internas, ou uma enciclopédia cheia de verbetes são dois exemplos clássicos de hipertexto em papel,

12 pois permitem acesso não-linear aos verbetes contidos em diferentes volumes. Outro exemplo de hipertexto tradicional são as anotações de Leonardo Da Vinci, devia à sua forma não sequencial : Hypertet Editing System Na Brown University, sob orientação de Andries van Dam, foi concebido o primeiro sistema operacional, o primeiro verdadeiro sistema digital de hipertexto. O Aspen Movie Map, foi desenvolvido por Andrew Lippam e permitia aos utilizadores uma viagem virtual através da cidade de Aspen, recorrendo ao ecrãn do computador (tela do computador). O Hypercard foi integrado em todos os Macintosh vendidos pela Apple entre 87 e 92, permitia com um

13 CD-ROM que o hipermédia chegue ao grande público, situação que atinge crescimento exponencial com advento da Internet. 4. Introdução a tags HTML Ao se deparar com uma página da Web no navegador, o que você vê, na perspectiva mais simples possível, são apenas palavras. É raro encontrar uma página da Web que contenha apenas texto puro. Mais do que meramente palavras, o que você vê e lê contém características de estilo. Páginas da Web podem conter imagens, videoclipes e músicas de fundo. Podem incluir menus do tipo dropdown, caixas de busca, linques clicáveis para produtos ou outras páginas no mesmo sítio, ou linques para páginas de outros sítios. Uma gama de tecnologias (como CSS, JavaScript, Flash, AJAX, JSON) pode ser usada para definir os elementos de uma página da Web.

14 A HTML distingue e separa o "conteúdo" (palavras, imagens, áudio, vídeo, e assim por diante) de sua "forma de apresentação" (as instruções sobre como determinado tipo de conteúdo deve ser exibido). A HTML usa um conjunto pré-definido de elementos para identificar os diversos tipos de conteúdo. Os elementos, por sua vez, contém uma ou mais tags que contém ou expressam um determinado conteúdo. Tags são envoltas por parênteses angulares e a tag de fechamento (isto é, que indica o fim do conteúdo) tem o nome antecedido por uma barra "/". Por exemplo, o elemento parágrafo consiste das tags de inicialização "" e de finalização "". estou começando a aprender HTML. O navegador usa as tags como se fossem sinalizadores que indicam o modo como deve ser exibido o conteúdo contido por elas.

15 Para adicionar ênfase a uma palavra ou frase usa-se a tag frase. estou começando a aprender HTML. Para adicionar uma imagem ("<img>") simplesmente especifica o nome do arquivo do conteúdo (uma imagem) como um atributo. <img src="smiley.jpg"> 4.1 Elementos - os "tijolos" de uma página da Web A HTML consiste de um conjunto de elementos. Um elemento define o significado semântico do seu conteúdo. Elementos incluem tudo entre duas tags de elementos que casam entre si, incluindo as próprias tags.

16 Por exemplo, o elemento " " indica um parágrafo; o elemento "" indica uma imagem. Veja a página dos Elementos HTML para uma lista completa. A maioria dos elementos podem conter outros elementos, formando uma estrutura hierárquica. Uma página da Web muito simples, mas completa. <html> <body> estou dando os meus primeiros passos em HTML. </body> </html> Como você pode ver, o elemento <html> cerca o resto do documento, e o elemento <body> cerca o conteúdo da página. Essa estrutura é frequentemente pensada como sendo uma árvore com ramos (neste caso, os elementos <body> e ) crescendo a partir de um tronco (<html>).

17 Esta estrutura hierárquica é chamada de DOM: o Modelo de Objeto de Documentos. 4.2 Tags Documentos HTML são escritos na forma de texto puro. Podem ser escritos em qualquer editor de texto que permita salvar conteúdo como texto puro, tal como Notepad, Notepad++ ou Sublime Text, muito embora a maioria dos produtores de HTML prefiram usar um editor especializado que destaque a sintaxe e mostre o DOM. Nomes de tags podem ser escritos tanto em com letras maiúsculas como minúsculas. Contudo, o W3C (o consórcio global que mantém o padrão HTML) recomenda o uso de letras minúsculas (e o XHTML exige que sejam sempre letras minúsculas). O HTML atribui significado especial à qualquer coisa que comece com o sinal de menor ("<") e termine com o sinal de maior (">").

18 Tais marcações são chamadas de tags. Certifique-se de sempre fechar cada tag, já que embora algumas sejam fechadas por padrão, outras podem produzir erros inesperados se você esquecer de finalizá-las. isso é texto dentro de um parágrafo. Alguns elementos não contém qualquer texto ou qualquer outro elemento. Estes são os elementos vazios e não precisam de tags de encerramento. <meta charset="utf-8> Além das tags, conteúdo de textos e entidades, um documento HTML deve conter uma declaração doctype na primeira linha. A declaração doctype não é uma tag HTML; é uma instrução ao navegador sobre qual versão de HTML está sendo usada para escrever a página.

19 No padrão HTML 4.01, o doctype refere-se a uma DTD (Definição de Tipo de Conteúdo), já que este padrão foi baseado na SGML. Existem três diferentes declarações doctype em HTML <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01/EN" " A SGML é o antecessor do HTML. Os primeiros hypertextos foram baseados no padrão SGML, que trouxe em sua útltima versão os links. A transição para o padrão HTML deu início aos hiperlinks, e a documentos escritos para a internet. No HTML 5, há apenas uma declaração. <!DOCUMENT html> O doctype tem uma história longa e intrincada, mas, por ora, tudo que você precisa saber é que este doctype pede ao navegador para interpretar o

20 código HTML e CSS de acordo com os padrões W3C e não fazer de conta que é código para o Internet Explorer dos anos 90. A HTML também possui um mecanismo para embutir comentários que não são exibidos quando a página é renderizada em um navegador. Isso é útil para explicar uma seção de marcação, ou deixar notas para outras pessoas que forem trabalhar na página, ou deixar lembretes para si mesmo. Comentários em HTML são delimitados por símbolos. <!-- Esse texto é um documento --!> 4.3 Um documento pequeno, porém completo Para mostrar tudo isso junto, eis um pequeno exemplo de um documento HTML. Você pode copiar este código em um editor de textos, salvá-lo

21 como meuprimeirodocumento.html e abri-lo em um navegador. Tenha certeza de salvá-lo usando a codificação de caracteres UTF-8. Como este documento não usa estilos, parecerá um bocado simples, mas saiba que é apenas um simplório começo. <!DOCUMENT html> <html> <head> <meta charset="utf-8"> <title>um pequeno documento</title> </head> <body> <h1>cabeçalho principal do meu documento</h1>  vejam! Estou escrevendo código <abbr title="linguagem de Marcação de Hipertextos"> HTML</abbr>! </body> </html>

22 O exemplo anterior mostra um pequeno texto escrito com HTML. Foi usado a estrutura de código fonte padrão, usando os elementos e tags com atributos. 5. Checando a aprendizagem Hipertexto agregam texto, imagem ou video, sendo que esses são os recursos que podem ser apresentados com html. Os links permitem obter navegação não-linear no mesmo documento e entre documentos, possibilitando a formação de um sistema de hipertextos. Os elementos de página em html permite escrever em blocos de tags, isso representa uma árvore de hierarquia que inicia na tag <html>, que é a raíz da árvore.

23 Continue para a parte 2 do treinamento e aprenda como usar os elementos de página e para comunicar decisões do programador ao navegador. Acesse nosso blog e veja todos os treinamentos que disponibilizamos.