TEXTO COM SOMBRAS

Com CSS você pode obter variados efeitos nos textos de sua página. Apresento a seguir alguns exemplos com a finalidade de mostrar as definições básicas para este processo. As possibilidades são ilimitadas, bastando um pouco de criatividade para se obter efeitos bastante interessantes e decorativos.

Efeito #1

TEXTOS COM SOMBRAS

o estilo em css

div.texto1  { 
position:absolute;
top:2px;
left:2px;
color:#f00;
font: bold 25px Georgia, "Times New Roman", Times, serif;
}

div.sombra11 {
position:relative;
color:#ccc;
font: bold 25px Georgia, "Times New Roman", Times, serif;
}

e o HTML

<div class="sombra11">TEXTOS COM SOMBRAS
<div class="texto1">TEXTOS COM SOMBRAS
</div><br></div>

Efeito #2



As regras de estilo




div.texto2 {
width:100%;
position:absolute;
top:3px;
left:-3px;
color:#039;
font: 25px "arial black", Helvetica, sans-serif;
}

div.sombra21  {
width:100%;
position:absolute;
top:3px;
left:-3px;
color:#7490c7;
font: 25px "arial black", Helvetica, sans-serif;
}

div.sombra22  {
position:relative;
color:#b9c7e3;
font: 25px "arial black", Helvetica, sans-serif;
}

e o HTML

<div class="sombra22">TEXTOS COM SOMBRAS
<div class="sombra21">TEXTOS COM SOMBRAS
<div class="texto2">TEXTOS COM SOMBRAS
</div>
</div>
</div>


Efeito #2

TEXTOS COM SOMBRAS

TEXTOS COM SOMBRAS

TEXTOS COM SOMBRAS

TEXTOS COM SOMBRAS

TEXTOS COM SOMBRAS

LEIA MAIS

Layout CSS

Alguns sites ensinando a criar um layout :)

http://cafecomgelo.wordpress.com/tutorial-de-css/


http://codando.wordpress.com/2008/07/20/tutorial-avanado-de-css-layout-da-pgina/



http://www.webmaster.pt/css-criacao-layout-912.html

LEIA MAIS

TIPOS DE LISTAS

Existem três tipos de listas em HTML:

• Lista não ordenada;
•  Lista ordenada;
•  Lista de definições (com títulos);

Lista não ordenada: 

• Seu inicio e fim são determinados pelas  tags <ul> e </ul>;
•  Cada item da lista é iniciado por <li> e seu final por </li>;
• Exemplo: 

<ul>
<li> pessego
<li> morango
<li> laranja
</ul>


Lista ordenada: 

• Seu inicio e fim são determinados pelas  tags <ol> e </ol>;
•  Cada item da lista é iniciado por <li> e seu final por </li>;
• Exemplo: 

<ol>
<li> pessego
<li> morango
<li> laranja
</ol>

•  O atributo start = n é opcional e especifica o primeiro valor da 

contagem, sendo que n pode ser um número ou uma letra.

•  Exemplo: 

<ol start= 5>
<li> pessego
<li> morango
<li> laranja
</ol>

Lista de definições:

• Seu inicio e fim são determinados pelas  tags <dl> e </dl>;
• Cada item da lista contém um título e um texto, sendo que o  

título está entre <dt> e </dt> e o texto entre <dd> e </dd>;

• Textos com mais de uma linha-> cada linha entre <dd> e </dd>;
• Exemplo 1: 

<dl>
<dt>Título 1</dt>
<dd>texto 1</dd>
<dt>Título 2</dt>
<dd>texto 2</dd>
</dl>

•  Exemplo 2: 

<dl>
<dt>HTML:</dt>
<dd>Hypertext Markup Language</dd>
<dd>Linguagem de Marcadores de Hipertexto</dd>
<dt>URL:</dt>
<dd>Uniform Resource Locator</dd>
<dd>Endereço Uniforme de Recurso</dd>
<dt>HTTP:</dt>
<dd>Hypertext Transfer Protocol</dd>
<dd>Protocolo de Transferência de Hipertexto</dd>
<dt>FTP:</dt>
<dd>File Transfer Protocol</dd>
<dd> Protocolo de Transferência de Arquivos</dd>
</dl>


