" Guía: Cursito HTML - Paso a paso "

HomePage | RegistroDeCambios | Configuraciones [¡Próximamente!]
Para hablar conmigo ve a mi página de Facebook.

¡Bienvenidos a este curso de HTML pequeñito! Es bastante fácil hacer un documento en HTML, es muy laborioso pero cuando practicas es bastante fácil de entender. Esta página está destinada para probarse en mi playground, si quieres, puedes usar uno externo o un clón de Visual Studio Code :)

Dependiendo del playground que tú utilizes te saldrá un cuadro de texto, que casi siempre es negro o blanco. Pero podrías trabajar en un clon de Visual Studio Code para ir aprendiendo.

Aquí verás sólo lo básico, como agregar links, listas, colores, tablas, códigos, agregar imágenes y formatos de texto sencillos!, tendrás que entrar a tu playground y siguiendo los pasos podrás ver cómo se generan.

No incluiré los nuevos etiqutados en CSS para HTML5 porque da flojera y aparte no entiendo por qué la W3C obliga a usar CSS.

Uso del playground

Para ver cómo se utiliza el playground haremos un recorrido por los botones que tiene:

Crear nueva página: Puedes crear una página nueva y vacía usando este botón, y que no se te olvide colocar el .html al final, esto lo puse para que quede bien, y no sabía cómo hacerle para que el programa te dé la extensión por ti :(
Borrar página: Si te has arrepentido de un archivo o simplemente quieres deshacer todos tus proyectos usa la herramienta de borrado de páginas
Guardar cambios: Debido a que no le sé tanto a JavaScript, tienes que visualizar el código y más aparte guardar los cambios si has hecho algo ya antes, la ventaja es que se guarda localmente sin iniciar sesión
Selector de páginas: El selector de páginas es para cambiar de página por si tienes muchas
Visualizar código: Te permite visualizar lo que has hecho en el código para ir viendo cómo funciona, si no usas este botón el playground y el curso no te va a servir de nada!

Quiero actualizarlo poco a poco y hacerlo todo bonito todo panzón pero como no es el objetivo pues no lo haré mejor. Si tienen alguna sugerencia pues ahí la pongo a lo mejor.

Añadir enlaces

Para dar un ejemplo claro, imagina que tienes una página y quieres hacer un enlace entre la página principal y una página de biología que recién has hecho. ¿Cómo lo hago? Es simple: escribe las etiquetas <a> anchor y su conclusión </a>, ahora la tienes así: <a></a>, luego en la etiqueta <a> a la derecha abres un espacio y escribes href="", y en los "" escribes la página a la que quieres enlazar, por ejemplo https://ejemplo.com, entonces queda como <a href="https://ejemplo.com"></a>, pero hay un problema, y es que al ejecutar no aparece nada, pues necesito darle el texto, para hacer esto, escribo desde donde está la línea roja: <a href="http://ejemplo.com">|</a> y añado el texto que quiera y listo!, este es mi resultado:
<a href="https://ejemplo.com">Enlace</a>

Para enlazar un artículo mío simplemente pongo su nombre en el href="" y con un / al principio, ejemplo: <a href="/sobre-mi-pagina">Enlace</a>

Si estás usando otro diferente que pueda habilitar interacciones de enlazar páginas creadas por ti en el playground (como codedamn) entonces simplemente introduce el nombre de tu página (con la extensión .html también).

Hay otras alternativas de usar el elemento anchor aparte de enlazar artículos por artículos, por ejemplo en vez de href="https://ejemplo.com" introduzco href="mailto:ejemplo123@gmail.com" estaría enlazando mi artículo con un correo electrónico. Y si pruebo mejor href="tel:+12345789" estaría enlazando mi artículo con un número de teléfono (sólo se ejecutará en móviles o en sistemas operativos que tienen una aplicación de llamadas nativa); al darle clic al enlace automáticamente le daré una llamada al número, así que cuidadito con eso.

Ahora un atributo complejo, target="":

Si escribes _self en sus comillas la página va a redirigir en la pestaña en la que estás
En cambio, si escribes _blank en sus comillas la página va a redirigir en una pestaña independiente
_parent y _top como no entiendo qué son por eso no las detallo

Ahora haré que una imagen tenga un link dentro, para esto necesito el elemento anchor enlazando algo (en mi caso, una página):

Añadimos la etiqueta anchor con todo listo: <a href="https://ejemplo.com"></a>
Presionamos la tecla [Enter] desde donde está la línea naranja: <a href="http://ejemplo.com">|</a>
Quedaría así:
<a href="https://ejemplo.com"> ¦ </a>
E introduces la imagen:
<a href="https://ejemplo.com"> ¦ <img src="https://tusitio.com/imagen.jpg"> </a>

Ahora te preguntarás ¿Qué es todo eso que acabo de escribir? pues lo explicaré paso a paso, palabra por palabra, precepto por precepto:

<a>: Primeramente, href significa hyperreference y sirve para decirle al navegador qué tipo de vínculo tendrá

Ahora que sabemos que es esto, debemos de clasificar:

Enlaces correctos:

<a href="https://misitio.com/sobre_mi">Sobre mí</a>
<a href="https://misitio.com/sobre-mi">Sobre mí</a>
<a href="/sobre-mi">Sobre mí</a>
<a href="/sobre-mi.html">Sobre mí</a> (Si tu host no oculta el .html)

Enlaces erróneos:

<a href="https://misitio.com/sobre mi">Sobre mí</a> (Falta el _ o - dependiendo del enlace)
<a href="sobre-mi">Sobre mí</a> (Puede no funcionar sin el /, asi que por si las dudas ponlo)

Crear una nueva página

Esto depende del playground pero como estamos usando el mio simplemente entra en Crear nueva página > Ingresa el nombre (que no se te olvide el .html).
Ahora ya lo tienes, para guardarlo dale a Guardar cambios.

Listas y formatos de texto

Con <br>
puedes
hacer
tal que esto.

Poniendo un <br>
En medio
De cada frase.

Asi comienza una lista sin puntos.

Se pueden hacer subpuntos.

Se pueden hacer subsubpuntos.

: Este es el límite (me imagino).

Para esto se usa <dl> (todas con su conclusión), que le sigue de un <dt> sin contenido, después el contenido (<dd>), para ser subpuntos repites lo mismo, pero comenzando desde el <dd>

Esta es una linea con puntos

Subpuntos de la línea

Este sí ya es el límite

Para esto se usa <ul> (todas con su conclusión), que su contenido y los puntos los tiene <li>, para ser subpuntos repites lo mismo, pero comenzando desde el <li>

Lo mismo pero ordenado

Lo mismo

Exactamente lo mismo

Cambia el <ul> reemplazando la "u" por la "o" y ya lo tienes

¡Texto en itálico! (con <em>texto</em>)
¡Texto en itálico otra vez! (con <i>texto</i>)

Texto en negrita (con <strong>texto</strong>)
Texto también en negrita (con <b>texto</b>)

usa <code> (con su conclusión) para describir códigos (como lo estoy haciendo yo)

usa <tt> (con su conclusión) para estilizar textos en monoespaciado pero que sin embargo no son códigos (aunque sean lo mismo, úsalos así para no confundirte)

Con <hr> puedes separar contenidos para no confundir el uno del otro:

O dos para más estilo:

Puedes hacer tablas tipo Web 1.0 para hacer tu página más aesthetic y vintage:
Pasito a pasito:

Creamos la etiqueta <table> con su conclusión (</table>)
Y en la etiqueta a la derecha damos un espacio y escribimos border="1", para que la línea sea un poco más gruesa
Dentro del <table border="1"> introducimos la etiqueta <tbody>, que es el cuerpo de la tabla sin el borde
Dentro del <tbody> introducimos un <tr> que traducido es table row, que es la línea que contiene los datos
Dentro del <tr> introducimos un <td> que traducido es table data, que es la parte final de una celda y por ende el final de una tabla de una sola línea, para acompletarla, en el <tr> introducimos otro <td>. Y el resultado es:

Dato Principal 1 Dato Resultado 1

Para hacer otra línea, hacemos otro table row (<tr>) y dentro sus dos table datas (<td>) para acompletar la fila:

Dato Principal 1	Dato Resultado 1
Dato Principal 2	Dato Resultado 2

Y ya tenemos una tabla estilo Web 1.0 del siglo xx!

Pero queremos hacerla un poquito más elegante, como una verdadera tabla hecha en los años '90, para esto, necesitamos hacer esto:

Creamos todo el proceso de etiquetado <table>, <tbody>, <td>, <tr>
Tenemos solo una fila con el dato principal 1 y dato resultado 1, vamos a lo siguiente:
Hacemos de nuevo un table row (<tr>) e introducimos en este un table data (<td>), en este primer table data a la derecha damos un espacio y escribimos rowspan="2" para que este table data tenga dos datos resultados, este se debe de llamar Dato Principal 2 para que no quede en blanco
En el segundo table data introducimos el primer dato resultado 2
Luego, hacemos otro table row, e introducimos el table data dentro de este, en el table data introducimos el segundo dato resultado 2

Y si prestaste atención te debió haber quedado más o menos así:

Dato Principal 1	Dato Resultado 1
Dato Principal 2	Primer Dato Resultado 2
Dato Principal 2	Segundo Dato Resultado 2

Y ahora sí tenemos una tabla Web 1.0 creada como en los '90!

Meta charset

Si estás en HTML5 (que deberías) probablemente conocerás una pequeña etiqueta, que es <meta charset="UTF-8">, que lo que hace es que los caracteres especiales se puedan observar bien y sin errores como cuadrados verticales con una X.

Formatos de texto para operaciones matemáticas y químicas

Con <sup>texto</sup> puedes convertir el texto en ^superíndice (para potencias en matemáticas) y con <sub>texto</sub> puedes convertir el texto en _subíndice (para ilustrar la cantidad de átomos de un elemento en química), con <font size="5">texto</font> puedes hacer el texto grande controlando el atributo size y con <font color="red">texto</font> puedes hacer el texto rojo, y en más colores controlando el atributo color escribiendo los colores en inglés, o incluso ambas, creando la etiqueta <font>texto</font> e introduciendo los dos atributos size y color

Ejemplos:

f(x) = a₀ + a₁x₁ + a₂x₂² + a³x³+ . . .

f(x) = a₀ + a₁x₁ + a₂x₂² + a³x³+ . . .

Meta http-equiv="refresh"

Si quieres que una página redirija a otra necesitarás usar el código <meta http-equiv="refresh" content="0;URL=https://minuevositio.com/">.

Todos los atributos http-equiv en la etiqueta <meta> indican algo, no al compilador, si no al navegador, vamos a ver qué es este código paso a paso:

http-equiv="refresh" indica al navegador que redirija la página.
content="0; indica al navegador cuántos segundos se debe esperar antes de actualizar la página. En este ejemplo, la redirección es instántanea, pero para no hacerlo tan instantáneo, sustituye el "0" por un número mayor, por ejemplo, "2".
URL=https://www.tuurl.com/nuevapágina" indica al navegador a qué URL debe enviar al usuario.

Practica en el playground y nos vemos!!

Comenta esta página en mi Guestbook.
Ver los cambios recientes de esta página [¡Próximamente!]
Artículo creado el 9 de abril de 2024, 11:32 p. m.