Na página de Regas, apresentam-se alguns equipamentos de automatização de rega, assim como videos a explicar a sua programação
Na página de Piscinas, apresentam-se vários temas, desde a contrução, tratamento e manutenção de piscinas, assim como alguns exemplos de reagentes e equipamentos.
| REGA | PISCINAS |
|---|---|
|
|
| HTML | CSS | ||
|---|---|---|---|
|
<!DOCTYPE html> - Não é propriamente uma marca, é uma declaração que informa o browser do tipo de documento, neste caso HTML 5. <html> - Contentor para todos os elementos html. Com o elemento lang="pt" define-se a linguagem do documento <head> - Cabeçalho da página onde estão definidos o título, e os links para os ficheiros de css e e para o de javascript. <meta charset="utf-8"/> - Define a metadata sobre o documento HMTL, utilizado para definir o encoding das páginas (a listas de caracteres) para utf-8 de modo a que apareçam os caracteres correspondentes ao que foi escrito como acentos, cedilhas, etc. em vez de caracteres estranhos. <link> - Define o relacionamento entre o documento em que é utilizado e uma fonte externa, neste caso para definir o ficheiro externo de estilos com, <link rel="stylesheet" type="text/css" href="./ficheiros/styles.css" />. <script> - Inclui um script de javascript, neste caso para um ficheiro externo com, <script src="./ficheiros/script.js"></script>. Inicialmente tinha colocado o type="text/javascript" mas após fazer a validação do html, recebi um warning de que era desnecessário para recursos javascript, decidi então retirar. <tittle> - Utilizado para definir o titulo da página. <body> - Define o conteudo do documento HTML que vai ser visivel diretamente na página web. <div> - Define uma divisão ou secção num documento HTML, é utilizado como um contentor para elementos de HTML em diversas partes da página, por exemplo no menu. <h1> - Define o heading 1, neste caso o titulo no documento que é o mais importante, existem headings de 1 (mais importante) ao 6 (menos importante). Estes headings também são utilizados no SEO (search engine optimization). <input type="button"> - Define uma entrada(input), neste caso um botão, utilizado no menu <hr /> - Define uma regra horizontal, delinea uma separação de temas ou tópicos, utilizado para separação entre o conteúdo da página e os comentários das marcas utilizadas. </br> - Define uma quebra de linha, utilizada para mudar de linha no caso da explicação da margin na tabela de marcas utilizadas em CSS. <table> - Define uma tabela HTML, esta é constituida por uma <table> e um ou mais elementos, em que <tr> define uma linha, <th> define um cabeçalho da tabela e <td> define uma célula da tabela, esta marca e seus elementos foram utilizadas na criação desta tabela. Carateres especiais HTML - Adiciona um espaço que não deixa quebrar a linha no texto, utilizado nos comentários das marcas link e script de forma a não deixar quebrar a linha a meio da instrução < - Escreve um sinal de menor (lt - less than), utilizado nos comentários das marcas HTML. > - Escreve um sinal de maior (gt - less than), utilizado nos comentários das marcas HTML. & - Escreve um &. |
background: linear-gradient (90deg, indigo 0%, lightgray 10%, lightgray 90%, indigo); - Utilizado para definir o background do body com um gradiente vertical que vai desde a côr indigo, passa por duas lightgray aos 15 e 85% da largura e termina novamente em indigo, teve como objetivo dar algum enfase á página. background-color:lightgray; - Utilizado para definir a côr de fundo do wrapper para a côr lightgray.
padding: 20px; - Utilizado para definir a margem interna da div com id wrapper para 20 pixeis. height: 2.5em; - Utilizado para definir altura da classe menu para 1.5 vezes o tamanho da fonte do elemento corrente. width: auto; - Utilizado para definir a largura automática nos botões do menu. max-width: 100%; - Define uma largura dinâmica, neste caso para utilizar a largura disponivel, ao juntar height: auto, obtive o efeito desejado de adaptar o tamanho das imagens ao tamanho da janela do browser, também utilizado nos videos embebidos do youtube na página rega.html border: 2px outset lightblue; - Utilizado para definir a linha de fronteira de um elemento, neste o contorno da galeria com 2 pixeis de espessura um outset (efeito que simula sombra) e a definição da cor lightblue. border-radius: 5px; - Define o raio dos cantos do elemento, utilizado arredondar os cantos das tabelas da galeria. hover - Seletor utilizado para produzir um efeito ao colocar o ponteiro do rato em cima do elemento, neste caso para mudar a côr de fundo e da fonte dos botões. active - Utilizado para produzir um efeito ao clicar em cima do elemento, neste caso para mudar a côr de fundo. color: azure; - Utilizado para mudar a côr do texto, neste caso dos botões do menu para azure ao pairar como ponteiro do rato por cima destes. line-height: normal; - Utilizado nos comentários ás marcas para definir a altura da quebra de linha. text-align: center; - Coloca elementos no centro horizontal de um elemento pai tipo block (div,table etc), aplica-se neste caso aos elementos inline-block da galeria vertical-align: top; - Utilizado nos comentários ás marcas para forçar o texto a ficar alinhado no topo na célula da tabela. body::-webkit-scrollbar; - Pseudo-elemento utilizado para configurar o estilo da barra de scroll do browser, utilizado com width: 0px de forma a que não apareça a barra de scroll, desta forma não há deslocamentos na página ao abrir as marcas utilizadas. display: flex; - Define um elemento como Flexible Box, permite criar uma estrutura flexivel sem usar posicionamento, utilizei neste caso como teste (experiencia) de forma a colocar o texto do botão info no centro do mesmo. align-items: center; - Alinha os items no centro (eixo vertical) de uma flexbox, utilizado para colocar o texto do botão info ao centro. justify-content: center; - Alinha o conteudo de uma flexbox no centro (eixo horizontal) quando este não ocupa toda a largura disponivel, utilizado para alinhar horizontalmento o texto no botão Info. z-index: 1; - Especifica a ordem nas camadas (eixo z) do elemento, utilizado para que o botão Info fique sempre por cima de todos os elementos da página. position: fixed; - Coloca o elemento numa posição fixa na página, utilizado no botão Info. bottom: 50px; e right: 50px;Define a posição de um elemento, neste caso do elemento fixo que é o botão info a 50 pixeis do limite inferior e 50 pixeis do limite direito da página. font-family: system-ui; - Define a famile de fontes do elemento, neste caso coloca todo o body com a familia system-ui. font-size: x-large; - Define o tamanho da fonte do botão Info para extra grande. font-style: italic; - Coloca a fonte do botão Info em itálico. font-weight:900; - Define a espessura (bold) da fonte do botão Info para 900. user-select: none; - Retira a possibilidade do texto do botão info ser seleccionado pelo utilizador, não seria propriamente necessário mas quis utilizar como teste. |