Curso HTML - Parte 01 - CONCEPTOS BÁSICOS

Tim Berners-Lee es considerado el padre de la Web y para su puesta en funcionamiento tuvo que desarrollar tres tipos de tecnologías:
  • HTTP: HyperText Transfer Protocol (Protocolo de Transferencia de Hipertexto). El protocolo o lenguaje con el que se comunican el Navegador y el Servidor web
  • URL: Uniform Resource Location (Localizador Uniforme de Recursos). Es el sistema de localización o direccionamiento de los documentos web
  • HTML: HyperText Markup Language (Lenguaje de Marcado de Hipertexto). El lenguaje empleado para escribir los documentos o páginas web
En este curso nos ocuparemos de los fundamentos y principios básicos del HTML. A modo de introducción podéis visitar la entrada del blog del 12-Marzo-2019, Hoy, hace 30 años, nació la World Wide Web (WWW) y si quieres conocer la historia del HTML y sus distintas versiones, pincha en el siguiente enlace.
     
HTML es un lenguaje (Lenguaje de Marcado de Hipertexto) basado en ETIQUETAS, y como todo lenguaje, tiene su VOCABULARIO y su GRAMÁTICA. El VOCABULARIO son las ETIQUETAS que se pueden emplear y la GRAMÁTICA son las reglas que establecen cómo se deben emplear las ETIQUETAS para escribir un documento.
     
     

HTML: conceptos básicos (parte 1)

     
Con HTML se define la ESTRUCTURA y CONTENIDO de las páginas web, pero NO SE DEFINE la presentación visual de las páginas web.
     
En la actualidad el lenguaje HTML está desarrollado por el W3C (World Wide Web Consortium), organismo internacional que vela por el correcto desarrollo de la web. En la web del W3C encontrarás abundantísima información técnica del HTML, aunque para empezar es mejor el tutorial HTML incluido en la web w3schools.com
     
El lenguaje HTML está formado por ETIQUETAS que se escriben encerradas por los corchetes angulares "menor que" y "mayor que" [< etiqueta >].
     
El ELEMENTO es el componente básico de una página Web, la cuál está compuesta de un conjunto de ELEMENTOS escritos en un orden concreto. Un ELEMENTO se compone de una Etiqueta inicial o de apertura y una Etiqueta final o de cierre. La Etiqueta final se define con una barra inclinada y el nombre de la Etiqueta inicial. Las Etiquetas iniciales pueden llevar Atributos, pero las finales no y en HTML los Atributos pueden llevar un Valor. También las Etiquetas pueden tener Contenido, que es todo lo que se escribe entre la Etiqueta inicial y la final. El Contenido puede ser texto o también estar formado por otras Etiquetas HTML.
     

Los ELEMENTOS se pueden anidar, es decir, se pueden escribir unos dentro de otros.

Podemos ver el CÓDIGO FUENTE de una página para "investigar" sobre cómo está escrito el mismo. Para ello nos situaremos con el ratón encina de una parte vacía de la página y pulsaldo con el botón derecho del mismo...
- En Internet Explorer y Opera seleccionaremos del desplegable la opción Ver código fuente
- En Microsoft Edge, Mozilla Firefox y Google Chrome seleccionaremos del desplegable la opción Ver código fuente de la página
     
ALGUNAS DE LAS ETIQUETAS MÁS IMPORTANTES DE HTML
[Recuerda que las Etiquetas se escriben entre los símbolos "<" y ">" y las Etiquetas finales o de cierre entre los símbolos "</" y ">"]
  • html - Elemento raíz de la página web: siempre al INICIO y al FINAL de la página (ABRE y CIERRA una página web)
  • head - Cabecera de la página web: incluye Scripts, Metadatos y otros datos no semánticos
  • meta -Metainformación de la página web
  • title - Título de la página (va dentro del HEAD)
  • link - Un enlace independiente del medio
  • style - Información de estilo incluida en la página web
  • script - Código de Script
  • body - Contenido de la página (Textos, Imágenes, etc; el Cuerpo de la página)
  • p - Párrafo
  • h1 - Título principal, Encabezado principal
  • h2 - Título secundario, Encabezado secundario
  • h3 -
  • h4 -
  • h5 -
  • h6 - Título de menor importancia, hay 6 niveles de encabezado
  • a - Enlace. Un enlace o un destino (ancla) para un enlace
  • strong - Negrita (texto destacado)
  • em - Cursiva (texto enfatizado)
  • img - Imagen
  • form - Formulario
  • input - Control de un formulario, por ejemplo, un cuadro de texto o un botón de radio
  • select - Lista de opciones
  • textarea - Campo de texto multimedia
  • option - Opción de una lista de opciones
  • table - Tabla
  • tr - Fila de una tabla
  • th - Celda de encabezado de una tabla
  • td - celda de datos de una tabla
  • blockquote - Cita larga
  • br / - Salto de línea (también escrito así: "br")
  • hr - Separador horizontal
  • ul - Lista No Ordenada
  • ol - Lista Ordenada
  • li - Elemento de Lista Ordenada ó No Ordenada
  • div - Contenedor genérico en bloque
  • span - Contenedor genérico en línea
  • "&nbsp;" - Espacio en blanco [No-break space] (no va entre < >)
      
HTML: conceptos básicos (parte 2)
     
En este segundo vídeo hemos visto que con tan sólo un puñado de etiquetas HTML (html, head, title, body, h1, h2, strong y em) y con la ayuda del Bloc de Notas de Windows hemos podido crear una página web muy sencilla.
     
RECUERDA que al guardar el código HTML escrito en el Bloc de Notas debes hacerlo utilizando la extensión .html y no la .txt, porque si no, no se verá la página.
GUARDAR COMO....
- Nombre: pagina.html
- Tipo: Todos los archivos (*.*)  -evitar extensión .txt-
- Codificación: UTF-8
     
Código HTML escrito utilizando el Bloc de Notas de Windows
Más adelante veremos unos programas llamados EDITORES WEB -gratuitos- que nos ayudarán mucho a la hora de escribir el código de una página web, porque aunque hemos visto que es posible hacerlo con el Bloc de Notas, para páginas web más complejas es muy recomendable su uso ya que facilita mucho el trabajo de escritura del código.
    
Vista previa en el navegador Chrome de la página escrita en el Bloc de Notas
     
Como veis, en el navegador sólo se visualiza todo lo incluido dentro de la etiqueta BODY y no lo que se incluye dentro de la etiqueta HEAD destinada a albergar el título de la página, scripts, metadatos y otros datos no semánticos, pero esto ya lo veremos más adelante.
      
     
HTML: conceptos básicos (parte 3)
     
En este vídeo nos hablan de los anteriormente citados EDITORES WEB, programas que nos facilitan mucho la labor a la hora de escribir el código HTML de una página web.
     
En concreto nos presentan el editor NOTEPAD++, que será el que se utilizará a partir de ahora a lo largo de todo el curso. También hacen la prueba de editar en NOTEPAD++ el código de la mini-página web que anteriormente habíamos creado con el Blog de Notas de Windows, haciendo un recorrido por las funcionalidades del programa.
     
Aquí tenéis el enlace a la página web donde descargar e instalar en vuestro sistema operativo el NOTEPAD++, así como a la de otro editor web también gratuito y muy bueno: el SUBLIME TEXT.

 
Para descargar e instalar Notepad++... Pincha Aquí


 
Para descargar e instalar Sublime Text... Pincha Aquí


Algunas de las funcionalidades incluidas en los Editores Web y que nos harán mucho más sencillo la escritura del código HTML son las siguientes:
  • El coloreado de la sintaxis
  • El cierre automático de las etiquetas
  • La opción de autocompletar las etiquetas y los atributos
  • El emparejamiento de la etiqueta inicial con la etiqueta final
     
HTML: conceptos básicos (parte 4)
     
PRINCIPALES REGLAS GRAMATICALES EN HTML
  • ETIQUETAS SIEMPRE CERRADAS. Las etiquetas siempre se tienen que cerrar
  • DOCUMENTOS BIEN FORMADOS. Los elementos anidados deben tener un correcto orden de apertura-cierre (el que se abre el último, debe cerrarse primero)
  • ETIQUETAS EN MINÚSCULAS (aunque en HTML5 las etiquetas pueden escribirse en minúsculas o mayúsculas indistintamente)
  • VALORES DE LOS ATRIBUTOS SIEMPRE ENTRE COMILLAS. Los valores de los atributos deber ir siempre encerrados entre comillas, simples o dobles
  • RECOMENDACIÓN PARA LOS NOMBRES DE LOS FICHEROS DE LAS PÁGINAS WEB: utilizar sólo las letras del alfabeto inglés, números, el guión y el guión bajo (AB...Z  ab...z  01...9  -_)
  • LA EXTENSIÓN DE LAS PÁGINAS WEB ES .htm ó .html
     
FIN Curso HTML - Parte 01 - CONCEPTOS BÁSICOS
Este curso es un resumen personalizado del Curso de Introducción al Desarrollo Web: HTML y CSS de la plataforma de formación Google Actívate, al que podrás acceder desde el siguiente enlace si es que quieres realizarlo completo y así conseguir la certificación oficial de Google. Espero que os sirva de ayuda...

No hay comentarios:

Publicar un comentario