Novo trabalho: Inicialização à programação em Javascript-
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
Os códigos apresentados em baixo estão todos comentados, indentados e o CSS é externo, de acordo como o professor pediu.
<!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"-->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*/}Aqui deixo o link que permite o acesso a GitHub Pages:
<!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"-->#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*/}Aqui deixo o link que permite o acesso ao GitHub Pages:
<!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"-->.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*/}Aqui deixo o link que permite o acesso ao GitHub Pages:
<!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>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*/}Aqui deixo o link que permite o acesso ao GitHub Pages:
<!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"-->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*/}Aqui deixo o link que permite o acesso ao GitHub Pages:
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: