SlideShare uma empresa Scribd logo
1 de 42
Baixar para ler offline
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.  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
Abrir:	
Notepad	++	ou	Sublime	Text	
Escrever:	
Olá	Mundo!	
Salvar	Como:	
tags.html	
Criar	uma	2ª	linha:	
Com	o	mesmo	texto	
1#	EXERCÍCIO
<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.
Abrir:	
-	Documento	tags.html	
-	Criar	9	linhas	com	o	texto	“Olá	Mundo!”	
	
-		Marcar	cada	texto/linha	com	as	tags	anteriores.	
2#	EXERCÍCIO
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
Abrir:	
-	Documento	.tags.html	
-	Criar	1	romance	com	3	parágrafos!	J	
	
-		Aplicar	as	TAGS:	
	
	-	<p>	e	<pre>	
3#	EXERCÍCIO
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>
Criar:	
-	Documento	headings.html	
-	Escrever	6	vezes	incons%tucionalissimamente!	
	
-  Aplicar	as	6		TAGS	de	cabeçalhos.	
	
	
4#	EXERCÍCIO
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:							-->
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:	
-  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
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>
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>
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>
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
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
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	
?
Create	Tables	
COMPLICANDO	
Através	da	TAG	<th>	(Table	Header)	
Podemos	criar/destacar	os	cabeçalhos	da	
tabela.		
<th>	
CABEÇALHOS
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
Create	Tables	
IMPLICANDO	
Através	do	ATRIBUTO	colspan	
Podemos	fazer	a	fusão	com	colunas	 COLSPAN	
UNINDO	
<td	colspan=“2">FUSÃO!!</td>
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
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.
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
[	VER	EXEMPLO	]	
www.m-voice.org
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...
INDENTAÇÃO	
<!DOCTYPE	html>	
<html>	
	<head>	
	 	<%tle>	Home	</%tle>	
		</head>	
	<body>	
	 	<h1>	Home	</h1>	
	 	<p>	Home	</p>	
	<body>	
<html>
<!DOCTYPE	html>	
<html>	
<head>	
<%tle>	Home	</%tle>	
</head>	
<body>	
<h1>	Home	</h1>	
<p>	Home	</p>	
<body>	
<html>	
INDENTAÇÃO
<!DOCTYPE	html>	
<html>	
	<head>	
	 	<%tle>	Home	</%tle>	
	</head>	
	<body>	
	 	<h1>	Home	</h1>	
	 	<p>	Home	</p>	
	<body>	
<html>	
INDENTAÇÃO
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
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="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">
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
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>
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>
Formatação de Texto com Tags HTML

Mais conteúdo relacionado

Mais procurados (20)

HTML - Introducao
HTML - Introducao HTML - Introducao
HTML - Introducao
 
HTML
HTMLHTML
HTML
 
HTML (A linguagem)
HTML (A linguagem)HTML (A linguagem)
HTML (A linguagem)
 
Aula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTMLAula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTML
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
CSS
CSSCSS
CSS
 
Html e css
Html e cssHtml e css
Html e css
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Html5 - Estrutura Básica
Html5 - Estrutura BásicaHtml5 - Estrutura Básica
Html5 - Estrutura Básica
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
Curso de HTML5 - Aula01
Curso de HTML5 - Aula01Curso de HTML5 - Aula01
Curso de HTML5 - Aula01
 
0151
01510151
0151
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 

Semelhante a Formatação de Texto com Tags HTML

Semelhante a Formatação de Texto com Tags HTML (20)

HTML - Formatação de Textos
HTML - Formatação de TextosHTML - Formatação de Textos
HTML - Formatação de Textos
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Tutorial html
Tutorial htmlTutorial html
Tutorial html
 
Curso html
Curso htmlCurso html
Curso html
 
Aula 2
Aula 2Aula 2
Aula 2
 
Html
HtmlHtml
Html
 
Apostila de Html - Marcos Rogério Fernandes
Apostila de Html - Marcos Rogério FernandesApostila de Html - Marcos Rogério Fernandes
Apostila de Html - Marcos Rogério Fernandes
 
Html - Apostila
Html - ApostilaHtml - Apostila
Html - Apostila
 
Apostila Html completa e simples
Apostila Html completa e simplesApostila Html completa e simples
Apostila Html completa e simples
 
Apostila+de+html
Apostila+de+htmlApostila+de+html
Apostila+de+html
 
Apostila HTML
Apostila HTMLApostila HTML
Apostila HTML
 
Html básico
Html básicoHtml básico
Html básico
 
Manual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfManual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdf
 
O que é html
O que é htmlO que é html
O que é html
 
Html E Css
Html E CssHtml E Css
Html E Css
 
Ficha html e css
Ficha   html e cssFicha   html e css
Ficha html e css
 
Html
HtmlHtml
Html
 
HyperText Markup Language
HyperText Markup LanguageHyperText Markup Language
HyperText Markup Language
 
Html+para+iniciantes
Html+para+iniciantesHtml+para+iniciantes
Html+para+iniciantes
 
Html
HtmlHtml
Html
 

Mais de Jorge Brandão

SOCIAL MEDIA MARKETING
SOCIAL MEDIA MARKETINGSOCIAL MEDIA MARKETING
SOCIAL MEDIA MARKETINGJorge Brandão
 
Landing Pages - Marketing digital
Landing Pages - Marketing digitalLanding Pages - Marketing digital
Landing Pages - Marketing digitalJorge Brandão
 
Search Engine Advertising
Search Engine AdvertisingSearch Engine Advertising
Search Engine AdvertisingJorge Brandão
 
SEO - SEARCH ENGINE OPTIMIZATION
SEO - SEARCH ENGINE OPTIMIZATIONSEO - SEARCH ENGINE OPTIMIZATION
SEO - SEARCH ENGINE OPTIMIZATIONJorge Brandão
 
Ferramentas de Marketing Digital
Ferramentas de Marketing DigitalFerramentas de Marketing Digital
Ferramentas de Marketing DigitalJorge Brandão
 
02 - HMTL/CSS - Curso de Programação
02 - HMTL/CSS - Curso de Programação02 - HMTL/CSS - Curso de Programação
02 - HMTL/CSS - Curso de ProgramaçãoJorge Brandão
 
01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de Programação01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de ProgramaçãoJorge Brandão
 
An Augmented Reality GameBook for Children with Autism Spectrum Disorder (ASD)
An Augmented Reality GameBook for Children with Autism Spectrum Disorder (ASD)An Augmented Reality GameBook for Children with Autism Spectrum Disorder (ASD)
An Augmented Reality GameBook for Children with Autism Spectrum Disorder (ASD)Jorge Brandão
 
CYBERBULLYING : Sempre online para evitar, nunca offline para ignorar
CYBERBULLYING : Sempre online para evitar, nunca offline para ignorarCYBERBULLYING : Sempre online para evitar, nunca offline para ignorar
CYBERBULLYING : Sempre online para evitar, nunca offline para ignorarJorge Brandão
 
Wii aplicada a Alunos com Necessidades Educativas Especiais
Wii aplicada a Alunos com Necessidades Educativas EspeciaisWii aplicada a Alunos com Necessidades Educativas Especiais
Wii aplicada a Alunos com Necessidades Educativas EspeciaisJorge Brandão
 
GAME QUIZ - Quem Quer Ser Informático
GAME QUIZ - Quem Quer Ser InformáticoGAME QUIZ - Quem Quer Ser Informático
GAME QUIZ - Quem Quer Ser InformáticoJorge Brandão
 
Evolução da Internet
Evolução da InternetEvolução da Internet
Evolução da InternetJorge Brandão
 

Mais de Jorge Brandão (17)

MOBILE MARKETING
MOBILE MARKETINGMOBILE MARKETING
MOBILE MARKETING
 
SOCIAL MEDIA MARKETING
SOCIAL MEDIA MARKETINGSOCIAL MEDIA MARKETING
SOCIAL MEDIA MARKETING
 
Landing Pages - Marketing digital
Landing Pages - Marketing digitalLanding Pages - Marketing digital
Landing Pages - Marketing digital
 
E-MAIL MARKETING
E-MAIL MARKETINGE-MAIL MARKETING
E-MAIL MARKETING
 
Search Engine Advertising
Search Engine AdvertisingSearch Engine Advertising
Search Engine Advertising
 
SEO - SEARCH ENGINE OPTIMIZATION
SEO - SEARCH ENGINE OPTIMIZATIONSEO - SEARCH ENGINE OPTIMIZATION
SEO - SEARCH ENGINE OPTIMIZATION
 
Content Marketing
Content MarketingContent Marketing
Content Marketing
 
Ferramentas de Marketing Digital
Ferramentas de Marketing DigitalFerramentas de Marketing Digital
Ferramentas de Marketing Digital
 
02 - HMTL/CSS - Curso de Programação
02 - HMTL/CSS - Curso de Programação02 - HMTL/CSS - Curso de Programação
02 - HMTL/CSS - Curso de Programação
 
01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de Programação01 - HMTL/CSS - Curso de Programação
01 - HMTL/CSS - Curso de Programação
 
An Augmented Reality GameBook for Children with Autism Spectrum Disorder (ASD)
An Augmented Reality GameBook for Children with Autism Spectrum Disorder (ASD)An Augmented Reality GameBook for Children with Autism Spectrum Disorder (ASD)
An Augmented Reality GameBook for Children with Autism Spectrum Disorder (ASD)
 
CYBERBULLYING : Sempre online para evitar, nunca offline para ignorar
CYBERBULLYING : Sempre online para evitar, nunca offline para ignorarCYBERBULLYING : Sempre online para evitar, nunca offline para ignorar
CYBERBULLYING : Sempre online para evitar, nunca offline para ignorar
 
MY VOICE
MY VOICEMY VOICE
MY VOICE
 
Wii aplicada a Alunos com Necessidades Educativas Especiais
Wii aplicada a Alunos com Necessidades Educativas EspeciaisWii aplicada a Alunos com Necessidades Educativas Especiais
Wii aplicada a Alunos com Necessidades Educativas Especiais
 
GAME QUIZ - Quem Quer Ser Informático
GAME QUIZ - Quem Quer Ser InformáticoGAME QUIZ - Quem Quer Ser Informático
GAME QUIZ - Quem Quer Ser Informático
 
Evolução da Internet
Evolução da InternetEvolução da Internet
Evolução da Internet
 
Apresentação final
Apresentação finalApresentação final
Apresentação final
 

Formatação de Texto com Tags HTML