0% acharam este documento útil (0 voto)

35 visualizações24 páginas

Aula 2 - HTML Parte 1

Enviado por

nicollasprovatti.14

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

35 visualizações24 páginas

Aula 2 - HTML Parte 1

Enviado por

nicollasprovatti.14

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 24

INTRODUÇÃO AO DESENVOLVIMENTO WEB

Semana 1 - Aula 2
HTML Parte 1
Agenda
PRINCIPAIS TÓPICOS DISCUTIDOS
NESTA APRESENTAÇÃO

Estrutura básica de um documento HTML

Tags, elementos e atributos HTML
Criação de uma página simples utilizando HTML
Estrutura de um documento HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
</body>
</html>
Estrutura de um documento HTML
<!DOCTYPE html>
Indica que o documento atual será escrito na versão
mais atualizada da linguagem (no caso, HTML5)

<html lang="pt-br"> Delimitam o documento HTML, que é sempre

. dividido em duas partes: a cabeça e o corpo. Na
.
. linha 2, também estamos indicando que o conteúdo
</html>
desse site será no idioma Português do Brasil.

<head> Delimitam a cabeça da página, local onde são

.
. realizadas algumas configurações iniciais como
.
</head>
formatos, estilos, ícone de favoritos, etc.
Estrutura de um documento HTML
adiciona ao documento atual o suporte a
<meta charset="UTF-8">
caracteres acentuados. Remover essa linha pode
causar erros de renderização de algumas letras
na tela.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Indica que o conteúdo aparecerá, por padrão, ocupando todo o

espaço disponível da tela e com uma escala de 1:1.
Estrutura de um documento HTML

<title>Document</title> Configura o título da página, que aparecerá como

identificação da aba do navegador, ao lado do
favicon.

<body>
. Delimitam o corpo da página, a maior porção do site, que vai
. aparecer na tela. É aqui onde colocaremos todo o nosso
.
</body> conteúdo.
Tag

O que são tags ?

Tags HTML são elementos que são usados para definir e marcar diferentes partes do
conteúdo em uma página web. Elas são cercadas por colchetes angulares < > e podem
conter atributos e/ou conteúdo entre elas.

Sintaxe das Tags:

A maioria das tags HTML segue uma sintaxe básica, com uma tag de abertura <tag> que
marca o início do elemento e uma tag de fechamento </tag> que marca o fim do
elemento. O conteúdo que deve ser marcado pela tag é colocado entre as tags de abertura
e fechamento.
Tag

Tags de Abertura e Fechamento:

Algumas tags em HTML requerem uma tag de fechamento correspondente, enquanto

outras não. As tags que exigem uma tag de fechamento são conhecidas como tags de par
e incluem elementos como parágrafos <p>, cabeçalhos <h1>, listas <ul>, <ol>, entre outros.

Por outro lado, as tags que não requerem uma tag de fechamento são conhecidas como
tags vazias ou auto-fechadas e são usadas para inserir elementos que não possuem
conteúdo adicional, como quebras de linha <br>, imagens <img>, entre outros
Elementos
Exemplos de Tags HTML: O elemento HTML é tudo, desde a tag inicial até a tag final.

<h1> a <h6>: Cabeçalhos de diferentes níveis.

<p>: Parágrafos de texto.
<a>: Links.
<img>: Imagens.
<ul> e <ol>: Listas não ordenadas e ordenadas, respectivamente.
<li>: Itens de lista.
<table>: Tabelas.
<tr>: Linhas de uma tabela.
<td>: Células de uma tabela.
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"

Atributos

<img src= “foto.png” alt= “Exemplo de foto”>

especifica
caminho

<a href= “https://www.google.com.br”> </a>

especifica o
destino
Cabeçalhos HTML

Os títulos HTML são títulos ou legendas que você deseja exibir em uma página da web.

Os títulos HTML são definidos com as tags <h1> ao <h6>.

<h1>define o título mais importante. <h6>define o título menos importante.

Nota: Use títulos HTML apenas para títulos. Não use títulos para deixar o texto GRANDE
ou em negrito.
Parágrafos HTML

Um parágrafo sempre começa em uma nova linha e geralmente é um bloco de texto.

O elemento HTML <p>define um parágrafo.

Com HTML, você não pode alterar a exibição adicionando espaços ou linhas extras em
seu código HTML.

O navegador removerá automaticamente quaisquer espaços e linhas extras quando a

página for exibida.
Linha Horizontal e Quebra de Linha
A <hr>tag define uma quebra temática em uma página HTML e geralmente é exibida
como uma regra horizontal.

O <hr>elemento é usado para separar o conteúdo (ou definir uma alteração) em uma
página HTML:

O elemento HTML <br>define uma quebra de linha.

Use <br>se desejar uma quebra de linha (uma nova linha) sem iniciar um novo
parágrafo:

A <br>tag é uma tag vazia, o que significa que não possui tag final.
Estilos HTML
O atributo HTML style usado para adicionar estilos a um elemento, como cor, fonte,
tamanho e muito mais.

O atributo HTML style possui a seguinte sintaxe: <tagname style="property:value;">

Use o style atributo para estilizar elementos HTML

Use background-color para cor de fundo
Use color para cores de texto
Use font-family para fontes de texto
Usar font-size para tamanhos de texto
Use text-align para alinhamento de texto
Formatação de Texto HTML
HTML contém vários elementos para definir texto com um significado especial.
Os elementos de formatação foram projetados para exibir tipos especiais de texto:

<b> - Texto em negrito

<strong> - Texto importante
<i> - Texto em itálico
<em> - Texto enfatizado
<mark> - Texto marcado
<small> - Texto menor
<del> - Texto excluído
<ins> - Texto inserido
<sub> - Texto subscrito
<sup> - Texto sobrescrito
Cotação HTML e elementos de citação

<abbr> - Define uma abreviatura ou sigla

<address> - Define informações de contato do autor/proprietário de um documento

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

<blockquote> - Define uma seção que é citada de outra fonte

<cite> - Define o título de uma obra

<q> - Define uma pequena cotação embutida

Comentários

Os comentários HTML não são exibidos no navegador, mas podem ajudar a

documentar seu código-fonte HTML.

Você pode adicionar comentários à sua fonte HTML usando a seguinte sintaxe:

Observe que há um ponto de exclamação (!) na tag inicial, mas não na tag final.
HTML Links
Links são encontrados em quase todas as páginas da web. Os links permitem que os
usuários cliquem de uma página para outra.

Nota: Um link não precisa ser texto. Um link pode ser uma imagem ou qualquer outro
elemento HTML!

A tag HTML <a>define um hiperlink. Possui a seguinte sintaxe:

<a href="url">texto link</a>

O atributo mais importante do <a> elemento é o href atributo, que indica o destino do link.
O texto do link é a parte que ficará visível ao leitor.
HTML Links
Por padrão, os links aparecerão da seguinte forma em todos os navegadores:

Um link não visitado está sublinhado e azul

Um link visitado está sublinhado e roxo
Um link ativo está sublinhado e vermelho

Nota: É claro que os links podem ser estilizados com CSS, para dar uma outra olhada!
HTML Links
Por padrão, a página vinculada será exibida na janela atual do navegador. Para alterar
isso, você deve especificar outro destino para o link.
O atributo target especifica onde abrir o documento vinculado.

O targetatributo pode ter um dos seguintes valores:

_self - Padrão. Abre o documento na mesma janela/aba em que foi clicado

_blank - Abre o documento em uma nova janela ou guia
_parent - Abre o documento no quadro pai
_top - Abre o documento em todo o corpo da janela
HTML Links
URL Absoluto:
Um URL absoluto é uma forma completa de especificar o endereço de um recurso na
web. Ele inclui o protocolo de comunicação (como HTTP ou HTTPS), o nome de
domínio completo (como www.exemplo.com) e o caminho completo para o recurso
(como /pasta/recurso/arquivo.html).

URL Relativo:
Um URL relativo é uma forma simplificada de especificar o endereço de um recurso em
relação ao contexto atual. Em vez de incluir o protocolo e o nome de domínio
completos, um URL relativo descreve o caminho para o recurso em relação ao local
atual.
Símbolos
Símbolos ou letras que não estão presentes no teclado podem ser adicionados ao
HTML usando entidades.
Char Number Entity Description
© © © COPYRIGHT
∀ ∀ ∀ For all
® ® ® REGISTERED
Partial
€ € € EURO SIGN ∂ ∂ ∂
differential