Curso Html
Atajos de teclado
ALT+Z para que el texto se adapte a la ventana en vs code
Tag en ingles significa etiqueta
No se recomienda usar <b> para colocar texto en negrita, lo recomendado es colocar negrita con css.
- Href, color, maxmin son atributos
- La tipografía Montserrat es muy completa y buena.
- Se pueden buscar tipografías en Google Fonts
- En el curso de soy Dalto por 2:47:00 enseña 2 métodos para añadir tipografías.
- No es estrictamente necesario colocar un punto y coma ; al final de la última propiedad de un CSS
Estructura básica
En vs code se puede escribir
html:5
Y dar ENTER para que se genere automáticamente la estructura siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Head
le dice información de la página. Aquí va solo información que no es visible dentro del cuerpo de la página web.
Title indica el titulo de la pestaña en este caso Primera web <title>Primer web</title>
Body
Aquí va toda la información que será visible en el cuerpo de la página web
TITULOS
<!DOCTYPE html>
<html>
<head>
<title>Primera web</title>
</head>
<body>
<h1>Hecho con h1</h1>
<h2>Hecho con h2</h2>
<h3>Hecho con h3</h3>
<h4>Hecho con h4</h4>
<h5>Hecho con h5</h5>
<h6>Hecho con h6</h6>
<p>
Hecho con p parrafo
</p>
</body>
</html>
Hay desde el h1 hasta el h6. Si escribimos un h7 o superior el texto se ve como si no tuviese etiqueta o como si fuese hecho con párrafo p.
Siempre es recomendable tener un único h1 por página web. Debido a que el CEO (posicionamiento web) le da mucha importancia al h1,
Google ve el h1 y si colocamos muchos h1 Google nos penaliza haciendo menos visible a nuestra página web. Los demás: h2, h3, h4, h5, h6 se
pueden usar las veces que queramos.
Title en el body
Podemos mostrar un mensaje cuando el mouse pase por encima de algo como un enlace o párrafo colocando un titulo a la etiqueta.
<!DOCTYPE html>
<html>
<head>
<title>Enlaces</title>
</head>
<body>
<h1 title="Hola mundo">Este es el titulo</h1>
</body>
</html>
No se puede sacar captura porque el mensaje desaparece.
Se puede utilizar de esta manera para:
- Decir de que trata una imagen al pasar el mouse encima
- Decir a donde va un enlace
- En algunos campos en los formularios
Parrafos
<p>
Hola mundo. Se inicia el curso de Html y Css en youtube
</p>
Es curioso que podemos escribir texto sin la etiqueta <p></p> pudiendo solo colocar el texto directamente.
<!DOCTYPE html>
<html>
<head>
<title>Primera web</title>
</head>
<body>
Hola mundo. Se inicia el curso de Html y Css en youtube
</body>
</html>
Que si observamos con cuidado cuando si colocamos la etiqueta <p> hace que exista un pequeño espacio entre lo que haya arriba y el párrafo.
Es recomendable no colocar todo el contenido en un párrafo, sino solo una idea por ejm la descripción de un lugar turístico con un párrafo y los
nombres en otro párrafo.
Listas
Listas ordenadas
Las listas ordenadas se escriben asi:
<ol></ol> donde ol significa Order List
tienen minielementos que se escriben asi:
<li></li> donde li significa List Item
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Listas</title>
</head>
<body>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</body>
</html>
Si no coloco nada dentro del contendio del List Item li me seguirá generando el número asi:
<!DOCTYPE html>
<html>
<head>
<title>Listas</title>
</head>
<body>
<ol>
<li></li>
<li></li>
</ol>
</body>
</html>
Se utiliza para escribir listas ordenadas
Se puede utilizar por ejemplo para una lista de los ingredientes de una receta de cocina.
Mediante Css se puede quitar el número que hay por delante.
Listas desordenadas
Se escriben como <ul> </ul>
Y al igual que las Listas Ordenadas li tienen Items de Lista li
<!DOCTYPE html>
<html>
<head>
<title>Listas</title>
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>
Las listas desordenadas por defecto añaden un * antes de cada elemento, estos puntos se pueden quitar mediante css
Enlaces links
Se escriben con la etiqueta <a>
<!DOCTYPE html>
<html>
<head>
<title>Enlaces</title>
</head>
<body>
<a href="https://youtube.com">Texto para redirigir al enlace</a>
</body>
</html>
Cuando presionamos sobre el texto nos redirigirá a la página de youtube.
No es completamente necesario colocar el https: pues con solo colocar el “//youtube.com” es suficiente, pero lo recomendado es siempre
colocar el https por motivos de seguridad, posicionamiento.
Podemos navegar de esta manera. Codigo de enlaces.html:
<!DOCTYPE html>
<html>
<head>
<title>Enlaces</title>
</head>
<body>
<a href="enlaces2.html">redirigir a enlaces2</a>
</body>
</html>
Codigo de enlaces2.html:
<!DOCTYPE html>
<html>
<head>
<title>Enlaces</title>
</head>
<body>
<a href="enlaces3.html">redirigir a enlaces 3</a>
</body>
</html>
Codigo de enlaces3.html:
<!DOCTYPE html>
<html>
<head>
<title>Enlaces</title>
</head>
<body>
<a href="enlaces.html">Redirigir a enlaces</a>
</body>
</html>
Es posible que en este caso el https:// no fuese necesario porque esto se ejecuto en mi propia pc.
Para que el enlace se abra en una nueva pestaña se coloca el target=”_blank”
Para especificar que se abra en la misma pestaña se coloca el target=”_self”
<!DOCTYPE html>
<html>
<head>
<title>Enlaces</title>
</head>
<body>
<a href="enlaces2.html" target="_blank">redirigir a enlaces2</a>
</body>
</html>
Mediante css se puede quitar el subrayado o el color azul hasta hacer que parezca un simple texto, aunque lo recomendado es que siempre un
enlace parezca un enlace.
Imágenes
<!DOCTYPE html>
<html>
<head>
<title>Imagenes</title>
</head>
<body>
<img src="imagenSoftware.jpg">
</body>
</html>
Si la imagen no puede cargarse correctamente podemos mostrar un mensaje en su lugar mediante alt
<!DOCTYPE html>
<html>
<head>
<title>Imagenes</title>
</head>
<body>
<img src="imagenoftware.jpg" alt="Lo siento la imagen no pudo cargarse">
</body>
</html>
El uso de alt mejora nuestra posición frente al SEO (posicionamiento de Google)
Se le puede añadir un title para que aparezca un mensaje al pasar el mouse encima:
<!DOCTYPE html>
<html>
<head>
<title>Imagenes</title>
</head>
<body>
<img src="imagenSoftware.jpg" alt="Lo siento la imagen no pudo cargarse" title="Titulo de imagen">
</body>
</html>
Rutas
Para volver una carpeta atrás y ahí buscar el archivo listas.html
../listas.html
Para volver 2 carpetas atrás se puede poner ../../listas.html
Para entrar a la carpeta y acceder al archivo listas.jpg
imagenes/listas.jpg
Formularios
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
<form>
<p>Text</p>
<input type="text">
<p>Color</p>
<input type="color">
<p>email</p>
<input type="email">
<p>password</p>
<input type="password">
<p>checkbox</p>
<input type="checkbox">
<p>radio</p>
<input type="radio">
<p>file</p>
<input type="file">
<p>submit</p>
<input type="submit">
<p>date</p>
<input type="date">
<p>button</p>
<input type="button">
</form>
</body>
</html>
Atributos
Atributo required
El required obliga a completar el campo de forma correcta (por ejm que exista texto en el text, que el email tenga su @gmail.com), una vez que
se da al botón submit si algun campo con required no se completo no permite continuar y arroja un mensaje.
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
<form>
<p>Text</p>
<input type="text" required>
<p>Color</p>
<input type="color">
<p>email</p>
<input type="email" required>
<p>password</p>
<input type="password" required>
<p>checkbox</p>
<input type="checkbox">
<p>radio</p>
<input type="radio">
<p>file</p>
<input type="file">
<p>submit</p>
<input type="submit">
<p>date</p>
<input type="date">
<p>button</p>
<input type="button">
</form>
</body>
</html>
Atributo name
Sirve para identificar inputs, cuando se envia al servidor este reconocera a que variable corresponde cada input mediante el name. No se puede
tener 2 campos con el mismo name.
En js se puede hacer algo similar mediante clases, o por el id u otra forma y es una practica muy común.
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
<form>
<p>Text</p>
<input type="text" name="username">
<p>Color</p>
<input type="color">
<p>email</p>
<input type="email" name="email">
<p>password</p>
<input type="password" name="correo">
<p>checkbox</p>
<input type="checkbox">
<p>radio</p>
<input type="radio">
<p>file</p>
<input type="file" name="documentos_personales">
<p>submit</p>
<input type="submit">
<p>date</p>
<input type="date">
<p>button</p>
<input type="button">
</form>
</body>
</html>
Atributo placeholder
Coloca un mensaje en un campo, dicho mensaje se borra cuando el usuario ingresa algun carácter al campo y regresa cuando el campo esta
vacio.
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
<form>
<p>Text</p>
<input type="text" placeholder="Coloca tu nombre">
<p>Color</p>
<input type="color">
<p>email</p>
<input type="email" placeholder="ingresa tu email">
<p>password</p>
<input type="password" placeholder="Coloca tu contra">
<p>checkbox</p>
<input type="checkbox">
<p>radio</p>
<input type="radio">
<p>file</p>
<input type="file">
<p>submit</p>
<input type="submit">
<p>date</p>
<input type="date">
<p>button</p>
<input type="button">
</form>
</body>
</html>
Atributo value
No se aplica de la misma manera a todos los elementos.
Para los campos donde se puede ingresar texto como email, text, etc es un valor que tiene inicialmente un formulario.
Para un checkbox se utiliza para especificar el valor que se enviará al servidor cuando el checkbox esté marcado.
Para un radio
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
<form>
<p>Text</p>
<input type="text" value="Jhonny">
<p>Color</p>
<input type="color">
<p>email</p>
<input type="email" value="[email protected]">
<p>password</p>
<input type="password" value="1234">
<p>checkbox</p>
<input type="checkbox" name="subscribirse" value="Si">
<p>radio</p>
<input type="radio">
<p>file</p>
<input type="file">
<p>submit</p>
<input type="submit">
<p>date</p>
<input type="date">
<p>button</p>
<input type="button">
</form>
</body>
</html>
Atributo minlength
Para indicar un numero mínimo de letras en un campo de texto, email, u otro similar
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
<form>
<p>Text</p>
<input type="text" minlength="3">
<p>Color</p>
<input type="color">
<p>email</p>
<input type="email">
<p>password</p>
<input type="password">
<p>checkbox</p>
<input type="checkbox">
<p>radio</p>
<input type="radio">
<p>file</p>
<input type="file">
<p>submit</p>
<input type="submit">
<p>date</p>
<input type="date">
<p>button</p>
<input type="button">
</form>
</body>
</html>
Extras de form (por explicar)
Method
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
<form method="post">
<p>Text</p>
<input type="text" minlength="3">
</form>
</body>
</html>
Action
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
<form action="post">
<p>Text</p>
<input type="text" minlength="3">
</form>
</body>
</html>
ENLAZAR CSS
Primera forma (no recomendada)
Se coloca style a una etiqueta y entre comillas se coloca el css con un punto y coma ; al final de cada instruccion
<!DOCTYPE html>
<html>
<head>
<title>ENLAZANDO CSS</title>
</head>
<body>
<h1>TITULO</h1>
<p style="color:red; font-size: 20px;">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate tempore sit quia itaque voluptatem veritatis
aspernatur est accusantium porro! Totam incidunt qui similique odit magni, iure id molestiae voluptate. Delectus!
</p>
</body>
</html>
Segunda forma (no recomendada)
Se coloca el CSS en una etiqueta style y dentro se especifica a que etiquetas afectara un css y su código entre corchetes
<!DOCTYPE html>
<html>
<head>
<title>ENLAZANDO CSS</title>
</head>
<body>
<h1>TITULO</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate tempore sit quia itaque voluptatem veritatis
aspernatur est accusantium porro! Totam incidunt qui similique odit magni, iure id molestiae voluptate. Delectus!
</p>
<style>
p{
color:red;
font-size: 20px;
}
h1{
color:blue;
}
</style>
</body>
</html>
Tecera forma (recomendada)
En el head añadir la línea link, donde rel=”stylesheet” indica el tipo de relación que tiene con el archivo, al indicar que el tipo de relación es stylesheet
indicamos que es una hoja de estilos. Seguido se coloca el href para especificar el nombre del archivo css.
<!DOCTYPE html>
<html>
<head>
<title>ENLAZANDO CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>TITULO</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate tempore sit quia itaque voluptatem veritatis
aspernatur est accusantium porro! Totam incidunt qui similique odit magni, iure id molestiae voluptate. Delectus!
</p>
</body>
</html>
styles.css
p{
color:red;
}
Curso CSS básico
Selectores
Son la forma que tenemos para seleccionar uno o varios elementos dentro de un documento HTML para poder modificar sus atributos.
En CSS se usa la siguiente estructura:
Selector{
atributos
}
Donde el selector son los elementos a los que modificaremos sus atributos. Ejemplo:
p{
color:red;
font-size: 20px;
}
Modificaremos el color y tamaño de todos los párrafos <p>
- Podemos crear un elemento con cualquier nombre en html y modificarlo en css, por ejemplo un nuevoElemento (esta es una mala practica, no se
recomienda crear nuestros propios elementos)
<!DOCTYPE html>
<html>
<head>
<title>ENLAZANDO CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>TITULO</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate tempore sit quia itaque voluptatem veritatis
aspernatur est accusantium porro! Totam incidunt qui similique odit magni, iure id molestiae voluptate. Delectus!
</p>
<nuevoElemento>Hola mundo mundial</nuevoElemento>
</body>
</html>
p{
color:red;
font-size: 20px;
}
nuevoElemento{
color:green;
font-size: 80px;
}
- Seleccionando un ul
<!DOCTYPE html>
<html>
<head>
<title>ENLAZANDO CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>INGREDIENTES</h1>
<ul>
<li>Harina</li>
<li>Aceite</li>
<li>Leche</li>
<li>Sal</li>
</ul>
</body>
</html>
/* styles.css */
li{
color:red;
Selecciona a todos los ul incluyendo a todos sus il
- El uso de la etiqueta span
Se utiliza para seleccionar cosas puntuales. En este ejemplo podemos observar como ahora el color red solo afecta a la letra aceite (no afecta al punto que lo
antecede)
<!DOCTYPE html>
<html>
<head>
<title>ENLAZANDO CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>INGREDIENTES</h1>
<ul>
<li>Harina</li>
<li><span>Aceite</span></li>
<li>Leche</li>
<li>Sal</li>
</ul>
</body>
</html>
/* styles.css */
span{
color:red;
}
Podemos aplicar el span a solo un par de palabras, no necesariamente a toda una etiqueta por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>ENLAZANDO CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>INGREDIENTES</h1>
<ul>
<li>Harina</li>
<li>Una taza de <span>Aceite de oliva</span> o vegetal</li>
<li>Leche</li>
<li>Sal</li>
</ul>
</body>
</html>
/* styles.css */
span{
color:red;
}
Clases class
Es como una plantilla, se puede colocar a cualquier etiqueta el mismo nombre de clase y en css colocando un punto “.” Detrás del nombre para indicar que
es una clase podemos modificar los atributos de todas las etiquetas que esten creadas con esa clase. En el siguiente ejemplo hay una clase llamada
nombreDeLaClase que se uso en 2 elementos li que muestran Harina y Sal. En el CSS se modifica el color de todos los elementos que son de esa clase a
azul.
<!DOCTYPE html>
<html>
<head>
<title>ENLAZANDO CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>INGREDIENTES</h1>
<ul>
<li class="nombreDeLaClase">Harina</li>
<li>Aceite</li>
<li>Leche</li>
<li class="nombreDeLaClase">Sal</li>
</ul>
</body>
</html>
/* styles.css */
.nombreDeLaClase{
color:blue;
}
Se debe tener cuidado al asignar un nombre a la clase, en el ejemplo anterior pudo llamarse ingrediente-faltante
Selectores por ID
<!DOCTYPE html>
<html>
<head>
<title>ENLAZANDO CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>INGREDIENTES</h1>
<ul>
<li class="nombreDeLaClase">Harina</li>
<li>Aceite</li>
<li>Leche</li>
<li class="nombreDeLaClase">Sal</li>
<li id="ingredienteSecreto">Tomate</li>
</ul>
</body>
</html>
/* styles.css */
.nombreDeLaClase{
color:blue;
}
#ingredienteSecreto{
color:red;
font-size: 30px;
}
Lo recomendado es colocar un ID a un único elemento. Se puede colocar el mismo ID a varios elementos y todos se verán afectados por los mismos
atributos que asignemos en el CSS, sin embargo esta práctica no es recomendada y tendremos problemas con JavaScript.
Propiedades de fuente y texto
Son propiedades que podemos darle a los textos.
color
Se pueden asignar por texto (red, blue, green, etc), hexadecimal y rgb.
No se recomienda asignar colores por texto como:
color: red;
debido a que no en todos los navegadores red será el mismo rojo.
Font-family
Es la tipografía o tipo de letra.
Se puede colocar la tipografía sin comillas cuando es una sola palabra:
font-family: georgia;
Pero cuando hay un espacio en medio (ósea tiene 2 palabras o más) es obligatorio colocar comillas simples:
font-family: 'Times New Roman';
font-family: 'console';
Se puede colocar varias tipografías, esto para que si la primera no carga la que le sigue cargue, si la segunda no carga cargará la tercera. La primera
tipografía es la de la izquierda y la ultima de la derecha. Ejemplo con 4 tipografías.
font-family: Georgia, 'Times New Roman', Times, serif;
Font-size
Es el tamaño de texto. Por defecto en la mayoría de navegadores es de 16px.
Se pueden medir en:
- Pixeles
- Nm (no se si se escriba asi)
- Rems (no se si se escriba asi)
- Porcentajes
font-size: 13px;
Font-weight
Es el grosor de las palabras.
- Se puede colocar un valor numérico. (mientras mas pequeño el numero es mas delgado, mientras mas grande mas grueso), el creador de la
tipografía define cuantos valores posibles hay, puede que solo cree 2 o 3 por ejemplo una apariencia para los valores menores a 500 y otra para los
valores mayores o iguales a 500. No todos los valores afectan la apariencia, puede que un 100 sea exactamente lo mismo que un 400.
font-weight: 900;
- Se puede colocar un valor ya predefinido como bold para colocar en negrita.
font-weight: bold;
bold = 700 en valor numerico.
bolder=ir un escalon (real) que el valor por defecto.
Tambien podemos poner en negrita desde html con <b>palabras </b> o con <strong>palabras</strong>. Sin embargo nunca es recomendado usar <b> o el
SEO nos penalizara, <strong> se puede usar sin que nos afecte el SEO.
Font-style
- Colocar en cursiva ósea inclinada
font-style: italic;
- Colocar en cursiva semi-inclinada (algunas tipografías solo tienen una inclinación y no hay diferencia entre italic y oblicue)
font-style: oblicue;
- Colocar en normal, como esta por defecto 90 grados. No tiene sentido colocarlo, pues ya esta por defecto.
font-style: normal;
Text-align
Para ubicar el texto hacia la izquierda, hacia la derecha o hacia el centro. Alinea respecto al cuadro donde se encuentra el texto.
text-align: right;
text-align: left;
text-align: center;
text-align: justify;
Justify hace que mientras se pueda llegue al final de la línea (similar a Word dice).
Text-decoration
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
Para ningun subrayado (se usa por ejemplo para los enlaces que por defecto tienen subrayado):
text-decoration: none;
Se pueden combinar varias líneas en este atributo, ósea por ejemplo combinar línea por debajo como por arriba con: underline overline
text-decoration: underline overline;
Line-height
Es el espaciado entre líneas. El valor por defecto es normal (para que el navegador decida).
line-height: normal;
Se pueden asignar valores numéricos. El valor 1 es para indicar que sea del mismo tamaño de la tipografía.
line-height: 2.5;
También se puede colocar en porcentaje. Se pueden poner valores menores o hasta mayores a 100%. Por ejm para colocar el 80% de una línea:
line-height: 80%;
Letter-spacing
Es la separación entre letras. Suele ser usado en botones.
letter-spacing: 2px;
Text-transform
Colocar en mayúsculas o minúsculas.
Por defecto (para que este como lo escribimos en el HTML) se coloca:
text-transform: none;
Para colocar en mayúscula
text-transform: uppercase;
Para colocar en minúscula
text-transform: uppercase;
Colocar las primeras letras de cada palabra en mayúscula.
text-transform: capitalize;
Box model (modelo de caja)
Todo en HTML es como una caja rectangular. Esta caja tiene los siguiente componentes:
Content: Es el núcleo de la caja, es el área donde se muestra el texto o imagen.
Padding: Relleno o espacio entre el contenido y el border de la caja.
Border: Es la línea que esta alrededor del padding, dentro contiene al contenido y al padding. Se puede controlar el estilo, grosor y color de este
borde.
Margin: Espacio alrededor de la caja que esta fuera del borde, este espacio separa la caja de otras cajas.
