Curso intensivo para principiantes en HTML5

Introducción

Este curso intensivo es para cualquier persona que quiera aprender los conceptos básicos del desarrollo web sin ningún requisito previo. Si nunca ha escrito una línea de código, este curso es para usted.

HTML sin CSS es muy feo, pero no nos estamos enfocando en el estilo aquí, nos estamos enfocando en la sintaxis HTML.

Tabla de contenido:

Mostrar u ocultar

¿Qué es el HTML?

Primero respondamos una pregunta que todos tienen al principio; ¿Qué es HTML?

HTML significa Hyper Text Markup Language. NO es un lenguaje de programación, más bien es un lenguaje de marcado para crear páginas web. Los lenguajes de programación tienen lógica, bucles, sentencias condicionales. HTML no tiene nada de eso. Simplemente muestra y formatea elementos en la página. Es estrictamente presentacional, no incluye lógica.

Dicho esto, eso no hace que ningún lenguaje de programación sea más importante que HTML. De hecho, si te estás metiendo en el desarrollo web. HTML es el bloque de construcción más importante de la web. Cada sitio web utiliza HTML. Es un requisito previo para cualquier otra pila de tecnología en el desarrollo web. Leer mas…

Prerrequisitos

Solo necesitamos algunas cosas para comenzar:

Un navegador web (Chrome , Edge, Firefox).
Un editor de texto (Visual Studio Code, Sublime Text, Atom).

Se prefieren las opciones resaltadas y son las que usaremos en este curso.

Crear un archivo HTML

Para crear un archivo HTML, simplemente podemos crear un nuevo archivo con extensión .html . Cree una nueva carpeta en su escritorio, llámela Mi sitio web. Abra tu editor de HTML preferido y abra esa carpeta dentro de él. Luego cree un nuevo archivo llamado index.html. Ahora puede escribir código dentro de él y también puede abrirlo en su navegador.

Comprender los términos HTML comunes

Al comenzar a usar HTML, lo más probable es que encuentre términos nuevos, y a menudo extraños. Con el tiempo, se familiarizará cada vez más con todos ellos, pero los tres términos HTML más comunes con los que debe comenzar son elementos, etiquetas y atributos .

Los elementos definen la estructura y el contenido dentro de una página. Los elementos se identifican mediante el uso de corchetes angulares menores que y mayores que rodean el nombre del elemento.

<h1> es un ejemplo de un elemento de encabezado.

Dos de los mismos elementos en un par (abrir y cerrar uno) forman una etiqueta .
Cualquier cosa entre las etiquetas de apertura y cierre es el contenido de ese elemento. Veremos con más detalle cómo cerramos las etiquetas en la sección Sintaxis HTML.

<h1>Encabezado de contenido</h1> Es un ejemplo de una etiqueta de encabezado completo.

los atributos son propiedades utilizadas para proporcionar información adicional sobre un elemento. Los atributos más comunes incluyen el atributo id, que identifica un elemento, el atributo de clase, que clasifica un elemento; el atributo src, que especifica una fuente del contenido; y el atributo href, que proporciona una referencia de hipervínculo a un recurso vinculado.

Los atributos se definen dentro de la etiqueta de apertura, después del nombre de un elemento. En general, los atributos incluyen un nombre y un valor.

<h1 id="main-heading">Encabezado de contenido</h1> Es un ejemplo de una etiqueta de encabezado con un atributo id.

Sintaxis HTML

El tema más importante de este curso es la sintaxis, la forma en que escribimos HTML.

Como aprendimos antes, hay una etiqueta de apertura, un contenido y luego la etiqueta de cierre.

Hay una excepción a esta regla: elementos de cierre automático. Algunos de los elementos se cierran automáticamente, lo que significa que no necesitan una etiqueta de cierre separada.

Algunos ejemplos de etiquetas de cierre automático son: <br>, <img>, <meta>, <hr>.

Estructura de página HTML

Después de aprender los conceptos básicos de la sintaxis, ahora podemos aprender cómo estructurarlo en un solo documento HTML válido.

<!doctype html>
<html>
<head>
<title>Tutoriales En Linea</title>
</head>
<body>
<h1>Este es un encabezado.</h1>
<p>Este es un parrafo.</p>
</body>
</html>

La primera línea es una declaración de doctype. Es una instrucción para el navegador web sobre en qué versión de HTML está escrita la página. La única opción viable hoy en día es HTML5, que es la versión más nueva.

El doctype para HTML5 es <!doctype html>.

Después de eso, tenemos una etiqueta <html>. Se envuelve alrededor de todo el documento.

Dentro de la <html> etiqueta podemos encontrar las etiquetas <head> y <body>.

El elemento <head> es un contenedor de metadatos y se coloca entre la etiqueta <html>y la etiqueta <body>. Los metadatos HTML son datos sobre el documento HTML. Los metadatos no se muestran, pero definen el título del documento, el conjunto de caracteres, los estilos, las secuencias de comandos y otra información meta.

Por ejemplo, la etiqueta <title> cambiará el nombre de su sitio web en una pestaña de Chrome.

Después de la etiqueta <head> de cierre , hay una etiqueta <body>. TODO lo demás que vamos a mencionar en el resto de este curso irá dentro del <body>. Representa todo lo que puedes ver en un sitio web.

Elementos HTML

Encabezados

<h1> <h2> <h3> <h4> <h5> <h6> — Los encabezados son elementos de nivel de bloque, y vienen en seis clasificaciones diferentes.

Los encabezados ayudan a dividir rápidamente el contenido y a establecer una jerarquía, y son identificadores clave para los usuarios que leen una página. También ayudan a los motores de búsqueda a indexar y determinar el contenido de una página.

Los encabezados deben usarse en un orden que sea relevante para el contenido de una página. El encabezado principal de una página o sección debe ser un encabezado <h1>, y los encabezados posteriores deben usar los números del 2 al 6.

Cada nivel de encabezado se debe usar donde se valora semánticamente, y no se debe usar para hacer que el texto sea en negrita o grande; hay otras formas mejores de hacerlo.

Aquí hay un ejemplo de HTML para todos los diferentes niveles de encabezado y la visualización resultante en una página web.

Encabezado Nivel 1

Encabezado Nivel 2

Encabezado Nivel 3

Encabezado Nivel 4

<h1>Encabezado Nivel 1</h1>
<h2>Encabezado Nivel 2</h2>
<h3>Encabezado Nivel 3</h3>
<h4>Encabezado Nivel 4</h4>

Los párrafos <p>

Los títulos suelen ir seguidos de párrafos de apoyo. Los párrafos se definen usando la etiqueta <p>.

Los párrafos pueden aparecer uno tras otro, agregando información a una página como se desee. Aquí hay un ejemplo de cómo configurar párrafos.

Steve Jobs fue cofundador y director ejecutivo de Apple desde hace mucho tiempo.

El 12 de junio de 2005, Steve dio el discurso de graduación en la Universidad de Stanford. .

<p>Steve Jobs fue cofundador y director ejecutivo de Apple desde hace mucho tiempo</p>
<p>El 12 de junio de 2005, Steve dio el discurso de graduación en la Universidad de Stanford.</p>

Dentro de los párrafos podemos etiquetas como: <strong> o <em> para envolver las palabras que queremos hacer más audaces o las que queremos enfatizar. Aquí hay un ejemplo:

Steve Jobs fue cofundador y director ejecutivo de Apple.

El 12 de junio de 2005 , Steve dio el discurso de graduación en la Universidad de Stanford.

<p><strong> Steve Jobs</strong> fue cofundador y director ejecutivo de Apple desde hace mucho tiempo.</p>
<p><em> El 12 de junio de 2005</em>, Steve dio el discurso de graduación en la Universidad de Stanford.</p>

Etiqueta de anclaje <a>

