Aula 1 - Revisão de HTML

Desenvolvimento para Clientes Web
HTML
Professor: Marcel Melo
Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano - Campus Morrinhos - Professor Marcel Melo - marcel.melo@ifgoiano.edu.br
HTML
• HTML é uma linguagem de marcação para criação de páginas web.
• HTML significa Hyper Text Markup Language;
• HTML é uma linguagem de marcação (markup language);
• Uma linguagem de marcação é um conjunto de tags de marcação;
• As tags descrevem o conteúdo do documento;
• Um documento HTML contem tags HTML e texto simples;
• Documentos HTML também são chamados de páginas web.

Tags HTML
• As tags de marcação do HTML são normalmente chamadas de tags
HTML.
• As tags HTML são palavras-chaves (tag names) no seguinte formato <tag-
name>;
• As tags HTML normalmente aparecem em pares como <p> e </p>;
• A primeira tag no par é chamada de tag início, e a segunda tag é chamda
de tag final;
• Responsáveis pela estruturação e formatação do texto.

Elementos HTML
• Um element HTML inicia com uma tag ínicio / tag de abertura;
• Um element HTML termina com a tag final/ tag de fechamento;
• O conteúdo do elemento é tudo que está entre as tags de ínicio e fim;
• Alguns elementos HTML não possuem conteúdo ( Elementos vazios);
• Elementos vazios são fechados na tag de início;
• Muitos elementos HTML têm atributos;

Atributos HTML
• Elementos HTML podem possuir atributos;
• Atributos fornecem informação adicional sobre o elemento;
• Atributos são sempre especificados na tag de inicio;
• Atributos são especificados em pares nome/valor como: name=“value”
• Valores de atributos devem sempre estar inclusos entre aspas.
• Nomes e valores de atributos são case-insensitive, mas o W3C
recomenda utilizar atributo/atributos com letra minúscula (lowercase);

Estrutura de um documento HTML

Tag <html>
• Todos elementos HTML, com exceção do DOCTYPE, devem ser inseridos como
conteúdo do elemento html.
• Esse elemento é aberto com a tag <html>, fechado com a tag </html> e deve
conter exatamente um elemento head seguido de exatamente um elemento body.
• Diversos autores recomendam a utilização do atributo lang. Esse atributo indica a

língua utilizada no documento HTML ou na maior parte dele.
• A Tag <html> representa o inicio, e consequentemente o fim, de um documento

HTML.

Tag <head>
• A principal função do elemento head é agrupar informações sobre
o documento HTML (metainformação).
• São exemplos de metainformações: o encoding, a taxa de

atualização, o autor, a descrição e as palavras chaves do
documento HTML.
• Dentro da tag <head> deve conter um elemento <title>, que

define o título do documento HTML.

Tag <head>
• TITLE – Título da página a ser exibido (texto que fica na aba de seu
navegador quando uma página esta aberta)
• <title>Página de texte</title>
• LINK – Geralmente usado para selecionar arquivo externo no

HTML.
• Um uso comum dele é para selecionar arquivos CSS.
• <link href=“estilo.css" type=“text/css" rel=“stylesheet" />

Tag <head>
• Metatags – São tags HTML que descrevem o conteúdo do site para os
buscadores e fornecem informações adicionais sobre seu site.
• Definir palavras-chave
• <meta name="keywords" content="sites, web, desenvolvimento, html, design">
• Definir a autoria do código-fonte
• <meta name=“author" content=" Marcel Melo ">
• Define a linguagem primária da página
• <meta http-equiv="content-language" content="pt-br">
• Especifica o tipo de conteúdo da página e o conjunto de caracteres que ela usa.
• HTML 5 - <meta charset=“UTF-8">
• Demais - <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />

Tag <body>
• O conteúdo de uma página web deve ser definido no corpo do
elemento body.
• Estão todos elementos visíveis aos usuários.
• O elemento <body> contém todo o conteúdo de um documento

HTML, como textos, hiperlinks, imagens, tabelas e listas.

Headings HTML
• Headings, ou títulos, são definidos pelas tags de <h1> a <h6>.
• A tag <h1> define o heading mais importante enquanto a tag <h6>
define o heading menos importante.
• Use headings HTML apenas para títulos ou cabeçalhos. Não use o
heading para fazer o texto ficar Grande ou negrito.
• Os motores de busca utilizam os headings para indexar a estrutura
e o conteúdo de suas páginas web.

Parágrafos HTML
• Parágrafos em HTML são definidos usando a tag <p>.
• Nagegadores adicionam automaticamente uma linha vazia antes e

depois de um parágrafo.
<p>Sou um pequeno parágrafo</p>
• Use a tag <br> se for necessário quebrar a linha sem começar um

novo parágrafo.
<br />

Tag <span>
• Tag inline usada para marcar um trecho de texto.
• Frequentemente usada para personalizar um trecho de texto em um
parágrafo.
• Normalmente, não altera nada no HTML.
<p>Sou um<span>pequeno parágrafo</span></p>

Formatação de texto
Tag Descrição
<b> Define o texto como negrito
<i> Define o texto como itálico
<u> Define o texto sublinhado
<em> Define ênfase no texto (itálico)
<small> Define o texto pequeno
<Strong> Define o texto como importante (negrito)
<sub> Define um texto subscrito
<sup> Define um texto sobrescrito
<ins> Define um texto como inserido
<del> Define um texto deletado
<mark> Define um texto marcado/realçado

Tags HMTL para saída de Computador
Tag Descrição
<code> Define um código fonte de computador
<kbd> Define um texto de teclado
<samp> Define uma amostra de código fonte
<var> Define uma variável
<pre> Define um texto pré-formatado

Comentário em HTML
• Para inserir comentários em HTML basta adicionar o comentário
entre as tags .
• Pode-se inserir comentários condicionais em HTML.


Imagem
• A tag para exibir imagens em uma página HTML é <img>.
• A tag img é vazia, ou seja, contem apenas a tag de ínicio.
• Ela possui 2 atributos que devem ser preenchidos: src e alt.
• src: aponta para o diretório da imagem.
• alt: texto para ser exibido caso a imagem não seja carregada ou
visualizada.
• height: valores de altura da imagem.
• width: valores de largura da imagem.

Links
• Uma hiperlink (ou link) é uma palavra, grupo de palavras, ou uma a
imagem que quando clicado redireciona a página para outro
documento ou site externo.
• Um atributo importante é o href que indica o destino do link.

• Um link não visitado é formatado como sublinhado e azul;
• Um link visitado é formato como sublinhado e roxo;
• Um link ativo é formatado como sublinhado e vermelho;

Listas HTML
• Lista ordenada • Lista não-ordenada

<ol> <ul>
<li>Coffee</li> <li>Coffee</li>
<li>Milk</li> <li>Milk</li>
</ol> </ul>

Tabelas HTML
• Tabelas são usadas para demarcar uma tabela.
• Sâo definidas usando a tag <table>
• Linhas são criadas usando a tag <tr> ( table row)
• rowspan – Atributo da tag <tr> que agrupa linhas
• Indica que a linha vai ocupar o espaço de duas linhas
• Colunas são criadas usando a tag <td> (table data)
• colspan – Atributo da tag <td> que agrupa linhas
• Indica que uma coluna vai ocupar o espaço de duas colunas
• Cabeçalhos de tabelas são definidos usando a tag <th>

Tabelas HTML
<table>
<tr>
<td>Primeira coluna da primeira linha</td>
<td>Segunda coluna da primeira linha</td>
</tr>
<tr>
<td>Primeira coluna da segunda linha</td>
<td>Segunda coluna da segunda linha</td>
</tr>
</table>

Elemento <div>
• Elemento que pode ser usado como contêiner para agrupar outros
elementos HTML.
• O elemento <div> não tem um significado especial

• Por ser um elemento de bloco, o browser irá pular uma linha entre uma div e outra.
• Usada para criar o layout da página.

• Substitui a definição de layouts usando tabelas

Form
• Formulários são usados para passar informações para o servidor
• Um formulário é representado pela tag <form> e encapsula todos elementos de

entrada.
• Possui um atributo importante

• action – determina qual a ação vai ser executada quando o formulário for submetido
<form action=“salvarDados.php”>
.......
</form>

Input
• O elemento mais importante do formulário é o <input>
• Pode assumir várias formas dependendo do atributo type

• <input type="text"> - Define uma linha para entrada de texto
• <input type="password"> - Define uma entrada do tipo senha
• <input type="radio"> - Define um radio button
• <input type="checkbox"> - Define um checkbox
• <input type="submit"> - Cria um botão de submit
• <input type=“file"> - Cria um campo para upload de arquivos

