Tag Archives: tag

Flash: Tag Object

Depois do swf gerado é hora de colocá-lo no HTML. No próprio Flash ao apertar o F12 ele publica o filme e já cria um HTML. Tudo muito bom, se não fosse pelo código gerado, muito sujo e não é validado pela W3C.

O código gerado é igual a este:

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0&#8243; width=”550″ height=”400″ id=”Untitled-1″ align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”filme.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#ffffff” />
<embed src=”filme.swf” quality=”high” bgcolor=”#ffffff” width=”550″ height=”400″ name=”Untitled-1″ align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer&#8221; />
</object>

O problema em sí não está na tag object e sim na embed que não é reconhecida pela W3C. Beleza, então eu tiro a tag embed e está tudo certo? Errado.

Primeiramente vamos conhecer mais sobre a tag Object.

A tag object serve para anexar à página algum dos três tipos de dados (objects, images and applets), mas para alguns existe uma tag mais adequada, como por exemplo uma imagem.

The OBJECT element allows authors to specify all three types of data, but authors may not have to specify all three at once. For example, some objects may not require data (e.g., a self-contained applet that performs a small animation). Others may not require run-time initialization. Still others may not require additional implementation information, i.e., the user agent itself may already know how to render that type of data (e.g., GIF images).

link: http://www.w3.org/TR/html4/struct/objects.html#edef-OBJECT

Então respondendo a pergunta acima a tag object sem a embed não irá funcionar, a não ser que o atributo type (que no código acima você percebe que ele está na embed) esteja definido adequadamente. E também seja colocado o atributo data (que funciona igual ao href).

Resulmindo o código acima ficaria assim:

<object type=”application/x-shockwave-flash” data=”filme.swf” width=”550″ height=”400″>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”filme.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#ffffff” />
</object>

Pois então com o exemplo acima, além de validar sua página o código fica mais limpo e enxuto.

Mais sobre:

http://www.maujor.com/tutorial/adeus-embed.php

CSS – O que é?

CSS (Cascading Style Sheet) são folhas de estilo em cascata.

Pra que servem?

Servem para definir um estilo para o seu documento Web (HTML, XHTLM, por exemplo). Ao invez de você ter que toda hora definir dentro da tag usada os atributos desejados, basta fazer isso uma vez pelo CSS.

Ex.: Se você quer que toda a tag <p> tenha a fonte de cor azul, Verdana e tamanho 12px. Basta configurar ela no CSS dessa maneira:

p {
font: 12px Verdana;
color: blue;
}

E assim todas as tag <p> terão essa mesma característica. Caso você não queira que isso se aplique a todas mas sim em apenas algumas tag <p>, você pode definir uma classe com tais características e depois dentro da tag chamar essa classe.

Ex.:

.minhaclasse {
font: 12px Verdana;
color: blue;
} repare que para definir uma classe é necessário começar com um ponto.

e na tag:

<p class=”minhaclasse“> Meu parágrafo aqui </p>

Como que eu uso o CSS?

Há duas maneiras de aplicar uma folha de estilo em seu documento, uma é definir na própria página, ou chamar um arquivo externo de extensão .css. A segunda opção posibilita muito mais flexibilidade, devido a que você não irá precisar mudar os estilos página por páginas, caso venha querer mudar a “cara” do seu documento, e sim só alterar uma vez o próprio arquivo .css.

Sintaxe:

A sintaxe do CSS é muito simples. Primeiro coloca o nome da tag que queira definir o estilo abra “{” coloca os atributos e depois fecha “}”.

Os nomes das classes devem ser iniciados com um “.” e dos ID com “#“.

Ex.:

body {
background: black;
}

.minhaclasse {
color: #FF0000;
}

#meuDiv {
width: 100px;
height: 200px;
}

mais aqui

A diferença primordial entre class e id, é que a mesma classe você usa mais de uma vez em tags diferentes, enquanto o id é usado uma única vez – por uma <div> por exempo – pois o nome declarado no id serve para identificar aquela tag (exclusiva), como era feito pelo atributo name.

Definindo o estilo pela própria página:

Se você não ver porquê criar um arquivo externo ou que só vai precisar usá-lo em uma página, basta colocar o código do CSS dentro da tag <style> que por sua vez deve ficar dentro da tag <head> passando o atributo type como text/css.

Ex.:

<html>
<head>
<title>Meu Título</title>
<style type=”text/css”>
<!–
.minhaclasse {
font: 12px Verdana;
color: blue;
}
–>
</style>
</head>
<body>
<p class=”minhaclasse“> Meu parágrafo aqui </p>
</body>
</html>

Repare que o CSS propriamente dito vem dentro de um comentário ( <!– –> ), isso acontece para evitar bugs de alguns browser antigos, mas será ignorados pelos browsers mais novos.

Definindo o estilo através de um arquivo externo:

Pode-se chamar um arquivo externo de duas maneiras, uma já utrapassada e pouco usada e a mais semânticamente correta usando a tag <link> – tag na qual adiciona informações externas na página.

Primeira:

<style type=”text/css”>
<!–
@import: url(arquivo.css);
–>
</style>

Segunda, e recomendada:

<link rel=”stylesheet” href=”style.css” type=”text/css”/>

Para entender um pouco mais do porquê de tanto atributos vamos analisar um-por-um :

href: igual ao da tag <a>, define o caminho.

rel: vem do ingles relationship (relacionamento), com o atual arquivo especificado no href.

A tag <link> também deverá estar contida na tag <head>.

Alguns dos atributos mais utilizados:

background: cor; /* cor do fundo da página */
color: cor; /* cor da fonte */
font: familia; /* ex.: Verdana, Arial, Tahoma */
margin: top right bottom left; /* margin e os sentidos */
padding: top right bottom left; /* espaçamento dentro e os sentidos */
width: valor /* largura */
height: valor /* altura */
text-align: valor /* alinhamento do texto – center, left, right, justify */
border: largura tipo cor /* largura, tipo (solid, dotted, dashed), cor */

mais sobre:

Maujor.com
Maujor.com Tutorial
W3.org
W3.org Use Link
W3schools.com
W3schools.com examples
Wikipedia.org

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