Estilizando o html com o css

Estilizando o html com o css

Média De Revisões

Descrição

Estilizando o html com o css.Baixe o livro grátis:https://jackson-valente-jacob.myedools.com/p/a-chanceful-page

Vídeo: Criar uma página web: https://youtu.be/nz_EkTRmr3Y

em 

 Voltar para a página inicial

Olá!

Hoje vou postar a estilização em css da página criada em html no post “criando uma página web com código puro em html.” 

Vamos a prática: 

 Vamos usar para formatar a página web feita em html, o modo de estilo css externo, ou seja, vamos criar um arquivo chamado: (estilo.css) e salvar na mesma pasta onde está o arquivo com o nome: (teste.html).  Para comunicar esse arquivo estilo.css com o arquivo teste.html, devemos declarar um link externo para o estilo.css dentro do arquivo teste.html.  Veja: <link rel=”stylesheet” type=”text/css” href=”endereco_do_arquivo_estilo.css” /> No caso, o meu código do endereço para a página estilo.css é o seguinte:

 <link rel=”stylesheet” type=”text/css” href=”file:///home/jackson/%C3%81rea%20de%20Trabalho/projetos//estilo.css” /> No seu computador, ficará o endereço diferente do meu, mas é só copiar o local do endereço do seu arquivo estilo.css, onde ele está, e colar entre as aspas, igual está logo acima explicado.  Explicando o endereço do meu computador: O caminho do arquivo estilo.css no meu computador está nos seguintes diretórios: /home/jackson/area_de_trabalho/projetos/estilo.css   ou seja, o meu arquivo estilo.css, está dentro da pasta “projetos”, esta por sua vez, está, na área de trabalho, a área de trabalho está dentro da pasta de usuário jackson, e a pasta jackson, está dentro do diretório /home.  Se você está com dúvida do caminho do endereço do arquivo estilo.css no seu comutador, basta você ir até onde está o arquivo estilo.css e clicar com o botão direito do mouse em cima do arquivo estilo.css e selecionar “propriedades”. Então, você, selecionará o endereço que está mostrando, e clicará com o botão direito do mouse em cima desse endereço que é mostrado e clicará em copiar, com o mouse, botão direito do mouse. Feito isso, você irá lá em cima no navegador, pode ser qualquer um, o que estiver aberto( atual), por exemplo, o farefox, e clicará na parte superior de cima do navegador, onde aparece o endereço da página, exemplo( https://www.exemplo.com.br), clicando aí, você clica com o botão direito do mouse, e seleciona colar. Colando então, o endereço que você copiou anteriormente, como explicado logo acima, clique em enter ou na seta de ir, que assim, você irá achar o local onde está o arquivo estilo.css no seu comutador. Você pega esse endereço que colou no seu navegador e coloca entre as aspas no código abaixo: <link rel=”stylesheet” type=”text/css” href=”cole aqui o endereço copiado” /> _________________________________________________________________________________ 

Editando o código no documento html:

 

Abra o documento teste.html feito na aula anterior. Se você não fez o código html, faça para dar continuídade na aula. Veja a postagem de como criar uma página web neste site. Está bem explicado e tem o código pronto. Também, tem a opção de você fazer o downloand para o seu computador, todo o código pronto e também  as matérias explicativas do conteúdo. Supondo que você esteja com o documento teste.html feito e salvado em uma pasta, entre nesta pasta, clique com o botão direito no arquivo teste.html, e selecione uma editor de texto para abrir o código. Pode ser qualque editor de texto, por exemplo, bloco de notas, edit, etc. 

Vamos ao código:

Insira no documento, dentro da tag <head> o link externo para chamar o arquivo estilo.css. Igual mostrado logo abaixo:

 <!DOCTYPE html>

<html>

    <head>

        <meta charset=”UTF-8″>
    <link rel=”stylesheet” type=”text/css” href=”/home/jackson/Área de Trabalho/projetos/estilo.css”/>
        <title>Site simples</title>

    </head>  _____________________________________________________________ 
Agora temos que digitar alguns códigos no arquivo teste.html para ter efeito, comunicação da formatação estilo.css com as marcações que têm no teste.html.  

Então, abra o arquivo teste.html:

Insira o link externo para fazer a comunicação do teste.html com o estilo.css: digite o código dentro da tag <head>

criando um link para um endereço externo:

<link rel=”stylesheet” type=”text/css” href=”/home/jackson/Área de Trabalho/projetos/estilo.css”/>

 

 <head>

        <meta charset=”UTF-8″>
    <link rel=”stylesheet” type=”text/css” href=”/home/jackson/Área de Trabalho/projetos/estilo.css”/>
        <title>Site simples</title>

    </head>

 _____________________________________-

 Criandou uma classe para o logo com o nome de img_logo:

Agora, adicione dentro da tag <img> da logo, o seguinte código:

class=”img_logo”

  <img class=”img_logo” src=”file:///home/jackson/%C3%81rea%20de%20Trabalho/projetos/imagens/informatica_basica.png” alt=”informatica_basica” />

_________________________________________________-

Criando uma identidade única para titulo:

<id=”titulo”>

Insira essa identidade dentro da tag <h1></h1>

<h1 id=”titlo”>Site simples</h1>

_________________________________________

Inserir uma classe dentro da tag <h2></h2> com o nome de subtitulo:

<section>

            <header>

       <h2 class=”subtitulo”>Meu site</h2>
            </header>

          </section>

