Criando uma página html

Criando uma página html

Média De Revisões

Descrição

Aprendendo a fazer um site para web na mão, no código puro.(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

Para trabalhar com o desenvolvimento web, temos dois profissionais, o front-and e o back-and.

O front-and, faz a parte visível da página, ou seja, tudo aquilo que você vê em uma página, como por exemplo, os menus, a barra lateral de um site, o logotipo da empresa, campo de pesquisa, o texto, imagens e propagandas é o front-and e para fazer isso, precisamos aprender a linguagem de marcação, que é a linguagem HTML, e a linguagem de formatação, que é a CSS. Veja bem, eu disse, linguagem de marcação( html) e não linguagem de programaçao. A linguagem html, não é uma linguagem de programação, é apenas de marcação, e o css, é de formatação, ou seja, é a parte do design da página. Então, o css, é uma linguagem de formatação e não uma linguagem de programação.

Já o back-and, lida com a parte que não é visível ao nosso olhar. É a parte lógica da coisa, dinâmica. O que faz a página funcionar, como por exemplo, o envio de um cadastro pessoal para um banco de dados.

Então, a pessoa pode trabalhar com front-and ou back-and, mas geralmente no mercado de trabalho, a empresa precisa de um profissional que saiba lidar com o conhecimento front-and e back-and. Sujestão, minha, é você estudar os dois, tanto o front-and, como o back-and. Isso é chamado de full-stack, ou seja, o profissional sabe programar tanto em front-and como back-and, então, ele está sendo um full-stack.

 Portanto, você que quer aprender essa profissão, deve saber primeiro, o front-and, que é usada a linguagem de marcação, a famosa HTML e a CSS. Depois de aprender isso que é o básico, em seguida,  aprendendo a linguagem de programação, javascript, depois uma linguagem de programação back-and, como o PHP, por exemplo.

Importante saber:

Java é uma linguagem server-side( lado do servidor), como PHP, Ruby, Python, etc. E JavaScript é uma linguagem de programação client-side (lado do cliente). Ela é utilizada para controlar o HTML e o CSS para manipular comportamentos na página.

Não confunda, java é diferente de javascript. 

O javascript mais atual hoje é o ECMAScript 2017.

Resumindo então, você deve saber o básico, que é o html (considarado a estrutura do site), o css (o revestimento da estrutura, formatação, é como se fosse a roupa para se vestir) e o javascript (controla o  HTML e o CSS, para manipular comportamentos na página). O javascript, dá vida a página. Com isso, você já é capaz de fazer um site.

 Depois disso tudo pronto, a estrutura da página(html), a formatação (css) e o javascript (vida ao site), você precisa saber um básico de banco de dados. Poderá escolher também uma linguagem como a php para aprender com ela a fazer sites mais dinâmicos. O php é o mais conhecido entre as lingugens usadas em web no mundo. Mas, vamos aprender primeiro, html, css e javascript. Com o javascript, também é possível fazer de tudo o que precisa em um site. Vamos focar nisso então, aprendendo apenas, html, css e javascript. Depois, se der tempo na minha digitação, eu publico um aprendizado separado para php, já que ela é bem usada no mercado, no mundo todo. Mas não se preocupe, o javascript também é muito usado no mundo e muitos estão migrando para ele.

Voltando ao banco de dados, é essencial um técnico saber banco de dados, pelo menos, o básico, que é criar, ler, pesquisar, atualizar e deletar. Uma linguagem bem conchecida é o SQL. Mas vamos falar disso mais tarde.

________________________________________________________________________

Começando a prática: 

Ferramentas: 

Para fazermos o site, vamos uma um editor de código. Pode ser um bloco de notas, ou notpad, ou qualquer outro editor de código. Temos um excelênte editor de código que é o visual studio code e o atom. Mas, aqui vou usar um simples bloco de notas.

 Nota: 

Um breve histórico: Em 1991 Tim Bernest Lee elaborou a linguagem de marcação (html) para melhorar a comunicação.

Então a linguagem html não é uma linguagem de programação e sim uma linguagem de marcação.

O html define o significado e a estrutura do conteúdo da web.

Os elementos html são as tags e os atributos, o conteúdo, as tags de fechamento. Tem elemento que não tem tag de fechamento.

Com o elemento html, podemos agrupar tipos de conteúdos, formatar um texto, vídeos, audios, etc.

A estrutura básica do html:

<!DOCTYPE html>

  <html>

    <head>

    </head>

      <body>

      </body>

  </html>

_____________________________________________________________________________ 

 Explicando cada código:

<!DOCTYPE html>

Obs.: Para comentar algo no código sem atrapalhar o código, usa-se o <!– ……. –> para argumentar alguma coisa. Isso é usado, caso queira comentar quando estiver digitando o código no editor de código. É apenas para explicar, não altera em nada no código da página web, mas tem que estar dentro da barra com asterisco se não aparecerá na página da web. Tem que ser desse jeito: <!– …… –>

Exemplo:

<!– Mostrando que é um arquivo do tipo html. O <!doctype html> não é um elemtno html. É apenas uma apresentação de qual é o tipo de arquivo para o navegador. –>

 Elementos html

<html>  

   É a raíz do documento, para dizer qual é o idioma e todas as tags devem estar dentro desta tag <html>. O fechamento é </html>

<head>

 A tag head contém elementos que serão lidos pelo navegador como os metadados, como por exemplo, o charset, que é a codificação de caracteres, sendo uma bem usada que é a UTF-8. Também tem nessa tag o javascript com a tag  script, o css com as tags style e link e o titulo de páginas com a tag title.

<body>

 É o corpo do documento, colocamos o conteúdo.

As tags </html></head></boddy> são tags de fechamento.

<> início 

</>fechamento 

——————————————————————————————————————

 Processos para a criação de um projeto de teste:

1º – Crie uma pasta na sua área de trabalho ou em outro lugar qualquer.

 Criando a pasta:

 Clique com o botão direito no mouse e selecione “nova pasta”;

 Renomeando a pasta: 

 Clique com o botão direito do mouse em cima da pasta criada, e selecione “renomear pasta”. Coloque o nome da pasta com o nome de  “projetos”.

2º – Abra o bloco de notas ou outro de preferência sua, e digite os códigos básicos:

<!DOCTYPE html>

    <html>

        <head>

        </head>

        <body>

        </body>

    </html>
Salve o documento com o nome de “teste.html” e salve na pasta projetos.

Depois disso, clique no arquivo teste.html e ela abrirá no browser(navegador), pode ser qualquer navegador, chrome, farefow, internet explorer….).

