Marcelo Torres

Entradas etiquetadas como ‘html’

Quantos elementos HTML você pode digitar em 5 minutos?

01/03/2009 · 1 Comentário

quiz html

O site oneplusyou.com oferece um quiz para você testar seu conhecimento sobre HTML, o desafio é o seguinte: Quantos elementos HTML você consegue digitar em 5 minutos?, clique aqui e faça o teste!

Categorias: (x)html/css
Etiquetado: ,

do HTML ao XHTML…

29/01/2008 · Deixe um comentário

Como eu já esperava num foi tão difícil a transição do HTML para o XHTML, isso porque não existe muita diferença nessas 2 linguagens de marcação, até porque o XHTML é um aperfeiçoamento das Tags e regras HTML4.1, ela(a XHTML)é uma aplicação XML,

“com XML você cria suas próprias tags e atributos para escrever seu documento web. Isto significa que é você quem cria sua linguagem de marcação. XHTML foi criado dentro deste conceito e por isso é uma aplicação XML. As tags e atributos do XHTML foram criadas (“inventadas”) aproveitando-se as nossas conhecidas tags e atributos do HTML 4.01 e suas regras.(…)

Qual a finalidade do XHTML ?

XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em português resulta em Linguagem Extensível para Marcação de Hipertexto, uma aplicação XML, escrita para substituir o HTML e nada mais é do que um HTML “puro, claro e limpo”.(…)”

XHTML é a linguagem da web do futuro desde já a disposição de projetistas e desenvolvedores web.

eis abaixo algumas diferenças ao escrever o código em XHTML:

  • todas as tags devem ser escritas em letras minúsculas;

  • as tags devem estar convenientemente aninhadas;

  • os documentos devem ser bem formados;

  • o uso de tags de fechamento é obrigatório;

  • elementos vazios devem ser fechados;

  • diferenças para os atributos.


fonte:http://www.maujor.com/tutorial/xhtml.php

Em relação aos Doctype escreve-se assim:

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Diferenças entre Strict, Transitional, Frameset
Strict
Escolhendo um DOCTYPE Strict quer dizer que seu código está seguindo á risca os padrões, sem nenhum tipo de erro de validação
Transitional
Escolhendo um DOCTYPE Transitional é quando você está fazendo uma transição de uma forma antiga de marcação para uma mais moderna
<Frameset
Escolhendo um DOCTYPE Frameset é para quando você usa Frames em sua página.

fonte:http://www.pinceladasdaweb.com.br/blog/2006/05/29/doctype-pra-que-te-quero/

…pra finalizar eu digo que, usando a XHTML com certeza você tera menos “dor de cabeça” ao construir um layout! Para se aprofundar nesse assunto siga essas duas fontes que citei acima, elas são 100% recomendadas

valeu pessoal até a próxima!

Categorias: (x)html/css · Desenvolvimento · Tableless · Web Standards
Etiquetado: ,

Image-replacement…

27/01/2008 · Deixe um comentário

Essa é uma técnica usada para substituir uma texto, por uma imagem, isso faz com que o texto não fique visivel ao úsuario, mas fique visivel ao browser, conservando assim a acessibilidade. Há várias formas para se executar essa técnica, porém vou postar aqui a que eu uso e acho mais simples:

1º monte o documento (X)HTML

...
<body>
<h1>Image-replacement</h1>
</body>
...

Onde h1 é o elemento que será substituido pela imagem

Agora faça a folha de estilo:

h1{
background: url(image-replacement.jpg) no-repeat;
text-indent:-9999px;
width:250px;
height:100px;
overflow:hidden;
}

  • background terá a imagem que substituirá o texto

  • text-indent é o que fará o texto sumir, neste caso o texto será deslocado -9999px da sua posição original, parece absurdo esse valor, mas é pra garantir que em monitores com resolução maior, ou até dois monitores trabalhando junto o texto não apareça

  • overflow é apenas para garantir que o texto não fique vísivel mesmo!

  • width e height é apenas o tamanho da imagem que você escolher

Faça o teste usando outras formas e tags, ou seja é só adaptar ao que se torne necessário e como eu já disse há dezenas de maneiras de se fazer uma Image-Replacement, para saber mais visite esse link:

http://www.tableless.com.br/image-replacement-x-imagens

Valeu pessoal até a proxima!

Categorias: (x)html/css · Acessibilidade · Tableless · Tutoriais · Web Standards
Etiquetado: , , ,