El elemento HTML <a> (o elemento de anclaje), junto con su atributo href , crea un hipervínculo a otras páginas web, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico o cualquier otra URL.

Tutoriales En Linea

<a href="https://tutorialesenlinea.es/ ">Tutoriales En Linea </a>

Listas <ul> <ol> <li>

HTML ofrece dos formas de especificar listas de información. Todas las listas deben contener uno o más elementos de la lista. Hay dos tipos de listas:

<ul> — Una lista desordenada. Esto enumerará los elementos usando viñetas simples.
<ol> — Una lista ordenada. Esto agregará números a los elementos de su lista.

Lista desordenada en HTML

Una lista sin orden comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la lista se marcarán con viñetas (pequeños círculos negros) de forma predeterminada:

Artículo de la lista 1
Artículo de la lista 2
Artículo de la lista 3
Artículo de la lista 4

<ul>
    <li>Artículo de la lista 1</li>
    <li>Artículo de la lista 2</li>
    <li>Artículo de la lista 3</li>
    <li>Artículo de la lista 4</li>
</ul>

Lista ordenada en HTML

Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la lista se marcarán con números de forma predeterminada:

Artículo de la lista 1
Artículo de la lista 2
Artículo de la lista 3
Artículo de la lista 4

<ol>
    <li>Artículo de la lista 1</li>
    <li>Artículo de la lista 2</li>
    <li>Artículo de la lista 3</li>
    <li>Artículo de la lista 4</li>
</ol>

Tables <table> <tr> <th> <td>

Una tabla HTML se define con la etiqueta <table>.

Cada fila de la tabla se define con la etiqueta <tr>. Un encabezado de tabla se define con la etiqueta <th>. Por defecto, los encabezados de las tablas están en negrita y centrados. Una tabla de datos/celda se define con la etiqueta <td>.

Nombre	Email	Descripción
Alexander	[email protected]	Autor
Alexander	[email protected]	Instagram

<table>
<thead>
<tr>
<th>Nombre</th>
<th>Email</th>
<th>Descripcion</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alexander</td>
<td>[email protected]</td>
<td>Autor</td>
</tr>
<tr>
<td>Alexander</td>
<td>[email protected]</td>
<td>Instagram</td>
</tr>
</tbody>
</table>

Tablas En DIVs…

Formulario

El elemento HTML <form> define un formulario que se utiliza para recopilar la entrada del usuario.

Se requieren formularios HTML cuando desea recopilar algunos datos del visitante del sitio. Por ejemplo, durante el registro del usuario, le gustaría recopilar información como nombre, dirección de correo electrónico, tarjeta de crédito, etc.

Un formulario tomará información del visitante del sitio y luego lo publicará en una aplicación de fondo como CGI, ASP Script o script PHP, etc. La aplicación de back-end realizará el procesamiento requerido en los datos pasados en función de la lógica empresarial definida dentro la aplicación.

Hay varios elementos de formulario disponibles como campos de texto, campos de área de texto, menús desplegables, botones de opción, casillas de verificación, etc.

<form method="POST">
<div>
<label>Primer nombre</label>
<input type="text" name="firstName" placeholder="Primer nombre">
</div>
<br>
<div>
<label>Apellido</label>
<input type="text" name="lastName">
</div>
<br>
<div>
<label>Email</label>
<input type="email" name="email">
</div>
<br>
<div>
<label>Mensaje</label>
<textarea name="message"></textarea>
</div>
<br>
<div>
<label>Genero</label>
<select name="gender">
<option value="male">Masculino</option>
<option value="female">Femenino</option>
<option value="other">Otros</option>
</select>
</div>
<br>
<div>
<label>Edad:</label>
<input type="number" name="age" value="30">
</div>
<br>
<div>
<label>Cumpleaños:</label>
<input type="date" name="birthday">
</div>
<br>
<input type="submit" name="submit" value="Enviar">
</form>

Mas sobre formularios…

Botones

El elemento HTML <button> representa un botón en el que se puede hacer clic, que se puede usar en formularios o en cualquier parte de un documento que necesite una funcionalidad de botón simple y estándar.

<button>Haz clic en mi</button>

Imágenes

Al principio, la Web era solo texto, y realmente era bastante aburrida. Afortunadamente, no pasó mucho tiempo antes de que se agregara la capacidad de incrustar imágenes (y otros tipos de contenido más interesantes) dentro de las páginas web. Hay otros tipos de multimedia a considerar, pero es lógico comenzar con el elemento <img> humilde, usado para incrustar una imagen simple en una página web. En este curso, veremos cómo usarlo en profundidad, incluidos los conceptos básicos, anotarlo con subtítulos <figure> y detallar cómo se relaciona con las imágenes de fondo CSS.

Para poner una imagen simple en una página web, utilizamos el elemento <img>. Este es un elemento vacío (lo que significa que no tiene contenido de texto o etiqueta de cierre) que requiere un mínimo de un atributo para ser útil src (a veces dicho como su título completo, fuente ). El atributo src contiene una ruta que apunta a la imagen que desea incrustar en la página, que puede ser una URL relativa o absoluta, de la misma manera que los valores de los atributos del elemento <a> en href.

Entonces, por ejemplo, si se llama a su imagen logo.jpg y se encuentra en el mismo directorio que su página HTML, puede incrustar la imagen de esta manera:

<img src="logo.jpg">

Si la imagen estaba en un subdirectorio llamado images, que estaba dentro del mismo directorio que la página HTML, entonces la incrustaría así:

<img src="images/logo.jpg">

Y así.

Puede incrustar la imagen usando su URL absoluta, por ejemplo:

<img src="/images/logo.jpg">

La etiqueta <img> tiene dos atributos obligatorios: src y alt.

Consejo: para vincular una imagen a otro documento, simplemente anide la etiqueta <img> dentro de las etiqueta <a>.

Estructura de construcción

Durante mucho tiempo, la estructura de una página web se creó mediante divisiones. El problema era que las divisiones no proporcionan un valor semántico, y era bastante difícil determinar la intención de estas divisiones. Afortunadamente, HTML5 introdujo nuevos elementos basados estructuralmente:

<header>: Se utiliza para contener el encabezado de un sitio.
<footer>: Contiene el pie de página de un sitio.
<nav>: Contiene la funcionalidad de navegación de la página.
<article>: Contiene un contenido independiente que tendría sentido si se distribuye como un elemento RSS, por ejemplo, una noticia.
<section>: Se utiliza para agrupar diferentes artículos en diferentes propósitos o temas, o para definir las diferentes secciones de un solo artículo.
<aside>: Define un bloque de contenido que está relacionado con el contenido principal que lo rodea, pero que no es central para el flujo del mismo.

Todos estos elementos nuevos tienen por objeto dar sentido a la organización de nuestras páginas y mejorar nuestra semántica estructural. Todos son elementos a nivel de bloque y no tienen ninguna posición o estilo implícito. Además, todos estos elementos se pueden usar varias veces por página, siempre que cada uso refleje el significado semántico adecuado.

Con elementos estructurales y elementos basados en texto bajo nuestros cinturones, nuestro conocimiento de HTML realmente está comenzando a unirse. Ahora es un buen momento para volver a visitar nuestro sitio web de la Conferencia de estilos y ver si podemos proporcionarle una estructura un poco mejor.

¡Eso es!

¡Lo hiciste hasta el final! Eso es todo lo que hay en HTML5. Si desea un próximo artículo/video de la misma manera que este, sobre CSS o jаvascript.

No dude en hacer cualquier pregunta y dejar comentarios o críticas.

¡Lo más útil sería el soporte en YouTube desde que recientemente creé un canal! Haga clic aquí, ¡hay muchas cosas interesantes muy pronto! :)

También puede consultar los tutoriales sobre: Comandos Git.