Diseño HTML/CSS Tutorial Básico de HTML

Published on Mayo 18th, 2017 | by bytemega

1

[Tutorial HTML Básico] 1. Crear estructura y etiquetas básicas en HTML

En este primer tutorial os vamos a explicar paso a paso como crear y que significa cada etiqueta o tag de la estructura básica para empezar a diseñar vuestra web en HTML.

1.- DESCARGA DE SOFTWARE PARA EDITAR CÓDIGO FUENTE

El primer paso será descargarse un Software gratuito o de pago para poder editar el código. Esto se puede hacer (entre muchos otros en los siguientes programas):

  • Bloc de Notas (Integrado en el S.O.)
  • NetBeans (Muy potente y útil para HTML y otros proyectos en PHP, Java, C/C++,…) Descargar
  • NotePad ++ (Editor mejorado sobre Bloc de Notas) Descargar
  • Dreamweaver (Herramienta muy útil para diseñar, trae funciones predefinidas) Comprar

2.- ENTENDIENDO COMO ORDENAR LAS ETIQUETAS

Antes de añadir las etiquetas a nuestro HTML vamos a explicar el por qué y como se deben ordenar.

Es importante saber que los lenguajes de programacion siguen una estructura ramificada, a su vez, cada etiqueta tiene apertura y cierre.

¿Qué quiere decir esto?

Para los que no tengáis ninguna noción de programación hay un ejemplo muy sencillo que podéis utilizar para entenderlo, simplemente quédate con esto, en el punto 3 verás que relación tiene, imagina el siguiente supuesto en tu cabeza:

  • 1 cuadrado grande
  • 2 retángulos medianos
  • 4 rectángulos pequeños

Debemos cuadrar todos estos elementos sin que se crucen las líneas de ellos ¿Cómo lo harías?

Si tu respuesta es meter los 4 rectángulos pequeños dentro de los dos medianos (4+0, 3+1, 2+2, 1+3, 0+4) y posteriormente los 2 restángulos medianos dentro del cuadrado grande ¡ES CORRECTO! Así funciona el HTML.

Os dejamos una captura de como sería:

Estructura Página HTML

 

3.- ENTENDIENDO LAS ETIQUETAS HTML BÁSICAS

Una vez tengamos un editor de código de nuestro agrado descargado e instalado y entendido el concepto podemos pasar a crear el código, no sin antes entender que código vamos a introducir

Lo primero que hay que saber para todas las etiquetas es que tienen apertura <ETIQUETA> y cierre </ETIQUETA>. Como véis al cierre se le añade delante del nombre una barran transversal. Ahora vamos a ver las etiquetas que utilizaremos en el primer tutorial:

  • ETIQUETA <HTML></HTML>

    Abre un documento HTML. Se indica SOLO una vez por documento.html e indica al navegador en el lenguaje en el que está diseñada la web. Dentro de esta etiqueta irían todos los elementos. Equivale al cuadrado grande.

  • ETIQUETA <HEAD></HEAD>

    Abre la cabecera del documento. Esta parte no será visible dentro de la web por el usuario.

    Sirve para definir campos como el título (lo que vemos en las pestaña del navegador o lo que sería el título cuando buscamos en Google), el favicon (icono de la web que se muestra junto al título en los navegadores y parámetros de la página útiles para SEO y Posicionamiento Web en buscadores (la segunda parte que vemos en Google con un resumen del contenido de la web), estos serían por ejemplo descripcion, author, meta desripción, meta etiquetas, idioma, etc
    Esta etiqueta va siempre dentro del <HTML> y fuera y antes de <BODY>. Equivale al primer rentángulo mediano.

  • ETIQUETA <BODY></BODY>

    ¡Llegamos a la parte más bonita! La parte en la que introducimos lo que ve el usuario. El cuerpo o <BODY> de la página. Dentro de esta etiqueta se definen subetiquetas que mostrarán contenido al usuario.

    Esta etiqueta <BODY> equivale al 2º rentángulo mediano de la imagen. Debe colocarse siempre después del cierre de </HEAD> y siempre dentro de los límites de <HTML></HTML>

Ya tendríamos nuestra estructura básica de la web, aún no hace nada pero tenemos definidos los márgenes básicos de nuestra página HTML para poder empezar a diseñarla.

El código a escribir sería el siguiente:


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

En el Tutorial Nº2 os explicaremos como introducir el contenido en la web. Para verlo PULSA AQUÍ

Tags: , , , , , , ,


About the Author



One Response to [Tutorial HTML Básico] 1. Crear estructura y etiquetas básicas en HTML

  1. Pingback: Tutorial básico para iniciarte en el HTML

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Back to Top ↑

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies