1. Conceptos Básicos de HTML

Internet es una red que conecta ordenadores a través de todo el planeta, para compartir contenidos alojados, a través de algunos de esos ordenadores, normalmente denominados servidores. Así, cada servidor puede contener algún tipo de recurso o de servicio. El servicio más extendido de Internet es sin duda el conocido como World Wide Web, es decir, la red de servidores de páginas web. Los servidores de la World Wide Web contienen Sitios Web que pueden ser consultados por cualquier usuario para acceder a información e incluso interactuar con ellas, comportándose como verdaderas aplicaciones.

Los Sitios Web internamente se estructuran como archivos de texto que, al ser transferidos al ordenador o al dispositivo del usuario, pueden ser interpretados con sentido por un navegador web, como Firefox, Chrome, Opera, Safari, etc. Para que los navegadores puedan entender correctamente las páginas web, éstas utilizan un conjunto de normas denominadas HTML.

El lenguaje HTML es el que define la estructura y el contenido de una página web, y para ello se sirve de una serie de elementos cuyas etiquetas son las que le dirán al navegador cómo debe disponerse el texto y demás componentes de la página. Por ejemplo, indicarán dónde irá una imagen situada o qué parte del texto es un título, un párrafo, un enlace, etc.

Existen diferentes versiones del lenguaje HTML, así que será muy frecuente escuchar hablar de HTML 4.01 y de HTML 5.0 (actual versión del lenguaje), que de hecho ya está contemplada en la mayoría de los navegadores modernos.

2. ¿Qué necesitamos para trabajar HTML?

Un Sitio Web consta de varios archivos: archivos de texto, código, hojas de estilo, contenido multimedia, y así sucesivamente. Cuando estás construyendo un Siitio Web, primero debemos organizar todos los archivos en el ordenador local utilizando cierta lógica, asegúrandonos de que estos archivos pueden comunicarse entre sí, y de que todos tus contenidos están correctos antes de subirlos a un servidor.

Para generar un Sitio Web, recurriremos normalmente a un conjunto variado de aplicaciones. Para nuestros propósitos nos centraremos en algunas alternativas que debemos instalar en nuestro ordenador, antes de continuar.

Una computadora:. Tal vez esto suena obvio para algunas personas, pero algunos están leyendo este artículo desde el móvil o una computadora de biblioteca. Para el desarrollo web serio, es mejor invertir en un equipo de escritorio o laptop conWindows, Mac, o Linux.

Editor de texto: Para cualquier edición básica de una página web necesitaremos una aplicación como ésta. En este caso no necesitaremos instalar nada, ya que todos los sistemas operativos actuales incorporan algún editor básico. Nota: Para modificar una página web necesitamos un editor de texto plano. No nos estamos refiriendo a avanzados procesadores de texto, sino a sencillos editores como "gedit", "Bloc de notas", etc.

Navegador: Evidentemente, también necesitamos un navegador web para ver las páginas que estamos creando. Todos los ordenadores cuentan con este tipo de aplicaciones. En nuestro caso recomendamos contar con Firefox o con Chrome (o Iceweasel o Chromiun si estamos trabajando en determinadas distribuciones de Linux). De hecho, resulta muy útil probar nuestro sitio web en varios navegadores para ver su apariencia final.

Editor de páginas web: Un editor visual de archivos HTML nos vendrá muy bien para poder ver la apariencia que está tomando cada página y poder realizar las diferentes modificaciones, sin tener que recurrir al navegador permanentemente, aunque no es del todo imprescindible. Uno de los más utilizados es Dreamweaver.

Editor de imágenes: La Web es siempre muy visual; nos encontraremos con frecuencia ante la necesidad de editar alguna imagen o generar algún pequeño título para nuestros contenidos. Para ello necesitaremos un programa que nos permita realizar este tipo de edición. Podremos contar, por ejemplo, con The Gimp, Photoshop, entre otros.

Aplicación FTP: Cuando nuestra web esté terminada, necesitaremos transmitirla a un servidor de FTP para que esté visible en todo Internet. Para ello emplearemos una aplicación de FTP. Filezilla cumple los mismos criterios que los programas anteriores, por lo que será nuestra recomendación.

3. ¿Qué debemos saber?

Cuando estámos trabajando en un Sitio Web local en nuestro ordenador, debemos mantener todos los archivos relacionados en una sola carpeta que refleje la estructura de archivos de la Sitio Web publicado en el servidor. Esta carpeta puede ubicarse en cualquier lugar, pero se recomienda poner todo el contenido en un lugar donde se pueda encontrar fácilmente. Tal vez pueda ser en el escritorio, en la carpeta de inicio, o en la raíz del disco duro.

Elije un lugar donde almacenar el proyecto Web. Ahí, crea una nueva carpeta llamada proyecto_web (o similar). Es allí donde tendrás todos tus proyectos Web.
Dentro de esta primera carpeta, debemos crear otras carpetas para almacenar el primer proyecto Web. Lo llamaremos: sitio-prueba (o algo más imaginativo). En la medida en que vallamos avanzando, estos nombres pueden cambiar, dependiendo del tipo de proyecto que realicemos.

Mayúsculas, Minúsculas y Espacios

Es importante crear las carpetas con los nombres completamente en minúsculas y sin espacios. Esto es porque:

Muchas computadoras, particularmente servidores, son sensibles a mayúsculas y minúsculas. Por ejemplo, si colocamos una imagen en el Sitio Web asi: sitio-prueba/Miimagen.jpg y luego en un archivo diferente tratamos de invocarla como sitio-prueba/miimagen.jpg ésta no se mostrará.
Los Navegadores, servidores Web y los lenguajes de programación no manejan bien los espacios en blanco. Por ejemplo, si usas espacios en el nombre de archivo, algunos sistemas podrían creer que en realidad se trata de dos nombres de archivo. Algunos servidores reemplazan el espacio en los nombres con "%20" (código para el espacio en las URIs), rompiendo todos tus enlaces. Es mejor separar las palabras con guiones, en lugar de guiones bajos: mi-archivo.html contra mi_archivo.html.

Por estas razones, es mejor que tengas como hábito escribir el nombre de tus archivos y carpetas en minúsculas y sin espacios, al menos hasta que entiendas bien cada cosa que haces, y así te evitarás algunos problemas.

¿Cómo deben estructurarse las carpetas y archivos del Sitio Web?

Las cosas más comunes que tendremos en cualquier proyecto de sitio web que creamos son un archivo HTML índice y carpetas que contienen imágenes, archivos de estilo y archivos de script. Vamos a crear estos ahora:

index.html: Este archivo contendrá generalmente el contenido de la página web inicial, es decir, el texto y las imágenes que la gente ve cuando accede por primera vez al sitio.
Carpeta images: Esta carpeta almacenará todas las imágenes que vamos a usar en el sitio.
Carpeta styles: Esta carpeta tendrá todos los códigos CSS usados para darle estilo a los contenidos (por ejemplo, establecer el color de textos y fondos).
Carpeta scripts Esta carpeta tendrá todos los códigos JavaScript usados para darle interactividad y funcionalidad al sitio (por ejemplo. botones que cargan datos cuando hacemos clic).
Otras carpetas: con contenido de archivos, dependiendo de los formatos, documentos, audios, videos, otros que sean necesarios para el Sitio Web.

4. Estructura HTML

Para que un navegador reconozca una página Web se utiliza la siguiente estructura:

El Doctype o “Declaración del tipo de documento” es una instrucción especial que va al inicio de nuestro documento HTML y que permite al navegador entender qué versión de HTML estamos utilizando. Esta información determinará la manera en la que el navegador procesará el documento, un DOCTYPE distinto podría implicar hasta una visualización diferente del sitio web dentro del mismo navegador.

