Introducci贸n a HTML y CSS
Bienvenido a est谩 gu铆a sobre formularios en HTML y CSS. En este curso, aprender谩s desde los conceptos b谩sicos hasta la personalizaci贸n avanzada de formularios. Los formularios son una parte esencial de cualquier p谩gina web interactiva, ya que permiten a los usuarios proporcionar datos, realizar b煤squedas, registrarse en plataformas, enviar mensajes y mucho m谩s. Este curso est谩 dise帽ado para personas que desean aprender desde cero, explicando cada concepto de forma detallada y pr谩ctica.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T铆tulo</title>
</head>
<body>
<!-- Contenido -->
</body>
</html>
Introducci贸n a HTML y CSS
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.
驴Qu茅 es HTML?
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.
Historia y evoluci贸n de HTML
馃敼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.
Estructura b谩sica de un documento HTML
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.
Etiqueta
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.
C贸mo funcionan las etiquetas HTML
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>
Algunas etiquetas no tienen cierre (autocontenidas)
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">
Tipos de etiquetas HTML comunes
Estructura del documento:
馃敼<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>
Encabezados y texto:
馃敼<h1> a <h6>: Define encabezados (de mayor a menor importancia).
馃敼<p>: Define un p谩rrafo.
馃敼<strong> y <em>: Para texto en negrita o cursiva.
Listas:
馃敼<ul>: Lista desordenada (con vi帽etas).
馃敼<ol>: Lista ordenada (con n煤meros).
馃敼<li>: Elemento de lista.
Enlaces e im谩genes:
馃敼<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">
Tablas
馃敼<table>, <tr>, <td>: Para crear tablas.
Formularios
馃敼<form>, <input>, <button>: Para formularios.
Botones
馃敼<button>: Para crear botones.
Elementos
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
Partes de un elemento 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.
Atributos
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.
Caracter铆sticas principales de los atributos
馃敻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:
- Nombre: Define qu茅 caracter铆stica se est谩 especificando (por ejemplo,
href). - Valor: Define el valor de esa caracter铆stica (por ejemplo,
"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>
馃敻Constan de un nombre y un valor:
馃敼Nombre: Define qu茅 caracter铆stica se est谩 especificando (por ejemplo, href).
馃敼Valor: Define el valor de esa caracter铆stica (por ejemplo, "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
Atributos globales:
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>
Atributos espec铆ficos del 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>
Atributos booleanos:
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>
Lista de atributos comunes
| 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. |
Pasos para crear tu primera p谩gina HTML
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.
