Introducción a

HTML

INTRODUCCIÓN
TEÓRICO PRÁCTICO
HTML es un lenguaje de marcado de Hipertexto estándar utilizado para crear y estructurar el contenido de las
páginas web.
NO ES UN LENGUAJE DE PROGRAMACIÓN – Esto lo podemos saber fácilmente porque si nosotros en un
archivo colocamos 2 + 2 esta suma no se realizará por sí sola.

Es un lenguaje de estructurado, en el cuál nosotros como informáticos vamos a poder añadir textos de diferentes
tamaños, añadir imágenes, añadir videos, añadir formularios, tablas, en fin, muchas cosas que podemos ingresar
dentro. Este lenguaje tiene una sintaxis muy fácil de entender, a continuación, antes de empezar tenemos que
tener un IDE instalado en nuestra computadora.
IDE – Entorno de Desarrollo Integrado, utilizado para poder ejecutar y programar con lenguajes de
programación, y como aquí lo decimos, para trabajar con Desarrollo Web Frontend.
Hay varios tipos de IDE´s utilizados, pero funcionan de la misma forma, aquí usaremos Visual Studio Code, pero
te dejaré otras opciones por si deseas utilizar algún otro.

Tipos de IDE
• Visual Studio Code
• Sublime Text
• Vim
• Bloc de notas (Para enfermos)
•Instalación de Visual Studio Code

•Para esto tenemos que ir a la siguiente liga:

https://code.visualstudio.com/
•En caso de estar en Mac o Linux, la página
identifica el Sistema Operativo en el que se
encuentran, en mi caso me indica estar en
Windows. Lo vamos a dejar en el escritorio.
Instalamos el ejecutable y abrimos el editor.

08/29/2023 SAMPLE FOOTER TEXT 4

08/29/2023 SAMPLE FOOTER TEXT 5
En el escritorio de la computadora vamos a crear una carpeta que se llame Curso DW (Desarrollo Web) y dentro
de esta otra que se llame HTML. Esta carpeta la vamos a arrastrar a nuestro editor Visual Studio Code. Una vez
tengamos la carpeta ahí dentro, ya podemos crear nuestro primer archivo de HTML, en este caso pincharemos
con click derecho en la carpeta de HTML.

Y ahí dentro colocaremos un nuevo archivo llamado index.html ¿Porqué index? Porque el navegador siempre va
a interpretar el índice o raíz de la página principal, tendremos un archivo en blanco, pero podemos teclear lo
siguiente para tener la estructura completa básica, ya la vamos a ir explicando paso por paso: ! – Este símbolo lo
detecta automáticamente y le damos enter, Nos va a aparecer de esta forma.
Es un proceso fácil de llevar, igual si caben dudas no duden en preguntar, vamos a revisar la estructura, tenemos
el <DOCTYPE html> Esto significa que le estamos mostrando al editor que estamos trabajando con un archivo
de HTML.

Tenemos la entrada de Lang, esto básicamente define el lenguaje que estemos utilizando, yo lo uso “en” como
inglés. De todas maneras, para hacer todo esto no es necesario tener niveles altos de inglés, simplemente
aprenderás a identificar etiquetas, las etiquetas son las que vamos a utilizar para dar contenido.

Tenemos head en este caso es la cabeza de nuestro archivo, es en donde vamos a meter todos los metadatos que
necesitemos, el metadato UTF-8 es para no tener errores por caracteres especiales.
El title es el título que se verá en la pestaña de nuestro sitio, y podemos ponerle Primero Sitio Web.

Por último, contamos con el body o el cuerpo de todo el archivo, aquí introduciremos todo lo que vallamos a
querer visualizar en el navegador.
Si podemos ver, todas las etiquetas tienen una apertura y un cierre, esto se da como en este ejemplo:

<etiqueta> </etiqueta> Con solo “/” damos por cerrada la etiqueta, en algunas no funciona así ya que hay dos
tipos de etiquetas.

1. Las que se usan para ingresar contenido y poder modificarlo después

2. Las que ya tienen un uso y diseño definido, y tienen propiedades elementales para modificarlas

ESTE ARCHIVO SE ESTARÁ REENVIANDO NUEVAMENTE CON EL CONTENIDO QUE

FALTARÍA PARA DESPUÉS, ES DECIR, SE VA A EXPANDIR CONFORME PASEN LOS DÍAS.

ESTE ARCHIVO ESTA PUBLICADO ÚNICAMENTE EN EL GRUPO DESARROLLO WEB, SE

