Scribd
Cargar
312 vistas

Manual HTML

Este documento presenta una guía introductoria de 6 sesiones sobre HTML y CSS. Cubre conceptos básicos como la estructura de documentos HTML, etiquetas como <p> y <img>, y cómo agregar estilo con CSS usando selectores y propiedades. El documento también incluye ejemplos y ejercicios prácticos para cada sesión.

Cargado por

Carlos Alberto Huamaní Gonzales
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
312 vistas

Manual HTML

Este documento presenta una guía introductoria de 6 sesiones sobre HTML y CSS. Cubre conceptos básicos como la estructura de documentos HTML, etiquetas como <p> y <img>, y cómo agregar estilo con CSS usando selectores y propiedades. El documento también incluye ejemplos y ejercicios prácticos para cada sesión.

Cargado por

Carlos Alberto Huamaní Gonzales
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 29

Guía HTML

introducción
Docente:
Ing. Carlos Alberto Huamaní Gonzales
Curso:
Lenguajes para el Desarrollo y Soporte
de Sistemas
Sesión 1: Introducción a HTML
En esta primera sesión, vamos a aprender los conceptos básicos de HTML y cómo se
estructura un documento HTML.

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado utilizado para crear páginas
web. Se utiliza para estructurar y presentar el contenido de una página web, como texto,
imágenes, vídeos, etc.

Estructura de un documento HTML

Un documento HTML consta de dos partes principales: la cabecera (head) y el cuerpo (body).
La cabecera contiene información sobre la página, como el título y los enlaces a archivos
externos, mientras que el cuerpo contiene el contenido real de la página.

Aquí tienes un ejemplo básico de un documento HTML:

Etiquetas HTML

Las etiquetas HTML se utilizan para marcar el contenido y estructurar el documento HTML.
Una etiqueta HTML consta de un nombre de etiqueta y puede tener atributos que
proporcionan información adicional sobre la etiqueta.

Aquí tienes algunos ejemplos de etiquetas HTML:


• <h1> - Encabezado de nivel 1
• <p> - Párrafo
• <img> - Imagen
• <a> - Enlace

Ejemplo

Ejercicio práctico

- Crea un documento HTML básico con un título y un párrafo de texto. Guarda el


archivo con la extensión ".html" y ábrelo en tu navegador web para ver cómo se ve.
- Crea un documento HTML básico que incluya las etiquetas <html>, < head>, <title>
y <body>. En el título del documento coloca "Mi primera página HTML".
- Agrega un encabezado <h1> a la página con el texto "Bienvenido a mi página web"
y un párrafo con el texto "Esta es mi primera página web utilizando HTML".
- Agrega un enlace a tu sitio web favorito dentro de un párrafo <p> en tu página.
Asegúrate de que el enlace se abra en una nueva pestaña del navegador.
- Crea una lista no ordenada <ul><li></li></ul> con al menos tres elementos que
describan tus pasatiempos favoritos.
Sesión 2: Texto y Enlaces
En esta sesión, vamos a aprender cómo dar formato al texto y cómo crear enlaces en HTML.

Formato de texto en HTML

HTML proporciona varias etiquetas para dar formato al texto, como negrita (<strong>),
cursiva (<em>), subrayado (<u>), etc.

Aquí tienes algunos ejemplos de cómo utilizar estas etiquetas:

Enlaces en HTML

Los enlaces en HTML se crean utilizando la etiqueta <a>. La etiqueta <a> necesita un atributo
<href> que especifica la URL a la que se debe dirigir el enlace.

Aquí tienes un ejemplo de cómo crear un enlace:

Ejemplo
Ejercicio práctico

- Crea un documento HTML con un título y un párrafo de texto. Formatea parte del
texto en negrita y crea un enlace a una página web de tu elección.
- Crea una página que incluya un encabezado h1 con el texto "Mi blog de viajes" y un
párrafo que describa el objetivo del blog.
- Crea una lista ordenada de los lugares que has visitado y su ubicación geográfica.
- Agrega un enlace a un artículo interesante relacionado con viajes y colócalo en un
párrafo que describa por qué el artículo es importante.
- Crea un pie de página que incluya tu nombre y un enlace a tu perfil de redes sociales.
-
Sesión 3: Imágenes y Listas
En esta sesión, vamos a aprender cómo agregar imágenes y listas en HTML.

Imágenes en HTML

