Como utilizar as Tags div container e pra que serve. Utilizando CSS no HTML para iniciantes
Se você está começando no desenvolvimento de software, estas aulas de HTML para iniciantes pode ajudar você 🎥 Veja o passo-a-passo para fazer seu Website com um design melhor, colocando os elementos HTML no lugar certo ao usar este container div. Usamos algo CSS para começar a melhorar os estilos (Style)
Veja os outros vídeos desta playlist
- ✅ HTML para iniciantes. Primeiros passos – Aula 1
- ✅ HTML para iniciantes. Iniciando criação da barra de Menu – Aula 2
- ✅ HTML para iniciantes – CSS e div – Aula 3
- ✅ Para obter arquivos das vídeoaulas, entra no grupo do Telegram
Pratique você também
Assistir vídeoaula no final da página para praticar
Agora você pode abrir o Notepad se não tiver VS Code ou fazer o Download aqui
- Após abrir sua pasta no VS Code
- Copie o código abaixo e repõe o da página principal que criamos nas aulas anterior. Ver links acima
- Criar duas subpastas
- Uma com nome “images”
- E outra com o nome css. Veja o código css a seguir ao do html
- Arraste sua imagem criada na aula passada para dentro desta subpasta “images”
- Só após inserir o código css a seguir a este, que o style ficará visivel
- Então vá ao ponto seguinte e faz esta parte também
1 – Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aula 3</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div><!-- Page -->
<header>
<div><!-- stuck container -->
<div><!-- container -->
<div><!-- row -->
<div><!-- grid center -->
<div><!-- brand center -->
<h1>
<a href="home.html">PLEASURE</a>
</h1>
<P>
premium sauna
</P>
</div>
</div>
<div>
<nav>
<ul class="sf-menu">
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="sobre.html">Sobre</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Our staff</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div><!-- container block1-->
<di><!-- row -->
<div>
<img class="rounded" src="images/page-1_img01.jpg"/>
<h2>Welcome!</h2>
<p>
Beciegast nveriti vitaesaert asety kertya aset
aplicaboserde nerafae lorem ipsumodit onsequ untur magni dolores eonqui ratione voluate msequi nesciunt, neque porro quisquam
edolore mias nuyfasaertyu erauas aitaesa.
</p>
<a href="#" class="btn">more</a>
</div>
</di>
</div>
</header>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aula 3</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div><!-- Page -->
<header>
<div><!-- stuck container -->
<div><!-- container -->
<div><!-- row -->
<div><!-- grid center -->
<div><!-- brand center -->
<h1>
<a href="home.html">PLEASURE</a>
</h1>
<P>
premium sauna
</P>
</div>
</div>
<div>
<nav>
<ul class="sf-menu">
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="sobre.html">Sobre</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Our staff</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div><!-- container block1-->
<di><!-- row -->
<div>
<img class="rounded" src="images/page-1_img01.jpg"/>
<h2>Welcome!</h2>
<p>
Beciegast nveriti vitaesaert asety kertya aset
aplicaboserde nerafae lorem ipsumodit onsequ untur magni
dolores eonqui ratione voluate msequi nesciunt, neque
porro quisquam edolore mias nuyfasaertyu erauas aitaesa.
</p>
<a href="#" class="btn">more</a>
</div>
</di>
</div>
</header>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aula 3</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div><!-- Page -->
<header>
<div><!-- stuck container -->
<div><!-- container -->
<div><!-- row -->
<div><!-- grid center -->
<div><!-- brand center -->
<h1>
<a href="home.html">PLEASURE</a>
</h1>
<P>
premium sauna
</P>
</div>
</div>
<div>
<nav>
<ul class="sf-menu">
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="sobre.html">Sobre</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Our staff</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div><!-- container block1-->
<di><!-- row -->
<div>
<img class="rounded" src="images/page-1_img01.jpg"/>
<h2>Welcome!</h2>
<p>
Beciegast nveriti vitaesaert asety kertya aset
aplicaboserde nerafae lorem ipsumodit onsequ untur magni
dolores eonqui ratione voluate msequi nesciunt, neque porro
quisquam edolore mias nuyfasaertyu erauas aitaesa.
</p>
<a href="#" class="btn">more</a>
</div>
</di>
</div>
</header>
</div>
</body>
</html>
Insere também o CSS necessário utilizado na aula. Criar o arquivo style.css e copiar todo o código abaixo e inserir no seu. É importante ver a vídeoaula para criar as pastas nos lugares corretos. Qualquer dúvida, escreva nos comentários do YouTube, porque nem sempre vejo aqui
- Com no VS Code aberto e após seguir o passo anterior
- Crie um arquivo(ficheiro) por nome “style.css” dentro da subpasta css criada em sua pasta principal
- Copie o código abaixo e insere dentro do “style.css”
- Fazer CTRL + C (salvar) sempre para não perder seu trabalho
- A seguir, voltar ao navegador e fazer reload (F5) na página
2 – Código CSS
@charset "UTF-8";
/*=============== Menu ==================*/
.rounded {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.sf-menu > li {
position: relative;
float: left;
}
.sf-menu a {
display: block;
text-transform: uppercase;
}
.sf-menu > li > a {
color: #765842;
font: 400 26px/26px "BenchNine", sans-serif;
}
.sf-menu > li + li {
margin-left: 42px;
}
.sf-menu ul > li.sfHover > a, .sf-menu ul > li > a:hover {
color: #fff3a0;
}
.sf-menu ul ul > li > a {
color: #765842;
border-bottom: 1px dotted #de546b;
}
.sf-menu ul ul > li.sfHover > a, .sf-menu ul ul > li > a:hover {
color: #de546b;
}
.sf-menu ul ul {
position: absolute;
left: 86px;
top: 58%;
text-align: left;
padding: 18px 28px 15px 21px;
background: #fff;
}
.sf-menu > li.sfHover > a, .sf-menu > li > a:hover {
color: #de546b;
}
.sf-menu > li.active > a {
color: #de546b;
}
Espero que tenha gostado. Até o próximo vídeo 😀
Inscreve-se e ativa o sininho para receber os próximos vídeos e faça teu LIKE
Até a próxima Obrigado
ABRAÇO
- ✔ Deixe seu like e compartilhe se gostou ☺
- ✔ Inscreva-se no canal ☺
- ✔ Selecione para receber notificações clicando no sininho pelo seu celular e/ou computador ☺
- ✔ Comunidade Fanpage
- ✔ Segue no Insta … e progredindo.
Veja também este tópico sobre Linguangens de programação pra além do HTML, porque é importante sabermos o significado e também o que mais você poderá ter interesse futuramente.
Leave a Reply