Dsi Aula02 HTML

PROFª.
MSC SAHRA
HTML KAROLINA
HTML
O segredo de um site profissional é ter como base um

bom HTML. Mais que conhecer todos os elementos
do HTML, é saber a importância de um código
semântico e bem estruturado. Além disso, entender o
papel do CSS em potencializar as informações do
HTML, estruturando em layouts de colunas e linhas,
além dos devidos destaques visuais, como cores,
fontes, tamanhos e mais recursos.
23/08/2022 HTML 2
Tags
• A linguagem de marcação de texto HTML baseia-se em etiquetas

(tags) com valor semântico, englobando trechos de conteúdo, dotando-
os de sentido e valor.
3/9/20XX Título da Apresentação 3

Tags
• tags estruturais: mudam o posicionamento de elementos na web;

• tags de cabeçalho: estão relacionadas com o cabeçalho e alguns
elementos básicos de sites, como o título e o favicon;
• tags de links: são utilizadas para gerenciar qualquer tipo de link
existente na página;
• tags de listas: permitem criar diferentes listas (como esta!);
• tags de formatação de caracteres: adicionam formatação especial a
qualquer texto exibido na página web;
Tags
• tags de manipulação de elementos: tornam mais preciso o

posicionamento de conteúdos no site;
• tags de conteúdo multimídia: utilizadas para inserir elementos como
imagens, vídeos e músicas nas páginas web;
• tags de frames: para criar frames (que funciona como uma divisão
interna da página) com conteúdos internos;
• tags de formulários: utilizadas para criar formulários para os usuários;
• tags de tabelas: adotadas para criar e modificar tabelas facilmente.

Estrutura básica de páginas Web
1 <html>
2 <head>
3 <title>Title</title>
4 </head>
5 <body>
6 <p>Hello World!</p>
7 </body>
8 </html>

Lista de Tags
Tag Descrição
 Define um comentário
<!DOCTYPE> Define o tipo de documento

<a> Define um hyperlink
<abbr> Define uma abreviação
<address> Define um endereço (passa a ser tratado como uma seção)
<area> Define uma área dentro de um mapa de imagem

<strong> Define um texto em negrito
<base> Define uma base url para todos os links da página

Lista de Tags
Tag Descrição
<bdo> Define a direção do texto apresentado
<blockquote> Define uma citação longa

<body> Define o corpo da página
<br> Insere uma quebra de linha simples
<button> Define um botão de comando
<caption> Define o "caption" de uma tabela

<cite> Define uma citação
<code> Define o código texto do computador

Lista de Tags
Tag Descrição
<col> Define os atributos da coluna da tabela
<colgroup > Define um grupo de colunas da tabela

<dd> Define uma descrição de definição
<del> Define um texto deletado
<dfn> Define um termo de definição
<div> Define uma seção no documento

<dl> Define uma lista de definição
<dt> Define um termo de definição

Lista de Tags
Tag Descrição
<em> Define um texto em ênfase
<fieldset> Define um conjunto de campos (fieldset)

<form> Define um formulário
<h1> até <h6> Define do cabeçalho 1 até o cabeçalho 6
<head> Define uma informação sobre o documento (não aceita mais elementos child como filho)
Define uma regra horizontal (tem o mesmo nível que um parágrafo, mas também é utilizado
<hr>
para fazer separações e quebras de linha)
<html> Define um documento html
<i> Define um texto em itálico

Lista de Tags
Tag Descrição
<iframe> Define uma linha sobre a janela (frame)
<img> Define uma imagem

<input> Define um campo de inserção
<ins> Define um texto inserido
<kbd> Define um texto do teclado
<label> Define uma "label" para o formulário

<legend> Define um título para os campos (fields)
<li> Define os itens da lista

Lista de Tags
Tag Descrição
<link> Define uma referência
<map> Define uma imagem de mapa

<menu> Define uma lista de "menus"
<meta> Define informações meta
<noscript> Define uma seção noscript
<object> Define um objeto incorporado

<ol> Define uma lista ordenada
<optgroup> Define um grupo de opção

Lista de Tags
Tag Descrição
<option> Define uma opção em uma lista suspensa (drop-down list)
<p> Define um parágrafo

<param> Define um parâmetro para determinado objeto
<pre> Define um texto pré-formatado
<q> Define uma citação curta
<s> Define um texto que não é mais correto.

<samp> Define um código de amostra
<script> Define um script

Lista de Tags
Tag Descrição
<select> Define uma lista selecionável
<small> Define um pequeno texto

<span> Define uma seção no documento
<strong> Define um texto forte (similar ao negrito)
<style> Define um estilo
<sub> Define um texto subscrito

<sup> Define um texto sobrescrito
<table> Define uma tabela

Lista de Tags
Tag Descrição
<tbody> Define o corpo da tabela
<td> Define uma célula da tabela

<textarea> Define uma área de texto
<tfoot> Define o rodapé da tabela
<th> Define o cabeçalho da tabela
<thead> Define o cabeçalho da tabela

