Anuncios

martes, 23 de octubre de 2018

Introduccion al HTML



HTML

HTML por sus siglas (HyperText Markup Languaje) es un lenguaje de marcas de hypertexto para la elaboracion de paginas web.
Es un estandar para indicar como va ordenado el contenido de una pagina web, esto se hace por medio de las marcas de hypertexto las cuales son etiquetas conocidas en ingles como tags.

El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.

Estructura

La estructura basica de HTML se rige por un estandar basico para su correcto funcionamiento.
  • <!DOCTYPE html>
  • Estos hace entender al navegador que el tipo de archivo es html5.
  • <html> <---- Apertura
  • Esta etiqueta indica la apertura del html, es el cuerpo de nuesta pagina web. Aqui colocaremos todo lo que decidamos hacer en nuestra web.
    toda etiqueta debe tener su apertura y su cierre.
    Ejemplo: <html> </html> Se utiliza / para cerrar las etiquetas.
  • <head> <----Apertura
  • Etiqueta para emplear codigo no visible en la pagina web pero para multiples usos de scripting y tipeo de codigo Js y de estructura.
    Delimita y engloba la cabecera de una página, que contiene un conjunto de informaciones que no se muestran en la ventana, entre ellas el título de la página, pero que pueden ayudar a los navegadores y a los buscadores para interpretar o a encontrar correctamente la página.
  • <meta charset="utf-8">
  • Etiqueta para codificar nuestro texto en formato utf8. aumentando la compatibilidad de escritura para diferentes ordenadores.
    Esta etiquetas es una de las excepciones que no necesitan cerrarse.
  • <title> <---- Apertura
  • Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del título de la ventana del navegador.
  • </title> <---- Cierre
  • </head> <---- Cierre
  • <body> <---- Apertura
  • Etiqueta para tipear codigo que sera visible en la pagina web. Podemos escribir texto, insertar imagenes, videos y audio que sera visible al momento de abrir la pagina web.
  • </body> <---- Cierre
  • </html> <---- Cierre

Al final nuestro codigo debe quedar asi.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titulo de nuestra web</title>
</head>
<body>
</body>
</html>

Etiquetas

Las etiquetas mas comunes en HTML son:

  • <h1,h2,h3,h4,h5 o h6> </h1,h2,h3,h4,h5 o h6>
  • Párrafos que son encabezamientos (con distintos niveles desde h1 hasta h6).
    Ejemplo

    <h1>h1</h1>


    <h6>h6</h6>
  • <p> </p>
  • Seccion de parrafo normal.
    Ejemplo

    <p>Texto separado en parrafos.</p>

  • <br>
  • Etiqueta para dar un saldo de linea sin dejar espacio. <br>

  • <blockquote></blockquote>
  • <blockquote>Le agrega sangria al parrafo escrito.</blockquote>

  • <b> </b>
  • <b>Vuelve el texto en Negrita.</b>

  • <i> </i>
  • <i>Vuelve el texto en Cursiva.</i>

  • <u> </u>
  • <u>Subraya el texto.</u>

  • <tt> </tt>
  • <tt>Teletipo.</tt>

  • <strike> </strike>
  • <strike>Tacha el texto.</strike>

  • <ul> </ul>
  • <ul>Crea una lista no ordenada.</ul>

  • <li> </li>
    • <li>Agrega el texto a una lista ya establecida.</li>

  • <ol> </ol>
  • <ol>Crea una lista ordenada.</ol>
    1. Texto en una lista ordenada.

  • <a href="">
  • sirve para agregar un enlace.

  • <img src="">
  • Muestra una imagen, que normalmente es de tipo GIF o JPG.












  • <audio src="" controls autoplay loop >
  • Implementa audio a nuestra web.


  • <video src="" controls autoplay loop >
  • Implementa video a nuestra web.

Si te ayudo esta informacion, compartela y reacciona!!

People who read this post also read :



No hay comentarios:

Publicar un comentario