#1 Curso de programación web: HTML

hace 3 años · Actualizado hace 1 año

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Si has llegado hasta aquí es porque estás interesado en aprender desarrollo y diseño web. En esta entrada vamos a empezar el curso de programación web que incluye ambos aspectos. Concretamente, en esta primera parte del curso gratuito, vamos a ver todo lo necesario sobre HTML para ir empezando.

En esta parte del curso de HTML, voy a hacer primero una pequeña introducción hablando del tipo de lenguaje y su estructura básica. Posteriormente iré mencionando y explicando cada uno de los elementos o etiquetas usadas en HTML.

En la siguiente parte del curso, hablaré sobre CSS y veremos todo lo que podemos hacer con estos dos elementos.

¡Así que vamos a ello!

Índice
  1. Introducción a HTML
  2. Etiquetas en HTML
  3. Listas en HTML
  4. Imágenes en HTML
  5. Tablas en HTML
  6. Formularios en HTML
  7. Enlaces en HTML
  8. Pie de página en HTML
  9. Y para terminar...

Introducción a HTML

Aunque a mucha gente no le gusta llamarlo así, HTML es un lenguaje de programación basado en etiquetas. Es diferente a los lenguajes de programación tradicionales y se basa en añadir etiquetas describiendo lo que queremos que aparezca en nuestro visor de HTML.

En estos casos, no podemos utilizar sentencias comunes en otros lenguajes de programación como pueden ser las sentencias condicionales o los bucles. En HTML simplemente podemos describir los elementos.

Sin embargo, si necesitásemos añadir comportamientos más versátiles, tenemos opciones que veremos más en detalle en un futuro, como es CSS y javascript.

La estructura de un fichero HTML se basa, como ya he comentado en poner diferentes etiquetas que marcan el valor o significado de cada parte del fichero.

Todos los ficheros HTML deben comenzar con la etiqueta <!DOCKTYPE HTML> para especificar el tipo de documento.

Posteriormente iniciamos con la etiqueta <html> que ocupara todo el fichero. Una etiqueta puede tener inicio y fin o sólo tener una aparición según el tipo. Como <html> indica que estamos en una zona de fichero donde vamos a exponer código HTML, debemos marcar el inicio y el fin, de la siguiente forma:

  • Inicio: <html>
  • Fin: </html>

No parece complicado, ¿no? Esta estructura es la que seguirán casi todas las demás etiquetas.

Además de marcar que estamos en una zona HTML, es preciso diferenciar DOS partes dentro. Por una parte tenemos la cabecera (o head) donde se especifican aspectos generales, como el título de la página, icono, etc. Por otra parte, tenemos el cuerpo del HTML (o body) donde irá todo el contenido de la futura página web.

Un ejemplo muy básico de fichero HTML puede ser el siguiente:

Ejemplo de página HTML base

<!DOCKTYPE HTML>

<html lang=»es»>

    <head>

        <title> Título de la página web (pestaña del navegador) </title>

    </head>

    <body>

        Contenido web

    </body>

</html>

Es importante saber algunos conceptos muy básicos como poner comentarios. Los comentarios nos permiten documentar nuestro código de forma que no afecte al mismo. Para poner un comentario en HTML debemos utilizar la sintaxis <!--COMENTARIO-->.

Además, al inicio de nuestra página también nos interesa especificar el conjunto de caracteres que queremos usar. Si queremos utilizar acentos sin tener problemas, debemos especificar que queremos activar utf-8, para ello, pondremos al inicio de nuestro documento: <meta charset="utf-8"/>.

Etiquetas en HTML

Como ya hemos visto, las etiquetas son las que nos permiten marcar el tipo de objeto con el que vamos a trabajar. Gracias a ello, podemos estructurar nuestro código. En este apartado voy a comentaros las etiquetas más utilizadas de forma genérica; y en los siguientes iremos viendo algunas más complejas.

<h1>...</h1>Las etiquetas de título, h1 indica el título principal de la página y sólo debe haber uno. Podemos utilizar h1, h2, h3, h4, h5 y h6. Lo correcto es utilizarlos jerárquicamente (los h3 dentro de los h2; no puede haber un h6 debajo de un h3, debe ser debajo de un h5)
<p>...</p>Se utiliza para marcar los párrafos
<br>Salto de línea
<hr>Salto de línea y línea horizontal dibujada
<strong>...</strong>Pone la letra en negrita
<em>...</em>Letra en cursiva
<i>...</i>Letra en cursiva
<span id="x" class="y"> ... </span>Permite asignar clases e identificadores que nos sirven para, posteriormente, añadir estilos
<bookquote>...</bookquote>Formatea el texto en formato cita
<div>...</div>Crea contenedores o containers que nos sirven para separar nuestros ficheros por bloques de contenido

Listas en HTML

Existen dos tipos de listas: numeradas y no numeradas. Las listas numeradas se especifican de la siguiente manera:

Ejemplo de lista ordenada

<ol>

    <li> item </li>

    …

    <li> item </li>

</ol>

Por el contrario, las listas punteadas o no numeradas tienen la siguiente sintaxis:

Ejemplo de lista no ordenada

<ul>

    <li> item </li>

    …

    <li> item </li>

</ul>

Es posible generar sublistas dentro de las listas, incluyendo una lista nueva en un item.

Imágenes en HTML

Para añadir una imagen en nuestro fichero HTML tenemos la etiqueta <img>, que nos permite especificar una serie de parámetros:

Etiqueta img

<img alt=»Texto que queremos que aparezca cuando la imagen no carga»

title=»Pop-up al pasar el ratón por encima»

src=»Ruta de la imagen en nuestro PC»

width=»Anchura»

height=»Altura»

/>

Los parámetros witdh y height nos permiten especificar la altura y anchura de la imagen, pero es recomendable especificar solo uno de ellos, la imagen se adaptará a ese tamaño. Si especificamos ambos, podemos deformar la imagen.

Tablas en HTML

Para implementar tablas tenemos la etiqueta <table>. Dentro de esta etiqueta especificamos las filas mediante la etiqueta <tr> (<to> si queremos que nos lo muestre en negrita) y las columnas mediante la etiqueta <td>. Por ejemplo, si quisiéramos una tabla con la estructura:

ItemItem
ItemItem
ItemItem

El código HTML sería la siguiente:

Estructura de tabla
<table>
    <tr>
        <td>Item</td>
        <td>Item</td>
    </tr>
    <tr>
        <td> Item </td>
        <td> Item </td>
    </tr>
    <tr>
        <td> Item </td>
        <td> Item </td>
    </tr>
</table>

Además, hay varios parámetros que se pueden incluir dentro de la sentencia <table> que nos permiten darle vida a la tabla, como puede ser border="1". Esta sentencia hace que la tabla tenga borde.

Otro parámetro interesante es uno que podemos situar en las etiquetas <td>. Se utiliza para unificar celdas, y su sintaxis es la siguiente:

Estructura de tabla unificando celdas
<table border=»1″>
    <tr>
        <td>Item</td>
        <td>Item</td>
    </tr>
    <tr>
        <td colspan=»2″> Item </td>
    </tr>
    <tr>
        <td> Item </td>
        <td> Item </td>
    </tr>
</table>

Y crearíamos una tabla así:

ItemItem
Item
ItemItem

Formularios en HTML

Los formularios son aquellos elementos que nos permiten, por ejemplo, loguearnos en una página web. La idea es tener unos campos de entrada de datos y un botón para enviarlos al servidor vía POST o similares.

Para hacer un formulario, tenemos la etiqueta <form>, que tiene los siguientes parámetros:

Estructura de un formulario
<form action=»Dirección a la que enviaremos el formulario (back-end)»
method = «post»>
</form>

Posteriormente, debemos introducir dentro los elementos que vamos a recaudar y enviar al servidor. Para ello, pueden ser interesantes utilizar las etiquetas <label>, para poner un texto explicativo; <input type="text"> para escribir los datos que queramos recoger; y un <input type="submit"> que será un botón para enviar los datos.

Como un ejemplo va a ser mucho más claro, vamos a ello:

Estructura de elementos de un formulario

<form>

    <label> Nombre etiqueta </label>
    <input type=»text» placeholder=»Escribe aquí tu nombre»/>
    <input type=»submit» value=»Enviar formulario»/>
</form>

Esto, visualmente sería:

curso de html

Enlaces en HTML

Para explicar como poner enlaces en HTML, es necesario explicar el concepto de anchor text. Cuando pulsamos un link en una página web, normalmente vemos un texto, marcado en un color diferente y subrayado. Si pulsamos en ese texto nos lleva a un link. Ese texto es el anchor text. Dicho esto, un enlace tiene la siguiente sintaxis:

Estructura

<a href=»URL a la que vamos a dirigir al usuario»>

Anchor Text
</a>

Pie de página en HTML

Finalmente, lo último que pondremos en nuestra página web, será un pie de página. Para ello, utilizaremos la etiqueta <footer>.

En el pie de página suelen añadirse enlaces con empresas con las que se colabore, o información adicional. Se usa de la siguiente manera:

Estructura

<footer>

Información a añadir
</footer>

Y para terminar...

Si con esto no tienes suficiente, siempre puedes utilizar la herramienta de inspeccionar que tienen todos los navegadores. Esto te permitirá ver el código HTML de cualquier web.

Curioseando varias webs puedes aprender nuevas técnicas con las etiquetas que te he mencionado. Además, próximamente incluiré un nuevo post de este curso, dedicado a HTML avanzado y donde hablaré de elementos más avanzados, como menús en HTML y CSS, y muchas otras formas de diseñar nuestras webs.

Pero primero hay que explicar otros conceptos que estarán presentes en las partes venideras del curso.

Siguiente parte del curso

Espero que hayas disfrutado de esta primera parte del curso de programación web, si es así deja un comentario!! Si crees que me he olvidado de algo importante, también puedes ponérmelo en un comentario 🙂

Si estás interesado en la programación, puedes echarle un ojo a las entradas relacionadas con el tema.

Si te interesan los temas de ofimática básica, échale un ojo a lo que tenemos publicado sobre ello.

Si quieres ver el resto de entradas del curso de programación web, échale un ojo a esa sección.

Pionera del caos

Ingeniera Informática con Máster en Bioinformática, casi doctora y freelancer. Todo lo que te cuento en este blog son aprendizajes que yo misma he tenido ya sea durante mis estudios o en otros proyectos!

Otras Entradas Relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *



Para continuar es necesario que confirmes la política de privacidad de la web.

Subir