tag: uma marcação HTML que informa ao browser qual é o tipo de conteúdo.- os browsers interpretam as tags HTMLe renderizam o respectivo conteúdo.
- HTML = HyperText Markup Language (Linguagem de Marcação de Hipertexto).
- criado no início da década de 1990, por Timothy John Berners-Lee.
- atualmente utilizamos como versão padrão o
HTML5.
O site Can I use é utilizado para identificar imcompatibilidades entre tags e navegadores; basta acessar a página e digitar o nome da tag ou componente Web que deseja pesquisar.
- HTML não é uma linguagem de programação, e sim, de marcação!
- a única função a ela atribuída é marcar onde começa e onde deve terminar um determinado conteúdo.
- um conjunto de tags dentro de uma estrutura padrão forma uma página web, e um conjunto de páginas forma um site.
- é estática, ou seja, nunca irá mudar o seu conteúdo.
a tag deve ter um nome entre os sinais de maior e menor, <nome da tag>. Por boa prática, em letras minúsculas.
- atributos: escritos junto ao nome da tag, podem fornecer informações sobre o conteúdo e melhorar a experiência do usuário.
- a maioria das tags deve ser aberta e fechada. Aquelas que não requerem fechamento são chamadas de elementos vazios.
- utilizar estruturade pastas: boa prática, e garante maior organização.
- por padrão, a página principal do site deverá ser chamada de index.html.
- digitar ponto de exclamação (!) e pressionar ENTER.
- o editor possui uma extensão nativa chamada
Emmet, que possui muitos atalhos para criação de estruturas HTML.
- o editor possui uma extensão nativa chamada
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
Aqui ficará todo o conteúdo da página
</body>
</html>- primeira linha do código.
- normativa, tipo de HTML que há no código.
- indica ao browser qual especificação de código HTML estará na página.
- indica o início do código.
- todos os elementos existentes na página deverão ser inseridos abaixo dessa tag.
- informar o idioma principal do documento através do atributo lang (pt-br).
- fechamento </html> indica o dinal do código e da página.
- seu conteúdo é o primeiro a ser lido no carregamento da página.
- nele, definir estilos, links, título do documento e até os metadados (dados gerados sobre a própria página).
- fechamento </head>.
- sempre ficará na seção <head>.
- indica qual cadeia de caracteres o documento usará.
utf-8: indica a cadeia de caracteres que possui letras com acentuação.- metatags não possuem fechamento.
- metatag que também fica na seção <head>.
- através dela o navegador detecta o tamanho da área disponível para exibição de conteúdo, no dispositivo que o usuário está utilizando para fazer o acesso (celular, notebook, tablet etc).
- content="width=device-width":
- detecta o tamanho da área.
- "initial-scale=1":
- define o zoom inicial da página.
- 1 = 100%.
- na seção <head>.
- define o título da página.
- os robôs de pesquisa do Google leem o seu conteúdo e entendem que ali há uma descrição que pode indicar o assunto principal da página.
- possui fechamento representado por </title>.
- nessa seção, inserimos todo o conteúdo da página.
- o conteúdo pode ser texto, imagens, vídeos, tabelas ou qualquer tipo de elemento.
- fechamento representado por </body>.
- alterar a sigla do idioma de “en” para “pt-BR”.
- a linha 05 possui uma metatag de compatibilidade de exibição de conteúdo para o browser Internet Explorer; como a Microsoft definiu o fim desse navegador, excluir essa linha.
- definir o title.
- são informações que podem ser inseridas em seu código para explicar o que significa uma determinada linha ou até mesmo um bloco de comandos.
- as linhas comentadas não serão exibidas pelo navegador, apenas no código.
- não exagerar na quantidade de comentários, podem deixar o código poluído.
<!--comentário -->- são os cabeçalhos de títulos.
- há seis níveis possíveis (1 a 6).
- o maior título possível é o <h1></h1> e o menor é o <h6></h6>.
- boas práticas:
- usar apenas um único elemento <h1> em cada página, e conter o assunto principal ou título.
- seguir a ordem numérica para manter a organização (título principal, subtítulo, tópicos do subtítulo, etc).
- salvar com ctrl + S (ou ativar opção Auto Save, localizada no menu File).
- opções:
- duplo clique em index.html.
- extensão Live Server (ALT+L ALT+O).
- tag <p></p> (paragraph).
- não existe limite para o número de palavras.
- a tag p deverá ser fechada.
- observação:
- o VS Code possui recurso de simulação de texto através do Emmet, gerando texto Lorem ipsum (digitar lorem e pressionar Enter).
- caso queira um número definido de palavras, digitar lorem e o número de palavras desejado.
- tag <img>.
- é uma tag vazia (não existe fechamento).
- atributos:
- src:
- indica o caminho da imagem, local onde o arquivo está armazenado.
- alt:
- insere um pequeno texto que descreve a imagem, e será exibido caso a imagem não seja carregada pelo navegador.
- ajuda na acessibilidade a pessoas que tenham deficiência visual e façam uso de leitores de tela.
- o uso do atributo alt é uma boa prática!
- title:
- texto que será quando posicionar o ponteiro do mouse sobre a imagem.
- não é exclusivo para as imagens, praticamente todos os elementos HTML podem usar.
- na maioria das vezes o valor atribuído é o mesmo utilizado no alt.
- src:
- há três tipos de listas:
- listas ordenadas.
- listas não ordenadas.
- listas de definição.
- podemos inserir uma lista dentro de outra lista, conhecidas como listas aninhadas.
- criada com o uso da tag <ol></ol>.
- cada item da lista deverá estar dentro da tag <li></li>.
- criada com o uso da tag <ul></ul>.
- cada item da lista deverá estar dentro da tag <li></li>.
- permite a criação de um conjunto de palavrase as suas respectivas definições.
- deve ser criada com o uso da tag <dl></dl>.
- cada palavra da lista a ser definida deverá estar dentro da tag <dt></dt>.
- a definição da palavra deverá estar dentro da tag<dd></dd>.
- montar uma nova lista dentro de um elemento <li> para criar uma lista aninhada (lista dentro de outra lista).
- os navegadores colocam um recuo maior para a lista interna além de modificar o estilo do seu marcador.
- permitem navegação entre documentos.
- tag <a>Link</a>, e pode possuir qualquer conteúdo entre abertura e fechamento.
- utilizar o atributo href, que deve receber como valor o endereço do conteúdo.
- o atributo href deve receber o endereço completo do site desejado (chamada url absoluta).
- definir o endereço do arquivo HTML desejado no atributo href da tag <a>.
- sempre que clicamos em um link, o comportamento padrão é ser aberto na mesma aba do navegador que você está usando.
- podemos usar na tag <a> o atributo target="_blank", que permite que o link seja aberto em uma nova aba!
- esse recurso pode ser usado tanto para links internos quanto externos.
- se o usuário estiver usando um smartphone, a ligação será realizada automaticamente.
- caso esteja utilizando um notebook ou desktop, poderá fazer a sincronização dos dispositivos para realizar a chamada.
- colocar no atributo href o valor tel: seguido do código DDD da cidade e o número do telefone!
- colocar no atributo href o endereço do arquivo que será baixado pelo usuário, depois inserir o atributo download.
- utilizar o
atributo id, que corresponde a um identificador que qualquer elemento HTML pode utilizar (inclusive usamos esse atributo em linguagens como a CSS e o Javascript). - atribur o valor do id para o elemento HTML desejado.
- em nenhuma circunstância podemos ter dois ou mais elementos com o mesmo id.
- para criar os links para as seções:
- identificar as seções com os ids desejados.
- na tag <a>,o atributo href deverá receber como valor o sinal de hashtag (#), seguido do id da seção que queremos acessar com aquele link.
1. A principal forma de interação, no que diz respeito à entrada de dados, são os formulários. Identifique uma tag que NÃO faz parte do formulário.
Tableless.
A tag <head> é a primeira tag de um documento, colocada antes mesmo da tag <html>.
A tag <script> é utilizada para inserir comandos e efeitos especiais na página.