HTML - Links

Hoje falarei de como podemos adicionar links aos websites usando HTML. Mas primeiro o que são links? Links são uma parte integral do teu website. Estes essencialmente criam "portas" para outros websites. Ou seja a partir de texto ou imagens os utilizadores podem carregar nestes e serem carregados para uma nova pagina da Internet. E como se pode adicionar ao teu website?

Dentro do HTML, pode-se usar a tag <a>. A seguir adiciona-se o atributo "href", este adicionara o destino do teu link. Ao adicionares texto dentro da tag criaras um paragrafo que servira de hiperligação para o teu website. Ainda pode-se adicionar o atributo "target" e especificar para abrir a pagina numa nova janela colocando a valor "_blank" a seguir ao atributo. O teu código devera ficar semelhante a este:

<a href="https://www.blogger.com" target="_blank"> Blog </a>

Espero que tenhas aprendido algo que te possa ser útil. Até à próxima!

PT07-HTML

PT07- HTML

Este trabalho acabou por ser algo que não esperava: não esperava gostar tanto de HTML e das suas milhentas capacidades, não esperava ser tão fácil, ou pelo menos, mais fácil do que estava à espera e bastante interessante.

Usei o Notepad++ para a criação dos códigos, o Google Drive para a apresentação dos meus ficheiros e o GitHub para carregar os meus projetos. O Freenom, site que me permitiria ter uma "presença na internet" mas não consegui criar uma conta com a minha conta de AIB.

Achei os passos 5 (criação da tabela) e o passo 9 (curso SoloLearn).

O meu diploma da SoloLearn do curso HTML.

O passo mais difícil, para mim, foi o 7 (Utilização do GitHub) porque tive alguma dificuldade em carregar os meus ficheiros dos vários projetos mas acabei por conseguir fazer sem problema graças à ajuda dos meus colegas que agora só interajo através do Discord.

Maia no final do trabalho, mais precisamente no dia em que estou a escrever esta mensagem no blog perguntei ao professor se tinha de criar um repositório no GitHub para cada ponto do passo 4 ou se seria um para todo o passo 4. Acabei por fazer um para cada repositório.

Como já disse na memória descritiva do passo 5 (criação da tabela) que podem ver no meu portefólio: https://sites.google.com/aebenfica.org/portefolio-joao-leal/propostas-de-trabalho/pt-07-html escolhi fazer uma tabela simples mas com tudo o que tinha de ter obrigatoriamente para mostrar que soube fazer o que foi pedido.

Aprendi tudo, antes de começar este projeto não sabia nada de HTML, nem mesmo o que significava ou onde se usava e agora sinto que aprendi imenso o que aconteceu. 

Para finalizar, gostei bastante deste trabalho, por causa deste trabalho comecei a estar mais atento a Youtubers e sites que abordam este tema e é algo que quero explorar mais e vou certamente fazê-lo.

Memória descritiva:

Este trabalho foi complicado para mim pois eu tenho muitos poucos conhecimentos de programação, mesmo assim tentei esforçar--me para aprender. Encontrei muitos obstáculos no Passo 5, o que me desmotivou imenso. A minha parte preferida foi fazer o curso da SoloLearn, ajudou-me a aprender e foi bastante divertido. Apesar de complicado e não ser muito interessado nesta matéria, acabei mesmo assim por aprender novas coisas sobre programação e até me diverti a fazer o curso.

Domínio Público: 

https://guicabo.github.io/guicabo/

Diploma:

Guilherme Cabo nº7 12º2ª 

HTML - Imagens

Hoje falarei de como podemos implementar uma imagem num website usando HTML. A tag da imagem é definida desta forma: <img>. A tag da imagem não tem uma tag para fechar e apenas usa atributos dentro da mesma. Para colocares a imagem terás de colocar o  URL desta, que pode ser definido com o atributo "src".

 A seguir, e este passo é opcional, podes adicionar o atributo "alt. Este deixa uma pequena mensagem que descreva a imagem se a mesma não carregar. Ainda podes adicionar os atributos "width" e "height" (largura e comprimento) que te facilitaram a colocares o tamanho especifico que queres da imagem. Estes dois atributos podem ser usados com valores de pixeis e percentagens. Por fim podes adicionar uma borda a imagem, usando o atributo "border". O teu código devera ficar parecido com o seguinte:

<img src="casa.jpg" alt="casa" width="150px" height="150px" border="1px" />

Espero que tenham aprendido alguma coisa. Até à próxima!

Fundamentos de HTML

Html é uma linguagem de marcação entao é basiada em tags, a primeira e ultima tag de todas as paginas é sempre a tag "html", depois do html existe sempre um tag "head", esta tag possui tags que ajudam o navegador a usar a paginas, mas não tem nada que o usuário veja de facto.
 A tag "title" é usada para escrever um titulo.
 Para fechar uma tag é necessário por uma / antes da tag, por isso se quiséssemos fechar o titulo teriamos de escrever </title>.

PT 07 - HTML - CONCLUSÃO

A minha proposta de trabalho 7 está concluída.

Tens aqui a história da sua criação:

Começamos por saber um pouco sobre o que íamos trabalhar lendo assim um texto que o professor tinha preparado para nós. Em seguida tivemos que ver como era estruturado o ficheiro com que íamos trabalhar. No passo seguinte o começo já estava próximo pelo que começamos a instalar os programas que íamos utilizar. No meu caso utilizei o Notepad++, como podia ter usado o Atom, mas acabei por preferir o Notepad++. No passo 3 após nos familiarizarmos com o programa chegou a vez de lermos as boas práticas, ou seja, vermos como íamos construir o nosso código foi isso então que fizemos, através de uma leitura cuidadosa de outra página criada pelo professor designada de Boas Práticas. Chegamos então ao Passo 4 o passo onde tudo começa a fazer sentido após três passos de leitura para ficar a conhecer o processo inteiro neste passo a história ia ser diferente, aqui com a ajuda do W3Schools começamos a construir códigos (ainda que fosse quase copy + paste). Mas no passo 5 chegou finalmente o momento de nós alunos criarmos a tabela de turma e ai sim já éramos nós a construir tudo e a idealizar como queriamos a tabela. Pois então construímos a tabela até estar ao nosso gosto. De seguida o passo 6 foi colocar tudo num repositório online o GitHub, para que possamos aceder aos nossos projectos de qualquer parte do mundo. Infelizmente o passo 7 não foi efectuado pois o sitie apresentava bastantes dificuldades de acesso pelo que após autorização do professor pudemos continuar o trabalho sem fazer este passo. Passo 8 foi enviar os nossos URL para um Google Forms. Passo 9 elaboramos um curso através do sololearn para aprendermos mais sobre o HTML. E por fim o passo 10 é esta noticia que eu estou a escrever para vos dar conta que já terminei o trabalho.

Iniciação ao JS: Comentários

Os comentários são cruciais em qualquer linguagem de programação. Ajuda nós e os outros a perceber o qual o raciocínio seguido na escrita daquele pedaço de código ou o seu objetivo ou aquilo que se refere. Pode parecer uma ferramenta exclusivamente útil para programadores em equipa, mas acredite, também é muito útil quando vamos mexer num pojeto que já não tocávamos à muito tempo.

Como puderam ver nos exemplos acima, os comentários podem ser feitos numa linha apenas, sendo apenas necessário iniciá-lo com "//". Caso necessite escrever um comentário que se prolongue por mais do que uma linha, terá que iniciar o mesmo com "/*" e terminá-lo com "*/". 

Imagens produzidas pelo autor

HTML - Blogger

Quem é um utilizador do blogger sabe que ao criarmos a publicação deparamos-nos com muitas opções a partir dos botões presentes:

• Modificar o texto a partir do bold, itálico, sublinhado, riscado. Mudar a sua cor, cor de fundo.
• Adicionar imagens, links da web com um texto, vídeos e muitos outros.

Como é que funciona esta quantidade enorme de opções e que nos permite mudar tão rápido a página?

Tudo isto é possível através do HTML. Sim, o blogger é escrito em HTML! O melhor de tudo é que nem sequer temos de tocar diretamente em código se não quisermos!

Podemos verificar que isto é verdade ao mudarmos a opção de visualização do editor. No canto superior direito no editor do Blogger, abaixo da logo, podemos ver "Redigir" e "HTML". Cliquemos no HTML para mostrar o código bruto!

