<html>
<head>
... Encabezamiento del documento
</head>
<body>
... Cuerpo del documento
</body>
</html>
Sin duda los elementos principales del encabezamiento son TITLE y META, un posible encabezado sería el siguiente
<
TITLE>Título de la página</TITLE>
<
META NAME="description" CONTENT="Página web orientada
al diseño de páginas web de calidad para internet con lenguaje
HTML y contenido hipermedia">
<META NAME="keywords" CONTENT="Diseño paginas
web HTML internet">
<
META HTTP-EQUIV="refresh" CONTENT="5; URL=http://www.tudominio.com/eso.html">
<
META name="robots" CONTENT="follow">
<BODY>...</BODY>Un párrafo es un conjunto de texto y viene especificado por la etiqueta <p> de la siguiente manera
<P>Texto del párrafo</P>
Los titulares son aquello que define al título de un párrafo
y se define con la etiqueta <hx> siendo la x el número de titular.
Según el tipo de titular que sea tiene un formato u otro, pero todos
ellos con una misma función. Unos titulares se diferencian de otro
por su nivel de importancia, siendo el h1 el más importante y el
h6 el menos importante. La sintaxis correcta de esta etiqueta es la siguiente
<Hx>Titular de tipo x</Hx>
| Énfasis | <em>Texto con énfasis</em> |
texto con énfasis |
| Negrita | <b>Texto con negrita</b> |
texto con negrita |
| Itálica | <i>texto en itálica</i> |
texto en itálica |
| Subrayado | <u>texto subrayado</u> |
texto subrayado |
Existen dos tipos de listas: la lista de definiciones o glosario y las
listas regulares, que pueden ser numeradas o sin numerar.
Lista de definiciones
Se usa para definir listas de tipo descriptivo, en las cuales aparecen
una serie de elementos con sus correspondientes definiciones. Se utiliza
mediante las etiquetas <DL>, <DT> y <DD> de la siguiente
manera
<DL>
<DT>Nombre del elemento
<DD> Definición del elemento
</DL>
<OL>
<LI>Elemento 1 de la lista
</OL>
En ella los elementos de la lista están marcados por un punto y se define usando las etiquetas <UL> y </UL> como se puede ver
<UL>
<LI>Elemento de la lista
</UL>
Las listas sí pueden anidarse unas con otras, aunque los tipos de lista sean distintos como se puede observar
<OL>
<LI>Elemento 1
<UL>
<LI>Elemento 1 a
<LI>Elemento 1 b
</UL>
<LI>Elemento 2
</OL>
Las imágenes se insertan con la etiqueta <img> y </img>:
<IMG SRC="ruta de la imagen" WIDTH="anchura" HEIGHT="altura" alt="Diseño
de páginas web en Hooping">
Permiten conectar un documento con otros documentos u objetos. Los enlaces se colocan mediante la etiqueta <a> de la siguiente manera
<a href="url del documento">Texto del enlace</a>
Quedando el enlace de esta manera
La parte activa del enlace puede ser también una imagen en lugar de texto y el esquema sería el siguiente
<a href="url del documento"><IMG SRC="fichero
imagen"></a>
Ejemplo:
Las URL (Uniform Resource Locator), son direcciones de internet que identifican a documentos en la red, cada dirección correspone a un documento. La URL de una página web es el nombre que identifica a dicha página web en la red.
¿De qué está compuesta una URL?
La URL está compuesta por varias partes:
•
Protocolo mediante el cual se accede al documento.
•
Nombre de dominio.
•
Nombre de la carpeta donde se encuentra el documento en la máquina
que aloja dicho documento. Este nombre indica la ruta desde la carpeta raíz
donde está la web hasta la carpeta donde se encuentra el documento.
•
Nombre del fichero.
Ejemplo de dirección URL:
http://www.hooping.net/diseño-de-paginas-web.htm
No todas las partes tienen por qué estar presentes, en este ejemplo
el archivo se encuentra en la raíz, por lo que no hay carpeta.
<a href="http://www.hooping.net/faq/diseño-paginas-web.htm">Manual
de diseño de páginas web</a>
Manual de diseño de páginas web
<a href="elementos-basicos.htm">Elementos básicos de html</a>
<a href="http://www.hooping.net/faq/elementos-basicos.htm#tipos">Tipos de url</a>
Tipos de url <a href="http://www.hooping.net"><IMG
SRC="images/madeby.gif" alt="Diseño de páginas web en Hooping"></a>
Borde de tamaño 0
<a href="http://www.hooping.net"><IMG SRC="images/madeby.gif" alt="Diseño
de páginas web en Hooping" border="0"></a>
Un enlace a un punto situado en una página web o documento no es
más que eso, un enlace que en lugar de apuntar a una página
web, apunta a un lugar concreto de esa página, situando al usuario
ahí.
Para realizarlo se escribe la URL del documento en concreto, seguido
del símbolo # y un marcador, que nos indica el lugar del documento
donde dirigirse:
<a href="url#marcador">texto o imagen que contienen el
enlace</a>
En un lugar del documento se encontrará el marcador al que llevará el enlace:
<a name="marcador">contenido opcional</a>
El texto es opcional, si lo que queremos es situar el punto de destino
no hace falta que pongamos ningún texto.
Veamos un enlace a esta sección
<a href="http://www.hooping.net/faq/elementos-basicos.htm#enlace">Enlace a un punto de una página</a>
Enlace a un punto de una página
La URL podemos no ponerla si apuntamos al propio documento
<a href="#enlace">Enlace a un punto de una página</a>
Sí, un enlace puede llevar tanto a una página web, como a
imágenes, sonidos, videos, flash entre otros. Por ejemplo
<a
href="http://www.hooping.net/images/madeby.gif ">Hooping</a>
<a
href="http://www.hooping.net/swf/hooping.net-cabecera.swf ">Cabecera
flash de Hooping</a>
<a href="http://www.hooping.net/diseño-paginas-web-hooping.pdf">Diseño
de páginas web de Hooping en PDF</a>
Diseño de páginas web de Hooping en PDF
El navegador web nos establece por defecto un tipo y tamaño de la fuente de letra que se utiliza en la pantalla. Estos elementos se pueden cambiar usando la etiqueta <font> de la siguiente manera:
<font face="tipo de letra" size="tamaño de letra" color="color
de letra">texto</font>
Un ejemplo sería:
<font face="verdana" size="11" color="green">Verdana,
tamaño 11, color verde</font>
Verdana, tamaño 11, color verde
<font face="arial" size="8" color="blue">Arial,
tamaño 8, color azul</font>
Arial, tamaño 8, color azul
<font face="courier" size="5" color="orange">Courier,
tamaño 5, color naranja</font>
Courier, tamaño 5, color naranja
DIV es una etiqueta que permite crear divisiones lógicas en un documento. Cada división es un conjunto formado por diferentes etiquetas html relacionadas entre sí y a los que se les pueden aplicar propiedades comunes de la siguiente manera
<div align="center">
Conjunto de etiquetas HTML
</div>
En este caso el conjunto de etiquetas que se pongan dentro de la etiqueta div estarán alineadas en el centro
La etiqueta <span> es una etiqueta que se usa a la hora de seleccionar una parte de un texto para aplicarle un estilo determinado. Veámoslo con diferentes ejemplos sobre un texto.
<p>El diseño de páginas web es un
mercado en auge debido a la importancia en la vida diaria de Internet,
que ha pasado de ser un medio de búsqueda de información
a un medio de vida para un gran número de personas.</p>
El diseño de páginas web es un mercado en auge debido a la importancia en la vida diaria de Internet, que ha pasado de ser un medio de búsqueda de información a un medio de vida para un gran número de personas.
Ahora que tenemos nuestro texto con su etiqueta <p> y </p> vamos a aplicarle un estilo, empecemos por algo sencillo como la etiqueta <u> para subrayar una palabra.
<p>El <u>diseño de páginas web</u> es
un mercado en auge debido a la importancia en la vida diaria de Internet,
que ha pasado de ser un medio de búsqueda de información
a un medio de vida para un gran número de personas.</p>
El diseño de páginas web es un mercado en auge debido a la importancia en la vida diaria de Internet, que ha pasado de ser un medio de búsqueda de información a un medio de vida para un gran número de personas.
Ahora bien, este efecto lo podemos realizar también usando la etiqueta <span>. La etiqueta <span> da mucha más flexibilidad a la edición del texto ya que es mucho más manejable y configurable.
<p>El <span style="text-decoration: underline;">diseño
de páginas web</span> es un mercado en auge debido a la
importancia en la vida diaria de Internet, que ha pasado de ser un medio
de búsqueda de información a un medio de vida para un gran
número de personas.</p>
El diseño de páginas web es un mercado en auge debido a la importancia en la vida diaria de Internet, que ha pasado de ser un medio de búsqueda de información a un medio de vida para un gran número de personas.
La etiqueta <span> también permite usar estilos de una hojas de estilos usando el atributo class.
<p>El <span class=”ejemplospan”>diseño
de páginas web</span> es un mercado en auge debido a la
importancia en la vida diaria de Internet, que ha pasado de ser un medio
de búsqueda de
información a un medio de vida para un gran número de personas.</p>
El diseño de páginas web es un mercado en auge debido a la importancia en la vida diaria de Internet, que ha pasado de ser un medio de búsqueda de información a un medio de vida para un gran número de personas.
Y en la hoja de estilos tendríamos definido dicho estilo de la manera explicada
.ejemplospan {
Text-decoration: underline;
}
Diseño web de Hooping