REENVIARÁ EN CASO DE NUEVOS PARTICIPANTES, FAVOR DE AYUDAR A DAR CONTEXTO
EN CASO DE QUE SEA NECESARIO, MUCHAS GRACIAS. ESTE MENSAJE ESTARÁ AL FINAL DE
TODAS LAS DIAPOSITIVAS.

NO HAY REFERENCIAS YA QUE EL CONOCIMIENTO DADO VIENE DEL ADMINISTRADOR DE

LOS GRUPOS, EN CASO DE HABERLAS ESTARÁN SIEMPRE AL FINAL DE TODAS LAS
DIAPOSITIVAS.
Las etiquetas que utiliza HTML son usadas de forma no estructurada, ya que no todos los sitios web que vemos
inician con una imagen, o un video, algunas con un texto animado, etc. Depende lo que vallamos a realizar es la
forma en cómo vamos a dar el primer paso, recordar que habrá un curso de metodologías para el desarrollo de
sistemas eficientes.

En este caso veremos la primera etiqueta y la más usadas para iniciantes en HTML que es un h1.
Esta etiqueta es mayormente utilizada para títulos principales, esta consta de 6 niveles de tamaños, desde h1
hasta h6. En este caso si aumenta, el texto disminuye en tamaño. Las etiquetas tienen una apertura y un cierre, se
utilizan símbolos de menor y mayor y una diagonal para una etiqueta.
En base de ejemplo tenemos la h1: y se escribe así en HTML:
<h1></h1> - Dentro de esta va a ir el texto que queremos que se visualice en el navegador, vamos a ingresar el
siguiente texto dentro de la etiqueta, recuerda tener tu archivo index.html abierto en Visual Studio Code para
poder realizar la línea:

<h1> Mi primer sitio web </h1>

Vamos a la carpeta que hemos creado en el escritorio y ubiquemos el archivo index.html, puedes abrirlo en el
navegador que gustes.
El editor por sí solo coloca la sintaxis, así que si gustas solo puedes poner h1 y el editor reconocerá la etiqueta.
Ahora, si lo abres no verás nada, porque no has guardado cambios, ve a tu editor y aprieta la siguiente
combinación de teclas.

Ctrl + s  Esto guarda los cambios que hiciste, hazlo cada vez que modifiques el archivo
Haremos lo mismo, pero vamos a cambiar h1 por h2, hasta llegar al h6 para ver la diferencia de textos y tamaños.
Como puedes ver en el navegador, ya aparecen letras muy pequeñitas, que la verdad no valen la pena poner si no
es el pie de página de una imagen como en los periódicos.

Claro que un pequeño proyecto más adelante será realizar un periódico, con puro HTML, sé que puede sonar raro
por solo ser HTML, pero tenemos que ir aprendiendo que etiquetas usar, ya que ten en cuenta que hay imágenes,
textos grandes, tipografías, textos muy pequeños, noticias de portada, y bueno los estilos los vamos a dejar para
después, pero no será un curso totalmente fuera de esto, ya que HTML esta junto con CSS, así que más adelante
tocaremos CSS.
Bien ya tenemos ese resultado, vamos a revisar otra etiqueta, la de párrafo, como su nombre lo dice solo es un
texto, pero vamos a ver unas diferencias. Borremos desde h2 para h6, solo nos quedamos con h1. Y debajo de esa
etiqueta vamos a colocar la siguiente etiqueta con el siguiente texto:

<p> Este es un párrafo </p>

Si vemos las diferencias, parece que el párrafo es un h5, y si notamos otra es que el párrafo ya no está en negrita,
porque no es un texto que se considere título principal. En CSS hay una propiedad para hacer la letra más negrita,
pero bueno es tema para después, veamos cuál es el resultado.
Perfecto, ya tenemos algo bien, que les parece si intentamos insertar una imagen en nuestro documento, tenemos
unas formas de insertar imágenes, por medio de una URL o descargando la imagen dentro de la carpeta que
tenemos.
Probemos de ambas:

Colocaremos la siguiente etiqueta: <img src=“”>  Si lo notas no tiene un cierre, y es porque no necesita que
ingresemos texto, ya que el contenido va dentro de src que significa source, y es en donde colocaremos la URL,
vamos a probar con una imagen de gatos, vallamos a Google y busquemos gatos.
Simple…
Se van a imágenes y escojan el gatito que más les guste. Vamos a pinchar click derecho y abrir imagen en una
nueva pestaña. Esto ayuda no solo a ver la URL, también a verificar de que tamaño es la imagen realmente.
Vamos a copiar la URL y la vamos a pegar en la etiqueta de <img>. Y vamos a quitar el h1 y el párrafo. Solo
queremos la imagen.

En la img les aparecerá un alt=“”, ese bórrenlo, aún no lo vamos a ocupar ahorita.
Bueno mi imagen esta super grande, así que depende la imagen que escojas, así es como podemos poner
imágenes, ahora vamos a probar descargando la imagen.

Yo voy a descargar la misma que tengo, lo que haremos es guardar la imagen como y lo guardan en su carpeta en
donde tienen el archivo index.html; esto es muy importante ya que, si no está en la misma ubicación, la imagen
no será visible. La guardan con el nombre que quieran, y ya que la tengan, en el src en lugar de colocar la URL,
van a colocar el nombre de la imagen. Si está en la misma ubicación el editor la reconocerá y se podrá visualizar.
Ahora ya tenemos las imágenes, vamos a continuar con algunas etiquetas para la modificación de textos, ya
vimos bien que los textos que hemos puesto son con h1 y p y sus diferencias es que la letra puede dejar de ser
negrita y disminuir el tamaño. Así que ahora toca usar los párrafos, pero usando ciertas etiquetas que nos
permitirá modificar de cierta forma el diseño de estos textos.

Vamos a crear un párrafo que diga Texto modificado, y esta deberá quedar así:
<p> Texto modificado </p>  Hay una etiqueta para hacer que este texto se ponga en negrita, sin necesidad de
usar un h1 y ocuparemos esta etiqueta y la colocaremos como padre del párrafo, es decir:
<b><p> Texto modificado </p></b>  La etiqueta b hace que el texto se coloque en negritas.
Ya podemos diferenciar ese párrafo, pero ahora tenemos otra etiqueta que va a ir por fuera de b que será la <i>.
Esta sirve para hacer el texto en cursiva. Vamos a poner el ejemplo:
<i><b><p>Texto modificado</p></b></i>
Ya sé que se puede estar viendo poco legible, pero hay que aprender a ver que etiquetas pueden ir antes o
después.

Y si queremos hacer la letra pequeña o grande, están las etiquetas con su respectivo inglés, big, y small.
Estas las podemos poner afuera de <i> y lo que notaremos es que la letra cambie sus tamaños, es una forma de
modificar el tamaño de los párrafos utilizando etiquetas, pero claro que no es óptimo hacerlo así, para eso hay
estilos.
Enlaces,
imagen, video
Los enlaces, también conocidos como hipervínculos, son elementos que permiten la conexión entre diferentes
páginas web, secciones de una misma página o recursos en línea. Son utilizados para navegar por la web,
proporcionando la capacidad de saltar de un contenido a otro solo con hacer clic en el enlace correspondiente.

Los enlaces se crean mediante el uso de la etiqueta <a>, y se especifica la dirección a la que se debe dirigir el
enlace mediante el atributo href. Los enlaces son una parte fundamental de la estructura y la interactividad de los
sitios web, facilitando la exploración y la conexión de información en la web.
Vamos a generar un ejemplo con un texto y con una imagen.
Tenemos la siguiente etiqueta de enlace: <a href=“”></a>  Y claro, la etiqueta tiene un cierra, primero en el
href vamos a poner el hipervínculo al que nos vamos a dirigir, y dentro de la etiqueta, vamos a poner algo como
esto:
<a href=“google.com”>Ir a google</a>

Ahora sí, ya teniendo esto, en el navegador nos aparecerá el texto Ir a google con un color y una línea debajo,
esto indica que es un enlace y nos llevará a donde nosotros le hayamos asignado ir dentro de la etiqueta, pero
ahora, los enlaces tienen un detalle más, en caso de que no queramos que lleve aún a algún lugar podemos
colocar una almohadilla, ¿Cómo es esto?. <a href=“#”></a>.

Esto hará que siga funcionando, pero si te fijas ahora al dar clic al enlace, en la URL del archivo que tenemos
abierto, al final aparecerá esa almohadilla o gato. Es solo como para inmovilizar el enlace y usarlo como ejemplo
antes de poner el hipervínculo real. ¿Qué pasa si probamos con imágenes?
Bueno aquí puedes decir, con imágenes como, no hay una etiqueta que me permita enlazar imágenes. Y es por
eso que aprendimos a combinar ciertas etiquetas, porque qué pasa si yo meto una imagen dentro de un enlace. O
sea, yo puedo poner, da clic para ver al amor de tu vida. Vamos a ver un ejemplo de cómo quedaría.

Tenemos lo siguiente: Yo fui a buscar a Google la palabra mamá, y copié el link de la imagen, y lo coloqué de
esta forma en mi código.
<a href="https://mamajoven.org/wp-content/uploads/2022/06/inicio-sermama-cercles-
1000x720.jpg">
        <img src="https://mamajoven.org/wp-content/uploads/2022/06/inicio-sermama-
cercles-1000x720.jpg" alt="">
</a>
Aquí básicamente en el enlace externo coloco el link de la imagen, y dentro la etiqueta de img para con el mismo
link. Esto lo que hace es mostrarnos la imagen en el navegador y después dentro de la imagen el enlace para ir a
ver la imagen. Los enlaces los podemos visualizar de muchas maneras, pero toda esa magia de los enlaces, si lo
sé, hasta yo estoy emocionado por llegar ahí.

Ya que es darle estilos y animaciones cuando podamos pasar el mouse sobre algo que sea interactivo, y aunque
llegue a parecer complejo, al final tendrás ya tanto conocimiento de esto que tú mismo comenzarás a realizar tus
propios diseños, sin más pasemos a como insertar un video y las propiedades que tiene el video para dar por
finalizado este primer capítulo y pasar a algo más avanzado dentro de HTML.
Los videos en HTML son muy comunes que aparezcan en los sitios web, pero vamos a aprender primero
como descargar un video de YouTube para poder insertarlo.

1. Vamos a YouTube y escojamos el video que más nos guste

2. Reproducimos el video y le ponemos pausa
3. Copiamos la URL del video, en este caso yo escogí la canción el Hijo Mayor de Junior H
4. Nos vamos a dirigir a este sitio: https://es.savefrom.net/257Lr/ (Sitio 100% seguro y usado por Polar)
5. Pegamos el enlace del video que queremos en el recuadro color verde que tenemos abajo
6. Automáticamente nos enseñará el video que seleccionamos, de no ser así, pinchar el botón
DESCARGAR
7. Guardamos el video dentro de la carpeta HTML y ahora si podemos utilizarlo dentro de HTML
Simplemente vamos a poner la etiqueta de <video src=“”></video>  Dirás por qué tiene cierra la
etiqueta, es algo por defecto del editor, si quieres puedes borrarla, funciona de la misma forma.
En caso de que el video no cargue, tendrás que seleccionar otro diferente, no siempre pasa, pero es una
advertencia.

Ahora, creerás que es un error que solo se vea negro o una imagen, pero es porque no tiene controles para
pausar o la velocidad, no vamos a programar nada, solo hace falta agregar la palabra controls fuera de las
comillas después de src:
<video src=“canción” controls>  Con esto podrás reproducir tu video sin ningún problema.
Ya hemos terminado el primer capítulo de HTML, ya estas entendiendo como es esto de las etiquetas y
como se pueden ordenar, los enlaces funcionan igual para un video.

Ahora si vamos con algo más interesante, ya podemos pasar a ver el tema de los formularios, tablas, e
incluso validar ahí un poquito los datos que ingresamos, y si, ya aquí vas a tener que realizar un programa
el cual cuando lo termines, tendrás que enviar el archivo al grupo que corresponde.

El programa será, realizar una especie de periódico, deberás guiarte con la estructura de un periódico y la
clase de noticias que tiene, lo deberás adjuntar con tu comentario al mandar el archivo al grupo. Sin más
mucho éxito con este primer proyecto. (Utilizar todo lo visto).

ESTE ARCHIVO SE ESTARÁ REENVIANDO NUEVAMENTE CON EL CONTENIDO QUE

FALTARÍA PARA DESPUÉS, ES DECIR, SE VA A EXPANDIR CONFORME PASEN LOS DÍAS.

ESTE ARCHIVO ESTA PUBLICADO ÚNICAMENTE EN EL GRUPO DESARROLLO WEB, SE

REENVIARÁ EN CASO DE NUEVOS PARTICIPANTES, FAVOR DE AYUDAR A DAR CONTEXTO
EN CASO DE QUE SEA NECESARIO, MUCHAS GRACIAS. ESTE MENSAJE ESTARÁ AL FINAL DE
TODAS LAS DIAPOSITIVAS.

NO HAY REFERENCIAS YA QUE EL CONOCIMIENTO DADO VIENE DEL ADMINISTRADOR DE

LOS GRUPOS, EN CASO DE HABERLAS ESTARÁN SIEMPRE AL FINAL DE TODAS LAS