AULA 1
Linguagem HTML
A linguagem HTML (Hypertext Markup Language) é uma linguagem padrão para a construção de páginas Web.
As linhas de código HTML são interpretadas pelos browsers que exibem o resultado final ao utilizador, sem necessidade de compilação. Basicamente, podemos considerar que a linguagem HTML é constituída por textos e por códigos especiais, denominados tags (comandos da linguagem).
Conceitos básicos de HTML
As tags são constituídas por um comando inserido dentro dos símbolos < >
Exemplos:
<html>
<body>
<p>
As tags começam com <> e são fechadas por </>
Exemplo:
<html> ... </html>
Um documento HTML básico deve conter pelo menos as seguintes tags:
<html>
<head>
<title>Título da página</title>
</head>
<body>
Corpo da página
</body>
</html>
Observações:
-
Não é preciso um compilador para obter o resultado do código HTML.
-
Só é necessário um editor de textos comum e um navegador que se encarregará de interpretar o código.
-
A diferença básica que fará com que o sistema operativo identifique que se trata de uma página HTML é a extensão do ficheiro.
-
Ou seja, enquanto um arquivo de texto é gravado com a extensão ".txt", uma página Web deve ser gravada com a extensão ".htm" ou ".html".
Significado das TAG
Todos os documentos em HTML iniciam-se com a tag <html> e terminam com </html>.
Todo o conteúdo do documento deverá estar inserido dentro deste par de tags.
As outras tags fundamentais num documento HTML são aquelas que delimitam o cabeçalho e o corpo do documento.
Tudo aquilo que estiver inserido entre a tag de abertura <head> e a de encerramento </head> é considerado cabeçalho do documento. A parte mais importante do cabeçalho é o título, que é inserido dentro da tag <title>...</title>.
Os títulos são mostrados na barra de título do programa e na área em que aparecem as páginas já visitadas. Também é fundamental para os mecanismos de busca da internet que exibirão o título da página como o link de opção encontrada.
O corpo são os textos, imagens, documentos, formulários, etc. mostrados na janela do browser. No código, corpo é tudo aquilo inserido entre as tags <body> e </body>.
Exemplo 1
Construir uma página HTML com a frase “Olá mundo!" e com o título "Exemplo 1"
<html>
<head>
<title>Exemplo 1</title>
</head>
<body>
Olá mundo!
</body>
</html>
Parâmetros da tag <body>
<body bgcolor=“...”> cor de fundo para a página.
<body background=“...”> imagem de fundo da página.
<body text=“...”> cor do texto da página.
<body link=“...”> cor dos links.
<body vlink=“...”> cor dos links que já foram visitados.
Códigos de cor em HTML:
Nomes de cores em HTML:
Clique para ver nomes das cores
Exemplo 1:
<html>
<head>
<title>HTML - EXEMPLO1</title>
</head>
<body bgcolor="#FFFFCC" text="#FF3300">
</body>
</html>
Exemplo 2:
<html>
<head>
<title>HTML - EXEMPLO2</title>
</head>
<body text="#FF3300" background="water008.jpg">
Olá mundo!
</body>
</html>
Download da imagem Water008.jpg
Tag <p> e <br>
A tag <p> utiliza-se para criar parágrafos. As linhas do parágrafo são criadas com <br>; a tag <br> não tem que ser fechada.
Exemplo 3:
<html>
<head>
<title>HTML - PARÁGRAFOS </title>
</head>
<body bgcolor="#FFFFCC" text="#FF3300">
<p>Isto é um parágrafo <br> que vai conter <br> três linhas</p>
</body>
</html>
Alinhamento de parágrafos
Os parágrafos podem ter atributo para alinhamento de textos. Basta incluir depois do "P" o parâmetro "align=tipo de alinhamento".
Os atributos são:
Left: Alinhamento à esquerda
Right: Alinhamento à direita
Center: Centrado
Justify: Texto justificado
Exemplo 4:
<p align="left">Texto alinhado à esquerda</p>
<p align="right">Texto alinhado à direita</p>
<p align="center">Texto centrado</p>
<p align="justify">Texto justificado</p>
AULA 2
Fontes de texto
Tag <font>
A tag <font> suporta vários parâmetros, tais como a cor, tamanho e tipo de letra.
<font face="tipo de fonte" color="#xxxxxx" size="+-n">
Opções:
size: alterar tamanho da fonte
color: cor do texto
Exemplo 1:
<body>
<font face="Tahoma">
Texto escrito na fonte Tahoma
</font>
</body>
Exemplo 2:
<font face="courier new" size="+2">Texto 2 pontos maior</font>
Exemplo 3:
<font face="Arial" color="#3300ff" size="-1">Texto de cor azul</font>
Tags <b> <u> <i> e <center>
O texto pode ser formatado colocando-o em negrito, sublinhado, itálico e centrado.
<b> Texto Negrito</b> Texto Negrito
<u> Texto Sublinhado</u> Texto Sublinhado
<i> Texto Itálico</i> Texto Itálico
<center> Texto Centrado </center> Texto Centrado
Exemplo:
<body>
<b> Texto em negrito </b>
<p><i> Este parágrafo está em itálico </i></p>
</body>
Conjunto de caracteres de Portugal
Utilizado para mostrar correctamente, por exemplo, os caracteres acentuados.
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8">
...
</head>
Ficha de trabalho nº1
AULA 3
Hiperligações (Links)
Tag <a>
A tag <a> é utilizada para estabelecer um link (ligação) para outras páginas ou até mesmo dentro da própria página. O destino de um link é definido no atributo href desta tag.
Exemplo 1:
<a href="http://www.html.net/">Isto é um link para HTML.net</a>
O significado de a href é o seguinte: “a” significa anchor (âncora) e dá início ao link e href significa Hypertext REFerence (ou numa tradução livre, a referência do hipertexto).
Opção Title
Para mostrar um texto explicativo sobre o link (quando o rato pára sobre o link), utiliza-se a opção title:
Exemplo 2:
<a href="http://www.html.net/" title="Visite HTML.net e aprenda HTML">HTML.net</a>
Tipos de LINKS
Em função do destino, os links classificam-se como:
Links remotos: os que se dirigem a páginas de outros websites (exemplo anterior).
Links internos: os que se dirigem a outras partes dentro da mesma página.
Links locais: os que se dirigem a outras páginas do mesmo site web.
Links com endereços de email: para criar uma mensagem de email.
Links com ficheiros: servem para que o utilizador possa fazer download de ficheiros.
LINKS Internos
Para criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou índice com links para cada um dos capítulos de uma página, utiliza-se o atributo id e o símbolo #.
O atributo id serve para marcar o elemento que é o destino do link.
Por exemplo:
<a id="heading1">Cabeçalho 1</a>
Agora pode-se criar um link que leve a este local da página usando o símbolo # no atributo do link.
O símbolo # informa o browser para ficar na mesma página que está.
O símbolo # deve ser seguido pelo valor atribuido a id para onde o link vai.
Por exemplo:
<a href="#heading1">Link para o cabeçalho 1</a>
Exemplo:
Normalmente, um site é constituído por várias páginas (diferentes páginas html), ligadas através de links.
Exemplo:
Para criar este tipo de links, utiliza-se referências, da seguinte forma:
<a href="/documento.htm" target="_abc"> Texto do link </a>
Atributo target
Usando o atributo target, pode-se criar um link que abra numa nova página, ao invés de substituir a página em que o utilizador está.
Target controla o sítio onde o novo documento irá ser exibido quando o utilizador segue um link. Na maioria das vezes, ao clicar num link simplesmente é carregado um novo documento na mesma janela onde estava o link.
No entanto, com target pode-se ter o novo documento aberto numa nova janela, ou noutra frame.
Target tem 4 valores pré-definidos:
"_blank"
"_parent"
"_self"
"_top"
Target="_blank“
"_blank" abre o novo documento numa nova janela.
Target = "_self"
"_self" especifica o novo documento na mesma janela e o quadro como o actual documento. "_self" funciona da mesma forma se você não tivesse usado target.
Target="_parent"
É utilizado na situação em que um arquivo de frameset está aninhado noutro arquivo de frameset. Um link num dos documentos internos frameset que usa "_parent" irá carregar o novo documento interno onde o arquivo de frameset tinha sido aberto.
Target = "_top"
"_top" carrega o documento vinculado no quadro de nível superior . Isto é, a nova página preenche toda a janela.
Exemplo 1:
<a href=“Página de ligação.html" target="_blank"> Abrir uma nova janela </a>
Exemplo 2:
<a href=“mamiferos.html" target="_self"> Na mesma janela </a>
Exemplo 3:
Se a pagina for colocada numa sub-pasta (chamada "subpasta"), o link passa a ser escrito:
<a href="/subpasta/mamiferos.htm"> Link para página mamíferos</a>
Para mais informações, consulte:
LINK para mail
Criar um link para um endereço de email faz-se de modo semelhante aos links para documentos. A única diferença é que no lugar do endereço do documento escreve-se “mailto:” seguido pelo endereço de email.
Quando o link é clicado o programa de e-mail padrão é aberto com o endereço do link já escrito na linha de destinatário:
Exemplo 4:
<a href="mailto:antoniomanuelsilva123@hotmail.com">Enviar e-mail para autor</a>
LINK para ficheiros
Para criar um link para um ficheiro (download do ficheiro) escreve-se:
<a href=“ficheiro">Título do link</a>
O browser vai tentar abrir o documento a descarregar numa nova janela ou fazer a pergunta típica: "Deseja abrir o ficheiro ou guardá-lo no computador?".
Exemplo 5:
Download de ficheiro chamado imagens.zip que se encontra na mesma pasta que a página HTML:
<a href=“imagens.zip"> Download de imagens </a>
AULA 4
Estrutura de uma página em HTML http://www.w3schools.com/html/html_intro.asp
Títulos, Parágrafos, Hiperligações e Imagens http://www.w3schools.com/html/html_basic.asp
Atributos http://www.w3schools.com/html/html_attributes.asp
(Com 5 exercícios práticos)
HTML Styling http://www.w3schools.com/html/html_styles.asp
(Com 6 exercícios práticos)
HTML Comentários http://www.w3schools.com/html/html_comments.asp
(Com 2 exercícios práticos)
HTML Listas http://www.w3schools.com/html/html_lists.asp
(Com 6 exercícios práticos)
HTML Section http://www.w3schools.com/tags/tag_section.asp
EXEMPLO 1
HTML Styles CSS http://www.w3schools.com/html/html_css.asp
CSS Selectors http://www.w3schools.com/css/css_selectors.asp
HTML link href Attribute http://www.w3schools.com/tags/att_link_href.aspsp
HTML div Tag http://www.w3schools.com/tags/tag_div.asp
EXEMPLO 2
Window scrollTo() Method http://www.w3schools.com/jsref/met_win_scrollto.asp
EXEMPLO 3
fullPage.js
http://alvarotrigo.com/fullPage/
AULA 5
EXERCÍCIO 2
Index.HTML Estilos.CSS
Ficha de avaliação prática
AULA 6
Aprenda o layout de CSS
Este site ensina os fundamentos de CSS que são utilizados em qualquer layout de websites.
Suponho que já sabe o que são selectores, propriedades e valores. E que provavelmente sabe uma coisa ou duas coisas sobre layout, embora possa ser ainda uma actividade que lhe provoque alguma angustia. Se quiser aprender HTML e CSS do ínicio, deve verificar este tutorial.
Caso contrário, vamos ver se conseguimos poupar alguma angustia no seu próximo projeto.
Clicar nesta imagem para ver tutorial
Ficha prática
Depois de assistires a todo o tutorial, desenvolva uma página web com o mesmo esquema do exemplo apresentada na página 8 do tutorial.
Deverá conter o seguinte layout:
- uma DIV contorno geral (onde irá incluir toda a estrutura do site;
- uma DIV do tipo NAV
- três DIVs do tipo SECTION
- uma DIV do tipo FOOTER, onde ficará sempre fixa no fim da página
