0% acharam este documento útil (0 voto)

183 visualizações

Tutorial em HTML5

O documento fornece uma introdução completa sobre HTML, cobrindo tópicos como: 1) O que é HTML e como ele estrutura páginas da web; 2) Exemplos básicos de elementos HTML como cabeçalhos, parágrafos e links; 3) Uso de tags, atributos e aninhamento de elementos.

Enviado por

Heddie Martins

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)

183 visualizações

Tutorial em HTML5

Enviado por

Heddie Martins

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/ 16

Tutorial em HTML5

WWW.100DEVSHUB.COM
HTML
HTML é a linguagem de marcação padrão para páginas da Web. Com o HTML você pode
criar o seu próprio site...
HTML é muito fácil de aprender, você vai ver a seguir!

Exemplo:
<!DOCTYPE html>
<html>
<head>
<title> Título da Página </title>
</head>
<body>

<h1> Aqui é um Título </h1>

<p> Aqui fica um parágrafo </p>

</body>
</html>

HTML INTRODUÇÃO
HTML significa – Hyper Text Markup Language.
HTML descreve a estrutura de uma página da Web.
HTML consiste em uma série de elementos
Elementos HTML dizem ao navegador como o conteúdo será exibido
Elementos HTML são representados por tags.
Tags HTML classificam o conteúdo, como título, parágrafo, etc.
Os navegadores não exibirão as tags, mas as utiliza para processar o conteúdo daquela
página.
Documento HTML Simples:
<!DOCTYPE html>
<html>
<head>
<title> Título da Página </title>
</head>
<body>

<h1> Meu Primeiro Título </h1>

<p> Meu primeiro parágrafo </p>

</body>
</html>

Explicando o exemplo:
 <!DOCTYPE html> é uma declaração que define o documento como HTML5.
 <html> é um elemento no caso, o elemento raiz de uma página HTML
 <head> é um elemento que contém informações meta sobre o documento.
 <title> é um elemento que especifica um título para o documento
 <body> é um elemento que contém o conteúdo da página visível
 <h1> é um elemento que define um cabeçalho grande.
 <p> é um elemento que define um parágrafo.

Tags HTML
Tags HTML são nomes de elementos cercados por colchetes angulares

O conteúdo <nomedatag> vai aqui dentro... </nomedatag>

As Tags HTML geralmente, vêm em pares como <p> e </p>, a primeira tag em um par é
a tag de início (ou tag de abertura) e a segunda é a tag de término (ou tag de
fechamento). A tag final, ou de fechamento, é escrita da mesma maneira que a tag de
início com uma barra antes do elemento.
Traduzindo: A Tag de abertura, ou de início ABRE o conteúdo daquele elemento, e vai
INICIÁ-LO, enquanto a tag de fechamento, ou de término está FECHANDO aquele
conteúdo, ou seja está TERMINANDO.

Navegadores da Web
O objetivo de um navegador da Web (Chrome, Firefox, Safari, Edge) é ler os documentos
HTML e exibi-los.
O navegador não irá exibir as tags, mas irá utilizá-las para determinar como exibir o
documento.
 A declaração <!DOCTYPE> representa o tipo de documento e ajuda os
navegadores a exibir as páginas da web corretamente. Ela deve aparecer somente
uma vez no topo da página, antes de qualquer outra tag.

EDITORES DE HTML
Para aprender HTML, recomendo que você utilize um editor de texto simples como o
Notepad (PC) ou o TextEdit (Mac). O uso de um editor de texto simples nesse momento,
facilitará o seu aprendizado. Para criar a sua primeira página na Web é só seguir os passos
abaixo:

Passo 1: Abra o Bloco de Notas Passo 1:Abra o TextEdit (Mac)

(PC) Abra o Finder > Aplicações > TextEdit
Windows 8 ou posterior: Além disso, altere algumas preferências
Abra a tela inicial digite bloco de notas. para que o aplicativo salve os arquivos
da maneira correta. Em Preferências>
Windows 7 ou anterior: Formatar > escolha “Texto Simples”.
Abra Iniciar > Programas > Acessórios Em seguida, em “Abrir e Salvar” marque
> Bloco de Notas a caixa “exibir arquivos HTML como
código HTML em vez de texto
formatado”. E depois abra um novo
documento para colocar o código.

Passo 2: Escreva algum HTML

Escreva ou copie um pouco de HTML no Bloco de Notas.
<!DOCTYPE html>
<html>
<body>

<h1>Meu primeiro título</h1>

<p>Meu primeiro parágrafo</p>
</body>
</html>
O seu bloco de notas ficará assim:

Passo 3: Salvar a página HTML

Salve o arquivo no seu computador. Selecione Arquivo > Salvar como no menu Bloco
de Notas.
Nomeie o arquivo “index.htm” e defina a codificação como UTF-8 (que é a codificação
preferencial para arquivos HTML).

Passo 4: Visualize a página HTML no seu navegador

Abra o arquivo HTML salvo em seu navegador favorito (clique duas vezes no arquivo
ou clique com o botão direito do mouse e escolha “abrir com”)

O resultado irá parecer com isso:

EXEMPLOS BÁSICOS DE HTML

Documentos HTML

Todos os documentos HTML deve começar com uma declaração do tipo de documento:
<!DOCTYPE html>.

O próprio documento HTML começa com <html> e termina com </html>.

A parte visível do documento HTML está entre <body> e </body>.

Exemplo:

<!DOCTYPE html>
<html>
<body>

<h1>Meu primeiro título</h1>

<p>Meu primeiro parágrafo</p>

</body>
</html>

Cabeçalhos HTML
Os títulos HTML são definidos como as tags <h1> até <h6>. Sendo que <h1> define o
cabeçalho mais importante, enquanto <h6> define o cabeçalho menos importante:

Exemplo:

<h1>Isso é o título 1</h1>

<h2>Título 2</h2>

<h3>Título 3</h3>

Parágrafos HTML

Os parágrafos HTML são definidos com a <p> tag:

Exemplo:

<p> Isso é um parágrafo.</p>

<p>Isso é outro parágrafo.</p>

Links HTML

Links HTML são definidos com a <a>tag:

Exemplo:

<a href=https://www.devshub.com.br>Esse é o link</a>

O destino do link é especificado no hrefatributo. Sendo que, os atributos são utilizados

para fornecer informações adicionais sobre elementos HTML. Falaremos mais sobre
atributos daqui a pouco...

Imagens HTML

Imagens HTML são definidas com a tag <img>. O arquivo de origem ( src), texto
alternativo ( alt) largura (width) e altura (height) são fornecidos como atributos.

Exemplo:

<img src=”devshub.jpg” alt=”devshub.com.br” width=”104” height=”142”>

Botões HTML

Botões HTML ão definidos com a tag <button>.

Exemplo:
<button> Clique aqui </button>

Listas de HTML
As listas HTML são definidas com a tag <ul> (unordered/bullet list = não ordenada) ou a
tag <ol> (ordered/numbered list = ordenada), seguida por tags <li> (itens de lista)
Exemplo:
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>

<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>

ELEMENTOS HTML

Geralmente um elemento HTML consiste em uma tag de início e uma tag de finalização,
com o conteúdo inserido entre essas tags.

<tagname> O conteúdo....</tagname>

O elemento HTML é tudo, desde a tag inicial, até a tag final:

<p>Meu primeiro parágrafo.</p>

Tag Inicial Elemento Tag Final

<h1> Meu primeiro titulo </h1>

<p> Meu primeiro Parágrafo </p>

<br>

Existem elementos HTML sem conteúdo, eles são chamados de elementos vazios.
Elementos vazios não possuem uma tag final, como o elemento <br> que indica uma
quebra de linha.

