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
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.
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">
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
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>
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.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
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
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 |
Name: | Billi Gatos |
---|---|
Telephone: | 55577854 |
55577855 |
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 aelement
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
VOLTAR >VOLTAR
VOLTAR
VOLTAR
VOLTAR
'<'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
'<'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
VOLTAR
onclick
onchange
onmousedown
onmouseup
onmouseenter
onmuoseleave
onfocus
onblur
onsubmit
VOLTAR
Lista de 140 cores classificadas por HEX Value 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