0% acharam este documento útil (0 voto)

5 visualizações8 páginas

Anotações - HTML5 Na Prática

O documento aborda a linguagem de marcação HTML, explicando sua estrutura básica, incluindo as tags essenciais como <html>, <head>, <body>, e várias outras para formatação de texto, listas, links, imagens, formulários e tabelas. Também discute a importância das tags semânticas para melhorar a acessibilidade e SEO, além de boas práticas para inclusão de scripts e estilos. O texto fornece exemplos práticos e detalha atributos importantes que podem ser utilizados dentro das tags.

Enviado por

Douglas Rafael Teixeira dos Anjos

Direitos autorais

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 DOCX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

5 visualizações8 páginas

Anotações - HTML5 Na Prática

Enviado por

Douglas Rafael Teixeira dos Anjos

Direitos autorais

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 DOCX, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 8

O que é o HTML: É a linguagem de marcação mais utilizada para produzir páginas na web.

Obs: para fazer um comentário em html usamos

Ele não é uma linguagem de programação! E sim de marcação. Faz uso de tags para estruturar
as páginas. Os seus documentos são interpretados pelos navegadores.

O que é TAG: É uma palavra chave entre sinais de “menor” e “maior”. E normalmente
aparecem em pares. Por exemplo: <html> e </html>.

Estrutura de básica: Um documento HTML deve começar com a tag <html> e terminar com
</html>. Todo o conteúdo da pagina deve estar contido dentro da declaração da tag html.

 Head: Dentro do html deve conter um cabeçalho, na qual serão inseridos o título e as
metatags. O cabeçalho é delimitado pela tag <head> e </head>. Seu conteúdo não é
exibido na tela da página.
 Body: Também temos o corpo, onde será inserido todo o conteúdo da página, é
delimitado por <body> e </body>.

Ex:

Meta TAGs: É uma tag com vários atributos usados na tag head, muitas dessas tags ajudam os
mecanismos de busca a obter informações de nossa página, melhorando o SEO de nossa
página.

 Atributos de tags em HTML são informações adicionais que fornecem configurações ou

características específicas para elementos HTML, como estilo, comportamento ou
dados adicionais, facilitando a formatação e funcionalidade de uma página da web.
Exemplos incluem href para links, src para imagens e class para estilos CSS.
Título e subtítulos: Temos seis tags principais usadas para titulo e subtítulo, essas tags vão
de h1 à h6, sendo h1 a maior e h6 a menor.

Textos e mais textos: Existem várias tags que são usadas para expressar textos, cujo seu
valor semântico na escrita do código tem certas representações, citaremos algumas abaixo:

Obs: normalmente a estilização de textos é feita no css.

 <p></p>: tag usada para renderiar um paragrafo;

 <span></span>: não tem uma semântica especifica geralmente utilizada para
pequenas informações como legendas;
 <b></b>: deixa o conteúdo dentro da tag em negrito;
 <strong></strong>: igualmente a tag b utilizamos para deixar o texto em negrito;
 <i></i>: deixa o texto em itálico;
 <hr/>: cria uma linha horizontal, e efetua uma quebra do texto;
 <br/>: quebra a linha onde a tag for inserida;

Obs: algumas tags fecham nela mesma, essas tags são escritas <tag/>, como é o caso da tag
<hr/>.

Div: A tag div é usada para agrupar alguns textos do código, cria uma “divisão” dentro do
código. Podemos usa-la para criar as diferentes sessões de informação da nossa pagina, dividir
a forma como o conteúdo é renderizada. Esse é um artificio essencial que será utilizado junto
com o CSS para personalizar cada área da página.

Listas: Temos dois tipos de listas em html, elas são a lista ordenada e a lista não ordenada.

 Lista ordenada – a tag <ol></ol> cria uma lista ordenada, que faz com que cada item
da lista seja enumerado;
 Lista não ordenada – a tag <ul></ul> cria uma lista não ordenada, ou seja, sem
numeração dos itens da lista;
 Itens da lista – em ambas as listas seus itens são declarados com a tag <li></li>;

Links: Os declarados com a tag <a></a> e ela exige um atributo, o href, ficando então:

<a href=””>meulink</a>

