Fundamentos de HTML, CSS y JavaScript: Guía Práctica
Clasificado en Informática
Escrito el en 
español con un tamaño de 5,32 KB
Fundamentos de HTML, CSS y JavaScript
Cabecera de página.
Cuerpo de la página.
Etiquetas de la Cabecera (Head)
<title>Título de la página web</title>
Redireccionamiento a una Página Pasado un Tiempo
Debemos poner en el Head:
Ejemplo:
Formato de los Párrafos
Párrafo
Este es un ejemplo de un párrafo
Enter Tiene la misma función que un Enter
Línea horizontal Este texto tiene una línea debajo
Títulos
Este es un título
Este es un subtítulo
Hasta H6. H1 es el tamaño mayor y H6 el menor-
Hipervínculos
A otra página de nuestro sitio
Galería de fotos
A una página web de internet
http://www.somorrostro.com" target="_blank">Centro de Formación Somorrostro
A una dirección de correo electrónico:
Contacta con nosotros
Para descargar un archivo
Descárgate nuestro programa
Insertar un Video de YouTube
1. Ir al vídeo de YouTube que quieras insertar.
2. Debajo del vídeo, haz clic en Compartir.
3. Haz clic en Insertar.
4. Copia el código HTML que aparecerá en el cuadro de texto.
5. Pega dicho código en tu página web.
Marquesina
Texto de la marquesina
Favicon
Sonido de Fondo
JavaScript
Llamada al archivo de JavaScript (en el Body):
Ejemplo:
Llamada al archivo de JavaScript:
JavaScript – Cuadro de diálogo (en el archivo JavaScript):
window.alert("Mensaje");
Ejemplo de un Estilo para una Etiqueta HTML
a {
text-align: center;
}
Ejemplo de un Estilo para una Capa
#vinculos {
text-align: center;
}
Estilos para Posicionar una Capa
Position: absolute; Indicamos la posición exacta de la capa
Position: Fixed; La capa tiene una posición fija
Top: Distancia; Distancia del borde superior de la capa al borde superior de la ventana
Ej: Top: 100px;
Bottom: Distancia; Distancia del borde inferior de la capa al borde inferior de la ventana
Ej: Bottom: 200px;
Left: Distancia; Distancia del borde izquierdo de la capa al borde izquierdo de la ventana
Ej: Left: 200px;
Right: Distancia; Distancia del borde derecho de la capa al borde derecho de la ventana
Ej: Right: 200px;
Width: Anchura; Para poner un ancho al elemento. Ej: width: 200px; width: 100%;
Height: Altura; Para poner un alto al elemento. Ej: height: 200px;
Propiedades para las Fuentes
color Para poner color al texto. Ej: color: red;
font-size Tamaño de la fuente. Ej:
font-family Familia de tipografía del texto. Ej: font-family: arial;
font-weight Ancho de los caracteres, toma estos valores: normal, bold, bolder,...
Ej: font-weight:bold; font-weight: 200;
font-style Es el estilo de la fuente, que puede ser normal, italic, u oblique.
Ej: font-style: normal; font-style: italic;
Propiedades para los Párrafos
text-decoration
Para poner la decoración de un texto, si está subrayado, sobrerayado o tachado. Los valores son: none, underline, overline, line-through.
Ej: text-decoration: overline; text-decoration: underline;
text-align Justifica el texto, los valores son: left, right, center, justify.
Ej: text-align: left; text-align: center;
word-spacing Poner espaciado entre las palabras del texto.
Ej: word-spacing: 30px;
Estilos del Fondo
background-color Color de fondo de un elemento. Ej: background-color: silver;
Estilos de los Bordes
border-top Borde superior. Ej: border-top: 1px solid #FF0088;
border-bottom Borde inferior. Ej: border-bottom: 1px solid #FF0088;
Estilo Padding
padding Indica el espacio que se insertara en los cuatro costados.
Pseudo-Clases
a:visited {color:blue;} Vínculo visitado
a:hober {color:blue;} Vínculo donde está el ratón
a:link {color:blue;} Vínculo no visitado
a:focus {color:blue;} Vínculo seleccionado por teclado
a:active {color:blue;} Vínculo que recibe el clic