Que es HTML

 

HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcas de hipertexto’), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

Profundizando en HTML

La estructura de un documento html se divide en dos partes la primera denominada HEAD y la segunda denominada BODY. 

Descripción del HEAD y el BODY de la estructura HTML

HEAD

Dentro de la etiqueta HEAD reside el elemento title en donde pondremos el título de la página. por ejemplo: <title>Que es HTML</title>. También reside el elemento meta descripción ASÍ   <meta name=”description” content=”Que es HTML aprende a crear paginas web desde cero”> Es un fragmento de párrafo de hasta aproximadamente 155 caracteres, dentro de una etiqueta en HTML, donde ponemos un resumen sobre el contenido de la página. Los motores de búsqueda muestran la meta descripción en los resultados de búsqueda principalmente cuando la frase buscada está dentro de la descripción, por lo que optimizar la meta descripción es crucial para el SEO en la página.

También podemos agregar el elemento meta keywords.  ASI  <meta name=”keywords” content=”crea paginas web gratis. ofertas. promociones”> que son las palabras o temas  mas consultados en el buscador google  y que por la trascendencia  de las búsquedas de aquellas palabras, frases o términos google las va posicionando en los primeros resultados de búsqueda facilitando con esto a los cibernautas encontrar el tema o producto que busca mas rápidamente.  Entonces si sabemos y aplicamos un estudio de palabras clave mediante varias herramientas especializadas en Keywords esto nos permitirá estar por encima de la competencia. Nota Esto también es crucial para el SEO.

También agregaremos el elemento href=”estilos.css” que nos sirve para enlazar el documento web con la hoja de estilos CSS que siempre va acompañado por las etiquetas  link rel y el media así <link rel=”stylesheet” href=”estilos.css” media=”all”>

Etiquetas sumamente importantes dentro y fuera del head

La etiqueta <html lang=”ES”> es sumamente importante ya que con esta etiqueta el navegador entendera que tu página web esta creada en el lenguaje español noten que la etiqueta está situada fuera del head.

  •  <DOCTYPE html>
  •   <html lang=”ES”> Etiqueta imprescindible situada fuera del head.
  •  <head>
  •  <meta charset=”utf-8″> Etiqueta sumamente importante.
  • <title>Que es html</title> En el head el elemento title es el único que lleva etiqueta de apertura y cierre 
  • <link rel=”stylesheet” href=”estilos.css” media=”all”> Con esta etiqueta enlazamos nuestra hoja de estilos CSS
  • </head>
  • <body>
  •  
  •  
  • </body>
  • </html>

La Etiqueta <meta charset=”utf-8″> es también sumamente importante ya que con esta etiqueta decimos al navegador que la pagina web debe cargar el contenido de los párrafos con el abecedario español si no definimos esta etiqueta dentro del head el navegador no podrá interpretar ciertos caracteres como las ñ o las tildes y otros caracteres que  se encuentran en el abecedario español. Y en su lugar pondrá otros caracteres ilegibles.   

Nota importante 

A excepción  de la etiqueta title  que esta dentro del head    – title tiene una etiqueta de apertura y otra de cierre nótese que las demás no tienen etiqueta de cierre. Esto solo sucede dentro del head pero NO dentro del body. En el body todas las etiquetas llevan símbolo de apertura y otra de cierre.

BODY

Para crear contenido dentro del BODY utilizaremos estos  símbolos < >  </>.  Por ejemplo: <p></p> Para crear párrafos debemos poner la letra P En medio de los símbolos. A todo este código completo  <p>esto sirve para introducir párrafos</p> se le denomina etiqueta Sepan notar que existen  etiquetas de apertura que son estas < > y también existen las etiquetas de cierre que son estas </>. Toda la maquetación en un documento html  ban encerrados dentro de estos símbolos de apertura < > y cierre </>. Salvo en el head que solo tiene etiquetas de apertura a excepción del elemento title. Ejemplo de codificación HTML para la CREACIÓN DE TÍTULOS. Las etiquetas para definir Títulos son estas <h1> </h1> Ahora veamos un ejemplo completo<h1>FRANSHOPPING</h1>. Las etiquetas para crear títulos suelen llegar hasta el h6, Donde en el h1 siempre definiremos el nombre de nuestro sitio.

