Estructura de Una Pagina Web

LENGUAJES DE MARCAS Y SISTEMAS DE GESTIN DE INFORMACIN
02 LENGUAJES PARA LA WEB
Estructura de una pgina web (01)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es lang="es>
<head>
<title>Ttulo</title>
<meta http-equiv = "Content-Type"
content = "text/html;charset=UTF-8"/>
</head>
<body>
Contenido de la pgina web
</body>
</html>
14

DOCTYPE: permite establecer el documento
DTD que se va a utilizar para validar la pgina.
En este caso XHTML 1.0 Transacional.
html: marca principio y final del documento.
- xmlns: especifica el espacio de nombres al que
pertenecen las etiquetas.
- xml:lang: indica el lenguaje en que est escrito
la pgina.
- lang: tambin sirve para indicar el lenguaje de
que la pgina. Es opcional pero recomendable para
advertir a todos los navegadores.
Cdigos: es, es-ES (espaol Espaa), en (ingls),
en-US (ingls USA), fr (francs), etc.
15


head: establece el bloque de cabecera donde se
incluyen las propiedades de la pgina, ttulo, estilos
CSS, cdigo Javascrip y cualquier elemento que se
incluya en la pgina.
- title: ttulo de la pgina.
- meta: establece el tipo de codificacin de texto
que utiliza la pgina siendo el ms recomendable
UTF-8 (unicode de 8 bits).
body: establece el bloque body que es el que
incluye el contenido que se mostrar en la pgina
web.
16

HTML 5
<!DOCTYPE html>
<html lang = "es>
<head>
<title>Ttulo</title>
<meta charset = "UTF-8"/>
</head>
<body>
</body>
</html>
17


En HTML5 se tiende a simplificar:
La etiqueta DOCTYPE nicamente indica que se
trata de un documento HTML sin establecer el
documento DTD asociado.
La etiqueta meta para indicar el cdigo de
caracteres es mucho ms simple.
El lenguaje se ndica utilizando el atributo lang
nicamente.
El resto de elementos es idntico.
18

Atributos comunes
Son propiedades que se pueden establecer para
cualquier elemento.
id: es un atributo fundamental que permite
identificar a los elementos.
Deben comenzar por letra y pueden contener letras
y nmeros pero no espacios en blanco.
Deben ser nicos, es decir dos elementos de una
pgina no pueden tener el mismo id.
title: permite poner un ttulo al elemento.
lang: indica el lenguaje del elemento y slo es
necesario cuando sea distinto al de la pgina.
19


Atributos comunes
xml-lang: su significado es el mismo que lang
pero es entendible por el software analizador de
XML, slo se utiliza en XHTML.
dir: indica la direccin de lectura del texto
contenido en el elemento:
- ltr (left to right): de izquierda a derecha.
- rtl (right to left): de derecha a izquierda.
class y style: permiten especificar formato de
tipo CSS al elemento.
20

Codificacin de caracteres
El cdigo utilizado tradicionalmente para la
representacin de caracteres en un ordenador es el
ASCII (7bits). Este cdigo es muy limitado ya que
slo permite representar 128 caracteres diferentes.
Los navegadores compatibles con HTML 4 y
posteriores pueden utilizar cdigos ms extensos
como ISO-8859-1 y Unicode (UTF-8, UTF-16)
capaces de representar cualquier carcter nacional
fuera de ASCII.
Sin embargo a la hora de publicar contenido en la
web puede que nos encontremos con que algunos
caracteres (fuera de ASCII) no se representan
21
bien.


El problema surge cuando nuestra pgina es
traducida en un servidor web que tiene
configurado un charset diferente al nuestro, en
cuyo caso las etiquetas meta de nuestro html son
ignoradas y los caracteres fuera de ASCII pueden
ser representados de forma incorrecta.
Una solucin podra ser evitar cualquier carcter
fuera de ASCII, pero eso limitara mucho los
caracteres que se pueden representar.
Otra solucin es utilizar una notacin especial para
representar los caracteres que puedan suponer un
problema: entidades.
22

Adems las entidades sirven tambin para
representar aquellos caracteres que podran ser
interpretados por el navegador.
Los caracteres que obligatoriamente se tienen que
representar por medio de entidades son:
Carcter
Entidad
"
'
&
&
<
<
>
>
23


Sin embargo el auge de Unicode hace que la mejor
solucin sea optar por alguna de sus codificaciones
UTF-8, UTF-16 que permiten utilizar los smbolos
nacionales, y en caso de que la informacin no se
muestre bien modificar la configuracin de nuestro
servidor web de manera que no haya un charset
predefinido obligando as a utilizar la codificacin
que se establezca en las etiquetas meta de la
pgina.
Por ejemplo en Apache deberamos editar el
archivo httpd.conf incluyeno la lnea:
AddDefaultCharset off
24

Espacios en blanco
Cuando escribimos un texto en una pgina web
hay que tener en cuenta que los tabuladores y
saltos de lnea se omiten, y si tenemos espacios en
blanco consecutivos slo el primero ser tenido en
cuenta.
<body>
Contenido
de
la
pgina
web
</body>
Mostrar:
25


Espacios en blanco
Para aadir espacios en blanco al texto y que esos
espacios sean respetados por el navegador hemos
de utilizar la entidad &nbsp.
<body>
Contenido de la&nbsp&nbsp&nbsp&nbsppgina&nbsp&nbspweb
</body>
Mostrar:
26

Estructura de Una Pagina Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Estructura de Una Pagina Web

Diunggah oleh

Hak Cipta:

Format Tersedia

LENGUAJES DE MARCAS Y SISTEMAS DE GESTIN DE INFORMACIN

02 LENGUAJES PARA LA WEB

Estructura de una pgina web (01)

Estructura de una pgina web (02)

LENGUAJES DE MARCAS Y SISTEMAS DE GESTIN DE INFORMACIN

Estructura de una pgina web (03)

Estructura de una pgina web (04)

LENGUAJES DE MARCAS Y SISTEMAS DE GESTIN DE INFORMACIN

Estructura de una pgina web (05)

Estructura de una pgina web (06)

LENGUAJES DE MARCAS Y SISTEMAS DE GESTIN DE INFORMACIN

Estructura de una pgina web (07)

Estructura de una pgina web (08)

LENGUAJES DE MARCAS Y SISTEMAS DE GESTIN DE INFORMACIN

Estructura de una pgina web (09)

Estructura de una pgina web (10)

LENGUAJES DE MARCAS Y SISTEMAS DE GESTIN DE INFORMACIN

Estructura de una pgina web (11)

Estructura de una pgina web (12)

LENGUAJES DE MARCAS Y SISTEMAS DE GESTIN DE INFORMACIN

Estructura de una pgina web (13)

Anda mungkin juga menyukai