Neon-komputadór

Hypertext Mark prolongável Para cima Idioma (xhtml)

Esta seção provê uma introdução a xhtml codificar, enquanto usando o Ministério dos Negocios Estrangeiros e site da Web de Cooperação como um exemplo. Começa com descrever a história e características principais de xhtml antes de passar a explicar o próprio código. Codificando é introduzido inicialmente em termos de estrutura e é projetado, os elementos do xhtml encabeçam e então os elementos do corpo de xhtml. Esta seção discute Cascateando Folhas de Estilo e webpages dinâmico finalmente projetando e idiomas de webscripting então. O exemplo de falta ao longo da discussão é o site da Web para o Ministério dos Negocios Estrangeiros e Cooperação.

Como descrito no segundo capítulo deste manual, nos principio de 1990s viram a introdução do World Wide Web à Internet. Desde então a maioria dos bilhões de documentos que nós sabemos como webpages foram escritos em o que é chamado Hypertext Mark-para cima Idioma, ou html. Isto é descrito como um sgml (Padrão Generalizou Idioma de Remarcação) aplicação que conforma à Organização de Padrões Internacional ISO 8879, sgml foi aproximadamente desde o meio-1980s e provou ser bastante estável. Porém, não é particularmente complexo e isto inibiu seu desenvolvimento. Ainda html trabalhou bem por muitos anos suas limitações levaram proprietários de organizações a somar os próprios padrões para vestir as necessidades (por exemplo o Hypertext Remarcação Idioma Dinâmico, ou DHTML). Não surpreendentemente, isto conduziu a problemas de compatibilidade.

O novo marca-para cima xhtml de idioma busca resolver estes problemas de compatibilidade e complexidade. É muito novo e quase todos webpages não fazem realmente completamente obedeça padrões de xhtml. Não obstante este xhtml é para trás compatível. aplicações de agente de xhtml podem ler documentos de html e documentos de xhtml podem utilizar aplicações (manuscritos e applets) isso confia em ou o html Documente Modelo de Objecto ou o xml Documentam Modelo de Objeto (DOM). As diferenças conceituais fundamentais entre xhtml e html é isso:

(um) xhtml é uma ferramenta de codificação consistente
(b) xhtml é modular em desígnio de forma que o agente mais capaz de aplicação, o mais caracteriza do xhtml documente pode usar e
(c) xhtml é o próximo passo na evolução do World Wide Web - como a variedade de tipo de máquinas que podem acessar a teia aumenta (PDA, móvel 'telefones, computadores, fridges) a necessidade para documentos de teia modulars e consistentes também aumentará.

O Ministério dos Negocios Estrangeiros e Cooperação de Timor - Leste, apesar do facto que seu site da Web é muito simples, está à frente de mais outro governo e site da Web incorporados por causa de seu uso de xhtml.

Como mencionado no capítulo prévio, o modo fácil para projetar um webpage é usar uma ferramenta de webscription, como Microsoft Frontpage (não recomendou), o Compositor de Mozilla (melhor) ou o Dreamweaver de Macromedia (melhor). Ainda estas ferramentas são úteis para ajudar um desenhista de site da Web aspirador em termos de plano, e o tamanho e local de gráficos há dois problemas principais. Primeiramente, nenhum destas ferramentas é xhtml compatível e como tal, até mesmo quando são projetados webpages com estas aplicações, o código ainda deveria ser conferido. Ainda pode ser verdade que muitos webpages são mesmos perdoando de html pobre codifique, esta é prática dificilmente boa e a tempo menos browsers estarão perdoando de tal código. Secundariamente, sendo um programa automatizado eles são normalmente ineficientes, especialmente MS-de primeira página, e produz código que é difícil de ler e editar.

Alguns comentários muito breves devem ser feitos sobre o plano e desígnio de webpages. Seguindo algumas regras simples, um webpage pode ficar mais acessível a outros que são no final das contas o propósito de ter um webpage no primeiro lugar. A primeira regra básica é que um site da Web mais simples é um site da Web melhor e um webpage mais simples é um webpage melhor. Deveriam ser organizados site da Web de uma maneira clara e lógica, com todas as páginas principais acessível do De primeira página. Deveriam ser mantidos site da Web dentro da extensão de actividades do local - não inclui informação que não é directamente pertinente ao tópico que o local é especializado dentro. Com cumprimentos para webpages, armações múltiplas, logotipos animados, um arco-íris de colours - tudo estes distraem o usuário do conteúdo do local e são evitados melhor.

A próxima regra é manter a largura da banda até um mínimo. Assuma que você está projetando um site da Web para pessoas em um quarto país mundial com uma baixa largura da banda conexão de Internet (como Timor Oriental). Evite uso gratuito de gráficos e sons como estes tem mesmas largura da banda consumindo. Como regra geral de dedo polegar, tente manter as páginas principais do site da Web pelo menos até 30 kilobyte em tamanho, e certamente não mais que 60 kilobyte. Em terceiro lugar, onde um fundo colorido diferente é usado, assegura que qualquer texto contrasta bem com isto. Por exemplo, texto azul ou vermelho escuro em um fundo preto tem contraste pobre considerando que verde de lima, lilás ou ouro em preto têm contraste forte. Finalmente, quando um webpage é completado cheque a compatibilidade com o verificador de xhtml (http://validator.w3.org) e em uma variedade de browsers (são recomendados Lince, Aracnídeo, Ópera, Mesilla e Internet Explorer).

Os componentes estruturais de um documento de xhmtl são uma definição de tipo de documento, uma declaração de xhtml, um elemento de cabeça e um elemento de corpo. Elementos são esses comandos que o documento envia ao webbrowser - um elemento consiste em uma etiqueta aberta e uma etiqueta fechada (por exemplo, lt;htmlgt; lt;/htmlgt;). Todos os documentos de xhtml têm que começar com uma definição de tipo de documento. Seguindo que, todo o código de xhtml tem que seguir quatro regras importantes. Primeiramente, deve ser formado" "bem quais meios dentro os que todos os elementos devem ser aninhados o lt;htmlgt;, lt;/htmlgt; elemento. Todos os elementos devem ser aninhados correctamente, enquanto significando que etiquetas não podem sobrepor na declaração. Uma etiqueta que é declarada primeiro tem que fechar por último, segundo tem que fechar segundo-último e assim sucessivamente. Tudo etiquetam nomes devem ser dentro minúscula, e finalmente, todas as etiquetas de elemento têm que fechar.

Há três tipos de documentos de xhtml; rígido, transitivo e frameset. Estas definições definem a estrutura, instalações, elementos e atributos que estão disponível a um documento particular. Um atributo é um parâmetro a um elemento que está definido no tipo de documento que inclui os atributos digite e valor e possíveis valores de falta. Um elemento é uma unidade que estrutura o documento que consiste em etiquetas de elemento. Instalações são os elementos, atributos e significado associados com esses elementos e atributos. Os três tipos de documentos são bastante semelhantes, com a diferença mais importante que é que o DTD transitivo (definição de tipo de documento) permite para alguns formatando características para browsers mais velhos que a versão rígida não provê. O frameset e um tipo de documentousado quando a pessoa quiser dividir um webpage em armações de múltiplo. Durante os próximos anos, o tipo de documento transitivo é recomendado com conversão ao tipo de documento rígido. O frameset documentam tipo não é recomendado.

Todos estes documentos requerem uma definição de tipo de documento. Seguindo este os próximos artigos incluem o html, cabeça e elementos de corpo. O título do documento deve estar presente dentro da cabeça. A cabeça também deveria incluir etiquetas de meta que fazem isto mais fácil para as várias máquinas de procura (google, altavista, hotbot etc) achar e determinar o conteúdo do site da Web. Etiquetas de Meta não têm nenhum efeito em o que é exibido no webbrowser.

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.mfac.gov.tp">
<head>
<title>Minitsry of Foreign Affairs and Cooperation Index Page (English)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
  <meta name="maintained-by" content="Lev Lafayette, [email protected]"></meta>
  <meta name="authorised-by" content="IT Policy Advisor"></meta>
  <meta name="author" content="Lev Lafayette"></meta>
  <meta name="description" content="Ministry of Foreign Affairs and Cooperation, Democratic Republic of East Timor (English page)"></meta>
  <meta name="keywords" content="East Timor, Timur Timor, Timor Lorosa'e, Timor Leste, Foreign Affairs, Cooperation"></meta>
  <meta name="last-modified" content="2003-03-31"></meta>
  <meta name="distribution" content="global"></meta>
</head>

<body>

</body>

</html>

Depois de determinar os conteúdos de lt;headgt; lt;/headgt; elemento para exibir qualquer coisa no corpo de webbowser, conteúdo deve ser colocado dentro o lt;bodygt; lt;/bodygt; elemento. O tipo mais comum de conteúdo é parágrafo e conteúdo de texto e formatando, mesas, inserção de imagens, hyperlinks para outros arquivos, hyperlinks para material dentro da mesma página, e formas de contribuição. Ainda há mais de cem elementos diferentes, esta discussão está um pouco limitada, mas provê uma introdução certamente à maioria do xhtml que codifica exigências. Elementos formatando são trivialmente fáceis: lt;pgt;lt;/pgt; para marcadores de parágrafo, lt;igt;lt;/igt; para itálico, lt;bgt;lt;/bgt; para tipo negrito, lt;h1gt;lt;/h1gt; para texto de cabeçalho grande (até lt;h6gt;lt;/h6gt; para cabeçalhos muito pequenos), lt;centergt;lt;/centergt; para texto de centro, lt;ulgt;lt;/ulgt; e lt;olgt;lt;/olgt; para unordered e ordenou listas, lt;ligt;lt;/ligt; para artigos de lista, lt;hrgt;lt;/hrgt; para separadores de regra horizontais, lt;brgt;lt;/brgt; para fraturas de linha, texto de preformatted com lt;pregt;lt;/pregt; e assim por diante. Mesas são um pequeno mais enganadoras. As características fundamentais são a declaração da mesa e seu corpo (lt;tablegt;lt;/tablegt;, lt;tbodygt;lt;/tbodygt;), filas da mesa lt;trgt;lt;/trgt;, e os conteúdos expressaram dentro de colunas como lt;tdgt;lt;/tdgt; (dados de mesa).

A inserção de imagens requer a declaração da imagem e o local da fonte de imagem e muito importantemente um "alt" ou declaração de texto de alternativa, por exemplo, lt;src img = alt "image.jpeg" = name"gt;lt;/img"gt;. Hyperlinks para outros arquivos pode estar dentro do mesmo servidor (relativo) ou em um webserver diferente (absoluto). Em ambos os casos, a referência entra seguida pelo artigo de ligação primeiro (que pode ser uma imagem ou algum outro objeto), por exemplo, lt;a href = "hypertextlink.html"gt;Linkname lt;/agt;. é valor que nota aquele e-mail une trabalhe como hypertext une (por exemplo, lt;a href = "mailto:emailaddress"gt;EmailAddressName lt;/agt;. Hyperlinks dentro do mesmo documento operam mais adiante dentro de um marcador de nome de âncora de um ponto um ponto na página (por exemplo, lt;a href = "#AnchorNamegt;Linkname lt;/agt; e no local de ligação lt;a name = "AnchorName"gt;Linkname lt;/agt;.

Dentro destes formatando e unindo elementos há adicional comanda que formato adicional os elementos específicos. Por exemplo, podem ser apresentadas imagens ou colunas de uma mesa com um tamanho particular, ou como pixels absoluto ou como uma porcentagem da página. Um usuário pode querer caráter podem ter uma fonte preferida, ou pelo menos fonte-tipo. O código seguinte, de primeira página do Ministério de Relações exterior e Cooperação, exibe todas estas opções como exemplos:

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

<title>Ministry of Foreign Affairs and Cooperation, East Timor: Index Page (English)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
  <meta name="maintained-by" content="Lev Lafayette, [email protected]"></meta>
  <meta name="authorised-by" content="IT Policy Advisor"></meta>
  <meta name="author" content="Lev Lafayette"></meta>
  <meta name="description" content="Ministry of Foreign Affairs and Cooperation, Democratic Republic of East Timor (English page)"></meta>
  <meta name="keywords" content="East Timor, Timur Timor, Timor Lorosa'e, Timor Leste, Foreign Affairs, Cooperation"></meta>
  <meta name="last-modified" content="2003-04-16"></meta>
  <meta name="distribution" content="global"></meta>
</head>

<body>
<table width="100%" border="0">
  <tbody>
    <tr>
      <td width="17%"><a href="index.html"><img src="TLlogo.jpg"
 alt="Logo" width="115" height="119"></a></td>
      <td width="83%">
      <h1 align="center"><font face="Arial, Helvetica, sans-serif">Ministry
of         Foreign Affairs and Cooperation<br></br>
East Timor</font></h1>
      </td>
    </tr>
  </tbody>
</table>

<hr></hr>

<p align="center"><font face="Arial, Helvetica, sans-serif"><a href="index.html">Index 
  Page</a> | <a href="about.html">About The Ministry</a> | <a href="travel.html">Travel 
  Information</a> | <a href="frelations.html">Foreign Relations</a> | <a href="archive.html">Document 
  Archive</a> | <a href="links.html">Links</a></font></p>
<p align="center"><font face="Arial, Helvetica, sans-serif"><a href="indexp.html">Portuguese</a> 
  | <a href="indext.html">Tetun</a> | <a href="indexb.html">Bahasa</a> | <a href="index.html">English</a> | <a href="search.html">Search</a></font></p>
<p align="center">Please note not all language links are operative at this stage</p>
<hr></hr>
<p align="center"><b><font face="Arial, Helvetica, sans-serif">Community Self Help Program In Gleno</font></b></p>
 
<p>The New Zealand Aid funded US$10,000 for the rehabilitation of Kinder Garden in Gleno. A Community Management Committee, under the auspice of the District Administration of Ermera, was set up to manage the fund.<a href="media0304.html"> More</a></p>

<p align="center"><b><font face="Arial, Helvetica, sans-serif">Ramos-Horta Pleased With Discussions in Rome</font></b></p>
 
<p>Foreign Affairs and Cooperation Minister Dr. Jose Ramos-Horta ends his first official visit to Italy on 28 March on a "very positive note" with meetings with the Speaker of the Italian Parliament, the Hon. Pierre F.Casini, followed by a working lunch in the Ministry of Foreign Affairs, hosted by the Deputy Minister for Foreign Affairs Ms Margheritta Boniver.<a href="media0303.html">More</a></p>

<p align="center"><b><font face="Arial, Helvetica, sans-serif">Foreign Affairs Minister Ramos-Horta Meets Vatican's Counterpart</font></b></p>
 
<p>Dr. Jose Ramos-Horta, the 1996 Nobel Peace Prize Laureate and Senior Minister of Foreign Affairs and Cooperation, met this morning in the Vatican City with his counterpart, Cardinal Tourain.<a href="media0303.html">More</a></p>

<p align="center"><b><font face="Arial, Helvetica, sans-serif">Timor-Leste to Attend the Second Bali Ministerial Conference</font></b></p>
 
<p>Lisualdo Gaspar, Office in charge (OIC) for Regional Affairs, will leave on 26th March 2003 to Jakarta to attend the Preparatory Meeting (PREMET) of the Second Bali Ministerial Conference on People Smuggling, Trafficking in Person and Related Transactional Crimes, which will held in Jakarta on 27th March 2003.<a href="media0303.html"> More</a></p> 

<p align="center"><b><font face="Arial, Helvetica, sans-serif">Dr. Ramos-Horta to Attend the 7th Intenational Students Festival in Trondheim</font></b></p>

<p align="left">The Senior Minister Dr. Jose Ramos-Horta, Minister for Foreign Affairs and Cooperation, Nobel Peace Price Laureate will be attending the 7th International Students Festival in Trondheim  (ISFiT) Oslo Norway, on 13th and 14th of March 2003.<a href="media0303.html"> More</a></p>

<p></p> 
<hr></hr>

<p><center>Ministry of Foreign Affairs and Cooperation, GPA Building #1, Ground Floor, Dili, East Timor</center></p>
<p><a href="http://validator.w3.org/"><img src="valid-xhtml10.gif" alt="valid XHTML 1.0!" width="96" height="32"></img></a>
   <a href="http://www.anybrowser.org/"><img src="enhanced.gif" alt="use any browser!" width="96" height="32"></img></a></p>
<p>Site scripted by <a href="mailto:[email protected]">Lev Lafayette</a>. Last update May 6, 2003</p>
</body>
</html>

Alguns caráter especiais em xhtml que um usuário deveria estar atento inclua o seguinte: & cópia; para o sinal protegido por direitos autorais, & #8482 para a marca registrada assinam, & lt; para o menos que sinal (<), & gt; para o maior que sinal (>), & ampère; para o ampersand (&), e um número do Latino-1 caráter fixou, enquanto incluindo, & aacute; & Aacute; & eacute; & Eacute; & iacute; & Iacute; & oacute; & Oacute; & ntilde; & Ntilde; & otilde; & Otilde; para á, Á, é, É, í, Í, ó, Ó, ú, Ú, ñ, GI õ, Õ. Comentários são expressados por lt;!--comenta aqui--gt;.

Um método para unificar formatando por um site da Web está Cascateando Folhas de Estilo (CSS). Estes são prefixados estilos que definem como são exibidos elementos de xhtml. Eles são armazenados independentemente do webpage atual que une aos arquivos de css. Eles são assim-nomeados porque definições de estilo múltiplas "cascateiam" em um, de acordo com a falta de browser, a folha de estilo externa, a folha de estilo interna (dentro do lt;headgt; elemento) e finalmente o inline nomeiam (qualquer outra coisa dentro do lt;htmlgt; etiqueta. Em geral é muito porém melhor para ter só uma folha de estilo por site da Web que pode ser alcançado por desígnio cuidadoso.

São unidos stylesheets externo em um documento de xhtml dentro o lt;headgt; elemento com o lt;linkgt; elemento, with"rel" e "tipo" atribui, por exemplo, lt;link rel = "stylesheet" digitam = href de "text/css" = "stylesheet.css"gt;lt;/linkgt;. Stylesheets pode ser escrito em qualquer editor de texto e não deveria conter nenhum elemento de html. Eles devem ser salvados com a extensão de arquivo. css. folhas de estilo Internas através de comparação, exista dentro o lt;cabeçagt; elemento e é marcado pelo começo e fim do lt;estilogt; elemento. O elemento abre com um tipo = atributo de "text/css." Inline nomeiam é invocado como um atributo a um elemento (por exemplo, lt;p nomeiam = "col: green"gt;lt;/pgt;. o uso deles/delas não é recomendado como eles confundem apresentação com conteúdo.

São feitas folhas de estilo cascateando de um seletor, uma propriedade e um valor. Seletores são os elementos de html que serão definidos, por exemplo, lt;pgt;, lt;bodygt; ou, propriedades são os atributos do elemento que está definido, por exemplo, fonte ou texto-alinha, e valores são as informações analisadas gramaticalmente à propriedade, por exemplo, "serifa de sans" ou "preto". A propriedade e valor está separado por um cólon e cercou através de parênteses ondulados por exemplo, p {text-align : "left"} ou body {background : black}. Podem ser designados valores múltiplos a propriedades com um ponto-e-vírgula que os separa. Podem se agrupar seletores múltiplos com cada separado por vírgulas. Por exemplo, o seguinte é o jogo de elementos de cabeçalho que são exibidos como centrado e vermelho: h1, h2, h3, h4, h5, h6 {color : "red", text-align : "center"}

Podem ser determinados estilos múltiplos para cada elemento pelo seletor de classe que define um atributo de html novo. Obviamente, um elemento de html não pode ter duas classes ao mesmo tempo - texto em um parágrafo não pode ser alinhado à esquerda e para o centro ao mesmo tempo! Seletores de classe são notáveis somando um ". classname" para para o seletor (por exemplo, p.right) e notando a classe no manuscrito de xhtml como um atributo (por exemplo, lt;p class="right"gt;lt;/pgt;. O atributo de html é realmente opcional - a pessoa pôde, por exemplo, declare ". centro" em um CSS e assim tem todo o html de "class=center" atribui centred. Em comparação, ainda o seletor de classe aplica a vários elementos em uma página, o seletor de id só aplica a um elemento. Está definido na folha de estilo por um "#idname" para o seletor (por exemplo, #heading {color : "red"} e no webpage como um atributo (por exemplo, lt;h1 id=headinggt;Red Headerlt;/h1gt;lt;/ h1gt;. Finalmente, em relação a CSS, há também "pseudo-classes". Estes são declarados como selector:pseudoclass {property: value}. Um exemplo útil é o uso deles/delas como âncoras que mudam o colour de texto quando um rato mover em cima do texto por exemplo, a:link {color: blue}, a:visited {color: green}, a:hover { color: red }, a:active {color: gold}. Nota que a:active têm que vir depois que a:hover e a:hover tenham que vir atrás de a:link.

Formas em xhtml, webpages dinâmico e idiomas de webscripting estão todo relacionados. Formas permitem os usuários para entrar em dados, quando é enviado então ao servidor e processou por uma Interface de Portal Comum (a CGI) programa ou manuscrito. Assim, o webpage fica dinâmico, quer dizer, seu conteúdo e apresentação muda de acordo com dados processados pelo programa de CGI que então produz a informação atrás ao webserver. Os elementos de xhtml relativo a formas incluem lt;formgt;lt;/formgt; que abre e fecha uma forma e inclui a ação de atributos, método e enctype', lt;inputgt;lt;/inputgt; que define um campo de contribuição e inclui o nome de attibutes, tipo, valor, conferiu, rádio, tamanho, maxlength, submete, reajuste lt;selectgt;lt;/selectgt; que define uma lista de seleção com o nome de atributos, múltiplo e tamanho, lt;optiongt;lt;/optiongt; dentro um lt;selectgt; definindo uma seleção de lista de seleção e com o atributo selecionado e lt;textareagt;lt;/textareagt; definindo uma janela de texto-contribuição com os atributos nomeiam, filas, cols.

Um exemplo muito simples vem do Ministério de site da Web de Relações exterior:

lt;form method=get action="http://www.google.com/search"gt;
lt;pgt;Search the Ministry of Foreign Affairs and Cooperation using the Google search engine:lt;brgt;lt;/brgt;
lt;input type=text name=q size=40 maxlength=255 value=""gt;lt;/inputgt;
lt;input type=submit balue="search Ministry of Foreign Affairs and Cooperation"gt;lt;/inputgt;
lt;input type=hidden name=domains value="www.mfac.gov.tp"gt;lt;/inputgt;
lt;input type=hidden name=sitesearch value="www.mfac.gov.tp"gt;lt;/inputgt;lt;brgt;lt;/brgt;
lt;a href="http://www.google.com/advanced_search?site:www.mfac.gov.tp&hl=en&lr=&safe=off&domains=www.mfac.gov.tp&sitesearch=www.mfac.gov.tp"gt;Advanced Searchlt;/Agt; lt;/pgt; lt;/formgt;

Porque um programa de CGI é executável, é basicamente o equivalente de deixar um programa corrido na máquina de cliente que às vezes é um risco de segurança. Podem ser escritos programas de CGI em quaisquer das linguagens de programação populares disponível inclusive C/C++, Visual Básico, PERL ou AppleScript. Depois neste capítulo há uma discussão nos dois a maioria das linguagens de programação comuns disponível hoje, C e Visual Básico.