Elementos HTML Aninhados

Elementos HTML podem ser aninhados (elementos podem conter elementos). Todos os
documentos HTML consistem em elementos HTML aninhados. O exemplo a seguir
contém quatro elementos HTML:

Exemplo:

<!DOCTYPE html>

<html>

<body>

<h1> Meu primeiro título</h1>

<p>Meu primeiro parágrafo</p>

</body>

</html>

Exemplo explicado:

 O elemento <html> define o documento inteiro.

Tem uma tag de início <html> e uma tag de fim </html>

Dentro do elemento <html> temos o elemento <body>

 O elemento <body> define o corpo do documento.

Tem uma tag de início <body> e uma tag de fim </body>

Dentro do elemento <body>, há outros dois elementos HTML: <h1> e <p>.

 O elemento <h1> define um cabeçalho.

Tem uma tag de início <h1> e uma tag de fim </h1>.

O conteúdo do elemento é: Me primeiro Título

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

Tem uma tag de início <p> e uma tag de fim </p>.

O conteúdo do elemento é: Meu primeiro parágrafo.

Não Esqueça a Tag Final

Alguns elementos HTML são exibidos corretamente mesmo se você esquecer a tag
final.

Exemplo:

<html>

<body>

<p> paragrafo x

<p> parágrafo y

</body>

</html>

Nesse exemplo, podemos ver uma situação que funciona em odos os navegadores, porque
a tag de fechamento é considerada opcional nesse caso. Porém nunca confie nisso! Pode
produzir resultados inesperados e/ou erros se você se esquecer da tag final.

Elementos HTML vazios

Elementos HTML sem conteúdo são chamados de elementos vazios.

<br> é um elemento vazio, sem uma tag de fechamento (a tag <br> define uma quebra
de linha).

Exemplo:

<p> isso é um <br> parágrafo com uma quebra de linha.</p>

Elementos fazios podem ser “fechados” na tagde abertura: <br/>. Porém o HTML5 não
exige que elementos vazios sejam fechados, mas se você quiser uma validação mais
criteriosa, ou precisar tornar seu documento legível por analisadores XML, deve fechar
todos os elementos corretamente.

HTML não é sensível a maiúsculas e minúsculas

Tags HTML não diferenciam maiúsculas de minúsculas: <P> significa exatamente a

mesma coisa que <p>. O que indicamos é que usemos sempre as letras minúsculas.

ATRIBUTOS HTML

Os atributos fornecem informações adicionais sobre elementos HTML.

 Todos os elementos HTML podem ter atributos

 Atributos fornecem informações adicionais sobre um elemento
 Atributos são sempre especificados na tag de início
 Atributos geralmente vêm em pares nome/valor como: nome= ”valor”

O Atributo href

Links HTML são definidos com a tag <a>. O endereço do link é especificado no atributo
href.

Exemplo:

<a href=https://www.devshub.com.br”> isso é um link</a>

Nesse ebook você aprenderá mais sobre links e a tag <a>.

O Atributo src

Imagens HTML são definidas com a tag <img>. O nome do arquido da origem da imagem
é especificado no atributo src.

Exemplo:

Atributos de largura e altura

As imagens HTML também possuem width e height atributos, o que especifica a

largura e a altura da imagem:

Exemplo:
<img scr=”img_girl.jpg” width=”500” height=”600”>

A largura e altura são especificadas em pixels por padrão; então largura= “500”
significa 500 pixels de largura.

Você aprenderá mais sobre imagens em outro capítulo.

O Atributo alt

O atributo alt especifica um texto alternativo a ser usado, se uma imagem não puder ser
exibida.

O valor do atributo alt pode ser lido pelos leitores de tela. Dessa forma, alguém
“escutando” a página, por exemplo, uma pessoa com deficiência visual, pode “ouvir” o
elemento.

Exemplo:

<img src=”img_girl,jpg” alt=”Garota com uma jaqueta”>

O atributo alt também é útil se a imagem não puder ser exibida (por exemplo, se não
existir).

O Atributo Estilo

O atributo style (estilo) é usado para especificar o estilo de um elemento, como cor, fonte,
tamanho, etc.

O estilo Atributo
O styleatributo é usado para especificar o estilo de um elemento, como
cor, fonte, tamanho etc.

Exemplo
<p style="color:red">This is a paragraph.</p>

Tente você mesmo "

Você aprenderá mais sobre estilo mais adiante neste tutorial e no

nosso Tutorial de CSS .
Atributo lang
A linguagem do documento pode ser declarada na <html>tag.

O idioma é declarado com o langatributo.

Declarar um idioma é importante para aplicativos de acessibilidade

(leitores de tela) e mecanismos de pesquisa:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

As primeiras duas letras especificam o idioma (en). Se houver um

dialeto, adicione mais duas letras (US).

O título Atributo
Aqui, um titleatributo é adicionado ao <p> elemento. O valor do
atributo title será exibido como uma dica ao passar o mouse sobre o
parágrafo:

Exemplo
<p title="I'm a tooltip">
This is a paragraph.
</p>

Tente você mesmo "

Sugerimos: usar atributos minúsculos

O padrão HTML5 não requer nomes de atributos minúsculos.

O atributo title pode ser escrito com letras maiúsculas ou minúsculas

como título ou TITLE .
O W3C recomenda letras minúsculas em HTML e exige letras
minúsculas para tipos de documentos mais restritos, como XHTML.

No W3Schools nós sempre usamos nomes de atributos em letras

minúsculas.

Sugerimos: valores de atributo de cotação

O padrão HTML5 não exige cotações em torno dos valores dos atributos.

O hrefatributo, demonstrado acima, pode ser escrito sem aspas:

Mau
<a href=https://www.w3schools.com>

Tente você mesmo "

Boa
<a href="https://www.w3schools.com">

Tente você mesmo "

O W3C recomenda cotações em HTML e exige cotações para tipos de

documentos mais restritos, como XHTML.

Às vezes é necessário usar aspas. Este exemplo não exibirá o atributo

de título corretamente, porque contém um espaço:

Exemplo
<p title=About W3Schools>

Tente você mesmo "

Usando citações são as mais comuns. Omitir citações pode gerar erros.
Na W3Schools nós sempre usamos aspas em torno dos valores dos
atributos.

Citações simples ou duplas?

Aspas duplas em torno de valores de atributos são as mais comuns em
HTML, mas aspas simples também podem ser usadas.
Em algumas situações, quando o próprio valor do atributo contém aspas
duplas, é necessário usar aspas simples:

<p title='John "ShotGun" Nelson'>

Ou vice-versa:

<p title="John 'ShotGun' Nelson">

Tente você mesmo "

Resumo do capítulo
 Todos os elementos HTML podem ter atributos
 O titleatributo fornece informações adicionais de "dicas de
ferramenta"
 O hrefatributo fornece informações de endereço para links
 Os atributos widthe heightfornecem informações de tamanho
para imagens
 O altatributo fornece texto para leitores de tela
 No W3Schools nós sempre usamos nomes de atributos em letras
minúsculas
 Na W3Schools sempre citar valores de atributos

Exercícios em HTML
Teste-se com exercícios
Exercício:
Adicione uma "dica" ao parágrafo abaixo com o texto "About
W3Schools".

<p = "Sobre a W3Schools"> W3Schools é um site para

desenvolvedores da web. </ P>

Enviar resposta "

Comece o Exercício
Atributos HTML
Abaixo está uma lista alfabética de alguns atributos frequentemente
usados em HTML, sobre os quais você aprenderá mais neste tutorial:

Attribute Description

alt Specifies an alternative text for an image, when the image cannot be