You are on page 1of 47
DI TREINAWEB | Comecando TS Entenda os conceitos fundamentais para iniciar seus estudos em HTML e comegar a criar seus proprios sites. E-BOOK GRATUITO SUMARIO INTERATIV Clique e seja redirecionado para a pagina Introdugéo, $$ 04 O que 6 HTML? — or Como surgiu? Estrutura do HTML) oor Desenvolvimento da estrutura HTML it [_“Visualizando o arquivo no navegador a ] ‘Como os navegadores lem o HTML? 16 Editores de cédigo para desenvolver em HTML ——__________ Criando um documento HTML. Como as tags funcionam? $$ w Estrutura HTML — — _ 8 Tag de ancora, ag O que 6 a tag de ancora? —_______________» Aref et Target ts Rel 22 Declaragoes da tag ancora 23 Tag ancora com link interno 25 Tag de ancora com link externa 26 Trabalhando com formularios no HTML 27 O que é? 2 Estrutura de um formulanio. a8 ee Exemplo de formulario Seméntica HTML: O que é e por que é importante 34 O que 67 — re Por que a Semantica HTML é importante para acessibilidade? 34 ‘Como a semantica afeta a indexacdo por mecanismos de busca? — 35 Como a semantica afeta a legibilidade do cédigo? ___ss Como usar a Semantica HTML corretamente? a6 Exemplo de cddigo utilizando Semantica HTML ————_____—_ 37 SUMARIO INTERATIV Clique e seja redirecionado para a pagina Acessibilidade no HTML Por que devemos nos preocupar com acessibilidade? 39 39 Como podemos ter um HTML acessivel? 40 Descrigao das imagens 40 Hierarquia de cabecalhos a Links e atalhos de navegacao a2 Estrutura de formularios 42. Idioma da pagina 43, Atributos ARIA — a4 O ponto final ou apenas 0 comeco? — 46 Conhega a TreinaWeb — ar Introdugao Vocé ja se perguntou como os sites sao criados? Ja teve interesse de vocé mesmo conseguir criar um site do zero? Se a resposta for sim, vocé esta no lugar correto! Neste ebook iremos abordar os principais conceitos da linguagem HTML, esta que é a base de toda web. Certamente, ao final, vocé tera um entendimento bem legal dessa linguagem para iniciar seus estudos, afinal, o HTML é uma das bases imprescindiveis para quem quer se tornar um desenvolvedor web. Se vocé quer apenas entender melhor como funciona a web, como os sites sao criados e estruturados, este ebook também é uma boa pedida para que vocé possa compreender melhor. Vamos a e boa leitura! VOLTAR RO SUMARIO TAlrreiawes— O que 6 o HTML? o & O primeiro passo é entender o que é o HTML. O HTML (HyperText Markup Language), em portugués, Linguagem de Marcacao de Hipertexto, nada mais é do que um componente basico e principal para o desenvolvimento de uma pagina. Em outras palavras, uma linguagem de marcagao é um conjunto de cédigos que nds aplicamos em um documento, para que no mesmo seja possivel definir o formato, maneiras de exibigdes e alguns padrées. Essas marcagées, so conhecidas também como tags. Para ficar mais compreensivel, irei mostrar um breve exemplo de uma marcagao muito utilizada em um documento HTML. VOLTAR RO SUMARIO TAlrreiawes— Ce Cn aR Para que a gente consiga adicionar um titulo em um documento, e esse mesmo titulo seja reconhecido como tal para os navegadores, basta utilizarmos a tag h1. Sendo assim, iremos obter o nosso h1, 0 titulo prin- cipal do texto ou documento. Uma de suas caracteristicas mais importantes, é permitir criar links, de- nominados como HyperLink, onde podemos ter acesso ao clicar. Mas como nds fazemos para realizar esse codigo? Bom, é bem simples, basta utilizarmos a tag de ancora, como veremos mais a frente neste e-book, sendo essa tag seguida de um “href”, que seria a referén- cia/link do site que queremos adicionar. Observe o exemplo a seguir: Eon Quando clicarmos na frase “Clique aqui para acessar o site da TreinaWeb”, seremos direcionados automaticamente para o site da TreinaWeb. Contudo, podemos dizer que, é através do HTML onde iremos criar o “esqueleto” da nossa pagina. Através dele que nds con- seguimos adicionar links, imagens, textos, videos, entre outros elemen- tos, onde estes estarao trabalhando em conjunto e que futuramente poderemos estiliza-los utilizando outras ferramentas que trabalham em conjunto com o HTML. Agora que vimos um overview rapidamente do HTML, vamos nos apro- fundar em cada um de seus pontos mais importantes e necessarios de vocé conhecer. \VOLTAR AO SUMARIO TAlrreiawes— Como surgiu? OHTML foi criado na década de 90 por Timothy John Berners-Lee, um britanico com formagao em fisica e ciéncia da computagao. Inicialmente, sua principal ideia era facilitar o compartilhamento de documentos e pesquisas para instituigdes préxi- mas. Mas, com o decorrer dos anos e 0 avanco da tecnologia, os desenvol- vedores passaram a observar uma necessidade de criar atualizagdes para o mesmo, a fim de melhorar a sua funcao, chegando no que pos- suimos hoje, HTMLS, sendo “5” a sua atual versao. Estrutura do HTML Assim como as linguagens de programagao, o HTML também possui uma estrutura que deve ser seguida para podermos desenvolver o nosso site. Essa estrutura é composta por tags, onde cada uma delas contém o seu sentido e sao indispensaveis. Entao, vamos entender o passo a passo de como deve ser montada essa estrutura VOLTAR RO SUMARIO TAlrreiawes— Primeiramente, vamos abrir nosso Visual Studio Code e na aba “File”, iremos clicar em “Open Folder..." File | Edit Selection View Go Run Terminal Help Daal y (or New File... eee ued a Det) fours rien Ou crrto re coun) Ao clicarmos em Open Folder, ira abrir o Explorador de Arquivos, iremos criar uma pasta e definir um nome para ela: Leena BRARED bate Agora que ja conseguimos definir o nome da nossa pasta como “Es- trutura HTML”, vamos clicar em “Selecionar Pasta”. Apos isso, 0 Visual Studio Code ira abrir com a pasta selecionada: VOLTAR RO SUMARIO TAlrreiawes— Por fim, vamos criar 0 arquivo htm: a Quando clicamos nessa “folha” com um sinal de +, abrimos um espago para definir 0 tipo de arquivo que queremos: ren \VOLTAR AO SUMARIO TAlrreiawes— Nesse espaco podemos colocar 0 nome que acharmos melhor, mas, por padrao, definimos como index. Observe que apos a gente digitar index, devemos colocar .html, dessa forma o Visual Studio Code ira en- tender que o nosso arquivo é HTML. errs Bom, agora que ja entendemos e definimos nosso arquivo html, de fato, vamos partir para o desenvolvimento da estrutura. \VOLTAR AO SUMARIO TAlrreiawes— © Desenvolvimento da estrutura HTML Iniciamente, devemos dizer qual tipo de documento queremos utilizar, nesse caso, HTML. Para isso, basta digitarmos: a Em seguida, definimos em qual idioma o navegador ira ler nossa pagina: Selena aes Seed Observe que a tag html foi aberta e nao foi fechada, pois so faremos isso no final do documento. Logo apos definir 0 idioma, adicionamos a tag head, que nada mais é do que o cabecalho do documento. Ele é composto por uma tag meta e um title. Veja a seguir: A funcao da meta charset="UTF-8", falando de uma maneira bem sucin- ta, 6 fazer com que os navegadores saibam como renderizar e apresen- tar os textos com caracteres especiais incluidos no documento. Em seguida, adicionamos o elemento title e fechamos a tag head. \VOLTAR AO SUMARIO TAlrreiawes— * Errata Sone a) ITF-8"> Breau Cnet Pie nada mais é do que 0 titulo que a pagina tera. Apos fechar a tag head, chegamos na ultima tag do HTML, sendo ela, ° See aa aS Sai a) Atag € 0 corpo do HTML, nele nds colocamos todo o conteudo desejado. Exemplo: Errol aaiaS Sl nena: aie Se ut 2 \VOLTAR AO SUMARIO TAlrreiawes— Podemos adicionar um paragrafo através da tag p, o mesmo sera apre- sentado no navegador. Por fim, basta fecharmos a tag html. root tnt DEN: Cen See ee at eae iy \VOLTAR AO SUMARIO TAlrreiawes— Visualizando o arquivo no navegador Para que a gente consiga visualizar o documento no navegador, deve- mos seguir os seguintes passos. Primeiro, iremos abrir o Explorador de Arquivos, para isso, vamos clicar no Iniciar do Windows, que fica localizado no canto inferior esquerdo da tela \VOLTAR AO SUMARIO TAlrreiawes— “ Ao abrir, vamos pesquisar 0 nome da pasta que definimos anterior- mente: ® += | Explorador de Arquivos FLEE 0 comparinar exe © <> Rees rfpido ene CN om ue aust Fina O navegador que estou utilizando é o Opera, mas isso nao faz diferenga nenhuma, basta a gente clicar nesse arquivo, que ira abrir o navegador com o nosso documento, dessa forma: Oli Mundo! Eve ¢ ome pin dctmento HTML que deseol arn de Escola online pare desenvolvere, Tiina E muito importante observar que so iré mostrar 0 que eu escrevi dentro da tag a, no caso, TreinaWeb, o link que ira direcionar o usuario nao aparece. VOLTAR RO SUMARIO TAlrreiawes— 6 Como os navegadores leem o HTML? Para conseguirmos entender essa questao de uma maneira mais breve e objetiva, basta sabermos que cada navegador possui um motor de analise e renderizagao de HTML. Sua fungao é analisar todo o documento, tag por tag, imagem por imagem, entre outros elementos contidos em nosso documento e, ren- derizar, ou seja, exibir os contetidos solicitados na tela do navegador. Editores de cédigo para desenvolver em HTML Editores de cddigo desempenham um papel essencial na criagao de cédigo HTML. Eles sao ferramentas que permitem escrever e editar 0 cddigo HTML de forma mais eficiente, com recursos como realce de sintaxe, sugestées automaticas e verificagao de erros. Editores de cédigo tornam o processo de escrever codigo HTML mais facil, mesmo. que vocé seja um iniciante. Existem varios editores de cdédigo populares amplamente utilizados para escrever HTML, alguns exemplos séo o Sublime Text, Visual Studio Code, Atom, Notepad++ e o Brackets. A escolha do editor de cédigo depende das preferéncias pessoais de cada desenvolvedor. VOLTAR RO SUMARIO TAlrreiawes— Criando um documento HTML Agora que sabemos o que é HTML e onde podemos comegar a escre- ver nossos cédigos, vamos ver sobre as tags e como podemos estru- turar o HTML e adicionar contetido na pagina. Como as tags funcionam? As tags sao elementos fundamentais na linguagem HTML, elas sao escritas entre os simbolos < >. Essas tags sdo usadas para marcar e identificar diferentes elementos em um documento HTML. Como, por exemplo, titulos, paragrafos, imagens e links. Todo elemento escrito no HTML precisa estar dentro de uma tag. Aqui estao alguns exemplos: Peer ncn ee en) Pee ri) \VOLTAR AO SUMARIO TAlrreiawes— 7 Estrutura HTML Para entender melhor o HTML, vamos criar um exemplo de estrutura basica de um documento HTML. Este codigo representa a estrutura basica de um documento HTML. Comegamos com a declaragao DOCTYPE. Ela informa ao navegador que estamos usando a versao mais recente do HTML, chamada HTMLS. Dentro da tag html, temos duas secoes principais: head e body. A secao head é usada para fornecer informagdes de configuragao do documento. Como, por exemplo, o titulo da pagina, a codificagao de caracteres, entre outras configuragées. Em seguida, temos a seco body. Nela, adicionamos todo o conteUdo visivel da pagina. E dentro dessa segao que vocé adiciona elementos como textos, imagens, links e outros. \VOLTAR AO SUMARIO TAlrreiawes— ® Essa estrutura basica é 0 ponto de partida para criar uma pagina HTML. Contudo, a medida que vocé aprende mais sobre HTML, podera adicionar mais elementos e atributos para personalizar sua pagina e criar interagdes mais avangadas. VOLTAR RO SUMARIO TAlrreiawes— Tag de ancora Tendo em vista que inicialmente a principal ideia quando foi criado o HTML era facilitar 0 compartilhamento de documentos, mas, como consequéncia do avanco da programacao, possuimos uma ferramenta que vai além do que podemos imaginar. Ampliando a ideia de compartilhamento de documentos, atualmente, temos uma ferramenta que consegue vincular um link externo, por exemplo, dentro do nosso HTML. O que é a tag de ancora? A tag , conhecida como tag de ancora, é responsavel por vincular os demais documentos que o nosso HTML possui, links internos e externos. Para conseguirmos declarar essa tag, devemos incluir o atributo href e uma frase ou palavra dentro da tag . Sea ene gel A palavra TreinaWeb ira “esconder" o link, quando clicado, sera dire- cionado para o site da TreinaWeb. O que 6a tag de ancora? \VOLTAR AO SUMARIO TAlrreiawes— 20 Além de href, a tag possui alguns outros atributos, e cada um deles tem o seu papel especifico. Esses atributos sao: target e rel Href Em primeiro lugar, temos o href (hypertext reference), em portugués, referéncia para hipertexto, que nada mais é do que a tag onde coloca- mos a URL do site que queremos vincular ao nosso HTML. E necessario adicionarmos a URL por completo, isso inclui o protocolo https. Ao incluirmos a URL do site desejado, basta colocarmos uma palavra ou frase entre o fechamento e abertura da tag . Quando clicarmos nessa palavra/frase, seremos direcionados ao site vinculado. E possivel também utilizarmos a tag apenas para voltar ao topo da nossa pagina, para isso, inserimos uma cerquilha. Ficando dessa forma: aCe Target Logo apés, temos 0 atributo target. Utilizamos ele para especificar onde iremos visualizar o link apds clicarmos, seja ele interno ou externo. Para isso, vamos atribuir os seguintes valores para que o link seja aberto em uma nova aba: \VOLTAR AO SUMARIO TAlrreiawes— a Mas, caso queira que o link seja aberto na mesma aba, sendo esse seu comportamento padrao, basta declarar: Por fim, temos 0 atributo rel (relationship), em portugués, relacao. E muito importante que saibamos que o atributo rel contém alguns valores, sendo eles distintos uns dos outros. Iremos abordar os valores de nofollow, noopener e noreferrer, que esta ligado diretamente com o noopener. A forma correta para declararmos rel com o valor de nofollow é: Scents of TreinaWel Portanto, quando fazemos isso, estamos basicamente falando para o Google nao dar importancia para o link que estamos referenciando, ou seja, ele ira ler o nosso link de ancora e apresentar ao usuario, porém o mesmo nao sera ranqueado. Em outras palavras, sua principal finali- dade é evitar com que pessoas paguem desenvolvedores de sites para aumentarem a visualizagao dos seus links (ranqueamento). Isso é feito quando declaramos a tag de ancora sem 0 atributo rel com o valor de nofollow. O JavaScript possui uma caracteristica que permite que uma nova \VOLTAR AO SUMARIO TAlrreiawes— pagina obtenha total controle da aba em que foi aberta através da referéncia da tag . Portanto, tendo esse controle, é possivel abrir e acessar 0 site original, e assim, obter informagées sigilosas. Sendo assim, para ser possivel bloquear essa aplicagao, declaramos o atributo rel com dois valores, noopener, que ira impedir que esse recur- so do JavaScript seja utilizado. Ja o valor noreferrer, nao permite que essa transmissao de informagées para a nova pagina seja feita. Declaracgées da tag ancora Para declararmos com os atributos target e rel, fazemos assim: Sa nee gars Tey Da mesma forma, aplicamos em o atributo target com o valor de _Self e rel com valor de nofollow: See ane gages ee eee Devemos lembrar que, o valor _self faz com que o nosso link seja aberto na mesma aba de navegacao. No navegador, vamos visualizar dessa forma: \VOLTAR AO SUMARIO TAlrreiawes— Coa TreinaWeb Sendo assim, quando clicarmos, teremos esse resultado: Escola online para desenvolvedores Esse é 0 comportamento do valor _blank quando aplicamos no atributo target, abrindo o link em uma nova aba. Ja 0 _self fica dessa forma: Ea rnemawes. = Escola online para desenvolvedores Esse é 0 comportamento do valor _self quando aplicamos no atributo target, abrindo o link na mesma aba de navegagao. \VOLTAR AO SUMARIO TAlrreiawes— 24 Tag ancora com link interno Além do mais, uma das funcionalidades da tag é nos permitir incluir links internos, ou seja, no nosso prdéprio documento HTML, ou até mesmo externos, como ja dito anteriormente. Para aplicarmos essa fun¢ao, devemos primeiramente criar dois docu- mentos HTML, podendo ser, por exemplo, home.htm! e sobre.html. Feito isso, agora devemos adicionar dentro do body do nosso home.ht- ml, a tag , e dentro dela, iremos vincular nossa segunda pagina, sobre.html. Dessa forma: Quando clicamos na frase “Pagina Sobre”, seremos direcionados para a mesma. Quando nao atribuimos o valor _blank para o atributo target, ele ira assumir por padrao o valor de _self, abrindo o link na mesma aba de navegacao. Podemos fazer com que a pagina sobre consiga acessar a pagina home, sendo o inverso do que fizemos antes. \VOLTAR AO SUMARIO TAlrreiawes— Tag de Ancora com link externo A ideia é amesma quando vamos adicionar links externos, escolhemos qual link queremos vincular a tag ancora e adicionamos o mesmo. Como dito anteriormente, 6 necessario adicionarmos a URL por com- pleto, incluindo o protocolo HTTPS. \VOLTAR AO SUMARIO TAlrreiawes— Trabalhando com formularios no HTML Os formularios estéo presentes no nosso dia a dia em basicamente tudo que fazemos, como por exemplo, ao entrarmos em um site que exige que fagamos um login, criar uma conta pela primeira vez, entrar em nossas contas bancarias, entre outras atividades que realizamos enquanto estamos conectados na internet. Mas, como de fato criamos essa interagao entre o usuario e o website? E 0 que veremos mais a fundo nessa segao. O que 6? Formularios sao campos onde o usuario ira completar inserindo todos os dados necessarios, seja seu nome completo, idade, e-mail, senha, entre outros, com a finalidade de se cadastrar e acessar uma pagina, por exemplo. Do mesmo modo, podemos montar um formulario com a finalidade de criar perguntas com respostas ja preenchidas, onde o usuario ira apenas selecionar a resposta que mais se encaixa com a pergunta. Dessa forma, observamos que é possivel criar diversos tipos de for- mularios, nao se privando apenas do preenchimento de dados pes- soais, VOLTAR RO SUMARIO TAlrreiawes— a Estrutura de um formulario Antes de mais nada, precisamos entender que um formulario é definido com a tag form. Quando declaramos form, ele vem acompanhado de um atributo chamado action, sua fungao é apenas coletar e levar todas as informagées que foram inseridas no formulario para nosso docu- mento, seja ele HTML, PHP, entre outros. Para definirmos qual docu- mento queremos que o usuario seja direcionado, basta colocarmos o caminho dele dentro do atributo action. Vamos imaginar que criamos dois documentos HTML, um colocamos o nome de cadastro.html, e o outro de home.html. No cadastro.html, iremos abrir a tag form, e no atributo action, vamos colocar /home.htm, para que assim, o usuario seja direcionado para a pagina home.html ao concluir o preenchimento do formulario, Ficando dessa forma: Em seguida, dentro de form ira conter as demais tags, onde cada uma tera sua fungao. Vamos conhecer um pouco sobre o input, sendo ele, uma das principais tags quando estamos trabalhando com formularios. Input O input nada mais é do que a “caixa” onde o usuario ira interagir com a pagina, digitando os dados que estado sendo solicitados. Uma carac- teristica muito importante dessa tag é que ela nao necessita da tag de VOLTAR RO SUMARIO TAlrreiawes— fechamento, porém, ela vem acompanhada de um atributo conhecido como type. O type serve para definirmos como que o nosso input ira se comportar. Temos diversas opgées, veremos as mais utilizadas, sendo elas: > text + password + email + date + submit Primeiramente falaremos sobre o type com o valor de text, nele po- demos inserir letras e numeros, uma caracteristica do type é que, quando nao definimos qual tipo ele sera, por padrao, ele assume 0 tipo text. No codigo, fica dessa forma: Er eat Soa oe Ainda assim, temos em sequéncia, 0 type com o valor de password, quando declaramos esse valor para type, ele ira se comportar como um campo responsavel para ser inserido senhas, aceitando também letras e numeros. Por ele ser do tipo password, ele nao ira permitir que visualize 0 que esta sendo digitado, ficando apenas caracteres de bolinhas. No cddigo ira ficar assim: \VOLTAR AO SUMARIO TAlrreiawes— SETS ays No navegador veremos dessa forma Insira sua senha: Agora, temos 0 type com o valor de email, onde iremos inserir nosso e-mail. No codigo, fica dessa forma: Sn Soca a Uma caracteristica muito importante do type com o valor de email, & que ele por padrao, j4 possui uma validagao de e-mail, ndo permitindo que o usuario digite seu e-mail sem o @. Digite seu e-mail fireinaweb con] ’ com um “@” faltando. VOLTAR RO SUMARIO TAlrreiawes— 20 Ja o type com o valor de date, serve para inserir datas, podendo colo- car dia, més e o ano. Ficando assim: Sa Por fim, temos o type com o valor de submit, a fungao do submit é enviar os dados do formulario para a pagina onde definimos no atributo action. Ele vem acompanhado do atributo value e nele colocamos o nome que fizer mais sentido, por exemplo, “enviar”, j4 que ele se com- porta como um botao. See ee es Sts Toren Sie Exemplo de formulario S6 para exemplificar, vamos observar um formulario completo para que o entendimento fique melhor. Antes de mais nada, vamos criar dois documentos html, um com o nome de cadastro.html e outro com o nome de home.html. Apés isso, dentro de cadastro.html, declaramos o seguinte cddigo: \VOLTAR AO SUMARIO TAlrreiawes— a Sera a Sei a , enquanto um paragrafo deve ser envolvido pela tag