<html> (Etiqueta que indica que lo que viene a continuación es un documento HTML)

<head> (Etiqueta de apertura de la cabecera) Aquí va la información sobre el título de la página, el autor, palabras clave, etc. que no se presentarán en la ventana del navegador, salvo el título que aparecera en la barra de título de la parte superior.

</head> (Etiqueta de cierre de la cabecera)

<body> (Etiqueta de apertura del cuerpo) Aquí va el contenido de la página que será lo que se presente en pantalla.
</body>(Etiqueta de cierre del cuerpo)
</html>(Etiqueta de cierre del documento)

Veamos el siguiente video para reforzar esta información:

5. Etiquetas en HTML

HTML es un lenguaje de marcas. Como tal, debemos conocer las diferentes etiquetas y elementos que utiliza. Las etiquetas por lo general vienen emparejadas. Una etiqueta de apertura significará que el navegador debe tratar el nuevo texto utilizando las propiedades de esa etiqueta y una etiqueta de cierre indica donde terminan esas propiedades.

Un elemento HTML tiene la siguiente sintaxis:

Un elemento HTML comienza con una etiqueta de apertura o inicial, por ejemplo, <h1>.
Un elemento HTML termina con una etiqueta de cierre o final, por ejemplo, </h1>.
El contenido de un elemento HTML está encerrado dentro de las etiquetas de inicio y final, por ejemplo, <h1> Este es el contenido del elemento. </h1>.
También puede contener atributos

Algunos elementos HTML no tienen contenido y se llaman “elementos vacíos”. Estos elementos, generalmente, sólo tienen etiqueta de inicio o de fin, pero no ambas, por ejemplo, <br /> (produce un salto de línea en el texto )

¿Dónde deben ir las etiquetas?

Cualquier contenido que sea visible en tu página web debe ir entre la etiqueta de <body> que abre y la etiqueta de </body> que cierra, como se muestra a continuación:

<html> (Etiqueta que indica que lo que viene a continuación es un documento HTML)

</head> (Etiqueta de cierre de la cabecera)

<a target="_blank" href="URL"> Nombre</a> Con este código lo usamos para crear links o enlaces en HTML. El atributo target="_blank" hace que el link abra en otra pestaña del navegador. href="URL" En este atributo se coloca la dirección URL para acceder. En la sección Nombre se coloca el nombre de como se va a observar para dar clic y acceder a la página.

Con esta etiqueta nos ayuda para realizar comentarios en nuestro código. Los comentarios nos ayuda a dar una descripción detalla dentro de nuestro código que solo el programador lo puede observar para guiarse en el proceso de diseño.

<title>New Webpage</title> Esta etiqueta se encuentra dentro de la etiqueta <head> lo cual es donde establecemos el titulo de la página web que se va a observar en la parte superior del navegador.

<h1> <h2> <h3> <h4> <h5> <h6> Las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> están pensadas para marcar los títulos y subtítulos de los apartados de un documento.

<p>Parrafo</p> Dentro de esta etiqueta podemos ingresar los parrafos de nuestra página web.

<br> Esta etiqueta no tiene etiqueta de cierre, se utiliza para realizar saltos de lineas en los parrafos. Se coloca al final de cada renglón para indicar al navegador que debe haber un salto de linea.

<ol> ...</ol> Dentro de estas etiquetas podemos crear listas ordenadas.

<ul> ...</ul> Dentro de estas etiquetas podemos crear listas desordenadas.

<li> ...</li> En esta etiqueta es para delimitar cada elemento de la lista.

<img src="resources/r3.jpg"> Con esta etiqueta podemos insertar imágenes a nuestra página web ubicado en nuestro computador o de una dirección URL.

<em>Cursiva</em> Esta etiqueta coloca las palabras en cursiva de un parrafo.

<strong>Negrilla</strong> Dentro de esta etiqueta coloca el texto en negrilla.

INTRODUCCIÓN A HTML

lunes, 14 de marzo de 2022

11 - HTML