Blog de Página Web Leon

Curso de HTML para desarrollo web

Introducción a HTML

HTML es un lenguaje básico que se usa para elaborar páginas web y básicamente está dirigido por marcas o mejor dicho por etiquetas que determinarán cierto formato. En éste curso, elaboraremos una página web muy fácil. HTML significa HyperText Markup Language (Lenguaje de marcas de hipertexto). HTML aparte de ser el lenguaje que interpretan los navegadores, también es la extensión del archivo para referirse a lenguaje.
Antes de comenzar con el ejemplo tienes que llenar tu cabeza de sabiduría para que comprendas lo que estás haciendo.
Las páginas web son interpretadas por los navegadores y muestran la información al usuario, en una página web puedes incluir texto, imágenes, sonido y video. Al texto puedes agregarle formato como tipo de letra, color, tamaño, alineación, etc.

Cómo funciona HTML

Digamos que para aplicarle el formato a cierto texto, existen etiquetas de apertura y cierre y todo lo que esté entre esas etiquetas tendrá aplicado el formato preestablecido por esas etiquetas. Por ejemplo, si quieres escribir una palabra en negrita, primero escribirás la etiqueta que aplica el formato de negrita a esa palabra, posteriormente escribes la palabra y por último cierras la etiqueta, y listo, ya tienes tu texto en negrita, la etiqueta de apertura que indica que lo siguiente irá en negrita es <b> es la letra b entre el menor que y mayor que, la etiqueta para cerrar es </b> entre menor que y mayor que, va la letra b con una diagonal antes, todas las etiquetas de cierre son igual que las de apertura, con la pequeña diferencia que llevan una diagonal antes de las letras. Como recordarás HTML quiere decir lenguaje de marcas de hipertexto, las marcas son las etiquetas, es un lenguaje porque tiene estructura, sintaxis y puede ser interpretado por una computadora, y el hipertexto se refiere al texto enriquecido que tú quieres que lean los usuarios, lo que hace enriquecido al texto es que puedes cambiar color, tamaño, formato, tipo de letra y usar archivos multimedia.

Estados de una página web

Una página web tiene dos estados: el modo edición y el modo visualización. En el modo edición es donde tú escribes las etiquetas a tu gusto. En el modo de visualización es como la verán los usuarios.

Herramienta a usar

No requieres descargar nada, no necesitas ningún software, lo único que necesitas es una computadora con sistema operativo Windows y el navegador que más te guste. Para crear o modificar una página web puedes usar cualquier editor de texto sin embargo hay editores que agregan código extra y probablemente no se visualice correctamente lo que esperas, uno de esos editores es el Word de Microsoft Office. Si eres usuario de Windows te recomiendo que uses el bloc de notas o también conocido como notepad. Si eres usuario de Mac, te sugiero usar TextWrangler. Nosotros usaremos Windows en este curso por lo tanto utilizaremos el bloc de notas.

Estructura de una página web

Para tener una organización en la elaboración de tu página web en el modo de edición, existe una sintaxis que deberás seguir para escribir tu código html, primero deberás declarar que tu código estará escrito en html, después hay una parte que se llama cabezal (head) y ahí es donde colocas el título a tu página web, puedes colocar declaraciones que apuntan hacia otros archivos para complementar tu código, puedes colocar etiquetas de localización, un icono para darle mayor enfoque, etc. Después, hay una sección que se llama cuerpo (body) y aquí es donde agregas toda la información que quieras mostrar ya sea texto o archivos multimedia.

Hagamos un ejemplo de una página web

1. Abrir el bloc de notas: Pulsar las teclas Windows + R, se abrirá un cuadro de diálogo donde escribiremos: notepad, darle enter y listo, se abrirá el bloc de notas.

2. Guardar el archivo como html: Ir al menú Archivo – Guardar, se abrirá un cuadro de diálogo donde seleccionarás la ruta Mis Documentos, en nombre, ponerle ejemplo01.html ahora en el combo Tipo seleccionar Todos los archivos (*.*)

3. Listo, ya tenemos guardado nuestro archivo con formato html, ahora lo que nos queda es comenzar a escribir nuestro código.

4. Escribiremos la etiqueta de apertura que nos indica que estamos usando el código html: <html>

5. Escribiremos la sección de encabezado, primero abrimos una etiqueta:                             <head>

6. No pondremos nada en el encabezado así que cerramos la sección con su respectiva etiqueta:
</head>

7. Ahora iniciaremos la sección del cuerpo, para esto abrimos con la etiqueta:
<body>

8. No pondremos nada en el cuerpo, así que cerraremos la sección con la etiqueta de cierre:
</body>

9. Ahora le diremos que hemos terminado de escribir la estructura y cerraremos con la etiqueta:
</html>

10. Nuestro código deberá de verse así:
<html>
<head>
</head>
<body>
</body>
</html>

11. Para que podamos apreciarlo mejor, vamos a aplicar sangrías a cada sección, esto nos da el siguiente código:
<html>
       <head>
       </head>
       <body>
       </body>
</html>

12. Listo, ya tenemos nuestra estructura pero no hemos mostrado nada de información, vamos a escribir texto con formato, escribiremos: “Mensaje en negrita” donde la oración deberá verse: negrita. Para hacer eso, agregaremos la siguiente línea al cuerpo:                                       <b>Mensaje en negrita</b>

13. Se verá así nuestro código con la nueva línea:
<html>
       <head>
       </head>
       <body>
              <b>Mensaje en negrita</b>
       </body>
</html>

14. Ahora escribiremos en cursiva y la nueva oración será: texto en cursiva, para eso usaremos las etiquetas <i></i> nuestra nueva línea de código será:
<i> texto en cursiva</i>

15. Nuestro código se verá así:
<html>
       <head>
       </head>
       <body>
              <b>Mensaje en negrita</b> <i> texto en cursiva</i>
       </body>
</html>

16. Ahora hagamos un salto de línea entre ambos renglones, usaremos la etiqueta                         <br />

17. Nuestro código quedará así:
<html>
       <head>
       </head>
       <body>
              <b>Mensaje en negrita</b><br /><i> texto en cursiva</i>
       </body>
</html>

18. Ahora guardemos nuestro trabajo y cerremos el bloc de notas

19. Abrimos el archivo que hemos creado dando un clic derecho sobre él, ahora en el menú contextual que aparece, seleccionamos Abrir con y buscamos el navegador de nuestra preferencia.

20. El resultado que se espera ver es este:

Mensaje en negrita
texto en cursiva

9 Comentarios

  1. Johnb565

    whoah this blog is fantastic i really like studying your articles. Keep up the good paintings! You understand, many individuals are looking around for this info, you could aid them greatly. aeadgkedckca

    1. adan (Publicaciones Autor)

      Thank you very much, we’ll get more articles about website development. If you require a particular topic, you can request it and we will gladly post something about it.
      Greetings.

  2. Johnk60

    It’s a mammoth playground built of mountains, hills, lakes, deffegdgefcc

  3. Smithd606

    Thanksamundo for the post.Really thank you! Awesome. cfkefgbgfaeeagdd

  4. Pingback: Hojas de estilo y formato web | Blog de Página Web Leon

  5. Pingback: Google

  6. Pingback: http://aftonbladet.se

  7. Pingback: http://expressen.se

  8. Pingback: http://gp.se

Dejar un comentario