Fica aqui conosco e vamos aprender coisas novas! Grátis

Venha saber mais


	

HTML para iniciantes – CSS e div

Tempo de leitura: 11 min

Escrito por Admin

Compartilhe agora mesmo:


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



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

  1. Após abrir sua pasta no VS Code
  2. Copie o código abaixo e repõe o da página principal que criamos nas aulas anterior. Ver links acima
  3. Criar duas subpastas
    1. Uma com nome “images”
    2. E outra com o nome css. Veja o código css a seguir ao do html
  4. Arraste sua imagem criada na aula passada para dentro desta subpasta “images”
  5. Só após inserir o código css a seguir a este, que o style ficará visivel
  6. 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

  1. Com no VS Code aberto e após seguir o passo anterior
  2. Crie um arquivo(ficheiro) por nome “style.css” dentro da subpasta css criada em sua pasta principal
  3. Copie o código abaixo e insere dentro do “style.css”
  4. Fazer CTRL + C (salvar) sempre para não perder seu trabalho
  5. 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 ☺

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.




Compartilhe agora mesmo:

Você vai gostar também:

Para enviar seu comentário, preencha os campos abaixo:

Leave a Reply


*


*


Seja o primeiro a comentar!

JUNTE-SE Á NOSSA LISTA DE SUBSCRITORES

Entre para nossa lista e receba conteúdos exclusivos e com prioridade

Damos valor à sua privacidade

Nós e os nossos parceiros armazenamos ou acedemos a informações dos dispositivos, tais como cookies, e processamos dados pessoais, tais como identificadores exclusivos e informações padrão enviadas pelos dispositivos, para as finalidades descritas abaixo. Poderá clicar para consentir o processamento por nossa parte e pela parte dos nossos parceiros para tais finalidades. Em alternativa, poderá clicar para recusar o consentimento, ou aceder a informações mais pormenorizadas e alterar as suas preferências antes de dar consentimento. As suas preferências serão aplicadas apenas a este website.

Cookies estritamente necessários

Estes cookies são necessários para que o website funcione e não podem ser desligados nos nossos sistemas. Normalmente, eles só são configurados em resposta a ações levadas a cabo por si e que correspondem a uma solicitação de serviços, tais como definir as suas preferências de privacidade, iniciar sessão ou preencher formulários. Pode configurar o seu navegador para bloquear ou alertá-lo(a) sobre esses cookies, mas algumas partes do website não funcionarão. Estes cookies não armazenam qualquer informação pessoal identificável.

Cookies de desempenho

Estes cookies permitem-nos contar visitas e fontes de tráfego, para que possamos medir e melhorar o desempenho do nosso website. Eles ajudam-nos a saber quais são as páginas mais e menos populares e a ver como os visitantes se movimentam pelo website. Todas as informações recolhidas por estes cookies são agregadas e, por conseguinte, anónimas. Se não permitir estes cookies, não saberemos quando visitou o nosso site.

Cookies de funcionalidade

Estes cookies permitem que o site forneça uma funcionalidade e personalização melhoradas. Podem ser estabelecidos por nós ou por fornecedores externos cujos serviços adicionámos às nossas páginas. Se não permitir estes cookies algumas destas funcionalidades, ou mesmo todas, podem não atuar corretamente.

Cookies de publicidade

Estes cookies podem ser estabelecidos através do nosso site pelos nossos parceiros de publicidade. Podem ser usados por essas empresas para construir um perfil sobre os seus interesses e mostrar-lhe anúncios relevantes em outros websites. Eles não armazenam diretamente informações pessoais, mas são baseados na identificação exclusiva do seu navegador e dispositivo de internet. Se não permitir estes cookies, terá menos publicidade direcionada.

Visite as nossas páginas de Políticas de privacidade e Termos e condições.

Importante: Este site faz uso de cookies que podem conter informações de rastreamento sobre os visitantes.
Criado por WP RGPD Pro

Receba este eBook totalmente GRÁTIS

aprimorar-se é amor próprio

100% Online

Mais informado

Aprender coisas novas

Temas importantes

Aprimorar em informática

Do básico ao avançado

Aumenta a autoestima

dados protegidos contra spam