Programação

Como Criar uma Página Web Usando Apenas HTML e CSS

Matheus Ferraz

02 Dez 2020 — 3 min read

Como Criar uma Página Web Usando Apenas HTML e CSS

Como Criar uma Página Web Usando Apenas HTML e CSS

Este Post tem como objetivo trazer o conteúdo criado em uma série de vídeos no canal do Relaxa.

Na Playlist, aprendemos a criar uma página Web estática, usando apenas HTML e CSS. Fazendo todo o passo a passo do zero.

O projeto se trata de uma página única, com informações e a agenda de shows de uma banda fictícia.

Com um total de cinco vídeos em formato de tutorial, aprenderemos a trabalhar com o DevTools do Google Chrome, manipular e estruturar elementos com HTML5 e estilizá-los usando o CSS.

A Playlist

Para ter acesso a esse conteúdo na íntegra, basta clicar nos vídeos logo abaixo:

Os Materiais

Segue os arquivos trabalhados no decorrer das videoaulas.

Index.html

<!DOCTYPE html>
<html lang="pt">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Nossa Banda</title>

<link rel="preconnect" href="https://fonts.gstatic.com">

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap">

<link rel="stylesheet" href="style.css">

</head>

<body>

<main>

<div class="logo">

<img src="/images/logo_band.png" alt="Logo da Banda">

</div>

<h1 class="titulo">Nossa Banda</h1>

<h2 class="lema">A melhor banda do Planeta</h2>

<p class="texto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been

the

industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and

scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into

electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of

Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like

Aldus PageMaker including versions of Lorem Ipsum.</p>

<hr>

<div class="shows">

<h2>Shows</h2>

        &lt;table&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;Cidades&lt;/th&gt;
                    &lt;th&gt;Datas&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;São Paulo - SP&lt;/td&gt;
                    &lt;td&gt;02/01/2021&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;Natal - RN&lt;/td&gt;
                    &lt;td&gt;04/01/2021&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;Paraíba&lt;/td&gt;
                    &lt;td&gt;05/01/2021&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/main&gt;

</body>

</html>

Style.css

body {
width: 95%;
max-width: 800px;
margin: auto;
background: url(images/background.jpeg) center;
color: #fff;
font-family: "Roboto", sans-serif;
line-height: 1.5;
}

img {

height: 110px;

width: 110px;

margin-top: 20px;

}

main {

background: #00000069;

padding: 5px 40px;

margin-top: 20px;

border-radius: 20px;

}

.logo,

.titulo,

.lema,

.texto {

text-align: center;

margin: 0;

}

.shows {

text-align: center;

margin: 30px 0;

width: 100%;

}

.shows table {

background: #ff00007a;

padding: 10px;

border-radius: 10px;

margin: 0 auto;

}