Tema 1

Roco Manso Gil Pgina 1 de 16
Definicin de Lenguaje de Marcas

Son aquellos que combinan la informacin (texto, imgenes, sonido,etc) con marcas
(etiquetas) que indican la estructura del texto o la forma de representarlo.
<etiqueta de apertura> contenido</etiqueta de cierre>
En Html
<h1>hola</h1>
En Xml
<telefono> 111111111</telefono>
Siendo las etiquetas h1 y telefono
Siendo el contenido hola y 111111111
Otro concepto son los atributos se encuentran dentro de la etiqueta de inicio e indica
las propiedades que pueden llevar asociadas las etiquetas.
<etiqueta de apertura atributo1=valor1 atributo2=valor2..> contenido
</etiqueta de cierre>
A todo se llama elemento, es decir representan estructuras mediante las que se
organizar el contenido del documento o acciones que desencadenan cuando el
programa navegador interpreta el documento
En Html
<body bgcolor=yellow >contenido</body>
En Xml
<telefono tipo=fijo> 111111111</telefono>
Siendo los atributos bgcolor y tipo
Tipos de Lenguajes en el desarrollo de Software
Existen bsicamente dos tipos de lenguajes de desarrollo:
Lenguajes Interpretados: Se conoce como lenguaje interpretado a un lenguaje de
programacin que fue diseado para ser ejecutado por medio de un intrprete, en
contraste con los lenguajes compilados. Tambin se les conoce como lenguajes de
script.
Pagina web - html.
Hojas de estilos - Son ficheros de cdigo que dan estilo a las etiquetas
html.
JavaScript - Es un lenguaje interpretado orientado a las pginas
web, con una sintaxis semejante a la del lenguaje Java.
Lenguajes compilados: Un lenguaje compilado es trmino un tanto impreciso para
referirse a un lenguaje de programacin que tpicamente se implementa mediante un
compilador. Esto implica que una vez escrito el programa, ste se traduce a partir de
su cdigo fuente por medio de un compilador en un archivo ejecutable para una
determinada plataforma (por ejemplo Solaris para Sparc, Windows para Intel, etc.).
Diferencias?
Los lenguajes compilados son lenguajes de alto nivel en los que las instrucciones se
traducen del lenguaje utilizado a cdigo mquina para una ejecucin rpida. Por el
contrario un lenguaje interpretado es aquel en el que las instrucciones se traducen o
interpretan una a una siendo tpicamente unas 10 veces ms lentos que los programas
compilados.
Nuestros lenguajes de marcas necesitan un intrprete y es cualquier navegador
(Explorer, Firefox, Crome)
Es diferente los lenguajes de programacin que los lenguajes de marcas, stos no tienen
funciones, variables, etc
Los lenguajes de programacin se pueden dividir:
Sirven para crear una aplicacin: C++, Java
Asociales al desarrollo web:
JavaSript (del lado del cliente, quiere decir que el intrprete est en tu mquina, en
nuestro caso en el navegador)
Php (del lado del servidor), tiene que ser el servidor que llama al compilador de php que
est alli y desde el servidor lo realice.
Organizaciones desarrolladoras
Podemos definir la normalizacin como el proceso de especificacin de normas, para
garantizar el correcto funcionamiento de elementos construidos de forma independiente.
Para la definicin de estas normas existen organismos internacionales, nacionales
incluso organizaciones privadas..
Las organizaciones ms importantes son: ISO, W3C y Open Source
Organizacin Internacional para la Estandarizacin (ISO), es el organismo
encargado de promover el desarrollo de normas internacionales de fabricacin,
comercio y comunicacin . Su funcin principal es la de buscar la
estandarizacin de normas de productos y seguridad para las empresas u
organizaciones a nivel internacional. No se gubernamental, por tanto no tiene
autoridad para imponer sus normas a ningn pas. El contenido de los estndares
est protegido por derechos de copyright y para acceder a ellos el pblico en
general ha de comprar cada documento.
World Wide Web Consortium (W3C) Su funcin principal es tutelar y el
crecimiento y organizacin de la web. Su primer trabajo fue normalizar el
lenguaje HTML, el lenguaje de marcas con el que se escriben las pginas web.
Al crecer el uso de la web, crecieron las presiones para ampliar el HTML. EL
W3C decidi que la solucin no era ampliar el HTML, sino crear una reglas para
que cualquiera pudiera crear lenguajes de marcas adecuados a sus necesidades,
pero manteniendo unas estructuras y sintaxis comunes que permitieran
compatibilizarlos y tratarlos con las mismas herramientas . Este conjunto de
reglas es el XML, cuya primera versin se public en 1998
http://validator.w3.org (elegir la opcin validate_by_upload)
Open Source