Importante: 

•  Podemos ter listas dentro de outras listas (e de tipos diferentes);
•  Exemplo: 

<ol>
<li> Primeiro item de uma lista ordenada.
<li> Segundo item de uma lista ordenada.
<ul>
<li> Primeiro item de uma  lista não-ordenda.
<li> Segundo item de uma   lista não-ordenda.
</ul>
<li> Terceiro item de uma lista ordenada.
</ol>
Obs.: No browser, a lista acima será exibida da seguinte forma :

Exemplos :

NÃO ORDENADAS:

• pessego
• morango
• laranja 

ORDENADAS :

1. pessego
2. morango
3. laranja

LISTAS DE DEFINICÕES :

HTML:

Hypertext Markup Language

Linguagem de Marcadores de Hipertexto

URL:

Uniform Resource Locator

Endereço Uniforme de Recurso

HTTP:

Hypertext Transfer Protocol

Protocolo de Transferência de Hipertexto

FTP:

File Transfer Protocol

Protocolo de Transferência de Arquivos

LEIA MAIS

Editores HTML

Editores HTML

• Adobe Home Site
• Adobe Dreamweaver
• Adobe GoLive
• Arachnophilia
• Amaya
• Aptana
• Bluefish
• CoffeeCup HTML Editor
• CoffeeCup VisualSite Designer
• Crimson Editor
• EditPlus
• Emacs
• Evrsoft First Page
• Gedit
• Kate
• Astra Skyscraper HTML
• Kompozer
• Macromedia Dreamweaver
• Microsoft Expression Web
• Microsoft Frontpage
• Microsoft Office SharePoint Designer
• Microsoft Visual Studio
• Mozilla Composer
• Namo Web Editor
• Notepad++
• NVU
• Netscape Editor
• PHP Editor
• PSPad
• Quanta Plus
• Scite
• Trellian WebPage
• Vim

Comparação de Editores HTML

Na hora de desenvolver para a Web, qual o melhor programa?

É possível dizer que antigamente a internet era uma “bagunça” quanto à informação. Isso porque você nem mesmo sabia direito por onde começar quando queria buscar algo. Os sites de busca não eram tão poderosos quanto são hoje em dia e, ou você tinha links diretos para o que queria acessar, ou teria que embarcar em uma busca por diretórios de páginas.

Hoje em dia é comum que qualquer um tenha uma página na internet, mesmo que seja algo extremamente simples, como a apresentação de algum trabalho ou projeto. A facilidade de criação é muito maior agora. O número de pessoas que sabem usar esses softwares também é realmente grande hoje.

Sendo assim, vamos fazer uma comparação entre alguns dos mais famosos (talvez não exatamente os melhores). Tentaremos fazer não somente uma comparação, mas também traçar o objetivo de cada programa — afinal eles são feitos para cada tipo de pessoa. Confira:

O mais completo — e para todos os gostos
Adobe Dreamweaver

O Adobe Dreamweaver é, sem dúvidas, o mais conhecido programa para criação de páginas WEB que existe hoje em dia. Talvez porque o programa consegue se adaptar a todo tipo de necessidade — de iniciante a profissional. Seu suporte principal inclui composições HTML, PHP, ColdFusion, ASP, CSS, JavaScript, XML e várias outras.

O programa se conceituou ainda quando fazia parte da Macromedia. E agora que foi comprado pela Adobe, trouxe melhorias relativas principalmente em relação à sua interface. Se você já utilizou algum programa Adobe CS3 em diante, vai reconhecer o topo diferenciado e muito mais prático. Isso porque a utilização do programa pode ser adaptada da melhor maneira possível ao seu monitor.

Além disso, ele também traz suporte a uma porção de arquivos e associações de outros programas Adobe, como Flash (trazendo até modelos de players de vídeo) e Photoshop.

Enquanto você cria uma página, é possível visualizar somente o código (Code). E é realmente mais prático construir algo com a codificação HTML, já que as Tags podem ser adicionadas através de menus, ao invés de manualmente. É possível até mesmo criar com incrível facilidade um CSS que defina o estilo de todo o seu site.

