Creación de Páginas Web Estáticas

CREACIÓN DE PÁGINAS WEB ESTÁTICAS
- Introducción al lenguaje HTML -
Para crear páginas web se utiliza el lenguaje HTML, que es un lenguaje de marcado de hipertexto y
deriva, por sus siglas en inglés, de Hyper Text Markup Language.
Con este lenguaje vamos a especificar la información que queremos mostrar en la página web. La
extensión de los archivos HTML, es decir, de las páginas web estáticas, puede ser de dos tipos: '.htm' o
'.html'. El sistema operativo detecta la extensión del archivo y lo abre con nuestro navegador web
(Internet Explorer, Mozilla, Opera, etc).
Este lenguaje está hecho de etiquetas y atributos que trabajan conjuntamente para dar
características específicas a la página web; el navegador interpreta dichas etiquetas y atributos y las
despliega en la pantalla. Una etiqueta es básicamente algo como lo siguiente:
<etiqueta> parte del texto al que afecta la etiqueta </etiqueta>
En realidad se trata de 2 etiquetas: una que indica el comienzo y otra que marca el final, asi que
todo lo que vaya entre una y otra se verá afectado por la etiqueta. Otro aspecto interesante es que a
un solo texto se le pueden aplicar varias etiquetas: basta con meter unas “dentro” de otras (cerrando
primero la última en abrirse).
<etiqueta1><etiqueta2> ejemplo de etiquetas anidadas </etiqueta2></etiqueta1>
Nosotros usaremos el Sublime Text (o bloc de notas) de Windows para editar los archivos en
modo texto, y le añadiremos extensión .htm para que se abran con un navegador web. A continuación
muestro un ejemplo básico de página web:
<html>
<head>
<title> Mi primera página web </title>
</head>
<body>
¡Hola! Esta es mi primera página web, espero hacer muchas :)
</body>
</html>
1
Etiqueta Función
<html> Empieza un documento HTML
<head> Zona de cabecera
<title> Zona de título
</title> Termina zona de título
</head> Termina zona de cabecera
<body> Zona de cuerpo del documento
</body> Termina zona de cuerpo del documento
</html> Termina documento HTML
Color de fondo
Para establecer el color del fondo de la página web usaremos un atributo de la etiqueta <body> llamado
'bgcolor' (background color, o color de fondo). Especificaremos el color de fondo en inglés (red, green,
blue, white, black, yellow, etc).
<body bgcolor= “navy”>
Nuevo párrafo
Por defecto HTML mostrará todo el texto que escribamos en la página web de manera continua, es
decir, no lo irá separando en distintos párrafos. Por lo tanto nosotros deberemos ir añadiendo la
etiqueta cada vez que queramos un nuevo párrafo.
Esto es un ejemplo de nuevo párrafo
Esto es un ejemplo
de nuevo párrafo
Texto centrado
La etiqueta para centrar el texto se llama ‘center’. A continuación podeis ver un ejemplo:
<center> este texto está centrado </center >

este texto está centrado
Texto en negrita, cursiva y subrayado
La etiqueta para poner un texto en negrita se llama ‘b’ (del inglés “bold”). A continuación podeis ver el
código en HTML y el texto que resultaría al utilizarlo:
 texto en negrita texto en

negrita
2
Para que nuestro texto esté en cursiva utilizaremos ‘i’ (del inglés “italic”). Aquí teneis el código y un
ejemplo:
 texto en cursiva texto en

cursiva
Finalmente para subrayar se utiliza ‘u’ (del inglés “underline”).
 texto surbrayado texto

subrayado
Estas etiquetas se pueden aplicar tanto a una parte del texto (por ejemplo, a una letra) como al texto
completo y pueden anidarse (es decir, utilizar varias al mismo tiempo). Aquí teneis un ejemplo
completo:
Un soneto me manda hacer Violante, que en mi vida me he

visto en tanto aprieto (...)
Un soneto me manda hacer Violante, que en mi vida me he visto en tanto aprieto (...)
Colores en el texto
El color es un atributo de la etiqueta “font”. Se utiliza del siguiente modo:
 texto en color 
Si se quiere utilizar un color común (rojo, azul, etc.) basta con poner su nombre en inglés.
 texto rojo texto rojo
3
- Atributos del texto -
Color del texto
Como vimos en la ficha anterior, la etiqueta que modifica el texto en HTML es . Dentro de dicha
etiqueta se pueden usar varios atributos, como por ejemplo el atributo de color que ya vimos:
 texto rojo texto rojo
