Icones: OFF: http://www.merrypic.com/files/jlvjequcwpg0s8lzcljr.ico http://www.iconj.com/ico/8/g/8gulktd3sd.ico OFF: http://www.imageboo.com/files/7jrisja3pe8b18nbdcsj.ico Circuito Rede Cerebral: Curso Básico de HTML
sexta-feira, 8 de janeiro de 2010

Curso Básico de HTML


Este curso de HTML (HyperText Markup Language - Linguagem de Marcação para Hipertextos) é simples, porém possui uma boa base de pesquisa nos melhores sites e apostilados da Web (Nada foi transcrito, sintetizado ou resumido. Esta é uma montagem e de minha autoria, qualquer paridade é mera semelhança.). Caso haja dúvidas, comente-a no fim desta postagem.

╔► Índice

╠╦═► Estrutura Básica
║╠════► Conseitos Básicos
║╚════► Estrutura


╠╦═► Cabeça
║╠════► Título
║╠════► Introdução CSS
║╚════► Metas


╠╦═► Corpo
║╠════► Fonte
║╠════► Imagens
║╠════► Tabelas
║╠════► Links
║╠════► Listas
║╠════► Alinhamentos
║╠════► Bordas
║╚════► Outros Códigos HTML


╚► Caixa de Testes



Estrutura Básica

Conseitos Básicos [Índice]
O HTML trabalha com tags < >;. São elas que organizam a estrutura de uma webpage [página da teia]. Dentro de cada tag tem um comando.
3 exemplos de tag:

<a href="URL"> - Esta é uma tag de link (início do link) com comando de abrir uma URL [Uniform Resource Locator - Localizador de Recursos Universal] que está entre aspas.

</a> - Esta é uma tag que limita a seleção do link (fim do link).
 
<img src="URL" /> - Esta é uma tag de imagem. Ela não depende de uma tag de limitação, por isso possui uma barra [/] dentro da tag após os códigos de comando.

Teste Prático:
Obs.: Caso queira seguir fazendo os "Testes Práticos" utilize o Note Pad [Bloco de Notas - Baixar]. Crie uma Nova Pasta [Clique com o botão direito do Mouse (rato cursor) e clique em Nova Pasta], dê-a um nome e salve os testes como HTML: Teste.html

Código:
<a href="http://redecerebral.blogspot.com/2010/01/curso-basico-de-html.html"><img src="http://img256.imageshack.us/img256/663/banner01estatico.png" /></a>

Amostra:



Estrutura [Índice]

A Estrutura é básica e padrão em qualquer parte do mundo. Veja a seguir a Estrutura Básica:

<html>
<head>
<title>(aqui vai o título da página)</title>
</head>

<body>
(aqui vai o conteúdo da página)
</body>
</html>




Cabeça


Título[Índice]

As tags de título ficam entre as tags de cabeçalho como podemos ver logo abaixo:

<head>
<title>(aqui vai o título da página)</title>
</head>

O título pode ser estático [sem movimento] ou dinâmico [com movimento].

Estático:

<title>Teste de Título</title>

Dinâmico:

O título dinâmico não é formado apenas por HTML. Nele temos um complemento em JavaScript para dar a animação.

<head>
<title>Teste de Título</title>
<script language='JavaScript'>
var txt="Teste de Título";
var espera=90;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</script>


Obs.: No Script acima, o valor de "var espera=90;" controla a velocidade do título em movimento.


Introdução CSS [Índice]

O CSS [Cascading Style Sheet - Folha de Estilo em Cascata] foi um criado para complementar o HTML servindo de configurador de estilos conhecido como Layout. Os códigos do CSS sempre estão entre as tags <style></style> com formação de conjuntos { (código CSS) }. Mas também pode ser inserida em outras tags no formato style="(Código CSS)". Veja alguns códigos CSS:

font-color : (valor para cor da fonte); - A cor pode ser dada em Hexadecimal, RGB ou o próprio nome da cor em inglê - Tabela de Cores

color : (valor para cor da font); - Esse também estiliza a cor da fonte

font-size : (valor para tamanho da fonte); - O tamanho pode ser dado em Pixel (px), Herdar da Fonte (em) e Porcentágem (%), dentre outros

font-family : (nomes de estilos de letra); - A família da fonte nada mais é que o estilo. Pode ser usado mais de uma fonte e para dar preferência a alguma, utilize aspas ( " " ) e separadas por vírgula ( , )
border : (largura, estilo e cor da borda); - Pode ser usada em palavras e imagens
margin : (valor de magem); - É usado para dar margem em textos e imagens
padding : (valor de espaçamento); - É usado para dar espaçamento de um texto para outro ou imagens
text-align : (tipo de alinhamento); - É usado para centralizar, alinha à esquerda ou à direita, no topo ou na base da página os textos ou imagens
width : (valor para a largura); - É usado para aplicar uma largura a textos e imagens
height : (valor para a altura); - É usado para aplicar uma altura a textos e imagens.
Obs.: Todos os valores pedem ser dados em pixel (px), herança (em), porcentagem (%), dentre outros. Já as cores podem ser dadas em hexadecimal (HEX), red green bleu (RGB) ou pelo próprio nome em inglês. Curso Básico de CSS (em construção)

Geralmente todo o CSS de uma página fica localizado em apena um local, na cabeça. Veja a estrutura a seguir:


<html>
<head>
<title>(aqui vai o título da página)</title>

<style>(aqui vai o CSS da página)</style>
</head>
<body>
(aqui vai o conteúdo da página)
</body>
</html>

Mas ele pode ficar em qualquer lugar da página, antes ou depois do HTML que configurará.

Veja alguns 2 exemplos de aplicações do CSS em HTML:

Codigo 1:
<img src="http://img256.imageshack.us/img256/663/banner01estatico.png" style="border : 5px solid rgb(0, 0, 0);" />
<font style="color : #FF0000; margin : 5px; padding : 5px; border : 2px solid #000000;"> Teste de CSS </font>

Amostra 1:


Teste de CSS


Codigo 2:
<style>
#imagem1 {
text-align : center;
border : 5px solid #000000;
}
.estilo1 {
font-color : #FF0000;
margin : 5px;
padding : 5px;
border : 2px solid #000000;
}
</style>

<img src="http://img256.imageshack.us/img256/663/banner01estatico.png" id="imagem1" />
<font class="estilo1"> Teste de CSS </font>

Amostra 2:



Teste de CSS

Note que no segundo exemplo foram usados comandos HTML de identidade [id=""] e classe [class=""] com um CSS condizente. Assim você memo pode criar suas identidades e classes independente do idioma. Porém se faz necessário o uso da tag HTML id="(...)" ou class="(...)".


Metas [Índice]

As Metas carregam informações sobre um site ou blog.

<META NAME="DESCRIPTION" CONTENT="(Coloque aqui um descrição de no máximo 50 caracteres [cada letra, número, espaço ou síbolo é considerado carácter])"/>

<META NAME="ABSTRACT" CONTENT="(Coloque aqui uma sintese de no máximo 70 caracteres)"/>

<META NAME="KEYWORDS" CONTENT="(Coloque aqui palavas-chave de no máximo 255 caracteres)"/>

<META NAME="RATING" CONTENT="(Coloque aqui uma censura ["generator" (benéfico a todos); "14 years" (14 anos ou mais); "mature" (adulto); "restricted" (todas as idades);])"/>

<META NAME="DISTRIBUTION" CONTENT="(Coloque aqui o uso da página ["global" (mundo todo); "local" (intra país); "IU" (uso interno)])"/>

<META NAME="LANGUAGE" CONTENT="(Coloque aqui a linguagem predominante [use a siga da linguagem ou do país])"/>

Metas de Transição
Elas são usadas para dar efeitos de transição de uma página para outra.

Page-Enter [Ao Entrar na Página]
<meta content="revealTrans(Duration=0.0,Transition=0)" http-equiv="Page-Enter" />

Page-Exit [Ao Sair da Página]
<meta content="revealTrans(Duration=0.0,Transition=0)" http-equiv="Page-Exit"/>

Em Duration você define a duração da Transição sempre dada em s.d [décimos de segundo].
Em Transition você define o tipo de Transição que varia de 0 a 23.

0 - Fechamento da página atual para a outra
1 - Abertura da página seguinte sobre a atual
2 - Fechamento em círculo
3 - Abertura em círculo
4 - Revelação para cima
5 - Revelação para baixo
6 - Revelação para a direita
7 - Revelação para a esquerda
8 - Persiana vertical
9 - Persiana Horizontal
10 - Quadriculado na horizontal
11 - Quadriculado na vertical
12 - Dissolução
13 - Fechamento em corte Vertical
14 - Abertura em corte Vertical
15 - Fechamento em corte horizontal
16 - Abertura em corte horizontal
17 - Revelação na diagonal da esquerda para baixo
18 - Revelação na diagonal da esquerda para cima
19 - Revelação na diagonal da direita para baixo
20 - Revelação na diagonal da direita para cima
21 - Barras horizontais aleatórias
22 - Barras verticais aleatórias
23 - Aleatório




