Estrutura do documento HTML: Aprenda a estrutura básica do HTML

Publicados: 2020-12-14

O HTML tem sido usado como uma linguagem de marcação padrão para documentos acessíveis na Internet por meio de dados do navegador. O HTML consiste em uma série de pequenos elementos, tags e códigos que, quando compilados em um formato estruturado, criam uma página da Web que qualquer pessoa pode visualizar com acesso adequado à Internet.

Mudou a forma como as pessoas trabalham. HTML e CSS são usados para criar e manipular elementos em uma página da web junto com javascript, HTML permite que os criadores definam papéis diferentes para cada elemento dando total liberdade de personalização no processo de criação.

HTML significa Hyper Text Markup Language e é usado para criar páginas da Web exibidas em sites.

Existem três aspectos principais que, quando reunidos, ajudam a construir uma página web.

Estrutura HTML — suporta os elementos estruturais
Estilo CSS — ajuda a projetar e dá um estilo a esses elementos estruturais
Interação JS — permite a interação entre esses elementos

Na estrutura HTML, os elementos e as tags são emparelhados entre si para marcar o conteúdo.

Cada página disponível na internet inclui tags HTML. Essas tags ajudam a exibir o conteúdo online com uma perspectiva clara e aberta, que sempre pode ser moderada e alterada. Para explicar as coisas de forma mais simplista, vamos descrever como os elementos e tags são usados no programa.

Os elementos de abertura e fechamento mudam, mas as tags permanecem as mesmas. As tags são inseridas antes e no final das frases, permitindo que sejam formatadas na página. Uma página da Web ideal consiste em três seções principais e essenciais:

Título
Cabeça
Corpo

O elemento Head é usado para destacar o início/título da seção head. A seção head sempre ajuda como uma descrição sobre a página. O conteúdo dentro das tags head, ou seja, o título, é o que é usado como fonte para identificar o conteúdo da página.

Abaixo estão listadas todas as tags que podem ser usadas no elemento head:

<base>
<link>
<meta>
<noscript>
<script>
<estilo>
<título>

Por exemplo:

<CHEFE>

<TITLE> Um exemplo de Olá mundo em HTML<TITLE>

</HEAD>

Os elementos de nível de bloco são usados para identificar seções específicas de uma página da Web, seja um parágrafo, subtítulos ou algumas listas a serem criadas.

Parágrafo: <P>e </P>

Título, nível um:<H1>Título, nível dois:<H2>e </H2>

Regra horizontal:<HR> Centragem:<CENTER>

Rodapé : Não há tags especiais para denotá-lo, mas ainda é recomendável ter um rodapé na página da web para ajudar a identificar as seções que exigem contato com o autor. Eles podem incluir uma seção de perguntas frequentes ou um e-mail para assinar um boletim informativo.

<HTML>

<CHEFE>

<TITLE>Uma empresa de calçados <TITLE>

</HEAD>

<CORPO>

<H1>Bem-vindo aos Sapatos Incríveis! </H1>: </H2>

<CENTER> Por que não visitar <A HREF =..http://www.example1.com/..>Exemplo de site

</A>

</CENTER>

</BODY>

</HTML>

A seção acima explicou os principais elementos em uma página web de uma estrutura HTML.

Agora, passamos para a fonte HTML e tentamos entender como se pode usá-la para entender a estrutura do programa e seus elementos.

Como iniciante, isso ajuda muito a entender como outras páginas são desenvolvidas e podem ser usadas como referência para criar uma versão personalizada para sua própria página.

Clique com o botão direito em qualquer lugar da página da web e selecione 'ver fonte da página'. Isso abrirá uma janela que contém o código-fonte da página.

Para inspecionar uma página

Clique com o botão direito em qualquer lugar da página da Web e selecione 'Inspecionar' para ver a lista e os tipos de elementos usados para criar essa página da Web específica. Incluiria HTML e CSS, que podem ser modificados através do painel de estilo.

Com a estrutura básica do HTML e suas tags explicadas, agora vamos entender os elementos básicos necessários para escrever conteúdo em HTML.

<p> Esta tag é usada em uma página da web quando há necessidade de um parágrafo, e para finalizar é usada a tag </p>.

<br> Esta tag é usada para quebrar linhas e é usada principalmente para escrever linhas simples, seja contato ou endereço.

<hr> Esta tag é usada para separar o conteúdo da página da web em duas seções.

Todas as tags aqui são implementadas em um código de página da Web de amostra

Aprenda: 21 Idéias de Projetos de Desenvolvimento Web

ENTRADA

<html>

<cabeça>

</head>

<corpo>

<h1>Estrutura do HTML</h1>

<p>

Por upGrad Education<br>

<hr>

Aprenda o básico <br>

<hr>

Por upGrad Education<br>

</p>

</body>

</html>

Atributos

Para todas as tags mencionadas, um atributo é utilizado quando há necessidade de informações adicionais. Os atributos são definidos com dois parâmetros, a saber 'valor' e 'nome'.

Aqui, o parâmetro 'name' tem uma função para pegar o nome da propriedade que se considera atribuída. E o parâmetro 'value' tem uma função similar para pegar o valor dos nomes das propriedades alinhando com o elemento.

<img> Este atributo é usado para adicionar/incorporar uma imagem na página da web. Esta tag ajudará a especificar o caminho da imagem. E o <height> e <width> indicam a altura e a largura da imagem, respectivamente.

<alt> Este atributo é aplicado quando a imagem não consegue carregar devido a um erro de conexão ou por algum outro motivo. A tag alt serve como legenda para a imagem.

Inscreva-se em cursos de engenharia de software das melhores universidades do mundo. Ganhe Programas PG Executivos, Programas de Certificado Avançado ou Programas de Mestrado para acelerar sua carreira.

Leia: 8 ideias e tópicos interessantes para projetos de pilha completa

Exemplo

<html>

<corpo>

<h2>O atributo src</h2>

<p>As imagens HTML são definidas com a tag img e o nome do arquivo da fonte da imagem é especificado no atributo src:</p>

</body>

</html>

Para alterar o estilo do texto, tamanho, fonte e qualquer outra função relacionada ao texto, é utilizada a tag <style>

Exemplo

<html>

<corpo>

<h2>O atributo de estilo</h2>

<p>O atributo é usado para alterar estilos , como cor:</p>

<p style="color:red;">Este é um parágrafo vermelho.</p>

</body>

</html>

Com aplicativos de modificação de texto, o HTML também fornece tags para modificar o texto para solicitações personalizadas usando essas tags.

<b> – texto em negrito
<strong> – Texto importante
<i> – Texto em itálico
<em> – Texto enfatizado
<mark> – Texto marcado
<pequeno> – Texto menor
<del> – Texto excluído
<ins> – Texto inserido
<sub> – Texto subscrito
<sup> – Texto sobrescrito

Para resumir o artigo, aprendemos os seguintes recursos e noções básicas de HTML:

Estrutura HTML
Tags, elementos e seus tipos
Tags básicas e suas aplicações

Todos esses recursos, tags e atributos ajudam a entender a necessidade do HTML.

Se você estiver interessado em aprender mais sobre desenvolvimento de software full-stack, confira o Programa PG Executivo do upGrad & IIIT-B em Desenvolvimento de Software Full-stack, projetado para profissionais que trabalham e oferece mais de 500 horas de treinamento rigoroso, mais de 9 projetos, e atribuições, status de ex-alunos do IIIT-B, projetos práticos práticos e assistência de trabalho com as principais empresas.

Prepare-se para uma carreira do futuro

Inscreva-se agora para Mestrado em Engenharia de Software