Tema 1 - IDW (Introdução Ao HTML)

TEMA 1 – Introdução ao HTML
INTRODUÇÃO
Neste tema será apresentada a linguagem de marcação de hipertexto – HTML (hypertext
markup language), que é utilizada para estruturar páginas Web. Com ela é possível
formatar textos, inserir imagens e links, de maneira que esses elementos sejam
interpretados e apresentados pelo navegador. É comum observar também autores que
falam de XTML (eXtensible HyperText Mark-up Language), que nada mais é do que uma
maneira rigorosa de estruturar o HTML.
O objetivo deste conteúdo é apresentar como construir websites por meio de HTML. Para
iniciar o estudo é importante conhecer a tag HTML, que é o comando com o qual os
elementos das páginas são definidos. Uma vez conhecido o formato de uma tag, pode-se
trabalhar com o conjunto de tags que a linguagem HTML possui.
Com o conhecimento da estrutura básica de uma página web, pode-se explorar outros
recursos que a HTML dispõe como listas, imagens e links que normalmente são utilizados
como elementos informativos, além dos textos. Tais elementos proporcionam uma visão
mais abrangente do assunto que se pretende contemplar, na página de internet que está
sendo criada, tornando a navegação mais interessante.
Tag
Conforme Astrup, Jacobsen e Astrup (2014), tags são rótulos utilizados para informar ao
navegador como deve ser apresentado o website. Todas as tags começam com o sinal
de ‘<’ e terminam com o de ‘>’; de modo genérico, uma tag pode ser de abertura –
representada por <tag> – e de fechamento – representada por </tag> (observa-se que
a diferença desta para aquela é o símbolo de ‘/’). Por exemplo, a tag <b> inicia a ação de
negrito no texto e a tag </b> finaliza a marcação.
Um elemento é um par de rótulos e o conteúdo localizado entre eles (DUCKET, 2010).
Tais elementos são utilizados para apresentar o conteúdo na página web e têm o seguinte
formato genérico: <tag>conteúdo</tag>.
Para compor o documento é necessário um editor de textos simples – como o bloco de