Corpo 

Fonte [Índice]

A Formatação de um texto em uma webpage [página-da-teia] é muito simples. Não estarei entrando em codificações por CSS, pois este curso refere-se ao HTML.

Cor da Fonte
O código usado para dar cor a fonte é:
<font color="(...)"> Texto </font>
(...) » refere-se à cor que pode ser inserida de 3 [três] maneiras: Nome da cor em Inglês, Código Hexadecimal ou Código RGB.

Exemplos:
<font color="red"> TEXTO </font> TEXTO
<font color="#FF0000"> TEXTO </font> TEXTO
<font color="rgb(255, 0, 0)"> TEXTO </font> TEXTO

Independente do código para a cor o resultado será o mesmo. Tabela de Cores

Estilo da Fonte
O estilo da fonte pode ser definido em 4 modalidades:
Negrito » usa-se a tag <b>Negrito</b>
Itálico » usa-se a tag <i>Itálico</i>
Sublinhado » usa-se a tag <u>Sublinhado</u>
Tajado » usa-se a tag <strike>Tajado</strike>


Tema da Fonte
O tema da fonte também é conhecido como face ou família da fonte. Seu código consiste em aplicar o tema de acordo com a fonte requisitada pelo O.S. [Operating System - Sistema Operacional]. Caso não exista a fonte dos código, o próprio sistema formata com uma fonte básica - essa fonte depende do tipo de navagador, tanto pode ser Times New Roman, quanto Arial ou Sans.

Exemplos:
Times New Roman » usa-se a tag <font face="Times New Roman">Tema de Fonte 1</font>
Arial » usa-se a tag <font face="Arial">Tema de Fonte 2</font>
Sans » usa-se a tag <font face="Sans-serif">Tema de Fonte 3</font>
Verdana » usa-se a tag <font face="Verdana">Tema de Fonte 4</font>

Tamanho da Fonte
O tamanho da fonte pode ser definido por tags de heading [título] ou na tag de font [fonte] como size [tamanho].

Exemplos:
Usando heading [título]

Código 1: <h1>Heading</h1>
Amostra 1: Heading

Código 2: <h2>Heading</h2>
Amostra 2: Heading

Código 3: <h3>Heading</h3>
Amostra 3: Heading

Código 4: <h4>Heading</h4>
Amostra 4: Heading

Código 5: <h5>Heading</h5>
Amostra 5: Heading

Código 6: <h6>Heading</h6>
Amostra 6: Heading

Usando font size [tamanho da fonte]

Código: <font size="5">Tamanho da Fonte</font>
Amostra: Tamanho da Fonte

Obs.: A parte em verde pode ser alterada. Veja os temanhos que poderá obter:

1x
2x
3x
4x
5x
6x
7x


Imagens [Índice]

O código para imagem é muito simples:
<img src="(...)" />

Obs.: Observe que não há uma tag de limitação da imagem, pois a imagem é solida diferente de um texto onde você deve limitar as letras que receberão a formatação adequada.

Exemplo:
Código: <img src="http://img256.imageshack.us/img256/663/banner01estatico.png" />
Amostra:

É possível também redimensionar o tamanho da imagem. Geralmente isso é feito com valores em porcentagem ou pixels.

Exemplo:
Código: <img src="http://img256.imageshack.us/img256/663/banner01estatico.png" width="90%" height="90%" />
Amostra:

Código: <img src="http://img256.imageshack.us/img256/663/banner01estatico.png" width="150px" height="150px />
Amostra:

Veja aqui como inserir borda a imagem.


Tabelas [Índice]


O código para Tabela consiste em Linhas [tr] por Colunas [td]. Veja um exemplo de tabela:

Tabela 1: 1 linha por 3 colunas

Código [estilo didático]:
<table>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
</table>

Amostra:

(...)
(...)
(...)

Tabela 2: 3 linha por 1 colunas

Código [estilo didático]:
<table>
<tr>
<td>(...)</td>
</tr>
<tr>
<td>(...)</td>
</tr>
<tr>
<td>(...)</td>
</tr>
</table>

Amostra:

(...)
(...)
(...)

Tabela 3: 3 linha por 3 colunas

Código [estilo didático]:
<table>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
</table>

Amostra:

(...)
(...)
(...)
(...)
(...)
(...)
(...)
(...)
(...)

Obs.: No modelo prático de código para o Blog deve ser <table><tr><td>(...)</td><td>(...)</td><td>(...)</td></tr><tr><td>(...)</td><td>(...)</td><td>(...)</td></tr><tr><td>(...)</td><td>(...)</td><td>(...)</td></tr></table>. Isso vale para todos.

Bordas Básico [Avançado]

Usando o código border="(...)" [define a borda da tabela]
Tabela 3: 3 linha por 3 colunas

Código [estilo didático]:
<table border="5">
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
</table>

Amostra:

(...)
(...)
(...)
(...)
(...)
(...)
(...)
(...)
(...)

Usando o código cellspacing="(...)" [define a largura da borda]
Tabela 3: 3 linha por 3 colunas

Código [estilo didático]:
<table border="5" cellspacing="5">
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
</table>

Amostra:

(...)
(...)
(...)
(...)
(...)
(...)
(...)
(...)
(...)

Usando o código cellpadding="(...)" [define o espaço entre a borda e o conteúdo]
Tabela 3: 3 linha por 3 colunas

Código [estilo didático]:
<table border="5" bcellpadding="5">
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
</table>

Amostra:

(...)
(...)
(...)
(...)
(...)
(...)
(...)
(...)
(...)


Links [Índice]

Esta é a tag para Link:
<a href="URL">(...)</a>

Exemplos:
Código: <a href="http://redecerebral.blogspot.com/">Circuito Rede Cerebral</a>
Amostra: Circuito Rede Cerebral

Porém o URL pode ser substituido por:
E-mail
Código: <a href="mailto:redecerebral@yahoo.com.br">E-mail Rede Cerebral</a>
Amostra: E-mail Rede Cerebral

Identificação
Código:
Link: <a href="#id1">Identificação</a>
Palavra a ser identificada: <font id="id1">Identificação</font>
Amostra:
Identificação
Identificação

Imagens
Código:
<a href="http://redecerebral.blogspot.com/"><img src="http://img256.imageshack.us/img256/663/banner01estatico.png"/></a>

Amostra:


Você poderá também acrescentar ao código do link um Título. Assim, ao passar o cursor do mouse sobre a palavra "linkada", aparecerá o título em questão.

Exemplo:

Código: <a href="http://redecerebral.blogspot.com/" title="Meu Blog">Circuito Rede Cerebral</a>
Amostra: Circuito Rede Cerebral

Outro código que pode ser inserido é o target="_(...)"

_Self [Abre o link na mesma Janela/Aba]
Código: <a href="http://redecerebral.blogspot.com/" target="_self" title="Meu Blog">Circuito Rede Cerebral</a>
Amostra: Circuito Rede Cerebral

_Blank [Abre o link em uma nova Janela/Aba]
Código: <a href="http://redecerebral.blogspot.com/" target="_blank" title="Meu Blog">Circuito Rede Cerebral</a>
Amostra: Circuito Rede Cerebral

_Top [Abre o link com posicionamento no Topo de uma nova Janela/Aba]
Código: <a href="http://redecerebral.blogspot.com/" target="_top" title="Meu Blog">Circuito Rede Cerebral</a>
Amostra: Circuito Rede Cerebral

_Parent [Remove o frameset atual e carrega o link em seu lugar]
Código: <a href="http://redecerebral.blogspot.com/" target="_parent" title="Meu Blog">Circuito Rede Cerebral</a>
Amostra: Circuito Rede Cerebral

A formatação do link não é feita por HTML. Clique AQUI para ver mais sobre formatação de links em CSS.


Listas [Índice]

Listas de Glossário
A tag <DL> define o inicio da lista, <DT> indica uma palavra a ser traduzida, <DD> indica a definição da palavras e </DL> encerra a lista.

Código:
<DL>
<DT>Palavra
<DD>Significado da Palavra
<DT>Palavra
<DD>Significado da Palavra
</DL>

Amostra:
Palavra
Significado da Palavra
Palavra
Significado da Palavra

Listas não Numeradas

Disco
Código:
<ul type="disc">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ul>

Amostra:
  • Texto
  • Texto
  • Texto

Quadrado
Código:
<ul type="square">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ul>

Amostra:
  • Texto
  • Texto
  • Texto

Círculo
Código:
<ul type="circle">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ul>

Amostra:
  • Texto
  • Texto
  • Texto

Figuras
Código:
<ul imagesrc="(URL da Imagem)">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ul>

Amostra:
Texto
Texto
Texto

Listas Numeradas

Números
Código:
<ol>
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>

Amostra:
  1. Texto
  2. Texto
  3. Texto

Números Romanos Maiúsculos
Código:
<ol type="I">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>

Amostra:
  1. Texto
  2. Texto
  3. Texto

Números Romanos Minúsculos
Código:
<ol type="i">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>

Amostra:
  1. Texto
  2. Texto
  3. Texto

Letras Maiúsculas
Código:
<ol type="A">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>

Amostra:
  1. Texto
  2. Texto
  3. Texto

Letras Minúsculas
Código:
<ol type="a">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>

Amostra:
  1. Texto
  2. Texto
  3. Texto

Para começar a numerar a partir de outro número.

Números
Código:
<ol start="7">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>

Amostra:
  1. Texto
  2. Texto
  3. Texto

Números Romanos e Letras
Código:
<ol type="A">
<li value="9">Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>

Amostra:
  1. Texto
  2. Texto
  3. Texto

Obs.: Para Números Romanos e Letras use um valor que corresponda a posição do numerador.

Value
Type Romano
Type Letra
1
I i
A a
2
II ii
B b
3
III iii
C c
4
IV iv
D d
5
V v
E e
6
VI vi
F f
7
VII vii
G g
8
VIII viii
H h
9
IX ix
I i
10
X x
J j


Alinhamentos [Índice]

Existem 4 formas de alinhamento que podem ser aplicadas em textos, imagens e tabelas. Porém, dependendo da forma de uso, terá que utilizar tags complemantáres como <div style="text-align:(...)";> ou simplesmente o próprio código HTML de parágrafo <p align="(...)">.


Alinhamento à Esquerda
Código:
<div style="text-align: left;">
Texto Texto Texto
Texto Texto
Texto Texto Texto
Texto Texto
Texto Texto Texto
</div>

<p align="left">
Texto Texto Texto
Texto Texto
Texto Texto Texto
Texto Texto
Texto Texto Texto
</p>

Amostra:

Texto Texto Texto
Texto Texto
Texto Texto Texto
Texto Texto
Texto Texto Texto

Alinhamento Justificado
Código:
<div style="text-align: justify;">
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
</div>

<p align="justify">
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
</p>

Amostra:
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto

Alinhamento Centralizado
Código:
<div style="text-align: center;">
Texto Texto Texto
Texto Texto
Texto Texto Texto
Texto Texto
Texto Texto Texto
</div>

<p align="center">
Texto Texto Texto
Texto Texto
Texto Texto Texto
Texto Texto
Texto Texto Texto
</p>

Amostra:

Texto Texto Texto
Texto Texto
Texto Texto Texto
Texto Texto
Texto Texto Texto

Alinhamento à Direita
Código:
<div style="text-align: right;">
Texto Texto Texto
Texto Texto
Texto Texto Texto
Texto Texto
Texto Texto Texto
</div>

<p align="right">
Texto Texto Texto
Texto Texto
Texto Texto Texto
Texto Texto
Texto Texto Texto
</p>

Amostra:
Texto Texto Texto
Texto Texto
Texto Texto Texto
Texto Texto
Texto Texto Texto


Bordas [Índice]

O códogo para Bordas não é próprio do HTML. Por isso teremos que entrar em Bordas CSS. Na aplicação deve-se inserir na tag o código style [estilo], podendo ser usado em textos, imagens e tabelas.

Estilos:

Dashed [Tracejado]
Código:
<span style="border-style: dashed;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou Tabela

Dotted [Pontilhado]
Código:
<span style="border-style: dotted;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou Tabela

Double [Duplo]
Código:
<span style="border-style: double;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou Tabela

Groove [Canal]
Código:
<span style="border-style: groove;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou Tabela

Solid [Sólido]
Código:
<span style="border-style: solid;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou Tabela

Inset [Embutimento Interno]
Código:
<span style="border-style: inset;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou Tabela

Outset [Embutimento Externo]
Código:
<span style="border-style: outset;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou Tabela

Tamanhos:
Obs.: Estarei usando aqui um estilo de borda [pode ser qualquer um, nestes casos usarei a borda sólida].

Thin [Fino]
Código:
<span style="border-width: thin; border-style: solid;">Texto, Imagem ou Tabela</span>
Amostra:

Texto, Imagem ou Tabela

Medium [Médio]
Código:
<span style="border-width: medium; border-style: solid;">Texto, Imagem ou Tabela</span>
Amostra:

Texto, Imagem ou Tabela

Thick [Grosso]
Código:
<span style="border-width: thick; border-style: solid;">Texto, Imagem ou Tabela</span>
Amostra:

Texto, Imagem ou Tabela

Pixel [qualquer valor antes de "px"]
Código:
<span style="border-width: 10px; border-style: solid;">Texto, Imagem ou Tabela</span>
Amostra:

Texto, Imagem ou Tabela

Cores:
Obs.: Estarei usando aqui um estilo e largura de borda [pode ser qualquer um, nestes casos usarei a borda sólida de 5 pixels e a cor vermelha].

Hexadecimal [valor de cor em seis digitos na escala hexadecimal postos depois do #]
Código:
<span style="border-style: solid; border-width: 5px; border-color: #FF0000;">Texto, Imagem ou Tabela</span>

Amostra:

Texto, Imagem ou Tabela

RGB [valor de 'Red Green Blue - Vermelho Verde Azul' na escala e ordem de 3 digitos]
Código:
<span style="border-style: solid; border-width: 5px; border-color: rgb(255, 0, 0);">Texto, Imagem ou Tabelao</span>

Amostra:

Texto, Imagem ou Tabela

Name Color [Nome da cor padrão em inglês]
Código:
<span style="border-style: solid; border-width: 5px; border-color: red;">Texto, Imagem ou Tabela</span>

Amostra:

Texto, Imagem ou Tabela

Mas também existem um modo de resumir ou agrupar as três modalidade em apenas uma.

Código:
<span style="border: 5px solid red;">Texto, Imagem ou Tabela</span>

Amostra:

Texto, Imagem ou Tabela

Obs.: Basta alterar os dados de acordo com as definições.


Outros Códigos HTML [Índice]

Quebra de Linha <br />

Código:
Quebra<br />de<br />Linha
Amostra:
Quebra
de
Linha

Linha Horizontal <hr />
A Linha Horizontal pode ser formatada com estilo, tamanho e posição, pontos que já foram explicados anteriormente.

Código:
<hr align="left" color="red" size="10px" width="200px" />
Amostra

Obs.: Não foram utilizados códigos CSS. Mas se for colocar, insira STYLE="(...código CSS aqui...)"

Uso do <blockquote>
Ele é usado para aumentar a margem do texto.

Código:
<blockquote>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</blockquote>

Amostra:
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Arquivos de Mídia

Música
A música pode ser inserida atrvés da tag Bgsound [funciona apenas no IE]:

<bgsound src="(URL da Música)" loop="(Valor para Repetição)" />

O Valor pode ser -1 para Repetição Infinita e qualquer outro valor para várias repetições.
Em URL da Música você deve colocar o endereço do arquivo hospedado na web. Ele aceita algumas extensões: MP3, AU, WAV ou MID. Dê preferência a MIDI [Musical Instrument Digital Interface - Interface de Música Instrumental Digitalizada] por ser muito pequena [1 segundo de WAV corresponde a 153600 Bytes (150 KB), enquanto que 1 segundo de MID corresponde a 40 Bytes (não chega a dar 1 KB - 1024 Bytes)].

Vídeo
O vídeo pode ser inserido atrvés da tag Embed [serve para músicas também]:

<embed src="(URL do Vídeos)" width="(valor para largura)" height="(valor para altura)" wmode="transparent" />

Ele aceita alguns formatos de vídeos: MPG, AVI, FLV, SWF, MOV, WMV, dentre outros.
Porém faz-se necessário o uso de um controle para vídeo ou música, já que vídeos [com exceção do FLV e SWF] e músicas não possuem botões de executar, pausar, parar, dentre outros. Veja logo abaixo um exemplo de Embed de Video-Música do Media Player:

Código:
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="(URL de um Vídeo ou Música)" defaultframe="rightFrame" showstatusbar="true" align="middle" width="(valor para largura)" height="(valor para altura)" wmode="transparent"></embed>

Amostra:



Se o vídeo estiver hospedado em um site de vídeos possivelmente estará a sua disposição os códigos de Embed [ou no formato acima, ou dentro de um object].



[Índice] Teste aqui o que você aprendeu:




Deixe seu comentário. Espero que tenha gostado do Curso!

2 comentários:

Diogo [Leão Covarde] disse...

Opa!
Vou usar muito isso aqui!

Guilherme Bayara disse...

Muito bom!
Muitos blogueiros não conhecem nada de HTML!

Postar um comentário

 
Subir