Este es un sencillo esqueleto de archivo html que puedes utilizar para
comenzar un proyecto. Para obtener información sobre etiquetas específicas, consulta más abajo.
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<!--Dentro de la etiqueta body es donde pones todas las cosas chulas
que quieras en tu página!-->
</body>
</html>
La declaración !DOCTYPE debe ser lo primero
en tu documento html. No es una etiqueta html, sino una instrucción para el navegador
la versión de HTML en la que está escrita la página.
La etiqueta html indica al navegador que se trata de un documento html.
El elemento head es un contenedor para todos los elementos head
que pueden incluir un título para un documento, scripts, estilos,
etc. La etiqueta title define el título de la página.
El elemento body contiene todo el contenido de un documento HTML,
como texto, hipervínculos, imágenes, tablas y listas.
Etiquetas
Las etiquetas HTML son palabras clave que definen cómo el navegador debe formatear y
mostrar el contenido.
A basic HTML element starts like this:
<tag>
It starts with an opening tag and ends with a closing tag.
The closing tag has the same name as the opening tag, but with a /
Everything inside should be indented one level.
</tag>
Atributos HTML
Se pueden añadir atributos a cualquier etiqueta para añadir más información sobre ella.
El formato general para añadir un atributo y un valor para el atributo es:
Las etiquetas <h1> a <h6>
se utilizan para definir encabezados HTML.
<h1> define el encabezado
encabezamiento más importante.
<h6> define el encabezamiento menos importante.
encabezado menos importante.
La etiqueta <p> define
un párrafo.
La etiqueta <em> muestra el texto
en cursiva.
La etiqueta <strong> muestra el texto
en negrita.
Ejemplo HTML:
<p>
This is a paragraph where <em>this will display in italics</em>
and <strong>this will display in bold</strong>.
</p>
Ejemplo de resultado:
This is a paragraph where this will display in italics
and this will display in bold.
Etiquetas semánticas
Las siguientes etiquetas semánticas definen la estructura de una página HTML5:
<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>
La etiqueta <strong> define
texto fuertemente importante.
La etiqueta <em> enfatiza el texto.
La etiqueta <mark> resalta el texto.
Ejemplo HTML:
<p>
This is text that is <strong>important</strong>.
<br>
This is text that needs <em>emphasized</em>.
<br>
This is text that needs <mark>highlighted</mark>.
</p>
Ejemplo Resultado:
This is text that is important.
This is text that needs emphasized.
This is text that needs highlighted.
Líneas horizontales
La etiqueta <hr<> define una ruptura temática con una regla horizontal.
Ejemplo HTML:
<p>
This is a section about a certain theme.
</p>
<hr>
<p>
This is a section about another theme separated from the previous section
by a horizontal line that implies a thematic break in content.
</p>
Ejemplo Resultado:
This is a section about a certain theme.
This is a section about another theme separated from the previous section
by a horizontal line that implies a thematic break in content.
Salto de línea
La etiqueta <br> introduce un salto de línea simple (sin línea horizontal).
Ejemplo de HTML:
<p>
This is a section about a certain theme.
</p>
<br>
<p>
This is another section that starts on a new line.
</p>
Ejemplo Resultado:
This is a section about a certain theme.
This is another section that starts on a new line.
Enlaces
La etiqueta <a> crea
un hipervínculo que se utiliza para enlazar de una página
a otra.
El atributo href indica el destino del enlace.
La etiqueta <img> define
una imagen en una página HTML.
El atributo src indica de dónde procede la imagen y puede ser
una ruta de directorio a una foto guardada en tu ordenador o la url de una imagen en
Internet, como en el ejemplo siguiente. También puedes subir tus propias fotos a CodeHS para utilizarlas en tu programa. Consulta las instrucciones para hacerlo
¡aquí!
El atributo alt especifica el texto alternativo que se mostrará si la imagen
no puede cargarse.
Los atributos width y height especifican la anchura y la altura de la imagen.
Ejemplo HTML:
<img src = "https://codehs.com/static/img/logo.png" alt="Image not found" width="50px" height="50px">
Ejemplo Resultado:
Listas
La etiqueta <ul> define una lista desordenada (viñetas)
La etiqueta <ol> define una lista ordenada (lista numerada)
La etiqueta <li> define un único elemento de lista dentro de una lista
La etiqueta <table>
define un elemento de tabla que puede contener varias filas de tabla individuales.
La etiqueta <thead>
agrupa la información de cabecera de la tabla.
La etiqueta <tbody>
agrupa la información del cuerpo de la tabla.
La etiqueta <tr>.
define una única fila de la tabla. El elemento tr puede contener varias celdas de información.
La etiqueta <th> define una cabecera de tabla.
define una cabecera de tabla. Las etiquetas th se suelen utilizar en la primera fila de la tabla para
mostrar las cabeceras de cada columna.
La etiqueta <td>
define un elemento de datos de tabla, una única celda de información. Los elementos td van dentro
de una fila de tabla.
El atributo borde define el grosor del borde de la tabla (por defecto es sin borde)
La etiqueta de comentario se utiliza para insertar notas útiles en el código HTML. Los comentarios
no se muestran en la página web resultante, sólo están ahí para el lector del código.
Utilizar comentarios en tu código puede ayudarte a mantener un código limpio, claro y comprensible.
<!-- Tu comentario va aquí. -->
<!-- Esta sección de la página web enlaza con otras partes del sitio -->
<a href="about.html">About</a>
<a href="home.html">Home</a>
Incorporación de iframes
La etiqueta <iframe> incrusta
una página HTML dentro de otra página HTML. Suelen utilizarse para insertar contenido de otra fuente,
como tweets, vídeos o anuncios.
El atributo src indica de dónde procede la página HTML y es la url de una página HTML en
Internet, como en el ejemplo siguiente.
Los atributos anchura y altura especifican la anchura y la altura de la ventana iframe.
El atributo style de un elemento te permite aplicar estilo a ese único elemento.
El formato para el atributo style es:
<tagname style="property: value;">
Puedes añadir varios estilos a un mismo elemento:
style="property1: value1; property2: value2;"
Ejemplo HTML:
<h3 style="background-color:LightBlue;">My Journal</h3>
<p style="background-color:LightYellow; font-size:15px;">Today I walked my puppy at the park and made my own website.</p>
Ejemplo Resultado:
My Journal
Today I walked my puppy at the park and made my own website.
Para obtener una lista completa de las propiedades y valores que se pueden utilizar, ve a Propiedades CSS.
Añadir CSS a una página HTML
En lugar de añadir un atributo de estilo a cada elemento, podemos utilizar código CSS para seleccionar y
varios elementos a la vez.
El código CSS va dentro de la etiqueta <style> que va en el elemento <head>.
El estilo está separado del contenido de la página. Como son metadatos sobre el contenido, deben estar en el encabezamiento.
Ejemplo:
<head>
<title>Your Page Title</title>
<style>
/*
* This will select all h1 elements
* and give them a font size of 30px
* and a color of red.
*/
h1 {
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<h1>CodeHS</h1>
</body>
Resultado:
CodeHS
Añadir CSS externo
En lugar de poner todas nuestras reglas CSS en una etiqueta style,
también es posible añadir código CSS escrito en un archivo
separado. El archivo debe ser un archivo .css, como my_style.css
El archivo CSS externo debe añadirse a la página mediante una etiqueta <link> en el <head> de la página HTML.
/*
* Esto seleccionará todos los elementos h1
* y les dará un tamaño de fuente de 30px
* y un color rojo.
*/
h1 {
font-size: 30px;
color: red;
}
Resultado:
CodeHS
Sintaxis CSS
En CSS, el selector define a qué elementos HTML se aplica la regla CSS.
Las declaraciones CSS están dentro de llaves y definen el estilo.
Las propiedades son los elementos a los que se aplica el estilo y el valor de una propiedad
es cómo se aplica el estilo a la característica.
/* Formato general */
selector {
property: value;
property: value;
}
/*
* En esta regla CSS, h1 es el selector, y cada línea
* dentro de las llaves es una declaración CSS.
*
* Esta regla seleccionará todos los elementos h1, establecerá su propiedad font-size
* a 60px, y su propiedad color a rojo.
*/
h1 {
font-size: 60px;
color: red;
}
Para obtener una lista completa de las propiedades y valores que se pueden utilizar, ve a Propiedades CSS.
Comentarios CSS
Es importante añadir comentarios a tu código CSS para explicar al lector
qué hace cada regla. Los comentarios son ignorados por el navegador cuando la página
página. Los comentarios están ahí para ayudar al lector del código a entender lo que
está pasando.
Un comentario CSS empieza por /* y termina por */.
Ejemplo:
h1 {
/* Esto es un comentario de una sola línea */
color: red;
}
/*
* Este es un comentario multilínea que
* abarca varias líneas
*/
h2 {
color: green;
}
Selección por etiqueta
Podemos seleccionar elementos html para aplicarles estilo por su etiqueta.
Si usamos una etiqueta como selector, se seleccionan todos los elementos con esa etiqueta.
/*
* Esta regla CSS seleccionará todas las imágenes
* y su altura se fijará en 200 píxeles
*/
img {
height: 200px;
}
Selección por clase
La clase es un atributo que podemos añadir a las etiquetas html para dar estilo a un grupo de elementos.
Si utilizamos una clase como selector, se seleccionan todos los elementos que comparten esa clase.
El estilo de clase prevalece sobre el estilo de etiqueta en caso de conflicto. En otras palabras, si una regla de selección por etiqueta dice que el elemento debe ser rojo, y una regla de selección por clase dice que el mismo elemento debe ser verde, la regla de clase prevalece y el elemento será verde.
Puedes añadir una clase a una etiqueta de la siguiente manera:
<tag class="class-name"></tag>
Puedes añadir varias clases a una etiqueta separando los nombres de las clases con espacios:
<tag class="class1 class2 class3"></tag>
Nombres de clase
No pueden empezar por un número
Deben ir todos en minúsculas
Debe usar guiones (-) entre las palabras, por ejemplo, "class-name"
Debe ser descriptivo
Para seleccionar todos los elementos con la misma clase, el selector CSS debe tener un punto seguido del nombre de la clase: .class-name
Ejemplo:
<head>
<title>Your Page Title</title>
<style>
/*
* Esta regla se aplicará a todos los elementos con
* la clase "alerta
*/
.alert {
color: red;
}
/*
* Esta regla sólo se aplicará a los elementos <h1>.
* con la clase "alert"
*/
h1.alert {
font-size: 20px;
}
/*
* Esta regla se aplicará a todos los elementos con la clase
* clase "morning-greeting"
*/
.morning-greeting {
background-color: LightYellow;
}
</style>
</head>
<body>
<h1 class="alert morning-greeting">Good Morning!</h1>
<p class="alert">Hi!</p>
</body>
Resultado:
Good Morning!
Hi!
Selección por ID
id es un atributo que podemos añadir a una etiqueta HTML para dar estilo a ese elemento concreto.
Un elemento sólo puede tener un id y el id de un elemento debe ser único.
Sólo debe haber una etiqueta con un id determinado en cualquier página web.
Si utilizas el ID como selector, seleccionarás el único elemento que tenga ese ID.
El estilo id prevalece sobre el estilo etiqueta y el estilo clase en caso de conflicto. En otras palabras, si una regla de selección por etiqueta dice que el elemento debe ser rojo, y una regla de selección por clase dice que el mismo elemento debe ser verde, y una regla de selección por id dice que el mismo elemento debe ser amarillo, la regla id prevalece y el elemento será amarillo.
Puedes añadir un id a una etiqueta de la siguiente manera:
<tag id="id-name"></tag>
nombres id:
No pueden empezar por un número
Deben ir en minúsculas
Debe usar guiones entre las palabras, es decir, "id-name"
Debe ser descriptivo
Para seleccionar un elemento con un id específico, el selector CSS debe tener un hashtag seguido del nombre del id: #id-name
Ejemplo:
<head>
<title>Your Page Title</title>
<style>
/*
* Esta regla se aplicará al elemento único
* con el id "logo"
*/
#logo {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<h1 id="logo">CodeHS</h1>
</body>
Resultado:
CodeHS
Divs
Los divs se utilizan para agrupar varios elementos HTML diferentes en un solo bloque. Un div crea un nuevo bloque de elementos, un bloque siempre empieza en una nueva línea y ocupa todo el ancho disponible en su contenedor.
Agrupar elementos en un div nos permite dar estilo a ese bloque como una unidad.
Ejemplo de HTML:
<div id="block-one">
<h3>Welcome</h3>
<p>Welcome to my web page.</p>
</div>
<div id="block-two">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
Los espacios se utilizan para agrupar trozos más pequeños de código HTML en línea. Los espacios no crean un nuevo bloque, sino que se suelen utilizar para añadir estilo a un pequeño trozo de HTML dentro de una línea (como una línea en un párrafo).
Ejemplo de HTML:
<p>This is a <span class="big">paragraph</span> of <span class="small">text</span></p>
Esta sección cubre algunas de las propiedades y valores CSS más utilizados. Para obtener una lista completa de las posibles propiedades y valores CSS, visita W3 Schools.
Color
Los Colores CSS pueden ser:
Un nombre de color válido, como "Blue" o "DarkGreen"
Un valor RGB, como "rgb(255, 0, 0)"
Un código de color HEX, como "#68ff00"
Nombres de colores
Nombres de colores comunes:
red
orange
yellow
green
blue
cyan
indigo
black
white
Los nombres no distinguen entre mayúsculas y minúsculas. "RED" es lo mismo que "red".
Hay 140 nombres de color válidos. Consulta una lista completa de todos los nombres aquí
Ejemplo:
p {
color: blue;
}
Resultado:
Hello
Colores RGB
HTML y CSS representan los colores con el sistema de codificación de colores RGB (Red Green Blue).
Cada color se puede hacer simplemente mezclando diferentes cantidades de rojo, verde y azul.
Los valores de color RGB se pueden especificar en CSS utilizando "rgb(red, green, blue)"
Cada valor puede estar entre 0 y 255, ambos inclusive.
rgb(255, 0, 0) sería rojo
rgb(255, 255, 255) sería el blanco
rgb(0, 0, 0) sería negro
.
Ejemplo:
p {
color: rgb(255, 0, 0);
}
Resultado:
Hola
Valores hexadecimales del color
También podemos representar los colores RGB mediante valores hexadecimales. 6 dígitos hexadecimales componen un color:
Los dos primeros dígitos hexadecimales especifican la cantidad de ROJO en el color
Los dos dígitos hexadecimales siguientes especifican la cantidad de VERDE en el color
Los dos últimos dígitos hexadecimales especifican la cantidad de AZUL en el color
Cada dígito puede ser un valor de 0 a F, siendo 0 el menor y F el mayor
"#ff0000" sería rojo
"#ffffff" sería blanco
"#000000" sería negro
Ejemplo:
p {
color: #0000ff;
}
Resultado:
Hola
Seleccionador de colores
Utiliza este selector de color para encontrar el color exacto que deseas para tu página web:
Texto y fuente
color: color del texto en el elemento HTML seleccionado
font-size: tamaño de la fuente (por ejemplo, 30px)
font-family: familia de fuente (por ejemplo, Arial or Times)
font-style: estilo de fuente (por ejemplo, cursiva o normal)
font-weight: grosor de la fuente (negrita o negrita, o un valor de 100 a 900)
text-align: establece la alineación horizontal del texto (centro, izquierda, derecha)
Para obtener una lista completa de posibles propiedades y valores CSS, visita W3 Schools
Fondo
background-color: color de fondo del elemento HTML seleccionado
background-image: especifica una o más imágenes de fondo
background-repeat: establece cuántas veces se repetirá la imagen de fondo
<head>
<title>Your Page Title</title>
<style>
body {
background-image: url("sandpaper.gif");
}
</style>
</head>
<body>
<h1>Welcome to my blog!</h1>
</body>
Para obtener una lista completa de posibles propiedades y valores CSS, visita W3 Schools
Borde
¡Las propiedades de borde nos permiten crear bordes alrededor de cualquier elemento HTML!
border-color: establece el color del borde para los cuatro lados del borde
border-width: establece la anchura del borde para los cuatro lados del borde
border-style: establece el estilo del borde para los cuatro lados del borde (sólido, punteado, discontinuo, doble)
border-size: establece el tamaño del borde para los cuatro lados del borde
border-right-color: establece el color del borde derecho
border-right-width: establece el ancho del borde derecho
border-right-style: establece el estilo del borde derecho (sólido, punteado, discontinuo, doble)
border-right-size: establece el tamaño del borde derecho
border-left-color: establece el color del borde izquierdo
border-left-width: establece el ancho del borde izquierdo
border-left-style: establece el estilo del borde izquierdo (sólido, punteado, discontinuo, doble)
border-left-size: establece el tamaño del borde izquierdo
border-top-color: establece el color del borde superior
border-top-width: establece el ancho del borde superior
border-top-style: establece el estilo del borde superior (sólido, punteado, discontinuo, doble)
border-top-size: establece el tamaño del borde superior
border-bottom-color: establece el color del borde inferior
border-bottom-width: establece el ancho del borde inferior
border-bottom-style: establece el estilo del borde inferior (sólido, punteado, discontinuo, doble)
border-bottom-size: establece el tamaño del borde inferior
Para obtener una lista completa de posibles propiedades y valores CSS, visita W3 Schools
Margen
El margen es la cantidad de espacio entre un elemento y los elementos que lo rodean. El margen se establece con un valor de píxeles, pero también se puede establecer en automático.
Establecer el margen en automático centra el elemento dentro de su contenedor.
margin: abreviatura para establecer el margen superior, derecho, inferior e izquierdo (en ese orden)
margin-top: establece el margen para la parte superior del contenedor
margin-right: establece el margen para la derecha del contenedor
margen inferior
margin-bottom: establece el margen para la parte inferior del contenedor
margen izquierdo
margin-left: establece el margen para la izquierda del contenedor
<head>
<title>Your Page Title</title>
<style>
h1 {
margin: auto;
}
p {
margin: 10px 20px 10px 20px;
}
</style>
</head>
<body>
<h1>Welcome to my blog!</h1>
<p>Here I will write about my life and adventures.</p>
</body>
Para obtener una lista completa de posibles propiedades y valores CSS, visita W3 Schools
Relleno
El relleno es la cantidad de espacio entre el contenido del elemento y el borde del elemento. El relleno se establece con un valor de píxeles.
A diferencia del margen, no se puede establecer en automático.
padding: abreviatura para establecer el relleno superior, derecho, inferior e izquierdo (en ese orden)
padding-top: establece el relleno para la parte superior del contenedor.
padding-right: establece el relleno para la parte derecha del contenedor.
padding-bottom: establece el relleno para la parte inferior del contenedor
padding-left: establece el relleno para la izquierda del contenedor
<head>
<title>Your Page Title</title>
<style>
h1 {
margin: auto;
padding-top: 15px;
padding-bottom: 15 px;
}
p {
margin: 10px 20px 10px 20px;
}
</style>
</head>
<body>
<h1>Welcome to my blog!</h1>
<p>Here I will write about my life and adventures.</p>
</body>
Para obtener una lista completa de las posibles propiedades y valores CSS, visita W3 Schools
Transformar
La propiedad transformar establece una transformación 2D or 3D en un elemento. Esto puede sesgar, rotar, trasladar o escalar un elemento web.
transform: skew(x, y) sesga un elemento a lo largo del eje x, del eje y, o de ambos.
transform: scale(x, y) escala un elemento a lo largo del eje x, del eje y, o de ambos.
transform: rotate(angle in degrees) gira un elemento en función de un parámetro angular
transform: translate(x, y) traslada o reposiciona un elemento a lo largo del eje x, y, o ambos
Para obtener una lista completa de posibles propiedades y valores CSS, visita W3 Schools
Bootstrap
Básicos de Bootstrap
Bootstrap es una biblioteca gratuita para crear páginas web profesionales, adaptables y móviles. Bootstrap proporciona varios componentes HTML prefabricados y clases CSS que puedes utilizar para que tus páginas tengan un aspecto limpio y profesional en todos los dispositivos.
Añadir Bootstrap
Para añadir Bootstrap a tu página web, sólo tienes que añadir unas cuantas etiquetas al elemento head para importar el código CSS y JavaScript de Bootstrap.
Aquí tienes la plantilla inicial para una página Bootstrap:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS de Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- CSS de los iconos de Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<!-- JavaScript de Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<!-- Tu código HTML aquí&>
</body>
</html>
