Aún no has entrado
Debe introducir al menos 3 caracteres en el buscador.
Curso completo de HTML - Primeros pasos con HTML
(126 opiniones)
Curso gratis de
Jorge Ferrer, Víctor García y Rodrigo García - 23 de Febrero de 2006
Temas Relacionados:
HTML
2. Primeros pasos con HTML
Conocidas ya las principales características de HTML estamos listos para aprender sus principales etiquetas y para crear nuestra primera página.
2.1. Estructura de una página
Todo documento HTML está formado por los bloques que podemos apreciar en la figura 2.1. Pasemos a explicar cada uno de ellos.
Figura 2.1. Estructura de bloques de un documento HTML.
En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio y al final de la página respectivamente:
<html>
Código de la página
</html>
El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:
<html>
En la cabecera de la página se introduce toda aquella información que afectará a toda la página. En un principio esta información se limitará al título. Este título se indicará con la etiqueta title usando la siguiente sintaxis:
<html>
El resultado de ver esta página con nuestro navegador es el que se observa en la figura 2.2. Como vemos, el área de la pantalla donde suele estar la página está todavía vacía, pero si nos fijamos en la cabecera de la ventana del navegador vemos que el título a pasado de ser Microsoft Internet Explorer a "Mi primera página WEB - Microsoft Internet Explorer". Es decir el título que le demos a nuestra página con la etiqueta <TITLE> pasará a ser el título de la ventana del navegador.
Figura 2.2. El título de la página es mostrado en la parte superior de la ventana del navegador.
Además cuando un usuario vea nuestra página y decida incluirla en su lista de webs preferidos con la opción agregar a favoritos del menú Favoritos del navegador (en este caso el explorer) añadirá el nombre que le hemos dado a nuestra página en dicho menú, tal y como podemos apreciar en la figura 2.3. Aunque el nombre con el que se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen título, lo suficientemente descriptivo a cada una de nuestras páginas le evitaremos esa molestia.
Figura 2.3. Cuando los navegantes incluyan nuestra página a su menú de favoritos en su menú aparecerá el título que le hayamos dado a nuestra página con la etiqueta <TITLE> .
Es importante resaltar que nada de lo que se ponga en la cabecera de la página será mostrado en la zona del navegador dedicada a mostrar el contenido, es decir, en la zona que vemos en blanco en la figura 2.2.
Esto nos induce a pensar que existe otra forma de indicar como será el contenido de la página, pues así es: el cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará delimitado por la etiqueta body. En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra página como pueden ser testo, imágenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que incluya texto.
<html>
En la figura 2.4 podemos apreciar como muestra el Internet Explorer este código. Como vemos todo el texto que hemos escrito entre las instrucciones de inicio y fin forman ahora el cuerpo de nuestra página.
Figura 2.4. En esta figura observamos la zona de la ventana en la que los navegadores mostrarán el texto que pongamos en el cuerpo de la página.
NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras páginas sean visualizadas con algunos navegadores. Sin embargo no debemos confiarnos ya que lo más seguro es que con el resto de navegadores no se vean bien. Por esta razón es muy recomendable usar ambas etiquetas tal y como se ha descrito.
Una vez que ya sabemos insertar contenido en una página pasaremos a estudiar las diferentes etiquetas que sirven para darle formato a ese contenido.
2.2. Los encabezados
Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia.
Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra "h" al principio del nombre de estas etiquetas provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un número del uno al seis que indica la importancia del titular siendo el más importante el uno y el menos importante el seis. En la figura 2.5 se puede ver un ejemplo de cómo muestra las cabeceras Internet Explorer.
Figura 2.5. Distintos tipos de encabezados vistos con Microsoft Internet Explorer.
El código usado en este ejemplo es el siguiente:
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
NOTA: Los encabezados empiezan siempre en una línea nueva y el texto que les sigue comenzará en la línea siguiente. Además el navegador podrá mostrar un espacio vertical adicional entre el encabezado y el texto anterior y posterior.
En él observamos que todos los titulares están en negrita y el tamaño de la fuente usada para cada encabezado va decreciendo conforme decrece la importancia del titular. Pero hay que tener en cuenta, tal y como comentábamos en la introducción, que este es sólo un ejemplo y que otros navegadores pueden mostrar estos encabezados de manera diferente.
Por otro lado los navegadores más usados hoy en día son el Internet Explorer y el Netscape Navigator y es normal prestarles una atención especial (aunque no exclusiva). Y en la figura 2.6 podemos apreciar cómo con este último se muestra los encabezados de una manera prácticamente idéntica. Por esta razón podemos estar casi seguros de que los usuarios verán los encabezados de la forma mostrada en ambas figuras.
Figura 2.6. Distintos tipos de encabezados vistos con Netscape Navigator
Hay que destacar que los encabezados de h1 a h4 pueden ser usados como títulos ya que los navegadores suelen usar un tamaño de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen ser mostrados con letra más pequeña aún que el texto y por esta razón se usan como notas a pie de página o comentarios de poca importancia.
2.3. El ejemplo mejorado
Ahora que sabemos usar encabezados los utilizaremos para mejorar ligeramente nuestra página. En la figura 2.7 podemos ver cómo se muestran las modificaciones.
Figura 2.7. Ejemplo de página Web con dos tipos de encabezados y dos párrafos.
Esta página ha sido creada con el siguiente código:
<html>
Conocidas ya las principales características de HTML estamos listos para aprender sus principales etiquetas y para crear nuestra primera página.
2.1. Estructura de una página
Todo documento HTML está formado por los bloques que podemos apreciar en la figura 2.1. Pasemos a explicar cada uno de ellos.
Figura 2.1. Estructura de bloques de un documento HTML.
En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio y al final de la página respectivamente:
<html>
Código de la página
</html>
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:
<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>Elementos de la cabecera
</head>
... Resto de código de la página ...
<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html><title>Mi primera página WEB</title>
</head>
Figura 2.2. El título de la página es mostrado en la parte superior de la ventana del navegador.
Además cuando un usuario vea nuestra página y decida incluirla en su lista de webs preferidos con la opción agregar a favoritos del menú Favoritos del navegador (en este caso el explorer) añadirá el nombre que le hemos dado a nuestra página en dicho menú, tal y como podemos apreciar en la figura 2.3. Aunque el nombre con el que se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen título, lo suficientemente descriptivo a cada una de nuestras páginas le evitaremos esa molestia.
Figura 2.3. Cuando los navegantes incluyan nuestra página a su menú de favoritos en su menú aparecerá el título que le hayamos dado a nuestra página con la etiqueta <TITLE> .
Es importante resaltar que nada de lo que se ponga en la cabecera de la página será mostrado en la zona del navegador dedicada a mostrar el contenido, es decir, en la zona que vemos en blanco en la figura 2.2.
Esto nos induce a pensar que existe otra forma de indicar como será el contenido de la página, pues así es: el cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará delimitado por la etiqueta body. En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra página como pueden ser testo, imágenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que incluya texto.
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste. Fdo. Jorge
</body>
</html><title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste. Fdo. Jorge
</body>
Figura 2.4. En esta figura observamos la zona de la ventana en la que los navegadores mostrarán el texto que pongamos en el cuerpo de la página.
NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras páginas sean visualizadas con algunos navegadores. Sin embargo no debemos confiarnos ya que lo más seguro es que con el resto de navegadores no se vean bien. Por esta razón es muy recomendable usar ambas etiquetas tal y como se ha descrito.
Una vez que ya sabemos insertar contenido en una página pasaremos a estudiar las diferentes etiquetas que sirven para darle formato a ese contenido.
2.2. Los encabezados
Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia.
Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra "h" al principio del nombre de estas etiquetas provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un número del uno al seis que indica la importancia del titular siendo el más importante el uno y el menos importante el seis. En la figura 2.5 se puede ver un ejemplo de cómo muestra las cabeceras Internet Explorer.
Figura 2.5. Distintos tipos de encabezados vistos con Microsoft Internet Explorer.
El código usado en este ejemplo es el siguiente:
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
En él observamos que todos los titulares están en negrita y el tamaño de la fuente usada para cada encabezado va decreciendo conforme decrece la importancia del titular. Pero hay que tener en cuenta, tal y como comentábamos en la introducción, que este es sólo un ejemplo y que otros navegadores pueden mostrar estos encabezados de manera diferente.
Por otro lado los navegadores más usados hoy en día son el Internet Explorer y el Netscape Navigator y es normal prestarles una atención especial (aunque no exclusiva). Y en la figura 2.6 podemos apreciar cómo con este último se muestra los encabezados de una manera prácticamente idéntica. Por esta razón podemos estar casi seguros de que los usuarios verán los encabezados de la forma mostrada en ambas figuras.
Figura 2.6. Distintos tipos de encabezados vistos con Netscape Navigator
Hay que destacar que los encabezados de h1 a h4 pueden ser usados como títulos ya que los navegadores suelen usar un tamaño de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen ser mostrados con letra más pequeña aún que el texto y por esta razón se usan como notas a pie de página o comentarios de poca importancia.
2.3. El ejemplo mejorado
Ahora que sabemos usar encabezados los utilizaremos para mejorar ligeramente nuestra página. En la figura 2.7 podemos ver cómo se muestran las modificaciones.
Figura 2.7. Ejemplo de página Web con dos tipos de encabezados y dos párrafos.
Esta página ha sido creada con el siguiente código:
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
<h1>Mi primera página WEB</h1>
<h2>Bienvenida</h2>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les guste. Fdo. Jorge
<h2>Proposito</h2>
En esta página iré practicando con los conocimientos que
adquiera en el curso de HTML
</body>
</html><title>Mi primera página WEB</title>
</head>
<body>
<h1>Mi primera página WEB</h1>
<h2>Bienvenida</h2>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les guste. Fdo. Jorge
<h2>Proposito</h2>
En esta página iré practicando con los conocimientos que
adquiera en el curso de HTML
</body>
Tabla de contenidos
- 1 - Introducción al lenguaje HTML
- 2 - Primeros pasos con HTML
- 3 - Parrafos en HTML
- 4 - Cómo insertar imagenes en una pagina
- 5 - Cómo crear enlaces hipertexto
- 6 - PRÁCTICA 1: La pagina web de "La chistera"
- 7 - Anclas (I)
- 8 - Anclas (II)
- 9 - Formato de texto
- 10 - La etiqueta FONT
- 11 - Texto preformateado
- 12 - Acentos y otros caracteres especiales
- 13 - Listas en HTML (I)
- 14 - Listas en HTML (II)
- 15 - Comentarios en HTML
- 16 - Practica 2: Un sitio web completo
- 17 - Usando color en el WWW
- 18 - Cómo cambiar la apariencia de una pagina
- 19 - Imagenes en las paginas Web (I)
- 20 - Imagenes en las paginas Web (II)
- 21 - Imagenes en las paginas Web (III)
- 22 - Cómo cambiar la apariencia de las imagenes
- 23 - Alternativas a las imagenes inline (I)
- 24 - Alternativas a las imagenes inline (II)
- 25 - Mejoras en las imagenes
- 26 - Cómo se crea una tabla HTML (I)
- 27 - Cómo se crea una tabla HTML (II)
- 28 - Alineamiento de tablas
- 29 - Alineamiento de celdas y filas
- 30 - Ancho de tablas y celdas
- 31 - Celdas que abarcan varias filas o columnas
- 32 - Margenes y separación de celdas
- 33 - Anidamiento
- 34 - Practica 3 - Tabla de Datos
- 35 - Practica 4 - Pagina Web con una estructura creada con tablas
- 36 - Practica 4 - Pagina Web con una estructura creada con tablas
- 37 - Practica 4 - Pagina Web con una estructura creada con tablas
- 38 - Estandares y extensiones del lenguaje HTML (I)
- 39 - Estandares y extensiones del lenguaje HTML (II)
- 40 - Extensiones a las listas (I)
- 41 - Extensiones a las listas (II)
- 42 - Alineamiento
- 43 - La etiqueta META
- 44 - Otras etiquetas del lenguaje HTML 3.2
- 45 - El atributo TARGET
- 46 - La etiqueta BASE
- 47 - Creación de paginas con frames
- 48 - Creación del documento de definición de frames (I)
- 49 - Creación del documento de definición de frames (II)
- 50 - Pagina completa con frames
- 51 - Atributos de la etiqueta FRAME
- 52 - Compatibilidad: NOFRAME
- 53 - Anidamiento de framesets
- 54 - Bordes de los frames
- 55 - Valores especiales del atributo TARGET
- 56 - Practica 5: Web de Los Alpes con frames
- 57 - Frames flotantes
- 58 - Sonido vídeo y otros ficheros externos
- 59 - Multimedia Inline (I)
- 60 - Multimedia Inline (I)
- 61 - Plug-ins y objetos incrustados
- 62 - Java en las Paginas Web
- 63 - Inserción de Applets Java (I)
- 64 - Inserción de Applets Java (II)
- 65 - Inserción de Applets Java (III)
- 66 - ActiveX, la tecnología del futuro
- 67 - Formularios en HTML
- 68 - Controles de Formularios (I)
- 69 - Controles de Formularios (II)
- 70 - Controles de Formularios (III)
- 71 - Controles de Formularios (IV)
- 72 - Otros controles
- 73 - Practica 6-Formulario para "Los Alpes"
- 74 - COMO USAR LOS DATOS DE UN FORMULARIO
- 75 - Envío De Ficheros Usando Formularios
Autor y licencia de 'Curso completo de HTML - Primeros pasos con HTML'
|
Wikis relacionados con 'Curso completo de HTML - Primeros pasos con HTML'
Bienvenidos al manual de HTML de Indaya. A
través de todos estos capítulos vamos a...
Más »
Para realizar tu pagina Web necesitas en principio un editor de textos para escribir los...
Más »
Con el surgimiento de los servicios hypermediales, los recursos de este medio son un campo...
Más »
Con el surgimiento de los servicios hypermediales, los recursos de este medio son un campo...
Más »
Tabla de caracteres especiales como letras acentuadas, con marcas diacríticas, símbolos, etcétera.
¿Quiénes Somos? |
Preguntas Frecuentes |
Condiciones de Uso |
Aviso Legal |
Blog |
2007 Wikilearning |
Gente Wiki
