Desenvolvimento Web Front-End
Profa. Janaina Faustino Leite
Semana 02
HTML
Sumário
1 INTRODUÇÃO ..........................................................................................................................................................3
1.1 Criando um HTML ...................................................................................................................................................3
1.2 Estrutura básica ........................................................................................................................................................4
1.3 Títulos ......................................................................................................................................................................7
1.4 Parágrafos e texto pré-formatado ..............................................................................................................................7 2
1.5 Listas ........................................................................................................................................................................8
1.6 Links ...................................................................................................................................................................... 11
1.7 Imagens ..................................................................................................................................................................12
1.8 Tabelas ...................................................................................................................................................................13
2 REFERÊNCIAS ........................................................................................................................................................ 14
1 INTRODUÇÃO
O HTML, abreviatura para Hypertext Markup Language (Linguagem de Marcação de Texto)
é uma linguagem para publicação de conteúdo na WEB.
Um Hipertexto são elementos ou conjuntos de elementos que podem ser textos, imagens,
vídeos, tabelas, entre outros. Esses elementos são formatados através da utilização de etiquetas ou
3
tags que são os comandos entre os sinais < (menor) e > (maior).
O HTML foi originalmente criado por Tim Berner-Lee e começou a ser mais utilizado pelos
desenvolvedores a partir de 1990. Atualmente se encontra na versão 5 e um dos seus principais
objetivos é facilitar a manipulação do elemento modificando suas características. Outra
preocupação do HTML 5 é a semântica, nele as tags além de formatar os conteúdos precisam dar a
eles significado.
O WHATWG1 tem mantido a questão da retrocompatibilidade dos sites existentes, ou seja,
por enquanto estes não precisam ser totalmente desenvolvidos em HTML 5 (sites antigos) para
funcionarem na Web.
Outro grupo importante é o W3C, responsável por manter o padrão do código. Você pode
consultar em http://www.w3c.br/Home/WebHome.
1.1 Criando um HTML
Para criarmos um HTML precisamos de um editor de textos e um browser. Eu utilizarei o
visual studio code (disponível em https://code.visualstudio.com/) por ser gratuito e de fácil
utilização. Existem outros programas para desenvolvimento de HTML, inclusive pagos, com o
tempo você vai decidir qual você gosta mais.
1
What Working Group - Grupo de Desenvolvedores responsáveis pelo HTML 5 - https://whatwg.org/
1.2 Estrutura básica
A estrutura do HTML 5 não mudou muito nas últimas versões. Uma das alterações foi o
Doctype que segundo os desenvolvedores agora será assim em toda última versão.
Figura 01- Estrutura básica de um HTML
4
Fonte: Autora
Primeiramente as tags são essas palavras dentro dos sinais < e >. Elas representam o que
deve ocorrer com o elemento. A maioria das tag possuem uma tag de abertura <html> e uma tag de
fechamento </html>, a diferença é que a de fechamento possui uma / (barra) antes do texto da
mesma. As tags que não possuem uma tag de fechamento são fechadas nelas mesmas como a
existente na terceira linha <meta charset="UTF-8" />, perceba que ela possui uma / (barra) no final
de toda a tag, isso não é obrigatório (podendo usar sem <meta charset="UTF-8">, porém é
considerado uma prática comum e recomendada.
Vamos entender agora essa estrutura:
• <!DOCTYPE html> - Essa linha indica que esse documento que estamos fazendo é um
documento html 5.
• <html> - Indica que vamos iniciar o nosso html e deve ter a tag </html> no final do
5
documento, perceba a mesma na linha 11. Eu não utilizei no exemplo mais podemos utilizar
dentro dessa tag o atributo lang que especifica qual a linguagem a ser utilizada. A tag ficaria
assim <html lang="pt-br">, ou seja, estamos iniciando o html e estaremos utilizando o
português brasileiro.
• Logo abaixo existem dois blocos importantes o <head> e o <body>. O <head> indica todas
as configurações de "cabeçalho" da página, ou seja, qual será o título, se terá ícone na
página, arquivos anexados, entre outros. Com o tempo veremos essas opções. Perceba que
ele é fechado na linha 6 com o </body>. Dentro dele foram colocados: na linha 4 a opção
<meta charset="UTF-8" /> indica que estaremos utilizando o padrão Unicode, ou seja,
podemos representar qualquer caracter nesse html de qualquer idioma. Na linha 5 estamos
indicando que o título da página será Título.
• Depois colocamos a tag <body>, linha 7, que está sendo fechada na linha 9, e dentro só
colocamos o texto Conteúdo da página.
Essa página será exibida assim no browser:
Figura 02: Primeira página HTML
Fonte: Autora
1.3 Títulos
Uma página pode precisar, como num livro, possuir título para estabelecer a divisão e
também a hierarquia dos conteúdos. Nesse caso você deve utilizar a tag h, que possuem sufixos de
1 a 6, definindo a o nível da hierarquia dos mesmos.
Figura 03 - Títulos 7
Fonte: Autora
1.4 Parágrafos e texto pré-formatado
No código acima ao definirmos um título o mesmo já possui a "opção" de sempre iniciar o
próximo elemento eu outra linha, ou seja, ele automaticamente dá um "enter". Se digitamos textos
no notepad++ e damos "enters", os mesmos não ocorrerão a não ser que utilizemos uma tag para
isso. Essa tag é a <br/>, utilize-a para cada vez que necessite de um enter.
Outra opção é definir um texto dentro de um parágrafo, tag <p>, a mesma após o seu
fechamento passará para a próxima linha.
Agora se quisermos que o texto digitado responda a enters e espaços dentro do próprio
código, podemos utilizar a tag <pre>. Veja abaixo um código que mostra isso.
Figura 04: Textos
Fonte: Autora
1.5 Listas
Em html podemos trabalhar com 3 tipos de listas. A lista de descrições, lista com ordem e
lista sem ordem.
A lista de descrições é formada um termo e a sua definição. Os termos são definidos pelo tag
<dt> e suas definições pela data <dd>.
Figura 05: Lista de Descrições
Fonte: Autora
A lista com ordem é iniciada com uma tag <ol> e utiliza para cada item da lista uma tag
<li>.
Figura 06: Lista com Ordem
10
Fonte: Autora
A lista sem ordem é iniciada com uma tag <ul> e utiliza para cada item da lista uma tag
<li>.
Figura 07: Lista sem Ordem
11
Fonte: Autora
1.6 Links
Um link é a opção onde podemos chamar uma outra páginas, arquivos, site, entre outros.
Para criar um link basta utilizar a tag <a> e indicar o seu caminho no atributo href.
Figura 08: Exemplo de link
12
Fonte: Autora
1.7 Imagens
Para inserir imagens utilize a tag <img> seguida do atributo src que indica o caminho do
arquivo.
Figura 09: Exemplo de Imagem
Fonte: Autora
1.8 Tabelas
Para criarmos uma tabela iniciamos com a tag <table>. Depois podemos ou não separar o
mesmo em áreas (cabeçalho, corpo, rodapé), para isso usamos as tags <thead>,<tbody> e <tfoot>,
cada linha da tabela deve ser iniciada com um elemento tr. Caso você queira criar em uma linha
inicial títulos use a tag <th>, se forem elementos normais <td>. Para mesclar células utilize o
13
atributo colspan ou rowspan.
Figura 10: Exemplo de Tabela
Fonte: Autora
Existem outros novos elementos do HTML5 que estaremos vendo no decorrer da disciplina.
Bons estudos!
2 REFERÊNCIAS 14
CASTRO, Elizabeth; HYSLOP, Bruce. HTML5 e CSS3. Alta Books, Rio de Janeiro - 2013.
FREEMAN, Eric; ROBSON, Elisabeth. Use a Cabeça! Programação em HTML5. Alta Books,
Rio de Janeiro - 2014.
