Tag Archives: html

Flash: SWFAddress + ReWrite = SEO

http://rogeriolino.com/2010/04/01/flash-swfaddress-rewrite-seo/

Anúncios

Editores HTML – Qual usar?

Uma coisa muito discutida por quem trabalha com Web é qual editor usar. Mas antes de ficar testando editor por editor a procura de um que mais lhe agrade é bom procurar saber mesmo o que você espera que um bom editor tenha.

O primeiro editor de HTML que usei foi o Dreamweaver na época em sua versão 4, de lá pra cá muita coisa mudou nele e hoje em dia com certeza é um dos editores mais completos, senão o mais completo. Porém não é freeware.
Mas depois que passei a escrever todo o HTML “na mão”, comecei a ver que muitas de suas ferramentas eram dispensáveis e que ele era muito pesado só para eu ficar digitando, além de ter os códigos gerados automaticamente muito “sujo”. Procurei então por um editor mais leve. Usei durante um tempo o próprio bloco de notas do windows, mas quando o código começa a ficar muito grande aquele monte de letra da mesma cor passava a ser desagradável.

Quando encontrei o EditPlus realmente era o que eu queria, simples, leve e só com as ferramentas que eu espera que um editor tivesse – como por exemplo paleta de cor e FTP – além de pintar todo o código facilitando a legibilidade. Foi amor a primeira vista e até hoje utilizo ele tanto para construir um documento XHTML quanto para CSS. Mas esse também é shareware.

Esses dias quis procurar por novidades na internet, ver se talvez pudesse ter um editor que me agradace mais, sem fugir da mesma simplicidade do EditPlus, e melhor, um editor freeware.

Encontrei dois editores que me agradaram muito:

Primeiro o PSPad com interface muito parecida com a do EditPlus só que mais robusto. Possui uma paleta de cor mais abrangente com mais opções na hora de escolher a cor, outra coisa que me agradou muito também foi o indentador automático – apesar do custume de utilizar a tecla tab para alinhar – e vem também com uma opção autocompletar, teclando CTRL+J abre uma caixa com as opções para você escolher, ideal para pessoas como eu que do nada esquecem os nomes de alguns atributos -, isso além de fechar automáticamente as chaves, parênteses e aspas (ainda vou ter que me acostumar com isso).

O segundo foi o Araneae 5 excelente editor para aqueles que não abrem mão do velho bloco de notas. Tão leve quanto, mas com funcionalidade de colorir o código, paleta de cor e tem no canto direito uma aba com algumas tag e atributos, bastando só clicar para adicionar ao documento. Tem uma interface parecida com os programas da Macromedia, versão MX.

mais sobre:

Revolucao.etc.br – Web Standards e as Ferramentas de desenvolvimento

[ editado ]

O EditPlus também tem a opção de fechar as tags automaticamente, só que vem desabilitada.

[ /editado ]

XHTML – O que é?

XHTML (Extensible Hypertext Markup Language) é uma linguagem de marcação baseada em XML escrita para substituir o HTML.

No XML podemos criar nossas próprias tags, e o XHTML já vem com as tags pré-definidas baseadas nas tags já conhecidas do HTML. Utilizando as regras do XML.

Já que o XHTML usa as tags do HTML para que utilizá-lo?

Imagine que para cada página da internet que você fosse ver um código diferente. E que cada pessoa fosse definir o seu padrão. Seria muito difícil verificar se aquele código estaria dentre os padrões. É aí que entra o XHTML.

Para construir uma página em XHTML você deverá seguir os padrões da W3C, padronizando os códigos e tornando mais fácil sua validação e a legibilidade.

Por exemplo: todas as tags e seus atributos devem ser escritos em letra minúscula, todo valor dos atributos devem estar entre “” (alt=”Olá”), e as tags simples devem ser fechadas com “/>” (<img src=”foto.gif” alt=”eu” />).

Alguns exemplos:

Tags e atributos:

errado: <IMG src=”foto.gif” ALT=”eu”>

certo: <img src=”foto.gif” alt=”eu”>

Aninhamento das tags:

errado: <p>parágrafo <em> negrito </p></em>

certo: <p>parágrafo <em> negrito </em></p>

O XHTML é dividido em três tipos (DOCTYPE):

Strict: o mais rigoroso, exige que seja seguido por completamente os padrões.
Transitional: transição da forma antiga de marcação para uma nova forma. Utilizado por quem ainda está preso à alguma forma antiga em seu site. Sendo um pouco menos rigoroso que o Strict.
Frameset: usado quando se utiliza frames no site.

Principais diferenças entre XHTML e HTML