__________________________________________

Criar uma classe com o nome de titulo_exemplos e inserir dentro da tag <h3> e uma classe img_exemplos dentro da tag <img> para a segunda imagem da página.

  <article class=”exemplos”>

            <header>

         <h3 class=”titulo_exemplos”>Exemplos</h3>
             <p>
             <img class=”img_exemplos” src=”file:///home/jackson/%C3%81rea%20de%20Trabalho/projetos/imagens/matematica.jpg” alt=”matematica” />

             </p>

           </header>

           <p>Esse é o meu exemplo.É o meu primeiro site que construo.É bem legal!

           </p>
       <p>Visitem o meu site</p>
           <p><a href=”https://guiafacilvicosa.blogspot.com”target=”_blank”>guia fácil viçosa</a>
       <p>Hoje eu vou brincar de bola</p>
       <p>Meu email para contato</p>
           <p><a href=”mailto:exemplo@gmail.com” target=”_blank”>exemplo@gmail.com</a>
       <p>Amanhã, eu irei brincar de viceo game</p>
           </p>

          </article>________________________________________ Crie uma classe para o rodapé. O footer: <footer class=”li”>  e uma classe para a lista nãoordenada. O ul. <ul class=”none”>
  <footer class=”li”>

          <ul class=”none”>

            <li><a href=”https://www.terra.com.br”>Terra</a>
            <li><a href=”https://digitaresumos.blogspot.com/”>Digita resumos</a>
            <li><a href=https://accounts.google.com/ServiceLogin/signinchooser?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ss=1&scc=1&ltmpl=default&ltmplcache=2&emr=1&osid=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin”>Gmail</a>

         </ul>

            </footer>___________________________________________________________ Com isso, fizemos a comunicação do documento teste.html com o arquivo estilo.css.  Agora, sim, vamos a formatação com a folha de estilo: Abra um editor de texto, como por exemplo, um bloco de notas. 

Editando os códigos em css: 

 Vamos dar uma cor ao plano de fundo da nossa página. Usa-se, o background (plano de fundo). #ccc é o código de tal cor. Essas cores podem ser pesquisadas na internet.

 body {
background: #ccc;
} _________________________________________________________________
 Agora, vamos formatar os títulos:  #titulo, .subtitulo, .titlo_exemplos {
color: blue;
}  ____________________________________________
Explicação dos códigos acima:
# ->significa que será usado uma identidade única para tal nome, como por exemplo, título, ou seja, somente o título terá essa cor.
. -> significa que em todo o lugar na página que tiver um subtitulo, será usada essa formatação, como por exemplo, blue = azul.
____________________________________________  .titlo_exemplos {
font-size: 16px;
font-style: italic;
} _______________________________
significa que em .titlo_exemplos, o tamanho da fotne será de 160x e o estilo da fonte sera’itálico.________________________________________________

.exemplos {
background: #FFF;
padding: 10px;
border: 3px solid #000;
margin: 10px;
}______________________________ significa que em .exemplos, o plano de fundo será  a cor #FFF, a margem interna será de 10px, a borda , de 3px, contínua (=solid), e de cor #000 a borda. E a margem externa de 10px.
_________________________________________________

 .img_logo {
width: 200px;
height: 80px;
} __________________________
 significa que  a .img_logo (o logotipo da imagem), terá uma largura (width) de 200px, e altura (height) de 80px. __________________________________________________
  .img_exemplo {
width: 400px;
} ____________________________  significa que .img_exemplo (a imagem do exemplo), terá uma largura(width) de 400 px. _________________________________________________

 .li{
background: #ccc;
padding: 10px;
border: 3px solid #FFF;
margin: 10px;
}

 _____________________________ 

significa que .li terá o plano de fundo com a cor #ccc, a margem interna (padding) será de 10px o tamanho, a borda (border), será de 3px, contínua (solid), e de cor #FFF, e a margem externa, será de tamanho 10 px (margin).

_________________________________________________   ul.none {
    list-style-type: none;
    }_______________________________ 

ul.none (o ul é a lista não ordenada), o none significa que não tem desenhos de itens (marcadores de itens), eles não aparecem na página, porque o none não deixa. O estilo da lista fica sem marcadores com o none.

____________________________________________________

Fim!

_____________________________________________________ 

Código completo do css:

 body {
background: #ccc;
}
#titulo, .subtitulo, .titulo_exemplos {
color: blue;
}

.titulo_exemplos {
font-size: 16px;
font-style: italic;
}

.exemplos {
background: #FFF;
padding: 10px;
border: 3px solid #000;
margin: 10px;
}

.img_logo {
width: 200px;
height: 80px;
}
.img_exemplos {
width: 400px;
}
.li{
background: #ccc;
padding: 10px;
border: 3px solid #FFF;
margin: 10px;
}
ul.none {
    list-style-type: none;
    }
_______________________________________________________

 Ao digitar todo esse código no editor de texto, salve-o com o nome de estilo.css na mesma pasta que está a página teste.html. Clique duas vezes no arquivo teste.html e veja se a página ficou com a formatação desejada.________________________________________________________

Estatísticas

1
0 Classificação
0 Favoritos
0 Compartilhar

Autor do Anúncio

Lista de Reinvindicações

Este anúncio é seu?

Destacar ou Verificar um Anuncio é a melhor maneira de atingir melhores objetivos.