Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Estrutura básica do HTML5
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Estrutura básica do HTML5 1
Estrutura básica do HTML5
Tags
Sumário
1. Estrutura básica do HTML5
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título</title>
</head>
<body>
</body>
</html>
1. Estrutura básica do HTML5
1.1 Desmembrando as tags da estrutura básica
1.2 Títulos e Parágrafo
2. Formatações básicas html
3. Listas
3.1 Listas ordenadas
3.2 Listas não-ordenadas
4. Links - tag <a>
4.1 Âncoras
4.2 Links para download
5. Áudio
6. Imagens
6.1 Inserindo imagens
6.2 Imagens dinâmicas
7. Videos
7.1 Video hospedado localmente
7.2 Videos hospedados em outras plataformas (Youtube)
8. CSS externo
9. Cores de texto e background
10. Fontes
10.1 Fonte personalizada
10.2 Tamanho da fonte, peso e estilo
11. Gradiente
11.1 Gradiente no background
11.2 Gradiente no texto
Estrutura básica do HTML5 2
1.1 Desmembrando as tags da estrutura básica
A primeira linha do código diz ao navegador que estamos usando a versão mais recente do HTML5
<!DOCTYPE html>
A tag “lang” informa qual a linguagem em que escreveremos nosso site. Impotante na hora do uso
do tradutor de páginas.
<html lang="pt-br">
A tag <head> é onde ficam as configurações do doc HTML, essa parte não aparecerá na página do
site.A tag “metacharset=”UTF-8” referece aos caractéres do idioma português, como acentos e etc.
A tag body é onde ficará o conteúdo do site.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título</title>
</head>
<body>
</body>
1.2 Títulos e Parágrafo
Os título em HTML são criados usando as tag <h1> até <h6>. Onde h1 é o título principal e apartir
do h2 são subtítulos.
<h1>1. Primeiro título</h1>
<h2>1.1 Primeiro Subtítulo</h2>
<h3>1.1.1 SubSubTítulo</h3>
<h2>1.2 Segundo Subtítulo</h2>
<h1>2. Primeiro título</h1>
<h2>2.1 Primeiro Subtítulo</h2>
Estrutura básica do HTML5 3
<h3>2.1.1 SubSubTítulo</h3>
<h2>2.2 Segundo Subtítulo</h2>
Hierarquia de textos
<h1>Texto em h1</h1>
<h2>Texto em h2</h2>
<h3>Texto em h3</h3>
<h4>Texto em h4</h4>
<h5>Texto em h5</h5>
<h6>Texto em h6</h6>
Os parágrafos são criados usando a tag <p>
<p>Este é um exemplo de parágrafo criado por mim.</p>
2. Formatações básicas html
2.1 Tag “strong”
A tag <strong> é responsável por deixar o texto em negrito/destacado.
<p>Nesta frase temos um <strong>termo em destaque</strong> usando a tag STRONG (semântico) </p>
2.2 Tag “em”
A tag <em> é usada para deixa o texto selecionado em itálico.
<p>Nesta frase temos um <em>termo em itálico</em> usando a tag EM (semântico)</p>
2.3 Tag “mark”
A tag <mark> é usada para destacar uma parte do texto, como se fosse um marcador de texto
de papel. Ela pode ser usada associada ao parâmetro ‘style’.
Estrutura básica do HTML5 4
<p>
Podemos criar um <mark style="background-color: blue;">texto marcado</mark> usando
a tag MARK, e para mudar a cor do marcador, iserimos um <em>style</em> dentro da tag
</p>
2.6 Tag “del”
A tag <del> serve para passar um risco sobre a palavra como se tivesse sido excluida
<p>Podemos marcar um <del>texto excluido</del> para indicar que ele pode ser lido,
mas não considerado. Para isso usamos a tag "DEL"</p>
2.7 Tag “ins”
A tag <ins> serve para subliar um texto
<p>
Podemos marcar um <ins>texto como inserido/sublinhado</ins> para dar
ênfase e indicr que ele foi adicionado. Para isso usamos a tag "INS"
</p>
2.8 Tag “sup”
A tag <sup> serve para add texto ou caractere encima de outro texto, como se fosse uma
potência. Ex: 2¹, 2², 2³.
<p>Para inserir coisas do tipo x<sup>20</sup>+3, usamos a tag "SUP"</p>
2.9 Tag “sub”
A tag <sub> serve para add texto ou caractere na parte de baixo do texto. Ex: H2O
<p>Para inserir coisas do tipo H<sub>2</sub>O, usamos atag "SUB"</p>
2.10 Tag “code”
A tag <code> faz as letras ficarem parecendo com a fonte de um código.
<p><code>O comando "CODE" faz as letras terem os mesmo espaçamentos</code></p>
2.11 Tag “pre”
A tag “pre” faz com que os espaços/indentações que criamos no editor de código apareça no
site.
Estrutura básica do HTML5 5
<p>Podemos, tbm, usar a tag "PRE" para criar indentação dentro do nosso site,
isso fará com que todo espaço que tiver no VScode apareça no site. Ex: </p>
<pre>
<code>
nun = int(imput('Digite um número'))
if num % 2 == 0:
print(f ' O número {num} é par')
else:
print(f 'O número {num} é ímpar')
print('Fim do programa')
</code>
</pre>
2.12 Tag “q”
A tag <q> serve para indicar ao HTML que se trata de uma citação.
<p>
Como dizia Albert Einsten:<q>Se apaixonar não é a coisa mais estúpida
que as pessoas podem fazer. E a gravidade não pode ser responsabilizada por isso.</q>
</p>
2.13 Tag “blockquote”
A tag <blockquote> serve para fazermos uma citação referenciando o trabalho de alguém, para
isso usamos o comando “cite” para colocarmos o link de onde tiramos a citação.
A tag <blockquote> dá sentido ao HTML de que se trata de uma citação em bloco.
<p>Segundo Jeff Noble, no seu livro HTML para leigos:</p>
<blockquote cite="https://www.cursoemvideo.com">
A diferença entre elementos inline e um bloco de texto é importante. Os elementos
HTML neste capítulo descrevem os blocos de texto.
</blockquote>
2.14 Tag “abbr”
A tag <abbr> serve para colocarmos o significado de abreciações
<p>
Estou estudando <abbr title="Linguagem de marcação de hipertexto">HTML</abbr> e
<abbr title="Estilo de folhas em cascata">CSS</abbr></link>
</p>
Assim, ao passar o mouse por cima da palavra HTML ou CSS o significado das palavras irão
ser exibido.
Estrutura básica do HTML5 6
3. Listas
3.1 Listas ordenadas
As listas ordenadas organizam cada tarefa em ordem crescente. Para cria-las, usamos a tag <ol> e
dentro usamos a tag <li> que irá representar cada elemento.
<ol>
<li>Acordar</li>
<li>escrever os assuntos</li>
<li>Escovar os dente</li>
<li>Ir para a faculdade</li>
<li>fazer a prova</li>
</ol>
Assim, teremos:
1. Acordar
2. Escrever os assuntos
3. Escovar os dentes
4. Ir para a faculdade
5. Fazer a prova
Também podemos mudar esse números por outros elementos usando o ‘type’, desde que exista
ordem crescente.Ex: 1,2,3...; A,B,C...; a,b,c...; I,II,III...; i,ii,iii...;
<ol type="A">
<li>Acordar</li>
<li>escrever os assuntos</li>
<li>Escovar os dente</li>
<li>Ir para a faculdade</li>
<li>fazer a prova</li>
</ol>
Assim, teremos:
A. Acordar
B. Escrever os assuntos
C. Escovar os dentes
Estrutura básica do HTML5 7
D. Ir para a faculdade
E. Fazer a prova
3.2 Listas não-ordenadas
As listas não-ordenadas, organizam cada tarefa sem a necessidade de númeração ou ordem,
geralmente usamos símbolos. Para criá-las, usamos a tag "UL" e dentro dessa tag colocamos a tag
"LI" que vai organizar cada tarefa com o símbolo que pode ser trocado usando o parâmetro type
dentro da tag "UL", na qual temos as seguintes opções de personalização: circle, square e disc . Ex:
<ul type="disc">
<li>Acordar</li>
<li>escrever os assuntos</li>
<li>Escovar os dente</li>
<li>Ir para a faculdade</li>
<li>fazer a prova</li>
</ul>
Assim, teremos:
Acordar
Escrever os assuntos
Escovar os dentes
Ir para a faculdade
Fazer a prova
4. Links - tag <a>
4.1 Âncoras
Os links âncoras servem para nos levar até uma outra página, podendo essa página ser pertecente
ao nosso site ou pertecente a outro site. Quando criamos um link que nos levará até uma página
que pertence ao nosso site, usamos links internos, já quando iremos abrir um link que pertence a
outra página, usamos links externos.
Estrutura básica do HTML5 8
Links internos
Os links internos abre uma página que sobrepõe a página atual, ou seja, ela é abertana mesma aba
que a página atual. A idéia é usar para abrir páginas que pertencem ao mesmo site.
O parâmetros rel=’next’ indica ao HTML que a próxima página é a próxima e rel=’prev’ serve para
dizer que a página que iremos clicar é a de retorno.
<p>
Você pode acessar o meu <a href="https://gustavoguanabara.github.io" rel="next">repositório
público no GitHub</a>
</p>
Links externos
Os links externos abre uma página que não sobrepõe a página atual, ou seja, ela é aberta em outra
aba. A ideia é usar para abrir uma página que não pertence a mesmo site.
Para isso ser possível usamos os seguintes parâmetros dentro da tag “a”
target="_blank" rel="external"
Assim, teremos:
<p>
Você pode acessar o <a href="https://youtube.com/cursoemvideo/"
target="_blank" rel="external">meu canal no Youtube</a>
</p>
4.2 Links para download
Para criarmos um link de download, usamos a tag "a" e no parâmetro "href" colocamos o link do
arquivo. Se quisermos que o link abra o arquivo diretamente na aba, não precisamos colocar mais
nada, mas se quisermos que ao clicarmos no link ele já faça o download direto no pc, devermos
criar dois parâmetros: download="nome do arquivo" e type="application/tipo de arquivo". Ex:
Link que abre arquivo diretamente na mesma página:
<p>
<a href="Arquivos para download/comprovante de matricula 2.pdf" >Baixar
comprovante de matrícula em pdf</a>
</p>
Estrutura básica do HTML5 9
Link que abre arquivo em outra página (usando o target="_blank" rel="external"):
<p>
<a href="Arquivos para download/comprovante de matricula 2.pdf"
target="_blank" rel="external" >Baixar comprovante de matrícula em pdf</a>
</p>
Link que faz o download do arquivo no pc:
<p>
<a href="Arquivos para download/comprovante de matricula 2.pdf" download="comprovante de
matricula 2.pdf" type="application/pdf">Baixar comprovante de matrícula em pdf</a>
</p>
5. Áudio
Podemos inserir áudio de duas maneiras.
A primeira forma:
<audio src="audio do youtube/Pray - Anno Domini Beats.mp3" controls ></audio>
A segunda forma:
<audio controls preload="metadata">
<!--Se o audio for em mp3-->
<source src="audio do youtube/Pray - Anno Domini Beats.mp3" type="audio/mpeg">
<!--Se o audio for ogg-->
<source src="audio do youtube/Pray - Anno Domini Beats.ogg" type="audio/ogg">
<!--Se o audio for wav-->
<source src="audio do youtube/Pray - Anno Domini Beats.wav" type="audio/wav">
</audio>
A tag “controls” serve para mostrar os controles do áudio, tais como play, pause e etc.
A tag preload="metadata", diz ao site só carregar o áudio quando o usuário der o play. Temos outras
configurações, como: preload="auto" que irá carregar todo o arquivo de áudio assim que o usuário
Estrutura básica do HTML5 10
entrar no site, o que é ruim para a economia de internet. A tag preload="metadata" é a mais
indicada, já que só irá consumir internet se o usuário der o play e desejar ouvir o áudio.
6. Imagens
6.1 Inserindo imagens
Para colocar uma imagem no seu site, você deve usar a tag “img”. Assim, irá surgir o seguinte
comando:
<img src="linkdaimagem.jpg" alt="Descrição da imagem">
Além de colocar imagens que estão no nosso pc, podemos colocar imagens da internet apenas
copiando o link da imagem que queremos. Exemplo:
<img src="https://s1.static.brasilescola.uol.com.br/be/vestibular/a-procura-por-engenheiros-aquece-mercado
-para-esses-profissionais-55cbadc6eb6f0.jpg"
alt="imagem de engenharia">
6.2 Imagens dinâmicas
Para que as imagens se adaptem aos diferentes tamanhos de telas, usamos a tag
“source:media:type” dentro da tag “picture”. dessa forma, as imagens irão mudando de acordo com
o tamanho das telas dos dispositivos. Ex:
<picture>
<source media="(max-width: 750px)" srcset="imagens/foto-p.png" type="image/png">
<source media="(max-width: 1050px)" srcset="imagens/foto-m.png" type="image/png">
<img src="imagens/foto-g.png" alt="foto grande">
</picture>
7. Videos
7.1 Video hospedado localmente
Estrutura básica do HTML5 11
Para implementarmos videos que estão no nosso computador, basta usarmos a tag <video>.
Implementar vídeos dessa forma eleva o custo dos servidores, esse não é o modo correto se
tratando de vídeos grandes.
A tag “poster” serve para colocamos um link de uma imagem que servirá de capa, ela deve ter o
mesmo tamanho do vídeo.
<video poster="link-imagem" src="mídias/vídeos/pexels-engin-akyurt-10358140.mp4"
controls width="600px"></video>
O correto é colocar todos os formatos de vídeos, pois não podemos correr o risco de um tipo de
formato não ser compatível com o navegador do usuario. Formatos usados em html: Mp4, m4v,
webm, ogv.
7.2 Videos hospedados em outras plataformas (Youtube)
Para inserir vídeos do youtube, basta ir no YouTube clicar em "compartilhar" o vídeo e depois em
"incorporar" e copiar o código gerado e colar no VScode.
<iframe
width="560" height="315" src="https://www.youtube.com/embed/s7L2PVdrb_8"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
8. CSS externo
Para conectar o documento CSS ao documento HTML, devemos inserir o seguinte link dentro da tag
<head> do HTML:
<link rel="stylesheet" href="Aqui vai o link da pasta CSS">
Dessa forma, as configurações feitas no CSS serão aceitas pelo HTML. E podemos inserir esse
mesmo link em quantas pastas HTML quisermos, ou seja, um único arquivo CSS pode servir para
vários arquivos HTML.
Ao criarmos um arquivo CSS, devemos inserir uma configuração para aceitar os caracteres em
português, que é a seguinte:
Estrutura básica do HTML5 12
@charset "UTF-8";
Cada divisão do HTML pode ser chamada e configurada no CSS, podemos mudar a cor, a fonte
entre outras coisas. Para configurar, devemos realizar a seguinte chamada no arquivo CSS:
@charset "UTF-8";
body{
CONFIGURAÇÃO DE TODO O CORPO DO SITE
}
h1{
CONFIGURAÇÃO DE TODOS OS TÍTULOS H1 DENTRO DO SITE
}
h2{
CONFIGURAÇÃODOS DE TODOS OS TÍTULOS H2 DENTRO DO SITE
}
p{
CONFIGURAÇÃO DE TODOS OS PARÁGRAFOS DENTRO DO SITE
}
9. Cores de texto e background
Para modificar a cor de um texto/título ou de todo o site, usamos a seguinte configuração:
@charset "UTF-8";
body{
color: blue; /*Muda a cor de todos os textos do site*/
}
h1{
color: blue; /*Muda a cor de todos os títulos h1 do site*/
}
h2{
color: blue; /*Muda a cor de todos os títulos h2 do site*/
}
p{
color: blue; /*Muda a cor de todos os parágrafos do site*/
}
A mesma lógica pode ser aplicada para criarmos backgraund.
Estrutura básica do HTML5 13
@charset "UTF-8";
body{
background-color: blue; /*Add background em todo o site*/
}
h1{
background-color: blue; /*Add background em todos os títulos h1 do site*/
}
h2{
background-color: blue; /*Add background em todos os títulos h2 do site*/
}
p{
background-color: blue; /*Add background em todos os parágrafos do site*/
}
Quanto a declaração das cores, ela pode ser definida usando o nome, seu código RGB, seu código
RGBA ou usando seu código hexadecimal. Existe outro chamado HSL, que é a msm coisa.
Usando nome:
Blue, Green, Red, Black, e etc
Usando RGB:
rgb(58,45,94), onde o primeiro número indica a quantidade de vermelho, o segundo número
indica a quantidade de verde e o último a quantidade de azul presente na cor. Assim, temos:
rgb(red, green, blue). Esses valores variam de 0 a 250.
Usando RGBA:
O RGBA é semelhante ao RBG, a difereça se dá pelo acréssmo do ‘A’ que se refere a
iluminação/transparência da cor. Assim, temos: rgba(red, green, blue, alpha), com alpha
variando entre 0 e 1.
Usando código hexadecimal
O código hexadecimal varia de 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f, e possui a seguinte configuração:
#FFAA00.
As duas primeiras posições se refere a quantidade de vermelho, ou seja FF é o máximo de
vermelho e 00 é o mínimo de vermelho, assim ficarápreto.Dessa forma, se quisermos
representar o vermelho, teremos: #FF0000
De forma análoga à representação do vermelho, a terceira e a quarta posição representa a
quantidade de verde. Assim, se quizermos representar o verde, teremos: #00FF00
Estrutura básica do HTML5 14
Já as duas últimas posições representam a cor azul. Assim, o azul é representado da seguinte
forma: #0000FF
Combinando essas três cores, ou seja, as três posições, podemos representar as cores do
espectro. Funciona, basicamente da mesma forma que a do RGB.
10. Fontes
10.1 Fonte personalizada
Para inserir uma fonte personalizada usamos a função “font-family”. Podemos tanto inserir uma
fonte do nosso próprio computador, quanto importar uma fonte da internet, sendo que essa segunda
opção é a mais indicada, tendo em vista que no computador dos usuário pode não ter a fonte que
configuramos.
Assim, digamos que queremos importar a fonte "Work Sans" do site Google Fonts, teremos a
seguinte configuração ao importar essa fonte da internet:
@charset "UTF-8";
/*O @import está importando uma fonte do site google fontes*/
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:
ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,
100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
font-family: "Work Sans";
}
Outra forma é anexando o arquivo da fonte desejada dentro da pasta do site, mas cuidado, pois o
arquivo da fonte precisa está no formato Woff que é o suportado pela web. Para personalizar sua
fonte dessa forma, precisamos criar uma ordem chamada “@font-face”.
Digamos que iremos usar a fonte “love larry” e aplica-la ao título h1.
@charset "UTF-8";
@font-face{
font-family: nome_nome;
src: url('love_larry_ttf-webfont.woff');
/*Converte a fonte para formato web (woff) no
site = https://www.fontsquirrel.com/tools/webfont-generator */
font-weight: normal;
font-style: normal;
}
h1{
font-family: nome_nome;
}
Estrutura básica do HTML5 15
10.2 Tamanho da fonte, peso e estilo
O tamanho das fontes são definidas pela função “font-size” e elas podem ser configuradas em “px”
ou “em”, sendo a segunda a mais recomendada, pois “em” aumenta a fonte de acordo com a
porcentagem. Assim, 16px = 1em.
body{
font-family: "Work Sans";
font-size: 1em;
}
/*ou podemos ter*/
body{
font-family: "Work Sans";
font-size: 16px;
}
Já o peso da fonte, ou seja, a “grossura” da fonte, é definida pela configuração “font-weight”. Essa
configuração pode variar tanto por número, indo de 100 a 900, quanto por nomes: lighter, normal,
bold e bolder.
font-weight: bolder;
Quanto ao estilo, podemos deixar em itálico usando a configuração “font-style”.
font-style: italic;
Assim, juntando todas essas configurações de fonte, teremos:
body{
font-family: "Work Sans";
font-size: 1em;
font-weight: bolder;
/*weight=peso/negrito width=largura height=altura*/
font-style: italic;
}
Estrutura básica do HTML5 16
Mas podemos condensar todas essas configurações em apenas uma linha criando a "shorthand
font", basta seguir a seguinte ordem:
font-style -> font-weight -> font-size -> font-family
Assim, teremos:
body{
font: italic bolder 3em "work sans";
}
11. Gradiente
11.1 Gradiente no background
Para criar um gradiente no fundo dá página ou em alguma parte do site, devemos criar a seguinte
configuração:
body{
background-image: linear-gradient(-120deg,rgba(13, 40, 97, 0.948) 30%, black);
background-attachment: fixed;
}
Dentro da função “linar-gradient” colocamos primeiro o grau que determinará a direção do gradiente,
depois inserimos quantas cores quisermos que forme o gradiente/degradê.
11.2 Gradiente no texto
Para aplicar um gradiente diretamente no texto, precisamos criar um “background-image” do tipo
gradiente podendo ser linear ou radial, e após isso, temos que deixar nosso texto transparente
usando -webkit-text-fill-color: transparent;. Assim, teremos:
h1{
font-family: "Righteous", cursive;
font-weight: 400;
font-size: 64px;
background-image: linear-gradient(to bottom, rgb(52, 17, 255), rgb(208, 52, 255));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar