01 El Lenguaje de Marcado de Hipertexto

lOMoARcPSD|17200593
01-El lenguaje de marcado de hipertexto
Diseño De Pagina Web (Universidad Nacional Autónoma de Nicaragua León)
Studocu is not sponsored or endorsed by any college or university

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)
lOMoARcPSD|17200593
POW
Tema 1: El lenguaje de Marcado
de Hypertexto
Denis Leopoldo Espinoza Hernández
denisjev@unanleon.edu.ni
http://www.comp.unanleon.edu.ni/u/despinoza

lOMoARcPSD|17200593
Introducción a HTML
¿Qué es HTML?: Es el lenguaje de marcado de hipertexto, es el lenguaje en el que

se escriben las páginas web. Este lenguaje se utiliza para decirle al navegador como
debe de ser presentado un documento (letra, tamaño, colores, etc.)
Ha lo largo de la historia, han existido diferentes versiones de HTML y actualmente

nos encontramos en la versión HTML 4.0 4 0 aunque,
aunque se ha publicado una
especificación llamada XHTML que define de manera restrictiva, como deben de ser
escrito los documentos.
Programación Orientada a la Web 2

lOMoARcPSD|17200593
Mi primera página
Este es nuestro primer ejemplo de una pagina web, basta con escribir este código
en un documento con cualquier editor y guardarlo con extensión html.
primera.html
<html>
<head>
<title>Mi primera pagina</title>
</head>
<body>
<center><h1>Mi primera pagina</h1></center>
<hr> <p>Esta es mi primera pagina (chispas). Por el momento no se que
tendra, pero dentro de poco pondre aqui muchas cosas interesantes.
</body>
</html>
Ver

lOMoARcPSD|17200593
Explicación del código anterior
El lenguaje HTML se basa en la sintaxis SGML (toma siglas). Esto quiere decir que
todo estará encerrada entre dos etiquetas de esta manera:
<etiqueta parámetros> ... </etiqueta>
Hay ocasiones en que no es necesario cerrar la etiqueta.
Todo código
g HTML esta encerrado entre las etiquetas
q <html> ... </html>
/
Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y
cabecera. En la primera estará la página en sí, mientras que en la segunda
incluiremos algunas cosas que no se ven al principio pero que pueden llegar a ser
muy importantes.

lOMoARcPSD|17200593
La cabecera en HTML
<html>
<head>
<title>Mi primera pagina</title>
</head>
En este caso dentro de la cabecera sólo hay otra etiqueta. Es la única

imprescindible: el título de la página. Es lo que veremos como título de la ventana
en los navegadores
g q
que lo p
permitan.
Otras etiquetas a usar dentro de la cabeceras son:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

lOMoARcPSD|17200593
El cuerpo en HTML
El cuerpo es todo lo que se encuentra encerrado dentro de las etiquetas:

<body> </body>
Luego pondremos el título algo recalcado:

<center><h1> ... </h1></center>
Con esto colocaremos el texto centrado (<center>) y en formato <h1> (cabecera 1)

que nos asegura que aumentará el tamaño del tipo de letra lo suficiente como para
que se vea bastante resaltado. Luego separamos ese título que le hemos puesto a la
página del texto por medio de una línea horizontal:
<hr>: La línea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas

que no varían los atributos de un texto, sino que insertan un elemento.

lOMoARcPSD|17200593
El cuerpo en HTML
El body posee algunas propiedades que nos pueden resultar muy útiles que son:
BACKGROUND Permite definir un gráfico de fondo para la página.

BGCOLOR Permite definir el color de fondo de la página.
Cuando es igual a FIXED el gráfico definido como fondo de la
BGPROPERTIES página permanecerá inmóvil aunque utilicemos las barras de
desplazamiento.
TEXT Cambia el color del texto.
LINK Cambia el color de un enlace no visitado (por defecto azul).
VLINK Cambia el color de un enlace ya visitado (por defecto púrpura).
Cambia el color que toma un enlace mientras lo estamos
ALINK
pulsando (por defecto rojo).
Especifican el número de pixels que dejará de margen entre el
LEFTMARGIN y
borde de la ventana y el contenido de la página. Se suelen utilizar
TOPMARGIN
para dejarlos a cero.
MARGINWIDTH y Más o menos equivalentes a los anteriores, pero éstos funcionan
MARGINHEIGHT en Netscape.

lOMoARcPSD|17200593
Los encabezados
HTML ofrece 6 etiquetas distintas para mostrar encabezados. Cada uno de ellos se
diferencia en el tamaño de las cadenas de caracteres. Ver Ejemplo:
<html>
<head>
<title>Documento sin título</title>
</head>
<body>
<h1>Encabezado 1</h1>
</body>
</html>

lOMoARcPSD|17200593
Estilo de párrafos: p, center, br, hr y blockquote
Existen etiquetas que se utilizan para dar un formato a los párrafos entre estas
tenemos:
Etiqueta HTML Ejemplo de uso
<p> …. </p> Se utiliza para declarar un párrafo con lo cual se da un
espacio al inicio y al final del contenido.
<center> …. </center> Centra en pantalla lo que sea que se encuentre entre
las dos etiquetas.
q
<br /> Se utiliza para insertar una línea en blanco. Como un
enter.
<hr> Se utiliza para insertar una línea en blanco.
<blockquote>….<blockquote> Se utiliza para tabular el contenido que se encuentre
entre las dos etiquetas.

lOMoARcPSD|17200593
Formato de texto: B, I, U, SUB, SUP
A continuación se presentan algunas etiquetas para el formato de texto
Etiqueta HTML Ejemplo de uso

<b> …. </b> Pone el texto en negrita.
<i> …. </i> Pone el texto en cursiva.
<u> …. </u> Pone el texto subrayado.
<sub> …. </sub> Pone el contenido como sub-índice.
<sup> …. </sup> Pone el contenido como super-índice.

lOMoARcPSD|17200593
Formato de texto: Font
Nos permite cambiar el tamaño color y tipo de letra del texto que va encerrado
entre esta etiqueta.
Los parámetros que se utilizan para cambiar esto son:

Parámetro Utilidad
Permite cambiar el color: <font color="red« >Color por nombre </font>
color
<font color="#FF0000">Color RGB</font>
size
i Permite
P i cambiar
bi ell tamaño:
ñ <font
f size="2">Tamaño
i "2" T ñ 2</font>
2 /f
Permite cambiar el face:
face
<font face="Helvetica,Arial,Times">Con otro tipo de letra</font>
También se pueden utilizar los tres parámetros de manera conjunta:
<font color="#993366" size="6" face="Courier New, Courier, monospace">Esto es

un texto con una fuente diferente</font> Ver ejemplo

lOMoARcPSD|17200593
Los enlaces
Un enlace es una zona de texto o gráficos que si son seleccionados nos trasladan a
otro documento de hipertexto o a otra posición dentro del documento actual.
La etiqueta <A>:
Todo lo que encerremos entre <a> y </a>, ya sea texto o imágenes, será
considerado como enlace y sufrirá dos modificaciones:
-Se visualizará de manera distinta en el navegador. El texto aparecerá subrayado y

de un color distinto al habitual, y las imágenes estarán rodeadas por un borde del
mismo color que el del texto del enlace.
- Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el enlace.

Para que el enlace sirva para algo debemos especificarle una dirección. Lo haremos
de la siguiente manera:
<a href="direccion">Pulsame</a> La dirección estará en formato URL.


lOMoARcPSD|17200593
Los enlaces
Las URLs:
Una URL nos indica tanto una dirección de Internet como el servicio que esperamos
nos ofrezca el servidor al que corresponde la dirección. Tiene el siguiente formato:
servicio://máquina:puerto/ruta/fichero
Donde el servicio podrá ser uno de los siguientes: http, https, ftp, mailto, etc.
Ejemplo:
Ej l <a href=“http://localhost/primera.html”>
h f “h //l lh / i h l”
Existe otro formato de URL. Cuando queremos acceder a un fichero situado en la

misma máquina que la página web que estamos creando podemos utilizar este
formato:
<a href=“primera.html”>
Ver ejemplo

lOMoARcPSD|17200593
La inserción de imágenes con img
Se utiliza para incluir imágenes se la siguiente manera:

<img src="fichero_grafico" alt="descripcion">
-src: Especifica el nombre del fichero que contiene el gráfico. Los formatos estándar
en la red son el GIF y el JPG.
-alt: Es el texto que se mostrara cuando el cursos este sobre la imagen.
Existen dos atributos q

