Olá.
Esta é a nossa primeira matéria falando sobre XHTML. Nela aprenderemos:
- A identificar TAGs XHTML
- Identificar os atributos de uma tag
- Aplicar determinados tipos de tag
Antes de falar de tags falaremos sobre DTD ( Definição de tipo de documento).
A DTD é na realidade a essência do XHTML. Ela é quem controla e executa os comando do XHTML. Sem ela as coisas não seriam como são. Em outras palavras DTD é um arquivo com definições do que se fazer quando um determinado comando é dado. A coisa é mais profunda, mas isso basta para iniciar nosso trabalho.
Vamos lá.
XHTML = eXtensible Hypertext Markup Language
Identificar Tags XHTML.
Leia o Seguinte Texto
Aprender XHTML é fácil na ETUTORIAIS.NET!
O texto acima contém algumas palavras, e podemos destacar as letras em negrito: ETUTORIAIS.NET
Isso é o texto que você ver. mas o que há na realidade por trás desse texto?
vejamos abaixo
------------------------
Aprender XHTML é fácil na <b>ETUTORIAIS.NET!</b> ( observe que há tags (<b> e um </b>))
------------------------
O que é uma tag?
Na minha concepção, tag é uma estrutura delimitadora de comandos
como se identificar uma tag?
uma tag é identificada pela presença de um comando dentro dos seguintes sinais <(menor que)e > (maior que)
no exemplo acima podemos ver o seguinte comando <b>. esse comando é o comando de abertura que informará a DTD que o texto ficará em negrito. Vemos também o mesmo comando <b> só que no fim com </b> essa tag é chamada tag de fechamento que informa a DTD o fim do comando.
como disse acima tag é uma estrutura delimitadora de comandos, se eu inicio uma coisa ela tem que terminar.
Sintaxe da coisa
Para iniciarmos XHTML necessitamos saber as "regras do jogo". Vejamos algumas coisas que definem que documento é XHTML.
1 - Todos os documentos XHTML necessitam ter as tags <html>, <body> e <title>.
2 - Todas as tags necessitam tem uma tag de fechamento
3 - As tags podem ser aninhadas(agrupadas) dentro de outras tags
4 - As tags devem ser compatíveis com a linguagem XHTML
5 - Todas as tags e seus atributos devem ser escritos em letras minúsculas.
Obs: Antes, na linguagem HTML, você poderia escrever as tags em minúsculas ou em maiúsculas pois não havia distinção.
Na Prática
Falamos um pouco sobre tudo isso. mas a realidade, como se pratica?
O que você presica para exercitar as coisas que serão postadas aqui?
Bem você necessitará apenas de um programa o bloco de notas do windows.
Então vamos à prática. abra o bloco de notas do windows.
vamos criar nossa primeira página xhtml.
Na próxima matéria veremos toda aplicação da estrutura de um documento XHTML no momento algumas tags já resolvem.
Vamos Criar a Seguinte página.
O texto que digitamos acima contém uma tag que deixa o texto em itálico. Nele há uma tag de abertura e uma de fechamento. veja o código abaixo.
---------------
Aprender XHTML no site <i>etutoriais.net</i> é fácil, pois o conteúdo é dado de maneira fácil e objetiva, facilitando assim o entendimento da matéria em questão.
--------------
sem a tag de fechamento veriamos o texto da seguinte forma.
o código seria o seguinte
------------------------
Aprender XHTML no site <i>etutoriais.net éfácil, pois o conteúdo é dado de maneira fácil e objetiva, facilitando assim o entendimento da matéria em questão.
------------------------
você também pode perceber um problema . ocorreria um erro se o caractere / estivesse em falta na segunda tag. a de fechamento.
Obs: Nem todas as tags necessitam ser fechadas em HTML, mas por questão de sintaxe em XHTML sempre haverá uma tag de fechamento.
ex: O comendo <P> ( inicia um novo parágrafo) em HTML não necessita de tag de fechamento, mas em xhtml é necessário o fechamento do mesmo.
isto també se aplica a algumas tags que não possuem tag de fechamento, no caso <hr>(linha horizontal) e <br> ( quebra de linha) .
para resolver isso deve escrever da segunte maneira. ( atalho)
<hr / > ( hr, seguido de um espaço + barra antes do sinal de >)
Aninhamento de Tags. (agrupamento)
Podemos aninhar( combinar ou agrupar) tags, mas devemos obedecer alguns critérios.
por exemplo.
o código para este exemplo é o seguinte
-----------------------------------
Seus Olhos são <font color="green"><b><i>Verdes.</i></b></font> que Lindo!
----------------------------------
Veja que há as seguintes tags: <font> = Fonte - <b> Negrito e <i> Itálico
Veja também que há uma ordem na distribuição. essa ordem deve ser obedecida inversamente nas tags de fechamento por exeplo.
a tag <font>font é a primeira, a <b> a segunda e <i> a terceira ( as tags que iniciam esse aninhamento pode ser qualquer não importa a ordem, só que na de fechamento elas devem obedecer a ordem inversa que elas foram colocadas.)
basta observar a tag que foi usada por último (<i>) deve inicair as tags de fechamento</i>
então a ordem de fechamento das tags será a seguinte
</i> - </b> - </font>
Lembrando que isso é a sintaxe para que esse código seja um documento XHTML.
Atributos
No exemplo de aninhamento vimos um exemplo de tag que veio com atributos. você pode não ter entendido, mas a tag fonte veio acompanhada de alguns atributos.
mas o que são atributos?
Atributos são comandos que recebem valores que podem alterar e produzir uma forma variável de resultado dentro de uma tag.
por exemplo
-----------------------------
<font color="green">
----------------------------
<font é a tag e color o atributo, green é o valor do atributo.
Se alterrar o valor do atributo para red, teriamos a variação para a cor vermelha. e assim por diante.
note que há regras para escrever os valores e o atributo.
em html eu poderia escrever da seguinte maneira
<font color=green>
daria certo mas no momento estamos trabalhando em XHTML e por isso devemos escrever da seguinte maneira
<font color="green">
Repare a necessidade de"( aspas) após o sinal de igual.
Mais um exemplo de atributos
veja a seguinte página
Código
------------------------------------------------
O site <b>Etutoriais.net</b> é um dos <font size="+3" color="red"><i><b>melhores</b></i></font> para se aprender XHTML
-------------------------------------------------
Altere os valores para ter resultados diferentes.
Alguns Tipos de Tag
Já conhecemos a estrutura básica de um documento XHTML. agora veremos alguns tipos de tags que iremos utilizar.
primeiro temos que saber que um documento é dividido em duas partes
o Cabeçalho e o corpo. ( cade os membros? rsrsr)
a seção de cabeçalho é a <head> ela contém os elementos que ajudam a identificar o documento e como ele será exibido e percebido pelo navegador.
A seção do corpo é a <body> nela contém os elementos que contém o conteúdo da página.
Tags de Cabeçalho <head>
o Elemento <head> contém diversas tags que fornecem informações a respeito do documento. Embora a maioria desses elementos não apareça para o navegador do usuário, eles são extremamente importantes para a identificação e a organização dos documentos. Vejamos algumas tags da tag <head>
<title>
<base>
<link>
<meta>
Na próxima Aula abordaremos com maior enfoque esses elementos.
veja um exeplo de cabeçalho.
Código
----------------------------
<head>
<title>Apremder XHTML no site etutoriais.net é fácil</title>
<base href="http://www.etutoriais.net/" />
<meta name="keywords"
content="XHTML,HTML, tutoriais,photoshop," />
<meta name="Copyright"
content="2009 - Etutoriais.net" />
</head>
------------------------------
Veja que somente o conteúdo da tag <title> é exibida . isso na aba de título do navegador.
Veja que o elemento < meta> informa quaisquer macanismos de busca da internet basicamente sobre o que o documento trata, e o segundo elemento<meta> imprime as informações de copyright dentro do documento.
Tags de corpo.
Veremos as tags de corpo nos próximos artigos, no momento só necessitamos saber que o corpo é dividido em 4 categorias principais
Bloco - Em linha - Links - Imagens
Bem então vamos lá.
grande abraço e até a próxima aula.
se você acompanhou este tutorial até o fim. saiba que tem uma comunidade destinada a você. ela é recente e vamos ajudar ela a crescer no orkut. clique aqui para isso. assim você poderá ficar em dias com o contéudo postado no site.
Participe também da comunidade geral. Etutoriais.net
