HTML
Pablo Henrique
Desenvolvedor Full Stack na Fleye
Educador e Sócio fundador do Catapulta
@pablohdev
[1]
Objetivo Geral
Entender o que é o HTML e construir estruturas básicas de um
site.
[2]
Pré-requisitos
● Editor de código (Visual Studio Code)
[3]
Percurso
Etapa 1 Como funciona a Web
Etapa 2 O que é HTML
Etapa 3 Tags básicas
[4]
Percurso
Etapa 4 Metas tags
Etapa 5 Listas
Etapa 6 Tabelas
[5]
Percurso
Etapa 7 Formulários
Etapa 8 HTML Semântico
[6]
Etapa 1
Como funciona a Web
[7]
Como funciona a Web
A Web é constituida por 3 partes.
[8]
Percurso
Etapa 1 Como funciona a Web
Etapa 2 O que é HTML
Etapa 3 Tags básicas
[9]
Etapa 2
O que é HTML
[10]
O que é HTML
O acrônimo HTML significa HiperText Markup Language,
traduzindo ao português: Linguagem de Marcação de
Hipertexto. O HTML é o componente básico da web, ele
permite inserir o conteúdo e estabelecer a estrutura básica de
um website. Portanto, ele serve para dar significado e
organizar as informações de uma página na web.
[11]
O que é HTML
Através de um documento HTML, ou seja, um documento com
a extensão .html ou .htm., o navegador faz a leitura do arquivo
e renderiza o seu conteúdo para que o usuário final possa
visualizá-lo. Os arquivos .html podem ser visualizados em
qualquer navegador (Google Chrome, Safari, ou Mozilla
Firefox).
[12]
O que é HTML
Geralmente um site é composto por diversas páginas HTML,
sendo uma para cada página do website. Cada página consiste
em uma série de tags , que podem ser considerados os blocos
de construção das páginas. Portanto, esses blocos são a
maneira com a qual o HTML faz a marcação dos conteúdos,
criando a hierarquia e a estrutura do mesmo, dividido entre
seções, parágrafos, cabeçalhos, e outros.
[13]
Hands On!
“Falar é fácil.
Mostre-me o código!”
Linus Torvalds
[14]
Percurso
Etapa 1 Como funciona a Web
Etapa 2 O que é HTML
Etapa 3 Tags básicas
[15]
Etapa 3
Tags básicas
[16]
Tags básicas
<h1>,<h2>,<h3>,<h4>,<h5 >e <h6>
Tags para definir um título e subtítulos, variando de 1 a 6,
sendo h1 o título mais importante e h6 o de menor
importância.
[17]
Tags básicas
<p> - Tags para definir um parágrafo;
<a> – Tag de link, junto ao atributo href;
<header> – define um cabeçalho;
<section> – define uma seção;
<article> – define um artigo;
[18]
Tags básicas
<div> – define uma divisão;
<footer> – define um rodapé;
<nav> – define uma área de navegação (como menus);
<table> – define uma tabela;
[19]
Tags básicas
<ol> – define uma lista ordenada;
<ul> – define uma lista não ordenada;
<li> – define o item de uma lista;
<form> – define um formulário;
<input> – define os campos do formulário;
<textarea> – define uma área para o usuário digitar um texto;
[20]
Tags básicas
<button> – define um botão;
<img> – permite inserir uma imagem no seu documento.
[21]
Hands On!
“Falar é fácil.
Mostre-me o código!”
Linus Torvalds
[22]
Percurso
Etapa 1 Como funciona a Web
Etapa 2 O que é HTML
Etapa 3 Tags básicas
[23]
Percurso
Etapa 4 Metas tags
Etapa 5 Listas
Etapa 6 Tabelas
[24]
Etapa 4
Meta Tags
[25]
Meta Tags
Meta tags são linhas de código HTML ou "etiquetas" que, entre
outras coisas, descrevem o conteúdo do seu site para os
buscadores. É nelas que você vai inserir as palavras-chave que
facilitarão a vida do usuário na hora de te encontrar
[26]
Meta Tags básicas
<meta name="keywords" content="sites, web,
desenvolvimento, html, design">
[27]
Meta Tags básicas
<meta name="description" content=" Meta Tags - O que são e
como utilizá-las">
[28]
Meta Tags básicas
<meta http-equiv="content-language" content="pt-br">
[29]
Meta Tags básicas
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
[30]
Meta Tags básicas
<meta name="author" content="Pablo Henrique">
[31]
Meta Tags básicas
<meta http-equiv="refresh" content=" 5
;url=[Link]
[32]
Percurso
Etapa 4 Metas tags
Etapa 5 Listas
Etapa 6 Tabelas
[33]
Etapa 5
Listas
[34]
Listas
As listas são muito importantes quando queremos listar alguns
itens no site e também para a criação de menu de navegação.
[35]
Tipos de Listas
- Listas ordenadas
- Listas desordenadas
- Listas por definição
[36]
Hands On!
“Falar é fácil.
Mostre-me o código!”
Linus Torvalds
[37]
Percurso
Etapa 4 Metas tags
Etapa 5 Listas
Etapa 6 Tabelas
[38]
Etapa 6
Tabelas
[39]
Tabelas
As tabelas são listas de dados em duas dimensões e são
compostas por linhas e colunas. Portanto, são muito utilizadas
para apresentar dados de uma forma organizada.
[40]
Exemplo de tabela
[41]
Hands On!
“Falar é fácil.
Mostre-me o código!”
Linus Torvalds
[42]
Percurso
Etapa 4 Metas tags
Etapa 5 Listas
Etapa 6 Tabelas
[43]
Percurso
Etapa 7 Formulários
Etapa 8 HTML Semântico
[44]
Etapa 7
Formulários
[45]
Formulários
O formulário HTML é um formulário de preenchimento de
dados ou que resulta em uma ação desejada utilizando a
linguagem de marcação HTML. É formado por um ou mais
campos. Esses campos podem ser de textos, caixas de seleção,
botões, radio buttons e checkboxes utilizando tags do próprio
HTML. Dessa forma, o usuário pode interagir com a página ao
executar ações através desses formulários.
[46]
Hands On!
“Falar é fácil.
Mostre-me o código!”
Linus Torvalds
[47]
Percurso
Etapa 7 Formulários
Etapa 8 HTML Semântico
[48]
Etapa 8
HTML Semântico
[49]
HTML Semântico
O HTML semântico é a forma de deixar o site com suas
informações bem explicadas e compreensíveis para o
computador, ajudando até mesmo em sua busca no Google e
facilitando o entendimento de leitores de acessibilidade.
[50]
Porque utilizar HTML Semântico
Além de facilitar a busca de forma orgânica e rankear sua
página em mecanismos de busca, o HTML semântico ajuda os
leitores de tela para deficientes visuais, facilitando seu
compreendimento. Ele, também, deixa seu código mais limpo
e mais compreensível, tanto em organização como em
facilidade de visualizar uma tag específica só de passar o olho
pela tela.
[51]
Porque utilizar HTML Semântico
[52]
Hands On!
“Falar é fácil.
Mostre-me o código!”
Linus Torvalds
[53]
Percurso
Etapa 4 Metas tags
Etapa 5 Listas
Etapa 6 Tabelas
[54]
Percurso
Etapa 7 Formulários
Etapa 8 HTML Semântico
[55]
Links Úteis
● Referências:
○ [Link]
○ [Link]
[56]
Dúvidas?
> Contem comigo.
> Comunidade Online (Discord)
[57]