HTML - BÁSICO AO AVANÇADO
O que é o HTML?
- Significa hyper text markup language
- traduzindo: linguagem de marcação de hipertexto
- é o bloco de construção mais básico da web. Define o significado e a estrutura do
conteúdo web. Responsável por textos, imagens etc.
- o Hipertexto se refere à links que conectam as páginas
- o termo linguagem de marcação é porque o HTML trabalha com tags: /<>
Estrutura básica
<!DOCTYPE html> Primeira estrutura que vai indicar ao navegador
que é um documento em html
<html> </html> no meio dessas duas tags é onde vai ficar o
conteúdo
<head></head> fornece metadados que não são exibidos na página
<body></body> é onde você vai por todo o conteúdo visível ao
usuário
<title></title> <!--para acrescentar um título→
Meta tag
- Basicamente as meta tags são metadados que você fornece ao navegador sobre
seu site.
- Confira o exemplo de uma formatação com meta tags:
<!DOCTYPE html>
<html lang="pt-br"> <!--aqui voce escolhe o idioma do site-->
<head>
<meta charset="UTF-8"> <!--essa meta tag evita problemas ao
colocar acentos nas palavras-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--
serve para tornar o site compatível ao intert explorer-->
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <!--a área visível é adaptada de acordo com o
aparelho usado: smartphones ou pcs-->
<meta name="description" content="aqui voce coloca a legenda
do título (title)">
<meta name="keywords" content="aqui coloque as palavras
chaves do site">
<meta "author" content="nome do autor do site"
<title>Document</title>
</head>
<body>
<h1>título 1</h1> <!--aqui voce ordena por importancia os
títulos do seu texto-->
<p> aqui você escreve o seu título principal</p>
<p> o p representa parágrafo</p>
<h2>título 2</h2>
</body>
</html>
Formatação de texto
- para deixar em negrito:
a) sem ênfase: <b><b>
b) com ênfase: <strong><strong>
- para por uma linha de divisão: <hr>
- para quebrar uma linha : <br>
- para pôr o texto em itálico: <i>
- para sublinhar : <u>
- para diminuir o tamanho do texto: <small>
- para por um riscado no texto : <del>
- para por número exponencial: 2 <sup>1</sup> → 2¹
- para por um número subscrito : 2<sub>1</sub>
- para grifar o texto: <mark></mark>
Elementos de citação
- abreviatura : <abbr>html</abbr>, quando rodar o site, vai aparecer o html, mas se o
mouse ficar em cima dele, vai aparecer a descrição da abreviação (em azul).
<h1>elementos de citação</h1>
<p>vamos aprender <abbr title="hiper text markup
language">html</abbr>.</p>
- Endereço :
<address>
matheussimey@[Link]
</address>
- Título para obras literária, filme :
<p> o filme <cite>titanic</cite> com leonardo de caprio. </p>
- Para por uma citação direta :
</p>raimundo falou: <q> pegue isso </q></p>
- Para dar destaque a alguma informação ou fala :
<blockquote>aqui entra a frase</blockquote
- Para mudar a direção do texto:
a) <p> <bdo dir=”rtl”>matheus</p>
Comentários
- é um texto neutro que não vai rodar no código
- fórmula: <!--comentário-- >
Links
LINK ABSOLUTO
- para pôr um link por caminho absoluto usa-se (<a) + (href) para indicar onde o
navegador tem que ir.
<hr>
<a href="[Link] aqui para ser
redirecionado ao google</a>
<hr>
- Ao clicar no link você será redirecionado a página do link, porém na mesma página
que você estava usando. Se quiser,portanto, que ao clicar ele abra em outra aba do
navegador:
<hr>
<a href="[Link] target=”_blank”>clique aqui
para ser redirecionado ao google</a>
LINK RELATIVO
- Um link relativo em HTML é um endereço que aponta para um recurso (como um
arquivo ou outra página) com base na sua localização atual, em vez de especificar o
caminho completo. Ele é "relativo" ao documento HTML que o contém, utilizando
caminhos parciais e é ideal para vincular páginas e recursos dentro do mesmo site,
simplificando a gestão e atualização de links quando o site é movido ou renomeado.
- ideal para arquivos de dentro do mesmo projeto e concecta-los
<hr>
<a href="arquivo_de_cadastramento.html">clique aqui para
fazer seu cadastro</a>
- mas se por exemplo você quiser criar um link para um arquivo dentro de uma pasta,
basta escrever o caminho.
<hr>
<a href="pasta_mae/arquivo_filho1.html">clique aqui para ir
para arquivo filho 1</a>
<hr>
- mas se por exemplo você quiser criar um link para uma pasta fora da pasta atual e
que está por exemplo 1 pasta para trás:
<hr>
<a href="../pasta_mae2.html">clique aqui</a>
<hr>
- tem um caractere que é o ele é usado para dar espaços entre os links que
estão na mesma reta horizontal
Imagens
- para incluir imagens e definir altura e largura:
<img src="[Link]"
width:300 height:20 alt="aqui tem uma imagem tal.."
- o ALT=, é uma descrição para deficientes visuais e que é usado pelo google para
saber do que se trata a imagem.
- Muitas vezes é necessário comprimir uma imagem, seja pela dimensão ou pelo peso
da imagem em kb ou mb.
- Se você quer criar uma imagem, use: [Link]
- Se você quer pegar alguns ícones: [Link]
- Image map = basicamente o image map, contém coisas na imagem, as vezes
objetos específicos que você quer que o usuário passe o mouse em cima e clique:
[Link]
Tabelas
- a tag usado para criar uma tabela é a : <table>
- a tabela é composta por linhas e colunas que possuem suas próprias tags:
<tr>,<th>
- e para acrescentar outras linhas : <td>
<h1>TABELAS</h1>
<table width='100%' border="1">
<tr>
<th>coluna1</th>
<th>coluna2</th>
</tr>
<tr>
<td>linha 1</td>
<td>linha2</td>
</tr>
</table>
- o width é a largura da tabela, e o border quantos pixels tem nas bordas da tabela
Listas
- No HTML existem dois tipos de lista: ordenada e não ordenada.
- a não ordenada tem esse modelo:
<h1>TABELAS</h1>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
- Já a ordenada
<h1>TABELAS</h1>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
Iframes
- serve para pôr uma página dentro de outra página
- Pode ser tanto uma página sua como de outra plataforma, roda áudio, texto e vídeo
<iframe width="2500" height="1000" src="[Link]/watch?
v=448sdzWsnMs"
title="video do youtube"</iframe>
Formulários
- Tipo text:
- <!-- para começar um formulário, a primeira coisa é usar a tag form: -->
<form></form>
<!--agora vamos adicionar um recurso que acrescenta uma
caixa de resposta -->
<form>
<label>nome:</label>
<input type="text" placeholder="digite seu nome
aqui"></form>
<!-- o label é o título da caixa, o type indica o tipo de
texto
o placeholder é a legenda transparente dentro da caixa
-->
- Tipo senha
<form>
<label>senha</label>
<input type="password" placeholder="digite sua senha
aqui"></form>
- Tipo email:
<form>
<label>email</label>
<input type="email" placeholder="digite seu email
aqui"></form>
- Tipo submit: cria um botão de envio
<input type="submit" value="enviar formulário">
obs: uma versão alternativa é usar a tag <button></button>
- Tipo required: obriga a compor as caixas
<input type="name" placeholder="digite o seu nome" required>
- Tipo rádio: ele coloca botão de escolha
<!-- o input tipo radio, são as bolinhas de seleção-->
<h1>animal de estimação</h1>
<input type="radio" id="dog" name="animal" value="cachorro">
<label for="dog">cachorro</label>
- Tipo checkbox:
<!-- input type checkbox
serve como botão de check -->
<input type="checkbox" id="item1 "name="item1" value="tv">
<label for="item1">TV</label>
- Tipo select: fazer um campo de múltipla escolha:
<!-- campo select -->
<h2>escolha uma cor</h2>
<select>
<option value="vermelho">vermelho</option>
<option value="azul">azul</option>
<option value="verde">verde</option>
</select>
<!-- se você quiser que na lista o título apareça na lista porém
de maneira desabilitada apenas para fins estéticos-->
<h2>escolha uma cor</h2>
<select>
<option disabled value="">selecione uma cor</option>
<option value="vermelho">vermelho</option>
<option value="azul">azul</option>
<option value="verde">verde</option>
</select>
- Tipo textarea: fazer um campo para alguém escrever um texto
<!--Campo Textarea
ele serve para fazer uma área de texto -->
<textarea>digite um texto</textarea>
<!-- se quiser aumentar o número de linhas e colunas -->
<textarea rows="13" cols="12">digite um texto</textarea>
ÁUDIO
- Agora vamos ver como que coloca áudio nos sites html:
<!-- Aqui você tem a estrutura básica para o áudio no html
você deve usar o <source + src = o nome do arquivo ou link, o
tipo (o mais comum é o audio/mpeg)-->
<h1>página de aúdio</h1>
<audio>
<source src="arquivo de áudio.mp3" type="audio/mpeg">
</audio>
<!-- agora para aparecer o ícone de reprodução do áudio você deve
usar o controls -->
<h1>página de aúdio</h1>
<audio controls>
<source src="arquivo de áudio.mp3" type="audio/mpeg">
</audio>
<!-- é muito comum que o arquivo do aúdio fique disponível para
dowload. Para impedir, basta usar o seguinte comando: -->
<h1>página de aúdio</h1>
<audio controls controlsList="nodowload">
<source src="arquivo de áudio.mp3" type="audio/mpeg">
</audio>
Vídeo
- o vídeo segue o mesmo padrão do aúdio:
<!-- Esse é o modelo padrão. Mesmo esquema do de áudio, porém
nesse da pra colocar a largura. e o formato mais usado é o mp4 --
>
<h1>tag de vídeo</h1>
<video width="100%"controls>
<source src="video.mp4" type="video/mp4">
</video>
<!-- para pôr thumbnail -->
<video poster=img/[Link]" width="100%"controls>
<source src="video.mp4" type="video/mp4">
</video>
<!-- para fazer o vídeo rodar assim que entrar na página -->
<video poster=img/[Link]" width="100%" autoplay controls>
<source src="video.mp4" type="video/mp4">
</video>
<!-- para desabilitar o download do vídeo e o picture in picture
e sem tela cheia -->
<video poster=img/[Link]" width="100%" autoplay controls
disabledpictureinpicture controlsList="nodowload nofullscreen">
<source src="video.mp4" type="video/mp4">
</video>
DIV E HTML SEMÂNTICO
- o (div) são divisórias, para o layout do site eu vou mostrar o modelo em que meu site
tem quatro divisórias:
<div>
<h1>TOPO</h1>
<p>aqui a parte do topo</p>
</div>
<div>
<a href="[Link]">link</a>
<a href="[Link]">link</a>
<a href="[Link]">link</a>
<a href="[Link]">link</a>
</div>
<div>
<h2>coluna</h2>
<p>texto aleatório</p>
</div>