En el caso de tratarse de un color común (rojo, verde, azul, etc) se puede escribir directamente su
nombre en inglés. Sin embargo existe otra manera de introducir el color del texto: mediante números
en hexadecimal que especifican la cantidad de color rojo, verde y azul que usaremos. Dicho número en
hexadecimal está formado por 6 cifras en formato RGB (Red, Green, Blue, o sea: rojo, verde y azul),
usando 2 cifras para cada color.
Un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0
al 9, sino que puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de la A a la F.
Cada color estará representado por un grupo de seis dígitos en hexadecimal, precedidos por una
almohadilla, como por ejemplo #FFFFFF. Podemos personalizar nuestros propios colores,
modificando los valores de cada uno de los dígitos que forman parte del número hexadecimal.
Color Hexadecimal Nombre
#FFFFFF white
#000000 black
#000080 navy
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow
4
Tamaño del texto
Con la etiqueta no sólo podemos modificar el color del texto, sino también el tamaño del
mismo, con el atributo size:
 texto grande 
texto grande
- Subíndices y superíndices -
Subíndices
Para crear un subíndice dentro de una página web usaremos la etiqueta , como se muestra a
continuación:
log 2 32 = 5 log 2 32 = 5
Superíndices
Para crear un superíndice dentro de una página web usaremos la etiqueta , como puede observarse
en el siguiente ejemplo:
x 3 + x 2 + 2 = 23 x3 + x2 +2 = 23
5
- Otros atributos del texto –
Texto tachado
La etiqueta que utiliza HTML para tachar el texto es <s>, como puede verse en el siguiente ejemplo:
<s> este texto está tachado </s>

este texto está tachado
Texto alineado
Para alinear el texto a la izquierda, derecha o centrado se usa la etiqueta , donde justify es texto justificado a ambos lados:
 texto a la derecha 
texto a la derecha
Texto preformateado
HTML elimina cualquier espacio en blanco adicional que se inserte en la página web. Sin embargo nos
encontramos con una excepción a esta regla cuando utilizamos la etiqueta <pre>.....</pre>, que muestra
el texto tal y como lo escribimos.
<pre> este texto está preformateado </pre>

este texto está preformateado
Barra horizontal
Para establecer una línea horizontal en la web usaremos la etiqueta <hr>:

<hr>
Titulos de 6 órdenes
En HTML podemos establecer diferentes títulos de texto, de 6 tamaños diferentes. Para ello se usan las
etiquetas desde <h1> hasta <h6>:
<h1> Titulo </ h1>

Titulo
6
- Enlaces (links) –
Enlaces externos
Los enlaces externos son aquellos que nos envían a otra página web al pulsar sobre ellos. La etiqueta que
se utiliza es <a> y en el atributo href se especifica cuál será la dirección destino. El atributo
TARGET="_new" indica al navegador que debe cargar el enlace en una nueva ventana. Se puede observar
el ejemplo siguiente:
<a href=“http://www.google.es” TARGET=“new”> Enlace a Google </a>

Enlace a Google
Enlaces internos
Los enlaces internos son aquellos que nos envían a otra zona de la misma página web, es decir, dentro de
un mismo documento. También se utiliza la etiqueta <a>. En primer lugar se inserta la marca <a
name="lugar"> en el punto del documento al que quieres que se llegue. En el enlace desde el que
quieres llegar al punto del nuevo documento, se inserta la siguiente sintaxis: <a href="#lugar">. La
almohadilla (#) indica que se trata de un enlace interno.
<a name=“seccion”> Sección </a>

<a href=“#seccion”> Ir a sección </a>
- Imágenes –
Imágenes en HTML (atributo principal SRC)
La etiqueta en HTML para incluir una imagen es <IMG SRC="URL"> (no tiene etiqueta de cierre),
donde el atributo URL es la dirección de la imagen. La URL puede ser relativa (una imagen de un
directorio local) o absoluta (una imagen de Internet). A continuación se muestra un ejemplo de URL
relativa:
<img src="imagenes/linux.jpg">
Imágenes en HTML (atributos secundarios)
Los atributos de la imagen pueden ser los siguientes:
a) ALT="Texto que aparece al situar el cursor sobre la imagen"

También muestra este mismo texto en caso de que el navegador no cargue la imagen.
7
b) ALIGN= Nos indica la posición de la imagen respecto del texto. Después del signo igual, pueden ir
los valores:
- TOP si queremos que el texto esté alineado con la parte superior de la imagen.
- MIDDLE alinea el texto con la parte central de la imagen.
- BOTTOM alinea el texto con la parte inferior de la imagen.
- LEFT alinea la imagen a la izquierda de la página forzando la colocación del texto en la parte
derecha y arriba.
- RIGHT alinea la imagen en la derecha de la página forzando la colocación del texto en la parte
izquierda y arriba.
Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte
hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las
siguientes extensiones de la etiqueta :
 Busca el primer margen libre (clear) a la izquierda.
 Busca el primer margen libre a la derecha. Busca el
primer margen libre a ambos lados.
c) WIDTH=80, HEIGTH=100
Indican la anchura y altura de la imagen en píxels, en este caso 80x100 píxels. Si especificamos las
dimensiones de las imágenes, las páginas se cargan más rápido, debido a que el navegador reserva
el espacio para ellas y sigue cargando el texto.
d) BORDER=2
Añade un borde, a modo de marco, a la imagen. En este caso de 2 píxels.
e) HSPACE=10 , VSPACE=15
Especifican el espacio horizontal y vertical que separa la imagen del texto que la rodea, en este
caso 10 píxels horizontales y 15 verticales.
- Listas y tablas –
Listas no ordenadas
Las listas no ordenadas sirven para mostrar información agrupada y sin ningún orden concreto. Para
hacer una lista se utiliza la etiqueta <UL>...</UL>; y para cada elemento de la lista debe utilizarse la
etiqueta <LI>...</LI>:
<ul>
<li> red hat </li>
<li> fedora core </li>
<li> debian </li>
</ul>
8
• Red Hat
• Fedora Core
• Debian
Listas ordenadas
Las listas ordenadas muestran información en un orden concreto. Para hacer una lista ordenada se
utiliza la etiqueta <OL>...</OL>; y para cada elemento de la lista debe utilizarse la etiqueta
<LI>...</LI>:
<OL>
<LI> Primer elemento </LI>
<LI> Segundo elemento </LI>
<LI> Tercer elemento </LI>
</OL>
1. Primer elemento
2. Segundo elemento
3. Tercer elemento
Tablas
Para usar una tabla en HTML usaremos la etiqueta <TABLE>. Para elaborar la tabla deberemos ir
especificando los elementos de las filas y columnas de la misma. La etiqueta para las filas es <TR> y
para las columnas <TD>.
<table>
<tr>
<td> elemento 1.1 </td>
<tr>
<tr>
<tr>
<table>
elemento 1.1 elemento 1.2 elemento 1.3

elemento 2.1 elemento 2.2 elemento 2.3

Creación de Páginas Web Estáticas

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

Creación de Páginas Web Estáticas

Cargado por

Copyright:

Formatos disponibles

CREACIÓN DE PÁGINAS WEB ESTÁTICAS

- Introducción al lenguaje HTML -

<etiqueta> parte del texto al que afecta la etiqueta </etiqueta>

<etiqueta1><etiqueta2> ejemplo de etiquetas anidadas </etiqueta2></etiqueta1>

<body bgcolor= “navy”>

<center> este texto está centrado </center >

Texto en negrita, cursiva y subrayado

<b> texto en negrita </b> texto en

<i> texto en cursiva </i> texto en

<u> texto surbrayado </u> texto

<i>Un soneto me manda hacer <b><u>Violante</u></b>, que en mi vida me he

El color es un atributo de la etiqueta “font”. Se utiliza del siguiente modo:

<font color="color"> texto en color </font>

<font color="red"> texto rojo </font> texto rojo

Color del texto

log <sub> 2 </sub> 32 = 5 log 2 32 = 5

x <sup> 3 </ sup > + x <sup> 2 </ sup > + 2 = 23 x3 + x2 +2 = 23

<s> este texto está tachado </s>

<pre> este texto está preformateado </pre>

Para establecer una línea horizontal en la web usaremos la etiqueta <hr>:

<h1> Titulo </ h1>

<a href=“http://www.google.es” TARGET=“new”> Enlace a Google </a>

<a name=“seccion”> Sección </a>

Imágenes en HTML (atributo principal SRC)

Imágenes en HTML (atributos secundarios)

Los atributos de la imagen pueden ser los siguientes:

a) ALT="Texto que aparece al situar el cursor sobre la imagen"

elemento 1.1 elemento 1.2 elemento 1.3

También podría gustarte