Scribd
Carregar
41 visualizações6 páginas

Resumo 3 - HTML5 Básico

Enviado por

Flávia Soares
Direitos autorais
© © All Rights Reserved
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
41 visualizações6 páginas

Resumo 3 - HTML5 Básico

Enviado por

Flávia Soares
Direitos autorais
© © All Rights Reserved
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/ 6

🖥

HTML5 Básico
Hyper Text Markup Language (Linguagem de Marcação de
Hipertexto)
Criado por Tim Berners-Lee e Roberto Cailliau, nos laboratórios da CERN.

Hipertexto - Texto ao qual se agregam outros conjuntos de informação,


os famosos links .

A ideia era facilitar a troca, agrupamento e atualização de informações de documentos,


na época, de pesquisadores de institutos de pesquisa do mundo todo.
Com a necessidade de padronizamento surgiu a W3C (World Wide Web Consortium):

HTML 2.0 / 1995;

HTML 3.2 / 1997;

HTML 4.01 / 1999;

HTML 5 / 2008.

Conceito de Tags
Elemento HTML é composto por tudo que está entre a
abertura e o fechamento da TAG. <h1>Minhas lista de compras</h1>
<ul>
<li>Café</li>
<tag atributo= “valor” > Texto </tag> <li>Bolo de chocolate</li>
<li>Filtro de Café</li>
<li>Energético</li>
</ul>
As TAGs devem ser sempre abertas e fechadas <> </>

<h1> <li> Itens da Lista


Título(Cabeçalho)
<p> Parágrafo
<lu> Lista
desordenada

Servidores
Onde subimos os arquivos HTML, CSS e JS (projetos) para que eles fiquem acessiveis para todos.

HTML5 Básico 1
Organização VS Code

1. Cria-se uma pasta e abre no VS CODE;

2. Cria-se a pasta src (fonte), onde se coloca a pasta


imagem, css, js e etc;

3. Cria-se o index.html na raiz do projeto (fora da pasta


src).

Estrutura Básica HTML

⚠ O HTML é uma linguagem de marcação e


semântica e não de estilo!
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>

*comando do emmet que escreve a base do html -> html :5 ou !

O DOCTYPE significa DOCument TYPE, ele define o tipo


de documento e não é usado apenas por HTML, alguns
tipos de XML como SVG também o usam.

<head> - Todas as estruturas que não aparecem para o


usuário final (com exceção do Favicon e do Title), como:
meta tags, descrição, autor, fontes, linkador de arquivos.

Hierarquia
<html> é pai do <head> e <body>;
<head> e o <body> são irmãos.
<body> - Parte visivel para o usuário final.

Meta Tags
São comandos HTML que descrevem o conteúdo de uma
página Web para os mecanismos de busca.

💡 Não possui fechamento, pois define informações do


site e não cria um elemento completo HTML.

Atributo + Valor - Define o que a TAG vai fazer

< meta charset = ”UTF-8” >

Padrão unicode que Identifica o formato de codificação


da página. < meta name = ”description” content = ”Minha primeira
página só com HTML” >

HTML5 Básico 2
UTF-8 : Representa o conjunto de caracteres mais description + content é um conteúdo exibido na página de
utilizado na web que é capaz de codificar a maioria dos resultados de um buscador com um resumo do que vai ser
caracteres especiais utilizados em diferentes idiomas. encontrado em uma página.

< meta http-equiv = ”X-UA-Compatible”


content = ”IE=edge” >

Meta exclusiva para Internet Explorer, ela pode


configurar a página para ser renderizada em outra
versão do IE.
< meta name = ”keywords” content = ”HTML, CSS,
O Internet Explorer não suporta o doctype para HTML5, JavaScript” >

então provavelmente ele vai acabar indo para um modo keywords + content define palavras chaves para sites de
chamado Quirks Mode. buscas:
O Quirks mode faz o site ser interpretado como uma < meta name = ”author” content = ”Flávia Noronha” >
versão mais antiga do IE, o que pode fazer teu site
falhar, então ao ao usar X-UA-Compatible com o author + content define os autores da página:
valor IE=edge ele vai forçar o navegador renderizar com < meta http-equiv = ”refresh” content = ”30” >

a mais recente.
http-equiv + refresh + content atualiza o documento a

📌
cada 30s:
A partir do IE11 esta meta-tag é considerada
obsoleta, mas não é necessário remove-la,
não irá afetar o comportamento em
navegadores que não usam mais ela

< meta name = ”viewport” content = ”width-device-

width, initial-scale-1.0” > ]

viewportFornece instruções de como controlar as


dimensões e a escala da página.

width define a largura da página que vai se adequar a


largura do disposito que estamos acessando ela.

initial-scale define o nível de zoom inicial quando a


página é carregada pelo navegador.

Formatações
Títulos

<h1></h1> até <h6></h6>

Quanto maior o número, menor o tamanho dos títulos.

⚠ Não utilizar mais do que um h1 por página.

Parágrafos

<p></p>

Para escrever textos.

Formatação de textos

<b> ou <strong>(da mais Ênfase) - negrito


<i> - italico

HTML5 Básico 3
<u> - sublinhado

<s> - taxado/riscado

Comentários

<! - - Meu comentário - - > OU Ctrl+;

Links
Pontos clicaveis dentro do site que usamos para ir
🔻title = Texto que aparece apenas quando passamos o
para outros lugares, internos ou externos. mouse por cima do link.

Os Links ou Hiperlinks possibilitam a vinculação de


<p> Visite o <a href= " https://www.google.com/ "

documentos a qualquer outro documento ou recurso. tittle= "Google.com - Site de pesquisa"

> Google </a></p>

⚠
target= "_blank"

🔻 target = Define como o link será aberto.


A web funciona graças aos links e por isso
conseguimos navegar por ela.
O Google é totalmente baseado em links. _blank: abre a página em uma nova janela/aba;

_self: abre a página na mesma janela;

_parent: abre a página na mesma janela do link;


Tag <a> + Atributos
_top: cancela todos os demais frames e abre a nova
<a href= " url " > texto </a> página no mesmo navegador.

🔻href = caminho/url do link. 🔻mailto = Link que redireciona para o envio de um e-mail.
<p> Para contatos: <a href = "mailto:[email protected]" > Send
Link Interno/Relative/Âncoras email </a></p>
<a href = "/contatos.html" > Contatos </a>

Link local, que está dentro do próprio website.

Link Externo/Absolute
<a href = "https://github.com/FlaNoronha" title = "Go to my
GitHub page!" target = "_blank" > GitHub </a>

Link externo, redireciona o usuário para um site externo, usa-


se o endereço completo do site.

HTML5 Básico 4
Imagens
Tag <img> + Atributos

<img src = "origem do arquivo" alt = "nome que aparece se o carregamento da imagem
falhar" >

🔻 src = source/fonte da imagem, de onde ela vem.


🔻 alt = texto que aparece caso o carregamento da imagem dê erro.
Interno
<img src = "src/images/imagem.jpg" alt = "nome da imagem" >

Imagem que fica dentro da pasta “images” na pasta “src” do projeto.

Externo
<img src = "https://placekitten.com/200/300" alt = "gatinhos" >

Pega a imagem hospedada na internet pelo url.

🔻 width + height = tamanho da imagem em Pixels.


<img src = "src/images/uploads.jpg" alt = "nome da imagem" width = "100" height = "100" >

Listas
UL
Uma lista não ordenada. Usa-se a tag li (list item) para cada item.

💡 Atalho: ul>li*4 - cria-se a base de uma lista com 4 itens.

OL
Lista com uma ordem especifica. Usa-se a tag li (list item) para cada item.

💡 Atalho: ol>li*4 - cria-se a base de uma lista ordenada com 4


itens.

HTML5 Básico 5
Definição
Lista de termos, com a descrição de cada termo.

💡 Atalho: dt>((dt)(dd))*2 - cria-se a base de uma lista com


descrições de 2 itens.

Tabelas
Criar dados tabulados <table>.

💡 Atalho: table>tr*3>td*5 - cria-se a base de uma lista com descrições de 2 itens (no caso do exemplo muda-se o
primeiro td por th a mão).

HTML5 Básico 6

Você também pode gostar