As outras maneiras de visualização são: Design, que mostra na tela diretamente como está a sua página e tela dividida (Split), que apresenta tanto o código quanto o design, para que você construa algo no Design e veja como está sendo criado o código e vice-versa.

O Dreamweaver também é extremamente organizado, pois você pode criar um projeto que inclua todos os seus sites em pastas separadas. Assim, ao editar uma página que tenha relação com outra, todas serão alteradas. É como se tudo ficasse o tempo todo interligado e você pudesse sempre editar o seu site como um todo, mesmo que só altere uma única página.

Edite e veja na hora – Para os Iniciantes
WYSIWYG Web Builder

O WYSIWYG Web Builder é o perfeito "What-You-See-Is-What-You-Get". Ou seja, "O que você vê é o que obtém". Isso significa que, o que quer que você faça na tela, é o resultado final da sua pagina, literalmente.

Dessa forma, basta escolher qualquer elemento no lado esquerdo da sua página e simplesmente colocá-lo em algum lugar na tela. Você pode escolher de tudo, como imagens, texto, formulários, caixas de texto, plugins e até vídeos. A utilização do programa chega até mesmo a lembrar o PowerPoint, que se baseia nesse mesmo estilo.

A melhor parte é que, por funcionar simplesmente arrastando e soltando, você pode criar uma página muito bonita e funcional sem entender absolutamente nada de HTML. É como se o WYSIWYG Web Builder fosse a aba Design do Dreamweaver, com a diferença de permitir mais liberdade — mas também menos organização quando se fala em webdesign.

O editor de código
Notepad++

O Notepad++ é um programa para profissionais de programação que querem no mínimo migrar do bloco de notas para algo melhor. O programa reconhece automaticamente a linguagem que você estiver usando, seja C++, Java, C#, XML, HTML, PHP, Java, ASP ou várias outras.

Basta acessar o menu Linguagem para definir qual o tipo de arquivo você está editando, como HTML, por exemplo. Assim, o Notepad++ reconhece as tags que estão sendo usadas em sua página. Além disso, ele tem indentação de texto. Ou seja, ele agrupa “partes” do que você estiver desenvolvendo para uma melhor organização. Assim você pode expandir ou contrair todas as partes que tratarem de Style, de Tabelas etc.

O programa ainda conta com um auto-completar, sistema de busca e substituição, interface bem organizada e funcional e navegação por abas, podendo deixar vários arquivos abertos ao mesmo tempo. E, através do menu, você pode pré-visualizar a sua página tanto no Internet Explorer quanto no Firefox, em botões diferentes.

Definitivamente, o Notepad++ é destinado para aqueles que gostam de criar páginas somente através do código, mas querem mais organização quando fazem isso.

KompoZer

O KompoZer procura trazer ao menos as funcionalidades mais básicas de um programa editor HTML, mas sendo gratuito. Ele praticamente lembra o Dreamweaver pois separa a edição de uma página em abas. Na primeira, que se chama Normal, utiliza o WYSIWYG (edição simples e prática, para iniciantes). Na aba HTML Tags, o programa simplesmente indica qual tag corresponde a qual elemento na tela, podendo até conhecer melhor o código HTML (caso não o conheça, é claro).

Para os que gostam de código puro, Source é a aba para visualizar e editar diretamente o código HTML. O editor é extremamente inteligente, pois tem códigos indentados (como o Notepad++). Ele também é automático e totalmente limpo (não adiciona tags inúteis no meio da página sem que você queira).

O programa também traz até um Editor CSS e um uploader FTP, para que você salve e já envie a sua página para o servidor. Sendo assim, basta escolher qual estilo é mais apropriado para você, sendo a aba Normal para iniciantes, HTML Tags para intermediários e Source para aqueles que já conhecem o código HTML.

Conclusão

WYSIWYG Web Builder dá um show em praticidade e facilidade de uso para usuários iniciantes (ou até aqueles que só estão com pressa). Mas não é o mais indicado para aqueles que querem um site perfeito. Já o Notepad++ é para profissionais, que querem mexer diretamente no código, mas com total organização.

KompoZer se destaca por apresentar três maneiras diferentes de criação (como o Dreamweaver). Assim, você não precisa ter conhecimento extremamente avançado em HTML para criar boas páginas. Ele é organizado, funcional e gratuito.

Mesmo assim, é quase uma covardia comparar o Adobe Dreamweaver com os outros programas, já que ele é o mais completo, o mais cheio de funções e recursos. O programa é voltado para todo tipo de usuário, do mais iniciante ao avançado, além de se dividir em perfis de uso, seja código, design ou ambos. É como se ele incorporasse todos os tipos de edição HTML em um só. Ainda é o melhor, mas o mais caro de todos.

O que vale a pena é ver qual seu perfil e avaliar o custo benefício. Se você quer algo prático e rápido, use o WYSIWYG Web Builder. Se quer o código, o Notepad++ é ótimo. Mas uma boa idéia é começar pelo excelente KompoZer e adquirir conhecimentos até poder migrar e aproveitar completamente tudo que o Adobe Dreamweaver tem a oferecer.

Leia mais em: http://www.tecmundo.com.br/programacao/1608-comparacao-de-editores-html.htm#ixzz25ibmAG4z

LEIA MAIS

O que acontece quando se digita um endereço na barra de endereços de um navegador?

Qualquer que seja o browser ( Internet Explorer, Firefox, Opera, ou...) ele procurará pelo site solicitado, fazendo um pedido a computadores especificos que estão espalhados pela internet, denominados servidores de DNS.

Eles tem uma base de dados que identificam exatamente qual é o computador onde está a informação, pois localizam o seu endereço IP. Após contatar essa máquina, o navegador lhe efetua o pedido de cópia dos arquivos para o computador onde a pessoa está.

Toda a comunicação entre os computadores é feita em texto corrido, basicamente usando a linguagem HTML. Essa sigla vem do inglês: Hiper Text Mark-up Language, e pode ser traduzida por Linguagem de Marcação de Hiper Texto.

HTML é uma linguagem de formatação que diz exatamente como o documento foi construído por seu autor. Por exemplo, especifica a posição e tamanho das figuras; o tipo, cor, e tamanho da fonte; a cor do fundo; o tamanho das margens, etc...

O navegador, ao ler o arquivo HTML, tem condições de reproduzir exatamente, no computador local, a página que está em outro computador.

Assim, essa linguagem é utilizada para criar arquivos que podem ser visualizados na World Wide Web, um dos serviços mais populares da Internet e por correio eletrônico, pois o HTML permite a criação de documentos que podem ser lidos em qualquer tipo de computador e transmitidos pela Internet e por mensagens eletrônicas.

Importantíssimo é mencionar que o HTML permite criar ligações entre arquivos. São os links, que possibilitam a navegação virtual, ou seja, ao serem clicados permitem acessar outro arquivo, o qual, evidentemente, pode estar no mesmo computador, ou não e pode ter qualquer natureza: texto, imagem, som, vídeo.

Aqui é importante lembrar que hipertexto denomina documentos que podem conter todo o tipo de informação: textos, fotos, animações, trechos de vídeo, sons e programas, além dos links, as ligações para outros arquivos.

A linguagem é descritiva e foi criada para ser lida em qualquer computador que tenha instalado um programa navegador (em inglês: browser) como Mozilla suíte, Firefox, Netscape, Internet explorer, Opera, Safari, Planet, entre outros).

Uma das principais características do HTML se reflete no fato de se um programa navegador não "entender" um determinado comando, este é ignorado e não é apresentado, não originando mensagem de erro e afetando minimamente o restante do documento.

Assim, resumidamente, quando se digita um endereço de um site, o navegador : 

-contata o servidor de DNS e descobre onde está o computador que hospeda o site desejado,

-envia o pedido de cópia do(s) arquivo(s) que está naquele endereço,

-então, o servidor web analisa e trata o pedido e responde ao navegador com um arquivo de texto,

-o navegador obedece o texto e constrói a página na tela do cliente,

