HTML - Hyper Text Markup Language (Linguagem de marcação de texto), é uma linguagem de descrição de página, é utilizado para criação de páginas e aplicações web. Em conjunto com o CSS (Folha de Estilo em Cascata, em inglês) e JAVASCRIPT, eles formam as estruturas principais do que conhecemos como a internet. Nesse artigo, vamos ver como fazer a estrutura básica de um layout utilizando HTML e CSS, nos próximos artigos iremos aprofundar mais nas suas funcionalidades.
Toda página de internet utiliza uma estrutura básica, como apresentado abaixo. O layout é composto por Tags, que são essas palavras entre os sinais de maior e menor e possui abertura <Comando> e fechamento </Comando>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Título da Página</title>
</head>
<body>
</body>
</html>
No código atribuímos as tags de Cabeçalho <Head>, Título <Title>, o corpo do site/layout <Body>, onde fica todo conteúdo apresentado ao usuário. A tag <meta> com o conteúdo charset="utf-8", especifica a decodificação de caracteres para o documento HTML, no caso, o português.
Veremos agora como é feito um layout básico de um site, por exemplo:
No código abaixo utilizamos a mesma estrutura que vimos anteriormente e acrescentamos por meio da tag <Style> o código CSS.
Note que cada parte do layout, cabeçalho, menu, conteúdo e o rodapé foi atribuída uma tag <div> que é utilizada para definir uma divisão ou seção em um documento HTML.
Cada <div> possui um id correspondente no código CSS com seus parâmetros, que identifica cada estilo da tag separadamente.
<!DOCTYPE html>
<html>
<meta charset="utf-8"/> // Decodificação para Português
<head>
<title>Estrutura Básica HTML</title> // Título da página
</head>
<style> // Tag de estilo CSS
body{ // Estilo utilizado no corpo do site
text-decoration: underline; // sublinhado
font-size:20px; // Tamanho da fonte
text-align: center; // Define a posição do texto no centro
}
#cabecalho{
width: 100%; // Largura 100% da página
height: 100px; // Altura
border: 1px solid black; // Borda
background: #CDCDC1; // Cor de fundo do cabeçalho
}
#menu{
float: left; // Posição do Menu, esquerdo
min-height: 300px; // Tamanho mínimo 300 píxels
width: 200px; // Largura
border: 1px solid black; // Borda
background: #8b8b83; // Cor de fundo do menu
}
#conteudo{
min-height: 300px; // Tamanho mínimo 300 píxels
border: 1px solid black; // Borda
background: white; // Cor de fundo do menu
}
#rodape{
height: 50px; // Altura do rodapé
border: 1px solid black; // Borda
background: #CDCDC1; // Cor de fundo do menu
}
</style>
<body>
<div id="cabecalho">Cabeçalho</div> // Cabeçalho
<div id="menu">Menu // Menu
<ul> // Lista de links
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div id="conteudo">Conteúdo</div> // Conteúdo
<div id="rodape">Rodapé</div> // Rodapé
</body>
</html>
Curtiu? Deixe seu comentário, dúvida!
Como Fazer um Layout Básico Usando HTML e CSS
Reviewed by Guilherme
on
julho 03, 2018
Rating:
Reviewed by Guilherme
on
julho 03, 2018
Rating:
Nenhum comentário: