HTML
HTML
DEFINIÇÕES BÁSICAS
● HTML significa linguagem de marcação de hipertexto;
● HTML é a linguagem de marcação padrão para criação de páginas da Web;
● HTML descreve a estrutura de uma página da Web;
● HTML consiste em uma série de elementos;
● Os elementos HTML informam ao navegador como exibir o conteúdo;
HTML
DOCUMENTOS
● Todos os documentos HTML devem começar com uma declaração de tipo de documento: <!DOCTYPE html>.
○ A declaração <!DOCTYPE> representa o tipo de documento e ajuda os navegadores a exibir as páginas da
web corretamente.
● O próprio documento HTML começa <html> e termina com </html>.
● A parte visível do documento HTML está entre <body> e </body>.
<!DOCTYPE html>
<html>
<body>
<h1>Cabeçalho</h1>
<p>Parágrafo.</p>
</body>
</html>
HTML
ELEMENTOS
● O elemento HTML é tudo, desde a tag inicial até a tag final:
< tagname > O conteúdo vai aqui... < /tagname >
● Nunca esqueça de fechar a tag quando o elemento possuir algum conteúdo, pois poderá gerar problemas na exibição do
elemento no navegador, somente algumas tags não terão necessidade, como por exemplo a quebra de linha <br>.
● Os elementos HTML podem ser aninhados, onde os elementos podem conter outros elementos em níveis filhos, formando
uma árvore de níveis de elementos dentro do <body>:
<body>
<div>
<p>Parágrafo.</p>
</div>
</body>
HTML
ATRIBUTOS
● Todos os elementos HTML podem ter atributos.
● Os atributos fornecem informações adicionais sobre os elementos.
● Os atributos são sempre especificados na tag inicial.
● Os atributos geralmente vêm em pares nome/valor como: nome="valor".
Como por exemplo os atributos src, width, height do elemento imagem:
<img src="[Link]" width="500" height="600">
HTML
FORMATAÇÃO
O HTML contém vários elementos para definir texto com um significado especial que podem ser utilizados dentro do texto
de outros elementos.
● <b> Texto em negrito;
● <strong> Texto importante;
● <i> Texto em itálico;
● <em> Texto enfatizado;
● <mark> Texto marcado;
● <small> Texto menor.
<p>Texto normal. <b>Texto em negrito.</b></p>
<p><i>Texto em itálico.</i></p>
HTML
CABEÇALHOS
● Os cabeçalhos HTML são títulos ou subtítulos de seção utilizados em uma página da web.
● São definidos com as tags de <h1> até <h6>. Onde <h1> define o mais importante e <h6> menos importante.
● Os mecanismos de pesquisa usam os títulos para indexar a estrutura e o conteúdo das suas páginas da web.
● Os usuários costumam folhear uma página pelos títulos. É importante usar títulos para mostrar a estrutura do
documento.
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
HTML
PARÁGRAFOS
● Um parágrafo sempre começa em uma nova linha e geralmente é um bloco de texto,
onde os navegadores adicionam automaticamente algum espaço em branco (uma
margem) antes e depois de um parágrafo.
● O elemento HTML <p> define um parágrafo.
<p>Isto é um parágrafo.</p>
<p>Isto é outro parágrafo.</p>
HTML
LINKS
● Os links permitem que os usuários naveguem de uma página para outra.
● Links HTML são hiperlinks que tem a referência de uma página web.
● Quando você move o mouse sobre um link, o cursor do mouse se transforma em uma pequena mão.
● A tag HTML <a> define um hiperlink, o atributo href define a página de destino e o target como a nova página será
aberta, seguindo a seguinte sintaxe:
<a href="[Link] target="_blank">Visite a IPM!</a>
HTML
IMAGENS
● As imagens podem melhorar o design e a aparência de uma página da web.
● A tag HTML <img> é usada para incorporar uma imagem em uma página da web.
● As imagens não são tecnicamente inseridas em uma página da web, estão vinculadas a páginas da web. A <img>
tag cria um espaço de retenção para a imagem referenciada.
● A tag <img> é vazia, contém apenas atributos e não possui tag de fechamento.
● A tag <img> tem dois atributos principais:
○ src - Especifica o caminho para a imagem;
○ alt - Especifica um texto alternativo para a imagem (exibido enquanto não renderizado a imagem).
<img src="[Link]" alt="Texto alternativo descrição da imagem">
HTML
LISTAS
● As listas HTML permitem agrupar um conjunto de itens relacionados em listas.
● Lista não ordenada:
○ Uma lista não ordenada começa com a tag <ul>.
○ Os itens da lista serão marcados com marcadores (pequenos círculos pretos).
● Lista ordenada:
○ Uma lista ordenada começa com a tag <ol>.
○ Os itens da lista serão marcados com números por padrão.
● Cada item da lista começa com a tag <li>.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
HTML
TABELAS
● As tabelas HTML permitem que organizem os dados em linhas e colunas.
● Linhas da tabela:
○ Cada linha da tabela começa com um <tr> e termina com uma tag </tr>.
● Colunas da tabela:
○ Cada título da coluna da tabela é definida por um <th> e uma tag </th> dentro da linha.
○ Cada coluna de conteúdo da tabela é definida por um <td> e uma tag </td> dentro da linha.
<table>
<tr>
<th>Título Coluna 1</th>
<th>Título Coluna 2</th>
</tr>
<tr>
<td>Conteúdo Coluna 1</td>
<td>Conteúdo Coluna 2</td>
</tr>
</table>
HTML
DIV
● A tag <div> define uma divisão ou seção em um documento HTML.
● A tag <div> é usada como um contêiner para elementos HTML – que são então estilizados com CSS ou
manipulados em comportamentos JavaScript.
● A tag <div> é facilmente estilizada usando o atributo class ou id.
● Qualquer tipo de conteúdo pode ser colocado dentro da tag <div>.
● Por padrão, os navegadores sempre colocam uma quebra de linha antes e depois do elemento <div>.
<div class="container">
<h1>Conteúdo do Cabeçalho.</h1>
<p>Conteúdo do parágrafo.</p>
</div>
EXERCÍCIOS
Lista de Exercícios 1
HTML
FORMULÁRIOS
● Um formulário HTML é usado para coletar a entrada de dados do usuário.
● Esses dados informados pelo usuário geralmente são enviados a um servidor para processamento.
● O elemento HTML <form> é usado para criar um formulário HTML.
● Atributos principais do formulário HTML:
○ O atributo action define o nome do arquivo no servidor em que as informações serão enviadas quando
o usuário clica no botão de submit.
○ O atributo method especifica o método HTTP a ser usado ao enviar os dados do formulário:
■ GET (method="get"): Os dados do formulário serão enviados visivelmente como variáveis na
composição da URL (Query String - Name x Value);
■ POST (method="post"): Os dados do formulário serão enviados no corpo da requisição HTTP.
Indicado para formulários com dados sensíveis como de login que irá conter o campo de senha.
HTML
FORMULÁRIOS
Os formulários podem ser compostos por vários elementos em que o usuário irá efetuar a entrada de dados:
● Um dos mais utilizados é o elemento <input>.
● O elemento <input> pode ser exibido de diversas maneiras (aceitar tipos de valores diferentes), dependendo do
atributo type (text, checkbox, date, file, number, password, button, submit, ...).
● Toda input deverá possuir os atributos id e name com o mesmo valor que deverá ser único para a página HTML
(não possuindo outra input com a mesma informação), onde o id é responsável por permitir aos comportamentos
JavaScript localizar o campo e o name responsável para o servidor localizar o campo quando é efetuado o submit
do formulário para o arquivo de action.
● Também é importante criar um elemento label para todos os elementos de input que será responsável por exibir um
título para aquele campo além de disponibilizar acessibilidade na navegação. Essa label deverá possuir o atributo
for que conterá o mesmo valor do atributo id de sua input relacionada.
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
HTML
FORMULÁRIOS
● A seguir um exemplo de formulário que contém os atributos principais, input para entrada de dados e input de
submit para o envio de informações:
<form action="/[Link]" method="post">
<label for="nome">Nome:</label><br>
<input type="text" id="nome" name="nome"><br>
<label for="sobrenome">Sobrenome:</label><br>
<input type="text" id="sobrenome" name="sobrenome"><br><br>
<input type="submit" value="Enviar">
</form>
EXERCÍCIOS
Lista de Exercícios 2