En el siguiente art铆culo trataremos de ver los conceptos b谩sicos de forma general que rodean HTML. Reg铆strate para realizar los cuestionarios y poner a prueba tus conocimientos. Los cursos est谩n en desarrollo y con el tiempo iremos incorporado contenido nuevo y mejorando la web, espero que el contenido les sea de ayuda.
HTML (HyperText Markup Language) es el lenguaje de marcado utilizado para crear y estructurar el contenido de las p谩ginas web. Permite definir elementos como texto, im谩genes, enlaces, tablas y formularios para su visualizaci贸n en navegadores.
HTML no es un lenguaje de programaci贸n, sino un lenguaje de marcado que utiliza etiquetas para definir la estructura del contenido.
馃敼1989: Tim Berners-Lee cre贸 el HTML como parte del proyecto World Wide Web.
馃敼1991: Se public贸 la primera versi贸n de HTML con 18 etiquetas b谩sicas.
馃敼1995: HTML 2.0 formaliz贸 el lenguaje, estableciendo un est谩ndar.
馃敼1997-1999: HTML 3.2 y 4.01 introdujeron nuevas funcionalidades como tablas y hojas de estilo (CSS).
馃敼2014: HTML5 se convirti贸 en la versi贸n oficial, a帽adiendo soporte para multimedia, almacenamiento local y nuevas etiquetas sem谩nticas como <article> y聽 <section>.
Hoy en d铆a, HTML5 sigue siendo el est谩ndar utilizado para el desarrollo web.
Un documento HTML tiene una estructura jer谩rquica compuesta por etiquetas. La estructura b谩sica incluye:
<!DOCTYPE html>
<html>
<head>
<title>T铆tulo de la p谩gina</title>
</head>
<body>
<h1>Encabezado principal</h1>
<p>Este es un p谩rrafo.</p>
</body>
</html>
馃敻<!DOCTYPE html>: Declara que el documento utiliza HTML5.
馃敻<html>: Etiqueta ra铆z del documento.
馃敻<head>: Contiene metadatos como el t铆tulo de la p谩gina y enlaces a hojas de estilo o scripts.
馃敻<body>: Contiene el contenido visible de la p谩gina.
聽
Las etiquetas en HTML (HyperText Markup Language) son los elementos b谩sicos que se utilizan para estructurar y definir el contenido de una p谩gina web. Cada etiqueta tiene un prop贸sito espec铆fico, como definir encabezados, p谩rrafos, enlaces, im谩genes, listas, formularios y mucho m谩s.
Sintaxis b谩sica: Una etiqueta HTML se escribe dentro de 谩ngulos (< >) y normalmente viene en pares:
馃敼 Etiqueta de apertura: Marca el inicio de un elemento.
Ejemplo: <p>
馃敼 Etiqueta de cierre: Marca el final del elemento.
Ejemplo: </p>
<p>Este es un p谩rrafo.</p>
Ejemplo: <img> (para im谩genes) o <br> (para saltos de l铆nea).
Estas etiquetas se llaman etiquetas vac铆as y no necesitan una etiqueta de cierre.
<img decoding="async" src="imagen.jpg" alt="Descripci贸n de la imagen">
馃敼<html>: Define el documento como HTML.
馃敼<head>: Contiene informaci贸n sobre la p谩gina (metadatos, enlaces a CSS, scripts, etc.).
馃敼<body>: Contiene el contenido visible de la p谩gina.
<html>
<head>
<title>Mi p谩gina web</title>
</head>
<body>
<h1>Bienvenidos</h1>
</body>
</html>
馃敼<h1> a <h6>: Define encabezados (de mayor a menor importancia).
馃敼<p>: Define un p谩rrafo.
馃敼<strong> y <em>: Para texto en negrita o cursiva.
馃敼<ul>: Lista desordenada (con vi帽etas).
馃敼<ol>: Lista ordenada (con n煤meros).
馃敼<li>: Elemento de lista.
馃敼<a>: Define un hiperv铆nculo.
馃敼<img>: Muestra una imagen.
<a href="https://www.google.com" target="_blank" rel="noopener">Visita Google</a>
<img decoding="async" src="imagen.jpg" alt="Descripci贸n de la imagen">
馃敼<table>, <tr>, <td>: Para crear tablas.
馃敼<form>, <input>, <button>: Para formularios.
馃敼<button>: Para crear botones.
En HTML, un elemento es una combinaci贸n de etiquetas, contenido y atributos que juntos definen una parte espec铆fica de una p谩gina web. Los elementos son los bloques b谩sicos que estructuran y describen el contenido de un documento HTML
Un elemento HTML generalmente consta de tres componentes:
馃敼 Etiqueta de apertura: Indica el inicio del elemento y puede incluir atributos.
Ejemplo: <p> (para un p谩rrafo).
馃敼 Contenido: Es el texto, las im谩genes o los elementos anidados que se incluyen dentro del elemento. Por ejemplo 芦Hola mundo!禄.
馃敼 Etiqueta de cierre: Indica el final del elemento. Por ejemplo: </p>.
<p>Hola mundo</p>
En este caso:
馃敼<p>: es la etiqueta de apertura.
馃敼"Hola mundo": es el contenido.
馃敼</p>: es la etiqueta de cierre.
Los atributos en HTML son propiedades o caracter铆sticas adicionales que se aplican a las etiquetas para proporcionar informaci贸n adicional sobre un elemento o para modificar su comportamiento y apariencia.
Los atributos siempre se incluyen dentro de la etiqueta de apertura de un elemento y est谩n formados por un nombre y un valor.
馃敻Se colocan en la etiqueta de apertura:
<etiqueta atributo="valor">Contenido</etiqueta>
<a href="https://www.google.com" target="_blank" rel="noopener">Enlace a Google</a>
馃敻Constan de un nombre y un valor:
href)."https://www.google.com").馃敻Son opcionales: No todos los elementos necesitan atributos.
馃敻 El valor se escribe entre comillas dobles o simples:
<img decoding="async" src="imagen.jpg" alt='Descripci贸n de la imagen'>
<a href="https://example.com" target="_blank" rel="noopener">Enlace a Example</a>
En este caso, href es el atributo que define la URL del enlace.
馃敻Algunos elementos son 芦vac铆os禄 y no requieren cierre, como <img>.
<img decoding="async" src="imagen.jpg" alt='Descripci贸n de la imagen'>
Tipos de atributos en HTML
Pueden aplicarse a casi cualquier elemento HTML.
Ejemplos:
馃敼id: Identifica de forma 煤nica un elemento.
馃敼class: Define una o m谩s clases CSS asociadas al elemento.
馃敼style: Aplica estilos CSS en l铆nea al elemento.
馃敼title: Proporciona informaci贸n adicional cuando se pasa el cursor sobre el elemento.
<div id="mi-div" class="container" style="color: red;" title="Este es un div">
Contenido
</div>
Tipos de atributos en HTML
Pueden aplicarse a casi cualquier elemento HTML.
Ejemplos:
馃敼id: Identifica de forma 煤nica un elemento.
馃敼class: Define una o m谩s clases CSS asociadas al elemento.
馃敼style: Aplica estilos CSS en l铆nea al elemento.
馃敼title: Proporciona informaci贸n adicional cuando se pasa el cursor sobre el elemento.
Est谩n dise帽ados para trabajar con elementos particulares.
Ejemplos:
En <img>:
馃敼src: Especifica la ubicaci贸n de la imagen.
馃敼alt: Proporciona una descripci贸n alternativa de la imagen.
En <a>:
馃敼href: Especifica la URL de destino del enlace.
馃敼target: Especifica c贸mo abrir el enlace (_blank, _self, etc.).
<img decoding="async" src="imagen.jpg" alt="Una imagen bonita">
<a href="https://ejemplo.com" target="_blank" rel="noopener">Visita Ejemplo</a>
No requieren un valor expl铆cito; su presencia indica que est谩n 芦activos禄.
Ejemplos:
馃敼checked: Marca un checkbox o radio button.
馃敼disabled: Desactiva un elemento interactivo.
馃敼readonly: Hace que un campo de formulario sea de solo lectura.
<input type="checkbox" checked>
<button disabled>Bot贸n desactivado</button>
<!DOCTYPE html>
<html>
<head>
<title>Atributos en HTML</title>
</head>
<body>
<!-- Atributos espec铆ficos de enlace -->
<a href="https://www.google.com" target="_blank" title="Ir a Google" rel="noopener">Visitar Google</a>
<!-- Atributos espec铆ficos de imagen -->
<img loading="lazy" decoding="async" src="imagen.jpg" alt="Descripci贸n de la imagen" width="300" height="200">
<!-- Atributos globales -->
<div id="mi-div" class="contenedor" style="background-color: lightblue;" title="Un div especial">
Contenido del div
</div>
<!-- Atributos booleanos -->
<input type="text" value="Solo lectura" readonly>
<input type="checkbox" checked>
</body>
</html>
| Atributo | Descripci贸n |
|---|---|
id | Identifica de forma 煤nica un elemento. |
class | Asocia el elemento con una o m谩s clases CSS. |
style | Aplica estilos CSS en l铆nea. |
href | Especifica la URL de destino en enlaces (<a>). |
src | Define la ubicaci贸n de un recurso como una imagen (<img>). |
alt | Proporciona un texto alternativo para im谩genes. |
title | Proporciona informaci贸n adicional sobre el elemento. |
disabled | Desactiva un elemento interactivo. |
readonly | Hace que un campo de entrada sea de solo lectura. |
checked | Marca un checkbox o radio button. |
1. Abre un editor de texto como Visual Studio Code, Sublime Text o Notepad++.
2. Crea un archivo con extensi贸n .html (por ejemplo, index.html).
3. Copia el c贸digo anterior en el archivo.
4. Guarda el archivo y 谩brelo en un navegador web.
Ahora has creado tu primera p谩gina web b谩sica usando HTML.
