Codigo de prueba y ejercicios que escribi mientras aprendia HTML 5.
Estos son los temas de HTML que aprendi:
<article>Articulo<header>Encabezado<h1> - <h6>Titulos y Subtitulos<p>Párrafos<abbr>Abreviatura o Sigla de una Palabra o Frase<pre>Mostrar Texto (Preformateado) tal cual como está Escrito en el HTML<code>Escribir Código Fuente en la Página Web<blockquote>Cita Larga<q>Cita Corta<cite>Autor o Fuente de la Cita<main>Contenido Principal<aside>Contenido Lateral (Secundario)<addres>Información Personal y de Contacto<footer>Pie de Página
<em>Emphasis<strong>Mas Emphasis<small>Menos Emphasis que el Texto Normal<hr>Línea Horizontal ── Divisora de Contenido<br>Forzar un salto de línea<wbr>Salto de línea si Hiciera Falta<time>Fecha y Hora<i>Cursiva (Italic)<b>Negrita (Bold)<u>Subrayar (Underline)<mark>Resaltar<sup>Superíndice<sub>Subíndice
titleVer mensaje al pasar el cursor por una etiqueta (Tooltip o Texto Emergente)data-*Asignar un valor a una etiquetadraggableArrastrar ElementoscontenteditableContenido Editable- Ocultar Contenido
hidden<input type="hidden"><input hidden>
src="/ruta ó link"Especificar Ruta o Pagina Web de Donde está el Contenido Embebido, Control Interactivo o Código de JS
- Ruta Absoluta y Relativa
<a>Redirigirse a otra Página Web- Atributos de los Enlaces
<nav>Barra de Navegación<menu>Menú
- Etiquetas de las Listas
<li>Ítem<ul>Lista con Viñetas (Desordenada)<ol>Lista Enumerada (Ordenada)- Lista de Definición (Sin Viñetas ni Enumeración)
- Listas Anidadas
- Forma Correcta de Anidar Listas
- Forma Incorrecta de Anidar Listas
- Lista Enumerada (Ordenada -
<ol>) Dentro de Lista con Viñetas (Desordenada -<ul>)
- Atributos de las Listas
- Estructura Básica:
- Estructura Completa
<caption>Título Principal de la table<thead>Encabezado<th>Titulo de las Columnas<tbody>Cuerpo (Contenido)<tfoot>Pie de<table>- Ejemplo de
<table>con Estructura Completa
- Atributos de las
<table>- Hacer que una casilla □ ocupe más de una…
- Seleccionar Columnas ↨
- Enviar el
<form>sin Usar un Lenguaje de Programación (Backend) - Operaciones CRUD y Métodos HTTP
<form action="/ruta" method="get">GET (Leer)<form action="/ruta" method="post">POST (Guardar)- Formato de Datos del Formulario
- Asociar
<input>y<label>
placeholder="#"Pista en CamporequiredCampo ObligatorioreadonlyCampo de Solo LecturadisabledDesactivar Campo- Valor Mínimo y Máximo de un Campo:
- Número Mínimo y Máximo de Caracteres de un Campo:
autofocusSituar Cursor por Defecto en un Campo (Enfoque Automático)
- Sintaxis General de
<input> - Cuadro Agrupador de Controles:
<input type="text">Cuadro de Texto en una Sola Línea<textarea>Cuadro de Texto en Múltiples Líneas- Cuadro de Texto con Lista Desplegable ComboBox]()
<datalist><input type="list">
<output>Resultado de Eventos o Hacer Cálculos con<input>
- Diferencia Entre
<input type="button">,<input type="submit">y<button> <input type="reset">Limpiar Campos<input type="file">Importar Archivo (Contenido Embebido, Incrustado o Externo)<input type="image">Insertar Imagen Dentro de un Botón
<input type="datetime-local">Fecha y Hora<input type="date">Fecha<input type="time">Hora<input type="month">Mes y Año<input type="week">Número de Semana del Año
<input type="radio">Selección Única<input type="checkbox">Selección Múltiple- Cuadro de Lista Desplegable (ListBox):
- Cuadro de Texto o Viñeta Desplegable (Leer más) (Widget de Divulgación o Expansor)
<input type="range">Barra de Rango Numérico Modificable<meter>Barra de Rango Numérico Inmodificable<progress>Barra de Progreso “Cargando…” (ProgressBar)
-
srcset=""Insertar Imágenes y Media Queries CSS en HTML para Imágenes Responsive -
<iframe>Insertar Contenido de una Página Web Externa (Inline Frame, Marco en Línea) -
<source>Lista de Formatos con Contenido Embebido para la Compatibilidad del Navegador -
Descripción o Titulo
<figcaption>del Contenido<figure>
tabindex="#"Seleccionar Partes de la Pagina Web con la Tecla Tabulador- Lector de Pantalla para Pagina Web: Screen Reader (ChromeVox Classic Extension)
aria-label=""Definir que Dice el Lector de Pantallarole=""Decir al Navegador en Cual Etiqueta está Situado el Usuario (WAI-ARIA)
- Llamar Etiquetas HTML desde CSS y JS:
idyclass - Diferencia entre
<div>y<span>