Olá! Eu me chamo Diogo e venho por meio desse documento demonstrar minha evolução gradual em conhecimentos adquiridos em HTML e CSS
No início vamos começar com HTML, deixando bem definido o conceito restrito a contéudo e gradualmente num próximo diretório adicionando conceitos voltados a
design/estilo com CSS.
Podemos escrever paragrafotos de todos os jeitos, basta deixa-lo dentro <p> e </p> respectivamente.
Se precisar quebrar as linhas utilizamos a tag <br>.
Um <h1> significa que esse é um assunto principal e é sobre ele que vamos escrever.
Já o
<h2> significa que esse é um sub-assunto do <h1> que está imediatamente acima dele.
O
<h3> significa que esse é um sub-assunto do <h2> que está acima dele. E assim sucessivamente até o <h6>.
Vamos adcionar simbolos especiais: → ↑ ↓ ← ® © ™ € ℜ Δ ∑
Vamos adicionar alguns emojis: 🤓 😀 😁 😂 😄
De acordo com o dicionário Michaelis: Semântica é o significado dos vocábulos,
por oposição à sua forma.
Com isso, a maior mudança da HTML4 para a HTML5 é o acréscimo da semântica aos elementos, trazendo significado mais forte. Tags
que remetiam mais a forma podem ser melhor representadas com CSS. A exemplo disso, existem tags que ainda funcionam hoje em dia,
mas estão prestes a serem consideradas obsoletas, como as tags <font> e <center>. E existem outras que simplesmente foram excluídas das
versões mais atuais da HTML5, como é o caso do <applet> e <blink>.
No texto, podemos utilizar o negrito para demonstrar força.
Para isso, utilizamos a tag
<strong> com fechamento </strong>.
Para fazer a anulação do texto é utilizada a tag </del>, que significa que o texto está ali, pode até ser lido,
mas deve ser desconsiderado pelo leitor. Exatamente como estou fazendo.
O texto inserido é o exato oposto do texto deletado que vimos anteriormente. Nesse caso, se colocarmos
um texto qualquer dentro de <ins> e </ins>, estamos dizendo que o texto está ali, deve ser lido e você deve prestar atenção nele.
Esse tipo de marcação serve para você marcar uma parte do texto na qual você quer dar uma ênfase descomunal,
já que se trata de um trecho muito valioso para você. Iremos utilizar a tag <mark>...</mark>
Quantas vezes você tentou escrever um x2 ou um H2O em um documento e ficou na dúvida de como fazer pra esses
números ficarem pequeninos ali em cima ou embaixo. No HTML é utilizada a tag <sup>...</sup> e <sub>...</sub>.
Para compartilhar textos de código fonte existe a tag <code> onde você pode delimitar seu código. A principal vantagem no uso dessa
tag é a o valor semântico que ela representa, indicando ao navegador que se trata de um código de computador. Porém, existe também
um efeito visual, pois as letras ficam no modo mono-espaçadas (monospace), o que facilita bastante a leitura do código. Veja como exemplo:
num = int(input('Digite um número'))
if num % 2 == 0:
print(f"O número {num} é 'PAR')
else:
print(f"O número {num} é 'IMPAR')
print(FIM DO PROGRAMA)
Obs: Foi utilizada a tag HTML chamada <pre>, para manter o texto pré-formatado mantendo sua identação.
Normalmente, uma citação aparece entre aspas ou com as margens deslocadas em relação ao texto. Para as citações mais curtas e geramente
enquantradas no meio de parágrafos, vamos utilizar a tag <q>...</q> que automaticamente será acrescido as aspas. Já tem citações mais
longas com textos deslocados levemente para a direita iremos utilizar a tag <blockquote>...<blockquote> sendo opcional acrescentar o link
do texto original com parametro cite denro da tag. Vejamos:
A vida é uma tempestade (...) Um dia você está tomando sol e no dia seguinte
o mar te lança contra as rochas. O que faz de você um homem é o que você faz quando a tempestade vem.
Para criar uma ordered list, vamos usar a tag <ol>...</ol> para delimitar a lista e <li> (list item) para identificar cada item da lista.
A tag <li> a parir do HTML5 tem o seu fechamento opcional. Também podemos usar o parametro type na tag <o>. Ficando desse modo: <ol type"A">.
No parâmetro type temos as seguintes opções:
Obs: conforme mencionei acima, o valor padrão da tag <ol> é a contagem com números inteiros.
Ex:
Já as unordered lists, se caracterizam por sua ordem não interfirir no significado da lista. A tag utilizada será
<ul>...</ul>. O marcador padrão
é a bolinha preta totalmente preenchida (circle), mas existe a opção de configurar a propriedade type da tag <ul> com os seguintes valores:
Podemos também criar listas mistas, configurando listas dentro de outras listas. Veja o exemplo a seguir:
As listas de definições são como um dicionário, temos os termos e as suas descrições. É uma lista sem demarcadores,
mas bem útil em alguns casos. A lista de definição fica dentro da tag <dl>...</dl> e cada termo é um <dt>,
logo acompanhado da descrição com a tag <dd>. As tags de termo e descrição assim como as listas anteriores,
tem seu fechamento opcional de acordo com a referência oficial da HTML5. Veja o exemplo:
Para criar um hyperlink, devemos criar âncoras através da tag <a>. O principal atributo dessa tag é o href, que cria uma referência hipertexto. Vamos ver um exemplo simples:
Outro atributo importante é a ancora hreflang que permite indicar qual o idioma princial do site. Isso vai permitir que os navegadores saibam como lidar caso o visitante opte automaticamente por tradução.
Por padrão ao clicar nos links, visitante sairá do site atual, e na mesma guia, irá ser direcionado para o site do link. E se quiséssemos que o visitante continue na nossa página abrindo a nova página em outra guia? Nesse caso utilizaremos dentro da tag de ancora o atributo target.
O atributo target suporta os seguintes valores:
_blank vai abrir o link em uma nova janela em branco_self vai abrir o link na janela ou frame atual (padrão)_top vai desfazer todos os frames e abrir o destino no navegador completo_parent similar ao uso do _top em uma referência à janela mãe
Como o uso de frames é uma técnica quase em desuso, vou exeplificar apenas nas duas primeiras opções _blank e _self.
Abrir perfil GitHub em uma nova janela
ou
Contiar navegando no site
Existe um recuso interessante que permite identificar qual a natureza do destino usando o atributo rel. Esse atributo aceitas vários valores, dentre eles os mais utilizados são:
next indica que o link é para a próxima parte do documento atualprev indica que o link é para a parte anterior do documento atualauthor indica que é um link para o site do autor do artigo atualexternal indica que é um link para outro site que não faz parte do sitenofollow Tem ocasiões em que você quer linkar para outro site, mas
Abrir perfil GitHub em uma nova janela
ou
Ir para segunda página
Para download de arquivos utilizaremos o mesmo conceito de criação de links com <a href=""></a></p> seguidos de parêmetro download e type. Veja alguns tipos:
Aqui são arquivos para exemplificar:
Baixar PDF
Atualmente podemos acessar sites em diversos tipos de dispositivos: notbooks, tables, smartphones e até TVs. Devido a essa grande variedade de tamanho de telas,
é fundamental que a depender do dispositivo, o site se adapte ao tamanho de tela. Embora possamos redimencionar imagens forçadamente com CSS, essa prática
não fazer que o tamanho (em bytes) diminua também. Consequentimente o consumo de dados aumentará, deixando o site pesado e impactando diretamente na experiência do usuário.
Para exemplificar isso usaremos 3 imagens com diferentes tamanhos: P (pequeno), M (médio) e G(grande). Na pratica, elas seriam idênticas, alterando somente seu tamanho.
Se você estiver no smarphone, provavelmente você estará vendo a imagem com a letra "P" (imagem pequena). Para que você possa ver essa muçança na imagem do bebê, basta
abrir essa mesma pagina web num dispositivo com a tela maior ou simplesmente no computador, diminua gradualmente o tamanho do seu navegador e perceberá a mudança nos três níveis: pequeno, médio e grande.
Para adicionar áudio no HTLM5 basta adicionar a tag <audio> junto com o atributo <preload> e alguns <souce> para tocar qualquer áudio.
para que o arquivo de áudio seja compatível com a maioria dos navegadores, usaremos 2 formatos: mp3 e ogg.
Todos mantendo qualidade máxima de 128 kbps
preservando também um consumo baixo de dados e a experiência do usuário.
Primeiro o navegador tentará executar utilizando o arquivo mp3, caso não seja compatível,
tentará executar no formato ogg e se ainda assim não for compatível, exibirá a menssagem
que o navegador não é compatível com arquivos de áudio e fornecerá um link de downalod do arquivo mp3.
Para adicionar vídeo no HTLM5 basta adicionar a tag <video> junto com o atributo <width> (para redimencionar), <controls> e alguns <souce> para exucutar vídeos.
para que o arquivo de vídeo seja compatível com a maioria dos navegadores, usaremos 4 formatos na respectiva ordem indo do menor arquivo
(em kbps) para o maior, tentando sempre executar um arquivo com menor tamanho. Os formatos são: m4v, webm, ogv e mp4.
O vídeo acima é só um demonstrativo que o vídeo pode ser adicionado diretamento no servidor de hospedagem.
Porém essa não é uma prática recomendada porque cada execução do vídeo irá gerar um consumo de dados no servidor deixando economicamente inviável.
Esse vídeo exemplifica as imagens dinâmicas comentadas no tópico anterior. Desse modo, o vídeo está hospedado no youtube sem causar custos adicionais de dados!