Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis recusandae nemo earum sit voluptate. Impedit delectus possimus earum eaque veritatis, natus sed harum perferendis ratione vero saepe cupiditate nisi culpa officiis non, reiciendis ipsam quia id sequi? Soluta voluptas beatae id, laudantium veniam eum totam neque cupiditate velit dolorum dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, ducimus.
Para utiilizar "<" e ">", você deve colocar "&" + "lt" ou "gt" + ";"
gt (greater than / maior que) = >
lt (less than / menor que) = <
"&" + "reg" = ®:
"&" + "copy" = ©
"&" + "trade" = ™
"&" + "euro" = €
...
Busque na emojipedia o código do emoji que deseja
ex.: "&#x" + "1F920" = 🤠
"&#x" informa que é um hexadecimal
O comando "CTRL + Space" permite visualizar os caminhos na pasta com mais facilidade
Imagem na mesma pasta
Imagem na mesma pasta
Imagem da internet (copiando o endereço da imagem)
Para inserir um favicon no site basta usar o comando "link:favicon" na <head> do código e anexar a imagem utilizando os mesmos métodos anteriores
É recomendável que o arquivo esteja no formato ".ico"
Podemos colocar palavras/frases em negrito utilizando a tag "<b>" - (Não semântica)
Podemos colocar palavras/frases em negrito utilizando a tag "<strong>" - (Semântica)
Podemos colocar palavras/frases em itálico utilizando a tag "<i>" - (Não semântica)
Podemos colocar palavras/frases em itálico utilizando a tag "<em>" - (Semântica)
Podemos colocar marcações em termos utilizando a tag "<mark>"
A cor do marcador é por padrão amarela, e pode ser alterada utilizando o comando "background-color" em CSS
Podemos criar letras grandes utilizando a tag "<big>" - (Não semântica)
Podemos criar letras pequenas utilizando a tag "<small>" - (Semântica)
Podemos riscar um texto utilizando a tag "<del>"
Podemos sublinhar texto utilizando a tag "<ins>" - (Semântica)
Podemos sublinhar um texto utilizando a tag "<u>" - (Não Semântica)
Podemos adicionar um texto subscrito utilizando a tag "<sub>"
Podemos adicionar um texto sobrescrito utilizando a tag "<sup>"
Podemos criar textos com escrita monoespaçada utilizando a tag "<code>"
Comparativo:
Abcdefghijklmnopqrstuvwxyz - Normal
Abcdefghijklmnopqrstuvwxyz - Monoespaçada
Podemos manter a indentação do texto utilizando a tag "<pre>", sendo útili para escrever visualmente o código
Exemplo:
//Com tag <pre>
let a = Number(prompt("Insira um número"))
if (isNaN(a)) {
alert("Erro: valor inválido")
} else if (a % 2 === 0) {
alert("Par")
} else {
alert("Ímpar")
}
//Sem tag <pre>
let a = Number(prompt("Insira um número")) if (isNaN(a)) { alert("Erro: valor inválido") } else if (a % 2 === 0) { alert("Par") } else { alert("Ímpar") }
Podemos inserir citações simples
utilizando a tag "<q>"
Podemos utilizar as aspas diretamente, entretando a tag "<q>" dá o sentido de citação ao termo, sendo mais "adequada"
Podemos inserir uma citação completa utilizando a tag "<blockquote>":
O homem é o lobo do homem
Dentro da tag podemos inserir o parâmetro "cite", que permite os mecanismos de busca detectarem de onde foi retirada a citação, desde que tenha sido informado no parâmetro
Podemos inserir o significado de abreviações utilizando a tag "<abbr>"
Exemplo:
HTML, CCB e
CR7
Podemos criar links utilizando a tag "<a>"
Exemplo (Listas)
Podemos adicionar parâmetros como "rel" e "target" para definir que o link é externo e deve ser aberto em uma
nova guia, sem fechar a atual
<a href="lista.html" target="_blank" rel="external">Exemplo (Listas)</a>
É recomendável utilizar estes parâmetros quando for anexar um link para um site externo. Ex.: Youtube
Para criarmos links de download podemos utilizar a tag "<a>"
Podemos utilizar o parâmetro "type='application/pdf'" (exemplo) para informar o tipo de arquivo
Podemos utilizar a tag "<picture>" e "source:media:type" para criarmos imagens flexíveis, que alteram seu tamanho de acordo a largura do dispositivo que está visualizando
Para testar basta diminuir ou aumentar o zoom no navegador
Podemos colocar áudios em nosso site utilizando a tag"<aduio>" e os parâmetros "control" e "autoplay"
autoplay = inicia a música autmaticamente
control = mostra os controles do áudio (som, tempo,
play etc.)
Como alguns navegadores não possuem compatibilidade com determinados tipos de arquivo de áudio, podemos utilizar
a tag "<source:src>" dentro de "<audio>", e assim disponibilizarmos diferentes tipos de arquivo de um
mesmo áudio
O segundo áudio foi feito desta maneira, e, apesar de só possuir a versão "mp3", foram adicionados os códigos para as versões "ogg" e "wav", caso houvessem os arquivos
Para adicionarmos vídeos ao nosso site podemos utilizar a tag "<video>"
Podemos adicionar parâmetro como "autoplay" e "controls" no video também
Foi necessário ajustar o tamanho do vídeo acima utilizando a tag "<width>". Além disso, como nos áudios, há varios exemplos de formatos de vídeo inseridos no código, para casos onde não haja compatibilidade do navegador com determinado tipo de arquivo.
Há também como adicionar capas ao vídeo utilizando o parâmetro "poster"
É importante ressaltar que em casos de hospedagem de sites, utilizar vídeos internamente no site pode gerar altos custos de tráfego de banda, portanto pode ser mais adequado utilizar vídeos externos:
Para vídeos incorporados do YouTube, a própria plataforma possui um meio que gera automaticamente o código. Basta acessar o vídeo desejado, clicar em "Compartilhar" e despois "Incorporar", lá eles disponibilizam um código HTML para ser utilizado
De modo semelhante, outras plataformas como o "Vimeo" também possuem este recurso: