Portalx Training

HTLM Training


Topicos


Cal

VOLTAR









































































































































































































































































































































































O que é HTML?

HTML é a linguagem de marcação padrão para criar páginas da Web.

	HTML significa Hyper Text Markup Language
	HTML descreve a estrutura das páginas da Web usando marcação
	Elementos HTML são os blocos de construção de páginas HTML
	Elementos HTML são representados por tags
	Tags de HTML marcam partes de conteúdo, como "título", "parágrafo", "tabela" e assim por diante
	Os navegadores não exibem as tags HTML, mas as usam para renderizar o conteúdo da página

	Exemplo explicado Tags
	A !DOCTYPE html declaração define este documento como HTML5
	Esta declaração representa o tipo de documento e ajuda os navegadores a exibir páginas da web corretamente.
	Ele deve aparecer apenas uma vez, no topo da página (antes de qualquer tag HTML).

	O html elemento é o elemento raiz de uma página HTML
	O head elemento contém informações meta sobre o documento

	O title elemento especifica um título para o documento d
	Declarado dentro de head - é importante para indexacao em aplicativos de busca

	O body elemento contém o conteúdo da página visível
	O h1 elemento define um cabeçalho grande
	O p elemento define um parágrafo
	- Fonte: www.w3schools.com
         



VOLTAR









































































































































































































































































































































































Como inserir comentarios

	

		Tags de comentário são usadas para inserir comentários no código-fonte HTML.

		Tags de Comentário em HTML
		Você pode adicionar comentários à sua fonte HTML usando a seguinte sintaxe:

		!-- Write your comments here -->
		
		Observe que há um ponto de exclamação (!) Na tag de abertura, mas não na tag de fechamento.

		Nota: Os comentários não são exibidos pelo navegador, mas podem ajudar a documentar seu código-fonte HTML.
        

VOLTAR









































































































































































































































































































































































Head html

 
	O elemento -head> HTML
	O -head>elemento é um contêiner para metadados (dados sobre dados) e é colocado entre a -html>tag e a -body>tag.

	Metadados HTML são dados sobre o documento HTML. Metadados não são exibidos.
	Os metadados geralmente definem o título do documento, conjunto de caracteres, estilos, 
	links, scripts e outras informações meta.
	As seguintes tags descrevem metadados: -title>, -style>, -meta>, -link>, -script>, e -base>.

	O elemento HTML -title>
	O -title>elemento define o título do documento e é obrigatório em todos os documentos HTML / XHTML.
	O -title>elemento:
	define um título na guia do navegador
	fornece um título para a página quando ela é adicionada aos favoritos
	exibe um título para a página nos resultados do mecanismo de pesquisa
	Um documento HTML simples:

	O elemento HTML -style>
	O -style>elemento é usado para definir informações de estilo para uma única página HTML:
	Exemplo
	-style>
  		body {background-color: powderblue;}
  	h1 {color: red;}
  	p {color: blue;}
	-/style>
	
	O elemento HTML -link>
	O -link>elemento é usado para vincular a folhas de estilo externas:
	Exemplo
	-link rel="stylesheet" href="mystyle.css">

	O elemento -meta> HTML
	O -meta>elemento é usado para especificar qual conjunto de caracteres é usado, 
	descrição da página, palavras-chave, autor e outros metadados.
	Os metadados são usados ??pelos navegadores (como exibir conteúdo), 
	pelos mecanismos de pesquisa (palavras-chave) e por outros serviços da Web.
	Defina o conjunto de caracteres usado:
		-meta charset="UTF-8">
	Defina uma descrição da sua página da web:
		-meta name="description" content="Free Web tutorials">
	Defina palavras-chave para os mecanismos de pesquisa:
		-meta name="keywords" content="HTML, CSS, XML, JavaScript">
	Defina o autor de uma página:
		-meta name="author" content="John Doe">
	Atualizar documento a cada 30 segundos:
		-meta http-equiv="refresh" content="30">
	Exemplo de tags:
		-meta charset="UTF-8">
		-meta name="description" content="Free Web tutorials">
		-meta name="keywords" content="HTML,CSS,XML,JavaScript">
		-meta name="author" content="John Doe">
	
		

VOLTAR









































































































































































































































































































































































Atributo de estilo HTML

Use o atributo "style" para estilizar elementos HTML

I am normal

background-color:powderblue - Cor de fundo

Use color para cores de texto

color:blue; -This is a blue paragraph

color:red; -This is a red paragraph.

Use font-family para fontes de texto

font-family:verdana; - This is a verdana.

font-family:courier; - This is a courier.

font-size:200%; - Use font-size para tamanhos de texto -

ou em pixels - font-size:40px; - I am big

text-align:center; - Use text-align para alinhamento de texto

VOLTAR









































































































































































































































































































































































Elementos de formatação



O HTML também define elementos especiais para definir o texto com um significado especial .

O HTML usa elementos como e para formatação de saída, como texto em negrito ou itálico .

Elementos de formatação foram projetados para exibir tipos especiais de texto:

- texto em <b>negrito</b>

- texto <strong>importante</strong>

- texto em <i>itálico</i>

- texto <em>enfatizado</em>

- texto <mark> marcado</mark>

- pequeno <small>texto</small>

- texto <del>excluído</del>

- texto <ins>inserido</ins>

- texto <sub>subscrito</sub>

- texto <sup>sobrescrito</sup>

VOLTAR









































































































































































































































































































































































Outras Formatacoes

A Cotacao curta pelo uso da tag <q> - coloca texto entre aspas

WWF's goal is to: Build a future where people live in harmony with nature.

A tag <abbr> contrai texto substituindo pela abreviacao World Health Organization por exemplo
The WHO was founded in 1948.

A tag <address> destaca texto para detalhar enderecos

Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA


A tag <cite> destaca texto para citacoes - geralmente italico

Como em: 'The Scream' by Edvard Munch. Painted in 1893.


O HTML usa a tag <bdo> para substituição bidirecional

O bdo elemento é usado para substituir a direção do texto atual:

Exemplo: This text will be written from right to left

Ficaria: This text will be written from right to left

VOLTAR









































































































































































































































































































































































CORES

 
						
Valores de cores CSS
Com o CSS, as cores podem ser especificadas de diferentes maneiras:
Por nomes de cores
- Como valores RGB
- Como valores hexadecimais
- Como valores de HSL (CSS3)
- Como valores HWB (CSS4)

Nomes de cores suportados por todos os navegadores
Todos os navegadores modernos suportam os 140 nomes de cores a seguir 
(clique no nome de uma cor ou em um valor hexadecimal para exibir a cor 
como a cor de segundo plano junto com cores de texto diferentes):

Cores RGB
Valores de cores RGB são suportados em todos os navegadores.
Um valor de cor RGB é especificado com: rgb ( RED , GREEN , BLUE ).
Cada parâmetro define a intensidade da cor como um inteiro entre 0 e 255.
Por exemplo, rgb (0,0,255) é renderizado como azul, porque o parâmetro blue 
é definido como seu valor mais alto (255) e os outros são definidos como 0.

Como valores hexadecimais
Cores hexadecimais
Valores de cor hexadecimais também são suportados em todos os navegadores.
Uma cor hexadecimal é especificada com: # RR GG BB .
RR (vermelho), GG (verde) e BB (azul) são inteiros hexadecimais 
entre 00 e FF especificando a intensidade da cor.
Por exemplo, # 0000FF é exibido como azul, porque o componente azul é definido 
como seu valor mais alto (FF) e os outros são definidos como 00.
RnnGnnBnn
nn variam de 00 a 99 e de AA aFF
#FF000
		

Clique aqui para lista de cores


VOLTAR









































































































































































































































































































































































Links HTML - hiperlinks


		

VOLTAR









































































































































































































































































































































































Imagens HTML





	   	
		

VOLTAR









































































































































































































































































































































































Tabela HTML

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Tabela HTML - Adicionando preenchimento de célula
O preenchimento de célula especifica o espaço entre o conteúdo da célula e suas bordas.
Se você não especificar um preenchimento, as células da tabela serão exibidas sem preenchimento.
Para definir o preenchimento,(interfere altura na celula) use a padding propriedade CSS :

		 
		th, td {
			padding: 15px;
		}
		ou na linha table style="width:100%;padding: 15px;"

		alinhados à esquerda
		Por padrão, os títulos das tabelas estão em negrito e centralizados.
		Para alinhar à esquerda os títulos da tabela, use a text-alignpropriedade CSS :
		Exemplo
		th {
		    text-align: left;
		}

		Adicionando Espaçamento de Borda
		Espaçamento de borda especifica o espaço entre as células.
		Para definir o espaçamento de borda para uma tabela, use a border-spacing propriedade CSS :
		Exemplo
		table {
		    border-spacing: 5px;
		}
		Nota: Se a tabela tiver bordas recolhidas, border-spacingnão terá efeito.

		Células que abrangem muitas colunas
		Para fazer uma célula abranger mais de uma coluna, use o colspan atributo:
		Exemplo
		
Name Telephone
Billi Gatos 55577854 55577855
Células que abrangem muitas linhas Para fazer uma célula abranger mais de uma linha, use o rowspan atributo: Exemplo
Name: Billi Gatos
Telephone: 55577854
55577855
Adicionando uma legenda Para adicionar uma legenda a uma tabela, use a tag: Nota: A tag deve ser inserida imediatamente após a tag. Exemplo
Monthly savings
Month Savings
January $100
February $50

Um estilo especial para uma tabela

Para definir um estilo especial para uma tabela especial, adicione um id atributo à tabela:

Exemplo table id="tab"

Agora você pode definir um estilo especial para esta tabela:

table#tab, th, td { border:1px solid black;width:80%;}

Firstname Lastname Age
Eve Jackson 94
Rob Dickson 64

Definindo parametros de tabela em classe ex: .tabtable

Firstname Lastname Age
Guigo Boy 21
Rique Boy 18
Nina Girl 10
		

Tags de tabela HTML


Tag Description
table Defines a table
th Defines a header cell in a table
tr Defines a row in a table
td Defines a cell in a table
caption Defines a table caption
colgroup Specifies a group of one or more columns in a table for formatting
col Specifies column properties for each column within a element
thead Groups the header content in a table
tbody Groups the body content in a table
tfoot Groups the footer content in a table<
			

VOLTAR









































































































































































































































































































































































Listas de HTML



	   	

VOLTAR

Blocks de HTML

>

	
 
		

VOLTAR









































































































































































































































































































































































Usando a classe Atributo

	


		
		

VOLTAR









































































































































































































































































































































































Usando o atributo id

	

		

VOLTAR









































































































































































































































































































































































Iframes HTML

		

		

VOLTAR









































































































































































































































































































































































Prompt Box

	
			'<'head'>'
			
				'<'script type="text/javascript"'>'
					var $Resp=prompt("Digite seu nome","NomeDefault");
					if $Resp !==null && $Resp!="";
					{
						x="Seja Benvindo"+$Resp; 
					}
					else;
					{
						x="Seja Benvindo"+NomeDefault; 
					}
				'<'/scrip'>'
				
			'<'/head'>'		
		
			'<'body'>'
				

'<'/body'>'

VOLTAR









































































































































































































































































































































































Prompt Box

	
			'<'head'>'
			
				'<'script type="text/javascript"'>'
					var $Resp=prompt("Digite seu nome","NomeDefault");
					if $Resp !==null && $Resp!="";
					{
						x="Seja Benvindo"+$Resp; 
					}
					else;
					{
						x="Seja Benvindo"+NomeDefault; 
					}
				'<'/scrip'>'
				
			'<'/head'>'		
		
			'<'body'>'
				

'<'/body'>'

VOLTAR









































































































































































































































































































































































Interacao For

VOLTAR









































































































































































































































































































































































Interacao Do While

VOLTAR









































































































































































































































































































































































Eventos

onclick

onchange

onmousedown

onmouseup

onmouseenter

onmuoseleave

onfocus

onblur

onsubmit

VOLTAR









































































































































































































































































































































































Lista de 140 cores classificadas por HEX Value

VOLTAR

Color Name HEX Color

AliceBlue #F0F8FF

AntiqueWhite #FAEBD7

Aqua #00FFFF

Aquamarine #7FFFD4

Azure #F0FFFF

Beige #F5F5DC

Bisque #FFE4C4

Black #000000

BlanchedAlmond #FFEBCD

Blue #0000FF

BlueViolet #8A2BE2

Brown #A52A2A

BurlyWood #DEB887

CadetBlue #5F9EA0

Chartreuse #7FFF00

Chocolate #D2691E

Coral #FF7F50

CornflowerBlue #6495ED

Cornsilk #FFF8DC

Crimson #DC143C

Cyan #00FFFF

DarkBlue #00008B

DarkCyan #008B8B

DarkGoldenRod #B8860B

DarkGray #A9A9A9

DarkGrey #006400

DarkKhaki #BDB76B

DarkMagenta #8B008B

DarkOliveGreen #556B2F

DarkOrange #FF8C00

DarkOrchid #9932CC

DarkRed #8B0000

DarkSalmon #E9967A

DarkSeaGreen #8FBC8F

DarkSlateBlue #483D8B

DarkSlateGray #2F4F4F

DarkSlateGrey #2F4F4F

DarkTurquoise #00CED1

DarkViolet #9400D3

DeepPink #FF1493

DeepSkyBlue #00BFFF

DimGray #696969

DimGrey #696969

DodgerBlue #1E90FF

FireBrick #B22222

FloralWhite #FFFAF0

ForestGreen #228B22

Fuchsia #FF00FF

Gainsboro #DCDCDC

GhostWhite #F8F8FF

Gold #FFD700

GoldenRod #DAA520

Gray #808080

Grey #808080

Green #008000

GreenYellow #ADFF2F

HoneyDew #F0FFF0

HotPink #FF69B4

IndianRed #CD5C5C

Indigo #4B0082

Ivory #FFFFF0

Khaki #F0E68C

Lavender #E6E6FA

LavenderBlush #FFF0F5

LawnGreen #7CFC00

LemonChiffon #FFFACD

LightBlue #ADD8E6

LightCoral #F08080

LightCyan #E0FFFF

LightGoldenRodYellow #FAFAD2

LightGray #D3D3D3

LightGrey #D3D3D3

LightGreen #90EE90

LightPink #FFB6C1

LightSalmon #FFA07A

LightSeaGreen #20B2AA

LightSkyBlue #87CEFA

LightSlateGray #778899

LightSlateGrey #778899

LightSteelBlue #B0C4DE

LightYellow #FFFFE0

Lime #00FF00

LimeGreen #32CD32

Linen #FAF0E6

Magenta #FF00FF

Maroon #800000

MediumAquaMarine #66CDAA

MediumBlue #0000CD

MediumOrchid #BA55D3

MediumPurple #9370DB

MediumSeaGreen #3CB371

MediumSlateBlue #7B68EE

MediumSpringGreen #00FA9A

MediumTurquoise #48D1CC

MediumVioletRed #C71585

MidnightBlue #191970

MintCream #F5FFFA

MistyRose #FFE4E1

Moccasin #FFE4B5

NavajoWhite #FFDEAD

Navy #000080

OldLace #FDF5E6

Olive #808000

OliveDrab #6B8E23

Orange #FFA500

OrangeRed #FF4500

Orchid #DA70D6

PaleGoldenRod #EEE8AA

PaleGreen #98FB98

PaleTurquoise #AFEEEE

PaleVioletRed #DB7093

PapayaWhip #FFEFD5

PeachPuff #FFDAB9

Peru #CD853F

Pink #FFC0CB

Plum #DDA0DD

PowderBlue #B0E0E6

Purple #800080

RebeccaPurple #663399

Red #FF0000

RosyBrown #BC8F8F

RoyalBlue #4169E1

SaddleBrown #8B4513

Salmon #FA8072

SandyBrown #F4A460

SeaGreen #2E8B57

SeaShell #FFF5EE

Sienna #A0522D

Silver #C0C0C0

SkyBlue #87CEEB

SlateBlue #6A5ACD

SlateGray #708090

SlateGrey #708090

Snow #FFFAFA

SpringGreen #00FF7F

SteelBlue #4682B4

Tan #D2B48C

Teal #008080

Thistle #D8BFD8

Tomato #FF6347

Turquoise #40E0D0

Violet #EE82EE

Wheat #F5DEB3

White #FFFFFF

WhiteSmoke #F5F5F5

Yellow #FFFF00

YellowGreen #9ACD32

VOLTAR