Aqui no atributo href, colocamos o link ou o “caminho” que queremos referenciar, dentro das
aspas, e o conteúdo entre as tags é o texto exibido.

obs: para acessar um arquivo usaremos o ponto e barra (./) se estiver no mesmo diretório
acrescentamos apenas o nome do arquivo, se estiver numa pasta após acrescentamos o endereço
completo. Caso esteja em uma pasta anterior será usado o ponto, ponto barra (../) para voltar a pasta
onde estiver o arquivo.

Também podemos usar o atributo target, para que ao invés de apenas redirecionar para o link
que seja aberto em nova aba, usando o _blank, veja o exemplo abaixo:

Imagem: A tag <img> além de ser uma tag que não necessita de fechamento também exige
um atributo, assim como para o link. O atributo é o src e funciona bem similar ao link, o src é a
origem do arquivo de imagem que será renderizado na página, ficando <img
src=”origem_do_arquivo” > . Aqui também usamos o “./” e o “../”.

Obs: uma boa pratica para a inserção de imagens é o uso do atributo alt, esse atributo serve
como um valor alternativo a imagem, que contribui para acessibilidade ao site, por exemplo,
em um caso de pessoa com deficiência visual, e seu dispositivo faça a leitura da pagina, o alt
seria um texto que descreveria a imagem. Também serve como descrição quando a imagem
em si não é carregada.

Formulário: Declarado com a tag <form></form> essa tag define a estrutura de um

formulário e tal como outras tags de estrutura ela por si só não renderiza conteúdo, ele precisa
de tags que complementem a sua estrutura. Vejamos a seguir:

 Input – a tag <input> requer o atributo type, que cria uma área que permite introduzir
conteúdo. Não precisa ser fechada;
 Button – a tag <button></button> é auto explicativa, utilizamos para criar um botão;
 Textarea – a tag <textarea></textarea> cria uma caixa de texto, que permite uma
digitação maior de texto;
 Select – a tag <select></select> cria um botão de seleção, ela precisa da tag
<option></option> como complemento, que irá criar as opções a serem selecionadas;

Obs: outro atributo interessante é o placeholder, que é o texto que fica exibido nas áreas
onde haverá inserção de texto.
Input: A tag <input> como já citada é utilizada para inserção de conteúdo, e é um dos
aspectos mais importantes do formulário, veremos aqui mais detalhes sobre essa tag.

Como vimos anteriormente, a tag input necessita de um atributo, o type, veremos de maneira
mais detalhada alguns dos mais importantes atributos.

Dica! No VSCode podemos usar o comando Ctrl + space para vermos uma listagem dos
atributos dentro de uma tag.

 Text – usado para inserção de texto livre;

 Password – usado para “esconder” os caracteres digitados, comumente usados para
senhas;
 Email – autoexplicativo, faz com que por exigência o formato do texto inserido seja de
email;
 Date – usado para inserir datas;
 Datetimelocal – permite inserir data e hora;
 Number – semelhante ao text, porém só permite a inserção de números. Pode ser
usado em conjunto com os atributos max e min, que definem um valor máximo e
mínimo para a inserção;
 File – permite a seleção de um arquivo;
 Radio – gera uma seleção de item onde permite a marcação de uma escolha, usado em
conjunto com o atributo name faz com que apenas uma das opções possa ser marcada
quando as opções tem o mesmo name, por exemplo, name=”web”, sem o uso do
name conseguimos selecionar múltiplas opções. As opções a serem selecionadas são
inseridas usando a tag label, uma observação é que para fazer que o clique no texto
também marque a seleção precisamos usar o atributo id no input e linka-lo no label
com o atributo for, veja o exemplo:

;
 Checkbox – semelhante ao radio, porém esse é usado para múltiplas seleções. O
checkbox conta com um atributo checked eu faz com que o input com essa opção já
inicie marcado;
Obs: para inputs de inserção como o text, temos o atributo required que faz com que caso o
campo não tenha sido preenchido uma mensagem de requerimento seja apresentada.

Tabelas: A tag <table></table> é usada para definir a estrutura de uma tabela, funciona como
a tag form. Usaremos em table tags que possuem semântica, essas tags não mudam de fato
nada na pagina, porém criam um significado dentro do código, que é útil para o SEO e para que
o desenvolvedor possa se localizar dentro do código.

 Thead – essa tag semântica <thead></thead> é usada para os títulos da tabela;

o <tr></tr> - table row, usamos para um linha dentro da tabela, dentro dela
usamos a tag <th></th> que usaremos para inserir o titulo da colona criada;
 Tbody – semelhante a thead, usaremos para preencher o corpo da tabela;
o <td></td> - table data, funciona de forma similar ao tr, usamos para o
conteúdo de cada linha da tabela. Podemos usar junto com a tag o atributo
colspan que define quantas colunas aquela célula da tabela irá ocupar na linha
criada;

Podemos ver um exemplo de tabela:

Script:

Resultado da tabela:
Áudio e Vídeo: A inclusão de arquivos de áudio e vídeo são feitas semelhante a imagem.
Começando por vídeo, usamos a tag <vídeo></vídeo> que precisa do atributo controls que é o
que permitirá controlar o vídeo, como dar play e pause, e dentro dela a tag <source>, que
dispensa fechamento, com o uso do atributo src que usamos para definir a origem do diretório
do arquivo. Uma boa prática é usar na tag source o atributo type, para definir o tipo do
arquivo, exemplo: “vídeo/mp4”.

Para áudio o processo é totalmente igual, mudando apenas a tag principal para
<áudio></áudio>. Exemplo abaixo:

Obs: no VSCode o atalho Ctrl + D pode ser usado para selecionar as próximas palavras iguais para substituir, por
exemplo.

Link e Script: São tags usadas para chamar arquivos locais ou hospedados a partir de uma
determinada url, a tag <link> é usada dentro da tag title com o atributo rel e a propriedade
stylesheet por padrão e também o atributo href que usamos para chamar o arquivo, nesse
caso o arquivo que contém a personalização da página, o arquivo de css. Já a tag
<script></script> nesse usamos a propriedade src, semelhante a tag img, também podemos
criar todo o algoritmo diretamente dentro da tag script sem precisar buscar em um arquivo
externo.
Onde chamar meu arquivo JavaScript?: Uma boa prática, que deve ser aderida, é chamar o
script apenas no final do conteúdo HTML, podendo ser bem no final do body, ou antes, do
fechamento da tag de declaração do html. Pois o arquivo/algoritimo script geralmente é um
pouco mais pesado para a página carregar, e isso pode acarretar em problemas na experiência
de acesso do usuário, deixando a página sem renderizar nada, então por boa pratica o ideal é
chamar o script apenas no final do html.

Também podemos usar atributos que desempenham essa função, o defer que faz com que o
script seja carregado após o html, ou o async que carrega de forma síncrona junto a página.
Porém o ideal segue sendo chamar no final.

Tags semânticas: Tags semânticas em HTML são elementos que fornecem significado
estrutural ao conteúdo da página, facilitando a compreensão do seu propósito tanto por
humanos quanto por mecanismos de busca. Elas melhoram a acessibilidade, a SEO e a
manutenibilidade do código. Algumas das principais tags semânticas incluem <header>,
<footer>, <nav>, <main>, <article>, <section> e <aside>. Estas ajudam a dividir o conteúdo da
página em seções significativas, facilitando a compreensão do layout e do propósito de cada
parte. Vejamos a seguir uma descrição de algumas das principais tags:

 <header>: Define o cabeçalho da página ou de uma seção, frequentemente contendo

logotipo, título e elementos de navegação;
 <nav>: Define uma seção de navegação, contendo links para outras páginas ou seções
do site, muito usada dentro de uma tag header. Um exemplo de uso é a criação de
menus;
 <main>: Define o conteúdo principal da página, excluindo cabeçalho, rodapé e barras
laterais;
 <section>: Define uma seção genérica de conteúdo, útil para dividir o conteúdo em
partes significativas. Muito usada dentro da tag mains;
 <aside>: Define um conteúdo relacionado, frequentemente usado para menus laterais,
barras laterais, widgets ou informações adicionais. Também muito usado dentro de
main;
 <article>: Define um conteúdo independente e autônomo, como uma postagem de
blog ou um artigo de notícia;
 <footer>: Define o rodapé da página ou de uma seção, geralmente incluindo
informações de copyright, links de contato e outros detalhes relevantes;