Tutorial HTML básico

julio 03, 2017

Tras los primeros artículos de introducción al diseño web, te traigo ya un pequeño tutorial sobre HTML muy básico, para que puedas empezar a hacer pequeñas cosas con este lenguaje.

Primero de todo, empezamos a explicar brevemente algunos datos sobre HTML.

¿Qué tipo de lenguaje es HTML?

HTML o HyperText Markup Lenguage es un lenguaje de marcado basado en etiquetas, destinado a la creación de páginas web.

tutorial html basico

¿Qué es un lenguaje de marcado?

El lenguaje de marcas es un tipo de lenguaje informático que incorpora etiquetas o marcas junto al texto, que contienen información adicional, sobre la estructura o presentación que estamos creando.

El lenguaje de marcas, aunque sea usado en informática en ciertos aspectos como para la creación de webs, no debe confundirse con los lenguajes de programación, ya que este no contiene funciones aritméticas o variables.

Estructura básica de una página web en HTML


Toda página web, debe tener una estructura básica para poder funcionar correctamente, y esta se hace con una etiquetas ya definidas por HTML que siempre será igual y se dispondrá en el mismo orden.

El ejemplo de estructura básica de HTML es el siguiente:

<HTML>
      <HEAD>
      
      </HEAD>
      <BODY>
      
      </BODY>
</HTML>

Como ves, cada una de las etiquetas tiene una etiqueta de apertura y otra de cierre. Las de apertura se indican entre <>, mientras que las de cierre serán entre </>, aunque no en todos los casos será así, y ya se irán explicando más adelante en este curso estos casos excepcionales.

Esta es la estructura más básica de todas, y la que contiene todas las páginas webs.

Empecemos por explicar que significa cada atributo.

Atributo <HTML></HTML>

Este atributo lo único que nos indica es que entre las etiquetas de apertura y cierre, se encontrará todo el código HTML que afectará a la página web que estemos creando.

Etiqueta <HEAD></HEAD>


Dentro de esta etiqueta irá la información interna de la web por decirlo de alguna forma. Es donde incluiremos información como el título de la página, el tipo de codificación de lenguaje, como por ejemplo UTF-8 e información como esa.

Lo que vaya dentro de estas etiquetas no afectará visualmente al lector, pero si afectará en otros aspectos.

Etiqueta <BODY></BODY>

estructura basica html


Aquí, al contrario que dentro de la etiqueta <HEAD>, irá toda la estructura visual de la web. Básicamente será donde crearemos ese esqueleto que hará que nuestra web coja forma, y será lo que se expondrá visualmente a los lectores.

Esta será la que contenga la gran mayoría de información, y será la más compleja de todas, ya que todo todo lo visual de nuestra web, será escrito entre estas etiquetas.

¿Como hacer mi primera página web?

Con esto, y un par de etiquetas más, podremos crear nuestra primera página web, aunque eso sí, será una página un tanto inútil, aunque eso sí, será ya una página web.

Te voy a explicar como hacer tu primera página web.

1. Abre un bloc de notas.

2.
Escribe el siguiente código dentro:

     <HTML>
           <HEAD>
                 <TITLE>HOLA MUNDO</TITLE>
           </HEAD>
           <BODY>
                 <H1>MI PRIMERA WEB</H1>
                 <P>MENOS MAL, HE CONSEGUIDO CREAR MI PRIMERA                        WEB</P>
           </BODY>
     </HTML>
            
3. Guarda el archivo como: holaMundo.html

4. Abre el documento guardado con un navegador.

Y aquí tendrás la visualización de tu primera página web, una web cutre y que no sirve de nada, pero que al fin y al cabo no deja de ser una página web.

En los siguientes artículos de este curso básico sobre HTML, te explicaré que funciones tiene etiquetas como <TITLE>, <H1> y <P>, que han sido usadas en la creación de la primera página web.

Además de esto, te nombraré y explicaré las etiquetas más importantes, además de darte una web donde encontrar información oficial sobre todas las etiquetas de HTML.

Para cualquier duda o sugerencia, ya sabes que puedes usar los comentarios. 

Quizás también te guste...

0 comentarios