Parte 1. Aprendiendo HTML para crear una página web

29
102611

Parte 1. Aprendiendo HTML para crear una página web

En este tutorial vamos a enseñar los fundamentos básicos para que alguien que, sin tener ni idea de html ni CSS, pueda construir una página web. Continuaré haciendo tutoriales sobre ésto y sobre cómo aplicarle a los html las hojas de estilo CSS. Para ello, me apoyaré en el libro de la editorial ANAYA «Curso de CSS». No es nada complicado aprenderlo, sólo es cuestión de dedicarle tiempo e ir probando.

Vamos a ir poco a poco y siguiendo estos pasos:

  1. Abrir un editor de texto
  2. Cómo se empieza
  3. DOCTYPE
  4. Etiquetas básicas html
  5. Conclusiones

1. Abrir un editor de texto

El primer paso será abrir un editor de texto.
Existen varios editores básicos pre-instalados en los sistemas operativos, según usemos Windows, Mac o Linux:

  • Bloc de Notas (Windows)
  • TextEdit (Mac)
  • gedit (Linux)

Éstos son otros editores de texto gratuitos con más funcionalidades:

Ahora deberemos abrir uno de ellos para poder comenzar.

NOTA: El Bloc de Notas de Windows se encuentra en: Inicio -> Accesorios -> Bloc de Notas.
El TextEdit de Mac se encuentra en Aplicaciones.

2. Cómo se empieza

Lo primero que deberemos escribir en nuestro editor será lo siguiente:

 <html>
 Mi primera página web
 </html>

Todo lo que se encuentra entre y > son etiquetas de html. La primera etiqueta que debemos poner es la de html, que nos indicará que lo que estamos creando es un html.

Seguidamente añadimos los elementos head y body en el documento:

 <html>
   <head>
   </head>
   <body>
 Mi primera página web
   </body>
 </html>

Ahora añadiremos dentro del head, el title, que será el título que nos aparecerá en las pestañas de nuestro navegador:

 <html>
   <head>
     <title> Aprendiendo html </title>
   </head>
   <body>
 Mi primera página web
   </body>
 </html>

NOTA: Antes de seguir, guardaremos nuestro documento con la extensión .html, por ejemplo podría llamarse: miprimerapaginaweb.html .
Así cuando la abramos con cualquier navegador [botón derecho sobre el archivo -> abrir con -> (elegimos el navegador que queramos)] podremos ver cómo nos está quedando:

Esta es la estructura básica que tiene que tener una página web, ahora iremos viendo las distintas etiquetas básicas para nuestro primer html. Y el DOCTYPE.

3. DOCTYPE

Para que nuestro documento sea válido y cumpla los estándares, necesitaremos colocar antes de la etiqueta que hemos colocado de html, alguno de los DTD que existen para distintas versiones de html, nosotros elegiremos el siguiente:

DTD transicional para XHTML 1.0:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
   <head>
     <title> Aprendiendo html </title>
   </head>
   <body>
 Mi primera página web
   </body>
 </html>

NOTA: Un DOCTYPE o DTD, abreviatura de definición de tipo de documento, define los bloques de construcción de un documento HTML o XHTML y le dice a los navegadores y a los validadores qué versión de HTML o XHTML utiliza nuestro documento.

4. Etiquetas básicas html

Ahora sí, vamos a ir viendo las distintas etiquetas y vamos a ir creando una página web básica.

Lo que vamos a ver será:

Etiquetar encabezados

Para diferenciar la importancia de varios encabezados dentro del mismo documento, utilizaremos los 6 tipos de encabezados disponibles, del h1 al h6, tal y como se ve a continuación:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
   <head>
     <title> Aprendiendo html </title>
   </head>
   <body>
   
 <h1> Mi primera página web </h1>
 <p> Texto en este párrafo </p>
 
 <h2> Encabezado de nivel 2 </h2>
 <p> Texto en este párrafo </p>
 
 <h3> Encabezado de nivel 3 </h3>
 <p> Texto en este párrafo </p>
 
 <h4> Encabezado de nivel 4 </h4>
 <p> Texto en este párrafo </p>
 
 <h5> Encabezado de nivel 5 </h5>
 <p> Texto en este párrafo </p>
 
 <h6> Encabezado de nivel 6 </h6>
 <p> Texto en este párrafo </p> 
 
   </body>
 </html>

NOTA: la etiqueta p significa párrafo, es decir, lo que esté dentro de esa etiqueta formará un párrafo que se separará del resto con un salto de línea implícito en dicha etiqueta.

Y nos quedará de la siguiente manera:

NOTA: Utilice h1 sólo para el título y h2 y h3 para el resto de encabezados. Pero siempre en orden, no se salte encabezados, detrás de h2 debería de haber un h3, etc.

Negrita, cursiva, párrafo y salto de línea

Negrita

Para poner una palabra o frase en negrita, la etiqueta será la b, de este modo:

 <b> Este texto estará en negrita </b> pero éste no

Y nos quedará lo siguiente:

Es decir, que todo lo que coloquemos entre la etiqueta b (de bold) nos aparecerá en negrita.

Cursiva

Del mismo modo para poner en cursiva alguna palabra o frase usaremos la etiqueta i, de este modo:

 <i> Este texto estará en cursiva </i> pero éste no

Y nos quedará lo siguiente:

Es decir, que todo lo que coloquemos entre la etiqueta i (de italic) nos aparecerá en cursiva.

NOTA: Podemos usar varias etiquetas para una misma palabra o frase, por ejemplo:

 <i><b> Este texto estará en cursiva y negrita </b></i> pero éste no

Párrafo y salto de línea

Para crear un párrafo, la etiqueta es la p, que ya incluye el salto de línea y el salto lo haremos con la etiqueta br. Veámoslo:

    <p> Párrafo que tiene implícito un salto de línea </p>
    Para dar el salto manualmente cada vez que queramos, usaremos el br, pudiendo poner tantos seguidos como queramos, por ejemplo ponemos 3 seguidos: <br><br><br> Y nos quedará esta separación.      

Añadir una imagen

Para añadir una imagen, primero tenemos que saber dónde está ubicada, el nombre exacto de la carpeta donde se encuentra, y el nombre exacto de la imagen, por ejemplo, imaginemos que tenemos dentro de la carpeta imagenes, otra que se llama, paisajes y dentro de ésta la imagen que queremos colocar, que se llama: cataratasiguazu.jpg . Así que deberíamos escribir lo siguiente:

 <h1> Cataratas de Iguazú </h1>
 <img src= "imagenes/paisajes/cataratasiguazu.jpg"/>

Y nos quedaría así:

NOTA: Además podemos colocar los atributos alt para proporcionar un texto alternativo en el caso de que el navegador tenga desactivada la presentación de imágenes o para personas que naveguen con algún tipo de tecnología asistencial tal como lector de pantalla y title para que al dejar el cursor sobre nuestra imagen, se pueda ver el título de la misma.

 <h1> Cataratas de Iguazú </h1>
 <img src= "imagenes/paisajes/cataratasiguazu.jpg" alt= "Vista aérea de las Cataratas de Iguazú" title= "Cataratas de Iguazú"/>

Crear listas

Hay 3 tipos de listas en HTML: no ordenadas, ordenadas y listas de definiciones:

Listas no ordenadas:

Se crean de la siguiente manera:

 <ul>
   <li> Primer elemento </li>
   <li> Segundo elemento </li>
   <li> Tercer elemento </li>
   <li> Cuarto elemento </li>
 </ul>   
 

Y nos quedaría:

Listas ordenadas:

Se crean de la misma forma que la anterior pero cambiando ul por ol de la siguiente manera:

 <ol>
   <li> Primer elemento </li>
   <li> Segundo elemento </li>
   <li> Tercer elemento </li>
   <li> Cuarto elemento </li>
 </ol>   
 

Y nos quedaría:

Listas de definiciones:

Se crean de la misma forma que la primera pero cambiando ul por dl y además se colocan las etiquetas dt (para el término) y dd (para la definición):

 <dl>
   <dt> Primer término </dt>
   <dd> Definición del primer término </dd>
   <dt> Segundo término </dt>
   <dd> Definición del segundo término </dd>
   <dt> Tercer término </dt>
   <dd> Definición del tercer término </dd>
 </dl>   
 

Y nos quedaría:

Crear un vínculo a una página web

Para crear un vínculo a una página web escribiremos lo siguiente:

 Para ir a nuestra página web haga clic <a href = "http://www.adictosaltrabajo.com/"> aquí. </a>

Y si se quiere que al clicar sobre el vínculo nos lleve a otra ventana o pestaña se escribirá de la siguiente manera:

 Para ir a nuestra página web haga clic <a href = "http://www.adictosaltrabajo.com/" target="blank"> aquí. </a>

NOTA: Todo lo que queda entre el a href y la a, será el vínculo.

Crear tablas

Crearemos tablas de la siguiente manera (donde podremos ir modificando el diseño de la misma cambiando los parámetros que incluimos):