Para agregar imágenes en HTML, se utiliza la etiqueta <img>. La etiqueta <img> necesita un
atributo src que especifica la URL de la imagen.

Aquí tienes un ejemplo de cómo agregar una imagen:

La etiqueta <img> también puede tener otros atributos opcionales, como width y height
para especificar el tamaño de la imagen.

Listas en HTML

En HTML, hay dos tipos de listas: las listas ordenadas y las listas no ordenadas. Las listas
ordenadas se crean con la etiqueta <ol>, mientras que las listas no ordenadas se crean con la
etiqueta <ul>. Cada elemento de la lista se crea con la etiqueta <li>.

Aquí tienes un ejemplo de cómo crear una lista no ordenada:

Y aquí tienes un ejemplo de cómo crear una lista ordenada:


Ejemplo
Ejercicio práctico

- Crea un documento HTML con un título y un párrafo de texto. Agrega una imagen y
una lista no ordenada o una lista ordenada.
- Agrega una imagen a tu página web. Asegúrate de que la imagen tenga un atributo
"alt" descriptivo y de que se muestre correctamente en diferentes tamaños de pantalla.
- Crea una lista desordenada que incluya al menos 5 elementos que describan tus
comidas favoritas.
- Agrega una imagen de fondo a tu página web. Asegúrate de que la imagen no haga
que el texto sea difícil de leer.
- Crea una lista ordenada de los lugares que te gustaría visitar. Incluye al menos 3
lugares y agrega enlaces a las páginas web de cada lugar si es posible.
Sesión 4: Tablas y Formularios
En esta sesión, vamos a aprender cómo crear tablas y formularios en HTML.

Tablas en HTML

Para crear una tabla en HTML, se utiliza la etiqueta <table>. La tabla consta de filas (<tr>)
y columnas (<td>). El encabezado de la tabla se puede crear utilizando la etiqueta <th>.

Aquí tienes un ejemplo de cómo crear una tabla básica:

Formularios en HTML

Los formularios en HTML se utilizan para recopilar información del usuario. Los formularios
se crean utilizando la etiqueta <form>. Los campos del formulario se crean utilizando
etiquetas como <input>, <select> y <textarea>.

Aquí tienes un ejemplo de cómo crear un formulario básico:


Ejemplo
Ejercicio práctico

- Crea un documento HTML con un título y un párrafo de texto. Agrega una tabla y un
formulario básico para recopilar información del usuario.
- Crea una tabla con tres columnas y al menos tres filas. En la primera columna, agrega
el encabezado "Producto". En la segunda columna, agrega el encabezado "Precio".
En la tercera columna, agrega el encabezado "Disponibilidad". Luego, agrega
información relevante en cada celda de la tabla.
- Crea un formulario que pida el nombre, el correo electrónico y un mensaje de un
usuario. Utiliza la etiqueta "label" para agregar etiquetas a cada campo y la etiqueta
"input" para crear los campos para que el usuario pueda ingresar la información.
Agrega un botón "Enviar" para enviar el formulario.
- Crea una tabla que muestre información sobre diferentes modelos de teléfonos
móviles. Incluye columnas para "Marca", "Modelo", "Precio" y "Sistema operativo".
Agrega al menos 4 filas con información detallada de diferentes modelos de teléfonos
móviles.
- Crea un formulario que solicite información de registro a un usuario, incluyendo su
nombre, correo electrónico, contraseña y confirmación de contraseña. Asegúrate de
que la contraseña y la confirmación de contraseña coincidan antes de enviar el
formulario. Si no coinciden, muestra un mensaje de error al usuario.

¡Eso es todo por ahora! Con esta guía básica, deberías tener una buena comprensión de
HTML y estar en condiciones de crear páginas web sencillas. Si deseas profundizar más en
este tema, te recomendamos buscar tutoriales adicionales o cursos en línea para seguir
aprendiendo.
Sesión 5: CSS básico
En esta sesión, vamos a aprender cómo dar estilo a nuestras páginas HTML utilizando CSS
(Cascading Style Sheets).

Introducción a CSS

CSS se utiliza para definir la apariencia visual de una página web, incluyendo el diseño, los
colores, las fuentes y otros elementos visuales. La sintaxis de CSS es diferente a la de HTML,
pero se utiliza en conjunto con HTML para dar estilo a la página.

Selectores CSS

Los selectores CSS se utilizan para seleccionar los elementos HTML que deseamos estilizar.
Los selectores pueden ser etiquetas HTML, clases o identificadores. Aquí tienes algunos
ejemplos:

• Selector de etiqueta: p { }
• Selector de clase: .mi-clase { }
• Selector de identificador: #mi-id { }

Propiedades CSS

Las propiedades CSS se utilizan para definir los estilos de los elementos HTML
seleccionados. Aquí tienes algunos ejemplos de propiedades CSS:

• color: define el color del texto.


• background-color: define el color de fondo del elemento.
• font-size: define el tamaño de la fuente.
• font-family: define la familia de fuentes utilizada.
• padding: define el espacio entre el contenido y el borde del elemento.

Ejemplo
Ejercicio práctico

- Crea un archivo HTML con un título y un párrafo de texto. Agrega una imagen y una
lista. Luego, agrega un archivo CSS separado y utiliza selectores y propiedades para
dar estilo a los elementos HTML.
- Crea una página HTML con un encabezado h1 y un párrafo. Usa CSS para hacer que
el encabezado sea dos veces más grande que el párrafo, y para que ambos estén
centrados en la página.
- Crea un menú de navegación horizontal usando una lista no ordenada y CSS. Haz que
los elementos del menú estén separados por una línea vertical y que cambien de color
cuando el cursor del mouse los atraviesa.
- Crea una página HTML con un botón y un cuadro de texto. Usa CSS para hacer que
el botón se expanda cuando se pasa el cursor del mouse sobre él y que el cuadro de
texto tenga un borde personalizado cuando se enfoca.
- Crea una página HTML con varias imágenes. Usa CSS para hacer que las imágenes
sean sensibles al clic, de modo que se expandan o reduzcan de tamaño cuando se hace
clic en ellas.
Sesión 6: Diseño web responsivo
En esta sesión, vamos a aprender cómo hacer que nuestras páginas web se vean bien en
diferentes dispositivos y tamaños de pantalla utilizando técnicas de diseño web responsivo.

Media queries

Las media queries son una técnica de diseño web responsivo que se utiliza para cambiar los
estilos de una página web en función del tamaño de la pantalla. Las media queries se definen
utilizando la siguiente sintaxis:

Diseño de rejilla

El diseño de rejilla es una técnica de diseño web responsivo que se utiliza para crear diseños
flexibles y adaptables utilizando una rejilla de filas y columnas. Las filas se dividen en
columnas y se definen anchuras relativas en lugar de anchuras fijas en píxeles.

Ejemplo
Ejercicio práctico

- Crea un archivo HTML con un título y un párrafo de texto. Agrega una imagen y una
lista. Luego, utiliza CSS y técnicas de diseño web responsivo para hacer que la página
se vea bien en diferentes tamaños de pantalla.
- Crea una página web que contenga una barra de navegación con enlaces a diferentes
secciones de la página. Utiliza media queries para hacer que la barra de navegación
se vea diferente en pantallas pequeñas.
- Agrega una sección de imágenes a tu página web. Usa flexbox para hacer que las
imágenes se ajusten automáticamente al tamaño de la pantalla del usuario.
- Crea un formulario de contacto con campos para el nombre, correo electrónico y
mensaje. Utiliza media queries para hacer que el formulario se vea diferente en
pantallas pequeñas.
- Crea una página de inicio para un blog o sitio web de noticias que tenga un diseño de
cuadrícula. Usa CSS Grid para crear una cuadrícula con múltiples elementos que
muestren las últimas noticias o entradas del blog.
- Crea una página web con tres secciones: una sección de encabezado, una sección de
contenido y una sección de pie de página. Utiliza media queries para que la página se
vea bien en dispositivos móviles y de escritorio. En dispositivos móviles, el
encabezado y el pie de página deben estar apilados uno encima del otro y el contenido
debe tener un ancho completo. En dispositivos de escritorio, el encabezado y el pie
de página deben estar en los extremos superior e inferior de la pantalla,
respectivamente, y el contenido debe tener un ancho limitado.
- Crea una página web con un menú de navegación y un contenido principal. Utiliza
media queries para hacer que el menú se contraiga en un menú de hamburguesa en
dispositivos móviles y se expanda en un menú de pantalla completa en dispositivos
de escritorio. También utiliza media queries para hacer que el contenido principal se
divida en dos columnas en dispositivos de escritorio, pero se muestre como una sola
columna en dispositivos móviles. Agrega efectos de transición suaves para la apertura
y el cierre del menú de navegación en dispositivos móviles.
-
Sesión 7: Publicación de una página web
En esta sesión, vamos a aprender cómo publicar una página web en línea para que otros
puedan acceder a ella.

Hosting web

Para publicar una página web, necesitas un servicio de hosting web que te permita subir los
archivos HTML, CSS y otros archivos necesarios a un servidor web para que puedan ser
accedidos por otros usuarios.

FTP

FTP (File Transfer Protocol) es un protocolo utilizado para transferir archivos a un servidor
web. Necesitarás un cliente FTP para conectarte a tu servidor y subir tus archivos. Hay varios
clientes FTP gratuitos disponibles en línea, como FileZilla.

Registro de un dominio

Para que otros puedan acceder a tu página web, necesitas registrar un dominio. Un dominio
es el nombre de tu sitio web, como "tusitio.com". Hay varios servicios de registro de
dominios disponibles en línea, como Namecheap.

Subir archivos

Una vez que hayas registrado un dominio y contratado un servicio de hosting web, puedes
subir tus archivos HTML, CSS y otros archivos necesarios utilizando un cliente FTP.
Asegúrate de seguir las instrucciones de tu proveedor de hosting web para subir tus archivos
correctamente.

Ejemplo

Supongamos que has creado una página web utilizando HTML y CSS y ahora deseas
publicarla en la web. Para hacer esto, necesitarás un servicio de alojamiento web y un nombre
de dominio.

Paso 1: Elige un servicio de alojamiento web: Hay muchos servicios de alojamiento web
disponibles en línea, algunos de los cuales son gratuitos y otros de pago. Algunos de los
servicios de alojamiento web más populares son HostGator, Bluehost y GoDaddy.

Paso 2: Compra un nombre de dominio: Un nombre de dominio es la dirección de tu sitio


web en la web. Debe ser único y fácil de recordar. Puedes comprar un nombre de dominio en
línea a través de servicios como GoDaddy o Namecheap.
Paso 3: Sube tu sitio web al servidor: La mayoría de los servicios de alojamiento web te
proporcionarán un panel de control desde el cual podrás subir tu sitio web. También puedes
utilizar un programa de FTP (Protocolo de Transferencia de Archivos) para subir tu sitio web.

Paso 4: Prueba tu sitio web: Una vez que hayas subido tu sitio web al servidor, asegúrate de
probarlo en diferentes navegadores y dispositivos para asegurarte de que se vea y funcione
correctamente.

Con estos cuatro pasos, tu sitio web debería estar listo y accesible en la web.

Ejercicio práctico

- Registra un dominio y contrata un servicio de hosting web. Crea una página web
utilizando HTML y CSS, y sube los archivos a tu servidor utilizando un cliente FTP.
Asegúrate de verificar que tu página web sea accesible desde cualquier dispositivo y
que se vea bien en diferentes tamaños de pantalla.
- Crea una cuenta en un servicio de alojamiento web gratuito, como Github Pages o
Netlify. Crea un nuevo repositorio y configura tu sitio web para que se publique
automáticamente.
- Agrega una página adicional a tu sitio web y crea un enlace en la página de inicio que
lleve a esta nueva página. Asegúrate de que el enlace funcione correctamente.
- Agrega una imagen a tu sitio web y asegúrate de que la imagen se muestre
correctamente en la página. También agrega un atributo alt para describir la imagen
en caso de que no se cargue.
- Crea un archivo robots.txt para tu sitio web y configura las directivas para que los
motores de búsqueda no indexen ciertas páginas o secciones del sitio web. Verifica
si se está cumpliendo la directiva utilizando la herramienta de inspección de robots
de Google.
-
Sesión 8: Mejora de la accesibilidad
En esta sesión, vamos a aprender cómo hacer que nuestras páginas web sean más accesibles
para personas con discapacidades o limitaciones físicas.

Etiquetas de encabezado

Las etiquetas de encabezado (h1-h6) se utilizan para definir la jerarquía y la estructura de la


página web. Las etiquetas de encabezado son importantes para la accesibilidad porque
permiten a los usuarios con discapacidades visuales navegar por la página utilizando lectores
de pantalla.

Texto alternativo

El texto alternativo se utiliza para describir el contenido de una imagen para usuarios que no
pueden verla. El texto alternativo es importante para la accesibilidad porque permite a los
usuarios con discapacidades visuales comprender el contenido de la página.

Contraste de color

El contraste de color se refiere a la diferencia de luminosidad entre el texto y el fondo de la


página. El contraste de color es importante para la accesibilidad porque permite a los usuarios
con discapacidades visuales leer el texto con más facilidad.

Ejemplo

Antes de mejorar accesibilidad

Después de mejorar la accesibilidad


Ejercicio práctico

- Mejora una página web existente agregando etiquetas de encabezado, texto


alternativo para imágenes y mejorando el contraste de color. Asegúrate de verificar
que la página sea accesible para usuarios con diferentes discapacidades o limitaciones
físicas.
- Agregar subtítulos a cada sección de una página web utilizando la etiqueta <h2> y
etiquetas semánticas como <header> y <nav>.
- Utilizar la etiqueta <alt> para describir imágenes en una página web para mejorar la
accesibilidad para las personas con discapacidad visual.
- Crear un formulario con etiquetas <label> y atributos for para vincular etiquetas de
formulario y campos de entrada de formulario.
- Agregar descripciones detalladas y etiquetas <title> descriptivas a los enlaces de
navegación para mejorar la accesibilidad de los usuarios de lectores de pantalla.
- Crea un formulario de registro que incluya diferentes tipos de campos de entrada (por
ejemplo, campos de texto, menús desplegables, botones de radio, casillas de
verificación, etc.) y asegúrate de que sean completamente accesibles para personas
con discapacidades.
- Implementa un sistema de navegación con teclado que permita a los usuarios navegar
por tu sitio web sin tener que utilizar el mouse. Asegúrate de que la navegación sea
fácil de usar y que se pueda acceder a todas las secciones del sitio.
- Agrega subtítulos y descripciones de audio a tus videos para que sean accesibles para
personas con discapacidades auditivas.
- Optimiza tus imágenes para que sean más accesibles, utilizando etiquetas alt
descriptivas y atributos de título para proporcionar información adicional sobre la
imagen.
Conclusión

Esperamos que esta guía te haya ayudado a aprender HTML y CSS de manera efectiva y
práctica. Recuerda que la práctica es fundamental para mejorar tus habilidades de
codificación, así que sigue practicando y desarrollando tus habilidades. ¡Buena suerte en tu
camino como desarrollador web!
Recursos adicionales
Aquí hay algunos recursos adicionales que pueden ayudarte a seguir aprendiendo HTML y
CSS:

• W3Schools: es un sitio web que ofrece tutoriales en línea sobre HTML, CSS y otros
lenguajes de programación web. Ofrece ejemplos prácticos y un editor en línea para
que puedas practicar mientras aprendes.
• Codecademy: es una plataforma en línea que ofrece cursos gratuitos y de pago sobre
varios lenguajes de programación, incluyendo HTML y CSS.
• FreeCodeCamp: es una comunidad en línea que ofrece cursos gratuitos sobre
desarrollo web. Ofrece un plan de estudio completo sobre HTML, CSS y JavaScript.
• Mozilla Developer Network: es un recurso en línea que ofrece documentación
detallada sobre HTML, CSS y otros lenguajes de programación web. Es una excelente
fuente de referencia cuando tienes preguntas específicas sobre cómo funciona algo en
particular.

Esperamos que estos recursos te sean útiles mientras continúas aprendiendo y desarrollando
tus habilidades de codificación.

Recuerda que HTML y CSS son solo una parte del desarrollo web. Para crear aplicaciones
web más avanzadas, también necesitarás aprender otros lenguajes de programación, como
JavaScript y PHP, y familiarizarte con herramientas y tecnologías adicionales, como bases
de datos y frameworks. Pero aprender HTML y CSS es un gran primer paso para comenzar
tu camino en el desarrollo web.

Si tienes preguntas o necesitas ayuda, no dudes en buscar en línea o en comunidades de


desarrolladores web para obtener apoyo. La comunidad de desarrolladores web es una de las
más amigables y solidarias, así que no dudes en aprovecharla.

¡Gracias por leer esta guía y esperamos que haya sido útil para ti!
Etiquetas más comunes HTML
Etiqueta Atributos Descripción Ejemplo de uso
Define el tipo de
<!DOCTYPE> - documento <!DOCTYPE html>
HTML
Define el
<html> lang idioma de la <html lang="es">
página
Contiene
información
<head> - sobre el <head>...</head>
documento
HTML
Define el
charset, conjunto de
<meta> name, caracteres y la <meta charset="UTF-8">
content información del
documento
<title>
Define el título <title>Mi página web</title>
-
del documento
bgcolor,
text, Contiene el
<body> link, contenido de la <body bgcolor="#ffffff">...</body>
vlink, página
alink
Define
<h1> - <h6> - encabezados de <h1>Encabezado principal</h1>
nivel de sección
<p>
Define un <p>Este es un párrafo.</p>
-
párrafo
<a href="https://www.ejemplo.com"
<a> href, Define un target="_blank">Enlace a
target hipervínculo Ejemplo.com</a>
src, alt, <img src="imagen.jpg"
<img>
Inserta una alt="Descripción de la imagen"
width,
height
imagen width="200" height="100">
Define una lista <ul><li>Elemento
<ul> -
no ordenada 1</li><li>Elemento 2</li></ul>
Define una lista <ol><li>Elemento
<ol> -
ordenada 1</li><li>Elemento 2</li></ol>
Define un
<ul><li>Elemento
<li> - elemento de 1</li><li>Elemento 2</li></ul>
lista
<table><tr><td>Fila 1, columna
<table> - Define una tabla 1</td><td>Fila 1, columna
2</td></tr><tr><td>Fila 2, columna
1</td><td>Fila 2, columna
2</td></tr></table>
<tr><td>Fila 1, columna
<tr>
Define una fila 1</td><td>Fila 1, columna
-
en una tabla 2</td></tr>
Define una
<td> - celda en una <td>Fila 1, columna 1</td>
tabla
Define una
<th>
celda de <th>Encabezado de columna</th>
-
encabezado en
una tabla
Define un
action, <form action="procesar.php"
<form> formulario de
method method="post">...</form>
entrada de datos
type,
name, Define un
<input>
<input type="text" name="nombre"
value, campo de
value="John Doe”>
checked, entrada de datos
required
Incrusta
<embed src="myvideo.mp4"
src, type, contenido type="video/mp4" width="500"
<embed> width, externo, como height="300">
height, any audio, video, etc.,
en la página web
Crea un área de
dibujo en la <canvas id="myCanvas" width="200"
width, height="100"></canvas>
<canvas> página web, para
height
ser utilizado con
JavaScript
Muestra una
<progress value="70"
barra de max="100"></progress>
<progress> value, max
progreso en la
página web
value, min, Muestra una <meter value="5" min="1" max="10"
max, low, medición escalar low="3" high="8"
<meter> optimum="6"></meter>
high, en una barra
optimum horizontal
Crea un widget
de disclosue que <details>
se puede abrir y <summary>Click aquí para leer
<details> open más</summary>
cerrar para
mostrar más <p>Este es el contenido oculto
que se muestra cuando se hace clic
información en el resumen</p>
Proporciona </details>
<summary> Ninguno un resumen o
título para el
elemento
<details>
Atributos
Atributo Descripción Etiqueta
accesskey Especifica una tecla de Todos los elementos
acceso rápido para un
elemento
alt Define texto alternativo <img>
para una imagen
class Especifica una o más clases Todos los elementos
para un elemento
contenteditable Especifica si el contenido Todos los elementos
de un elemento es editable
o no
data-* Almacena información Todos los elementos
privada para la página o la
aplicación
disabled Deshabilita un elemento <button>, <input>, <optgroup>,
<option>, <select>, <textarea>
for Especifica con qué <label>
elemento está asociado un
elemento <label>
href Especifica la dirección <a>, <area>
URL de un enlace
id Especifica un identificador Todos los elementos
único para un elemento
lang Especifica el idioma de un Todos los elementos
elemento
name Especifica un nombre para <button>, <form>, <fieldset>,
un elemento <iframe>, <input>, <keygen>,
<object>, <output>, <select>,
<textarea>, <map>, <meta>,
<param>
placeholder Especifica un texto de <input>, <textarea>
marcador de posición para
un elemento de entrada
readonly Especifica que un elemento <input>, <textarea>
de entrada es de solo
lectura
required Especifica que un elemento <input>, <select>, <textarea>
de entrada debe ser
rellenado antes de enviar el
formulario
src Especifica la dirección <img>, <script>
URL de una imagen o un
script
style Especifica un estilo para un Todos los elementos
elemento
tabindex Especifica el orden de Todos los elementos
tabulación de un elemento
target Especifica en qué ventana <a>, <area>
o marco se abrirá la
dirección URL de un
enlace
title Especifica información Todos los elementos
adicional sobre un
elemento

También podría gustarte