Agora, feche o teste.html, a página que você abriu, e clique com o botão direito do mouse em cima do arquivo teste.html e selecione abrir com o bloco de notas, e insira o seguinte texto abaixo, na tag elemento <body></body>. Digite um texto, por exemplo:

<body>

Olá mundo! esse é o meu primeiro teste em html para web. 

</body>

Coloque esse texto na tag do elemento <body> e veja como fica:

Se você apagar todas as tags, e escrever o texto, olá mundo! também aparecerá no navegador browser porque as tags <></> é para marcação, elas serão útil para quando por formatar o documento, então elas serão necessárias para saber onde vamos colocar tal formatação ou conteúdos. 

Obs.: Dependendo da codificação da linguagem usada, pelo browser (navegador) ou da codificação usada no código e no salvar o código, quando você abrir o nevegador com a página que construiu com o codigo html, muitas vezes, pode aparecer caracteres estranhos à pagina, como por exemplo, se você digitar o “ç”, acentos “,’`, ~, aparecerá dependendo da codificação, caracteres estranhos. Isso é devido ao tipo de codificação que o browser está usando. Por exemplo, a codificação UTF-8 é a mais utilizada hoje em dia. Tem em quase todos os browser.

Veja  um exemplo de erro na codificação da mesma página de teste.

Tem que ter muita passiência nesse assunto para poder entender o que está acontecendo na página. Pois bem, vou explicar: Quando salvei o arquivo no bloco de notas, a gente salva como: “salvar como”, então, lá embaixo, na parte inferior esquerda, está escrito: Codificação de caracteres: Ocidental (iso-8859-1). Então, quando você faz o código html no bloco de notas, tem que colocar a codificação que salvou, e para (iso-8859-1) usei a latin-iso-1, para o texto ficar certo. A codificação no caso do texto errado, estava no codigo como UTF-8 QUE É OUTRA CODIFICAÇÃO DIFERENTE DA QUE SALVOU O ARQUIVO (ISO-8859-1), ENTÃO, POR ISSO É QUE DEU ERRADO O TEXTO, CODIFICAÇÕES DIFERENTES NÃO Dão CERTO. Para solucionar o problema, você tem que salvar o arquivo html com a mesma codificação que colocar no código. Se você usar a codificação UTF-8, que é a mais usada, no mundo todo, você tem que colocar ela tanto no código em html e salvar também selecionando na parte inferior esquerda, a especificação “Codificação de caracteres (unicode UTF-8), ou (UTF-8) e assim, vale para qualquer outro tipo de codificação, ou seja tem que ser a mesma codificação, se não dá erro de caracteres, na linguagem do texto da página.  

Veja novamente a mesma página de teste, salvei o bloco de notas com a codificação :LATIN-ISO-1 e coloquei no código o <meta charset “LATIN-ISO-1”> Assim, a página deu certo, sem nenhum problema de codificação. Clique aqui.

Agora, vamos colocar o código com a <meta charset “UTF-8”> QUE É A MAIS USADA NO MUNDO TODO. Vou salvar o arquivo bloco de notas teste.html com a codificação (UTF-8). Você seleciona isso, na parte inferior do bloco de notas quando vai salvar o arquivo logo abaixo e escolha salvar como todos os arquivos. Veja como ficou agora.

Para ver direto do navegador, você pode clicar com o botão direito do mouse, e selecionar inspecionar elementos. Assim, você verá os códigos, a codificação e mais.

<!DOCTYPE html>

    <html>

        <head>

        </head>

        <body>

<p> Olá mundo! esse é o meu primeiro teste em html para web.</p>

        </body>

    </html>

____________________________________________________________________

Obs.:  A tag <p></p> é a tag de parágrafo. <p> abertura e </p> fechamento.   ______________________________________________________________

Semântica

Antigamente, o elemento padrão era a div. 

A semântica melhorou a comunicação. É mais preciso, fica mais claro o entendimento .

Temos vários elemtnos que reesignifica as divs.

Ex.:

<article>  

   Um bloco de texto não é apenas uma div, agora chama-se de article, tendo um maior significado.

<section>

 Para representar uma seção genérica de conteúdo, quando não ha um elemento mais específico para isso.

<header>

 Cabeçalho da página ou de uma seção da página. Geralmente, tem-se o logotipo, menus, campos de pesquisas.

<article>

  Contém independente, e de maior relevância. Ex.: post, páginas, notícias, comentários, pode conter outros elementos, como header, cabeçalho e imagens.

 <aside>

Geralmente, são as barras laterais. é uma seção que engloba conteúdo relacionados ao conteúdo principal, blocos de artigos, biografias do autor, e publicidades.

<footer>

Geralmente representa o rodapé do conteúdo.Pode ser um rodapé dentro de um artigo, section, ou body. Nesse elemento, encontra-se geralmente informações do autor, menus , links.

<h1>,<h6>

Não veio com o html. Não e uma especificação para uma semântica, mas funciona.

É para marcar a importância dos títulos.

Use o h1 apenas uma vez por página, porque ele é o objetivo da página.

O <h6> é o menos importante. Para textos maiores usamos o <p>.

<p> É um parágrafo, pode conter textos, imagens, vídeos, etc. 

<a> Âncora. É um hiperlink. Conecta páginas no web e conteúdos.

 Atributos do elemento tag <a>:

Href -> Hiperlink para onde o <a> aponta (página ou outro site, email ou telefone).O email, e o telefone precisa dos prefixos tel: e mailto.

Target -> Abre o link em outra aba usando o valor _blank.

 _________________________________________________________________________ 

<img> Imagem. Não tem tags de fechamento. 

Atributos tem apenas dois:

SRC -> Obrigatório e guarda o caminho para a imagem, que você quer.

ALT -> Não é obrigatório, mas é essencial. É a descrição da imagem.

 _________________________________________________________________________ 

Listas: <ul> <ol> e <li>

<ul> Não ordenadas (pontos, círculos ou quadrados).

<ol> Ordenadas (números, algarismos ou letras).

<li> São os itens dentro do ul ou ol.

_________________________________________________________________________ 

Prática:

Construa um site com o nome de “site simples”, usando html.

<!DOCTYPE html>

<html>

      <head>

      </head>

        <body>

        </body>

</html>

_________________________________________________________________________ 

1º. Crie um arquivo chamado “index.html” e adicione os elementos básicos do html.

2º. Adicione o meta e title.

    meta charset com o valor UTF-8.

    title: site simples

    body: Olá pessoal!

 _________________________________________________________________________ 

Montando a estrutura:

    Cabeçalho: Site simples

    lista de posts.

    rodapé: contatos.

_________________________________________________________________________ 

1º. Abrir o arquivo index.html.

    a). Começando com o cabeçalho logo abaixo do <body>. Coloca-se então um <header> dentro do <body>.

Coloca um título da página dentro do <h1>.

 _________________________________________________________________________ 

2º. Abrir um elemento <section>. Adiciona-se um <header> contendo um <h2>.

Obs.: Posso ter vários <header> e <footer> em vários lugares na página.

3º. Criando uma postagem: 

<article> com um <header> e um <h3>.

Crie um <footer> para contato antes do </body>

 _________________________________________________________________________ 

 Adicione um texto a postagem logo após o </header> (tag de fechamento do header).

Insira um elemento <p> e um texto de exemplo.

E em alguma parte deste texto vamos adicionar um hiperlink para outra página e um para nosso e-mail.

Criarei um hyperlink para o “digita resumos”. Adicione o hyperlink no atributo href e o valor _blank no atributo target, assim o link será aberto em outra aba.Fica assim:

<a href=”digitaresumos.blogspot.com” target=”_blank”>Digita resumos</a>

 E em algum outro lugar do texto adicionarei meu e-mail e um link para ele, desta forma: <a href=”mailto:exemplo@gmail.com” target=”_blank”>exemplo@gmail.com</a>

_________________________________________________________________________ 

Adicione uma imagem no cabeçalho e outra na postagem.

1º. Coloque as imagens na pasta do projeto.

Na primeira <header> e antes do <h1> adicione um <img> e no atributo SRC coloca o caminho e o atributo ALT, um nome da imagem.

Dentro de <header> e <article> depois do <h3> uma <img> e no atributo alt um nome da imagem. Por exemplo: biscicleta.

 ____________________________________________________________________ 

Inserir uma lista de contato no rodapé. Usamos o elemento a.

Crie um elemento <ul> e dentro dele um elemento <li>, com um elemento a, no atributo href adicione o link de alguma rede social, como o facebook, e no conteúdo da âncora, coloque o nome dessa rede social. Ex.: facebook.

Observe, que agora, ao clicar no link, ele abre na mesma página atual do navegador. Isso, porque não usou o valor _blank.

 ________________________________________________________________________ 

Código completo

 <!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″>
        <title>Site simples</title>
    </head>
    <body>
        <header>
         <p>          <img src=”file:///home/jackson/%C3%81rea%20de%20Trabalho/projetos      /imagens/informatica_basica.png” alt=”informatica_basica” />
         </p>
         <h1>Site simples</h1>
        </header>
          <section>
            <header>
             <h2>Meu site</h2>
            </header>
          </section>
          <article>
            <header>
            <h3>Exemplos</h3>              <p>             <img 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>Hoje , eu vou brincar de bola</p>           <p>Visite o meu site:</p>
           <p><a href=”https://digitaresumos.blogspot.com”target=”_blank”>Digita resumos</a>           <p>E-mail para contato:</p>
           <p><a href=”mailto:exemplo@gmail.com” target=”_blank”>exemplo@gmail.com</a>
           </p>
          </article>

        <footer>
          <ul>
            <li><a href=”https://www.terra.com.br”>Terra</li></a>
            <li><a href=”https://digitaresumos.blogspot.com/”>Digita resumos</li></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</li></a>
         </ul>
            </footer>
    </body>
</html> _____________________________________________________________________________- Obs.: Tudo que for do projeto, tem que ficar dentro da pasta do projeto.  Para quem tem dificuldades em achar o caminho das imagens, uma dica:Vá até a imagem no seu computador ou no local onde salvou a imagem e clica no botão direito em cima da imagem e seleciona “propriedades”.Lá terá a descrição do endereço do local da imagem. Exemplo: ( /desktop/projetos/biscicleta.png). Clica em cima desse endereço com o botão direito do mouse, e seleciona copiar. Então, copiançdo esse endereço do local da imagem, você cola no código onde pede tal endereço. Exemplo: (<a href=”https://file/desktop/projetos/biscicleta.png</a.).

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.____________________________  

 Vamos incluir algumas coisas para a formatação dar certo no código html.

<!DOCTYPE html>

<html>

    <head>

        <meta charset=”UTF-8″>

        <title>Site simples</title>

<link rel=”stylesheet” type=”text/css” href=”estilo.css”>

    </head>

    <body>

        <header>

         <p>

         <img class=”img_logo” src=”file:///C:/Users/jackson/Desktop/html,css/imagem/document-428338_1920.jpg” alt=”informatica_basica” />

         </p>

         <id=”titulo”>

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

        </header>

          <section>

            <header>

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

            </header>

          </section>

          <article>

            <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>Hoje , eu vou brincar de bola</p>

           <p>Visite o meu site:</p>

           <p><a href=”https://digitaresumos.blogspot.com”target=”_blank”>Digita resumos</a>

           <p>E-mail para contato:</p>

           <p><a href=”mailto:exemplo@gmail.com” target=”_blank”>exemplo@gmail.com</a>

           </p>

          </article>

        <footer class=”li”>

          <ul class=”none”>

            <li><a href=”https://www.terra.com.br”>Terra</li></a>

            <li><a href=”https://digitaresumos.blogspot.com/”>Digita resumos</li></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</li></a>

         </ul>

            </footer>

    </body>

</html>

 _________________________________________________________________________________fim!Com isso incluir as classes e as identidades feitas para que a formatação funcione.Observe que incluir alguma coisa no código da página feita anteriormente, que são as classes e a id.
Para que funcione todo o processo, copie esse código acima e substitua no html antigo ou altere o html antigo.

Estatísticas

0
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.