| 1. ESTRUCTURA BÁSICA Y CABECERA |
| Definiciones |
Conceptos teóricos básicos. |
HTML = HyperText Markup Language
URL = Uniform Resource Locator |
- |
- |
| <!DOCTYPE html> |
Es el DNI del documento. Le dice al navegador "Soy un HTML moderno". |
Va en la primera línea. |
<!DOCTYPE html> |
(Invisible) |
| <html> |
La caja madre que envuelve TODO. |
lang="en": Define el idioma (inglés). |
<html lang="en">...</html> |
(Contiene todo) |
| <head> |
La Cabeza: Es el cerebro, da información técnica pero no se ve el contenido. |
Contiene meta, title, link. |
<head>...</head> |
(Invisible) |
| <meta> |
Configuración técnica. |
charset="UTF-8": ¡Vital! Permite usar tildes y caracteres especiales. No tiene cierre. |
<meta charset="UTF-8"/> |
á, ñ, ü (Funcionan gracias a esto) |
| <title> |
El título de la PESTAÑA del navegador (encabezado). |
No se ve en la página blanca, sino arriba en el navegador. |
<title>Mi Pagina</title> |
(Mira la pestaña arriba) |
| <body> |
El Cuerpo: Aquí va todo lo que ve el usuario. |
style="background-color:...": Cambia el fondo. |
<body>...</body> |
(Todo lo blanco que ves) |
| 2. TITULOS Y PARRAFOS |
| <h1> a <h6> |
Son los titulares. H1 es gigante, H6 es diminuto. |
Se usan para dar jerarquía. |
<h1>Titulo 1</h1>
<h6>Titulo 6</h6>
|
Titulo 1
Titulo 6
|
| <p> |
Párrafos de texto normal. |
Es el bloque estándar de texto. |
<p>Hola soy texto</p> |
Hola soy texto |
| <br> |
Salto de línea (Enter). |
No tiene cierre. Corta el texto y baja. |
Hola<br>Adios |
Hola
Adios |
| <hr> |
Línea horizontal separadora. |
Crea una raya visual para separar temas. |
<hr> |
|
| <pre> |
Texto pre-formateado. |
Respeta tus espacios y saltos tal cual los escribes. Sin necesidad de BR. |
<pre>
Esto respeta
espacios.
</pre>
|
Esto respeta
espacios.
|
| 3. MAQUILLAJE DE TEXTO (FORMATOS) |
| <b> / <strong> |
Poner en Negrita. |
strong: Da importancia semántica.
b: Solo visual. |
<b>Negrita</b> |
Negrita |
| <i> / <em> |
Poner en Cursiva. |
i: Recursiva/Itálica.
em: Enfatizar. |
<i>Cursiva</i> |
Cursiva |
| <small> |
Texto pequeño. |
Reduce el tamaño de la letra. |
<small>Chiquito</small> |
Chiquito |
| <mark> |
Resaltador. |
Pinta el fondo de amarillo brillante. |
<mark>Ojo aquí</mark> |
Ojo aquí |
| <del> / <ins> |
Corregir textos. |
del: Tacha la palabra.
ins: Subraya (insertado). |
<del>Mal</del> <ins>Bien</ins> |
Mal Bien |
| <sub> / <sup> |
Letras voladoras. |
sub: Baja (H2O).
sup: Eleva (Potencia). |
H<sub>2</sub>O |
H2O |
| Caracteres Especiales |
Símbolos reservados. |
! o ! es el signo (!). |
! ! |
! ! |
| 4. ENLACES E IMÁGENES |
| <a> (Link) |
Transportador a otra web. |
href: La dirección.
target="_blank": Abre en otra pestaña.
Rutas: Relativas (../) o Absolutas (youtube.com).
|
<a href="https://google.com" target="_blank">Ir</a> |
Ir |
| <img> |
Insertar foto. |
src: Ruta imagen.
alt: Texto si falla.
title: Texto al pasar mouse.
width/height: Tamaño.
|
<img src="..." width="50"> |
 |
| Link con Imagen |
Hacer que una foto sea un botón. |
Se pone la img DENTRO de la a. |
<a><img src="..."></a> |
|
| 5. ESTILOS CSS (COLORES Y CAJAS) |
| Colores |
Formas de pintar. |
Nombre: crimson.
RGB: rgb(0,25,99).
RGBA: con transparencia (0.5).
|
style="color: crimson;" |
Crimson
RGB(0,25,99)
|
| Modelo de Caja |
Padding, Border, Margin. |
Padding: Relleno interno.
Margin: Espacio externo.
Border: El borde.
|
border: 10px solid rgba(220,20,60,.5); |
Caja
|
| Margen Loco (Tu apunte) |
Un margen con valores extremos. |
margin: 4px 850px 10px 500px;
(Arriba, Derecha, Abajo, Izquierda).
|
class="margen-loco" |
Soy el elemento con 850px de margen
Use scroll para ver el margen gigante
|
| Estados del Link |
Cómo cambia el link al interactuar. |
a:link: Normal.
a:visited: Ya visitado (Purple).
a:hover: Mouse encima.
a:active: Click presionado.
|
a:hover { color: crimson; }
|
Pasa el mouse aquí |
| Display Inline-Block |
Para poner cajas una al lado de la otra. |
Evita que se pongan una encima de otra. |
display: inline-block; |
1
2
|
| 6. LISTAS AVANZADAS |
| <ul> Menú |
Lista Desordenada (Viñetas). |
style="list-style-type: square" (Cuadrados).
float: left (Items a la izquierda).
overflow: hidden (Ocultar sobrantes).
|
<ul class="menu-flotante">
<li>A</li><li>B</li>
</ul>
|
|
| <ol> Contadores |
Lista Ordenada (Números). |
counter-reset / increment: Tu propio contador.
::before content: Poner texto antes del número.
type: Cambiar num o letra.
|
content: "Curso " counter(contador);
|
- HTML
- CSS
|
| <dl> |
Lista de Descripción. |
dt (Término) y dd (Descripción). |
<dt>A</dt><dd>Letra</dd> |
- HTML
- Lenguaje
|
| 7. TABLAS |
| Estructura Tabla |
La rejilla de datos. |
table: Contenedor.
tr: Fila.
th: Cabecera.
td: Dato.
caption: Título (line-height:70px).
|
Ver ejemplo visual |
Titulo (caption)
| Col 1 |
Col 2 |
| Dato |
Dato |
| Rowspan 2 |
Dato |
| Dato |
| Colspan 2 |
|
| Estilos Tabla |
Bordes y Colores. |
border-collapse: Unir bordes.
nth-child(even/odd): Filas pares/impares.
width: 100%: Ancho total.
|
tr:nth-child(even) { color... } |
| 8. BLOQUES Y VENTANAS |
| <div> vs <span> |
Div: Bloque (caja grande).
Span: Inline (dentro de línea).
|
Se usan con class (grupo) o id (único). |
<div class="clase"> |
Div bloque
Span linea
|
| <iframe> |
Mostrar otra página dentro. |
name="x": Nombre para identificarlo.
target="x": Enlace que carga ahí.
|
target="nombre_iframe" |
Cargar Wiki
|
| Bookmarks |
Enlaces internos. |
<a href="#id"> viaja al elemento con id="id". |
href="#nombreID" |
(Los menús de arriba usan esto) |
| 9. FORMULARIOS (DATOS) |
| <form> |
Carpeta del formulario. |
action: URL destino.
method: POST o GET.
autocomplete="off": Sin sugerencias.
novalidate: Enviar sin chequear errores.
|
<form method="post"> |
- |
| Agrupación |
Marcos para ordenar. |
fieldset: El marco.
legend: El título del marco.
|
<fieldset><legend>... |
|
| Inputs Básicos |
Cajas de texto. |
type="text"
type="email" (@)
placeholder: Texto fantasma.
required: Obligatorio.
|
<input type="text" placeholder="..."> |
|
| Input Number |
Solo números. |
step="any": Permite decimales. |
<input type="number" step="any"> |
|
| Radio |
Selección única (Bolitas). |
name="mismo": Deben tener igual nombre para ser grupo. |
name="grupo1" |
A
B
|
| Checkbox |
Selección múltiple (Cuadrados). |
Tambien usar mismo name para agrupar datos. |
type="checkbox" |
X
Y
|
| Select & Textarea |
Lista y Caja grande. |
multiple="true": Elegir varios.
rows/cols: Tamaño del textarea.
|
<textarea rows="2"> |
|
| Botones Submit |
Enviar. |
formnovalidate: Botón que salta la validación. |
formnovalidate="formnovalidate" |
|