<title> Define o título do documento
<tr> Define uma linha da tabela

Lista de Tags
Tag Descrição
<b> Define um texto em negrito
<base> Define uma base url para todos os links da página

<bdo> Define a direção do texto apresentado
<blockquote> Define uma citação longa
<body> Define o corpo da página
<br> Insere uma quebra de linha simples

<button> Define um botão de comando
<caption> Define o "caption" de uma tabela

Lista de Tags
Tag Descrição
<cite> Define uma citação
<code> Define o código texto do computador

<col> Define os atributos da coluna da tabela
<colgroup > Define um grupo de colunas da tabela
<dd> Define uma descrição de definição
<del> Define um texto deletado

<dfn> Define um termo de definição
<div> Define uma seção no documento

Lista de Tags
Tag Descrição
<dl> Define uma lista de definição
<dt> Define um termo de definição

<em> Define um texto em ênfase
<fieldset> Define um conjunto de campos (fieldset)

Inserir imagens
<img src="logo.jpg" alt="some text" width=60 height=40>
• IMG significa “imagem”: está tag informa ao navegador onde a imagem deve ser localizada no
seu site.
• SRC significa “source” (origem): Este comando é inserido no comando IMG. O comando Source
informa ao navegador qual o caminho para a imagem. É recomendado armazenar as imagens em
um diretório chamado “imagens” ou “img”, por exemplo. Isso facilita a definir o caminho até as
imagens, exemplo: imagens/nomedaimagem.jpgor img/nomedaimagem.jpg. Também é possível
inserir uma url no lugar do caminho para a imagem. Se você encontrar uma imagem na internet,
que não exija direitos de uso, você pode usar o link da imagem e inserir na tag source.
• logo.jpg é o nome da imagem. Você deve criar o nome completo da imagem como explicado no
2º Passo.

Inserir imagens
<img src="logo.jpg" alt="some text" width=60 height=40>
• ALT significa “alternate text”. Este texto será exibido quando a imagem não carregar por outros
motivos, como a conexão por exemplo. Também é importante quando se trata de SEOe pode ter
grande impacto no ranqueamento do seu site nos mecanismos de busca. O alt tag explica do que
se trata a imagem e também aparece quando o usuários passa o mouse em cima da imagem.
• “some text” aqui você insere o texto que descreve a sua imagem.
• WIDTH indica a largura da sua imagem em pixels e pode variar de 1 a qualquer outro número.
Mas claro que não faz sentido configurar uma imagem com a largura superior à largura da tela do
navegador.
• HEIGHT indica a altura das imagens em pixels. As regras seguem as mesmas da largura. A partir
de 1 pixel e que seja proporcional ao tamanho da tela do navegador do seu usuário.
Navegando pelos links
• Um link é uma ligação entre páginas web, podendo esta ligação ser
para uma página no mesmo site (link interno) ou para uma página em
outro site.
• Para criarmos um link, devemos utilizar a tag <a>. Porém, essa tag
sem atributos não criará nenhum link, seja interno ou externo. Para
que um link seja criado, devemos, no mínimo, declarar na tag <a> o
atributo href com o caminho absoluto ou relativo de uma página.

Criar um link
Opções:
• Link externo
<a href="https://uninassau.edu.br">Um link para o site da Uninassau</a>
• Link de diretório
<a href="pagina2.html">Link para a página 2</a>

Criar um link
• Por exemplo, se você tem duas páginas (pagina1.html e pagina2.html) e salvou as duas em uma
mesma pasta, você pode criar um link de uma página para a outra usando somente o nome do
arquivo no link.
• Dessa maneira, um link da pagina1.html para a pagina2.html ficará da seguinte forma:
<a href="pagina2.html">Link para a página 2</a>

• Se a pagina2.html for colocada em uma pasta diferente que a pagina1.html, o link na pagina1.html
para a pagina2.html será então da seguinte forma:
<a href="pasta/pagina2.html">Link para a página 2</a>

Criar um link
• Por outro lado, um link da pagina2.html para a pagina1.html será da seguinte forma:
<a href="../pagina1.html">Link para a página 1</a>
• A notação “../” aponta para a pasta a um nível acima do arquivo onde foi feito o link. Seguindo o
mesmo princípio, você pode apontar para dois (ou mais) níveis acima, escrevendo “../../”.
23/08/2022 HTML 24
Atributos title e target
• Além do href, podemos informar também outros dois atributos quando estamos criando um link: o
title e o target.
• Semelhante ao atributo title utilizado na tag <img>, aqui na tag <a> este atributo é utilizado para
fornecer uma breve descrição do link. Exemplo:
<a href="http://www.uninassau.edu.br" title=“A sua faculdade">Uninassau</a>
• Colocando o ponteiro do mouse sobre o link, sem clicar, aparecerá uma caixa pop-up com o texto

Atributos title e target
• Utilizamos o atributo target para informar onde o link do novo documento deve ser aberto, sendo
possíveis os seguintes valores:
• _blank (em uma nova janela ou aba)

• _self (na mesma janela do documento que contém o link)
• _parent (em um frame que seja o “pai” do frame* no qual o link se encontra)
• _top (na mesma janela do documento que contém o link)
<a href="pag1.html" target="_blank">Abre em outra janela </a>

<a href="pag2.html" target="_self">Abre na mesma janela </a>
<a href="pag3.html">Abre na mesma janela </a>

Âncoras
• Além de criar links para outras páginas, podemos criar links para uma
determinada seção dentro da própria página na qual o link se encontra.
• Esse recurso chama-se ancoragem, pois as seções para as quais
queremos criar um link devem possuir uma âncora, e para criarmos
este recurso precisaremos do atributo id e o símbolo “#”.

Âncoras
• Precisamos do atributo id para marcar o elemento que é o destino do link. Por exemplo:
<h1 id="secao1">Seção 1</h1>
• Você agora pode criar um link que leve àquele elemento usando o símbolo “#” no atributo
href do link.
• O símbolo “#” informa ao navegador para ficar na mesma página e ele deve ser seguido
pelo valor do atributo id para onde o link vai. Por exemplo:
<a href="#secao1">Link para a seção 1</a>

Âncoras
• Uma utilização muito comum para este recurso é quando temos vários
capítulos ou seções em uma única página com muito conteúdo e para
encontrarmos rapidamente uma parte específica, criando no início da
página um índice com link para cada capítulo ou seção.
• Observação: Para visualizar o efeito de ancoragem em nossa página

precisamos ter conteúdo suficiente para aparecer a barra de rolagem
vertical do navegador, só assim conseguimos perceber o movimento de
deslocamento da âncora.
Exercício de classe
1. Crie duas páginas HTML index.html e contato.html. As duas páginas devem

possuir três links cada, sendo um para a página index, um para a página de
contato e outro para o site do Google (link externo).
2. Crie um documento HTML em um arquivo chamado ancora-pagina1.html que

contenha um link que aponta para uma âncora dentro da própria página. Dica:
insira um conteúdo suficientemente grande para que a barra de rolagem vertical
do navegador apareça e coloque a âncora no final da página.

PROFª. MSC SAHRA
HTML KAROLINA

Dsi Aula02 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

Dsi Aula02 HTML

Enviado por

Direitos autorais:

Formatos disponíveis

PROFª.

O segredo de um site profissional é ter como base um

• A linguagem de marcação de texto HTML baseia-se em etiquetas

3/9/20XX Título da Apresentação 3

• tags estruturais: mudam o posicionamento de elementos na web;

• tags de manipulação de elementos: tornam mais preciso o

3/9/20XX Título da Apresentação 5

3/9/20XX Título da Apresentação 6

Define um comentário

<!DOCTYPE> Define o tipo de documento

<address> Define um endereço (passa a ser tratado como uma seção)

<area> Define uma área dentro de um mapa de imagem

3/9/20XX Título da Apresentação 7

<bdo> Define a direção do texto apresentado

<blockquote> Define uma citação longa

<button> Define um botão de comando

<caption> Define o "caption" de uma tabela

3/9/20XX Título da Apresentação 8

<col> Define os atributos da coluna da tabela

<colgroup > Define um grupo de colunas da tabela

<dfn> Define um termo de definição

<div> Define uma seção no documento

3/9/20XX Título da Apresentação 9

<em> Define um texto em ênfase

<fieldset> Define um conjunto de campos (fieldset)

3/9/20XX Título da Apresentação 10

<iframe> Define uma linha sobre a janela (frame)

<img> Define uma imagem

<kbd> Define um texto do teclado

<label> Define uma "label" para o formulário

3/9/20XX Título da Apresentação 11

<link> Define uma referência

<map> Define uma imagem de mapa

<noscript> Define uma seção noscript

<object> Define um objeto incorporado

3/9/20XX Título da Apresentação 12

<option> Define uma opção em uma lista suspensa (drop-down list)

<p> Define um parágrafo

<q> Define uma citação curta

<s> Define um texto que não é mais correto.

3/9/20XX Título da Apresentação 13

<select> Define uma lista selecionável

<small> Define um pequeno texto

<style> Define um estilo

<sub> Define um texto subscrito

3/9/20XX Título da Apresentação 14

<tbody> Define o corpo da tabela

<td> Define uma célula da tabela

<th> Define o cabeçalho da tabela

<thead> Define o cabeçalho da tabela

3/9/20XX Título da Apresentação 15

<b> Define um texto em negrito

<base> Define uma base url para todos os links da página

<body> Define o corpo da página

<br> Insere uma quebra de linha simples

3/9/20XX Título da Apresentação 16

<cite> Define uma citação

<code> Define o código texto do computador

<dd> Define uma descrição de definição

<del> Define um texto deletado

3/9/20XX Título da Apresentação 17

<dl> Define uma lista de definição

<dt> Define um termo de definição

3/9/20XX Título da Apresentação 18