-a pessoa vê, em seu monitor, a página web solicitada.

Entretanto, como o HTML é uma linguagem descritiva, de formatação, nem sempre diferentes navegadores exibem a mesma apresentação em cada página. Ou seja, os detalhes codificados no HTML podem ser suficientes para um deles mas não suficientes para outro.

Assim, cada navegador poderá interpretar os dados de uma forma um pouco diferente. Portanto, quanto mais perfeitamente descrita a página for, maiores serão as chances do documento ser interpretado da mesma forma por diversos navegadores.


Linguagem de formatação

Diferentemente dos processadores de texto, a linguagem HTML não foi criada para controlar a aparência dos documentos.

O HTML apenas informa ao navegador o que são os elementos que estão na página, quais arquivos (imagens, sons) ela contém eonde eles estão. (Por exemplo, um certo trecho é identificado como o título principal do documento e outro trecho como um link).

Essa descrição é feita por meio de comandos, os tags, marcas especiais que determinam o papel de cada elemento dentro do texto e que permitem ao browser interpretar e exibir a página conforme ela foi concebida por seu autor(a).

Assim, a formatação do documento é deixada para o navegador. Portanto, cada programa pode exibir a página de um modo um pouco diferente (o que dificulta o trabalho de programação visual). Além disso, cada usuário pode modificar a configuração padrão de seu navegador para que o seu programa mostre o documento na fonte (tipo de letra) e nas cores que desejar.

Com o tempo a linguagem foi evoluindo com a introdução de novos tags e novos atributos de estilo. O HTML passou a exercer uma dupla função em relação ao conteúdo: exibir e estilizar, ou seja dar-lhe a aparência visual.



Para se criar documentos HTML pode-se usar qualquer editor de texto, pois basta que se salve um documento com o formato txtcom a terminação htm ou html, para que ele possa ser aberto por qualquer navegador.

Entretanto , a linguagem HTML é estática, mas pode ser dinamizada por outras linguagens como

 Javascript e CSS: são do tipo "client side", ou seja são interpretadas pelo browser no computador do cibernauta ou
 PHP, asp, java: são interpretadas pelos servidores web

É importante notar que a maioria dos sistemas operacionais já vêm com um editor simples que cria documentos de tipo txt (Exemplo: bloco de notas - Notepad). Aqui convém notar que o Metapad tem algumas opções extras. O Kompozer já tem um editor incluído.

LEIA MAIS

HTTP

HTTP significa (HyperText Transfer Protocol), o que pode ser traduzido por Protocolo de Transferência de Hipertexto.
Assim, HTTP é o protocolo usado pelos computadores para a transmissão de dados na World Wide Web.
É importante lembrar que hipertexto é um texto que pode apresentar sons, vídeos, imagens e outras aplicações. Ou seja, os dados que podem ser transferidos podem ser de qualquer tipo.Mas, o que realmente caracteriza o hipertexto é que pode possuir links, isto é, ligações para outros arquivos (textos, imagens, sons, vídeos). Assim, os links possibilitam a "navegação", tanto dentro de um arquivo, de um ponto para outro, ou entre arquivos diferentes, que podem estar em computadores também diferentes, e que podem estar localizados proximamente ou estar extremamente distantes no planeta.

Portanto, quando se digita um endereço na barra de endereços em um navegador ou, sempre que se clica sobre um link, o navegador realiza uma comunicação com um servidor da Web por meio do protocolo HTTP e possibilita tudo o que a Internet pode oferecer.

Fonte : http://www.ufpa.br/dicas/htm/htm-intr.htm

LEIA MAIS

Estrutura

A estrutura básica de um documento HTML (Hyper Text Markup Language - Linguagem de Marcação de Hypertexto), apresenta as seguintes marcações:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="a descrição do seu site em no máximo 90 caracteres">
        <meta name="keywords" content="escreva palavras-chaves curtas, máximo 150 caracteres">
        <title>Título do Documento</title>
    </head>
    <body>
    <!-- Aqui fica a página que será visível para todos, onde pode-se inserir
    textos, imagens, links para outras páginas, etc, geralmente usa-se: -->
 
    <div>Tag para criar-se uma 'caixa', um bloco, mais utilizada com "Cascading Style Sheets
         (Folhas de Estilo em Cascata)</div>
 
    <span>Tag para modificação de uma parte do texto da página</span>
 
    <img src="endereço_de_uma_imagem.jpg" />
 
    <a href="http://www.wikipedia.org">Wikipedia, A Enciclopédia Livre</a>
    </body>