Ahora voy a enumerar las etiquetas para crear títulos y subtítulos y su respectiva utilidad.

  •  <h1>Nombre del sitio<(h1>
  • <h2>Nombre de la portada </h2>
  • <h3>Titulo del tema a tratar</h3>
  • <h4>Subtítulo del tema a tratar</h4>
  • <h5>Título de sección</h5>
  • <h6>Subtitulo de sección</h6>
 

Aquí en este apartado te lo pongo más claro y te lo muestro en imágenes, te recomiendo que pases por este sitio para que sepas con claridad como utilizar las etiquetas para para la creacion de titulos adecuadamente.Ya que google premia la buena utilización de las etiquetas para crear títulos.

  • <DOCTYPE html>
  •       <html lang=”es”>
  • <head>
  •          <META charset=”utf-8″>
  •           <title> Que es HTML</title> en el head el elemento title es el único que tiene etiqueta de apertura y etiqueta de cierre
  •          <META name=”description” content=”Que son las etiquetas HTML.  Con estos tutoriales aprenderás de una manera fácil y sencilla”> 
  •          <META name=keywords” content=”html aprender tienda online proyecto”>
  •          <link rel=”stylesheet” href=”estilos.css” media=”all”
  • </head>
  • <body>
  •     <h1>Franskhopping</h1
  •     <h2>Marketing Digital</h2>
  •     <h3>Bienvenidos a frankshopping Marketing Digital<h/3>
  •      <p>Si te apasiona el mundo de la programación web y eres emprendedor estas en el sitio adecuado</p>
  •       <a href=”#”>Empecemos</a>
  • </body>
  • </html>

Aquí un ejemplo de etiqueta html para la creación de enlaces

<a href=https://www.google.es”>Google</a> En donde “a” significa que es una etiqueta de enlace y en el elemento href=”” definiremos  la URL de la página web a donde queremos enviar cuando pinchen en el enlace. Y en el atributo target=”_blackdefinimos  en que ventana se abrirá el enlace, en este caso con esta etiqueta le decimos que se abra en una pestaña nueva.

En el atributo target=”” podremos seleccionar una de las 5 instrucciones. Tal como lo veis en la imágen.

Las más comunes y utilizadas por los webmaster son las instrucciones “_blank” y “_parent”  ya que con la instrucción “_blank” como antes lo dijimos nos permite abrir el enlace en una nueva ventana – y con la instrucción “_parent” El enlace se abrirá en la misma ventana dejando atrás la ventana actual.

También podemos definir el atributo “nofollow” Al definir este atributo en un enlace las arañas de google no pincharan sobre el ya que le decimos a las arañas de google que el enlace solo puede ser clickeado por una persona física. De qué nos sirve esto?  Esto nos sirve para el posicionamiento Orgánico en GOOGLE. Esto es importante para el SEO.  rel=”nofollow”

Pero que es un enlace en la maquetación HTML?

Un enlace es un párrafo o una imágen encerrado dentro de las etiquetas html y que al pinchar sobre el te direcciona hacia un documento dentro de tu propio dominio o hacia una pagina web externa.

Los enlaces tienen 4 estados. 

  • El primer estado se llama link y es cuando el enlace no a sido pinchado.
  • El segundo estado se llama hover y es el estado que toma el enlace cuando pasas el ratón por encima de el. Por lo general cambia de color y tamaño.
  • El tercer estado se llama active y es el estado que toma el enlace cuando pinchas sobre el. Por lo general cambia de tamaño
  • Y el cuarto estado se llama visited Y es el estado que toma el enlace cuando a sido clickeado. Por lo general cambia de color.
  • LinkHoverActiveVisited

Y ahora veamos todo esto en este video tutorial

Todo esto vamos a resumirlo en un video tutorial  ya que se aprende mejor por medio de videos tutoriales no esta mucho recalcar que también la lectura enriquece la mente. – vamos al video tutorial..

De tanto aprender te dolio la cabeza?

Pasa y desestresate en mi TIENDA ONLINE encontraras grandes ofertas y promociones que de seguro te alivia el dolor de cabeza de tanto aprender a programar. Un saludo y hasta la próxima. Si tienes alguna duda escribeme al  whatsapp  tu consulta.
Vamos al siguiente tema… Qué es CSS?
Compartir esta web

Deja un comentario

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