Introducción al lenguaje html
¿Cuál es la estructura de un documento HTML?
<html>
<head>
... Encabezamiento del documento
</head>
<body>
... Cuerpo del documento
</body>
</html>
¿
Cuáles son los elementos más importantes del encabezamiento?
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.aspxl">
<
META name="robots" CONTENT="follow">
¿Qué contenidos tiene el cuerpo o body?
El cuerpo lo ponemos dentro de la etiqueta <body>, viene a continuación
del encabezamiento, y contiene todo el texto e información del documento
que se va a mostrar.
<BODY>
...
</BODY>
¿
Qué es un párrafo?
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>
¿
Qué son los titulares?
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>
¿Cómo puedo darles estilo a mis caracteres?
Para dar diferentes estilos a los caracteres se usan etiquetas especiales
encargadas de ello.
| É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 |
¿Qué son las listas?
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>
Lista regular
Permite enumerar una serie de elementos. Cada elemento de la lista comienza
con la etiqueta <LI> y termina con </LI>, pero ésta
es prescindible. Una lista regular puede ser numerada o sin numerar, dependiendo
de cual sea tiene una etiqueta u otra en su declaración.
Lista numerada
En ella los elementos están numerados. Se define usando <OL> y </OL> como
se puede observar
<OL>
<LI>Elemento 1 de la lista
</OL>
Lista sin numerar
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>
¿Se pueden anidar las listas?
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>
¿Cómo inserto imágenes?
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">
¿Qué son los hiperenlaces?
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
Diseño de Páginas web
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:
¿Qué son las direcciones URL?
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.aspx
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.
¿Qué tipos de URL existen?
Tenemos diferentes direcciones URL dependiendo de cómo se presenten:
- Enlace con dirección URL absoluta
<a href="http://www.hooping.net/faq/diseño-paginas-web.aspx">Manual
de diseño de páginas web</a>
Manual de
diseño de páginas web
- Enlace con dirección URL relativa
<a href="elementos-basicos.aspx">Elementos básicos de html</a>
Elementos básicos de html
- Enlace con dirección URL a un punto situado en una página
<a href="http://www.hooping.net/faq/elementos-basicos.aspx#tipos">Tipos
de url</a>
Tipos de url
- Enlace asociado a una imagen
Borde tamaño estándar
<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>
¿Qué es un enlace a un punto situado en una página?
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.aspx#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>
¿Se pueden enlazar otro tipo de archivos?
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>
Hooping
<a
href="http://www.hooping.net/swf/hooping.net-cabecera.swf ">Cabecera
flash de Hooping</a>
Cabecera
flash de Hooping
<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
Estilos, fuentes y colores
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
¿Qué es la etiqueta <div>?
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
¿Qué es la etiqueta <span>?
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;
}