Além das tags escritas em letra minúscula, o fechamento obrigatório das tags, e as aspas. Também a sintaxe dos atributos devem ser escritas por completo ( <dl compact> para <dl compact=”compact”> ). E a “troca” do atributo name para o atributo id.

Logo veremos mais a fundo o que são DOCTYPE e como funcionam e a declaração de um XHTML.

mais sobre:
Maujor.com – Tutorial XHTML
W3.org – O que é XHTML?
W3schools – XHTML validation
W3Schools – Diferença entre XHTML e HTML
Revolução.ect.br – O que é XHTML?
Revolução.etc.br – Doctype
Linha de Código – Tutorial XHTML
Linha de Código – Escrevendo um XHTML válido

Tags – O que são?

São as estruturas que formam o HTML, podem conter atributos ou não. Uma tag é constituída por um sinal de “<” no começo seguido de seu nome mais o sinal de “>”. Os atributos da tag são especificados dentro dela.

exemplo:

<hr align=”center” width=”50%”>
resultado:


note que todos os valores dos atributos estão entre “”, mesmo não sendo necessárias para o HTML, mas é bom acostumar para que quando começar a trabalhar com o XHTML (veremos) – para que seja validado pela W3C. O mesmo serve para a “/”, que é insirida no final das tags simples, como é o caso da tag hr. Abaixo as principais tags e seus atributos:html a tag princiapal da página aonde ficará todas as outras tags.head – dentro da tag head ficam o titulo (title), os scripts (javascript) e o estilo (CSS), além de outras tags como meta e link.title – define o título da página.

body – o corpo da página, o que vai aparecer para o visitante.

hn – varia de h1 até h6, vem com predefinições para o texto, utilizada para títulos.

p – para iniciar um parágrafo.

blockquote – serve para definir uma citação do texto.

hr – horizontal rule, inseri uma linha horizontal. Pode ser controlada pelos seguintes atributos:

width: tamanho da linha, medida em pixel ou porcentagem;
size: largura da linha, medida em pixel;
align: define como será alinhada a linha (left, center, right);
noshade: retira a sombra da linha;

font – para formatar a fonte da página.

size: tamanho da fonte, vai de 1 até 7;
color: cor da fonte em hexadecimal;
face: o tipo da fonte, pode-se escolher mais de uma fonte separando por vírgula no qual o browser vai procurar qual o visitante tem da esquerda para a direita – usa-se como default “Sans-Serif”;
ex: <font size=”3″ color=”#000000″ face=”Verdana, Arial, Sans-Serif”>Texto
</font>

a – defini um link na página.

href: destino do link, pra onde o usuário vai.
title: a descrição que irá aparecer ao repousar o mouse em cima.

img – adiciona uma imagem à página. Tag simples, então termina com “/”.

src: destino da imagem.
alt: descrição da imagem (ao posicionar o mouse em cima). Opcional, mas para ser validado tem que pelo menos conter. ex: alt=””.
width: largura.
height: altura.
ex:
<img src=”imagens/avatar.gif” width=”100″ height=”75″/>


i – adiciona itálico ao texto;

b – adiciona negrito ao texto (bold);

center – centraliza o conteúdo contido nele na página.

Algumas dessas tags – como por exemplo i, b e center e os atributos da tag font – quase não são usadas e seus atributos também, sendo substituídos por classes ou ids definidas no CSS (Cascade Style Sheet). Mas é bom vermos para termos uma boa base sobre como funcionam as tags.

Toda tag pode receber uma id e/ou class para ser identificada e formatada no CSS.

Dica: tente testar as tags alterando os atributos e ver os resultados para melhor fixar e compreender.

mais sobre:

http://pt.wikipedia.org/wiki/Tag

HTML – O que é?

HTML (Hyper Text Markup Language) é uma linguagem interpretada por browsers (navegadores) para exibir textos e gráficos pela Web; Formado, estruturado, por Tag’s.
Para desenvolver uma página HTML não é necessário mais do que um simples Bloco de Notas, desde que salve como a extensão .html.

Exemplo de página HTML:
<html>
<head>
<title>Minha Home Pag</title>
</head>
<body>
<p>Seja bem vindo!</p>
</body>
<html>
no exemplo acima temos uma simples página com o seguinte conteúdo sendo exibido no corpo da página (body) : “Seja bem vindo!”, formatado pela Tag <p> que define o parágrafo. E no título (title) na barra do browser: “Minha Home Page”.

Repare que as todas as Tag’s do exemplo são fechadas com a repetição de seu nome acrescentando uma “/” na frente, o que mostra para o browser quando a Tag é fechada. O que veremos mais a fundo nos próximos tópicos sobre Tag’s.

mais sobre:
http://www.w3.org/MarkUp/
http://www.w3.org/MarkUp/Guide/
http://www.criarweb.com/artigos/7.php?manual=11