Blog

Tutorial Básico de HTML

[Tutorial HTML Básico] 2. Crear contenido HTML

Want create site? Find Free WordPress Themes and plugins.

En este segundo Tutorial de HTML explicaremos como crear contenido y que tipo de etiquetas utilizar para nuestra primera página web.

1.- LAS CABECERAS. ETIQUETAS H1, H2, H3, H4, H5 y H6

Una de las partes más importantes para el contenido de nuestra web son las etiquetas H1,H2,H3,H4,H5 y H6. Estas etiquetas definen los encabezados y a su vez asignan un estilo y tamaño de letra según cual elijamos. La principal y de mayor tamaño es H1, las menos relevantes y con menor tamaño de la fuente de texto son H4,H5 y H6.

Para entenderlo mejor imagínate que estás leyendo un periodo, tendría en título H1 (nombre del periódico) subtítulo H2 (Temáticas del periódico o secciones como Deportes, Opinión, Nacional, Internacional…), H3 sería el titular de cada noticia, h4 podría ser el subtítulo de cada noticia, h5 el título de una parte de la noticia y h6 el contenido de la misma. Pasamos a explicar las limitaciones y generalidades de cada etiqueta

  • Etiqueta H1: Es el título principal. El texto más grande la página. Esta etiqueta es esencial para el SEO y debe ser añadida siempre. SOLO PUEDE HABER UNA ETIQUETA H1 POR PÁGINA. (Ejemplo etiqueta H1: <h1>Tutoriales de HTML</h1>
  • Etiqueta H2: Son los subtítulos de la temática de la página. Puede haber varias etiquetas H2, es muy importante que estas también estén utilizadas. El número recomendado es entre 3 y 5, pero lo importante en realidad es que sea igual o mayor a 1 y no muy grande en número. (Ejemplo etiqueta H2: <h2>Tutoriales fáciles para iniciarse en el diseño HTML</h2> <h2>Guías para novatos. Iniciación al diseño HTML</h2><h2>…
  • Etiqueta H3: Indica el contenido de cada sección, también es importante añadir estas etiquetas en nuestra página para mejorar el posicionamiento SEO. El número en este caso puede ser más amplio, es recomendable acotarlo pero podemos tener un gran número de ellas, eso si, es recomendable que estén relacionadas en temática entre si. (Ejemplo etiquetas H3: <h3>Tutorial de Etiquetas HTML</h3><h3>Guía de programas para diseño HTML</h3><h3>Creación de cabecera en documentos HTML</h3>….
  • Etiquetas H4,H5,H6: Estas etiqueta son menos importantes, es recomendable que igualmente las utilicemos pero su efecto es menor en el posicionamiento. Indicarían seciones, títulos y contenido dentro de un apartado. Como siempre a número más bajo mayor importancia del texto.

Ejemplo de Página HTML con etiquetas H1,H2,H3,H4,H5 y H6

<html>
   <head>
   </head>
   <body>
      <h1>Web de Tutoriales de Diseño y Programación</h1>
      <h2> Tutoriales de Diseño Web</h2>
      <h3>Tutorial de HTML</h3>
      <h4>Maravilloso tutorial de Diseño HTML para creación de páginas web</h4>
      <h5>Accede a nuestro tutorial de Diseño de páginas web en HTML para novatos. Te prestamos la mejor ayuda y consejos para crear tu página web de forma fácil y sencilla.</h5>
      <h6>Puedes descargar este ejemplo de código HTML o copiarlo para ver como quedaría en tu navegador, para ello solo sigue los pasos del primer tutorial y luego guarda el archivo como nombrearchivo.html, después abre ese archivo con tu navegador de internet y verás este contenido con el estilo creado</h6>
      <h3>Tutorial de CSS</h3>
      <h4>Tutorial para crear hojas de Estilo CSS a tus documentos</h4>
      <h2>Tutoriales de Programación Web</h2>
      <h3>Tutorial de PHP</h3>
      <h4>Tutoriales para programar páginas web en PHP y poder crear tus páginas web dinámicas</h4>
      <h3>Tutorial de MySQL</h3>
      <h4>Aprende como crear bases de Datos MySQL para crear registro de usuarios o almacenar datos desde tu web PHP</h4>
      <h3>Tutorial de AJAX</h3>
      <h4>Mejora la funcionalidad de tu web añadiendo código AJAX/JQUERY</h4>
      <h5>Te permite crear formularios sin recargar la página o funcionalidades increíbles para tu página web</h5>
   </body>
</html>

 

2.- EL CONTENIDO Y LOS PÁRRAFOS

Párrafos. Etiqueta <P>: Ahora que conoces las etiquetas de los títulos quizás te interese saber como crear párrafos dentro de un texto largo. Es bastante sencillo e intuitivo, para ello únicamente necesitarás la etiqueta


<p>EL TEXTO DE UN PÁRRAFO</p>

<p>EL TEXTO DE OTRO PÁRRAFO</p>

Salto de línea. Etiqueta <BR/>: Si lo que deseas es únicamente un salto de línea bastaría con que añadas al final del texto la etiqueta <br/>. Ejemplo de esto sería:

 <h6>Me encanta aprender nuevos lenguajes de programacion<br/>Durante todo este año estaré practicando para mejorar aún más</h6>

Otras etiquetas que te pueden ser interesantes para el contenido son:
– Etiqueta <b>: Texto en negrita
– Etiqueta <u>: Texto subrayado
– Etiqueta <i>: Texto en itálica (tumbado)

3.- Creación de enlaces a documento HTML o web externa

Por último en el segundo capítulo de HTML básico vamos a ver la etiqueta crear un enlace o hipervínculo entre páginas de nuestra web o a una página externa.

  • Podemos enlazar diferentes páginas de nuestra web o a otras para que el usuario pueda alternar entre las mismas a través de hipervínculos. Esto se puede realizar de varias formas, cada una tienes sus pro y sus contra:
    • Ruta Absoluta: Se indica la ruta completa del documento HTML dentro del servidor. Por ejemplo si queremos enlazar al documento cursoprogramacion.html que se encuentra en la carpeta “Tutoriales” pondríamos /tutoriales/cursoprogramacion.html. Esto es válido para acceder a cualquier documento o carpeta desde cualquier página de nuestra web.
    • Ruta Relativa: Nos permite acceder a cualquier documento accediendo en referencia à la carpeta del archivo abierto en el navegador. Ej. Pongamos que estamos viendo el archivo del dejemplo anterior (/tutoriales/cursoprogramacion.html) y queremos ir al documento fotos.html de la carpeta “Recursos” que se encuentra a su vez dentro de la carpeta “Tutoriales”, bastaría con poner “recursos/fotos.html” sin la barra delante. Si fuera ruta absoluta deberíamos haber puesto “/tutoriales/recursos/fotos.html”. Vamos con unos ejemplos más, vamos a suponer que estamos viendo una página alojada en “/tutoriales/cursos/cursophp.html”:
      • Volver a documento ubicado en /tutoriales/recursos/: Deberíamos poner “../recursos/fotos.html”. Los dos puntos indican volver una carpeta atrás
      • Volver a documento ubicado en /videos/: Deberíamos poner “../../videos/videosgraciosos.html”. Como véis volvemos dos carpetas atrás (cursos y tutoriales), por eso ahora ponemos dos veces los puntos, siempre sin barra delante.
      • Documento nuevoscursos.html ubicado en la misma carpeta. Pondríamos “nuevoscursos.html”. Al estar en la misma carpeta que el documento no haría falta indicar la carpeta a la que queremos ir.
      • Documento cursosgratis.html ubicado en la carpeta /tutoriales/cursos/gratuitos/. Deberíamos poner únicamente “gratuitos/cursosgratis.html”
    • Ruta a elemento de la página, introduciendo un id a una etiqueta podremos enlazar con esa parte del contenido, más adelante te explicaremos como crear el ID y las CLASS a las etiquetas. El enlace se realiza de la siguiente forma: #IDETIQUETA.
    • Enlace a URL: La última forma de enlazar es introduciendo una URL. Esto permite enlazar a nuestra web o a cualquier otra. Los enlaces se ponen de la siguiente manera: “http://www.google.es/chrome/” si es externo o “http://www.nuestraweb.com/tutoriales/cursos/gratuitos/cursosgratis.html” si es a nuestra propia web.

 

La etiqueta para crear enlaces es <a>, esta etiqueta será la primera en la que introduciremos unos parámetros que son los siguientes:

  • href=”URL/Ruta Destino”-> Indica la ruta o URL donde queremos que se dirija el enlace tal y como hemos visto previamente.
  • target=”TIPOENLACE”_> Marcamos si queremos que se abra en la misma ventana, en una ventana nueva o en una pestaña nueva.

Ahora sin más vamos a crear varios tipos de enlaces como ejemplo utiliando estos parámetros:

Ruta Absoluta misma ventana


<a href="/tutoriales/cursos/cursoprogramacion.html" target="_self">Ir al Curso de Programacion</a>

Ruta Relativa misma ventana desde /tutoriales/cursos.html


<a href="cursos/cursoprogramacion.html" target="_self">Ir al Curso de Programacion</a>

Ruta Relativa misma ventana desde /tutoriales/cursos/gratuitos/cursosgratis.html


<a href="../cursoprogramacion.html" target="_self">Ir al Curso de Programacion</a>

Ruta a URL en nueva ventana


<a href="http://www.mipaginaweb/tutoriales/cursos/cursoprogramacion.html" target="_blank">Ir al Curso de Programacion</a>

Si no lo has entendido muy bien lo de las rutas te recomendamos utilizar la Ruta Absoluta o URL interna. En el curso Avanzado profundizaremos más en este tema para que puedas conocer mejor su funcionamiento.
Esperamos que te haya gustado este tutorial, ante cualquier duda puedes ponerla en los comentarios. En la tercera parte veremos como indicar las etiquetas en el <head> del documento. Puedes verlo aquí.

Did you find apk for android? You can find new Free Android Games and apps.

1 comment

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

Leave a comment

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