que,, aunque
q opcionales,
p , conviene indicar siempre:
p la altura y
la anchura del gráfico en pixels.
<img src=“imagenes/netscape.gif" alt="Netscape 4.0" width=“88” height=“31”>
Se ve así:
Ver ejemplo

lOMoARcPSD|17200593
Imágenes y Enlaces
Suele ser común incluir enlaces dentro de un gráfico. En ese caso, se le pondrá un
borde al gráfico que se puede quitar poniendo la propiedad border=“0”.
<a href="01-primera.html“><img src="imagenes/netscape.gif" alt="Netscape 4.0"

width="88" height="31" border="0" /></a> Ver ejemplo
Propiedad align para alinear la imagen:

Valor de ALIGN Utilidad
Coloca el punto más alto de la imagen coincidiendo con más alto de la
top
línea de texto.
middle Alinea el punto medio (en altura) de la imagen con la base del texto.
bottom(defecto) Alinea el punto más bajo de la imagen con la base del texto.
left Coloca la imagen a la izquierda del texto.

right Coloca la imagen a la derecha del texto.

lOMoARcPSD|17200593
Las listas desordenadas
La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno.
<UL>
<LI>Primer elemento • Primer elemento
<LI>Segundo elemento • Segundo elemento
</UL>
La etiqueta <UL> admite estos parámetros:
Parámetro Utilidad Resultado

Representa la lista de la manera •Primer elemento
COMPACT
más compacta. •Segundo elemento
Indica al navegador el dibujo que
precederá a cada elemento de la •Tipo disc
TYPE="disc", "circle",
lista. Para mayor flexibilidad se oTipo circle
"square"
admite también como parámetro Tipo square
de <LI>.

lOMoARcPSD|17200593
Las listas ordenadas
La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a

mayor anteponiéndole un número:
<OL>
<LI>Primer elemento 1. Primer elemento
<LI>Segundo elemento 2. Segundo elemento
</OL>
La etiqueta <UL> admite estos parámetros:
Parámetro Utilidad Resultado
1.Tipo 1
a.Tipo a
TYPE="1", "a", Indica el tipo de numeración que precederá
A.Tipo A
"A", "i", "I" a cada elemento de la lista.
i.Tipo i
I.Tipo I
Indica al navegador el número por el que se 3.Primer elemento
START="num"
empezará a contar los elementos de la lista. 4.Segundo elemento
1.Primer elemento
Atributo de <LI>, actúa como START pero a
VALUE="num" 4.Segundo elemento
partir de un elemento
1.Tercer elemento

lOMoARcPSD|17200593
Listas de definiciones
Este es el único tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo
presentar una lista de definiciones, de modo que tiene que representar de manera
distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas
<DT> y <DD>:
<DL>
<DT>Primer elemento <DD>Es un elemento muy bonito.
<DT>Segundo elemento <DD>Este, en cambio, es peor.
</DL>
/
Se verá como:
Primer elemento
Es un elemento muy bonito.
Segundo elemento
Este, en cambio, es peor.

lOMoARcPSD|17200593
Las tablas
Las tablas son posiblemente la manera más clara de organizar la información.

También es el modo más adecuado de maquetar texto y gráficos de una manera
algo más controlada que con los parámetros align.
<table>
<tr>
<td>1,1</td>
<td>1,2</td>
, /
1,1
1 1 1,2
1 2 1,3
1 3
<td>1,3</td>
2,1 2,2 2,3
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</table>

lOMoARcPSD|17200593
Las tablas
Las tablas presentan las siguientes propiedades:
Especifica el grosor del borde que se dibujará alrededor de las celdas. Por
border
defecto es cero, lo que significa que no dibujará borde alguno.
cellspacing Define el número de pixels que separarán las celdas.
Especifica el número de pixels que habrá entre el borde de una celda y su
cellpading
contenido.
Especifica la anchura de la tabla. Puede estar tanto en pixels como en
width porcentaje de la anchura total disponible para él (pondremos "100%" si
queremos que ocupe todo el ancho de la ventana del navegador).
align Alinea la tabla a izquierda (left), derecha (right) o centro (center).

lOMoARcPSD|17200593
Las tablas: Formato de las celdas
Las celdas por concreto, también poseen ciertas propiedades que permiten trabajar
de una mejor manera con ellas: Ver ejemplo
Alinea el contenido de la celda horizontalmente a izquierda (left), derecha
align
(right) o centro (center).
Alinea el contenido de la celda verticalmente arriba (top), abajo (bottom) o
valign
centro (middle).
Especifica la anchura de la celda. También se puede especificar tanto en pixels
como en porcentaje,
porcentaje teniendo en cuenta que,
que en este último caso,
caso será un
width
porcentaje respecto al ancho total de la tabla (no de la ventana del
navegador).
nowrap Impide que, en el interior de la celda, se rompa la línea en un espacio.
Especifica el número de celdas de la fila situadas a la derecha de la actual que
se unen a ésta (incluyendo la celda en que se declara este parámetro). Es por
colspan
defecto uno. Si se pone igual a cero, se unirán todas las celdas que queden a
la derecha.
Especifica el número de celdas de la columna situadas debajo de la actual que
rowspan
se unen a ésta.

lOMoARcPSD|17200593
Los caracteres especiales
Existen algunos caracteres especiales que para representarlos se debe de hacer de

una manera especial: &…….;
Código Resultado
á, Á, é, É,... á, Á, é, É, í, Í, ó, Ó, ú y Ú
ñyñ ñyñ
¿ ¿
¡ ¡
º º
ª ª
™ o ™o™
© ©
® ®
Espacio en blanco que no puede ser

usado para saltar de línea.

lOMoARcPSD|17200593
Los caracteres especiales
En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas,
establecer parámetros, etc.. Para poder emplearlos sin riesgo deberemos escribir
los siguiente códigos:
Código Resultado
< <
> >
&
& &
" "

01 El Lenguaje de Marcado de Hipertexto

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

01 El Lenguaje de Marcado de Hipertexto

Cargado por

Copyright:

Formatos disponibles

lOMoARcPSD|17200593

01-El lenguaje de marcado de hipertexto

Diseño De Pagina Web (Universidad Nacional Autónoma de Nicaragua León)

Studocu is not sponsored or endorsed by any college or university

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

¿Qué es HTML?: Es el lenguaje de marcado de hipertexto, es el lenguaje en el que

Ha lo largo de la historia, han existido diferentes versiones de HTML y actualmente

Programación Orientada a la Web 2

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

Programación Orientada a la Web 3

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

Explicación del código anterior

<etiqueta parámetros> ... </etiqueta>

Hay ocasiones en que no es necesario cerrar la etiqueta.

Programación Orientada a la Web 4

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

En este caso dentro de la cabecera sólo hay otra etiqueta. Es la única

Otras etiquetas a usar dentro de la cabeceras son:

Programación Orientada a la Web 5

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

El cuerpo es todo lo que se encuentra encerrado dentro de las etiquetas:

Luego pondremos el título algo recalcado:

Con esto colocaremos el texto centrado (<center>) y en formato <h1> (cabecera 1)

<hr>: La línea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas

Programación Orientada a la Web 6

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

BACKGROUND Permite definir un gráfico de fondo para la página.

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

Programación Orientada a la Web 8

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

Estilo de párrafos: p, center, br, hr y blockquote

Programación Orientada a la Web 9

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

Formato de texto: B, I, U, SUB, SUP

A continuación se presentan algunas etiquetas para el formato de texto

Etiqueta HTML Ejemplo de uso

Programación Orientada a la Web 10

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

Formato de texto: Font

Los parámetros que se utilizan para cambiar esto son:

También se pueden utilizar los tres parámetros de manera conjunta:

<font color="#993366" size="6" face="Courier New, Courier, monospace">Esto es

Programación Orientada a la Web 11

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

-Se visualizará de manera distinta en el navegador. El texto aparecerá subrayado y

- Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el enlace.

<a href="direccion">Pulsame</a> La dirección estará en formato URL.

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

Existe otro formato de URL. Cuando queremos acceder a un fichero situado en la

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

La inserción de imágenes con img

Se utiliza para incluir imágenes se la siguiente manera:

Existen dos atributos q

<img src=“imagenes/netscape.gif" alt="Netscape 4.0" width=“88” height=“31”>

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

<a href="01-primera.html“><img src="imagenes/netscape.gif" alt="Netscape 4.0"

Propiedad align para alinear la imagen:

left Coloca la imagen a la izquierda del texto.

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)

Las listas desordenadas

Parámetro Utilidad Resultado

Programación Orientada a la Web 16

Downloaded by Auxiliadora Vannessa Morales Moreno (auxiliadoramoralesscj@gmail.com)