Introdução ao Html

O HTML (Linguagem de Marcação de Hipertexto) é a linguagem de marcação padrão para criar páginas da web. Ele é usado para estruturar o conteúdo da página, como texto, imagens, links e outros elementos. O HTML é composto por uma série de tags que definem a estrutura e a formatação do conteúdo, permitindo que os navegadores interpretem e exibam as páginas da web de forma adequada.

HTML significa Hyper Text Markup Language, consiste na linguagem de marcação padrão para criar páginas da Web. O HTML descreve a estrutura de uma página da Web, consististindo em uma série de elementos.

Os elementos HTML informam ao navegador como exibir o conteúdo, esses elementos rotulam partes do conteúdo como "este é um título", "este é um parágrafo", "este é um link", etc.

Tags Principais do HTML

As tags principais do HTML incluem:

• < !DOCTYPE html > Não é exatamente uma tag, mas é uma "informação" para o navegador sobre qual tipo de documento esperar.
• < html >: A tag raiz que envolve todo o conteúdo da página.
• < head >: Contém informações sobre o documento, como título, meta tags e links para arquivos CSS e JavaScript.
• < body >: Contém o conteúdo visível da página, como texto, imagens e outros elementos.
• < h1 > até < h6 >: Usadas para criar títulos e subtítulos.
• < p >: Usada para criar parágrafos de texto.
• < br >: Usada para criar quebras de linha.

Leia mais

Headings no HTML

Os headings (cabeçalhos) no HTML são usados para definir a hierarquia de títulos e subtítulos em uma página. Eles vão de < h1 > a < h6 >, sendo < h1 > o título principal e < h6 > o subtítulo menos importante.

Exemplo de Heading H1

Exemplo de Heading H2

Exemplo de Heading H3

Exemplo de Heading H4

Exemplo de Heading H5

Exemplo de Heading H6

As tags de headings são muito importantes para os mecanismos de pesquisa pois estes usam os títulos para indexar a estrutura e o conteúdo de suas páginas da web. Os usuários geralmente visitam uma página pelos seus títulos. É importante usar títulos para mostrar a estrutura do documento.

Leia mais

Tags na estrutura Semântica de um Documento HTML

A estrutura de um documento HTML seguem com as seguintes tags:

• < header >: a tag header especifica um cabeçalho para um documento ou seção.
• < main >: a tag main especifica o conteúdo principal do documento.
• < section >: a tag section especifica uma seção no documento.
• < article >: a tag article especifica um artigo independente no documento.
• < footer >: a tag footer especifica um rodapé para um documento ou seção.
• < aside >: a tag aside especifica um conteúdo secundário no documento.

Essas tags ajudam a organizar o conteúdo de forma semântica, facilitando a leitura e a compreensão do documento tanto para os usuários quanto para os mecanismos de busca.

Na imagem abaixo, temos um exemplo de como essas tags podem ser organizadas em um documento HTML:

Imagem disponivel em: https://commons.wikimedia.org/wiki/File:Plan_html_5.png

Leia mais

Tag para imagens no HTML

A tag para inserir imagens em HTML é a < img >. Ela é usada para incorporar imagens em uma página da web. A tag < img > é um elemento vazio, o que significa que não tem uma tag de fechamento. Ela possui atributos importantes, como src (source) para especificar o caminho da imagem e alt (alternative text) para fornecer uma descrição alternativa da imagem, que é importante para acessibilidade.

Nós podemos colocar no atributo src o caminho relativo ou absoluto da imagem. O caminho relativo é usado quando a imagem está localizada na mesma pasta ou em uma subpasta do arquivo HTML, enquanto o caminho absoluto é usado quando a imagem está hospedada em um servidor externo ou em um local diferente do arquivo HTML.

Exemplo de caminho relativo: < img src="imagens/exemplo.jpg" alt="Descrição da imagem" >

Exemplo de caminho absoluto: < img src="https://www.exemplo.com/imagens/exemplo.jpg" alt="Descrição da imagem" >

Para exemplificar o uso de um caminho relativo, irei demonstrar utilizando o caminho: < img src="HTML\assets\images\gatos-laranjas.jpg" alt="Gatos Laranjas" width="250" title="Gatos Laranjas" >, este caminho esta presente na pasta do curso, e a imagem é a seguinte:

Os atributos width e height podem ser usados para especificar o tamanho da imagem. Os atributos alt e title são importantes para acessibilidade e descrição da imagem, em que o atributo alt fornece uma descrição alternativa da imagem para usuários que não conseguem visualizá-la, e o atributo title exibe um tooltip quando o usuário passa o mouse sobre a imagem.

