Curso de Formação - Introdução à programação em HTML e CSS - Elementos, Tags, Atributos e Valores

2. TAG INICIAL
TAG FINAL

4. Tags são o conjunto de caracteres que criam uma
marcação associados a um valor/atributo pré-definido
pela linguagem.
1. U%lizamos o sinal de menor ( < )
2. Seguido do nome do elemento
3. E o sinal de maior ( > )
4. U%lizamos o sinal de menor ( < ) + barra ( / ),
5. Nome do elemento
6. E o sinal de maior ( > ).
PARA CRIAR UMA TAG
PARA FECHAR TAG
<b>
</b>
Criar TAG bold
Fechar TAG bold

5. Abrir:
Notepad ++ ou Sublime Text
Escrever:
Olá Mundo!
Salvar Como:
tags.html
Criar uma 2ª linha:
Com o mesmo texto
1# EXERCÍCIO

7. <b> Bold
<i> Italic
<small> Smaller
<strong> Important
<sub> Subscripted
<sup> Superscripted
<ins> Inserted
<del> Deleted
<mark> Highlighted
<hr> Horizontal Rule
Text FormaXng Elements
Vamos ver
como funciona
?
Estas TAGS são usadas para
estruturar gráficamente o texto.

8. Abrir:
- Documento tags.html
- Criar 9 linhas com o texto “Olá Mundo!”
- Marcar cada texto/linha com as tags anteriores.
2# EXERCÍCIO

9. Notas:
- A TAG <br> cria uma quebra de linha.
- A TAG <p> cria um novo paragrafo e deixa
uma margem de intervalo antes de
recomeçar o texto.
Vamos ver
como funciona
?
FormaXng Paragraphs
Estas TAGS são usadas para
estruturar gráficamente o texto.
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formaaed text

10. Abrir:
- Documento .tags.html
- Criar 1 romance com 3 parágrafos! J
- Aplicar as TAGS:
- <p> e <pre>
3# EXERCÍCIO

11. Notas:
- Existem 6 tamanhos dis%ntos ordenados
de forma decrescente do H1 para o H6.
Vamos ver
como funciona
?
FormaXng Headings
Estas TAGS são usadas para atribuir
níveis hieráquicos nas secções dos textos
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

12. Criar:
- Documento headings.html
- Escrever 6 vezes incons%tucionalissimamente!
- Aplicar as 6 TAGS de cabeçalhos.
4# EXERCÍCIO

13. Exemplo:
<!--Isto é um comentário -->
<p> Isto é um parágrafo <p/>
Vamos ver
como funciona
?
Create Comments
Os comentários são de extrema importância
para organizar o código e orientar o programador.
Início: <!--
Fim: -->

14. Criar:
- Documento comments.html
- Escrever 1 poema! J
- Comentar as estrofes…
5# EXERCÍCIO

15. Create Lists
As listas são marcações ideais para ajudar o u%lizador
a iden%ficar a informação que pretende.
Notas:
- Estas TAGS são úteis para organizar dados
em lista e facilitar a leitura da informação.
<ol> - Lista Ordenada
<ul> - Lista não Ordenada
<dl> - Lista de Descrição
3
TIPOS DE LISTAS

16. Create Lists
<ol> - Lista Ordenada
Notas:
- Usar sempre a tag list <li> para criar a respe%va linha
<ol>
<li>Benfica</li>
<li>Porto</li>
<li>Spor%ng</li>
</ol>

17. Create Lists
<ul> - Lista Não Ordenada
Notas:
- Usar sempre a tag list <li> para criar a respe%va linha
<ul>
<li>Benfica</li>
<li>Porto</li>
<li>Spor%ng</li>
</ul>

18. Create Lists
<dl> - Lista de Descrição
Notas:
- Usar sempre a tag list <dt> para criar a 1ª linha
- Usar sempre a tag list <dd> para criar a linha subsequente
<dl>
<dt>SLB</dt>
<dd>- Spor%ng Lisboa e Benfica</dd>
<dt>FCP</dt>
<dd>- Futebol Clube do Porto</dd>
</dl>

19. Criar:
- Documento lists.html
- Criar 1 lista ordenada: <ol>
- Criar 1 lista sem ordenação: <ul>
- Criar 1 Lista com Definição: <dl>
6# EXERCÍCIO
Nota:
Cada lista deve ter pelo menos 3 linhas

21. Create Tables
As tabelas podem ser usadas para expor informações de
forma clara e facilmente organizada por linhas e colunas.
<table> - TAG para criar tabela
<tr> - TAG para criar coluna (Row)
<td> - TAG para criar células (Date)
3
TAGS IMPORTANTES
SIMPLIFICANDO

22. Create Tables
EXEMPLIFICANDO
<table border="1">
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
Vamos ver
como funciona
?

23. Create Tables
COMPLICANDO
Através da TAG <th> (Table Header)
Podemos criar/destacar os cabeçalhos da
tabela.
<th>
CABEÇALHOS

24. EXEMPLIFICANDO
<table border="1">
<tr>
<th>CABEÇALHO 1</th>
<th>CABEÇALHO 2</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
CABEÇALHO 11 CABEÇALHO 21

25. Create Tables
IMPLICANDO
Através do ATRIBUTO colspan
Podemos fazer a fusão com colunas COLSPAN
UNINDO
<td colspan=“2">FUSÃO!!</td>

26. EXEMPLIFICANDO
<table border="1">
<tr>
<th>Row 1 Cell 1</td>
<th>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td colspan="2">FUSÃO!</td>
</tr>
</table>
Row 1 Cell 1 Row 1 Cell 2
FUSÃO!
CABEÇALHO 11 CABEÇALHO 21

27. A EXPLORAR…
<colspan> Fusão de colunas
<capXon> Legenda da tabela
<colgroup> - Estas TAGS permitem agrupar colunas.
<thead> <tbody> <moot> - Com estes elementos podemos agrupar linhas
de tabelas num cabeçalho, num rodapé e numa ou mais secções do corpo da
tabela.

28. Criar:
- Criar um novo documento index.html
de acordo com a seguinte estrutura:
[ VER AQUI]
- Enviar para:
j.almeidabrandao@gmail.com
7# EXERCÍCIO
Notas:
Atenção à indentação
Atenção à estrutura Head e Body

30. [ VER EXEMPLO ]
www.m-voice.org

31. HTML Layout
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<body>
<html>
Informa o browser da versão
HTML u%lizada na página.
ABRIR TAG HTML
FECHAR TAG HTML
Inclui informações importantes
sobre a página, ztulo, descrição,
keywords e autor
Inclui o conteúdo da página, desde
Títulos, parágrafos, tabelas, listas,
Imagens, entre outros...

32. INDENTAÇÃO
<!DOCTYPE html>
<html>
<head>
<%tle> Home </%tle>
</head>
<body>
<h1> Home </h1>
<p> Home </p>
<body>
<html>

33. <!DOCTYPE html>
<html>
<head>
<%tle> Home </%tle>
</head>
<body>
<h1> Home </h1>
<p> Home </p>
<body>
<html>
INDENTAÇÃO

35. <!DOCTYPE html>
<html>
<head>
<%tle> Home </%tle>
</head>
<body>
<h1> Home </h1>
<p> Home </p>
<body>
<html>
INDENTAÇÃO

36. Criar:
- Criar documento index.html com a seguinte estrutura
8# EXERCÍCIO
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Nota: Atenção à indentação

37. HTML Layout
<head>
</head>
<header>
<Xtle> Página Pessoal </Xtle>
<!DOCTYPE html>

38. HTML Layout
<head>
</head>
FECHAR TAG HTML
<header>
<%tle> Página Pessoal </%tle>
<meta charset="UTF-8">
<meta name="descrip%on" content="Página pessoal de J. Brandão">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Jorge Brandão">

39. Criar:
- Criar documento index.html com a seguinte estrutura
8# EXERCÍCIO
<!DOCTYPE html>
<html>
<head>
<%tle> Página Pessoal </%tle>
<meta charset="UTF-8">
<meta name="descrip%on" content="Página Pessoal ">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="Jorge Brandão”>
</head>
<body>
</body>
</html>
Nota: Atenção à indentação

40. Creat HTML Tags
Tal como referido, anteriormente, existem algumas TAGS
que têm obrigatóriamente de ser fechadas
ao contrário de outras, exemplos;
TAGS COM ENCERRAMENTO:
<h1> texto </h1>
<p> texto </p>
<div> texto </div>
TAGS SEM ENCERRAMENTO
<br>
<hr>

41. Creat HTML Blocks
Todos os ELEMENTOS HTML estão apresentados, por defeito, sob
2 formas, em linha ou em bloco, sejam eles cabeçalhos <h1>
parágrafos <p>, entre outos…
ELEMENTOS APRESENTADOS
EM BLOCO:
<h1> texto </h1>
<p> texto </p>
<div> texto </div>
ELEMENTOS APRESENTADOS
EM LINHA:
<b>
<i>
<ul>