No artigo de hoje veremos um tutorial básico de HTML e CSS. Vamos criar uma página Web simples, para exibir uma lista de Notas. O HTML (HyperText Markup Language), é uma linguagem de marcação onde é possível criar documentos para serem exibidos em um navegador da Web. Ele é fundamental no desenvolvimento Web, pois com ele criamos interfaces para nossos usuários.
Junto com o HTML temos o CSS (Cascading Style Sheets), que é uma linguagem de folha de estilo. O CSS é utilizado para descrever a apresentação de um documento escrito em uma linguagem de marcação como o HTML. Assim o CSS faz toda a estilização da página Web escrita em HTML.
Padrão do HTML
O HTML segue um padrão de tags que identificam os elementos da página. Assim, para adicionar um elemento em nossa página Web, adicionamos uma nova tag específica para aquele elemento.
O documento HTML é escrito em um padrão de árvore de tags. Assim temos uma tag dentro da outra, e dentro das tags podemos ter elementos. A maioria das tags tem a sua parte de abertura que se inicia com < e a parte de fechamento que se inicia com </.
Estrutura básica do HTML
Vamos começar criando a estrutura padrão de um documento HTML. Crie o arquivo index.html e cole o seguinte conteúdo nele.
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<style>
</style>
<title>Primeira página HTML</title>
</head>
<body>
<h1>Primeira página HTML</h1>
</body>
</html>No início temos o DOCTYPE, que é uma instrução para que o navegador Web saiba sobre qual versão de código o documento foi criado. Depois temos nossa primeira tag que é a html. Em nossa tag html temos o atributo lang que utilizamos para indicar qual é o idioma que predomina no documento. A tag html é a raiz da marcação, assim ela é a primeira a ser aberta e a última a ser fechada. Todas as outras tags ficam dentro dela.
Depois temos nossa tag head que indica o cabeçalho do documento. No head ficam todas as informações da página. Neste exemplo temos as seguintes informações em nosso head:
- meta charset – Identifica qual a tabela de caracteres a página web está utilizando.
- style – O CSS utilizado para estilizar a página Web.
- title – O título que é utilizado para identificar a página.
Ao finalizar o head, temos nosso body que é a tag que identifica o corpo do documento. Dentro dele vamos colocar as demais tags que irão compor nossa página Web. Neste exemplo só temos a tag h1 em nosso body. A tag h1 é utilizada para definir um título dentro da página. Essa tag vai do h1 ao h6 sendo o h1 o maior deles. Nosso exemplo ficará com a seguinte aparência.
Primeira página HTML
Esta foi uma pequena introdução sobre HTML, com essa base podemos compreender o funcionamento da linguagem de marcação. Agora vou apresentar um exemplo de uma página Web HTML completa que faz uma simples listagem de Notas. Ela utiliza o mesmo cabeçalho da página inicial do site.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Irias Notas</title>
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
<style>
html {
font-size: .875rem;
font-family: 'Muli', sans-serif;
margin-bottom: 50px;
}
* {
box-sizing: border-box;
}
[class*="col-"] {
width: 100%;
float: left;
padding: 15px;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row::after {
content: "";
clear: both;
display: table;
}
.header {
padding: 15px;
}
.logo-wrapper {
height: 50px;
display: flex;
}
.logo-wrapper .logo span {
height: 10px;
width: 10px;
background: #37d5f2;
display: block;
border-radius: 20px;
position: relative;
bottom: 12px;
right: 5px;
}
.logo-wrapper .logo {
font-size: 2rem;
color: #28a745;
font-weight: 700;
letter-spacing: -2px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-direction: row;
font-family: 'Poppins', sans-serif;
text-transform: lowercase;
font-weight: bold;
}
.main-menu {
text-align: left;
}
.menu-link {
color: #47525E!important;
text-decoration: none;
}
.btn-blog {
color: #fff;
background-color: #37d5f2;
border: solid 1px #37d5f2;
font-size: bold;
font-weight: 400;
box-shadow: 0 1px 1px 0 rgb(66 66 66 / 8%), 0 1px 3px 1px rgb(66 66 66 / 16%);
border-radius: 2rem;
padding-left: 3rem!important;
padding-right: 3rem!important;
padding-bottom: .5rem!important;
padding-top: .5rem!important;
margin-left: 1rem;
text-decoration: none;
font-size: 1rem;
line-height: 1.5;
display: inline-block;
text-align: center;
white-space: nowrap;
vertical-align: middle;
}
.btn-blog:hover {
color: #ffffff;
border: solid 1px #ffffff;
background-color: #000000;
}
.form-search {
float: left;
border: 1px solid #e8e8e8;
margin-top: 25px;
margin-bottom: 40px;
width: 100%;
border-radius: 15px;
}
.value-search {
background: #fff;
border: 0;
padding: 10px;
float: left;
width: 87%;
height: 35px;
outline: none;
font-size: 100%;
border-radius: 15px;
}
.submit-search {
background: #ffffff url(/lupa.png) no-repeat center center;
text-indent: -9999px;
float: right;
width: 13%;
height: 35px;
padding: 0;
margin: 0;
border: 1px solid #e8e8e8;
border-radius: 15px;
}
.link-card {
text-decoration: none;
color: #000000
}
.link-card:hover .card-note {
border: 2px solid #47525E;
transition: 0.5s ease-in;
-webkit-transition: 0.5s ease-in;
-moz-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
}
.card-note {
display: flex;
flex-direction: column;
background-color: #fff;
box-shadow: 0 1px 1px 0 rgb(66 66 66 / 8%), 0 1px 3px 1px rgb(66 66 66 / 16%);
border-radius: 15px;
padding: 15px;
border: 2px solid #fff;
}
.footer {
background-color: #ffffff;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
.btn-load {
cursor: pointer;
border-radius: 11px;
background-color: rgba(247,248,248,0);
box-shadow: inset 0 0 0 1px #d3d8d6;
border: solid 1px #fff;
color: #68746e;
font-family: Fira Sans,Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: .56px;
line-height: 24px;
padding: 12px 24px;
transition: all .5s ease;
}
.btn-load:hover {
color: #ffffff;
border: solid 1px #ffffff;
background-color: #000000;
}
@media only screen and (min-width: 576px) {
.container {max-width: 540px;}
}
@media only screen and (min-width: 768px) {
.container {max-width: 720px;}
.main-menu {text-align: right!important;}
.col-6 {width: 50%;}
.col-12 {width: 100%;}
}
@media (min-width: 992px) {
.container {max-width: 960px;}
}
@media (min-width: 1200px) {
.container {max-width: 1140px;}
}
</style>
</head>
<body>
<div class="header container">
<div class="row">
<div class="col-6">
<div class="logo-wrapper">
<div class="logo">
<span></span>
irias notas
</div>
</div>
</div>
<div class="col-6">
<div class="main-menu">
<a class="menu-link" href="/">
<strong>Sobre</strong>
</a>
<a class="btn-blog" href="/blog">
<strong>Blog</strong>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<form action="/" class="form-search" method="GET" accept-charset="utf-8">
<input class="value-search" name="s" placeholder="Pesquisar em Notas" type="text" id="s">
<input class="submit-search" type="submit" value="enviar">
</form>
</div>
<div class="col-12">
<a href="#" class="link-card">
<div class="card-note">
<strong>Nota 1</strong>
<p>Lorem ipsum proin tempus ultricies lobortis, consectetur est urna faucibus et convallis, cubilia mollis fringilla non.</p>
</div>
</a>
</div>
<div class="col-12">
<a href="#" class="link-card">
<div class="card-note">
<strong>Nota 2</strong>
<p>Lorem ipsum sodales ultrices euismod eros semper torquent proin, mattis justo ornare vehicula aliquam mauris laoreet.</p>
</div>
</a>
</div>
<div class="col-12">
<a href="#" class="link-card">
<div class="card-note">
<strong>Nota 3</strong>
<p>Proin habitant semper habitant donec sociosqu maecenas molestie non purus enim, suspendisse auctor velit metus sodales accumsan iaculis morbi amet.</p>
</div>
</a>
</div>
<div class="col-12">
<a href="#" class="link-card">
<div class="card-note">
<strong>Nota 4</strong>
<p>Eleifend auctor semper leo sollicitudin torquent, consequat tincidunt ornare ad risus ultricies, aenean sed quam cras.</p>
</div>
</a>
</div>
<div class="col-12">
<a href="#" class="link-card">
<div class="card-note">
<strong>Nota 5</strong>
<p>Litora vehicula consectetur sed lobortis laoreet pellentesque suspendisse nulla, congue enim tempus scelerisque felis mollis euismod morbi mattis.</p>
</div>
</a>
</div>
</div>
</div>
<div class="footer">
<button class="btn-load">Veja mais notas</button>
</div>
</body>
</html>Coloque a imagem lupa.png no mesmo diretório do arquivo index.html, pois essa imagem é a lupa da barra de pesquisa. A página acima ficará com a seguinte aparência no navegador.
Esta é a versão de smartphone da página. Ela é uma página responsiva, assim se adapta conforme o dispositivo em que está sendo visualizada.
Neste exemplo criado, utilizei várias tags HTML e elementos CSS para compor a página Web. Não vou exemplificar todos neste artigo pois o mesmo ficaria muito extenso. Mas com esse exemplo vemos que com pouco código HTML e CSS, conseguimos criar boas interfaces Web.