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.
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.htmlCó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:
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
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. 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 CSSNote 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="(...)".
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çãoElas 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 outra1 - Abertura da página seguinte sobre a atual2 - Fechamento em círculo3 - Abertura em círculo4 - Revelação para cima5 - Revelação para baixo6 - Revelação para a direita7 - Revelação para a esquerda8 - Persiana vertical9 - Persiana Horizontal10 - Quadriculado na horizontal11 - Quadriculado na vertical12 - Dissolução13 - Fechamento em corte Vertical14 - Abertura em corte Vertical15 - Fechamento em corte horizontal16 - Abertura em corte horizontal17 - Revelação na diagonal da esquerda para baixo18 - Revelação na diagonal da esquerda para cima19 - Revelação na diagonal da direita para baixo20 - Revelação na diagonal da direita para cima21 - Barras horizontais aleatórias22 - Barras verticais aleatórias23 - Aleatório
Corpo
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 FonteO 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 CoresEstilo da FonteO 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 FonteO 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 FonteO 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:
HeadingCódigo 2:
<h2>Heading</h2>Amostra 2:
HeadingCódigo 3:
<h3>Heading</h3>Amostra 3:
HeadingCó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:
HeadingUsando font size [tamanho da fonte]Código:
<font size="5">Tamanho da Fonte</font>Amostra:
Tamanho da FonteObs.: A parte em verde pode ser alterada. Veja os temanhos que poderá obter:
1x
2x
3x
4x
5x
6x
7x
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.
O código para Tabela consiste em Linhas [tr] por Colunas [td]. Veja um exemplo de tabela:
Tabela 1: 1 linha por 3 colunasCódigo [estilo didático]:
<table>
<tr>
<td>(...)</td>
<td>(...)</td>
<td>(...)</td>
</tr>
</table>
Amostra:
Tabela 2: 3 linha por 1 colunasCó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 colunasCó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:
(...)
| (...)
| (...)
|
(...)
| (...)
| (...)
|
(...)
| (...)
| (...)
|
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 CerebralPorém o URL pode ser substituido por:
E-mailCódigo:
<a href="mailto:redecerebral@yahoo.com.br">E-mail Rede Cerebral</a>Amostra:
E-mail Rede CerebralIdentificaçãoCódigo:
Link:
<a href="#id1">Identificação</a>Palavra a ser identificada:
<font id="id1">Identificação</font>Amostra:
IdentificaçãoIdentificaçãoImagens
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 CerebralOutro 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 CerebralA formatação do link não é feita por HTML. Clique
AQUI para ver mais sobre formatação de links em CSS.
Listas de GlossárioA 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 NumeradasDiscoCódigo:
<ul type="disc">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ul>
Amostra:
QuadradoCódigo:
<ul type="square">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ul>
Amostra:
CírculoCódigo:
<ul type="circle">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ul>
Amostra:
FigurasCódigo:
<ul imagesrc="(URL da Imagem)">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ul>
Amostra:
Texto
Texto
Texto
Listas NumeradasNúmerosCódigo:
<ol>
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>
Amostra:
- Texto
- Texto
- Texto
Números Romanos Maiúsculos
Código:
<ol type="I">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>
Amostra:
- Texto
- Texto
- Texto
Números Romanos Minúsculos
Código:
<ol type="i">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>
Amostra:
- Texto
- Texto
- Texto
Letras Maiúsculas
Código:
<ol type="A">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>
Amostra:
- Texto
- Texto
- Texto
Letras Minúsculas
Código:
<ol type="a">
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>
Amostra:
- Texto
- Texto
- 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:
- Texto
- Texto
- Texto
Números Romanos e Letras
Código:
<ol type="A">
<li value="9">Texto</li>
<li>Texto</li>
<li>Texto</li>
</ol>
Amostra:
- Texto
- Texto
- 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
| |
|
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 à EsquerdaCó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 JustificadoCó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 à DireitaCó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
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 TabelaDotted [Pontilhado]Código:
<span style="border-style: dotted;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou TabelaDouble [Duplo]Código:
<span style="border-style: double;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou TabelaGroove [Canal]Código:
<span style="border-style: groove;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou TabelaSolid [Sólido]Código:
<span style="border-style: solid;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou TabelaInset [Embutimento Interno]Código:
<span style="border-style: inset;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou TabelaOutset [Embutimento Externo]Código:
<span style="border-style: outset;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou TabelaTamanhos: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 TabelaMedium [Médio]Código:
<span style="border-width: medium; border-style: solid;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou TabelaThick [Grosso]Código:
<span style="border-width: thick; border-style: solid;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou TabelaPixel [qualquer valor antes de "px"]Código:
<span style="border-width: 10px; border-style: solid;">Texto, Imagem ou Tabela</span>
Amostra:
Texto, Imagem ou TabelaCores: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 TabelaRGB [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 TabelaName 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 TabelaMas 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 TabelaObs.: Basta alterar os dados de acordo com as definições.
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ídiaMúsicaA 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ídeoO 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!
Agora você poderá escolher o color scheme (esquema de cores) que melhor combina com seu modelo de blog ou site. Toda a configuração é exibida no modelo de rascunho no lado diretio da página. Altere, também, o tamanho da largura do widget (em pixel) e há possibilidade de alterar cores do esquema escolhido inicialmente.
Para configurar sua conta e associá-la ao Twitter e Facebook (gratuitamente), clique em Add you face & link! (Adiciona sua Foto e Link!).
Live Map:
Recommended Reading:
Popular Pages:
Non-javascript Live Traffic Feed:
