Curso de HTML

¿Qué es HTML?
Es el lenguaje de programación para el desarrollo de sitio o páginas web
HTML: Esqueleto del Sitio Web
CSS: Modifica la presentación o diseño
JavaScript : Hacerlo mas interactivo y le da lógica
2-Elementos
Para comprender cómo funciona HTML, debemos comenzar con los elementos: los componentes
básicos más pequeños del lenguaje.
Un elemento normalmente consta de una etiqueta de apertura, el contenido y una etiqueta de

cierre. Una etiqueta está encerrada entre corchetes angulares.
<p>Hello World!</p>
Este es un elemento HTML donde:
<p>es la etiqueta de apertura.

Hello World!es el contenido.
</p>es la etiqueta de cierre.
El <p>elemento de párrafo le dice al navegador que el contenido interno es texto de "párrafo".
Echemos un vistazo a un programa HTML básico que muestra un mensaje en el navegador:
<body><p>👋 I'm a new web developer!</p></body>
El <body>elemento define el "cuerpo" de un documento HTML y es donde se guardará cualquier

contenido que queramos mostrar al usuario:
<body>La etiqueta de apertura comienza con el "cuerpo".
<p>👋 I'm a new web developer!</p>es algo de texto en un elemento de párrafo.

</body>La etiqueta de cierre finaliza el "cuerpo".
Nota: Sólo puede haber un <body>elemento en un archivo HTML.
# Sangría
Si bien no es necesario sangrar el código HTML, hacerlo es una buena práctica porque hace que el
código sea más fácil de leer y visualizar los niveles de anidamiento.
A continuación se explica cómo sangrar el bloque de código anterior:

<body>
<p>👋 I'm a new web developer!</p>

</body>
¡Observa cómo es mucho más fácil leer de esta manera!
Recomendamos dos spaces para sangrías
3-Encabezados
Veamos algunos elementos más.
Supongamos que queremos agregar un titular a nuestro sitio web que muestre un artículo de
noticias. Así es como lo haríamos usando un <h1>elemento de título y un <p>elemento de párrafo:
<body>
<h1>Breaking News</h1>
<p>Florida man robs convenience store with an alligator. Leaves a baby Crocs behind.</p>
</body>
Hay seis niveles de títulos de sección, desde <h1>hasta <h6>:
<h1>Heading level 1</h1>
Aquí está el resultado:

Comparación de tamaños de encabezados HTML
Nota: Solo <h1>se debe utilizar un elemento en un archivo .html .
# Salto de línea
Supongamos que también queremos agregar una nueva línea dentro de un elemento de párrafo.
Pulsar enterno nos servirá de nada porque HTML ignora múltiples espacios y saltos de línea dentro
de los elementos.
¡ Así que debemos usar la <br>etiqueta de ruptura aquí!
La <br>etiqueta de salto agrega un salto de línea:
<body>
<h1>Breaking News</h1>
<p>Florida man robs convenience store with an alligator.<br>Leaves a baby Crocs behind.</p>
</body>
Una etiqueta de cierre automático no necesita cerrarse manualmente mediante una etiqueta de
cierre (es decir, no tiene una etiqueta de cierre separada </tag>). La etiqueta de ruptura es la
primera que encontramos.
Formato de texto
Ahora que sabemos cómo mostrar texto básico, ¿cómo ponemos oraciones en negrita, ponemos
en cursiva palabras nuevas, subrayamos frases importantes y más?
Para hacer eso, necesitamos elementos de formato de texto. Hacen que los textos
predeterminados parezcan más elegantes.
Éstos son algunos de los más comunes:

<b>elemento al texto en negrita.
<i>elemento para poner el texto en cursiva.
<u>elemento para subrayar el texto.
<s>elemento para tachar texto.
Así se utilizan:
<b>This text is using bold formatting.</b><br>
<i>This text is using italics formatting.</i><br>
<u>This text is using underline formatting.</u><br>
<s>This text is using strikethrough formatting.</s><br>
El resultado se ve así:
formato de texto HTML
Nota: El <b>elemento es solo para texto en negrita estilísticamente; HTML también tiene un
<strong>elemento que se utiliza para transmitir que el contenido interno es importante, además
de diseñarlo para que esté en negrita.
Aquí están las cuatro etiquetas en acción en un anuncio en el aula:
<p>This is the reminder that the <i>final exam</i> is <b>mandatory</b>.<br>
It will be held on <u>Monday, October 14th</u> at <s>7PM</s> 8PM EST.</p>
Esto se verá así:
Salida de ejemplo de formato de texto HTML

Nota: Las etiquetas anteriores son buenas para aprender a diseñar texto con HTML básico, pero ya
no son las mejores prácticas en el desarrollo web. En el curso de CSS se tratarán otras formas de
aplicar estilo al texto
Listas
Las listas son una excelente manera de administrar el tiempo, descubrir qué se debe hacer y
recordar cosas. ¡Y se siente bien cuando marcamos elementos!
Aprenderemos sobre dos tipos de listas HTML:
<ul>Listas desordenadas
<ol>Listas ordenadas
Para listas desordenadas , también conocidas como viñetas, comience con la <ul>etiqueta y
envuelva cada elemento en un <li>elemento de lista. Al igual que:
<ul>
<li>🧺 Go to laundromat.</li>
<li>🖥 Code for 45 min.</li>
<li>💅 Take a bubble bath.</li>
</ul>
ejemplo de lista desordenada
Es <ul>fantástico para enumerar cosas en cualquier orden. Pero ¿y si quisiéramos numerar la lista?
Para listas ordenadas , también conocidas como listas numeradas, utilizamos el <ol>elemento:
<ol>
<li>🧺 Go to laundromat.</li>
<li>🖥 Code for 45 min.</li>
<li>💅 Take a bubble bath.</li>
</ol>
ejemplo de lista ordenada
Consejo divertido: una vez que termines cada elemento, agrega el <s>elemento tachado para
indicar que la tarea se ha completado.
Enlaces
El primer sitio web creado en 1991 todavía está activo hoy: TheProject.html .
¿Que notaste? Además del hecho de que es básico, ¡hay muchos enlaces!
Los enlaces son parte integral de la idea de Internet. Son la forma principal en que los usuarios se
conectan a otros sitios y navegan por la web.
Entonces, ¿cómo agregamos un enlace a nuestra página web?
¡ Podemos usar el <a>elemento ancla! Esta etiqueta de enlace nos permite agregar un hipervínculo
a un fragmento de texto. Veamos cómo podemos hacer esto:
<a href="https://archive.org/web">Internet Archive</a>
Aquí, el <a>elemento de anclaje es similar a otras etiquetas, donde lo que se muestra es el texto
interior. Pero ¿qué pasa con el hrefinterior de la etiqueta de apertura?
Una hrefreferencia o hipervínculo es una referencia o puntero a otro sitio web vinculado en
nuestro HTML. Cuando se hace clic en el texto "Archivo de Internet", el HTML redirigirá a ese sitio,
que en nuestro caso es https://archive.org/web .
Nota: Esto también se puede usar para señalar un correo electrónico o un número de teléfono
usando un parámetro mailto:, tel:o sms:, respectivamente.
<a href="mailto:frankie@gmail.com">📧</a>
<a href="tel:640-500-CODE">☎️</a>
<a href="sms:320-250-HTML">💬</a>
# Imágenes
¿Y si queremos añadir imágenes? Podemos usar un formato similar, pero con el <img>elemento
imagen.
<p>Here's a cute pic:</p>
<img src="https://i.redd.it/5unn16axx1v81.jpg">
El <img>elemento de imagen es otra etiqueta de cierre automático, por lo que no tiene etiqueta de
cierre.
srcEl atributo, que significa "fuente", especifica la ruta del archivo de la imagen.
"https://i.redd.it/5unn16axx1v81.jpg"es la ruta de la imagen.
Para la mayoría de las imágenes, la ruta del archivo se puede encontrar haciendo clic derecho en la
imagen y seleccionando "Copiar dirección de imagen".
Curso FINAL 1.1

<!DOCTYPE html>
<body>
<h1 style="font-family: Arial, Helvetica, sans-serif;">QUEEEN </h1>
<img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUVFBgVFRQY
GRgaGyMbGhsbGxgaGx0aHRoaGx0dHCAbIC0kGx0pICAYJjclKS4wNDQ0GyM5PzkyPi0yNDABCwsL
EA8QHhISHjIpIyMyMjI1ODUyNTIyMjUyMjIyNTIyMjIyMjIyMDIyMjIyMjIyMjIyMjIyMjIyMjIy
MjIyMv/AABEIAK4BIgMBIgACEQEDEQH/xAAcAAAABwEBAAAAAAAAAAAAAAAAAQIDBAUGBwj/
xAA7EAACAQMCBAQEBAUEAgIDAAABAhEAAyESMQQFQVEGImFxEzKBkaGxwfAjQlLR4QcUYnKC8RUz
kqKy/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAIDAQQF/
8QAKxEAAgICAgEDAwIHAAAAAAAAAAECEQMhEjFBBBMiMlFhQoEUM3GhwdHh/
9oADAMBAAIRAxEAPwDPlact0emlolQJgjFO2sjIpDYoGKAoUyZ3oMJoGlr0EUG0MkZoAdKcGkSW2
7/pT9ji10lYBOksAGVo0+p71KWRIpHG2NKkj3zQJjbekWOJ1yY8uAIwZJ7dtqcv22XJU/3Ax/
ahZUxuDQ3J3ilLcnekK2oSKftW9zT2CiNhoNKZxG1EFzQIrLGURvVjajApRomNLY3ASR1NIK9acI
kUlVos3gJUYxQbbFL0UsJtRZjgQ9Gc9aWlr1p/
RnNLKDea2xeAxo00bHpRuuaIritTFcQAdaZd4OaLi3KrP3BMY6zWd47i2Y7x6dMGmTM4l+9xYjaD
/mkNxCRuKzTcSWxJB7n94xNJe4I0gnMn0B9fftW0w4o1IuT2pMVRcPx5QgN1yPw/
Sri3cB60GNUKNJZaW1I96DBpVmluKVEUl3oMIzDNK6U4Pam3oAbzQo4oUGUXbGKWGptzNGpoFQ61
FFEqmfT9aWRQbQlXFSURWxrghSxGAMdJP83tTBTNO2OD+IzBTvlZIGBImJzmfwPpUcsmkWxx2RrX
DIUY3FKkiQJggZIM9D6fhUOw9tHZ2cxBknovywB/
M7fgD71P5xwdwIAJmIJPXr+ZNU3+08oUg6jsPrvJO/
0rnjJM6OLLhOKsldVvyGcDJJOcnsOw96abmNxNQuSZGGxIiTgd6d4a2ge2LikMqGYGGYkmCR1jG0
UxzG8gQKiwATGIIB9O29Y+NgkxrgXggAeVvfB9ZJq4QfvpVbwjAhe4wDjbse/
+anTV4MxRsO5vTTUzxfHW7eHZQYkAnJFV7cxJQOrKB1npjrNOa6iW+jFJK1S//P3FWXtqy/
1I3575+1W3LeYW7y6re4+YH5h7jt6jtWNNbHg4y0hxU70sCBSzSkTvSWV4CdOKJ80u+2lCxIAUEm
egA9Kx3HcY10hmLBCNBVWBPfzAkCDPafWnhFyJZHGHZp3uqBJZQPcUleKRtmHf6d/
asfcGyySMRAgmMBTJwB7R96bC6dRAyZxiR80iAYyOtU9r8nP734NqTO34daMuADJ+tZnw9x4Vvhk
wGypM79d9iRJ7VouPMW26GO8fiaSScXRVJSjaKDmPFa3IXMbRiB6zVXe4jS5EBhsQIG49sfSnV8i
HE5OY2zsfr+81Ft8MWlmJjBnfcH9/+qtFJEHYLjtp0t03yOnT9mkm5KAZ+YmTAJEf471o+S+E7l6
HUrpH9JliR67DHqKf514SezbVv+YULE7zvHQdaT3o3Q6wyqzJ20O8Ded4IjMirPk19dekklj3/
H61C4nhmS4QYDA5HSR79D+tR7jwZXBmYGI9KrqSJ1WjYuabIo7IJVS0TAmPanfh0ghGcxUZ7kb1N
vpAqE9uaAHkec0l2pIEfSlSCIJzQYJ1UKEChQBeMo6GiRaSfejCmgxDivGKWhpoUatQMOKhZ1UdT
H3NPcNoV/hgklyACe0qpHtO3pHqajIp1DPt6GmuTKz8ZaE5B+/lJ/
HeubNvR0Yls2FjltxiZUBent3pPEeHVJEqak8V4mNklXsvgxjqTtH7zUjhefW7yNcUMot/
NqEafeoe2kjp5OyructUQoUbfY9KyPNLbI+hyoiYMZz371rD4o4Z3ID7dQDE+/
esn4rvLcVmQz6xWKHySB9EbghDhSI6jsTGYq0v8QttdTGO3qaqOVzqUE5Cfv8AM/ao/
iS63xLaidI37SzACft+NdEF4Ek6jY9wXL/95c0KDrBJLHrEfhmrbiPCt+2h/
hxvEQw2j8ulbLw5bthF0IuwzAk9zPc1qVaRWpt+RKVHBL9v4alWBY7H+xE/
uKpeE45rV0XE75B6qTlT+
+gr0XxHDJk6Ek7nSJrlvjnlVkHUqKjb+UR16xTRycXUvIrj5XgetXg6qy5VgCPYipiocVTeFIPDr
vKsw67aif1q9d+wqUtNo9LGrin9yg8V8aEQIDBYzgEmPp9e01R2FY2wLYy2Y3lpyTjJ9MDpUrxNe
ulWhT8NLiidJI16W3MR/SY/
5CrvwJwBuXNR82nzEnaT1nuaunxhZ52dcslIicr8McRcyyFT6QpzJ/
l23+81T868N3LJLGYH82THoa7rY9qr+a8GlwFWUGe4qXuyXys32ovRwIOQNSkgrn65/
f1rVXr4ucOH6MPNHcZMfUUXjXkiWV1JgDce5pfLNKcGNYGnSdW+xOPXqKpKalFSX3GxQaco+KMvb
ujae4OM52+gge356rwXy9LodrhUIjiQRvAB2OczWSdwHJGANsdZ/
H61tv8ATy0txbtu4OoIOQYYHIO/
emzfSRxfUbngeY8In8K0ygzsAR9M1Xc88R2bbG2yuxG4VZj37VacJyu1aBK21EmdhuYEj7CoVyBx
F1SoAcK2qNyFUH8hXI689HUr/c5j4puLduhrasoZSSpA3XtG+MR3FZ/E9TOP0n3itv4/
S2qpbQDVqJJ65BJ3rCgSQO/
tXbgdwRy5lUjcrsPanF2qNw7goOuInv8A5p4VpJoaujNNAUq8+d6JM0Cjd5SabNr3NPM9I1UANa6
FImhQYaBRBp2ks32796bc0ALJoge1NzSl6VhRIdQwRifTv6Uzy3imTj0dk+Z4Ujp5SIPpiPsKdYG
Mfeo1h/
hPa1nUqvqLRJUiDI69QfoajNOysNI6utlLg1BiD3BimeN4dBYuKFEEQfXfemOBvqUDBvKRMjsc4q
i8S32z8LjDbDGSj4GwHlJWfU5NI2qLwi2SeJ5HauW1Kogxg6FkA5MEZFYvxSbduLQdRiWJ6x0A6m
tOePI4dALgeBBYRBPcRXOuZ3Bd4lQchSFztM6m/
QfSlguUt+DZa6LfktuYeOkfhNV3i69puJH9P61qbKjSIEDt2+1V3P8AgVuIAQA2yse+
+e3vVINKVsaUG4NIvuBNwIkFwmkYtkAlvUnAFXvI7l8tLM+gna4UZhuP5PvVT4O4otbCsMjB9xWp
e4qEDYd9vpU0kia2UvNr3EO7hWYImCEKB2ONteOv4VifFCObbt5yiyJcgkNInIwRXQ+FuBr95ZBA
IPfcH+1ZH/UDiBAtoB3I7+9Yu0/
ybJeCr8KIRw8nq7Ee2B+eqrpWpvhLGi2iQBCiffr+M0oiiTttnoY41FL7COdcGz8vQ2EVlVna4+D
BDup9dUkn0q78Dcqa3YDOwLOoIA6CMAnqYiqLwmbnx+K4f5rL6ndWB0hm0wVI2YqTjroHaa2/
L7Pw7aWwTCgKCd4GM076rwee/rf7opeb8NfDfw/
LknUruDtKgAYMnBnb1qRxXF3bHCtevNqKAE4APTeMTV+O5zWV8c8Sr8IVDA6nAI7ifymKm4pDLfR
z/n/N34tSPhkSRpzk56DY5rQcRwStZ+Hj5QASJAIGDmolzhVa7aYEkrluwAB/
UirZlk+9a5qlxOv0+LTb86OZ8dwxRirASDGDI33HpvWm8AcUfiuhIwg9zpYAR6Z/
Gh4r5eij4sQWOmO5z+I79qzHLOKe1cV0Yggwe0H5ge4rr/
mQZ52XG8WSjt93i1Fsl2KiNxMj2jrWW4hrj8StwXrlwIpgNbKAA9Cdvwqx5ZzUFvh3Doudjs3qp6
ij5rfS2uu5dLROlfIBq9lAn61xU6o6IyRgfGXEFrjE9G0j7GaoeCtamVSQJyD1BFS+d3C7Bv6mY/
fNRuD4dmYBZnef36134lxgjky7ma3gOH0oAdyZwP3NSGtxQ4ZSAJ6CKcY0qYk4ldfwTTRu1KvKDm
o4TO1MI0KORTboYxR3LkD2pKOSN6BRGg9hQpWaFBhdsCDSlM0fELUdr6p8xjsOpoBEnR6UDbxNVH
E8+RYK7kMfYgHT/wDt07VS8Tzq4+7H5SMYGSZOPQkVvBsflRrL/
FW0HncARI7kTGI9Z+1Vo4z4ssohJ8s7mMFvQYiPSsuXnc9AJPTb8K0Vi9b0hVdSAIEMJgVvBIzm2
bLk3M9FpLjEhFPw3I/
kZdmPoV0knuTVvxb2XGocU4BE4dSv2IrI+GeORbrW7h8l0RnIDiYnoJyPtVd4k5MLbk2pAP8AKJj
6dq4pxqVPyduKVxtDniLn6J5UbWenSfU+lVPKeWvdi6GUBjmJJDDcEd+vsRVM1glwGEDdpxik2OL
uW3ZrbssknBwRJiRsfrXVDElH49kZZKnvo6ZYtlVAJmOv/
rFHdu21Ba8QqAeZjOB6RmdojO1ZTl3i0jy3ln/ksA/VTj7H6VA8Tcza+w0T8Nfl9SRlmHTsJ/
WprC3KmdX8RFQtdmz8H83t3LlzSSAGxqjUVxBxWu4t9Sw9tHSZAOo56GFQwfWuV+DuWu6NcVoIfS
pHRgoJnuCCMf8AGtpw3il7I0XrR1DGpYg+udqnlioyaRHHkfbJvLrQt3Ga2gQMZYlrhONvnUflWJ
8Yc5jilZQGCtJB2IGI9Ov2rQc38UfEXTbUj1MfpXPOdIdYOc4n1rMMU5bNy5H2joPB8YtxFdflYT
6j0PqMinxWW8JsdDLJwdTTsJgLp94afZfWegcn5LcuOjOjBJli2JG8CcmcCR3rJY3zpHdDMnjU3o
ueVcrFqwHKw7nUT106cA/TP1NOowIq7vLI+n51lHdrcsBqAYhx1x/
MPUiDHrVMqUK+x50Zubb8ku9xFxZPl0+rEH8jWH8UXLd4rqUq42aQQRjy+XHTY1rv/
lLbL0PoR+nesjzu5bU6iACSdKjE+3YDqajJvwysZKqa2McIqqJLAFtpIEx2/
Gn7fH2vMTcTy4PmG4/
WoPLPD9zi9WlgI6kHOZ0yCCvuJI22rP8ANuBfh7jW74ZHHmCkLOnVpB1aiSTG4kHuDNUxYFJXY8v
XuHxiui55hcXjStmyNTMNWpiVCgRLRGRmO+
+Kj2PCj2oDsvmYKSBJI8xOnUPKIEbSZ6VD8J8cEd2OCdogfNpnbb5fxrQ884xjw7OjQyQwODEe+N
pH1qrXH4xOSWeU5cpf2LLiOGt3V0uoYDv07EdqyfHcq0uQmor01En7E9Kj8L4vuD57asfQlf70XE
eKXYGLQBiAWYsB9ABP3qSw5V0WhlitsS/
J3uBQBnWB9CYP79KffkD2FRmZoZoCpA1HSzCOrGREZqf4DF3ieJl2Oi0hMAALqbyKDGWwXOf6a13
i50trZY4COWGUB1BdI+ZhjzH8OsV0Qi1qTOb1Gb9UTG8HxbnDJntIDSBOFYz6RvJ2wYO1xp0s1xC
igxJIOZAgxsRP9ppNu2jXGIJGhA/
xDqDXJdQS2kFi5QkjGSTqGSaXYtNpxc2uNbRNc6lTSzXNbfMEBVtJUHfBAIDvD5i9EV6ltdDH+
+Ri6gMChwI1eUgGSVEA5OOyntSbh2M4pPNrjqjpc+dDGgzJUAnUupo0QrCYJKnekfCVAqKWPlzqM
wwZlIB0jyiMHcjOJFK4uOn/
ALHU1II7027YgYoH60yzigB2PShTWfWhQBqnad6y3ia4RcWDBCzj3NaXUQeorH+JHm+w7AD8J/
Wnj2YVtxpyPX/
NNmgKC04AVqNo7UVCgCZw3HFV0H5eh6ifzFdM5Lx1h+HF3ibirohSWPzSCVgbsxAOBklTXJzVpwB
V0CPnQcD32+2allxxktlIZHF2iy8U8ZauH+EhVS/
zGJYAdh8oyMVQ2kjEjeBMRPrJwNsn9Kd4y38N9AJgZg9J7fQCkYJ30yfoF67nJ9Ov1p4RUY0hJyc
nbGXB6iO3t+v+KNXIyKK45OJJAwJ6DsO3/ukA0xhq/CHiI2LgVlU27jAPOCJIXWD3GCRnA6b10/
nHLLRIQldZBYKSNUTE+04n+1cGnBHcV2KwUeynFC41xrxBfUEkSreVdK40kaYkwJPUmo5YJopjk0
QrfIbVx9C3FU9gZwN46E+noe1W3B+B7V8p8XULSEmFMM7REE7gZyRGwAio3KuAbibxW27W0SCxAG
sNPlCawe3UGIxvXR7FsKoCgAen7z70uHGls2c2yFy7kfD8OIs2UT1AlugksZJOBmelWAH470dFXR
RKxLrIrNcX/DukHZ1n/
wAlgN+BWtLOYqHzDlqXSpYkQTtAMER1FQzY3KOuymOfGVmE53wAGq4PL6iqMeGuIbQ7W21MTvuBJ
iZ2xXWTy62FHlmNtWdvwqSghRiTG3r9ahj9LV2+/
sVnnvoqvD3K14ayA0AxLE4rM+LWs8xH+3VltsjYuPbLPuCfhnUpVTGe/
pWpvcFduuPiMFQZ0rn9n1p9uVWZUm2kqSRjOd6vHl1FUl9/JB157ON8Z/p5xnD/
AMVAt5Acm0WL6d5KET9i361Ls2y1hxp1HSTB6kCQD9orsllAogdD/
mslzXgVNx7iIAFcLcjALFEfVHqWIJ9u5rckemZZwe4mliAZHQ916H7RSwKm8SqC49tjpCO6IwE4D
tCvGSvY5I9RgPcr5cLl1LQcMzsFAQOQZOSSwEKFknrA6dKWYdF/
025b8Phg5EG6xf10jyJ9IDMP+9S/
GN8o9kgIUVpuatEQYgCVYgzBwAcDIrRcHaVAFUQqgADsoEAfYCsRxvEjieK4gaQRauBSQxEhk+GF
GGQwxYlCu5USdlTipXa0yuJx5fLoy9q0dTi2xtgEHFyNbqW8ihzqcsSwgiJg7ECpj3mRBZuW2t6j
CsyfzOTrUQQrSrESukKFAJMxTXD6fmVnKI+tjpOSlydVyJXAghgY8sSTgSP9zcsodDM6q7GQqsIf
BJmWcBwQVDA4B6TWNTj9DGy+ghNNxf5I925bW3cGm2zlGtqGM6ba41LIJQhNIwf5z/
TIhXnQ8PZcAI4JVllSbiBEPxDAGnMCJJz6UrhuDAXXK/
EghdIXd3ZZCqRCqSBOYmOwqKeE02lj4fn1AtphlOkOQdRkArImNopvd8P+hyRxyi1aen5/
wLDUyogmgmw9h+VJZjNKXY7J70KjfENCtoyjVu0msTzhpvOf+UfYR+lbUKawfGNNxz3Yn7k00BRi
lN3/
AHNJpUYNUAI0BRUdAANSOX39FxSdpg+3+DB+lR6EVgFnzO4DdaOhhvpgAemJ9z6VDuOB9aSbpyCS
RM+5701PWgygChQoCg0Mmtv4Y5yf9qOHnK3JjvbcMcf+Uj0kViQuCZG+3UzPTtjf1FSeX3GS4roP
MDgd+kUs42qNTo7N4S5mF4leGQBg4LlsSNCn75gff67xdht9NvpXFvA/
NrScwsr89y4zI7j5E1KwVE/r82kFsDf5pBHaUETiM/
nkn7zRjjxVA3YqhQpDPFOYJdskZxGYxmfvSlIOaNlDCCJBH4VEtXIdk6Tj/
wDGf0JrAJS7RRpRA5oy0An3oAZsSWdtR0zpA6eXBP3n7Up2/
iL6gj8qUBpTaSBMDcncx6k1HvzqDHYRAjaTBP2pels0kDcj0H6j+1V1u2d+r3S//
iBpX8ADVkxjJ6DNNWlJ8xEDoPT9KxrYHCf9ReULw3HXBbnQ4+KAf5S5OpQeoDZ9AwHqbr/
TPkZJbi3ECClv1nDuP/
5B9XrSeO+GsOvxL4lNUahIKuMQCMiRj6VbctuILaqgCqoACjAAAEAekRWOXgK8kq44VHaYhSZ+mN
/
WuZjmFx2Nz4oKQWttqIQuQwI06NUrbLgg4wBM+Y6PxvzX4PDomlX+I5DIwwyKskenmKZ9awNvnEh
tTT5cKRBUqXZAgGARrInsIAyIxxlVphHbqrr87HeEt8SQyi0JRl0W1S2HVviBsEjUi4BLGZBnYEi
65+yWbesgM6s2hwCrSXIusDblCQzwdSjMCWAFVVi4buhCUIL+W6ygBmNxEErILMASJgEQpkZqD4j
4gfDVEBVdQBQhFMhFn5MEFvMT1Y+gojLdPTKRl5TJPKeHuXE8trIG6lgzLcIJYADOwWcDfOKYe0y
MQwYlT8UtlSYGACRBlSZzuxim+R29ThyGLL/CUfy/EcvoZiWBCTMgGZ96vOb8E6aTYZgdRV/
4jXCvlUoATJKAwYidJmDBIei3v6pozlyQdiBuJ3jeD60w9wzVgeGcWNJYk28nIdN28qsNiojYlSZ
GCBNXSkZ1dryOz6GhSNZ70VAhtCa55c3+tb2+3lY/
8SfwNYF94GwrYCCTRr19v1FFRoP39KoaFQoGjrABQFChQAUUdBUJ2BNCtAFA0KI1gBilpOw3OPoa
QKXbaCD2NAGp4NLfCNauoJZSrkneVYMY7bV6AYj5gJxIjrPvjON688vxKXEGINdt8G80HEcHauT5
lX4b/wDdIU/fDf8AkKWLMReUlhQURO/
ff8u3+aVTmhCovEoJDeuf707xKncGCOo7fqKjf7ifLcABOzDY+/
apuai6ZtWPJOATLZIMQNz+kUu6+Fjqw/Ayfypuy/f9xQYH4gHQEMPqHB/
Gtswkx1pq4Jp0mmq1gLA1D99P80ji3hCaY4Hig1y5bH8mk/
R9X3yDUm8kiKyO1ZrKXjOXG5wrool4Lr6uMgZ77fWsTynmHEnU3wmIkEzAOwxnrEV1Ap5Y2xFcr4
Di3S49u5OtbjBgRH8xgx2Igj0NTyRqmaujO+OuYtcvIoRkNtAM4OpiWMgjaNNZVm8uM6j9hU7n/
HfG4m5dG2qB18qwgP2ANVpI+gydxmumOonO1uyRZvkFRloEgT8rSDKzgZAJxmKK6TfuNnMEjuSDj
UTlmM5Jyaju8TByYz19ak8qWGY9hH3P+KSdJWjoxXJpMtvDKqWKMpLDzn5GBUaYXzH5ix3gkCYiS
RbXL6hF+NcZ1YNqY3FDy2oNaZNWnYocf0+wrO8Y5CkiIzuAY1YJE9f/
AHUZeY3AIDSCukyWbGMeY7bYFRUHPd0PK4yptUaXjSYulJxhpYOXlTDEC4TaEMcDEA94rMtgxSGv
EkSQSI6BcAaQJ7RiO1EWljM7yZzTrG4rbsXmpa/4HNHTdCtA2PHk/Df/AKN+VYYj/Arc8w/
+u5/0P5VhiZMmiBNCTSrYyP30pUJ3Y47AZnvJxHWKSGzifrn9Kc0I0VGaKgA6ANFQoAGo0KFCgA6
TR0EjrQAax2o6GYwDFEKwC14BpxNdE/0u5n8PibvCsfLcX4if91w31Kwf/CuZ2X0lT0NTL/
MXscRbu2zD24IPQkbg9wQSD6GkS2Z5PSe+cahj2Bifviku4idXWMdwYI95qBw/
EfEEzpdYDekiRPcdDU5H1ehXcYkemRsabs0W6eX6U0OGUgAjpTrEgHr26ff600/
EQVBBJO8QYwTn0nH1ocU+wsC2wNjtinGTzap6R+M1C4HifKdRJYQGhT8x3jvvvtinL3FCSsN5RqP
lMRnAxk46dxQkkZZJvOQsqNR7TE+3rWd4jnDERIX0UGfYk/
4q6+NmPNvPytEZ9Pas9c5c1ziHFsEKSH1kHSAwk7jJmcD09ahnUqXEri4/
qC5WLi8R8VX8rIEe3p+aGJQq2rBEt0M6j7jXGo/C8GlsQok9WO5/
t9KVevhfeqY4uMakzMkk3oQ/Cy2ou/
tIj7RXOv8AVe+lg2riCLjq6kjqBp0T7EtmuhXuYKmnXgHr0G2/3FcU/
wBUeZLevjRGkMwG84CL9juB0mmaT0KjEIaeR/3/AO/rUcGlB4/Kqpk5RsNm9ateCwgPVs/
p+VVSCSB1NXOgnSqgkxAFQyvwdXp403IbutII6Gq0WjPm2/
OpvFqyRqVhqEqSPKy91OzD1FQmPqD+VPjjolmlb0JeOwj0xRo/
1pDNRW9xTsRIkzQopFCplDaXVlWHcEfcRWFK5jYTH+cVvWNYnmFrRccf8jHscj8CKyBNDIcf0g+4
j8v1PSkn2H2ii29/y/zQVh1E05oRoUbCirQBQFFR0AGq+ooqKjoAI0pAJzMem/
40mpNlYWfISdpyR9KAbCthRpLISCTu0TESAQMe9Mz6fTNOMckCJ2jynbsQI+3ekTWAP2XxB2/
e1N8RJO/
TeismpFjh2uXERFZmYwqqNTEnooG5oA7jyfmZucOnFWlLa0UsoBJlRFxceoI+gNXvB8WlwKyNDRi
cSv8ASfasr/p/
4a47gpF66gsEljaXztrIjVqKjR0wDnrWnfgNDPcy2ptRE4mAJXscCkSaeugbVEviuLKCfwjP4VnO
J5jxTMSqog/
5Qxj9PvVDzjxAwvFWt3Ai4GlgT9jGPWfpVbd59aIzbuj3j9GNRllvpjqDfg1HDcVfWFPwFHbSST9
A1TrfMAoPxbiAkyYGTvvk1y7i+f76Fj/
trP8Aaqt+Y3WMi4N9vKo9tgaIzkHts7YfENhZJcARk4BxEKo3P5VGseNEe4qJbJTqZGrboo9YrL8
m8L/GRbjXPKyhhp3g5yTWu5VyuxZIW2AWiT1b0knpTReSX4RjqJb/
AO+1D5HUf9aj8TxSW4ZmAUSTPpv+v2qLxPMIQNhRql5gkLn+adIII3ziuf8APfEo1NDQrCMmWgiC
BIkDfAAqkpJCxTkaLnvPwBp8wbPUasyu2fhjY5EmuVeKuJ13FwAckgYA1EY9NjSuN52T/
wDWIG2TLflAqjuOXYsdyaWCbfJlGklSJfLeKRGBaytz0afy2P2rc8dyuxxNpYRbbgYKKqkTmGAgM
PT8ayPKCEbABbv2+ta/heKWcvqJ6KO1Qz5GncTpxYU47KPgvCfEC5A0FSPn1QInsfMD6R9a1/
D+H7SWyhIYmC0qNBIULlTJKyNUatyYjoj/
AHxGBv6n8TSOO51btga7mdOohfmJ6DFc8ss5vRVYoxVeCh5zywJZW20Svy6FZgrEqSGl4E+bIAnE
ATpOMLVoeY88a4o3HmJ0gkALBUBh1M+aQfpiqHSPeu7ByS+Rwzir0NATSxigaImrC0HNCioVgG6m
qDxBw/
mW4OvlPuMj8J+1XgpPFWQ6aDsR9j0P3pE6JoxJFFTl0QY9Y+002KqMLXAG2fviM+39jSCKDOSZO9
HQAmjFFRgxmgAqFS3sj4WuTJcqBAiAuomZ9QAI75qIKAFovWJAyfanLlwHIQD2J3+/7ikxGx/
frRO8xgZzgR+AwPoKwBJNExpRSAD3pBrQFIa03gTm1nheLF+/
OlEcrAklysAD1I1AHAzvWYFT+SrbPEWBdUtba4utVMErIkD9/
Ub1gHfvC3NeI41DfuWls2GH8JDLXH7uzSAE6KAsneYidAy96UFAwAABgAYAAwAOwpF3oO5j6dfwm
i6QGW8T+HviDWg84/H0NZ3g/B91z/
E8o9K6cRQAqUsEZO2MpNKkcn57y7guDuW7d8tLIXwrP1Cj5Rj+b709wvE8paFDLJ2BtspOJ/
mUetZvx7xguc2va1lbYW2oxsFB6juW+9QuHa0bigLE4woG+Nwex7VaGKKjdHPkytSo6ryzmfANw3
xluotsMVlmNsB1IJESIOQY6gjvWc5x/qTZ1fD4dS38usiEGeg6iufcyS2VZZbyMQp0rO5Jk6qq/
wDajzQdhP1mKzi2ikZJm45pzG5d1fEczBHaN+nSO1Ye9KswYtqHXeR3k+ldI42yt6xZ4mIe5ZDv6
uvkYx2JWfrWK5rwoKF+qY9xO1c2N1Kn5OjuOvBRu80mhQrqJE3h7ox+Q3rScLxOlJYrbXeP5j2nN
Y5XIMilvcJOSTUZ4uRfHn4o0nFc9QKVRSx2B6e9UCuS8sZJxTaUF3B9aeGKMFoSeaU5bH7hptjRu
ZpBNBjATQUURoA0woqKFJmhQaf/2Q=="></img>
<p>Queen es una banda de rock británica formada en Londres en 1970.
Integrada originalmente por Freddie Mercury (voz y piano), Brian May
(guitarra y voz), Roger Taylor (batería y voz) y John Deacon (bajo).</p>
<a href="https://www.queenonline.com/es"></a>
<ul>
<li>Fredyy Mercuri</li>
<li>Brian May</li>
<li>Roger Taylor</li>
<li>John Deacon</li>
<li>Roger Taylor</li>
<li>John Deacon</li>
</ul>
<ol>
<li src=""> <img
src="https://www.revistapaketinformesonline.com/single-post/por-qu%C3%A9-la-
canci%C3%B3n-se-titula-bohemian-rhapsody-por-qu%C3%A9-dura-exactamente-5-
minutos-55-segundos "> </img> Freddy Rhapsody</li>
<li img="https://encrypted-tbn3.gstatic.com/images?
q=tbn:ANd9GcSLpC5GnsUujv54gunuh75x5IyZJ_yEMoEc0Y6KksCdDgl8Bh2jxZebX5P8IjWS">
Are the Champions</li>
q=tbn:ANd9GcRGgH1NeG2Abjld0FDOcr5n_Av-
usxLtaiN2MsHCgQUmvkGT6vYHgPRz7DG74dz">We Will Rock You</li>
<li img="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS7-
hFD7OpkkrRqHVPu2CyhC0JEqLbB5XBEuxKBGhWD7jyEJvv5VRX1T8Xml9uC">Another One
Bites the Dust</li>
q=tbn:ANd9GcTlrRQdWuEwsXx60Q_eVGEb7ZyME81JsI_eEvnq-
gb81Vpi5fyosSiZOLkBBeLg">Don't Stop Me Now</li>
</ol>
</body>
</html>
Estructura HTML
Ahora que sabemos cómo crear una página web, volvamos a lo básico y exploremos cómo estructurar
mejor nuestros archivos HTML. 📄
¡Aquí hay algunos elementos imprescindibles en un archivo .html !
Es <!DOCTYPE html>la declaración de tipo de documento que aparece en la parte superior de un

archivo .html y le dice al navegador que nuestro archivo está escrito en HTML5. Se utiliza con un
<html>elemento que contiene todo el código procesado en la página.
Observe cómo the <!DOCTYPE html>no tiene una etiqueta de cierre, mientras que <html>sí la tiene.
<!DOCTYPE html>
<html>
Code goes here
</html>
Nota: Todos los archivos HTML deben comenzar con una <!DOCTYPE html>declaración y el
<html>elemento.
Los omitimos en el primer capítulo, pero son partes esenciales de todo archivo HTML.
<!DOCTYPE html>
<html>
<head>
Some code goes here
</head>
<body>
A lot more goes here
</body>
</html>
En su interior <html>debería haber dos elementos:
<head>: contiene toda la información de su navegador que no está visible en la página.
<body>: Contiene todo el contenido que terminarás viendo en la página.
El <title>elemento entra <head>y asigna texto a la pestaña en nuestro navegador.
Así es como se ve la pestaña del navegador cuando visitas codedex.io :
Flecha roja que apunta al texto del título de la pestaña del navegador
El código para esto sería:
<!DOCTYPE html>
<html>
<head>
<title>Codédex | Start your coding adventure ⋆˙⟡</title>
</head>
<body>
Code goes here
</body>
</html>
Instrucciones
Practiquemos la estructura HTML creando un archivo llamado blueprint.html .
Asegúrese de agregar lo siguiente:

Una <!DOCTYPE html>declaración.
Un <html>elemento con:
Un <head>elemento con un título de página.
Un <body>elemento con un párrafo.
¡Ahora tienes el modelo que puedes usar para todos los archivos HTML futuros!
Padres e hijos
Los elementos de nuestro archivo HTML están organizados de forma muy
parecida a un árbol genealógico. La mayoría de los elementos individuales
pueden ser padres con uno o más elementos secundarios .
Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p>Well, <i>howdy</i> there!</p>
</body>
</html>
A continuación se muestran algunas relaciones:
 <head>y <body>son hijos de <html>.

 <title>es hijo de <head>.
 <i>es hijo <p>y nieto de <body>.
Ahora bien, ¿cuál es la relación entre <i>y <title>? Jaja es broma.
# Hermanos
Los elementos también pueden ser hermanos si comparten un elemento padre
directo. Tomemos esta lista desordenada, por ejemplo:
<body>
<ul>
<li>🍄 Mario</li>
<li>🐢 Luigi</li>
</ul>
</body>
Los dos <li>elementos son hermanos porque ambos son hijos del mismo padre,
el <ul>elemento
Comentarios
Los comentarios son útiles para tomar notas sobre la lógica y las intenciones detrás de diferentes partes de
nuestra página web. Nos ayudan a comprender qué está haciendo nuestro código, especialmente si se
escribió hace un tiempo.
Los comentarios no sólo deberían beneficiar a quien escribió el código, sino que también deberían ser
útiles para cualquiera que lo revise más adelante.
¿Cómo comentamos en HTML? Es sencillo:

<p>And I'm not a comment!</p>
Todo lo que está rodeado por los marcadores de comentarios se ignora y no se representa en el
navegador:


# En línea versus multilínea
Los comentarios son súper flexibles porque pueden abarcar varias líneas:

También se pueden utilizar dentro de un elemento:
<p>This text is visible. </p>
Nota: No se recomienda ser excesivo con los comentarios. Deben usarse con moderación y retirarse
cuando ya no sean necesarios.
1 1 . Artículo de Wiki
# Atributos
Los atributos son configuraciones adicionales que podemos usar para
personalizar un elemento.
Generalmente son pares de nombre/valor, como name="value", donde el

nombre y el valor están separados por un signo igual:
<element name="value">Content</element>
 Indica nameel atributo que estamos configurando para nuestro elemento.

 El "value"atributo de nuestro está entre "comillas dobles.
Por ejemplo, de forma predeterminada, el <ol>elemento de la lista ordenada usa

números para etiquetar <li>los elementos de su lista.
<ol>
<li>Power ⚡</li>
<li>Courage 🔥</li>
<li>Wisdom 🦉</li>
</ol>
Si queremos usar letras minúsculas en su lugar:
<ol type="a">
<li>Power ⚡</li>
</ol>
O, si quieres usar números romanos:

<ol type="i">
<li>Power ⚡</li>
</ol>
Para tipos de elementos de lista en mayúsculas para letras y números romanos,

utilice type="A"y type="I", respectivamente.
## Ej 1: Atributos en<img>
¿Adivina qué? Ya hemos estado usando algunos atributos diferentes en el curso.

¿Recuerdas cuando aprendimos sobre las imágenes?
<img src="https://www.codedex.io/images/tier1.png">
El <img>elemento utiliza el srcatributo para especificar la ruta del archivo de

una imagen.
¿Y recuerdas ese width="250"atributo del ejercicio anterior? ¡Sí! Ese era un

atributo que establece el ancho de la imagen.
Además de src, también podemos utilizar el altatributo para hacer nuestras

imágenes más accesibles.
<img alt="8-bit sprite of person using a laptop"
src="https://www.codedex.io/images/tier1.png">
Si nuestra imagen no puede aparecer por algún motivo, ¡ altse muestra el texto
en su lugar! Esto permite que los dispositivos de asistencia lean nuestro texto y
describan la imagen. 🦻🏻
## Ej 2: Atributo en<a>
También encontramos atributos cuando aprendimos a usar enlaces

con <a>etiquetas de anclaje:
<a href="https://www.codedex.io/">Codédex.io</a>
El hrefatributo es donde agregamos una URL que se puede visitar cuando se

hace clic en el texto del hipervínculo.
También podemos usar el targetatributo y configurarlo "_blank"para visitar la

URL en una pestaña separada en nuestro navegador:
<a href="https://www.codedex.io/" target="_blank">Codédex.io</a>
Instrucciones
Clases e identificaciones
Los dos atributos con los que nos encontraremos más son los atributos classy id. Cualquier elemento
puede utilizarlos. Si bien classy idse utilizan para etiquetar elementos, los dos tienen diferencias
importantes.
A un elemento se le pueden asignar múltiples classvalores en forma de lista separada por espacios:
<p class="first-value second-value third-value">Hello, World</p>
Cada elemento sólo puede tener un idvalor sin espacios. Cada valor de identificación debe ser único en
toda la página:
<p id="value">Hello, World</p>
Además, idse puede utilizar para vincular a otra parte de la misma página, como el encabezado. Esto se
puede hacer coincidir con el atributo <a>de un elemento ancla hrefmediante un #símbolo de hashtag,
seguido del identificador utilizado para id:
<a href="#medellin">Link to Medellín</a>
<h2 class="city" id="medellin">Medellín 🇨🇴</h2>
Por último, donde solo idse puede asignar uno a un único elemento, se classpuede asignar a muchos:
<h2 class="city" id="medellin">Medellín 🇨🇴</h2>
<h2 class="city" id="libson">Lisbon 🇵🇹</h2>
<h2 class="city" id="bali">Bali 🇮🇩</h2>
Los valores de los atributos classy idsiempre deben estar en minúsculas. Si su nombre está formado por
varias palabras, deben estar separadas por guiones -.
Nota: Una buena forma de recordar classvs ides... puede haber varios estudiantes en una clase , pero cada
estudiante debe tener una identificación única . 💡
# Elemento de división
Una de las formas más comunes de crear secciones para una página es con el <div>elemento (abreviatura
de "división").
El <div>elemento es algo así como un contenedor genérico sin ningún significado particular. Este elemento
y los atributos classy idpueden ir de la mano.
Por ejemplo, mire este sitio web:
<div class="page-section" id="about-me">
<h2>About Me</h2>
<p>Ness is an aspiring web developer!</p>
</div>
<div class="page-section" id="social-media">
<h2>Social:</h2>
<ul>
<li>GitHub</li>
<li>Twitter</li>
<li>LinkedIn</li>
</ul>
</div>
El <div>elemento se utiliza para agrupar contenido y ser etiquetado por los atributos classy id.
Instrucciones
Lorem Ipsum se utiliza comúnmente como contenido de marcador de posición para visualizar mejor cómo
debería verse el texto de una página web en la copia final.
Cree un nuevo archivo llamado lorem_ipsum.html .
Agregue un <h1>elemento de encabezado que diga "Sin título".
Agrega dos <a>elementos de anclaje.
Un enlace debe contener texto que diga "Título 1" y el otro "Título 2".
Asigne a cada enlace un hrefatributo con un valor de #heading-x.
Debajo, cree dos <div>elementos con un classvalor de "section".
Cada uno <div>debe contener un <h2>elemento de título y dos <p>elementos de párrafo.
El título debe tener un classde "heading"y un idde heading-x.
Cada párrafo debe contener el siguiente texto de marcador de posición:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat".
The style Attribute
So far, the appearance of our pages has been pretty skeletal. Just some plain text
with the occasional list, image, or link.
But what if there were ways to improve this within our .html files? As it turns
out, there are!
First, we can apply a style attribute to any HTML element to stylize certain
aspects of that element, such as what color the text should be:
<p>
Roses are <span style="color:red;">red</span>.<br />
Violets are <span style="color:blue;">blue</span>.
</p>
This attribute uses a special syntax where a style is made of a property

(i.e., color) and a value (red), separated by a : colon. Multiple styles can be
applied to a single element, but they must be separated by a ; semi-colon.
<p>
Roses are <span style="color:red; text-
decoration:underline;">red</span>.<br />
Violets are <span style="color:blue; text-
decoration:underline;">blue</span>.
</p>
The following is the rendered paragraph with our styles applied to

the <span> elements:
 The color property sets the color for the text of an element.
 The text-decoration adds text formatting (such as underline), similar
to what the <b>, <i>, <u>, and <s> elements do.
This is actually a language called CSS, which we will learn in the next course.
# The <style> Element
Using the style attribute for a few elements is one thing. But what if we want to
add styles to a bunch of different elements? Or what if we want to add the same
styles to each instance of a specific element?
Alternatively, the <style> element can be used in the <head> to style our
elements in the <body>.
<!DOCTYPE html>
<html>
<head>
<style>
... Styles for elements go here
</style>
</head>
<body>
... Elements go here
</body>
</html>
Elements can be selected inside the <style> element using curly braces ({ }):
<style>
element {
property: value;
}
</style>
Remember when we learned about the class and id attributes? Inside

the <style> element, you can use a period . (class) or hashtag # (id) to select
one or more specific elements that have a matching class or id, respectively:
<!DOCTYPE html>
<html>
<head>
<style>
span {
text-decoration: underline;
}
#red-word {
color: red;
}
#blue-word {
color: blue;
}
</style>
</head>
<body>
<p>
Roses are <span id="red-word">red</span>.<br />
Violets are <span id="blue-word">blue</span>.<br />
</p>
</body>
</html>
Aquí hay un resumen rápido:
Cada archivo HTML debe te ner una <!DOCTYPE html>declaración y un

<html>elemento.
El <head>elemento contiene información importante para nuestra página,
como el <title>.
Los comentarios son excelentes para documentar o excluir código no
deseado.
Atributos como class/ ido srcpueden mejorar la forma en que nuestros
elementos se organizan, presentan y funcionan en nuestra página.
Podemos agregar estilos a nuestra página usando el <style>elemento o el
styleatributo.
<!DOCTYPE html>
<html>
<head>
<title>My top 8 friend</title>
<style>
<style>
body {
width: 85%;
margin: auto;
}
h1 {
text-align: left;
}
img {
border: 3px solid blue;
}
#top-8-wrapper {
text-align: center;
}
.friend-card {
display: inline-block;
margin: 1px;
text-align: center;
}
.friend-name {
color: blue;
}
</style>
</style>
</head>
<body>
<div id="top-8-wrapper"></div>
<h1>My top 8 friend</h1>
<div class="top-8-row"></div>
<div class="friend-card">
<h3 class="friend-name">MY friend is tom</h3>
<img src="https://i.imgur.com/IZ3Vf9Nb.jpg" alt="Tom from
MySpace">
</div>
<h3 class="friend-card"></h3>
<h3 class="friend-name">My Friend Tom</h3>
MySpace">
</div>
MySpace">
</div>
MySpace">
</div>
</div>
<div class="top-8-row"></div>
</body>
</html>
</html>

Curso de HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso de HTML

Cargado por

Copyright:

Formatos disponibles

¿Qué es HTML?

Es el lenguaje de programación para el desarrollo de sitio o páginas web

HTML: Esqueleto del Sitio Web

CSS: Modifica la presentación o diseño

JavaScript : Hacerlo mas interactivo y le da lógica

Un elemento normalmente consta de una etiqueta de apertura, el contenido y una etiqueta de

Este es un elemento HTML donde:

<p>es la etiqueta de apertura.

Echemos un vistazo a un programa HTML básico que muestra un mensaje en el navegador:

<body><p>👋 I'm a new web developer!</p></body>

El <body>elemento define el "cuerpo" de un documento HTML y es donde se guardará cualquier

<body>La etiqueta de apertura comienza con el "cuerpo".

<p>👋 I'm a new web developer!</p>es algo de texto en un elemento de párrafo.

A continuación se explica cómo sangrar el bloque de código anterior:

<p>👋 I'm a new web developer!</p>

¡Observa cómo es mucho más fácil leer de esta manera!

Recomendamos dos spaces para sangrías

Hay seis niveles de títulos de sección, desde <h1>hasta <h6>:

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>

Aquí está el resultado:

Nota: Solo <h1>se debe utilizar un elemento en un archivo .html .

¡ Así que debemos usar la <br>etiqueta de ruptura aquí!

La <br>etiqueta de salto agrega un salto de línea:

Éstos son algunos de los más comunes:

<i>elemento para poner el texto en cursiva.

<u>elemento para subrayar el texto.

<s>elemento para tachar texto.

<b>This text is using bold formatting.</b><br>

<i>This text is using italics formatting.</i><br>

<u>This text is using underline formatting.</u><br>

<s>This text is using strikethrough formatting.</s><br>

formato de texto HTML

Aquí están las cuatro etiquetas en acción en un anuncio en el aula:

<p>This is the reminder that the <i>final exam</i> is <b>mandatory</b>.<br>

It will be held on <u>Monday, October 14th</u> at <s>7PM</s> 8PM EST.</p>

Esto se verá así:

Salida de ejemplo de formato de texto HTML

Aprenderemos sobre dos tipos de listas HTML:

<li>🖥 Code for 45 min.</li>

<li>💅 Take a bubble bath.</li>

ejemplo de lista desordenada

<li>💅 Take a bubble bath.</li>

ejemplo de lista ordenada

Entonces, ¿cómo agregamos un enlace a nuestra página web?

<a href="https://archive.org/web">Internet Archive</a>

<p>Here's a cute pic:</p>

"https://i.redd.it/5unn16axx1v81.jpg"es la ruta de la imagen.

Curso FINAL 1.1

mejor nuestros archivos HTML. 📄

¡Aquí hay algunos elementos imprescindibles en un archivo .html !

Es <!DOCTYPE html>la declaración de tipo de documento que aparece en la parte superior de un

Code goes here

Some code goes here

A lot more goes here

En su interior <html>debería haber dos elementos:

<head>: contiene toda la información de su navegador que no está visible en la página.

<body>: Contiene todo el contenido que terminarás viendo en la página.

El <title>elemento entra <head>y asigna texto a la pestaña en nuestro navegador.

Así es como se ve la pestaña del navegador cuando visitas codedex.io :