Surgi primero el lenguaje de marcas SGML (dcada de los 60) el cual era complejo de
construir , surgi luego HTM (finales de los 80)que se basaba en algunos principios de
SGML, que se caracterizaba por la sencillez de su programacin pero de pocas normas
(era igual cerrar que no cerrar un etiqueta) A mediados de los 90 el consorcio W3C
comenz una iniciativa para intentar dotar a la web de un lenguaje ms potente y que
pudiera dar una estructura semntica a la misma. Para ello marcaron el objetivo de crear
un nuevo lenguaje de marcas basado en SGML y que fuera sencillo como HTML ,
surgiendo en el 1998 XML
XML estableci una nueva normalizacin para HTML dando lugar a XHTML, lo que
constituye hoy en da el esqueleto de cualquier documento web
Los navegadores actuales aun son compatibles con HTML4.0 aunque puede que no
funcionen igual en todos los navegadores o que las versiones nuevas dejen de soportar
HTML puro y duro, obligando a los programadores a hacer en XHTML
XHTML HTML
Necesitamos:
Un editor de texto plano (bloc de notas, notepad (http://notepad-plus-plus.org/),
etc) La extensin de todo fichero es .htm .html
Un navegador
Estructura del documento
<! Declaracion de Tipo de Documento>
<html>
<head>
<title> Titulo de la pgina </title>
Elementos opcionales de la cabecera
</head>
SGML
HTML XML
XHTML
<body>
Contenido del cuerpo
</body>
</html>
Tanto la declaracin de tipo de documento, como las etiquetas html, head y body son
opcionales, pero deben incluirse para que el documento sea correcto y legible.
La declaracin del tipo de documento (DTD) es un conjunto de reglas que
comprueban si el documento con el que trabajamos es correcto. Al indicar la DTD al
principio del documento le decimos al navegador cmo interpretar adecuadamente el
cdigo. Existen tres posibilidades: estricta, de transicin y con marcos
Cabecera <head> </head>
Lo que va entre <head> y </head> (cabecera) determina el comportamiento general de
la pgina en relacin al navegador, servidor y buscadores
El contenido de titulo es lo que aparece en la barra de ttulo, es importante el nombre
para que los buscadores la localicen y debe ir lo primero en la cabecera.
El resto de elementos de la cabecera se pueden considerar en tres grupos:
-Metainformacin: intrucciones que definen aspectos claves del documento <meta>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Solo aparecen caracteres del alfabeto ingls
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Aparecen caracteres en espaol, como la , los acentos, etc
-Referencias a archivos externos: se emplean para cargar, junto a nuestro documento,
archivos que definen por ejemplo el aspecto final de la pgina, un css
<link rel=stylesheet type=text/css href=fichero.css/>
-Scripts en el lado del cliente
<script languaje=javascript>
Cuerpo <body> </body>
Va el contenido de la pgina
Plantilla en XHTML
DTD Strict dar un error cualquier regla que se infrinja
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nuevo documento</title>

</head>
<body>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
se usa para indicarle al navegador que el documento debe validarse conforme a un
archivo de definicin DTD para xhtml
xmlns="http://www.w3.org/1999/xhtml
se emplea para definir el espacio de nombres, es decir en XML permite indicar cada
etiqueta a qu lenguaje pertenece, ya que pueden en un mismo documento confluir
etiquetas de diferentes lenguajes
DTD Transitional, si se incumple ciertas reglas hace la vista gorda
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
</head>
<body>
</body>
</html>
DTD frameset cuando nuestra pgina sea una estructura de marcos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd">
<head>
</head>
<body>
</body>
</html>
Plantilla en HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html >
<head>

</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>

</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html >
<head>

</head>
<body>
</body>
</html>
Plantilla en HTML 5
<!DOCTYPE html>
<html >
<head>
<title>Html5</title>
<meta charset="utf-8"/>
</head>
<body>
contenido..
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="utf-8"/>
</head>
<body>
contenido..
</body>
</html>
Sintaxis del lenguaje XHTML
Norma nmero 1: Hay que hacer una declaracin del tipo de documento
(doctype)
En HTML tambin se puede hacer pero no es obligatorio. En XHTML es
obligatorio.
Al comienzo del documento por encima de la etiqueta <html> hay que escribir
la siguiente declaracin:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
A propsito, hacemos una simplificacin. Nos quedamos con el tipo
Transitional. Hay otros dos tipos, el estricto y el frameset.
Es importante escribir el texto de la declaracin tal cual est respetando
maysculas y minsculas.
Norma nmero 2: La etiqueta <html> debe llevar el namespace declarado
en el atributo xmlns. El siguiente texto:
Norma nmero 3: Todas las etiquetas (exceptuando la declaracin, norma
1) y sus atributos, tienen que escribirse con letras minsculas.
En HTML se pueden escribir con maysculas o minsculas. En XHTML todas
deben ser
minsculas.
Norma nmero 4: La etiqueta <head> (y por supuesto la <body>) son
absolutamente obligatorias.
En HTML si no ponamos la <head> no pasaba nada...
Norma nmero 5: La anidacin de las etiquetas y sus cierres debe
hacerse respetando las simetras correspondientes: Lo que primero se
abre, se cierra lo ltimo.
Por ejemplo:
<p> Marcar con <b> negrita <u> subrayado y <i> cursiva</i></u></b></p>
Norma nmero 6: Todas las etiquetas (todas) se deben cerrar.
En HTML, por ejemplo, la etiqueta <p> era opcional que se cerrase. Aqu es
obligatorio.
Haba etiquetas que no se cerraban nunca como <br>. En XHTML las etiquetas
que no se cerraban en HTML tienen que escribirse con un espacio y la barra de
cerrado dentro de la etiqueta.
As: <br> pasa a ser <br />
La inclusin de una imagen, por ejemplo: <img src="imagenes/logo.png"
width="50" height="30"> tiene que escribirse ahora as <img
src="imagenes/logo.png" width="50" height="30" /> Observa el espacio de
separacin antes de la barra de cierre.
Lo anterior es vlido para todas las etiquetas similares. Includo las etiquetas
<meta> de la <head>.
Norma nmero 7: Todos los valores de los atributos deben
entrecomillarse.
En HTML era opcional.
Por ejemplo <table border=2> que se permita en HTML, pasara a escribirse
obligatoriamente <table border="2">
Norma nmero 8: Todos los atributos deben tener un valor, aunque el
nombre del atributo y su valor sean el mismo.
En HTML es correcto poner <hr noshade /> <hr noshade=noshade />
En XHTML solo es correcto la <hr noshade=noshade />
Comentarios
Sirven para insertar una o varias lneas que no sern interpretados por el navegador. No
se pueden anidar 
Un comentario no afecta al funcionamiento de la pgina pero si al mismo tamao final
del archivo, El aumento de texto no es significativo si las imgenes u otros archivos
Elementos de HTML XHTML
<etiqueta atributo1=valor1 atributo2=valor2>contenido del elemento
</etiqueta >
Etiqueta html
Definicin: Delimita el contenido del documento
Atributos: dir, lang
Dir: indica el sentido de lectura de texto cuando no corresponde al habitual
Valores: ltr (de izquierda a derecha)
Rtl (de derecha a izquierda)
Lang: indica el idioma por defecto del documento
Valores: es (espaol) de (aleman) en (ingls)
Etiqueta head
Definicin: Delimita la cabecera del documento
Atributos: dir, lang
Contenido de la cabecera: <title> <base> <meta> <link> <object> <script> <style>
Etiqueta body
Definicin: Delimita el cuerpo del documento
Atributos:
scroll : hace referencia a la barra de desplazamiento
no no aparece y si no cabe en la pantalla nuestra pgina no lo vemos
auto solo aparece si es necesario Es igual a no poner el atributo
bgcolor: color de fondo de la pantalla (aunque es mejor con css)
Bgcolor=#FFFF00 (Red, green, blue es un valor entre 0 255)
Bgcolor=yellow
Bgcolor=#FF0
Existen colores seguros para la web y son los formados por cualquier combinacin de
los valores 00, 33, 66, 99, CC, FF
background: poner una imagen como fondo (aunque es mejor con css)
background=ruta/archivo.gif
background=imagenes/archivo.gif
background= archivo.gif
text: hace referencia al color del texto para toda la pgina (aunque es mejor con
css)
Text=yellow
link: color de los enlaces no visitados(aunque es mejor con css)
link=yellow
vlink: color de los enlaces visitados (aunque es mejor con css)
alink: color de los enlaces activos(el momento de pulsar) (aunque es mejor con
css)
leftmargin: el margen izquierdo indicado en pixels, sino por defecto aparece casi
pegado al borde. En Explorer
leftmargin=10
marginwidth: el margen izquierdo indicado en pixels, sino por defecto aparece
casi pegado al borde. En Netscape
marginwidth =10
topmargin: el margen de arriba indicado en pixels, sino por defecto aparece casi
pegado al borde. En Explorer
topmargin =10
marginheight: el margen de arriba indicado en pixels, sino por defecto aparece
casi pegado al borde. En Netscape
marginheight =10
Lo mejor es poner todo para que se vea en todos los navegadores
<body leftmargin=10 marginwidth =10 topmargin =10 marginheight
=10
Todas estas etiquetas se podran sustituir en css
<body style=color:blue; margin-left:50px;>
Contenido
</body>
HTML o XHTML clasifica a todos los elementos en dos grupos: elementos en linea y
elementos en bloque
Elementos en lnea ocupan solo el espacio necesario para mostrar sus contenidos
Ejemplo <a href=http://www.google.com>google</a>
Los elementos de bloque siempre empiezan en una nueva lnea y ocupan todo el espacio
disponible hasta el final de la lnea, aunque sus contenidos no lleguen hasta el final de
ella
Ejemplo <p>esto es un parrafo</p>
La mayora de los elementos de bloque pueden contener en su interior elementos en
lnea y otros elementos de bloque.
Los elementos en lnea slo pueden contener texto u otros elementos en lnea.
Resto de elementos que pertenecen a la etiqueta body
<br> </br> <br/> Salto de linea y no tiene atributos. Es un elemento de
bloque
Si no insertamos saltos de lnea todo el texto saldr en la misma lnea (Salvo que no
quepa de ancho en la pantalla)
Saltos de linea.html
Varios saltos.html
<p>texto</p> delimita un prrafo, tiene que estar todo lo del prrafo solo en
una lnea o varias. Es un elemento de bloque.
Atributos: align (center, right, left, justify)
Usar-prrafos1.html
<span>texto</span> Modifica solo parte de un texto. Es un elemento en linea.
<div> </div> marca divisiones en las que definimos un mismo tipo. Es un
elemento de bloque
Es lo mismo:
<p align=right> parrafo1</p>
<p align=right> parrafo2</p>
Que
<div align=right>
<p> parrafo1</p>
<p> parrafo2</p>
</div>
Alinear-2.html
<h1> texto grande y en negrita</h1> elemento en bloque
<h2> texto ms pequeo y en negrita </h2>
..
<h6> texto m pequeo y en negrita </h6>
<center> texto </center> es una etiqueta que est desaprobada. Es un elemento
de bloque.(HTML5 no)
<b>texto en negrita </b> en negrita (bold) Elemento en linea
<strong> texto en negrita </strong> (fuerte) Elemento en linea
<i>texto en cursiva</i> (Italic) Elemento en linea
<em>texto en cursiva</em> ((emphatize) Elemento en linea
<u>texto subrayado </u> (underline) Elemento en linea
<s> texto tachado </s> (strike) Elemento en linea
<sup>texto superndice </sup> Elemento en linea
<sub>texto subndice </sub> Elemento en linea
Para indicar de forma clara el texto que ha sido eliminado y el texto que ha sido aadido
a un texto original .
<ins>texto insertado</ins> Lo subraya Elemento en linea
<del> texto eliminado</del> Lo tacha Elemento en lnea
Los siguientes sirven para marcar las abreviaturas de texto, siglas, definiciones, cita
<abbr>texto </abbr>.Se usa para marcar las abreviaturas de un textoElemento
en lnea
Atributo title=texto que sale cuando pongo el cursor encima del texto
<acronym>texto </ acronym >.Se usa para marcar las siglas o acrnimos de un
texto de un texto Elemento en lnea
Ejm <acronym title=Hyper Text Markup Language>HTML</acronym>
<dfn>texto </dfn>.Se usa para definir una palabra Elemento en lnea
<abbr>texto </abbr>.Se usa para marcar un texto con una citacin.
Elemento en lnea
<cite>texto </cite>.Se usa para marcar un texto con una citacin.
Elemento en lnea
Ms elementos
<blink> texto parpadeo </blink> Elemento en linea. Solo funciona en algunos
navegadores(Firefox)
<fieldset> texto enmarcado</fieldset> elemento en bloque.
<legend > etiqueta ></legend>
Atributos: align (center, right, left)
<fieldset>
<legend align=center>esto es una etiqueta>/legend>
vamos a enmarcar esto
</fieldeset>
<blockquote> texto </blockquote>. Sangrado Elemento en bloque
<address>texto </address> El elemento address debe de ser utilizado por los
autores para proporcionar informacin de contacto de un documento. Sale en
cursiva y es un elemento en bloque.
<pre>texto</pre> Muestra el texto que encierra tal y como est escrito
(respetando los espacios en blanco). Elemento en bloque
<font> texto</font> modifica color de la letra, tipo de letra y tamao de un
texto.Elemento en lnea(HTML5 no) Se sustituye por css
Atributos:
color
face por defecto es el tipo de letra Times New Roman, y se puede
proporcionar alternativas de tipo de letra al ordenador poniendo varias
, si no existiese la 1 cogera la 2, y as sucesivamente
size (valores del 1(ms pequeo) al 7(ms grande))
En css
<p style=color:red;>Bienvenidos al curso 13/14</p>
<p> Bienvenidos al curso <span style=color:red;> 13/14</span></p>
<hr /> Escribe una lnea horizontal. Cubre el ancho de la pgina excepto los
mrgenes. Elemento en bloque
Atributos:
width (indica elporcentaje de cubrir la lnea, en pixels o en porcentaje
<hr width=400/>
<hr width=50%/>
Si cambia el tamao de la ventana durante la ejecucin tambin cambia
el tamao de la lnea.)
align (se puede cambiar la alineacin, por defecto es centrada y puede
tomar los valores: left, center, right
size (el espesor de la lnea, pudiendo recibir solo un valor en pixels)
noshade si queremos que la lnea sea opaca, ya que por defecto es
transparente y su valor es el mismo nombre
noshade=noshade
color (color de la lnea. Si empleamos color es indiferente que usemos el
sombreado hoshade o no)
<mark></mark> delimita texto marcado
.
NUEVAS ETIQUETAS DE ESTRUCTURA
Antes solo se utilizaba dentro de body con el uso de la etiqueta div
<div id= >
Ahora muchas de las etiquetas estructurales van a sustituir lo que antes se hacamos con
la etiqueta div, esto no implica que no usemos ya dicha etiqueta.
Etiquetas de estructura: definen el significado de cada parte, no el cmo ni dnde se
muestran en el navegador, eso lo conseguiremos con los estilos CSS
<section></section>
Representa una seccin del documento y debe almacenar elementos del mismo tema,
regiones del documentos diferentes con diferentes ttulos. Si hacemos un esquema de
nuestra pgina cada seccin corresponde con un apartado de ese esquema. - Se utiliza
para representar una seccin general dentro de un documento o aplicacin, como un
captulo de un libro. Como puede haber varias secciones con el atributo class
indicaremos que estilo de visualizacin queremos para ella.
<article></article>
El contenido debe ser independiente del resto, tiene valor por s mismo y puede ser
reutilizable. Ej un articulo de periodico, una entrada de un blog, un comentario de un
usuario, etc)
<aside> </aside>
Su contenido est levemente relacionado con su alrededor, se puede considerar separada
del resto, debera estar anidada en una seccin, artculo etc Ejemplo un comentario de
un artculo
<section>
<aside>
</aside>
</section>
<header></header>
Establece cabecera de una pgina completa o una seccin. Puede contener etiquetas h,
imgenes , formularios de bsqueda, tablas de contenidos, logotipos, etc
<hgroup> </hgroup> forman parte de una cabecera y suelen agrupar etiquetas
h (h1, h2,h6) relacionadas entre ellas. Establecen diferentes niveles de
titulos subtitulos, apartados, etc .si en una seccin como cabecera solo pongo
etiquetas h entiende que es la cabecera de la seccin, pero si las agrupo entre
<hgroup> y </hgroup> entender adems que estn relacionadas entre ellas.
<footer> </footer>
Almacena el contenido de un pie de pgina, seccin. Puede haber muchas, Ej. Datos
de autor, copywrite, etc
<nav> </nav>
Define la seccin de la pgina donde encontraremos enlaces web de la misma pgina u
otras. Solo para mens de navegaciones principales.

Tema 1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 1

Cargado por

Copyright:

Formatos disponibles

Roco Manso Gil Pgina 1 de 16

Definicin de Lenguaje de Marcas

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

También podría gustarte