Como um site é estruturado?
Vamos entender a estrutura e aprender sobre as marcações e também o que são tags e elementos.
Todo tipo de documento que você já viu na vida seja jornais, formulários de seguro, catálogos de shopping e a lista segue infinitamente. Cada um desses documentos tem uma formatação específica para facilitar a leitura. Numa página web, é a mesma coisa. Você já deve ter notado que todo o site possui cabeçalho, parágrafos são divididos em seções diferentes etc. Normalmente o formato depende do objetivo do site, diferentes sites, diferentes formatos.
O HTML é usado para indicar aos navegadores os blocos de conteúdo. E marque isso toda estrutura do site é feita por blocos.
HTML significa HyperText Markup Language (linguagem para marcação de hipertexto). A parte do hipertexto se refere ao fato de que o HTML permite que se crie links. Assim os visitantes podem se mover de uma parte da página para outra de forma rápida e fácil.
E a marcação permite que você especifique o texto e dão um significado adicional ao conteúdo do documento que a gente quer mostrar. O navegador que não tem a menor ideia do que você quer que ele faça primeiro é preciso determinar o alicerce o seu site, esse papel é do HTML.
Tags HTML são constituídos por caracteres que ficam dentro do sinalzinho de menor (<) e maior (>).
Juntando uma tag de abertura e uma de fechamento com o conteúdo entre elas temos um elemento HTML. A tag de fechamento, tem uma barra invertida logo no início, antes do texto entre os sinais de maior e menor. Cada elemento HTML diz ao seu navegador alguma coisa sobre a informação que está dentro da tag de abertura e fechamento.
Se isso parece confuso para você leia várias vezes e anote no seu caderninho que você tem que voltar aqui.
A tag que inicia o documento é <html>:
<html>
</html>Essa tag indica que alguma coisa entre ela e a tag de fechamento. É código HTML. Ou seja, indica o início e o fim do seu código HTML.
O segundo elemento é o body, o corpo da página.
<html>
<body>
</body>
</html>A tag ou elemento <body> indica que alguma coisa entre a tese de abertura e até de fechamento. Deve ser mostrado dentro da parte principal do navegador.
E tem um outro elemento chamado <head> que é o cabeçalho do seu site. E vem antes da tag <body>.
<html>
<head>
</head>
<body>
</body>
</html>Agora podemos começar a adicionar conteúdo. Primeiro o título da página, aquele que aparece na aba do navegador. E fazemos isso com o elemento <title> que fica dentro do cabeçalho.
<body>
<html>
<head>
<title>Este é o título da página</title>
</head>
<body>
</body>
</html>E no corpo do documento podemos começar a colocar texto. E todo texto é composto de um cabeçaho e paragráfos.
Palavras entre <h1> e </h1> são cabeçalho principal. Em parágrafo de texto aparece entre <p> e </p>.
<body>.
<html>
<head>
<title>Este é o título da página</title>
</head>
<body>
<h1> Este é o título do texto</h1>
<p> Este é um parágrafo no corpo do texto.</p>
</body>
</html>Os termos tag e elementos são frequentemente usados como sinônimos. Mas sendo mais rigoroso, um elemento compreende a tag de abertura e a tag de fechamento e qualquer conteúdo que esteja entre elas. Ou seja, o bloco todo. Então, todo o elemento possui duas tags mas uma tag não é um elemento. As tags marcam o inicio e o fim dos elementos.
Atributos nas tags
Os atributos são utilizados para nos dar mais informações sobre os elementos.
Eles são usados na tag de abertura do elemento. E são feitos de duas partes, um nome e um valor separado por um sinal de igual.
O nome do atributo indica o tipo de informação extra que você está suplementando sobre o conteúdo do elemento. Deve ser escrito sempre em caixa baixa. O valor da informação ou a configuração para o atributo deve ser sempre escrito, entre aspas duplas.
Diferentes atributos podem possuir diferentes valores. Aqui a gente tem um atributo chamado lang que é usado para indicar a linguagem neste elemento.
<p lang=“fr”> Paragrafo em Francês</p>
<p lang=“en-us”> Paragrafo em inglês</p>A maioria dos atributos tem um elemento específico onde pode ser utilizado, mas alguns podem aparecer em outros elementos. Lang é uma abreviação de language.
Então, resumindo, o HTML usa elementos para descrever a estrutura das páginas. Cada elemento tem uma tag de abertura e fechamento. E mantenha sempre em mente que as tags funcionam como contêiners. Eles te dizem alguma informação sobre o que está entre a tag de abertura e a tag de fechamento.
Referências:
Duckett, J. (2011). “HTML and CSS: Design and Build Websites.” Hoboken, NJ: Wiley.
VISUAL QUICKSTART GUIDE HTML 5 and CSS3 Seventh Edition, Elizabeth Castro, Bruce Hyslop
Was this helpful?
0 / 0