BREVE ESTUDO SOBRE HTML
ENGº Adilson Hebo
ENGº Adilson Hebo
Conceitos Básicos
Site Conjunto de páginas web agrupadas que geralmente possui
domínio único , relativamente , também é conhecido por Web site.
Página web é um documento que é renderizado pelo navegador e
que em geral possui a extensão html.
Servidor web é um programa de computador cujas funcionalidades
principais são hospedar sites e entregar serviços na Web .
ENGº Adilson Hebo
Conceitos Básicos
Processo básico servidor web , navegador e site (web site) .
1- Servidor web – Hospeda (armazena) o site , deixando-o disponível
24h/24h ou não .
2- O site é requisitado ao servidor Web por meio do Navegador ,
através de rota , endereço (link - domínio)
3- Servidor web – Entrega o web site requisitado e o navegador
recebe e renderiza o web site, tornando possível a visualização e
manuseio .
ENGº Adilson Hebo
Conceitos Básicos
HTML Hyper text Markup (Linguagem de marcação de hipertexto)
language
HTML Não é uma linguagem de programação
HTML Linguagem de marcação utilizada na construção de páginas Web
Só com HTML não é possível criar sites Dinâmicos
Documentos HTML são interpretados pelo Navegador
ENGº Adilson Hebo
Estrutura HTML
<!DOCTYPE html> <- identificando ao navegador a versão do HTML 5
<html lang="en"> <- identificando a linguagem padrão
<head>
<meta charset="UTF-8"> <- meta tag responsável pela aceitação de
caracteres especiais, acentuação de palavras e etc.
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> <- Padrão de tamanho da tela
<title> Titlo do site </title>
“Cabeça do site”
</head>
<body>
“Corpo do site”
ENGº Adilson Hebo
</body>
Estrutura HTML
Toda página HTML deve ser salva com a extensão HTML
Exemplo :
[Link]
[Link]
ENGº Adilson Hebo
Recursos para Construção de Páginas Web
Editores de Tesxtos ou IDs
▪ SublimeText
▪ Bloco de notas
▪ Vs Code
▪ Breacket
▪ Notepad ++
▪ Netbeans ide
ENGº Adilson Hebo
Recursos para visualização de páginas Web
Navegadores
▪ Google Chrome
▪ Opera
▪ Microsoft Edge
▪ Internet Explore (Não recomendamos)
▪ Firefox e etc.
ENGº Adilson Hebo
Tags ou Marcas HTML
Tags também podem ser chamadas de Elementos ou Marcas .
Tags informam os navegadores como formatar textos ou outros
recursos .
ENGº Adilson Hebo
Atributos HTML
São palavras especiais usadas dentro da tag de abertura,
para adicionar características adicionais ao elementos.
Exemplo :
Classe e id
ENGº Adilson Hebo
Tags ou Marcas HTML
Tags também podem ser chamadas de Elementos ou Marcas .
Tags informam os navegadores como formatar textos ou outros
recursos .
< > tag ou marca de abertura
</ > tag ou marca de fechamento
Obs: Nem todos elementos possuem tag de fechamento como é o caso da < img>
ENGº Adilson Hebo
Tags mais usadas
<p> parágrafo </p>
<h1> titlo do conteúdo </h1> vai até h6
<b> Negrito </b>
<img src=“caminho da imaem”> para inserção de imagem
<a href=“caminho da página “> âncora para link </a>
<table> Tabela</table>
<ul> Lista não ordenada </ul>
<ol> Lista ordenada </ol>
<li>Item da lista </li> usa-se entre a tag de abertura e fechamento da tags <ul> e <ol>
<link href=“caminho do doc“> > link </link> para ligação de documentos externos
<input> caixa de texto ou botão de acordo com atributo usado
<form> </form> formulário
<br> quebra de linha
<hr> quebra de linha com sublinhado
<nav> </nav>
<div> </div> divisão
<span> </span>
<b>Negrito </b> ENGº Adilson Hebo
Elementos do formulário
<form>
Elementos…
</form>
<input> - campo genérico
<input type= “ text”>
Tipos de inputs
type= “ password”> senha
type= “ number”> Números
type= “ email”>
type= “ submit”> Botão de nvio
type= “ date”> data
type= “ checkbox”>
type= “ radio”> botão de opção
type= “ file”> arquivos
type= “ button”> botão genérico ENGº Adilson Hebo
Elementos do formulário
<form>
Elementos…
</form>
<input> - campo genérico
<input type= “ text”>
Tipos de inputs
type= “ hidden”> Campo oculto
type= “ reset”> Botão para limpar formulário
type= “color ”> Selector de cor
< select> Lista suspensa
< option> Opções usado no select
< datalist> Lista de sugestões
ENGº Adilson Hebo
Semântica HTML
<header>
<nav>
<main>
<article>
<aside>
<p>
<foother>
ENGº Adilson Hebo
FIM
ENGº Adilson Hebo