HTML

HTML é a linguagem para criar páginas web, estruturadas com tags como <html>, <head>, <title>, <body>, <b>, <i>, <p>, <h1>, <img>, <u>, <s>, e <marquee>. Elas organizam e formatam o conteúdo.

O que é?

HTML (HyperText Markup Language) é a linguagem usada para criar e estruturar páginas na web, semelhante a estrutura de uma casa. É importante que o arquivo termine com a extensão .html, pois isso indica ao navegador que o documento deve ser interpretado como uma página HTML. Utiliza tags para definir cada elemento da página, como títulos, parágrafos e imagens.

Estrutura Básica

<html>
    <head>
        <title>Olá, Mundo!</title>
    </head>
    <body>
        Hello, World!
    </body>
</html>

A estrutura básica de uma página HTML começa com a declaração do tipo de documento e inclui três principais elementos (tags): <html>, <head>, e <body>.

<html>: A tag raiz que envolve todo o conteúdo da página. Ela é o contêiner principal e todos os elementos HTML devem estar dentro dela.
<head>: A seção <head> contém metadados e informações de configuração que não são diretamente exibidas ao usuário. No exemplo, inclui:
- <title>: Define o título da página, que é exibido na aba do navegador. No exemplo, o título é "Olá, Mundo!".
<body>: A seção <body> contém todo o conteúdo visível da página, como textos, imagens, links e outros elementos com os quais o usuário interage.

Essa estrutura fornece a base necessária para criar e organizar o conteúdo em uma página web, garantindo que tanto as informações visíveis quanto as invisíveis para o usuário estejam corretamente posicionadas e funcionem como esperado.

O que são tags?

As tags são como caixas que delimitam o conteúdo e são definidas por símbolos de menor que (<) e maior que (>). Por exemplo, a tag <h1> marca o início de um título e </h1> o encerra. É crucial abrir e fechar as tags corretamente, pois isso mantém a "construção" organizada. Se você abrir uma tag <div> e depois uma <p>, deve fechar primeiro o <p> com </p>, e depois o <div> com </div>. Isso mantém a estrutura organizada e clara, garantindo que a "casa" (página) esteja bem construída e funcione corretamente.

Em resumo, HTML é a base para construir e organizar o conteúdo na web, utilizando tags para definir o que cada parte do conteúdo representa.

Outras Tags

<b>: A tag <b> é usada para aplicar negrito ao texto, destacando-o visualmente.
<i>: A tag <i> coloca o texto em itálico. Semanticamente, é usada para marcar um texto que deve ser diferenciado do texto normal, como termos técnicos, pensamentos ou nomes de obras.
<p>: A tag <p> representa um parágrafo, sendo a estrutura básica para blocos de texto. Ela cria uma separação lógica e visual entre diferentes seções de texto.
<h1> a <h6>: Estas tags definem cabeçalhos, com <h1> sendo o mais importante e <h6> o menos importante. Eles são usados para hierarquizar o conteúdo.. O <h1> geralmente é utilizado para o título principal da página, enquanto os outros (<h2>, <h3>, etc.) são usados para subtítulos e seções menores.
<img>: A tag <img> é usada para incorporar imagens na página. Ela requer o atributo src para especificar o caminho da imagem.
<u>: A tag <u> sublinha o texto. Pode ser utilizada para destacar nomes próprios ou outros textos especiais.
<s>: A tag <s> exibe o texto com uma linha no meio, indicando que o texto está incorreto ou foi removido. É frequentemente utilizada para mostrar correções ou mudanças de informação, como preços antigos em uma promoção.
<marquee>: A tag <marquee> faz o texto rolar na tela.
<center>: A tag <center> centraliza o conteúdo dentro dela. Embora ainda funcione, essa tag é obsoleta e não recomendada para uso em HTML moderno. Em vez disso, use CSS para centralização.
<br>: A tag <br> insere uma quebra de linha (line break). É útil para adicionar quebras de linha dentro de texto contínuo, sem iniciar um novo parágrafo.
<pre>: A tag <pre> é usada para definir texto pré-formatado. O texto dentro desta tag é exibido em uma fonte monoespaçado (como uma máquina de escrever), e os espaços em branco e quebras de linha são mantidos como estão.

Exemplo

<html>
<head>
    <title>Exemplo de Tags HTML</title>
</head>
<body>
    <h1>Exemplo de Página com Várias Tags HTML</h1>
    <h2>Subtítulo Explicativo</h2>
    <p>Este é um exemplo de parágrafo que utiliza várias tags HTML para demonstrar seu uso.</p>
    
    <h3>Uso de <b>Negrito</b> e <i>Itálico</i></h3>
    <p>A tag 'b' é usada para aplicar <b>negrito</b> ao texto, destacando-o visualmente.</p>
    <p>A tag 'i' é usada para marcar texto em <i>itálico</i>, como termos técnicos ou pensamentos.</p>
    
    <h4>Uso de <u>Sublinhado</u> e <s>Riscado</s></h4>
    <p>Podemos <u>sublinhar</u> texto importante ou <s>mostrar que algo foi removido</s>.</p>
    <p>Também podemos pular <br/>uma linha no texto de formas diferente.</p>
    <pre>Essa tag respeita
    exatamente
    a
    forma
    como
    colocou
    o
    texto.</pre>
    
    <h5>Exemplo de Imagem Centralizada</h5>
    <center><p>Abaixo está um exemplo de uma imagem incorporada:</p>
    <img src="https://inspa.academy/logo1.png"/></center>
    
    <h6>Texto Rolando</h6>
    <marquee>Este é um exemplo de texto rolando com a tag.</marquee>
</body>
</html>

Vídeos para Estudo

AnteriorDia 05/08 PróximoLorem Ipsum

Atualizado há 8 meses

Isto foi útil?

O que é?

Estrutura Básica

<html>
    <head>
        <title>Olá, Mundo!</title>
    </head>
    <body>
        Hello, World!
    </body>
</html>

A estrutura básica de uma página HTML começa com a declaração do tipo de documento e inclui três principais elementos (tags): <html>, <head>, e <body>.

<html>: A tag raiz que envolve todo o conteúdo da página. Ela é o contêiner principal e todos os elementos HTML devem estar dentro dela.

<head>: A seção <head> contém metadados e informações de configuração que não são diretamente exibidas ao usuário. No exemplo, inclui:

<title>: Define o título da página, que é exibido na aba do navegador. No exemplo, o título é "Olá, Mundo!".

<body>: A seção <body> contém todo o conteúdo visível da página, como textos, imagens, links e outros elementos com os quais o usuário interage.

O que são tags?

Em resumo, HTML é a base para construir e organizar o conteúdo na web, utilizando tags para definir o que cada parte do conteúdo representa.

Outras Tags

<b>: A tag <b> é usada para aplicar negrito ao texto, destacando-o visualmente.

<i>: A tag <i> coloca o texto em itálico. Semanticamente, é usada para marcar um texto que deve ser diferenciado do texto normal, como termos técnicos, pensamentos ou nomes de obras.

<p>: A tag <p> representa um parágrafo, sendo a estrutura básica para blocos de texto. Ela cria uma separação lógica e visual entre diferentes seções de texto.

<h1> a <h6>: Estas tags definem cabeçalhos, com <h1> sendo o mais importante e <h6> o menos importante. Eles são usados para hierarquizar o conteúdo.. O <h1> geralmente é utilizado para o título principal da página, enquanto os outros (<h2>, <h3>, etc.) são usados para subtítulos e seções menores.

<img>: A tag <img> é usada para incorporar imagens na página. Ela requer o atributo src para especificar o caminho da imagem.

<u>: A tag <u> sublinha o texto. Pode ser utilizada para destacar nomes próprios ou outros textos especiais.

<s>: A tag <s> exibe o texto com uma linha no meio, indicando que o texto está incorreto ou foi removido. É frequentemente utilizada para mostrar correções ou mudanças de informação, como preços antigos em uma promoção.

<marquee>: A tag <marquee> faz o texto rolar na tela.

<center>: A tag <center> centraliza o conteúdo dentro dela. Embora ainda funcione, essa tag é obsoleta e não recomendada para uso em HTML moderno. Em vez disso, use CSS para centralização.

<br>: A tag <br> insere uma quebra de linha (line break). É útil para adicionar quebras de linha dentro de texto contínuo, sem iniciar um novo parágrafo.

<pre>: A tag <pre> é usada para definir texto pré-formatado. O texto dentro desta tag é exibido em uma fonte monoespaçado (como uma máquina de escrever), e os espaços em branco e quebras de linha são mantidos como estão.

Exemplo

<html>
<head>
    <title>Exemplo de Tags HTML</title>
</head>
<body>
    <h1>Exemplo de Página com Várias Tags HTML</h1>
    <h2>Subtítulo Explicativo</h2>
    <p>Este é um exemplo de parágrafo que utiliza várias tags HTML para demonstrar seu uso.</p>
    
    <h3>Uso de <b>Negrito</b> e <i>Itálico</i></h3>
    <p>A tag 'b' é usada para aplicar <b>negrito</b> ao texto, destacando-o visualmente.</p>
    <p>A tag 'i' é usada para marcar texto em <i>itálico</i>, como termos técnicos ou pensamentos.</p>
    
    <h4>Uso de <u>Sublinhado</u> e <s>Riscado</s></h4>
    <p>Podemos <u>sublinhar</u> texto importante ou <s>mostrar que algo foi removido</s>.</p>
    <p>Também podemos pular <br/>uma linha no texto de formas diferente.</p>
    <pre>Essa tag respeita
    exatamente
    a
    forma
    como
    colocou
    o
    texto.</pre>
    
    <h5>Exemplo de Imagem Centralizada</h5>
    <center><p>Abaixo está um exemplo de uma imagem incorporada:</p>
    <img src="https://inspa.academy/logo1.png"/></center>
    
    <h6>Texto Rolando</h6>
    <marquee>Este é um exemplo de texto rolando com a tag.</marquee>
</body>
</html>