Aprende HTML en 15 Minutos 📙

en esta clase vas a aprender a html en un tiempo récord y si ya sabes html te va a servir como repaso básicamente a html es el lenguaje de marcas de hipertexto es decir que es un lenguaje de marcado que nos va a permitir darle la estructura básica a una página web darle un contenido a esa página web a nivel de texto imágenes vídeos etcétera para aprender html lo que debemos hacer es crear una carpeta a nuestro equipo puedes crear esa carpeta donde quiera en tu equipo pero yo normalmente suelo trabajar en este directorio así

que aquí voy a crear una nueva carpeta la carpeta se va a llamar aprendiendo a html vale y esta carpeta la voy a arrastrar aquí a mi editor de código puede usar visual studio code o puede usar cualquier otro editor de código así que la voy a arrastrar aquí que se está aprendiendo de html y aquí voy a crear un archivo nuevo le voy a dar clic aquí ni un file y voy a crear un archivo html es muy importante que las páginas web que vayamos creando con html tengan la extensión punto html así que

voy a definir mi primer archivo voy a crear los index html típicamente se suele poner index a la página principal de un sitio web es decir que tú puedes tener un montón de páginas puedes tener el index una página que sea un contacto otra página que sea sobre mi otra página que sea artículos otra que sea categorías lo que quiera vale pero la página de entrada por la cual el navegador va a saber que esa es la primera página la página home la página principal en la que tenga index.html vale de forma que yo aquí

podría poner hola y podría abrir este archivo en mi navegador de forma que ahora mismo si no tengo eso en aprendiendo html tengo mi archivo ahí pues lo puedo arrastrar a mi navegador que en este caso voy a usar firefox aunque tú puedes usar el que quiera y estaría viendo este contenido dentro de la página web una cosa muy importante es saber definir la estructura básica de una página web lo primero que debemos definir dentro de una página web con html es el doctor el doctor básicamente lo que va a hacer es especificar a la

página qué versión de html va a usar si le indicamos doc type html va a estar utilizando la última versión la versión html5 este es el dot es más recomendable luego debemos definir la etiqueta html vale que es la etiqueta que va a contener todo el sitio web vale antes de nada debo explicarte que es una etiqueta es algo así es algo que se abre y que se cierra como sea pues se abre con el menor que el nombre la etiqueta y el mayor que y lo mismo pero poniendo en una barra por delante para

cerrar la etiqueta vale hay un montón de etiquetas y cada una de las etiquetas nos va a permitir crear un tipo de elemento dentro de la página web para párrafos para cajas para imágenes para tablas para listas para lo que sea vale así que hay una etiqueta para cada cosa en este caso etiquetas html lo que va a hacer es guardar iba a definir toda la página web vale dentro del html te puede definir el head el head es donde van a ir todos los metadatos o todo el contenido que no se va a ver

realmente en la página web sino que van a ser datos que le van a interesar al navegador pero el usuario no lo va a ver como tal vale aquí es importante definir la etiqueta meta charles & tf8 para que para que los textos que nosotros pongamos estén en español y por ejemplo html reconozca las señas las tildes y todo eso y lo pinte bien en el navegador luego otra etiqueta importante para meter dentro del xerez es la etiqueta twitter la etiqueta detail me va a permitir ponerle un título a mi página web por ejemplo si

yo le pongo htm con víctor robles vale si yo le pongo esto cuando yo abra la página en navegador y actriz en la pantalla veo que aquí en la pestañita me pone ese título luego otra etiqueta que tiene que haber sí o sí dentro de un documento html para definir una página web es la etiqueta body la etiqueta body es todo aquello dentro de ella va todo aquello que sí que queremos que lo vea el usuario que sí que se va a mostrar en el cuerpo de la página web es decir en todo esto que

estamos viendo en blanco entonces dentro del body voy a empezar yo a añadir etiquetas que yo quiera que se muestren al usuario por ejemplo una etiqueta muy interesante en la etiqueta h1 que va a permitir definir un encabezado de una página web por ejemplo encabezado de esta página ok fíjate que si yo estoy hizo la pantalla me muestra el encabezado de la página luego hay encabezados más pequeños también como con la etiqueta h 2 que yo puedo poner un encabezado de segundo nivel por ejemplo vale y de esta manera puedo poner un encabezado un titular

más pequeñito vale como estamos viendo hay varios tipos de encabezado van del 1 al 5 luego también otro tipo de contenido que yo puedo crear dentro de una página web es la etiqueta p párrafo y aquí yo puedo meter todo el texto que yo quiera de esta manera automáticamente utilizando esa etiqueta acabo de crear un párrafo si yo copio esta etiqueta puedo poner toda la etiqueta que yo quiera para montar la estructura una página web si yo pongo otra etiqueta igual me va a crear otro párrafo exactamente igual pero digamos que no es la misma

línea sino que una cosa debajo de la otra qué pasaría si yo pongo ese mismo texto el texto en todo el texto que yo quiera pero lo pongo fuera de una etiqueta p vale si yo lo pongo pues así no va no vamos a ver ningún efecto pero si yo lo pongo esto debajo de esto si lo pongo así automáticamente actualizo la pantalla veo que se me coloca uno al lado del otro ok entonces no forma un párrafo sino que se pone todo al lado del otro el sin embargo si pongo un párrafo sí que

hace un salto en línea ahora bien si yo quiero crear un salto en línea puede utilizar la etiqueta br vale la etiqueta br que estamos viendo aquí es una etiqueta que no se abre y se cierra como las que tienen contenidos sino que es una etiqueta que hace una funcionalidad que es el salto de línea y para cerrar las etiquetas que no tienen contenido pues se le pone por aquí o la diagonal por aquí o que es igual doctor hizo la pantalla voy a ver qué me pega un salto de línea aún así tiene un

espacio diferente a cuando creamos un párrafo ok luego de igual forma hay otra etiqueta que no tiene contenido que en la etiqueta hr esa etiqueta también la puedo cerrar de esta manera o ni siquiera con en la barra me va a crear una línea separadora como estamos viendo por aquí ok ahora vamos a ver otras cosas que podemos crear con html de acuerdo podemos crear también listas o listados con diferentes tipos de cosas por ejemplo si yo pongo aquí una h1 para hacer un encabezado ahora voy a poner aquí listados entonces yo puedo crear un

elemento para mis páginas web que sea una lista con qué etiqueta pues con la etiqueta de leer la etiqueta huele lo que va a hacer es crear una lista desordenada o que voy a darle un poco de acción para que lo vean mejor una lista desordenada básicamente una lista que va con puntitos y no va con números es decir que si yo creo un elemento link es decir un elemento de esa lista y le pongo por ejemplo el adidas creo otro elemento de la lista nike pongo otro elemento de la lista reebok pongo otro elemento

de la lista suma vale por ejemplo acabo de crear una lista desordenadas y yo actualizo la pantalla aquí veo mi lista con los diferentes puntitos y cada uno de los elementos de la lista que yo he puesto ahora bien también puedo hacer que esa lista sea ordenada es decir que va por números en ese caso tendría que cambiar la etiqueta huele a l de esa forma si yo cambio la etiqueta ao l revisa bien que la abre y las cierras correctamente son muy importantes se actualizó la pantalla pues automáticamente me pone los números en la

lista ok y poner cada uno de los elementos que hay dentro de la lista de html numerados ok bien otra cosa que podemos hacer con html voy a poner un hr también para separar esto una línea separadora otra cosa que podemos hacer con html es insertar imágenes ok para insertar imágenes es muy sencillo simplemente podría irme a internet y podría buscar por aquí una imagen podría buscar un perro ok un perro me voy a imágenes y cojo la imagen de este perro por ejemplo y de clic derecho ver imagen copio la url esta y la

puedo insertar esta imagen del perro en mi página web como lo puedo hacer pues hay una etiqueta que se llama img y esta etiqueta tiene varios atributos y vamos a ver lo que es un atributo un atributo de texto por ejemplo el alt sería un atributo que yo le pongo a esta etiqueta y mgp y lo que hacemos con los atributos es darle unos valores extra a esa etiqueta por ejemplo con el alt yo le voy a decir un texto alternativo en el caso de que no se cambie la imagen pues por ejemplo esto es

un perro vale un perro y luego también hay otro atributo que es el atributo src con el atributo src yo lo que voy a hacer es indicarle a la etiqueta image qué imagen va a cargar en este caso la url de la imagen que pillado y luego como una etiqueta que no tiene contenido de texto simplemente la cierro con el barra y el mayor que ok con la diagonal y el mayor que sí guardo y actualizó la pantalla ahora mismo veo que tengo mi imagen del perro clavada en mi página web de igual forma también

hay varios atributos html como por ejemplo el atributo with with the th vale que me permiten ponerle un tamaño a mi imagen por ejemplo poner 150 píxeles ok sí guardo actualizo la pantalla aquí veo mi imagen clavado por aquí ok ahora bien si yo no quiero cargar esta imagen desde internet porque ahora mismo tengo una url cargada desde desde internet y quiero cargar una imagen que esté dentro de mi página web que esté dentro de mi proyecto pues lo que tengo que hacer es lo siguiente crearme una carpeta dentro del proyecto que se llame y

emerge por ejemplo y hay dentro guardar imágenes por ejemplo aquí voy a guardar y una imagen que encuentre por internet vamos a buscar otro perro por ejemplo éste ok yo me voy a guardar la imagen para ello le dé clic derecho y le doy a guardar imagen como y ahí ya busco mi proyecto en mi caso es el proyecto aprendiendo html dentro de imagen guardo la imagen del perro punto jpg ok importante que el nombre y que la extensión estén bien ok la guardo ahí dentro de mi carpeta ahora sí me voy a visual studio

code tengo aquí mi imagen del perro vale la tengo dentro de la carpeta img y entonces ahora lo que voy a hacer es cargar esa imagen por aquí lo que voy a hacer es indicar a la etiqueta img que estamos viendo por aquí que tiene un atributo with este atributo 'la para indicarle el título o el texto alternativo que tiene esa imagen pues le indica en el src que mi imagen está dentro de la carpeta img barra y el fichero es perro punto jpg esta carpeta img la que tenemos aquí al lado de link de

html y el fichero perro es el que está dentro de la carpeta de imagen vale imagen barra perro punto j pg los bits guardo actualizo la pantalla aquí dentro de mi página web y me carga la imagen del perro nueva bien ahora vamos a aprender a trabajar con los enlaces y con las diferentes páginas en un sitio web vale yo puedo tener múltiples páginas html entre un sitio web por ejemplo puedo crear una que sea pero eso sí tengo que crearla en la raíz del proyecto ok no dentro de imagen voy a crear una página

nueva que sea que se vaya a amar este por ejemplo contacto punto html y entonces yo puedo poner aquí un contenido parecido al que tengo en la página principal así que voy a copiarlo todo voy a poner una estructura html similar pero voy a quitar todo lo que tengo en el body y solo voy a dejar un h1 que diga página de contacto que y de esta manera yo puedo esta página en mi navegador simplemente cambiando el index html por contacto html ok hasta aquí todo perfecto pero yo puedo utilizar enlaces dentro de html para

que me lleven de una página a otra es decir me puedo hacer una especie de menú con una lista y puedo poner aquí un elemento list que diga inicio e inicio y luego otro elemento lee y que diga contacto y dentro de cada elemento pues voy a crear un enlace les voy a dar no entrar por aquí y entonces voy a crearme un enlace como meter un enlace con la etiqueta a ok abro la etiqueta y la cierro y dentro de la etiqueta le pongo el texto ok pero para que este enlace funciones le tengo

que poner un atributo que sea atributo hr este atributo hr lo que me va a permitir e indicar a qué página quiero que me lleve el enlace cuando yo le dé clic pues en este caso si quiero que me vaya inicio pues le pongo el index html de igual forma si yo me creé un enlace en el elemento de la lista de contacto lo puedo poner por aquí eso sí tengo que cerrar bien la etiqueta que tenga el texto dentro de la etiqueta pues lo puedo lo que puedo hacer que me lleve a contacto y

este menú me lo puede llevar tanto a esta página de contacto como al index y lo pego por aquí al principio vale lo pegó por aquí guardo y actualizó la pantalla aunque ya ahora mismo tengo dos enlaces y yo le doy clic a inicio me lleva a inicio y aquí tengo el mismo menú si le doy clic a contacto me lleva a contacto entonces estamos viendo cómo podemos navegar entre las diferentes páginas de nuestro sitio web esto es algo increíble que se puede hacer con html bien otra cosa que podemos hacer con html es crear

tablas por ejemplo aquí en la página de contacto voy a crear un h uno que sea tablas y aquí puedo crearme una tabla como me cree una tabla con la etiqueta table vale es leve indicar un atributo que se llame border y debe decir uno para que me pongas bordes en toda la tabla y entonces tendré una tabla puedo hacer varias cosas puedo definir las filas y las columnas las filas se definen con la etiqueta tr yo me defino la etiquetas deere y dentro no queda definir columnas como defino columnas con la etiqueta t de

por ejemplo puedo definir el nombre que sea una columna luego los apellidos que sean otra columna y luego la web que sea otra columna entonces de esta manera tengo una fila con tres columnas y me voy a la página de contacto y lo veo tengo una con tres columnas aquí lo estamos viendo ok pero si yo por ejemplo quiero crear otra fila tabla va a tener cuatro filas la primera la segunda tercera de huerta vale en la primera fila voy a poner por ejemplo mi nombre es víctor robles y aquí pongo mi web visto roble

web punto es ok de esta manera si yo estoy hizo la pantalla tengo mi tabla con los datos rellenados bien pero con html no solamente puedo crear esto sino que puedo crear infinidad de elementos más por ejemplo uno de los más utilizados son los formularios ok yo puedo crearme que un h uno que diga formularios y puedo crearme que un formulario de contacto por ejemplo a poner un párrafo aquí que diga formulario de contacto y puedo definirme un formulario como define un formulario con la etiqueta ford ok y dentro de esa etiqueta forms voy a

crear los diferentes elementos del formulario por ejemplo un elemento muy básico es un input de texto vale para ello voy a decir primero un lado en la etiqueta label y voy a decirle que esto va a ser el nombre y aquí debajo de la etiqueta label voy a crear me el input y live indica del atributo type para decirle qué tipo de campo quiero crear aquí vemos que hay un montón de campos pero el más común es el campo de tipo texto ok y de esta manera cierro el campo y automáticamente fíjate que me aparece

nombre y mi campo para meter yo texto ok también puedo crear uno parecido uno similar pero que diga por ejemplo apellidos luego puedo crear otro que sea de email un campo de tipo email que esto sea pues un email lo que hay que solamente se pueden meter emails ahí y aquí estamos viendo cómo se va definiendo el formulario luego de igual forma puedo ir metiendo un br en cada input para que así me salte de línea y no tenerlo todo en la misma línea de esta forma si actualizó la pantalla veo que se va quedando

así evidentemente esto se puede utilizar mucho mejor si tuviéramos más tiempo etcétera y luego puedo crear también por ejemplo un elemento select vale que los elementos se leen nos permiten meter varias opciones dentro opción y puedo meter una opción que sea hombre y otra opción que sea mujer opción normalmente se le suele poner un value a estos elementos para luego que se guarde en una base de that todo lo que sea y luego por último puedo definir también un campo de tipo o tono para enviar el formulario puedo hacer un input de type submit y

le puedo poner un value que sea por ejemplo enviar el value va a ser el texto que aparece en el botón del formulario de esta moneda si guardo y actualizó la pantalla me aparece todo eso que te he comentado pero si voy a poner el br para que me salte línea que y guardo actualizo la pantalla y aquí veo y bueno con esto ya hemos visto el repaso y hemos aprendido por encima html si quieres continuar aprendiendo más acerca de html y convertirte un profesional del desarrollo web te recomiendo que te apunté al curso que

te he dejado justo aquí abajo en la descripción del vídeo en el cual enseñó html css y un montón de cosas más que te van a permitir crear sitios web desde cero y páginas webs profesionales vale así que apuntes de ese curso merece muchísimo la pena lo tienes justo aquí abajo en la descripción del vídeo y sin más nos vemos en el próximo vídeo de este canal de youtube suscríbete si no estás suscrito y activa la campanita de notificaciones para no perderte el próximo vídeo