html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
para párrafos, para imágenes, ">
Anatomía de Un Documento HTML
Anatomía de Un Documento HTML
Anatomía de Un Documento HTML
Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son
muy útiles por sí solos. Ahora verás cómo los elementos individuales son combinados
para formar una página HTML entera. Vuelve a visitar el código de tu ejemplo
en index.html (que viste por primera vez en el artículo Manejo de archivos):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi pagina de prueba</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="Mi imagen de prueba">
</body>
</html>
Tienes:
Imágenes
Presta atención nuevamente al elemento imagen <img>:
Marcado de texto
Encabezados
Los elementos de encabezado permiten especificar que ciertas partes del contenido
son encabezados, o subencabezados del contenido. De la misma forma que un libro
tiene un título principal, y que a su vez puede tener títulos por cada capítulo
individual, y subtítulos dentro de ellos, un documento HTML puede tenerlos también.
HTML posee seis niveles de encabezados, <h1> (en-US)–<h6> (en-US), aunque
probablemente solo llegues a usar 3-4 como mucho:
Párrafos
Como se explicó más arriba, los elementos <p> se utilizan para encerrar párrafos de
texto; los usarás frecuentemente para el marcado de contenido de texto regular:
Listas
Mucho del contenido web está dado por listas, así que HTML tiene elementos
especiales para ellas. El marcado de listas se realiza siempre en al menos dos
elementos. Los dos tipos de listas más comunes son las listas ordenadas y las
desordenadas:
Por ejemplo, si quieres transformar parte del siguiente párrafo en una lista:
<p>En Mozilla, somos una comunidad de tecnólogos, pensadores, y constructores que trabajan
juntos... </p>
Vínculos
Los vínculos o enlaces son muy importantes —son los que hacen de la web, la web—.
Para implementar un vínculo, necesitas usar un vínculo simple — <a> — la a es la
abreviatura de la palabra inglesa «anchor» («ancla»). Para convertir algún texto dentro
de un párrafo en un vínculo, sigue estos pasos:
<a>Manifesto Mozilla</a>
Completa el valor de este atributo con la dirección web con la que quieras
conectar al vínculo:
<ahref="https://www.mozilla.org/esAR/about/manifesto/">Manifesto
Mozilla</a>
CSS básico
Entonces ¿qué es CSS, realmente?
Como HTML, CSS (Cascading Style Sheets) u Hojas de estilo en cascada en español,
no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado. Es
un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a
elementos en documentos HTML. Por ejemplo, para seleccionar todos los elementos
de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de
escribir este CSS:
p{
color: red;
}
Selector
Declaración
Propiedades
Maneras en las cuales puedes dar estilo a un elemento HTML. (En este
caso, color es una propiedad del elemento <p> ). En CSS, seleccionas qué propiedad
quieres afectar en tu regla.
Valor de la propiedad
Cada una de las reglas (aparte del selector) deben estar encapsuladas entre
llaves ({}).
Dentro de cada declaración, debes usar los dos puntos (:) para separar la
propiedad de su valor.
Dentro de cada regla, debes usar el punto y coma (;) para separar una
declaración de la siguiente.
De este modo para modificar varios valores de propiedad a la vez, solo necesitas
escribirlos separados por punto y coma (;), así:
p{
color: red;
width: 500px;
border: 1px solid black;
}
También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos.
Incluye varios selectores separados por comas (,). Por ejemplo:
p,li,h1 {
color: red;
}
Tipos de selectores
Hay diferentes agrupaciones de selectores, y conocer qué tipo de selector necesitas te
ayudará a encontrar la herramienta adecuada para tu trabajo. En estos subartículos
vamos a ver los diferentes grupos de selectores con más detalle.
Este grupo incluye selectores que delimitan un elemento HTML, como por ejemplo
un <h1>.
h1 { }
.box { }
o un ID: #unique { }
Selectores de atributo
a[title] { }
O incluso hacer una selección basada en la presencia de un atributo que tiene un valor
particular asignado:
a[href="https://example.com"] { }
Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de
un elemento. La pseudoclase :hover, por ejemplo, selecciona un elemento solo cuando
se le pasa el ratón por encima.
a: hover {}
p::first-line { }
Combinadores
article > p { }
Operadores de combinación
Operadores de combinación descendentes article p
descendentes
Operadores de combinación de
Operador de combinación de elementos hijo article > p
elementos hijo
Operador de combinación de elementos
h1 + p Hermanos adyacentes
hermanos adyacentes
Operador de combinación general de
h1 ~ p Hermanos generales
elementos hermanos
Fuentes y texto
1.- Antes que nada, regresa y busca las fuentes de Google Fonts que guardaste en un
lugar seguro. Agrega el elemento <link>... en algún lugar del head de tu
archivo index.html (de nuevo, en cualquier lugar entre las
etiquetas <head> y </head>). Debe verse algo así:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans"
rel="stylesheet" type="text/css">
2.-Luego, borra la regla existente en tu archivo style.css. Fue una buena prueba, pero
el texto en rojo en realidad no se ve muy bien.
Esta regla define una fuente base global y un tamaño de fuente para usar en toda la
página. Dado que <html> es el elemento primario (o padre) de toda la página, todos
los elementos contenidos dentro de él heredan las propiedades font-size y font-
family):
html {
font-size: 10px; /* px quiere decir 'píxeles': el tamaño de la fuente base es
ahora de 10 píxeles de altura */
font-family: "Open Sans", sans-serif; /* Este debe ser el resto del resultado
que obtuviste de Google fonts */
}
Ahora escoge el tamaño de fuente para los elementos que contienen texto dentro del
cuerpo del HTML (<h1> (en-US), <li>, y <p>). También centra el texto del título,
escoge un ancho de línea y espaciado entre letras en el contenido del texto para
hacerlo un poco más legible:
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
Una cosa que notarás sobre la escritura de CSS es que trata mucho sobre cajas —
ajustando su tamaño, color, posición, etc—. Puedes pensar en la mayoría de los
elementos HTML de tu página como cajas apiladas una sobre la otra.
html {
background-color: #00539F;
}
Esta regla asigna un color de fondo a la página entera. Puedes cambiar el código de
color por cualquiera como el que elegiste usar en tu proyecto.
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
width: 600px; — esto hará que el cuerpo siempre tenga 600 píxeles de ancho.
margin: 0 auto; — cuando seleccionas dos valores dentro de propiedades
como margin o padding, el primer valor afectará los lados superior
(top) e inferior (bottom) (en este caso haciéndolo en 0), y el segundo valor los
lados izquierdo (left) y derecho (right) (aquí, auto es un valor especial que
divide el espacio disponible entre derecha e izquierda). Puedes usar esta
propiedad con uno, dos, tres o cuatro valores como se explica en la sintaxis de
padding.
background-color: #FF9500; — como antes, este selecciona el color de
fondo de un elemento. Se ha usado un naranja rojizo para el elemento body en
contraste con el azul oscuro del elemento <html>. Sigue y experimenta.
Siéntete libre de usar white o cualquiera que sea de tu agrado.
padding: 0 20px 20px 20px; — tienes 4 valores puestos en el relleno, para dar
un poco de espacio alrededor del contenido. Esta vez no pondrás relleno en la
parte de arriba de body, 20 píxeles a la izquierda, abajo y derecha. Los valores
se ponen: arriba, derecha, abajo e izquierda, en ese orden. Como
con margin usar esta propiedad con uno, dos, tres o cuatro valores como se
explica en la sintaxis de padding.
border: 5px solid black; — este simplemente pone un borde de 5 píxeles de
ancho, continuo y de color negro alrededor del elemento body.
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
Puedes haber notado que hay un hueco horrible en la parte superior de body. Esto
sucede porque los navegadores vienen con estilos por defecto, ¡incluso cuando aún no
se ha aplicado ningún archivo CSS! Esto podría parecer una mala idea, pero se quiere
que aun una página sin estilizar sea legible. Para deshacerte de este espacio elimina el
estilo por defecto, agregando margin: 0;.
Una propiedad muy interesante que se ha usado aquí es text-shadow, que aplica una
sombra al texto del elemento. Sus cuatro valores son como sigue:
Centrar la imagen
img {
display: block;
margin: 0 auto;
}
Finalmente, centra la imagen para hacer que luzca mejor. Puedes usar nuevamente el
truco de margin: 0 auto que usaste antes para body, pero existen diferencias que
requieren que hagas algo más para que el código CSS funcione.
Fundamentos de JavaScript
JavaScript es el lenguaje de programación que debes usar para añadir características
interactivas a tu sitio web, (por ejemplo, juegos, eventos que ocurren cuando los
botones son presionados o los datos son introducidos en los formularios, efectos de
estilo dinámicos, animación, y mucho más). Este artículo te ayudará a comenzar con
este lenguaje extraordinario y te dará una idea de qué es posible hacer con él.
Puedes hacer casi cualquier cosa con JavaScript. Puedes empezar con pequeñas cosas
como carruseles, galerías de imágenes, diseños fluctuantes, y respuestas a las
pulsaciones de botones. Con más experiencia, serás capaz de crear juegos,
animaciones 2D y gráficos 3D, aplicaciones integradas basadas en bases de datos ¡y
mucho más!
JavaScript por sí solo es bastante compacto aunque muy flexible, y los desarrolladores
han escrito gran cantidad de herramientas encima del núcleo del lenguaje JavaScript,
desbloqueando una gran cantidad de funcionalidad adicional con un mínimo esfuerzo.
Esto incluye:
Interfaces de Programación de Aplicaciones del Navegador (APIs) — APIs
construidas dentro de los navegadores que ofrecen funcionalidades como crear
dinámicamente contenido HTML y establecer estilos CSS, hasta capturar y
manipular un vídeo desde la cámara web del usuario, o generar gráficos 3D y
muestras de sonido.
APIs de terceros, que permiten a los desarrolladores incorporar
funcionalidades en sus sitios de otros proveedores de contenidos como Twitter
o Facebook.
Marcos de trabajo y librerías de terceros que puedes aplicar a tu HTML para
que puedas construir y publicar rápidamente sitios y aplicaciones.
Ya que se supone que este artículo es solo una introducción ligera a JavaScript, la
intención no es confundirte en esta etapa hablando en detalle sobre cuál es la
diferencia entre el núcleo del lenguaje JavaScript y las diferentes herramientas
listadas arriba. Puedes aprender todo eso en detalle más tarde, en el Área de
Aprendizaje en MDN, y en el resto de MDN.
Debajo se presentan algunos aspectos del núcleo del lenguaje y también jugarás con
unas pocas características de la API del navegador. ¡Diviértete!
<script src="scripts/main.js"></script>
¿Qué ha ocurrido?
El texto del título ha sido cambiado por ¡Hola mundo! usando JavaScript. Hiciste esto
primero usando la función querySelector() para obtener una referencia al título y
almacenarla en una variable llamada miTitulo. Esto es muy similar a lo que hiciste
con CSS usando selectores —quieres hacer algo con un elemento, así que tienes que
seleccionarlo primero—.
Variables
let nombreDeLaVariable;
Nota: todas las líneas en JS deben acabar en punto y coma (;) para indicar que es ahí
donde termina la declaración. Si no los incluyes puedes obtener resultados
inesperados. Sin embargo, algunas personas creen que es una buena práctica tener
punto y coma al final de cada declaración. Hay otras reglas para cuando se debe y
no se debe usar punto y coma. Para más detalles, vea Guía del punto y coma en
JavaScript (en inglés).
Nota: puedes llamar a una variable con casi cualquier nombre, pero hay algunas
restricciones (ver este artículo sobre las reglas existentes). Si no estás seguro,
puedes comprobar el nombre de la variable para ver si es válido.
Nota: JavaScript distingue entre mayúsculas y minúsculas. miVariable es una
variable distinta a mivariable. Si estás teniendo problemas en tu código, revisa las
mayúsculas y minúsculas.
nombreDeLaVariable = 'Bob';
nombreDeLaVariable;
Operadores
Símbolo(s
Operador Explicación Ejemplo
)
Se usa para sumar dos
6 + 9;
Suma/concatena números, o juntar dos +
"Hola " + "mundo!";
cadenas en una.
9 - 3;
Resta, Estos hacen lo que 8 * 2; // La
multiplicación, esperarías que hicieran en -, *, / multiplicación en JS
división las matemáticas básicas. es un asterisco
9 / 3;
Los has visto anteriormente:
Operador de
asigna un valor a una = let miVariable = 'Bob';
asignación
variable.
Comprueba si dos valores
son iguales entre sí, y let miVariable = 3;
identidad/igualdad ===
devuelve un valor miVariable === 4;
de true/false (booleano).
La expresión básica
es true, pero la
comparación
devuelve false porque
lo hemos negado:
let miVariable = 3;
Símbolo(s
Operador Explicación Ejemplo
)
miVariable !== 3;
Condicionales
Las condicionales son estructuras de código que permiten comprobar si una expresión
devuelve true o no, y después ejecuta un código diferente dependiendo del resultado.
La forma de condicional más común es la llamada if... else. Entonces, por ejemplo:
La expresión dentro de if (... ) es el criterio — este usa al operador de identidad
(descrito arriba) para comparar la variable helado con la cadena chocolate para ver si las
dos son iguales. Si esta comparación devuelve true, el primer bloque de código se
ejecuta. Si no, ese código se omite y se ejecuta el segundo bloque de código después
de la declaración else.
Funciones
alert('¡Hola!');
Si ves algo que parece un nombre de variable, pero tiene paréntesis —()— al final,
probablemente es una función. Las funciones con frecuencia toman argumentos —
pedazos de datos que necesitan para hacer su trabajo—. Estos se colocan dentro de los
paréntesis, y se separan con comas si hay más de uno.
Las buenas noticias son que podemos definir nuestras propias funciones —en el
siguiente ejemplo escribimos una función simple que toma dos números como
argumentos y los multiplica entre sí—:
function multiplica(num1,num2) {
let resultado = num1 * num2;
return resultado;
}
Eventos
Para crear una interacción real en tu sitio web, debes usar eventos. Estos son unas
estructuras de código que captan lo que sucede en el navegador, y permite que en
respuesta a las acciones que suceden se ejecute un código. El ejemplo más obvio es un
clic (click event), que se activa al hacer clic sobre algo. Para demostrar esto, prueba
ingresando lo siguiente en tu consola, luego da clic sobre la página actual:
document.querySelector('html').onclick = function() {
alert('¡Ouch! ¡Deja de pincharme!');
}
Nota que
document.querySelector('html').onclick = function(){};
es equivalente a
En esta sección añadirás otra imagen a tu sitio usando la DOM API y agregarás un
poco de código para cambiar entre imágenes al hacer clic.
1. Primero que todo, busca una imagen que te guste para tu sitio. Asegúrate que sea del mismo
tamaño que la primera, o lo más cerca posible.
2. Guarda tu imagen en tu carpeta images.
3. Renombra esta imagen «firefox2.png» (sin las comillas).
4. Guarda todos los archivos y carga index.html en tu navegador. Ahora cuando hagas clic en la
imagen, ¡esta debe cambiar por otra!
i. Si es así, el código cambia el valor de src a la ruta de la segunda imagen, forzando a que se
cargue la otra imagen en el elemento <img>.
ii. Si no es así (significa que ya fue modificada), se cambiará el valor de src nuevamente a la ruta
de la imagen original, regresando a como era en un principio.
Ahora añadirás un poco más de código, para cambiar el título de la página o incluir un
mensaje personalizado de bienvenida para cuando el usuario ingrese por primera vez.
Este mensaje de bienvenida permanecerá luego de que el usuario abandone la página
y estará disponible para cuando regrese. Lo guardarás usando Web Storage API.
También se incluirá una opción para cambiar el usuario y por lo tanto también el
mensaje de bienvenida en cualquier momento que se requiera.
<button>Cambiar de usuario</button>
En main.js, agrega el siguiente código al final del archivo, exactamente como está
escrito. Esto toma referencia al nuevo botón que se agregó y al título y los almacena
en variables:
function estableceNombreUsuario() {
let miNombre = prompt('Por favor, ingresa tu nombre.');
localStorage.setItem('nombre', miNombre);
miTitulo.textContent = 'Mozilla es genial,' + miNombre;}
Luego, agregarás este bloque if ... else. Se podría llamar a esto el código de
inicialización, como se ha establecido para cuando carga la app por primera vez:
if (!localStorage.getItem('nombre')) {
estableceNombreUsuario();}else {
let nombreAlmacenado = localStorage.getItem('nombre');
miTitulo.textContent = 'Mozilla es genial,' + nombreAlmacenado;}
La primera línea de este bloque usa el operador de negación (NO lógico representado
por !) para comprobar si el elemento 'nombre' existe. Si no existe, la
función estableceNombreUsuario() se iniciará para crearlo. Si ya existe (como por
ejemplo cuando el usuario ya ingresó al sitio), se recupera el dato del nombre
usando getItem() y se fija mediante textContent del título a la cadena, más el nombre
del usuario, como hiciste dentro de estableceNombreUsuario().
miBoton.onclick = function() {
estableceNombreUsuario();}
Ahora cuando visites tu sitio por primera vez, este te pedirá tu nombre y te dará un
mensaje personalizado de bienvenida. Puedes cambiar cuantas veces quieras el
nombre al presionar el botón. Y como un bonus añadido, ya que el nombre se
almacena en el localStorage, este permanecerá después de que cierre el sitio,
¡manteniendo ahí el mensaje personalizado cuando abras el sitio la próxima vez!