notas, por exemplo – para escrever o código HTML que o browser interpretará e mostrará
como resultado. Assim, todos os arquivos de páginas web devem ser salvos com a
extensão .html ou .htm (onde .html é mais comumente utilizada) e após visualizados no
navegador. Não é recomendável salvar arquivos com nomes contendo acentos, espaços
ou quaisquer caractere especial, visto que o padrão as páginas web não contempla tais
opções. Como opções de editor de textos para o código das páginas, recomenda-se o
Notepad++ (https://notepad-plus-plus.org/download/v7.7.1.html) ou o Sublime Text
(https://www.sublimetext.com/download), ambos gratuitos.
A Figura 1 apresenta alguns exemplos de aplicações de tags HTML. Observe que o

documento inicia com a tag <HTML> e finaliza com </HTML> indicando que é um
documento de marcação.
Figura 1 – Código HTML (Tags)
A Figura 2 apresenta o resultado da tags após o navegador interpretar. Observe que o
conteúdo que estava no código-fonte na linha 3 não foi apresentado porque é um
comentário, estes são destinados ao programadores apenas.
Figura 2 – Visualização do Código HTML (Tags)
É importante observar que uma tag pode conter atributos, seguidos de valores, os quais
permitirão aplicar características diferentes da definição original ao conteúdo especificado.
Neste caso, o formato da tag é o seguinte: <tag atributo=“valor”> CONTEÚDO
</tag>, sendo que uma tag pode possuir um ou mais atributos, segundo a sua definição.
Um exemplo de tags com atributos e seus respectivos valores é apresentado na Figura 3.
A esquerda o código-fonte e a direita a interpretação do navegador.
Figura 3 – Tags e atributos
Um aspecto a ser considerado é que por razão de uma boa prática de programação,
definem-se os valores dos atributos de uma tag entre aspas duplas “ ”, de preferência,
mas as aspas simples ‘ ’ também podem ser utilizadas, apesar de não serem indicadas.
Convém esclarecer que pelas diferentes características dos navegadores de internet, há
tags – bem como seus atributos correspondentes e valores atribuídos – que executam em
alguns navegadores e em outros não. Por isso, é sempre importante, ao desenvolver um
site, testar o código em diferentes navegadores.
Estrutura Básica do HTML

Como em qualquer outra linguagem, HTML também possui uma estrutura básica para a
criação das páginas web, sendo dividida em três partes: a estrutura principal, o cabeçalho
e o corpo (KOBAYACHI; BEU, 2001). A Figura 4 apresenta a estrutura básica do HTML.
Figura 4 – Estrutura básica do HTML
As tags <HTML> </HTML> limitam a área da linguagem HTML, ou seja, onde inicia e
termina o documento. Essas tags representam a estrutura principal da página.
As tags <head> </head> são referentes ao cabeçalho e envolvem o título da página,

limitado pelas tags <title> </title>; tal título aparecerá na barra superior do
navegador de internet, utilizado para navegação de páginas web. Essas tags representam
o cabeçalho da página.
As tags <body> </body> limitam o corpo e envolvem todos os comandos de formatação,
imagens, links, formulários, entre outros, ou seja, todas as demais tags necessárias para
inserir o conteúdo na página web, são colocadas no âmbito da tag <body>. Essas tags
representam o corpo da página.
Na Figura 5 é apresentado um exemplo de código HTML, envolvendo as definições de tag

e de estrutura básica estudadas até o momento.
Figura 5 – Exemplo de código HTML
A Figura 6 apresenta o código interpretado pelo navegador FireFox.

Figura 6 – Exemplo de código HTML (visualização)
Atributos Básicos
São disponibilizados quatro atributos básicos que podem ser utilizados na maioria dos
elementos de uma página web (DUCKETT, 2010), que são: id, title, class e
style.
O atributo id pode ser utilizado para identificar de forma única elementos dentro de uma
página, podendo ser definido em qualquer parte do documento. Seu uso é mais evidente
quando se trabalha com CSS ou JavaScript. Um exemplo com o atributo id pode ser visto
na Figura 7.
Figura 7 – Exemplo com atributo id
Algumas regras devem ser respeitadas para o valor do atributo id: não é permitido
acentos, espaços ou qualquer caractere especial; e deve ser único dentro do documento,
não podendo existir dois atributos id com o mesmo valor.
O atributo class é utilizado para especificar que um elemento pertence a uma classe de
elementos, sendo comumente empregado com CSS. O valor do atributo class pode ser
composto de um nome de classe ou também, dependendo do caso, pode ser uma lista
separada por espaços, de nomes de classes. A Figura 8 apresenta um exemplo para o
atributo class.
Figura 8 – Exemplo com atributo class
O atributo title dá um título sugerido para o elemento, onde o comportamento desse

atributo dependerá do elemento que ele contiver; é muitas vezes exibido como uma dica
ou enquanto o elemento está sendo carregado. Vale observar que nem todos os
elementos que podem ter um atributo title, realmente precisam de um (DUCKETT,
2010). A sintaxe genérica para o atributo title é: title = “nometitulo”.
É importante destacar que não seja feita confusão do atributo title com a tag
<title>, pois os dois têm aplicações diferenciadas, com base no que já foi estudado até
o momento.
O atributo style permite especificar regras CSS dentro do elemento, que será visto no
decorrer da disciplina.
Formatação de Textos
Os primeiros elementos normalmente colocados em uma página web são os textos, e para
isso são disponibilizadas tags de formatação específicas. Para aplicar negrito, itálico e
sublinhado utiliza-se, respectivamente, as tags: <b> texto </b>, <i> texto </i> e
<u> texto </u>. O exemplo da Figura 9 apresenta estas formatações, combinando as
tags de diferentes maneiras.
Figura 9 – Exemplo de formatação de texto
Com a interpretação do navegador, tem-se o resultado apresentado na Figura 10.

Figura 10 – Exemplo de formatação de texto (visualização)
No exemplo apresentado acima (Figura 9), observa-se também as tags para quebra de
linha <br>, criar um novo parágrafo <p> e centralizar conteúdo <center> (neste caso
texto, mas pode ser igualmente aplicado para outros elementos). Nota-se que a tag <br>
não necessita de fechamento, assim como a tag <p>, se não tiver atributo, também não
necessita; porém quando a tag <p> possui um atributo (como no exemplo, é o caso do
center), o fechamento </p> é obrigatório. O atributo align, na tag <p>, pode ter
atribuído os valores de alinhamento:
- à direita (right);
- centralizado (center);
- justificado (justify);
- à esquerda (left), que é o padrão.
Para aplicar formatações como cores, tamanhos e tipos de fonte tem-se a tag
<font>, com os atributos color, size e face, e neste caso, o fechamento </font>
é obrigatório. A Figura 11 apresenta a aplicação da tag <font>.
Figura 11 – Exemplo de formatação de texto <font>
A Figura 12 apresenta o código interpretado.
Figura 12 – Exemplo de formatação de texto <font> (visualização)
As cores utilizadas para o atributo color (linhas 8 e 13) podem ser definidas pelo nome
da cor em inglês ou pelo código RGB (Red/Green/Blue) – vale observar que essa mesma
definição de cores pode ser aplicada ao atributo bgcolor da tag <body>; os tamanhos
de fonte para o atributo size podem variar de 1 até 7 (linhas 12 e 13); e o atributo face
(linhas 6 e 12), que define o estilo da fonte a ser utilizado, pode ser empregado os estilos
comuns disponíveis em qualquer editor de texto.
O exemplo visto na figura acima apresenta, além da tag <font> e seus diferentes
atributos, a tag <hr> que insere uma linha horizontal (linhas 7, 9, 11 e 13), normalmente
utilizada para separar conteúdo de uma página web. Para a tag <hr> é possível utilizar
atributos de cor (color), tamanho (size), largura (width) e alinhamento (align), não
sendo necessário definir seu fechamento.
Na tag <hr> as cores utilizadas para o atributo color podem ser definidas pelo nome da
cor em inglês ou pelo código RGB (Red/Green/Blue); a altura (ou tamanho) pelo atributo
size, sendo que pode receber qualquer valor numérico que represente pixels (quanto
maior o valor numérico, mais “alta” será a linha horizontal); a largura definida pelo atributo
width, que corresponde à largura da linha horizontal em relação à página web, pode
receber um valor percentual entre 1 e 100; e o alinhamento dado pelo atributo align é
determinado pelos valores left (à esquerda), right (à direita), ou centralizado
(center), que é o padrão.
Para trabalhar com elementos de títulos, subtítulos, entre outros, utiliza-se a tag <hn>,
onde n possui uma variação de 1 a 6, sendo 1 o maior e 6 o menor (assim, <h1>, <h2>,
<h3>, <h4>, <h5> e <h6>); automaticamente uma nova linha é aberta e o negrito é
aplicado para o texto.
A Figura 13 apresenta um exemplo com os diferentes tamanhos da tag <hn>. Observa-

se que é possível definir o atributo align, para alinhar o texto à direita (right) - linha 7
-, centralizado (center) - linha 8 - ou à esquerda (left) - linhas 6, 9, 10 e 11 -, que é o
padrão.
Figura 13 – Exemplo de formatação de títulos
A tag <div>, que necessita de fechamento </div>, permite alterar o estilo em partes
específicas da página web e posicionar elementos, por meio do atributo align, sendo
normalmente utilizada juntamente com código CSS. Na Figura 14 é apresentado um
exemplo de código com a tag <div>.
Figura 14 – Exemplo de formatação div
Normalmente, a tag <div> é estilizada por um arquivo .css, sendo que para isso é preciso
definir-se o atributo id ou o atributo class para tal tag, como, por exemplo, <div
id="nome_do_id"> </div> ou <div class="nome_da_div"> </div>. Ou pode-
se definir diretamente o atributo style na tag <div>, como, por exemplo, <div
style="position:absolute;margin-left:10px; margin-top:10px;
width:300px; height:140px; z-index:1"> </div>.
Da mesma forma que a tag <p>, a tag <div> permite definir o atributo align, para
posicionar o elemento à direita (right), centralizado (center) ou à esquerda (left),
que é o padrão.
Listas
Quando se deseja organizar determinado conteúdo no formato de uma lista para, por
exemplo, criar tópicos de textos para uma melhor exemplificação de um assunto, HTML
proporciona tags específicas para que isso possa ser realizado. Assim, os tipos de listas
são basicamente, conforme apresentado por Duckett (2010):
- Não ordenadas – listas com marcadores, sem a preocupação com sua sequência.
- Ordenadas (ou numeradas) – que usam uma sequência de números ou letras, em
vez de marcadores.
- De definição – são um tipo especial de lista, que permitem especificar um termo e
sua definição.
As tags utilizadas para a criação de uma lista não ordenada são <ul> e <li> e seus
respectivos fechamentos, </ul> e </li>. A tag <ul> é utilizada para definir a lista e a
tag <li> é dedicada a criação de cada um dos itens da lista. Juntamente com a tag <ul>
é possível utilizar o atributo type que pode assumir os seguintes valores:
- <ul type=“square”> insere um marcador quadrado;
- <ul type=“circle”> insere um marcador circular;
- <ul type=“disc”> insere um marcador redondo, que é o padrão.
Um exemplo de lista não ordenada pode ser visto na Figura 15. Neste exemplo não se
está utilizando o atributo type e, portanto, o formato de marcador criado é o padrão,
redondo (linhas 8, 9, 10 e 11).
Figura 15 – Lista não ordenada
As tags utilizadas para criar uma lista ordenada são <ol> ... </ol> e <li> ...
</li>. A tag <ol> é usada para definir a lista e a tag <li> é usada para cada item da
lista. Também juntamente com a tag <ol> é possível utilizar o atributo type que pode
assumir os seguintes valores:
- <ol type=“a”> insere letras do alfabeto minúsculo na sequência.
- <ol type=“A”> insere letras do alfabeto maiúsculo na sequência.
- <ol type=“i”> inere algarismos romanos minúsculos.
- <ol type=“I”> insere algarismos romanos maiúsculos.
- <ol type=“1”> insere números decimais, que é o padrão.
Além do atributo type, pode-se utilizar também o atributo start, que faz com o primeiro
item da lista inicie por alguma letra, algarismo ou número específico inserido pelo
programador. Um exemplo de aplicação de lista ordenada é apresentado na Figura 16,
sendo que no mesmo observa-se o uso dos atributos type e start (linha 7).
Figura 16 – Lista ordenada
As tags utilizadas para criar uma lista de definição são <dl>, <dt> e <dd> e seus
respectivos fechamentos </dl>, </dt> e <dd>. A tag <dl> cria a lista de definição, na
tag <dt> é onde o termo é proposto, e na tag <dd> é onde o termo é definido. Um exemplo
com lista de definição é apresentado na Figura 17.
Figura 17 – Lista de definição
É possível criar listas aninhadas, ou seja, lista dentro de lista, reunindo, por exemplo, os
três tipos de listas apresentados, como é demonstrado na Figura 18.
Figura 18 – Listas aninhadas
Imagens
As imagens dão uma perspectiva diferente a um site e em HTML a tag <img> é que
possibilita inserir imagens de formato jpg/jpeg, gif, bmp e png, sendo este último o mais
indicado, visto que o tamanho do arquivo costuma ser menor do que os outros três
formatos citados.
Para que a imagem possa ser efetivamente inserida na página web é necessário usar-se
na tag <img>, o atributo src, que especifica qual é o nome do arquivo da imagem, bem
como qual é a sua extensão (jpg, gif, bmp ou png). O atributo alt também é utilizado na
tag de imagem e é altamente recomendado que o mesmo seja definido, como boa prática
de programação.
A tag <img> não tem obrigatoriedade de fechamento, mas é comum utilizar-se a definição
da mesma como <img />, por exemplo, <img src="imagem1.png" alt="Texto
explicativo." />.
Na Figura 19 é apresentado um exemplo com a tag <img>, onde os atributos border,
width, height e align também podem ser observados. Estes atributos determinam,
respectivamente, a borda, a largura, a altura e o alinhamento da imagem, sendo opcionais.
Os valores para borda, largura e altura são dados em pixels e para alinhamento são
right e left (que é padrão) – para centralizar a figura é necessário usar a tag
<center> (linha 6).
Figura 19 – Imagens
O resultado pode ser conferido na Figura 20. É importante salientar que a figura inserida
na tag <img src=””> deve estar na mesma pasta que o documento, pois foi apenas
referenciado o nome da imagem.
Figura 20 – Interpretação de código
Vale ressaltar que ao definir a altura e largura de uma imagem por meio dos atributos
width e height, pode interferir na qualidade de apresentação da mesma; por exemplo,
figuras menores que têm suas dimensões de largura e altura ampliadas tendem a ficar
menos nítidas. Assim, é recomendado que para efetivamente aumentar ou diminuir
dimensões de uma imagem, seja utilizado um editor de imagens, como Photoshop,
Fireworks, entre outros.
É possível definir uma imagem como plano de fundo da página web, sendo necessário,
para isso, acrescentar o atributo background na tag <body>; deste modo,
genericamente tem-se <body background=“nome e extensão do arquivo da
imagem”>.
A Figura 21 apresenta um exemplo de código com a definição de uma imagem como plano
de fundo. Se a imagem de fundo não ocupar a totalidade da página web, ela será
automaticamente repetida, para preencher o espaço correspondente, como é o caso do
exemplo.
Figura 21 – Imagem como pano de fundo
Links
Um link (ligação) é uma parte importante para o funcionamento de um site, pois ele
conecta uma página web a outra, e pode-se acessar um conteúdo com apenas um clique.
Essa ideia é reforçada por Kobayachi (2001), quando considera que os links são conexões
entre páginas de um mesmo site ou até mesmo para outros sites que estão na rede.
Deste modo, a tag para criar links em páginas web é <a> (e seu fechamento </a>), sendo
que é necessário utilizar o atributo href para determinar qual é o arquivo que estará
vinculado. A forma genérica seria <a href=“conteúdo a ser vinculado”> ...
</a>. Também há, para a tag <a>, o atributo target que é opcional e indica o alvo para
que o conteúdo do link seja exibido; por padrão, clicar em um link faz com que o conteúdo
seja aberto na mesma janela onde o link foi clicado. Porém, existe a alternativa de fazer
com que tal conteúdo seja aberto em uma nova janela do navegador, sendo que para
tanto é preciso definir o valor do atributo target como _blank. Um exemplo da aplicação
desse atributo pode ser visto na Figura 22.
Figura 22 – Tag href (link)
Basicamente, há basicamente quatro tipos de links que podem ser definidos em uma
página web: link local, link para um arquivo, link externo e link para e-mail.
- Para link de arquivo, que é aquele que conduz a outra parte do mesmo site, define-se a
tag <a href=“nomedoarquivo.html”> link para arquivo </a>, onde
nomedoarquivo é o nome físico do arquivo com extensão html (ou htm), conforme o
mesmo estiver salvo no computador. Um exemplo de código para esse tipo de link pode
ser observado na Figura 22 (linha 6).
- Para link local, que é aquele que ao clicar nos links de qualquer um dos tópicos, é
redirecionado para a posição que tem a marcação. Este recurso também é muito utilizado
dentro de menus de páginas únicas. Define-se a tag <a href=“#menu1”> link para
o Menu 1 </a> para indicar o link e a tag para indicar onde o link deverá se posicionar
<h1>Menu 1 <a name=“menu1”> </a></h1>. O atributo name, marca onde o link
deverá ser apresentado.
- Para link externo, que é uma ligação que a página web possui para outro site, é
necessário definir-se a tag <a href =“URLdesejada”> link externo </a>, onde
URLdesejada é o endereço do site que se deseja vincular ao link, como é apresentado na
Figura 23.
Figura 23 – Tag href (link externo)
Ao clicar no link “Clique aqui!” é aberta uma nova aba com o site inserido na tag (linha 6).
Figura 24 – Visualização da tag href (link externo)
Vale ressaltar que para link externo é necessário colocar-se http:// antes do endereço
propriamente dito, como no exemplo da Figura 22, http://www.ulbra.br.
- Em link para e-mail, que cria uma conexão direta com o software de correio eletrônico
do usuário, conforme configurado em seu computador, predefinindo o endereço do
destinatário automaticamente, usa-se a tag <a href= “mailto:endereço@e-
mail.com”> e-mail </a>, onde endereço@e-mail.com é o endereço de e-mail para
o qual se deseja enviar uma mensagem ao clicar-se no link. Na Figura 25 é apresentado
um exemplo de link para e-mail (linha 6).
Figura 25 – Tag href (link e-mail)
Vale observar que em link para e-mail é necessário colocar-se mailto: antes do endereço
de e-mail desejado, como visto no exemplo da Figura 25, mailto:endereco@ulbra.br
(linha 6).
Os links podem ser disponibilizados tanto em textos (como apresentado nos exemplos
das Figuras 22, 24 e 25), quanto em figuras; como mostra o exemplo da Figura 26.
Figura 26 – Tag href (âncora)
REFERÊNCIAS
ASTRUP, A.; JACOBSEN, J. C; ASTRUP, J. Tutorial HTML. Disponível em: http://pt-
br.html.net/tutorials/html/lesson3.php. Acesso em: jul/2019.
DUCKETT, J. Introdução à Programação Web com HTML, XTML e CSS. 2ª Edição. Rio
de Janeiro: Editora Ciência Moderna, 2010.
KOBAYACHI, C.; BEU, E. L. Webdesigner: Estrutura e Programação. São Paulo: Érica,
2001.

Tema 1 - IDW (Introdução Ao HTML)

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tema 1 - IDW (Introdução Ao HTML)

Enviado por

Direitos autorais:

Formatos disponíveis

TEMA 1 – Introdução ao HTML

Para compor o documento é necessário um editor de textos simples – como o bloco de

A Figura 1 apresenta alguns exemplos de aplicações de tags HTML. Observe que o

Estrutura Básica do HTML

As tags <head> </head> são referentes ao cabeçalho e envolvem o título da página,

Na Figura 5 é apresentado um exemplo de código HTML, envolvendo as definições de tag

A Figura 6 apresenta o código interpretado pelo navegador FireFox.

O atributo title dá um título sugerido para o elemento, onde o comportamento desse

Com a interpretação do navegador, tem-se o resultado apresentado na Figura 10.

A Figura 13 apresenta um exemplo com os diferentes tamanhos da tag <hn>. Observa-

Você também pode gostar