Input
• InputText
<input type="text" name="firstname">
• Password Field
<input type="password" name="pwd">
• Submit button
<input type="submit" value="Submit">

Radio Button e Checkbox
• Radio Button
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
• Checkbox
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
• Itens de um RadioButton ou Checkbox devem ter o atributo name com o

mesmo valor.

TextArea
• A tag <textarea> tem um comportamento semelhante ao do input text,
porém ele é destinado a textos maiores.
• Possui dois atributos importantes

• rows – Indica o número de linhas que a textarea irá possuir
• cols – Indica o número de colunas que a textarea irá possuir
<textarea rows="10" cols="30">

Default Text
</textarea>

Select
• A tag <select> é usada para criar uma lista drop-down.
• Cada item é adicionado utilizando a tag <option>.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Label
• Permite que se atribua uma legenda a um campo do formulário.
<label>Sou uma legenda

<input type="text" />
</label>
<label for="campo">Sou uma legenda</label>

<input type="text" id="campo" />

HTML5
• <header> - Limita o cabeçalho da página ou de uma seção
• Substitui a tradicional <div id=“cabecalho”>
• Não confundir com a tag <head>, obrigatório no documento HTML
• A tag <header> é utilizada dentro da tag <body>
• Usado como contêiner para um conteúdo introdutório
• <footer> - Limita o rodapé da página ou de uma seção

• Substitui a tradicional <div id=“rodape”>
• <aside> - Utilizada para demarcar regiões laterais das páginas que

geralmente carregam elementos de navegação, ou informações
auxiliares ao conteúdo principal.

HTML 5
• <section> - Tem funcionamento semelhante a <div> porém ela serve
para demarcar que um bloco de conteúdo possui uma relação mais
próxima.
• Uma seção é um grupo de conteúdo que tipicamente possui um cabeçalho.
• <article> - Define o conteúdo independente e auto-contido de uma

página
• Forum post, blog post, comment
• <nav> - Usada para definir um conjunto de links de navegação

• Agrupa links de navegação

HTML 5

HTML 5
• <figure> - Identifica diagramas, figuras, ilustrações, fragmentos de
código.
• Utilizado em conjunto com o elemento <figcaption>
• <figcaption> - Destina-se a identificação de uma legenda para uma

figura.
<figure>
<img src=“teste.jpg" alt=“Figura Teste" width="304" height="228">
<figcaption>Fig1. - Teste.</figcaption>
</figure>

Aula 1 - Revisão de HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aula 1 - Revisão de HTML

Transféré par

Droits d'auteur :

Formats disponibles

Desenvolvimento para Clientes Web

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Diversos autores recomendam a utilização do atributo lang. Esse atributo indica a

• A Tag <html> representa o inicio, e consequentemente o fim, de um documento

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• São exemplos de metainformações: o encoding, a taxa de

• Dentro da tag <head> deve conter um elemento <title>, que

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• LINK – Geralmente usado para selecionar arquivo externo no

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Estão todos elementos visíveis aos usuários.

• O elemento <body> contém todo o conteúdo de um documento

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Nagegadores adicionam automaticamente uma linha vazia antes e

• Use a tag <br> se for necessário quebrar a linha sem começar um

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Normalmente, não altera nada no HTML.

<p>Sou um<span>pequeno parágrafo</span></p>

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

<kbd> Define um texto de teclado

<samp> Define uma amostra de código fonte

<var> Define uma variável

<pre> Define um texto pré-formatado

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Pode-se inserir comentários condicionais em HTML.

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Um atributo importante é o href que indica o destino do link.

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Lista ordenada • Lista não-ordenada

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Cabeçalhos de tabelas são definidos usando a tag <th>

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• O elemento <div> não tem um significado especial

• Usada para criar o layout da página.

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Um formulário é representado pela tag <form> e encapsula todos elementos de

• Possui um atributo importante

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Pode assumir várias formas dependendo do atributo type

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Itens de um RadioButton ou Checkbox devem ter o atributo name com o

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Possui dois atributos importantes

<textarea rows="10" cols="30">

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• Cada item é adicionado utilizando a tag <option>.

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

<label>Sou uma legenda

<label for="campo">Sou uma legenda</label>

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo

• <footer> - Limita o rodapé da página ou de uma seção

• <aside> - Utilizada para demarcar regiões laterais das páginas que

Instituto Federal Goiano – Campus Morrinhos – Professor Marcel Melo