HTML CSS

Acamica
Maquetando al monstruo web
HTML – CSS
Unidad 1
Etiquetas HTML






Estructura básica página HTML



//Código de caracteres. Decodifica caracteres símbolos, signos, acentos.
mi primera página
//Nombre de la pestaña que estoy ubicado.


Cuerpo de la página




Jerarquía de elementos
Etiqueta html es el padre de etiquetas head y body.
Seutiliza el código dentado para determinar los niveles de jerarquía de las etiquetas y visualizar con mayor facilidad los estilos de los elementos. Algunas pueden anidarse según sea necesario. Esto no es válido para las etiquetas que forman la estructura básica.
Clases e IDs
IDs identificadores de carácter único.
No se pueden repetir como las clases que pueden ser reutilizadas sin ningún límite.Ejemplo:



Párrafo 1
Párrafo 2




Párrafo 3








Selectores CSS
Selector por nombre de etiqueta
body {
}
Referenciar un id en CSS
#mielemento{
}
Referenciar una clase en CSS
.clase1{
//Popiedades y valores del estilo que queramos agregar
color: red;
}
Referenciar un elemnto dentro de otro
div spam {
}

Párrafo 1
Párrafo 2

CSS
#mielemento {background-color: red; //Este tiene prioridad sobre una clase
}
.verde {
background-color: green; //Este tiene prioridad sobre una etiqueta.
}
Referenciando CSS en HTML
Archivo externo desde etiqueta head
CASO1


Mi primer página web



CASO 2


Mi primer página web

.estilo1 {
color: green;
}


CASO 3
Posibilidad de referencias CSS a traves unmismo elemento dentro de la etiqueta body.





Texto
Encabezados o títulos


Párrafo

Etiquetas semánticas
negrita
itálica
Hipevínculos
Ir a Google.com
home //abrir en una dirección local.
Ir a Google.com //abrir en una nueva ventana
Enviar correo electrónico //Referenciar una dirección de mail
Imágenes

divs y span
div: elementos de bloque. Ocupan el ancho delelemento padre o de la página.
span: elementos de línea. Ocupan lo mínimo necesario para mostrar los elementos que están ubicados dentro del mismo. Los elementos en línea no pueden contener elementos de bloques.





Ejemplo div

Título
Un párrafo de texto de ejemplo
Más Noticias

Ejemplo span
Un párrafo de texto de ejemplo. Con una frase en línea, encerrada en una etiqueta span.texto Más Noticias
Modelo de cajas
Borde: contorno de la caja
Margen: es externo al borde. Delimitación la caja con el resto del documento.
Espaciado: es interno. Delimitación entre el borde y el contenido interno del elemento.
Ejemplo
.caja {
height: 300px; //Alto en pixeles
width: 400px; //Ancho en pixeles
border: 2px solid red; // Ancho en pixeles, tipo de borde y color delborde.
margin: 15px;// Margen en los cuatro lados.
padding: 30px;// Espaciado interno de los 4 lados. Sirve para separar del borde.
border-radius: 10px;// Borde redondeado. Por defecto son rectangulares.
}
Top: arriba Botton: abajo left: izquierda right: derecha.


Sombra de caja
CASO 1
box-shadow: 5px 10px 5px black;
X Y alpha color;
CASO 2
box-shadow: 5px 10px5px
rgba (0,0,0,0.5);
Sombra interna
box-shadow: inset 5px 10px 5px rgba(0,0,0,0.5);
Múltiple sombra
box-shadow: inset 0 5px 5px rgba(0,0,0,0.5), inset 5px 0 5px rgba(0,0,0,0.5), inset -5px 0 5px rgba(0,0,0,0.5); box-shadow: inset 0 5px 5px rgba(0,0,0,0.5), inset 5px 0 5px rgba(0,0,0,0.5), inset -5px 0 5px rgba(0,0,0,0.5);

Colores y tipografía
Colores hexadecimales
color: #000000; /*negro */
color: #ffffff; /* blanco */
color: #ff0000; /* rojo */
color: #00ff00; /* verde */
color: #0000ff; /* azul */
color: #ee82ee; /* violeta */
colores rgb
color: rgb(0,0,0); /* negro */
color: rgb(255,255,255); /* blanco */
color: rgb(255,0,0); /* rojo */
color: rgb(0,255,0); /* azul */
color: rgb(0,0,255); /* verde */
color: rgb(238,130,238); /* violeta */
alpha
/* Negro...