<table border="1" cellspacing="1" cellpadding="1">
  <caption>
    Tabla de porcentajes
  </caption>  
  <tr>
    <th>   </th>
    <th> 2006 </th>
    <th> 2007 </th>
    <th> 2008 </th>
    <th> 2009 </th>
    <th> 2010 </th>
  </tr> 
  <tr>
    <td> % </td>
    <td> 45 </td>
    <td> 78 </td>
    <td> 50 </td>
    <td> 45 </td>
    <td> 36 </td>
  </tr>  
</table> 
 

Y nos quedaría:

5. Conclusiones

Este es un primer acercamiento al mundo del html. Con estas sencillas herramientas ya es posible crear una página web, pero en los siguientes tutoriales iré ampliando la información hasta llegar a crear una página web «de diseño» con html y hojas de estilo CSS. Pero para ello hay que ir practicando 😉

Espero que os sirva de ayuda.

To be continued…

29 COMENTARIOS

  1. Hola chess, el tutorial está hecho en Mac, pero es lo mismo para Windows XP, sólo cambia el editor de texto que uses, pero las etiquetas en html y la explicación y todo lo demás son iguales, de todas formas si tienes alguna duda, puedes preguntarme 🙂

    Un saludo!

  2. Hola chess, claro, el Dreamweaver te vale para hacer páginas web, da igual la versión, el CS5 es la última que ha salido, pero te sirve cualquier versión para crear páginas web. De todas formas, este tutorial está escrito para poder hacer páginas web sin ningún tipo de programa adicional, simplemente con código html en una hoja de texto de cualquier sistema operativo.

    Un saludo

  3. Disculpe las molestias pero en la parte para agrega imagen me marca en una parte k esta mal.

    Estas haci

    me marco lo de src en rojo me podria decir en que estoy mal!!
    Soy nuevo en esto!.

  4. Hola New,

    La manera correcta de colocar una imagen en el html es la siguiente:

    Suponiendo que tengamos una imagen que se llame foto.jpg y que esté en la carpeta imagenes, aquí lo más importante es poner bien la ruta de dónde se encuentra nuestra imagen, ya que si no la encuentra no saldrá la foto.

    Si tienes alguna duda más o necesitas saber algo concreto, no dudes en volver a preguntar.

    Un saludo!

  5. hola! tu pagina me encanto! pero tengo una super duda! yo hago todo como dices pero cuando abro el archivo sale todo el esqueleto: ósea, dice: blah blah !!
    oSEA QUE todo se ve! y no se que hago mal!! gracias!!

    • Hola Sonia mi nombre es Ivan, creo que el problema es que tienes que hacer que el archivo se llame de la siguiente manera:

      nombre_archivo.html

      Donde html es el formato de tu archivo, si usas windows al momento de abrirlo en el navegador das clic derecho sobre nombre_archivo.html y cuando te despliegue el menu le das en Abrir con> y seleccionas el navegador de tu preferencia..
      Quiza lo que pasa es que tu archivo se abre dentro del mismo editor de texto y por eso no te corre..

      Saludos.

  6. Buenas tardes Cristina.

    Me llamo Javier, y te quería hacer una pregunta que no hay forma de encontrar la respuesta en internet.

    Tengo hecho un árbol genealógico con TextEdit, y creo que me ha salido muy bien y sencillo.
    Ahora quisiera saber cuál es la forma de poderla colgarlo en internet, y ampliarme un poco cómo funciona ese tema.

    Muchas gracias.

  7. el vinculo funciona para ir a una sección en la misma pagina? (tipo wikipedia xd)
    tengo una tarea de crear una pagina web, me gustaría saber hacer eso, agradecería la respuesta, buen día:)

  8. Esto es ¡sorprendente! No he leído algo como esto antes . Maravilloso hallar a alguien con algunas ideas nuevas sobre este tema. Este sitio web es algo que se necesita en la blogoesfera , alguien con un poco de dominio. Un trabajo útil para traer algo nuevo a la red. Gracias de todos lo que te leemos.

  9. Hola, he estado haciendo paso a paso lo más básico, lo guardo como html y lo abro y cuando lo abro me sale tal que esto {\rtf1\ansi\ansicpg1252\cocoartf1671 {\fonttbl\f0\fnil\fcharset0 Monaco;} {\colortbl;\red255\green255\blue255;\red10\green86\blue216;\red247\green247\blue247;} {\*\expandedcolortbl;;\cssrgb\c0\c43529\c87843;\cssrgb\c97647\c97647\c97647;} \paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0 \deftab720 \pard\pardeftab720\partightenfactor0 \f0\fs26 \cf2 \cb3 \expnd0\expndtw0\kerning0 \ \ \ \ \ Mi primera p\’e1gina web\ \ \ }
    luego el titulo de la página si que me sale en la ventana pero dentro de la página me sale esto, que puedo estar haciendo mal? uso Mac y safari

    gracias

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad