Transcripciones
1. Introducción HTML: Si quieres aprender
más sobre HTML, hasta el punto donde puedes hacer tu propio sitio web simple todo en menos de 30 minutos si
llegaste al lugar correcto. Y lo mejor de
ello es que ni
siquiera necesitas
instalar nada. Puedes seguir a lo largo de
este curso utilizando editores de textos
en línea
fácilmente disponibles. Y los echaremos un
vistazo en un segundo. Pero primero, ¿qué es HTML? Html significa Lenguaje de
marcado de hipertexto. ¿ Para qué se utiliza? Podrías preguntar, su DML asegura el correcto formato
de textos e imágenes para su navegador de
Internet. Ten en cuenta que HTML no es un lenguaje de programación y el sentido de tener lógica
y condiciones, solo
se usa
para mostrar texto e imágenes en su mayor parte. Pero eso por sí solo lo hace muy
crucial para el desarrollo web. Porque qué es un sitio web
sin texto ni imágenes, ¿verdad? Entonces las tres secciones principales de este curso es lo que es HTML? Que ya pasamos por sintaxis
básica para asegurar que tengamos una comprensión completa
de cómo ha escrito HTML. Y por último, haciendo una página web. Así que empecemos. ¿Deberíamos?
2. ¡Crea tu primera página web!: Así que echemos un
vistazo a cómo podemos crear nuestro propio archivo HTML para eso, digamos hacia el
escritorio o
dondequiera que elijas tener creado su archivo
HTML. Sólo voy a crear un
nuevo archivo y nombrarlo HTML. Y luego dentro de ese
archivo, haga clic derecho en Nuevo. Entonces vamos a hacer
click en Documento de texto. Deberíamos ver que se
crearan nuevos documentos. Ahora para ver la
extensión de nuestro archivo, pulsaremos en Ver clic izquierdo en este cuadro que dice extensiones de nombre de
archivo. Esto nos permite ver la
extensión de nuestro archivo. En este caso, es dxdy. Queremos que sea un archivo HTML. Entonces lo que haremos es cambiar
ese dx dy a HTML. Nos dará una
advertencia de que estamos cambiando la extensión del
nombre de archivo. Hacemos click en Sí. Y ahora vamos a cambiar el nombre de nuestro archivo
a indexar, por ejemplo. Ahora, nuestros fondos deberían
tener un icono del navegador hacia menos mostrando la edad de
Microsoft, pero prefiero
cambiarlo a Google Chrome. Ahora vamos a hacer doble
clic en él y abrirlo. Por supuesto que se ve negro. Eso es porque no hemos agregado nada al viejo archivo HTML. Para añadir cosas a nuestro archivo, vamos a hacer clic derecho y luego abrirlo con un editor de texto. Tengo código de Visual Studio. Si no tienes un editor de texto, solo
puedes usar la nota
predeterminada pero, y empezar a escribir tu código. Pero eso no
suena muy práctico. En cambio, vamos
a escribir nuestro código y hermoso editor de texto
en línea. Y luego cuando terminemos, copiaremos pegaremos
el archivo HTML total que creamos aquí. Suena bastante justo.
Empecemos. Vamos a ir en nuestro navegador
y escribir en la pestaña URL, W3 schools.com slash client. Haga doble clic en try
frontend editor. Y luego eliminaremos este código. Ahora tenemos un
lienzo en blanco con el que trabajar. Entonces, ¿cómo funciona HTML? Parecía, en su mayor parte, está hecho de etiquetas que
nos permiten prettificar nuestro texto. De lo contrario, podríamos simplemente
escribir libremente sin ninguna etiqueta y seguirá
mostrando nuestros textos
en la página web. Por ejemplo, mi primer sitio web. Demos clic en Ejecutar. Oh, ya ves, solo
escribo la nueva línea
en el código fuente, pero no mostró eso en el producto final
ni en el navegador. Aquí es donde las etiquetas
vienen y juegan. Tags le dicen a su navegador que
muestre las cosas de
una manera específica. Así que ahora echemos un
vistazo a cómo podemos usar etiquetas para estructurar nuestros textos y colocarlo donde queramos. Entonces escribimos hola. Entonces una nueva línea que dice
Este es mi primer sitio web. Entonces tenemos que decirle
que hay
un salto de línea en
la parte superior y lágrima. Para ello, usaremos las
etiquetas para ser más específicas, la etiqueta BR, que
significa salto de línea. Entonces vamos a
tener Hola, luego BR. Vamos a ejecutar nuestro código. Y por cierto, no tengo que
colocar la pila en una nueva línea, podría colocarla al lado de esto, y seguiría
teniendo el mismo efecto. Entonces la etiqueta BR aquí le dice al
navegador que inicie una nueva línea. Ahora di por ejemplo, no
tendríamos nuestro texto en negrita. Simplemente usaremos la etiqueta p, que significa Bolt. Entonces por ejemplo, noté que abrí
aquí mi etiqueta p y tuve que cerrarla aquí. De lo contrario, habría negritado todos los textos que
vienen después de él. Por ejemplo, si
teníamos más texto después, este es mi primer sitio web, no
cerramos la etiqueta en negrita. Esto es lo que vamos a conseguir. Entonces un HTML, a veces tenemos una etiqueta de apertura y
luego una etiqueta de cierre. Esto es para decirle a
nuestro navegador, hey, hacer este marcado solo para
estos textos específicos. Así que ahora cuando agregamos
la etiqueta de cierre, nuestro navegador entiende
qué textos negrita exactamente. Y así es más o menos
como funciona en general. Solo tienes una etiqueta que
hace algo y luego
insertas el texto entre ella en el
que quieres que funcione la
etiqueta. decir, por ejemplo,
quería crear una lista. Simplemente miro listas HTML
en Internet. Entonces escojamos los primeros resultados
de búsqueda. Por ejemplo. Podemos copiar este texto y
pegarlo en nuestro archivo. Ahora tenemos una lista
en nuestro archivo HTML. Podemos editar A las necesidades propias. Por ejemplo, podemos
cambiar el café a Apple y tipo de
personalizarlo y tomarlo como plantilla, luego ajustado A o necesidades. Ahora esto funciona porque nuestro
archivo tiene una extensión HTML, pero en un escenario del mundo real, necesitamos agregar etiquetas en
la parte superior de nuestro código para especificar que este es en
efecto un archivo HTML. Por lo que el primer paso que necesitamos
agregar es la etiqueta DOCTYPE. Entonces ingresemos a una nueva línea y
hagamos espacio para el ataque. Perro. Por supuesto esto que no
requiere cerrar etiquetas. En realidad no es una etiqueta, es más como inflamación para nuestro navegador que este
es de hecho un código HTML. Ahora, después de que la
etiqueta DOCTYPE viene la etiqueta HTML. Esta es una etiqueta que
le dice al navegador que cualquier cosa dentro de
ella es un código HTML. Y ahora dentro de la
etiqueta HTML vienen las dos etiquetas principales. Esa es la cabeza y el cuerpo. Entonces es aquí donde arranca la cabeza y esto es lo que termina la cabeza. De igual manera,
aquí es donde comienza el cuerpo. Y aquí es donde el cuerpo y la etiqueta corporal es efectivamente
el cuerpo de nuestra página web. Contiene la mayor parte de los
contenidos que vemos en la página web. Así que para hacer nuestro código
más estructurado, vamos a mover nuestro código
a la etiqueta body. Entonces para hacerlo más estructurado, solo
voy a resaltar
todo esto y presionar Tab. De acuerdo, así que ahora echemos un
vistazo a las etiquetas principales que usamos por defecto en cualquier
página web que creamos. El primero es el
metatag, la sección de cabeza. Para mostrar correctamente una
página HTML, un navegador web debe saber
qué conjunto de caracteres usar. Este es el
conjunto de caracteres
predeterminado estándar que se utiliza UTF-8. El siguiente metatag que queremos echar un vistazo es la etiqueta viewport. Esto esencialmente hace que
nuestra página web sea más receptiva estableciendo el
ancho al ancho del dispositivo. Permite que muchos
basados en la web cambien
su tamaño al mismo tiempo que
conservan la legibilidad. Entonces, por ejemplo, un teléfono generalmente tiene una pantalla
más pequeña que una computadora portátil. Este Meta tags
lo hace para que el teléfono
también pueda ver esta página web
sin ningún problema. Ahora, después de esas
etiquetas de metal viene la etiqueta del título. El tag del título también. Lo titulé le da a nuestra página
web un título. Así que déjame mostrarte de lo
que estoy hablando. Si copio este código
y lo abro con Bloc de notas y pego
aquí mi código, y luego lo abro. Como se puede ver, el título
aquí es el nombre del expediente. Queremos cambiar ese título. Para ello,
usaremos la etiqueta de título. Así que volvamos a nuestro código. Ábrelo con Bloc de notas. Entonces vamos a crear un nuevo
título para nuestra página web. Ahora después de que terminemos con
nuestro título, lo cerramos. Ahora vamos a ejecutarlo y
ver cómo se ve. Como se puede ver, se
muestra el título aquí. Así que volvamos
a nuestro editor de texto. Voy a pegar
el título aquí, y eso es todo
para la etiqueta head. Echemos un vistazo a
la sección del cuerpo. Aquí podemos poner todo el
contenido de nuestro salario. Entonces, en primer lugar, echemos
un vistazo a la etiqueta H1. Entonces vamos a teclear. Este
es un título grande, el más grande para ser más específico, tenemos seis niveles de rumbo, que van desde H1 hasta H6. H1 es el nivel de encabezado más alto y el más grande en
términos de tamaño de fuente. Son seis es la más baja y la más pequeña en
términos de tamaño de fuente, es muy poco probable que los
vayas a usar todos, pero solo echemos un vistazo
rápido a ellos. Ahora, una de las
etiquetas más comunes que usarás y el cuerpo es la etiqueta p
o la etiqueta del párrafo, como su nombre indica, es una etiqueta en la que
puedes escribir tus párrafos. Y así echemos un vistazo rápido. Así es como se ve. Un in-between aquí,
basamos nuestro gráfico de productos. Ahora vamos a llenar nuestra etiqueta p
con algún párrafo aleatorio. Para eso, solo voy a Google algún documento aleatorio de Wikipedia. Entonces pegaré
aquí mi párrafo. ¿O sabes qué? En realidad lo voy a
mover por debajo de la lista. Podemos añadir nuevas líneas o
espacios en el código fuente, pero el navegador lo
ignora porque cada palabra obtiene un solo espacio. Y las líneas no se rompen a menos que especifique
explícitamente
eso usando la etiqueta PR. De acuerdo, así que vamos a quitar todo este lío porque
déjame recuperar esto. Por ejemplo,
agreguemos aquí una nueva línea. Tal vez quieras otra línea. Y si notas esos B son elementos no requieren
una etiqueta de cierre. Esto se llama elemento vacío, evitar elemento es un elemento. Cuyo modelo de contenidos
nunca le permite tener contenidos bajo
ninguna circunstancia. Si queremos forzar que
nuestros textos sean representados de la manera en que
lo escribimos en el código fuente. Podemos usar la etiqueta p
en lugar de la etiqueta p. Por ejemplo. Veamos cómo se ve. Por supuesto que parece un desastre. A lo mejor esto podría
ser útil para mostrar texto de
código donde importan las
líneas y espacios. Para que como se puede ver, esto
parece un lío, pero esto es más apropiado
mostrar código. Supongo que este es uno
de sus casos de uso. Ahora que
sabemos estructurar nuestros textos HTML usando
salto de línea y párrafos. Echemos un vistazo a cómo podemos dar estilo a nuestros textos usando HTML. Ten en cuenta que algunos de ellos no
se están utilizando tanto
hoy en día debido a que CSS es sin
duda estilo Delta, el documento HTML para nosotros. Pero todavía podemos echarles un
vistazo, sin embargo, la primera que ya
hemos visto es la etiqueta audaz, por ejemplo, aquí. También hay una cursiva. También está la etiqueta de la UE
o el tak subyacente. También está la
etiqueta de enfatizar y la etiqueta fuerte. Son idénticos a la
cursiva y al bulbo. De acuerdo, así que vamos a
quitar esta pila. Podemos separar
secciones de nuestra página web usando la
regla horizontal o la etiqueta HR, por ejemplo, separemos
estas dos secciones. Podemos crear enlaces en nuestro documento HTML usando
el ancla para la etiqueta a. De acuerdo, así que vamos a crear un hipervínculo al
final de nuestro párrafo. Dentro de H ref o la referencia de
hipertexto, colocaremos el enlace al
que queremos llevar al usuario. Voy a usar el enlace de
Wikipedia aquí. Y ahora en medio de esos dos, escribiré
el texto que queramos. Estos son los textos en los que el
usuario puede hacer click. Ahora vamos a hacer clic en Ejecutar. Ahora, no voy a hacer click en esto porque esto lo
va a abrir en la misma página y
esto va a arruinar todo nuestro código aquí. Ahora si hago click en esto, lo va a abrir
en la misma página. Oh, está bien. Pensé que se iba a
abrir. Ok. Eso no está mal. Pero de cualquier manera queremos
abrirlo en una nueva pestaña cuando
hacemos clic en ella, esto es lo que entra en juego el
atributo target. Entonces así es como usamos
el atributo target para abrir nuestro enlace en una nueva pestaña. Entonces después de la palabra enlace, objetivo es igual a subrayado, en blanco. Ahora vamos a abrir nuestro
código y dar click en él. Como se puede ver, se abre en una nueva pestaña. Ahora
eso es mucho mejor. Ahora, aprendamos
cómo podríamos agregar una imagen a nuestro documento HTML. Entonces simplemente así es
como se ve. Puedes usar esto asumiendo que la imagen se guarda
en la misma carpeta, tu archivo HTML se guarda. De lo contrario, puedes usar un enlace, pero no es muy recomendable usar un enlace a una
imagen porque
tal vez no se vea tan buena como una imagen ya
descargada en tu PC. Entonces si golpeamos en Internet por un paquete de cartas al azar, por ejemplo. Y escojamos
esto por ejemplo. Tomemos esta URL
y lo peguemos aquí. Vamos a ejecutar nuestro código. Opcionalmente, podemos
agregar una etiqueta alt. Esto funcionará como una descripción para el espectador que la
imagen no carga. Por alguna razón,
se puede escribir una pequeña descripción. ¿ De acuerdo? Entonces por supuesto
que no se va a mostrar porque la imagen está
cargada perfectamente. Entonces cortemos este enlace, por ejemplo, y
veamos si funciona. Como se puede ver,
porque no se veía. Agreguemos aquí una nueva línea. ¿De acuerdo? Entonces debido a que
corrompimos el enlace, usa la etiqueta alt. Así que vamos a traer de vuelta
el enlace completo. También podemos controlar
el ancho y la altura de la
imagen si lo deseamos. De lo contrario usará
el tamaño predeterminado. Por ejemplo, aquí
podemos añadir el ancho. Démosle un valor
de 500, por ejemplo. También podemos agregar imagen de tienda de
agua usando el atributo border. Agregaremos frontera equivale a cinco. Por ejemplo. Entonces así es como podemos agregar
una imagen usando un enlace. Entonces, ¿y si queremos agregar
una imagen desde nuestro PC? Bueno, primero no podemos usar un editor de texto
en línea para eso. Y tenemos que tener una imagen en la
misma carpeta que nuestro archivo HTML. Entonces tengo una imagen aquí
que dice corp dot PNG. Voy a copiar pegar
en toda la carpeta HTML. ¿De acuerdo? Así que ahora vamos a copiar pegue
este código archivo HTML. Ábrelo con Bloc de notas. Y luego para la fuente del MH, en lugar de este enlace, voy a usar el auto. Esta es una imagen que he
creado como ejemplo. Así que ahora vamos a abrirla y
veamos cómo se ve. Como se pueden ver las imágenes allí. Y esa es una de
las ventajas de usar un editor de texto
desinstalado de escritorio. Te permite
cargar las imágenes desde tu PC junto a
muchas otras cosas. De acuerdo, entonces lo siguiente que
queremos echar un vistazo es menos, su mayor parte,
hay dos tipos de listas, listas desordenadas, listas ordenadas. Hay un tercer tipo
llamado lista de descripción. Lo echaremos un
vistazo en un segundo. Pero por ahora así es como se ven las listas
desordenadas. Así es como se ven
las listas ordenadas. Observe que son casi idénticos excepción de la etiqueta
que los contiene. Las listas desordenadas tienen una etiqueta UL. El U significa desordenado, y la L significa lista
menos ordenada. Tener una etiqueta OL. El O significa ordenado. El L significa lista. Así que echemos un vistazo a
la lista de descripciones. El título de nuestra descripción
va en la pestaña d t, lo que podría significar título de
descripción. Y debajo de eso
con la etiqueta DD, escribiríamos la
descripción del artículo. En realidad podríamos
hacer que esos títulos audaces para hacerlos
parecer más atractivos. Pero en realidad esto no va a hacer que parezca lo suficientemente atractivo. Con el fin de que nuestra
página web sea hermosa. Necesitamos CSS para eso, pero ese es un tema
para otro video. Además, podríamos
hacer listas anidadas, es
decir, una lista dentro de una lista. Echemos un vistazo. Por lo que esta es nuestra lista regular y
agregaremos otro lado
menos que de la misma. Oh, olvidé cerrar la lista. Ahora voy a
quitar el estatus porque se les
ocupa demasiado espacio. Ahora esto significa que
el teclado es los elementos de equilibrio y esos
tres elementos debajo de él, o los elementos child, porque estamos manteniendo
nuestra estructura de código, podemos decir fácilmente con
solo mirar el código que este es el elemento padre y
este es el elemento hijo. Pero si alguien quiere ignorar esos espacios, que podrías, por cierto, el navegador
leería tu código muy bien. No obstante, si fueras a
leer tu código más
adelante o alguien más
quiere leer tu código, costará hacerlo. Entonces el código de alguien era
lucir así. Va a lucir exactamente
igual a éste, pero es muy difícil de leer. Corría
muy bien como se puede ver. No obstante, no es muy legible y se considera
una mala práctica. Ahora, en fin, echemos un
vistazo a las mesas. Podemos utilizar tablas para organizar
los datos en filas y columnas. Las tablas usan la etiqueta de la tabla. Dentro de la etiqueta de la tabla
escribiremos todo lo que la tabla incluye
desde barras hasta columna. Entonces vamos a crear un rol para eso. Usaremos la etiqueta TR, que significa cinta de fila. Dentro de las filas de la tabla, crearemos las etiquetas TH, lo que significa etiquetas de encabezado de tabla. Ahora ejecutemos nuestro código y
veamos cómo se ven. ¿ Sabes qué? Voy a llevar esto en
la parte superior de mi página web. Ahora haremos
otra fila de mesa. Para hacer eso usaremos t. Pero en lugar de th,
vamos a utilizar TD esta vez porque esto es
sólo datos regulares. Por lo que el TD significa datos de
tabla y el th
significa cabecera de tabla. Ahora vamos a cambiar los valores
a sus precios. Por ejemplo. Está mostrando
información como debería, pero realmente se ve muy básica y no tan
visualmente agradable. Podemos dar estilo a nuestra mesa usando los atributos incorporados de la tabla. Entonces cada uno lo haremos,
mezclaremos una mesa. Una tabla es una línea que separa
las filas y columnas. Entonces vamos a agregar eso usando
los atributos de frontera. Podríamos aumentar este número a cinco o diez, por ejemplo. Pero lo que esto hará es sólo aumentar el ancho de
la frontera exterior. Otra cosa que
podríamos hacer esto mostrar nuestra tabla y una
materia más formal es el uso de relleno
celular y atributo de
espaciado celular. También podríamos probar el atributo de espaciado
celular. A lo mejor diez es un poco demasiado. Vamos a probar cinco. Incluso eso es demasiado. A lo mejor dos es el mejor. Otra cosa que podríamos
hacer es asegurarnos de que el número de filas y
columnas coincidan. Entonces si tuviéramos que borrar
cualquiera de las celdas, se vería desordenado. Entonces si eliminamos esta celda, por ejemplo, una cosa más que podrías hacer es
hacerte abarcar dos columnas. Entonces, por ejemplo, para el ratón, podemos hacer que abarque dos. Ahora se ve desordenado porque está tomando las columnas
de la pantalla. Entonces podríamos deshacernos de la pantalla o agregar una
celda más en la fila debajo de ellos. Entonces aquí, agreguemos una celda y podemos
darle 7 dólares, por ejemplo. Así que ahora digamos que es
mouse ahora podría el precio de $5 o $7, mientras que la pantalla
tiene solo un precio, que es de $100, pero
no dice precio. Entonces tal vez el espectador no
entienda lo que eso significa moverse que creará
una celda que diga precio. Pero ahora debido a que las filas y columnas no coinciden,
se ve desordenado. Crearemos una
celda fantasma en la fila por encima de ella. Entonces creamos una celda
y la dejamos vacía. Podemos ampliar nuestra mesa simplemente copiando,
visitando esos elementos. Ahora vamos a darles precios
diferentes. Por ejemplo, se podría
decir que se ve bien, pero los precios del teclado
se desplazan a la izquierda. Queremos que estén centrados. Para eso, podemos usar
el atributo style. Entonces esta es la celda en la que los precios del teclado y el estilo. Ahora vamos a copiar pegue esto a todas las celdas que están presentes. Los valores del teclado, los precios
del teclado, lo siento. Vale, eso es más parecido. Ahora se ve mucho mejor, pero está repitiendo la
palabra precio varias veces. ¿ No es esa una forma de abarcar el
precio a través de tres filas? Podríamos hacerlo simplemente
usando el atributo rowspan. Nos dividiremos a través de tres filas. Entonces este es el precio de venta. Quieres un tramo de fila tres. Ahora ya que todos estamos gastando 23, vamos a deshacernos de
esos elementos de precio. Se ve un poco más
minimalista ahora. Ahora podemos copiar este código e
insertarlo en nuestro archivo HTML. Vamos a correr y
ver cómo se
ve . Tenemos una cosa más. Cambiemos la imagen para
tener dibujos animados PNG en su lugar. Ya que no es una reina llamada
unimodal, es una tarjeta roja. Ok. Entonces eso es todo. Has realizado tu
primera página web. Espero que haya sido un
reloj que valga la pena y ojalá te haya
dado una comprensión general de los fundamentos del HTML. Muchas gracias por ver.
Naser Jamal, Computer Engineer
