TAG	INICIAL	
TAG	FINAL
Tags	são	o	conjunto	de	caracteres	que	criam	uma	
marcação	associados	a	um	valor/atributo	pré-definido	
pela	linguagem.	
	
1...
Abrir:	
Notepad	++	ou	Sublime	Text	
Escrever:	
Olá	Mundo!	
Salvar	Como:	
tags.html	
Criar	uma	2ª	linha:	
Com	o	mesmo	texto...
<b>	 	 	 	Bold	
<i>		 	 	 	Italic	
<small> 	 	 	Smaller	
<strong> 	 	Important	
<sub> 	 	 	Subscripted	
<sup> 	 	 	Supersc...
Abrir:	
-	Documento	tags.html	
-	Criar	9	linhas	com	o	texto	“Olá	Mundo!”	
	
-		Marcar	cada	texto/linha	com	as	tags	anterio...
Notas:	
-  A	TAG	<br>	cria	uma	quebra	de	linha.	
-  A	TAG	<p>	cria	um	novo	paragrafo	e	deixa	
uma	margem	de	intervalo	ante...
Abrir:	
-	Documento	.tags.html	
-	Criar	1	romance	com	3	parágrafos!	J	
	
-		Aplicar	as	TAGS:	
	
	-	<p>	e	<pre>	
3#	EXERCÍC...
Notas:	
-  Existem	6		tamanhos	dis%ntos	ordenados	
de	forma	decrescente	do	H1	para	o	H6.	
Vamos	ver	
como	funciona	
?	
For...
Criar:	
-	Documento	headings.html	
-	Escrever	6	vezes	incons%tucionalissimamente!	
	
-  Aplicar	as	6		TAGS	de	cabeçalhos.	...
Exemplo:	
<!--Isto	é	um	comentário	-->	
<p>	Isto	é	um	parágrafo	<p/>	
	
Vamos	ver	
como	funciona	
?	
Create	Comments	
Os	c...
Criar:	
-	Documento	comments.html	
-	Escrever	1	poema!	J	
	
-  Comentar	as	estrofes…	
	
	
5#	EXERCÍCIO
Create	Lists	
As	listas	são	marcações	ideais	para	ajudar	o	u%lizador	
a	iden%ficar	a	informação	que	pretende.	
	
Notas:	
- ...
Create	Lists	
<ol>	-	Lista	Ordenada	
	
Notas:	
-  Usar	sempre	a	tag	list	<li>	para	criar	a	respe%va	linha	
<ol>	
		<li>Ben...
Create	Lists	
<ul>	-	Lista	Não	Ordenada	
	
Notas:	
-  Usar	sempre	a	tag	list	<li>	para	criar	a	respe%va	linha	
<ul>	
		<li...
Create	Lists	
<dl>	-	Lista	de	Descrição	
	
Notas:	
-  Usar	sempre	a	tag	list	<dt>	para	criar	a	1ª	linha	
-  Usar	sempre	a	...
Criar:	
-	Documento	lists.html	
-	Criar	1	lista	ordenada:	<ol>	
	
-	Criar	1	lista	sem	ordenação:	<ul>	
-	Criar	1	Lista	com...
Create	Tables	
As	tabelas	podem	ser	usadas	para	expor	informações	de	
forma	clara	e	facilmente	organizada	por	linhas	e	col...
Create	Tables	
EXEMPLIFICANDO	
<table	border="1">	
	<tr>	
	 	<td>Row	1	Cell	1</td>	
	 	<td>Row	1	Cell	2</td>	
	</tr>	
	<tr...
Create	Tables	
COMPLICANDO	
Através	da	TAG	<th>	(Table	Header)	
Podemos	criar/destacar	os	cabeçalhos	da	
tabela.		
<th>	
C...
EXEMPLIFICANDO	
<table	border="1">	
	<tr>	
	 	<th>CABEÇALHO	1</th>	
	 	<th>CABEÇALHO	2</th>	
	</tr>	
	<tr>	
	 	<td>Row	1	C...
Create	Tables	
IMPLICANDO	
Através	do	ATRIBUTO	colspan	
Podemos	fazer	a	fusão	com	colunas	 COLSPAN	
UNINDO	
<td	colspan=“2...
EXEMPLIFICANDO	
<table	border="1">	
	<tr>	
	 	<th>Row	1	Cell	1</td>	
	 	<th>Row	1	Cell	2</td>	
	</tr>	
	<tr>	
	 	<td>Row	1...
A	EXPLORAR…	
<colspan> 	Fusão	de	colunas	
<capXon> 	Legenda	da	tabela	
	
<colgroup>	-	Estas	TAGS	permitem	agrupar	colunas....
Criar:	
-  Criar	um	novo	documento	index.html	
de	acordo	com	a	seguinte	estrutura:	
	
[	VER	AQUI]	
	
	
-  Enviar	para:	
j....
[	VER	EXEMPLO	]	
www.m-voice.org
HTML	Layout	
<!DOCTYPE	html>	
<html>	
	<head>	
	
		</head>	
	<body>	
	 		
	
	<body>	
<html>	
Informa	o	browser	da	versão	
...
INDENTAÇÃO	
<!DOCTYPE	html>	
<html>	
	<head>	
	 	<%tle>	Home	</%tle>	
		</head>	
	<body>	
	 	<h1>	Home	</h1>	
	 	<p>	Home	...
<!DOCTYPE	html>	
<html>	
<head>	
<%tle>	Home	</%tle>	
</head>	
<body>	
<h1>	Home	</h1>	
<p>	Home	</p>	
<body>	
<html>	
IND...
<!DOCTYPE	html>	
<html>	
	<head>	
	 	<%tle>	Home	</%tle>	
	</head>	
	<body>	
	 	<h1>	Home	</h1>	
	 	<p>	Home	</p>	
	<body>...
Criar:	
-	Criar	documento	index.html	com	a	seguinte	estrutura	
	
	
8#	EXERCÍCIO	
<!DOCTYPE	html>	
<html>	
	<head>	
	
		</h...
HTML	Layout	
<head>	
	
	
	
	
	
	
	</head>	
<header>	
<Xtle>	Página	Pessoal	</Xtle>			
<!DOCTYPE	html>
HTML	Layout	
<head>	
	
	
	
	
	
	
	
	</head>	
FECHAR	TAG	HTML	
<header>	
	
<%tle>	Página	Pessoal	</%tle>	
	
<meta	charset="...
Criar:	
-	Criar	documento	index.html	com	a	seguinte	estrutura	
	
	
8#	EXERCÍCIO	
<!DOCTYPE	html>	
<html>	
	<head>	
	 	<%tl...
Creat	HTML	Tags	
Tal	como	referido,	anteriormente,	existem	algumas	TAGS	
que	têm	obrigatóriamente	de	ser	fechadas	
ao	cont...
Creat	HTML	Blocks	
Todos	os	ELEMENTOS	HTML	estão	apresentados,	por	defeito,	sob	
2	formas,	em	linha	ou	em	bloco,	sejam	ele...
03 - HMTL/CSS - Curso de Programação
03 - HMTL/CSS - Curso de Programação
03 - HMTL/CSS - Curso de Programação
03 - HMTL/CSS - Curso de Programação
03 - HMTL/CSS - Curso de Programação
03 - HMTL/CSS - Curso de Programação
03 - HMTL/CSS - Curso de Programação
Próximos SlideShares
Carregando em…5
×

03 - HMTL/CSS - Curso de Programação

232 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
232
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
9
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

03 - HMTL/CSS - Curso de Programação

  1. 1. TAG INICIAL TAG FINAL
  2. 2. 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
  3. 3. Abrir: Notepad ++ ou Sublime Text Escrever: Olá Mundo! Salvar Como: tags.html Criar uma 2ª linha: Com o mesmo texto 1# EXERCÍCIO
  4. 4. <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.
  5. 5. Abrir: - Documento tags.html - Criar 9 linhas com o texto “Olá Mundo!” - Marcar cada texto/linha com as tags anteriores. 2# EXERCÍCIO
  6. 6. 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
  7. 7. Abrir: - Documento .tags.html - Criar 1 romance com 3 parágrafos! J - Aplicar as TAGS: - <p> e <pre> 3# EXERCÍCIO
  8. 8. 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>
  9. 9. Criar: - Documento headings.html - Escrever 6 vezes incons%tucionalissimamente! -  Aplicar as 6 TAGS de cabeçalhos. 4# EXERCÍCIO
  10. 10. 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: -->
  11. 11. Criar: - Documento comments.html - Escrever 1 poema! J -  Comentar as estrofes… 5# EXERCÍCIO
  12. 12. 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
  13. 13. 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>
  14. 14. 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>
  15. 15. 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>
  16. 16. 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
  17. 17. 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
  18. 18. 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 ?
  19. 19. Create Tables COMPLICANDO Através da TAG <th> (Table Header) Podemos criar/destacar os cabeçalhos da tabela. <th> CABEÇALHOS
  20. 20. 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
  21. 21. Create Tables IMPLICANDO Através do ATRIBUTO colspan Podemos fazer a fusão com colunas COLSPAN UNINDO <td colspan=“2">FUSÃO!!</td>
  22. 22. 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
  23. 23. 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.
  24. 24. 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
  25. 25. [ VER EXEMPLO ] www.m-voice.org
  26. 26. 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...
  27. 27. INDENTAÇÃO <!DOCTYPE html> <html> <head> <%tle> Home </%tle> </head> <body> <h1> Home </h1> <p> Home </p> <body> <html>
  28. 28. <!DOCTYPE html> <html> <head> <%tle> Home </%tle> </head> <body> <h1> Home </h1> <p> Home </p> <body> <html> INDENTAÇÃO
  29. 29. <!DOCTYPE html> <html> <head> <%tle> Home </%tle> </head> <body> <h1> Home </h1> <p> Home </p> <body> <html> INDENTAÇÃO
  30. 30. 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
  31. 31. HTML Layout <head> </head> <header> <Xtle> Página Pessoal </Xtle> <!DOCTYPE html>
  32. 32. 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">
  33. 33. 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
  34. 34. 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>
  35. 35. 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>

×