</html>

As etiquetas básicas de HTML, cuja presença é altamente recomendada nas páginas são:

• <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML
• <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto
• <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir atributos comuns a toda a página, como cor de fundo, margens, e outras formatações.

• Cabeçalho

Dentro do cabeçalho podemos encontrar os seguintes elementos:

• <title>: define o título da página, que é exibido na barra de título dos navegadores
• <style type="text/css">: define formatação em CSS
• <script type="text/javascript">: define programação de certas funções em página com scripts, podendo adicionar funções de JavaScript
• <link>: define ligações da página com outros arquivos como feeds, CSS, scripts, etc
• <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor, etc

São meta informações sobre documento. Tais campos são muitos usados por mecanismos de busca (como o Google, Yahoo, Bing) para obterem mais informações sobre o documento, a fim de classificá-lo melhor. Por exemplo, pode-se adicionar o código <meta name="description" content="descrição da sua página" /> no documento HTML para indicar ao motor de busca que texto de descrição apresentar junto com a ligação para o documento. Para o motor de busca Google, por exemplo, elementos meta como keywords não são utilizadas para indexar páginas. Apenas <title> e a meta <description> são usadas para descrever a página indexada.^[6]

Obs: as etiquetas <style> e <script> servem tanto para delimitar os espaços usados pelos códigos na página quanto para invocar códigos existentes em outros arquivos externos.

Corpo

Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página, como por exemplo:

• <h1>, <h2>, ... <h6>: cabeçalhos e títulos no documento em diversos tamanhos.
• <p>: novo parágrafo.
• <br />: quebra de linha.
• <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>, já os cabeçalhos das colunas são criados com as etiquetas <THead><TH> e os rodapés com<TFooter><TR><TD>).
• <div>: determina uma divisão na página a qual pode possuir variadas formatações.
• <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente.
• <img />: imagem.
• <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço.
• <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a serem distribuídos.
• <abbr>: abreviação (sigla simplesmente abreviada).
• <cite>: citação.
• <address>: endereço. <address>: endereço.

LEIA MAIS

Introdução

HTML (HyperText Markup Language) é a linguagem de marcação principal para exibição de páginas web e outras informações que podem ser exibidos em um navegador da web.

HTML é escrito na forma de elementos HTML consistindo de tags entre colchetes angulares , dentro do conteúdo da página. HTML tags mais comumente vêm em pares, apesar de algumas marcas, conhecidas como elementos vazios, são não pareado, para <img> exemplo. A primeira tag em um par é a marca inicial, a segunda tag é a tag final (eles também são chamados de marcas de abertura e fechamento). De entre estas tags web designers pode adicionar texto, tags, comentários e outros tipos de conteúdo baseado em texto.O propósito de um navegador da web é a leitura de documentos HTML e compô-los em páginas web visíveis ou audíveis. O navegador não exibe as tags HTML, mas usa as tags para interpretar o conteúdo da página.

Elementos HTML formar os blocos de construção de todos os sites. HTML permite que imagens e objetos para ser incorporado e pode ser usado para criar formas interativas. Ele fornece um meio para criar documentos estruturados por denotando semântica estrutural de texto, tais como títulos, parágrafos, listas, links, citações e outros itens. Ele pode inserir scripts em linguagens como JavaScript que afetam o comportamento das páginas da web em HTML.
Os navegadores da Web também pode consultar a Cascading Style Sheets (CSS) para definir a aparência eo layout de texto e outro material. O W3C, mantenedor de tanto o HTML e os padrões CSS, incentiva o uso de CSS sobre explicitamente apresentação marcação HTML.

fonte (http://en.wikipedia.org/wiki/HTML)

LEIA MAIS