Cabeço de artigo
Linuxhint é o melhor site online. É desenvolvido para fins educacionais. Escrevemos artigos e fazemos vídeos para ensinar o mundo online!
Estrutura da página HTML
HTML significa linguagem de marcação de hipertexto. Várias tags são utilizadas para fazer uma estrutura de páginas da web. Essas tags também são conhecidas como elementos html. Os elementos HTML exibem conteúdo no navegador.
Os resultados de aprendizado deste artigo são:
- O que é estrutura de documentos HTML?
- O que são tags html?
- O que são elementos e atributos HTML?
Na próxima seção, a estrutura do documento HTML será discutida.
O que é uma estrutura de documentos HTML?
Um documento da estrutura HTML se parece com o seguinte:
Documento Linuxhint
Melhor site do tutorial
Os elementos usados no código acima mencionado são explicados abaixo:
- ““”É a declaração de um documento HTML5.
- ““”É o componente principal de uma página HTML. O atributo lang com o valor “en”Representa o idioma inglês.
- ““”Contém a meta-informação sobre a página.
- ““”Especifique a codificação UTF-8 ao traduzir o código para texto legível pelo homem para o navegador ou vice-versa.
- ““”Contém o link para a folha de estilo CSS.
- ““”Define um título de página HTML que será exibido na barra de título do navegador.
- ““”Tag de fechamento do elemento.
- ““”O elemento contém o conteúdo visível no navegador.
- ““”O elemento determina o título no documento.
- ““”Define um parágrafo.
- ““”É a etiqueta de fechamento do elemento corporal.
- ““”É a etiqueta de fechamento do elemento raiz html.
Saída
Na saída acima, a seta vermelha representa o título, a seta azul representa o título e a seta verde representa o parágrafo.
O que são tags html?
Existem várias tags usadas para constituir uma página HTML. Essas tags também são conhecidas como elementos HTML e são determinadas por uma tag de partida, conteúdo na tag e tag de final. As tags são de dois tipos que são:
- Tags emparelhadas
- Tags vazias
Exemplo 1: Como usar tags emparelhadas em html?
Os elementos HTML com tags de partida e fechamento são chamados de tags emparelhadas. Alguns exemplos de tags emparelhados são mencionados abaixo:
A tag de título
A tag de parágrafo
Este texto é itálicoUm texto de strikethrough
Esses elementos são escritos dentro do elemento corporal do arquivo html.
A saída do código acima mencionado é mostrado abaixo:
Então, o resultado do
A tag é apontada pela seta azul,
A tag é indicada pela seta verde, A tag é indicada pela seta rosa e a seta vermelha está apontando para o resultado da tag.
Exemplo 2: O que são tags vazias em html?
Algumas tags html são conhecidas como elementos vazios porque consistem em apenas tags iniciais, como
,
tags e mais.
O que são elementos e atributos HTML?
Os elementos html, às vezes conhecidos como tags, podem ser associados a atributos. Esses atributos são escritos na etiqueta inicial e utilizados para adicionar informações adicionais aos elementos. Atributos têm nomes e valores.
Exemplo: estrutura de página HTML
Abaixo está um exemplo de uma página HTML:
- ““”Elemento especifica uma divisão ou componente em um documento HTML.
- ““aula”É o atributo que especifica nomes de classe para um elemento a ser usado no CSS e JavaScript:
Depois que o contêiner Div é adicionado. Agora, especificaremos uma seção de cabeçalho utilizando os seguintes elementos:
- ““”O elemento contém a parte introdutória inicial.
- ““”É uma etiqueta de ancoragem que cria um hiperlink para arquivos HTML.
- ““Href”É o atributo com tag que contém o link de outros arquivos HTML.
- ““”Tag tem uma combinação de links de navegação.
- ““
- ““”Representa um item em uma lista:
LOGOTIPO
Depois de adicionar o elemento do cabeçalho, adicione um elemento div com o nome da classe “principal”Isso segura a imagem. Para colocar uma imagem, um html “”A tag é utilizada associada aos atributos:
- ““src”É o atributo que especifica o caminho de uma imagem.
- ““alt”O atributo é utilizado para especificar algum texto que será exibido na tela no lugar da imagem se a imagem não carregar:
Em seguida, adicione uma div com o nome da classe “artigo”. Ele mantém os elementos listados abaixo:
- ““”Elemento especifica conteúdo independente e independente.
- ““”É adicionado para incluir o título.
- ““”O elemento é usado para especificar um parágrafo em HTML:
Em seguida, adicione um elemento de rodapé da seguinte maneira:
- ““”O elemento adiciona um rodapé ao documento HTML. Normalmente contém informações sobre dados de direitos autorais, links e sobre o autor.
- ““”Elemento especifica o tamanho da fonte pequena:
Então, aprendemos sobre vários elementos e atributos usados em um documento HTML. Agora, salve as mudanças no arquivo e abra -o no navegador da web. Como resultado, sua página da web ficará assim:
Agora, vamos estilizar nossa página da web usando CSS.
Elemento de "corpo" de estilo
corpo
margem: 0;
preenchimento: 0;
Timing de caixa: caixa de fronteira;
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;
Abaixo estão as propriedades aplicadas à seção do corpo HTML:
- ““margem”A propriedade é utilizada para adicionar espaço ao redor do elemento.
- ““preenchimento”Propriedade usada para inserir espaço dentro da borda do elemento ou em torno do conteúdo do elemento.
- ““tamanho de caixa"Com o valor"Border-box”Estende a largura e a altura do animal às bordas da borda.
- ““família de fontes”A propriedade está definida com a lista de valores. Esta lista é fornecida para garantir que, se o navegador não suportar o primeiro estilo, a outra será usada.
Estilo “contêiner” div
.contêiner
MAX-LUDA: 90%;
margem: 0 automático;
Aqui:
- ““largura máxima”Propriedade especifica a largura máxima do elemento.
- ““margem”A propriedade adiciona espaço ao redor do elemento.
Div "Main" de estilo
principal
exibição: flex;
Justify-Content: Center;
O elemento principal é estilizado com as seguintes propriedades:
- ““mostrar”Property Flex torna o layout do elemento flexível para os itens dentro dele.
- ““Justify-Content”Propriedade define o alinhamento do item do elemento flexível verticalmente.
Elemento de "cabeçalho" de estilo
cabeçalho
Top-top: 10px;
Botting-Bottom: 10px;
Background-Color: #ffffff;
exibição: flex;
Justify-Content: Space Between;
alinhado-itens: centro;
O elemento do cabeçalho é decorado com as propriedades mencionadas abaixo:
- ““Top-top”A propriedade adiciona o espaço no topo do elemento.
- ““Botting-Bottom”Propriedade define o espaço a partir da parte inferior do elemento.
- ““cor de fundo”Propriedade aloca a cor de fundo do elemento.
- ““mostrar”Propriedade com o valor“flex”Tornará o elemento flexível para os itens dentro dele.
- ““Justify-Content”Com o intermediário do espaço de valor, adicionará espaço entre seus itens.
- ““alinhado-itens”Propriedade define o alinhamento do item horizontalmente.
Estilo "ul" do elemento "cabeçalho"
cabeçalho ul
estilo de lista: nenhum;
exibição: flex;
O elemento UL da etiqueta do cabeçalho é aplicado com estas propriedades de estilo:
- ““estilo de lista”A propriedade está definida como“nenhum”Isso removerá o estilo com marcadores da lista.
- ““mostrar”A propriedade funcionará da mesma forma que discutido antes.
Elemento de estilo "A"
cabeçalho ul li a
Decoração de texto: Nenhum;
preenchimento: 10px;
Cor: #000000;
Aqui:
- ““decoração de texto”Propriedade com o valor“nenhum”Remove o sublinhado do texto.
- ““preenchimento”A propriedade adiciona espaço dentro do limite do elemento.
- ““cor”Propriedade especifica a cor da fonte.
Elemento de estilo “img”
img
Objeto-ajuste: capa;
largura: 100%;
Altura: 300px;
O "img”O elemento é estilizado fornecendo as seguintes propriedades:
- ““Objeto-ajuste”Define o conteúdo do elemento substituído.
- ““largura”Propriedade define a largura do elemento.
- ““altura”A propriedade é usada para definir a altura do elemento.
Elemento de “artigo” de estilo
artigo
Largura: 450px;
Alinhamento de texto: centro;
margem: automático;
O elemento do artigo é estilizado com as propriedades explicadas abaixo:
- ““largura”A propriedade é utilizada para o cenário da largura do elemento.
- ““alinhamento de texto”Define o alinhamento do texto do elemento.
- ““margem”A propriedade gera espaço ao redor do elemento.
Elemento de "rodapé" de estilo
ROONO
Top-top: 20px;
Botting-Bottom: 20px;
Background-Color: #000000;
Cor: #ffffff;
Alinhamento de texto: centro;
O "rodapé”O elemento é estilizado com as propriedades que são explicadas abaixo:
- ““Top-top”A propriedade adiciona espaço no topo do conteúdo do elemento.
- ““Botting-Bottom”A propriedade é usada para adicionar o espaço inferior do conteúdo do elemento.
- ““cor de fundo”Define a cor de fundo do elemento.
- ““cor”É utilizado para especificar a cor da fonte.
Estilo "h2" do elemento "artigo"
Artigo H2
Alinhamento de texto: centro;
O elemento H2 dentro da tag do artigo é aplicado com o “alinhamento de texto”Propriedade com o Centro de Valor.
Estilo “P” do elemento “Artigo”
Artigo P
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;
Size da fonte: 20px;
Aqui:
- ““família de fontes”Propriedade é definida com os valores Verdana, Genebra, Tahoma, Sans-Serif. Esta lista é fornecida para garantir que, se o primeiro estilo não for suportado pelo navegador, a outra será aplicada.
- ““tamanho da fonte”Define o tamanho da fonte.
Aqui está a aparência final da página HTML após a aplicação das propriedades do CSS:
Todas as informações essenciais relacionadas à estrutura de uma página HTML.
Conclusão
Um documento HTML é uma estrutura de uma página da web. Vários elementos são usados em documentos HTML que instruem o navegador o que exibir na página da web. Esses elementos podem ser combinados com suas etiquetas de início e final ou podem estar vazios, como
,
tags e mais. Os elementos HTML são propriedades de estilo aplicadas com o uso de CSS. Para uma melhor compreensão, este artigo explicou a estrutura da página HTML com a ajuda de um exemplo prático.