Agora podemos ver como é o código antes de ser lido pelo navegador.
Ter acesso aos dois editores é importante para corrigir quaisquer problemas, bugs, ou complicações que eventualmente podem acabar por acontecer ao usar o editor normal.

Referências

• HTML 5 (Imagem)

HTML - Link

UMA DAS OUTRAS TAGS DE DECIDI TRAZER FOI A TAG DE LINK, QUE TAMBÉM É UM FERRAMENTA MUITO UTILIZADA DURANTE A CRIAÇÃO DE PÁGINAS DE WEB!

Para escrever um link utilizamos a estrutura:

<a href="https://www.thisisalink.com">This is a link</a>

Assim, sempre que quisermos adicionar uma frase com link, utilizamos <a href="link">Frase com link</a>, onde "Frase com link" é a frase que vai aparecer na página Web com a hiperligação, ou seja, o que escrevermos no lugar da palavra "link" não aparecerá.

Então escrevemos o código abaixo com a tag de link inserida e com a tag de parágrafo e de cabeçalho que aprendemos na publicação anterior:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>Links em HTML são definidos com a tag:</p>

<a href="https://www.w3schools.com">Isto é um link.</a>

</body>
</html>

Em que o output no navegador será:

Em que se clicar-mos no link, o navegador irá direccionarmos para www.w3schools.com


Referências:

• http://hilite.me (consultado a 20/04/2020);
• Logo HTML (consultado a 20/04/2020).

HTML-SoloLearn

HTML - SoloLearn

Para os aprendizes de HTML (como eu), o meu professor de AIB e sites como a Quora em que os seus utilizadores respondem às perguntas uns dos outros recomendaram a app SoloLearn para aprender a programar em HTML. A app consiste em vários pequenos cursos não só de HTML mas também CSS, JavaScript e outras linguagens de programação. No final de cada curso recebe-se um certificado em como completámos o curso o que é sempre uma boa motivação para continuarmos a aprender. No final, depois de recebermos o certificado podemos continuar a aprender sobre o tema. Durante o curso tem se aulas sobe a escrita em HTML, cada aula consiste numa série de teoria e depois prática. Tanto na teórica como na prática, no canto inferior esquerdo há um botão que diz "comentários" em que os utilizadores da app comentam a teoria apresentada e esclarecem dúvidas uns aos outros na parte prática em que são testados os nossos conhecimentos sobre o tópico.

Descarrega a app SoloLearn: https://play.google.com/store/apps/details?id=com.sololearn&hl=pt_PT

Iniciação ao JS: variáveis

As variáveis são provavelmente a peça mais fulcral de um código em Javascript e de grande parte das linguagens de programação. São utilizadas para guardar informação, que pode ser acedida mais tarde. Para além disso, como o nome sugere, as variáveis têm a capacidade de variar o valor que guardam no decorrer da execução do programa. O uso mais comum para as mesmas é a recolha e armazenamento de inputs do utilizador (valores que não são predefinidos e que podem ser alterados ao longo do tempo).

Como podem ver, a estrutura de uma variável é muito simples. Começamos por lhe dar um nome ao nosso gosto para que a possamos identificar e "chamar" mais tarde (o nome não pode possuir espaços ou caracteres especiais, sem ser o underscore). À frente colocamos APENAS um sinal de mais, pois estamos a fazer uma atribuição e não uma comparação. Por último colocam absolutamente o que quiserem no seu interior. Como vêm, fácil.
É importante frisar que no JS não é necessário indicar qual o tipo de variável antes de declarar a mesma (float, string, bool,...).

Imagem produzida pelo autor.

HTML - Headings

As headings são tags do HTML que permitem exibir o texto na forma de cabeçalhos.
Existem seis headings diferentes, de <h1> a <h6>, cujo tamanho vai diminuindo respetivamente, sendo o h1 o maior.

<!DOCTYPE html>
<html>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
  </body>
</html>

Este código mostra-nos as 6 headings em ordem decrescente de cima para baixo, com o maior sendo o primeiro.


Referências

• HTML 5 (Imagem)
• W3Schools - HTML Basic

HTML - Imagens

UMA DAS TAGS MAIS UTILIZADAS TAMBÉM É A DE IMAGEM, PORQUE AFINAL O QUE SÃO PÁGINAS DA WEB SEM IMAGENS!

A tag de imagem é <image> e a sua estrutura de utilização é a seguinte:

<img src="urldaimagem" alt="nomedaimagem" width="largura" height="altura">

Em que src é a source, ou sejam o URL da imagem, alt é o nome que queremos dar à imagem (quando a imagem não carrega ou não é detectada, é esse nome que aparece na página), width é a largura e height é a altura.

Assim se seguirmos este exemplo:

<!DOCTYPE html>
<html>
<body>

<h2>Imagens em HTML</h2>
<p>As imagens em HTML são definidas com a tag:</p>

<img src="w3schools.jpg" alt="W3Schools Logo" width="895" height="493">

</body>
</html>

Em que a imagem denominada "w3schools.jpg" está na pasta onde se encontra o ficheiro html, o output no navegador será:

Se a imagem não fosse detectada ou carregada corretamente, o output seria:

Referências:

• http://hilite.me (consultado a 20/04/2020);
• Logo HTML (consultado a 20/04/2020).

HTML-Cores

HTML - CORES

Em Html as cores são definidas com um código seguido de um # (cardinal ou como é agora conhecido, um hashtag). Existem muitos sites que nos permitem consultar os códigos das cores em HTML, o que mais uso é este: https://htmlcolorcodes.com/ . Tem um design moderno e é muito fácil de utilizar.

Como podem ver na imagem acima ao escolhermos uma cor o site dá nos logo o código para usarmos em HTML o que é bastante útil.

Como introduzir uma imagem em HTML?

Para introduzirmos uma imagem em HTML utilizamos um código especifico para "chamar" a imagem.

<img src=" ">

Temos por exemplo este código que pode ser utilizado para experimentar.

<!DOCTYPE html>
<html>
<body>

<p>HTML images are defined with the img tag:</p>

<img src=".jpg" width=" " height=" ">

</body>
</html>

Para a imagem aparecer temos de colocar o caminho até ela ou seja se ela se encontrar na mesma pasta onde está o html basta por assim "imagem.jpg" mas para o caso de a imagem se encontrar numa sub-pasta temos de colocar o nome da pasta por exemplo "imagens/imagem.jpg".

Iniciação ao JS: While loop

A estrutura de repetição que vou falar hoje é o while, Esta, em oposição ao for, é normalmente utilizada quando o programador não sabe o número de vezes que o loop terá que se repetir. Esta, para além de muito simples, é também transversal à maioria das linguagens de programação.

Como podem ver neste exemplo, o código dentro do loop é executado enquanto a variável i for verdadeira, no momento em que não o seja, o loop é quebrado o programa não executa o mesmo. É importante denotar que dentro dos parênteses colocamos a condição para que a estrutura seja executada, sendo que a mesma o é, sempre que o que se encontra dentro de parênteses seja True. Ou seja, funciona como um booleano, é executada quando o valor é True e não o é, quando o valor da condição é igual a False.

Imagem produzida pelo autor.

HTML - Editores de texto

Assim como em qualquer outra linguagem, o HTML pode ser escrito em absolutamente todos os editores de texto, até no rudimentar bloco de notas do Windows.

Existem, porém, alguns editores de texto mais recomendáveis pela sua organização e estrutura. Umas das principais funções deverá ser o reconhecimento das palavras chave da linguagem. No caso, as tags deverão ser reconhecidas pelo editor, sendo exibidas com cores diferentes (color highlighting).

Notepad++ - como o nome diz é um "up" ao notepad normal do Windows (em referência talvez ao C++, que é um "up" do C, e como está presente na própria linguagem a função "++", que adiciona um valor a um inteiro).

Atom / Visual Studio Code -  Editores poderosos. Admitem vários plugins da comunidade. Visual Studio Code é da Microsoft e é como se fosse a mini-versão do Visual Studio, que é uma IDE. Para HTML não precisamos de IDEs, dado que não é necessário compilar e executar um programa, apenas abrir com o navegador.

Para HTML recomendo usar o Notepad++ que faz o trabalho mais que bem feito.

