HTML
Índice
- Html
- Sintaxe
- Referência
- Redes Sociais
HTML (HyperText Markup Language) é a linguagem padrão utilizada para a criação de páginas da web. Permite a criação de documentos hipertexto, o que significa que os usuários podem navegar entre diferentes partes de um documento ou entre documentos, seguindo links. Para que isso ocorra são utilizadas as "tags" para estruturar o conteúdo. Isso inclui a definição de parágrafos, títulos, listas, links, imagens e outros. As tags são elementos que definem como o conteúdo deve ser exibido ou interpretado. Através do uso de links, HTML permite a criação de navegação, conectando diferentes documentos ou partes de um mesmo documento.
Sintaxe
A sintaxe HTML é basicamente o conjunto de elementos, as tags, os atributos e os valores. Então vamos ver cada um deles por ordem.
- Elementos
O elemento é responsável por construir a estrutura básica do HTML. Essa estrutura básica é fundamental para criar a hierarquia e o layout de uma página web usando HTML. Cada elemento desempenha um papel específico na organização e exibição do conteúdo na web. Um elemento HTML é composto por tags e pelo conteúdo entre essas tags. Em outras palavras, um elemento é uma instância específica de um tipo de conteúdo na página. Cada elemento é composto por uma tag de abertura, o conteúdo e uma tag de fechamento correspondente
Deixa eu explicar melhor, existem diferentes elementos no html. Esse em específico é o P (P de parágrafo) é composto por tag inicial, que é <, logo em seguida o elemento P e fecha >, mais o conteúdo de texto e a tag final que é < barra / elemento: p e fecha >. Tudo isso forma um Elemento P, que serve para construir parágrafos. Portanto, os elementos são formados pelo conjunto de tags de abertura, conteúdoe tags de fechamento, e as tags são os marcadores específicos que definem o início e o fim de um elemento, mas existem alguns tipos de Elementos que não possuem conteúdo e nem tag final.
- Tags
No HTML, as "tags" são marcações especiais usadas para estruturar e definir o conteúdo de uma página web. As tags são delimitadas por colchetes angulares (< e >). Cada tag tem um propósito específico e indica ao navegador como deve ser interpretado o conteúdo entre as tags. Dentro do HTML, o "corpo" da página refere-se à área onde o conteúdo visível é colocado. As principais tags que formam o corpo do HTML incluem:
<!DOCTYPE html >
<html>Conteúdo da página aqui</html>
<head>Informações sobre o documento, título, meta tags, etc.< /head>
<title>Título da Página</title>
<body>Conteúdo principal da página</body>
<h1>Título</h1>
<p>Parágrafo de texto</p>
<a href="https://www.exemplo.com">Meu Link< /a>
<img ="caminho/para/imagem.jpg" alt="Descrição da Imagem"
<ol>
- <li>Lista ordenada /li>
- <li>Lista ordenada< /li>
</ol>
<ul>
- <li> Lista não ordenada</li>
- <li> Lista não ordenada</li>
</ul>
<div> Conteúdo agrupado aqui</div>
<br "Insere uma quebra de linha">
<hr> "Cria uma linha horizontal"
<ul> Abreviação de "unordered list" (lista não ordenada), esta tag define uma lista onde os itens não têm uma ordem específica, o < ol> Abreviação de "ordered list" (lista ordenada), define uma lista onde os itens são numerados ou ordenados de alguma forma e o < li> é usada para definir cada item de uma lista, seja em uma lista ordenada (< ol>) ou não ordenada (< ul>). No geral, as tags HTML podem ser categorizadas em diferentes tipos, dependendo de sua função e do tipo de conteúdo que estão destinadas a representar. Temos tags de texto, título, para imagem, para link, para listar algo, entre outras.
- Atributos e Valores
Os atributos em HTML são usados para fornecer informações adicionais sobre elementos. Eles são adicionados às tags e têm valores que especificam as configurações ou características do elemento. Os "valores" em HTML referem-se aos dados específicos fornecidos para os atributos das tags. Cada atributo pode ter um valor associado que define suas características ou comportamento.
<img src="caminho/para/imagem.jpg" alt="Descrição da Imagem">
Atributo src (Source) - < img> (Imagem): Este atributo especifica o caminho da fonte da imagem. Neste exemplo, src aponta para o caminho da imagem, e alt fornece uma descrição para acessibilidade.
<a href="https://www.exemplo.com">Visitar Exemplo</a>
Atributo href (Hypertext Reference) - < a> (Link): Define o URL de destino para o link. Aqui, href define o URL para onde o link direciona.
<img src="caminho/para/imagem.jpg" alt="Descrição da Imagem">
Atributo alt (Alternative Text) - < img> (Imagem): Fornece um texto alternativo para a imagem, útil para acessibilidade.
<img src="caminho/para/imagem.jpg" alt="Descrição" width="300" height="200">
Atributo width e height - < img> (Imagem): Define a largura e a altura da imagem em pixels.
<p class="destaque">Este texto está em destaque.< /p>
Atributo class - Vários Elementos: Adiciona uma classe CSS ao elemento, permitindo estilização específica.
<div id="secao-destino">Conteúdo da Seção< /div>
Atributo id - Identificador Único: Fornece uma identificação única para o elemento.
<p style="color:blue; font-size: 16px;"> parágrafo estilizado.< /p>
Atributo style - Estilos online: Permite a adição de estilos diretamente no elemento.
<input type="text" placeholder="Digite seu nome">< /p>
Atributo placeholder - < input> (Entrada de Texto): Define um texto de exemplo em campos de entrada de texto.
<button disabled>Clique Desativado</button>
Atributo placeholder - < input> (Entrada de Texto): Desativa um botão para torná-lo não clicável.
<a href="https://www.exemplo.com" target="_blank">Abrir em Nova Janela< /a>
Atributo target - (Link): Define onde abrir o link (mesma janela, nova janela, etc.).
Esse é o básico do que aprendi no curso, esse projeto é relacionado ao que aprendemos no módulo de primeiro passos em HTML. Para conferir o projeto completo, acesse o meu GitHub e para mais conteúdos, me sigam nas minhas redes sociais.
Referências
O Que é HTML: O Guia Definitivo para Iniciantes
Estruturação de Páginas usando HTML e CSS
Como criar uma lista em HTML? (OL, UL e DL)
HTML : Tags básicas - Parte 01
