Novo trabalho: Inicialização à programação em Javascript-

Passo 2 - Exemplos/Exercícios

Visualização e execução de 5 exemplos práticos de CSS e a colocação dos mesmos no GitHub

Estes 5 exemplos de código servem para perceber-mos a grande diferença entre os conceitos de id e de classe. No caso do id utilizamos "#id" (no qual "id" pode ser um nome inventado por nós). Este, apenas permite a sua utilização uma vez ao longo do código todo. Enquanto a classe, representado por ".classe" ("classe" pode também ser um nome inventado por nós) permite a sua utilização vezes infinitas durante todo o código.

O link da GitHub Page que dá acesso ao repositório criado para este trabalho encontra-se aqui: https://franciscodborges.github.io/passo2_pt08/ .

Por outro lado, o acesso ao repositório encontra-se aqui: https://github.com/franciscodborges/Passo2_PT08

NOTA:

Os códigos apresentados em baixo estão todos comentados, indentados e o CSS é externo, de acordo como o professor pediu.

Exemplo 1: Pretendemos formatar todos os elementos <p>

Código .html

<!DOCTYPE html> <!-- Indica que este documento, este código vai ser escrito na linguagem html-->

<html> <!--Define a raiz de um documento HTML-->

  <head> <!--Esta secção Head serve para fazer declarações iniciais e permite definir o titulo da página-->

  <meta charset="UTF-8"> <!--Para que os caracteres acentuados sejam apresentados corretamente, devemos colocar a seguinte instrução na área de head, sendo bastante util, porque em certos browser, por exemplo o Safari, os acentos não são bem lidos -->

     <link rel="stylesheet" type="text/css" href="css/meuestilo.css"> <!-- Esta tag define um link entre o documento e um material externo, neste caso o código em css-->

 </head> <!-- Fecha a tag head-->

 <body> <!-- Esta secção body é onde escrevemos tudo o que pretendemos que surja na página -->

     <p>Todos os parágrafos vão ser afetados pelo estilo definido em style.</p> <!-- A tag "p" define um novo paragráfo-->

     <p>Este também!</p>

     <p>E este!</p>

 </body> <!-- Fecha a tag body-->

</html> <!-- Fecha a tag "html"-->

Código .css

p { /*Caracterização da tag "p", onde todos os parágrafos

  irão seguir as "ordens" ditas entre parenteses*/

 text-align: center; /* Define o alinhamento do texto*/

 color: red; /* Define a cor do texto*/

Resultado:

Aqui deixo o link que permite o acesso a GitHub Pages:

https://franciscodborges.github.io/passo2_pt08/exemplo1/index.html

Exemplo 2: Pretendemos apenas formatar o elemento cujo id seja #paragrafo1

Código .html

 <!DOCTYPE html> <!-- Indica que este documento, este código vai ser escrito na linguagem html-->

<html> <!--Define a raiz de um documento HTML-->

  <head> <!--Esta secção Head serve para fazer declarações iniciais e permite definir o titulo da página-->

  <meta charset="UTF-8"> <!--Para que os caracteres acentuados sejam apresentados corretamente, devemos colocar a seguinte instrução na área de head, sendo bastante util, porque em certos browser, por exemplo o Safari, os acentos não são bem lidos -->

  <link rel="stylesheet" type="text/css" href="css/meuestilo.css"> <!-- Esta tag define um link entre o documento e um material externo, neste caso o código em css-->

 </head> <!-- Fecha a tag head-->

 <body> <!-- Esta secção body é onde escrevemos tudo o que pretendemos que surja na página -->

  <p id="paragrafo1">Olá Mundo!</p> <!-- A tag "p" define um novo paragráfo, neste caso respeitando o id "paragrafo1"-->

  <p>Este parágrafo não é afetado pelo estilo.</p>

  <p>Nem este!</p>

 </body> <!-- Fecha a tag body-->

</html> <!-- Fecha a tag "html"-->

Código .css:

#paragrafo1 { /*Caracterização do id "paragrafo1", quando este for chamado obedece ao que está dentro de parenteses*/

  text-align: center; /* Define o alinhamento do texto*/

 color: red; /* Define a cor do texto*/

Resultado:

Aqui deixo o link que permite o acesso ao GitHub Pages:

https://franciscodborges.github.io/passo2_pt08/exemplo2/index.html

Exemplo 3: Pretendemos formatar todos os elementos que estejam identificados pela classe ".centro"

Código .html

<!DOCTYPE html> <!-- Indica que este documento, este código vai ser escrito na linguagem html-->

<html> <!--Define a raiz de um documento HTML-->

  <head> <!--Esta secção Head serve para fazer declarações iniciais e permite definir o titulo da página-->

  <meta charset="UTF-8"> <!--Para que os caracteres acentuados sejam apresentados corretamente, devemos colocar a seguinte instrução na área de head, sendo bastante util, porque em certos browser, por exemplo o Safari, os acentos não são bem lidos -->

  <link rel="stylesheet" type="text/css" href="css/meuestilo.css">  <!-- Esta tag define um link entre o documento e um material externo, neste caso o código em css-->

 </head> <!-- Fecha a tag head-->

 <body> <!-- Esta secção body é onde escrevemos tudo o que pretendemos que surja na página -->

  <h1 class="centro">Cabeçalho centrado e com a cor vermelha</h1> <!-- A tag "h1" define um cabeçalho, neste caso respeitando a classe "centro"-->

  <p class="centro">Parágrafo normal centrado e de cor vermelha.</p> <!-- A tag "p" define um novo paragráfo, neste caso respeitando a classe "centro"-->

  <p>Parágrafo normal não vai ser centrado nem ter a cor vermelha.</p>

 </body> <!-- Fecha a tag body-->

</html> <!-- Fecha a tag "html"-->

Código .css:

.centro { /*Caracterização da classe "centro". Sempre que esta classe for chamada, irá obdecer ao que está dentro dos parenteses*/

  text-align: center; /* Define o alinhamento do texto*/

 color: red; /* Define a cor do texto*/

Resultado:

Aqui deixo o link que permite o acesso ao GitHub Pages:

https://franciscodborges.github.io/passo2_pt08/exemplo3/index.html

Exemplo 4: Pretendemos formatar apenas os elementos "p" identificados pela classe ".centro"

Código .html

<!DOCTYPE html> <!-- Indica que este documento, este código vai ser escrito na linguagem html-->

<html> <!--Define a raiz de um documento HTML-->

  <head> <!--Esta secção Head serve para fazer declarações iniciais e permite definir o titulo da página-->

  <meta charset="UTF-8"> <!--Para que os caracteres acentuados sejam apresentados corretamente, devemos colocar a seguinte instrução na área de head, sendo bastante util, porque em certos browser, por exemplo o Safari, os acentos não são bem lidos -->

   <link rel="stylesheet" type="text/css" href="css/meuestilo.css"> <!-- Esta tag define um link entre o documento e um material externo, neste caso o código em css-->

 </head> <!-- Fecha a tag head-->

 <body> <!-- Esta secção body é onde escrevemos tudo o que pretendemos que surja na página -->

   <h1 class="centro">Cabeçalho centrado e com a cor vermelha</h1>

            <!-- A classe centro não vai afetar h1 porque foi definida só para p -->

   <p class="centro">Parágrafo normal centrado e de cor vermelha.</p> <!-- A tag "p" define um novo paragráfo, neste caso respeitando a classe "centro"-->

   <p>Parágrafo normal não vai ser centrado nem ter a cor vermelha.</p>

 </body>

</html>

Código .css:

p.centro { /*Caracterização da classe "centro" dentro da tag "p". Sempre que esta classe for chamada num paragrafo, irá obdecer ao que está dentro dos parenteses*/

  text-align: center; /* Define o alinhamento do texto*/

 color: red; /* Define a cor do texto*/

Resultado:

Aqui deixo o link que permite o acesso ao GitHub Pages:

https://franciscodborges.github.io/passo2_pt08/exemplo4/index.html

Exemplo 5: Pretendemos formatar os elementos "p" identificados pelas classes ".centro" e/ou ".largo"

Código .html

<!DOCTYPE html> <!-- Indica que este documento, este código vai ser escrito na linguagem html-->

<html> <!--Define a raiz de um documento HTML-->

    <head> <!--Esta secção Head serve para fazer declarações iniciais e permite definir o titulo da página-->

        <meta charset="UTF-8"> <!--Para que os caracteres acentuados sejam apresentados corretamente, devemos colocar a seguinte instrução na área de head, sendo bastante util, porque em certos browser, por exemplo o Safari, os acentos não são bem lidos -->

        <link rel="stylesheet" type="text/css" href="css/meuestilo.css"> <!-- Esta tag define um link entre o documento e um material externo, neste caso o código em css-->

    </head> <!-- Fecha a tag head-->

    <body> <!-- Esta secção body é onde escrevemos tudo o que pretendemos que surja na página -->

        <h1 class="centro">Este cabeçalho não vai ser afetado</h1>

        <!-- A classe centro não vai afetar h1 porque foi definida só para p -->

        <p class="centro">Este parágrafo vai estar a vermelho e centrado.</p>

        <p class="largo">Este parágrafo vai estar com uma fonte larga.</p>

        <p class="centro largo">Este parágrafo vai estar a vermelho, centrado e com uma fonte larga.</p> <!-- Este parágrafo respeita as duas classes "centro" e "largo" -->

        <p>Parágrafo normal não vai ser centrado nem ter a cor vermelha.</p>

    </body> <!-- Fecha a tag body-->

</html> <!-- Fecha a tag "html"-->

Código .css:

p.centro { /*Caracterização da classe "centro" dentro da tag "p". Sempre que esta classe for chamada num paragrafo, irá obdecer ao que está dentro dos parenteses*/

  text-align: center; /* Define o alinhamento do texto*/

 color: red; /* Define a cor do texto*/

p.largo { /*Caracterização da classe "largo" dentro da tag "p". Sempre que esta classe for chamada num paragrafo, irá obdecer ao que está dentro dos parenteses*/

   font-size: 300%; /* Define o tamanho do texto*/

Resultado:

Aqui deixo o link que permite o acesso ao GitHub Pages:

https://franciscodborges.github.io/passo2_pt08/exemplo5/index.html

De seguida, resolvi os exercícios sugeridos pelo professor, as printscreens dos mesmos encontram-se nesta pasta drive:

De seguida,li o que o professor tinha pedido. Deixo os links, do site do professor, abaixo:

Página Inicial

Próximo Passo (3) - Apresentação

Page updated

Report abuse