. Quando usamos as tags corretas para cada tipo de conteudo, a pagina se torna mais acessivel e legivel para os usuarios e mecanismos de busca. Por que a Semantica HTML é importante para acessibilidade? A Seméantica HTML é importante para a acessibilidade porque permite que as pessoas com deficiéncias visuais ou outras limitagdes possam navegar pelas paginas com mais facilidade. VOLTAR RO SUMARIO TAlrreiawes— As tags semanticas nos ajudam a estruturar o conteudo da nossa pagina de uma forma ldgica e significativa, permitindo que leitores de tela, por exemplo, possam identificar facilmente o que é um titulo, um paragrafo ou uma lista. Como a semantica afeta a indexacao por mecanismos de busca? A Seméantica HTML é importante para a indexagao por mecanismos de busca, pois ajudam os robés dos mecanismos de busca a entender melhor o contetido da pagina. As tags semanticas permitem que os mecanismos de busca identi- fiquem facilmente o titulo da pagina, o contetido principal e as secdes secundarias. Isso ajuda a melhorar a relevancia da pagina nos resulta- dos de busca. Como a semfantica afeta a legil jade do cédigo? A Semantica HTML afeta a legibilidade do cddigo porque torna o cédigo mais facil de entender e interpretar. Quando utilizamos as tags seméanticas corretamente, 0 cddigo se torna mais legivel e estruturado, permitindo que outros desenvolvedores possam entender e modificar nosso cddigo com mais facilidade. Isso é especialmente importante em projetos grandes e complexos. VOLTAR RO SUMARIO TAlrreiawes— Como usar a Semantica HTML corretamente? Para usarmos a Semantica HTML corretamente, é importante enten- dermos o significado de cada tag e como devemos utiliza-la. E recomendavel usarmos as tags HTML5 semanticas, como header, main, nav, section, article, aside, figure e footer. + header - Utilizamos para representar o cabecalho de um documento ou segao declarado no HTML. Nele podemos inserir elementos de a

; + main - Especificamos 0 conteudo principal e, consequentemente, de maior relevancia dentro da pagina; + nav - Utilizamos quando precisamos representar um agrupamento de links de navegacao, que, por sua vez, sao criados com os ele- mentos