Leia mais

Tags para listas no HTML

No HTML, existem três tipos de listas:

• < ul >: Lista não ordenada.
• < ol >: Lista ordenada.
• < dl >: Lista de definições.

Vamos exemplificar cada tipo de lista:

Lista Não Ordenada

Uma lista não ordenada é usada para itens que não têm uma ordem específica. Ela é criada usando a tag < ul >, e cada item da lista é definido com a tag < li >.

Exemplo de lista não ordenada: (Lista de compras)

• Arroz
• Feijão
• Macarrão

Lista Ordenada

Uma listaordenada é usada para itens que têm uma ordem específica. Ela é criada usando a tag < ol >, e cada item da lista é definido com a tag < li >.

Exemplo de lista ordenada: (Receita de bolo)

1. Misture as gemas, a margarina e o açúcar até obter uma massa homogênea.
2. Acrescente o leite e a farinha de trigo aos poucos, sem parar de bater.
3. Despeje a massa em uma forma grande de furo central untada e enfarinhada.

Lista de Definições

Uma lista de definições é usada para apresentar termos e suas respectivas definições. Ela é criada usando a tag < dl >, e cada termo é definido com a tag < dt >, enquanto a definição é dada com a tag < dd >.

Exemplo de lista de definições: (Glossário)

HTML

Linguagem de Marcação de Hipertexto.

CSS

Folhas de Estilo em Cascata.

Leia mais

Tags para links no HTML

A tag para criar links em HTML é a < a >. Ela é usada para criar hiperlinks que permitem aos usuários navegar entre páginas da web ou para diferentes seções dentro da mesma página.
A tag < a > possui o atributo href, que especifica o destino do link, e o texto entre as tags de abertura e fechamento é o texto clicável do link.

Temos quatro tipos de links principais:

• Link Relativo: Aponta para um recurso dentro do mesmo site ou diretório. Exemplo: < a href="HTML\2_tags.html" >
• Link Absoluto: Aponta para um recurso em outro site ou domínio. Exemplo: < a href="https://github.com/Jotshh/Curso-Html-Css-Javascript" >
• Link Âncora: Aponta para uma seção específica dentro da mesma página. Exemplo: < a href="#" >
• Link para Email: Abre o programa de email do usuário com o campo de destinatário preenchido. Exemplo: < a href="mailto:seuuser@seuemail.com >

Os links podem ter atributos adicionais, como target="_blank" para abrir o link em uma nova aba, ou title para fornecer informações adicionais sobre o link quando o usuário passa o mouse sobre ele.

Leia mais

Tags para formulários em HTML

Para criarmos um formulário em HTML, utilizamos a tag < form >. Essa tag é usada para agrupar elementos de entrada, como campos de texto, botões e outros controles. O atributo action especifica onde os dados do formulário serão enviados quando o usuário submeter o formulário.

A tag < fieldset > é usada para agrupar elementos relacionados dentro do formulário.
a tag < legend > é usada para adicionar um título ao grupo de elementos.
a tag < div > em formulários HTML funciona como um contêiner de bloco genérico, essencial para organizar, agrupar e estilizar campos (inputs, labels, botões) com CSS sem adicionar significado semântico.

Dentro do formulário, podemos usar várias tags para criar diferentes tipos de campos de entrada, como:

• < input type="text" >: Campo de texto para entrada de dados.
• < input type="password" >: Campo de senha para entrada de senhas.
• < input type="email" >: Campo para entrada de endereços de email.
• < input type="submit" >: Botão para enviar o formulário.
• < textarea >: Área de texto para entrada de texto multilinha.
• < select >: Menu suspenso para seleção de opções.

Um exemplo de formulário bem completo com as tags mencionadas acima é demonstrado abaixo:

Nos campos adicionados no exemplo, foram utilizadas as tags <input> com diferentes valores para o atributo type, além das tags <select> e <textarea>.
Também foram utilizados atributos como:

• placeholder: Define o texto que será exibido como dica no campo.
• required: Indica que o campo é obrigatório.
• pattern: Define um padrão para validação do valor digitado.

Leia mais

Tags para Tabelas em HTML

A tag <table> é utilizada para criar tabelas em HTML. A tag <thead> é utilizada para definir o cabeçalho da tabela.
A tag <tbody> é utilizada para definir o corpo da tabela. A tag <th> é utilizada para criar células de cabeçalho. As tags <tr> e <td> são utilizadas para criar linhas e células na tabela.
A tag <tfoot> é utilizada para definir o rodapé da tabela.

Um exemplo de Utilização de uma tabela:

Leia mais