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

Passo 4

Neste passo, criamos os nossos primeiros ficheiros index.html

Este passo tinha o objetivo de ficarmos a conhecer e entender melhor a estrutura básica de um documento HTML, texto de cabeçalho, parágrafos de texto, links e imagens: (as hiperligações levam ao site da W3Schools, onde está disponivel o código)

1º - Documento HTML (h1 e p)
2º - Cabeçalhos HTML (h1 a h6)
3º - Parágrafos HTML (p e p)
4º - Links HTML (a href)
5º - Imagens HTML (img)

A elaboração destes 5 códigos, escritos no Sublime, encontram-se disponiveis na pasta drive que se encontra em baixo, e no respetivo repositório GitHub ou na minha página publica (GitHub Pages) do repositório GitHub.

1º - DOCUMENTO HTML: aqui

<!DOCTYPE html> <!-- Serve para identificar o tipo de linguagem em que vamos escrever -->

<html> <!-- Abre a tag "html" -->

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

        <h1>My First Heading</h1> <!-- Escreve o cabeçalho "My First Heading" no tamanho definido, neste caso "h1" -->

        <p>My first paragraph.</p> <!-- Faz um paragrafo e escreve o texto "My first paragraph" no tamanho definido -->

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

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

RESULTADO:

2º CABEÇALHO HTML: aqui

<!DOCTYPE html> <!-- Serve para identificar o tipo de linguagem em que vamos escrever -->

<html> <!-- Abre a tag "html" -->

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

  <h1>This is heading 1</h1> <!-- Escreve o cabeçalho "My First Heading" no tamanho definido, neste caso "h1" -->

  <h2>This is heading 2</h2> <!-- Escreve o cabeçalho "My First Heading" no tamanho definido, neste caso "h2" -->

  <h3>This is heading 3</h3> <!-- Escreve o cabeçalho "My First Heading" no tamanho definido, neste caso "h3" -->

  <h4>This is heading 4</h4> <!-- Escreve o cabeçalho "My First Heading" no tamanho definido, neste caso "h4" -->

  <h5>This is heading 5</h5> <!-- Escreve o cabeçalho "My First Heading" no tamanho definido, neste caso "h5" -->

  <h6>This is heading 6</h6> <!-- Escreve o cabeçalho "My First Heading" no tamanho definido, neste caso "h6", sendo este o tamanho mais pequeno dos seis tamanhos -->

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

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

RESULTADO:

3º PARÁGRAFOS HTML: aqui

<!DOCTYPE html> <!-- Serve para identificar o tipo de linguagem em que vamos escrever -->

<html> <!-- Abre a tag "html" -->

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

  <p>This is a paragraph.</p> <!-- Faz um paragrafo e escreve o texto "This is a paragraph" no tamanho definido -->

  <p>This is another paragraph.</p> <!-- Faz um paragrafo e escreve o texto "This is another paragraph" no tamanho definido -->

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

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

RESULTADO:

4º LINKS HTML: aqui

<!DOCTYPE html> <!-- Serve para identificar o tipo de linguagem em que vamos escrever -->

<html> <!-- Abre a tag "html" -->

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

  <h2>HTML Links</h2> <!-- Escreve o cabeçalho "HTML Links" no tamanho definido, neste caso "h2" -->

  <p>HTML links are defined with the a tag:</p> <!-- Faz um paragrafo e escreve o texto "HTML links are defined with a tag:" no tamanho definido -->

  <a href="https://www.w3schools.com">This is a link</a> <!-- Cria o texto "This is a link" com o link definido em "href" -->

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

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

RESULTADO:

5º IMAGENS HTML:aqui

<!DOCTYPE html> <!-- Serve para identificar o tipo de linguagem em que vamos escrever -->

<html> <!-- Abre a tag "html" -->

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

  <h2>HTML Images</h2> <!-- Escreve o cabeçalho "HTML Images" no tamanho definido, neste caso "h2" //-->

  <p>HTML images are defined with the img tag:</p> <!-- Faz um paragrafo e escreve o texto "HTML images are defined with the img tag" no tamanho definido //-->

  <img src = "imagens/w3schools.jpg" alt = "W3Schools.com" width = "104" height = "142"> <!-- Coloca a imagem definida na fonte ( src = "w3schools.jpg") com a altura (height) e largura (width) definido/a. O "alt" serve para no caso de a imagem não carregar, deixar o texto entre aspas ("W3Schools.com")

  NOTA: A tag "img" é uma das tags que não se necessita de fechar e note ainda que a "src" no caso de estar noutra pasta, sem ser na que se encontra este projeto, terá de colocar o nome da pasta antes do nome da imagem e dividi-lo com uma "/". Por último, a seguir a escrever o nome da imagem tem que colocar "." e tipo de ficheiro em que a imagem se encontra guardada //-->

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

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

RESULTADO:

NOTA: Apesar de isto ser código copiado, foi identado e comentando!

Página Inicial

Proximo Passo (5) - Pauta da turma

Page updated

Report abuse