Referências

• HTML 5 (Imagem)

HTML - Cabeçalhos e Parágrafos

UMAS DAS TAGS MAIS IMPORTANTES E MAIS UTILIZADAS NA PROGRAMAÇÃO EM HTML SÃO AS TAGS DE PARÁGRAFO E DE CABEÇALHO!

A tag de parágrafo, em inglês "paragraph", é <p> e a sua estrutura de utilização é

<p>Escrever parágrafo</p>

Assim, a tag de parágrafo escreve-se dentro da tag <body>. Se desejar deixar um espaçamento entre parágrafos, pode utilizar a tag <br />.

Já a tag de cabeçalho, em inglês "heading", tem variáveis, podendo ser <h1>, <h2>, ..., até <h6>, sendo assim o <h1> o maior cabeçalho que contém a informação menos importante e o <h6> o menos e que contém informação menos importante.

Assim, as tags são utilizadas da seguinte maneira:

<h1>Este é o cabeçalho 1</h1>
<h2>Este é o cabeçalho 2</h2>
<h3>Este é o cabeçalho 3</h3>
<h4>Este é o cabeçalho 4</h4>
<h5>Este é o cabeçalho 5</h5>
<h6>Este é o cabeçalho 6</h6>

E assim como a tag de parágrafo, escreve-se dentro da tag <body>. Assim, o output deste código seria:

Referências:

• Logo HTML (consultado a 20/04/2020);
• http://hilite.me (consultado a 20/04/2020);

HTML - Comentários

A segunda regra das "boas práticas" para qualquer línguagem de programação é adicionar comentários ao teu código. Os comentários, essencialmente, adicionam pequenas legendas no teu código para que qualquer pessoa que leia o código entenda o que pretendeste fazer em cada linha ou passo. Estas legendas só podem ser visualizadas dentro do editor de código. Mas então como é que se adiciona?

É simples seguindo a seguinte estrutura: 

<!-- comentário -->

E se ainda necessitares para adicionar comentários em CSS e Javascript fazes pela seguinte estrutura:

/* comentário */

Agora podes comentar no teu código e seguir as boas praticas para qualquer línguagem de programação. Até à próxima!

HTML - Lista

Como se faz uma lista no HTML?

  Hoje vou mostrar-vos como se faz uma lista no html. Um código exemplo é o seguinte:

<html>

<head>

<title>first page</title>

</head>

<body>

<ol>

<li>Red</li>

<li>Blue</li>

<li>Green</li>

</ol>

</body>

</html>

O seu resultado é o seguinte:

Agora, vou explicar algumas das tags que o código tem e que ainda não conhecemos. A primeira tag é a "title" que faz com que o que seja escrito dentro da tag seja o nome da página. Depois a tag "ol" que significa order list, que significa em português, uma lista com ordem. Depois a tag "li" é de list, em que o que pomos lá dentro é o que vai ficar enumerado na lista.

Obrigado e até à próxima.

HTML - Comentários

Como se introduz um comentário num código no html?

  Nos diversos tipos de linguagens, existem várias formas de introduzir comentários nos códigos. No caso do html, a forma de introduzir um comentário é : <!--"comentário"-->. 

  Obrigado e até à próxima.

HTML - Documento Básico

Como é um documento básico de html criado?

Um documento básico de html, normalmente tem um título e um parágrafo.

Abaixo vou mostrar qual é o código base.

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Com a primeira linha do código, introduzimos a descrição que este é um documento html. Logo a seguir, a própria tag de html que abrimos sempre depois da tag referente ao documento html e fechamos a tag de html no fim do código. Depois abrimos a tag do body que vai ter dentro dela tudo o que quisermos que apareça da página do navegador. Mais tarde temos o título que pode variar de tamanho, dependendo da tag que utilizar-mos que pode ser: h1, h2, h3, h4, h5 e h6, sendo o h1 o maior e o h6 o menor título. Logo a seguir a fecharmos a tag do título, abrimos uma tag para fazer um parágrafo e escrevemos o que queremos de seguida fechando a tag. Finalmente fechamos a tag do body quando não queremos escrever mais nada, não esquecendo depois de também fechar a tag do html.

Obrigado e até à próxima.