Apuntes HTML
FockhamanTrabajo27 de Diciembre de 2020
2.285 Palabras (10 Páginas)124 Visitas
MODULO 1
Estructura HTML
Ejemplo:[pic 1]
[pic 2]
Para implementar el CSS se utiliza en el <head> la etiqueta :
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
Caracteres especiales:
[pic 3]
Tablas: utilizan las etiquetas <table>, <tr> para filas y <td> para columnas. <th> para celda cabecera.
[pic 4][pic 5]
Elementos HTML
Estos son algunos de los más importantes:
Elementos BLOCK: ocupan todo el ancho de página y fuerzan una línea antes y después.
<article> Contenido redistribuible.
<aside> Contenido ligeramente relacionado.
<canvas> Contenedor para gráficos dinámicos.
<div> Contenedor genérico para bloques de texto.
<footer> El pie de una sección.
<h1>..<h6> Títulos de mayor a menor.
<header> Encabezado de una sección.
<p> Párrafo.
<pre> Bloque de texto preformateado.
<section> Define una sección.
<ul>,<ol> Lista no ordenada, lista ordenada.
Elementos INLINE: solo ocupan el ancho necesario y no fuerzan nuevas líneas.
<em> Texto con énfasis. (itálica por defecto)
<a> Hipervínculo.
<br> Salto de línea.
<img> Imagen.
<span> Contenedor genérico para líneas de texto.
<button> Botón.
<input> Control de entrada.
<select> Lista de opciones.
<textarea> Campo de texto multilinea.
DIV
Pueden tener 2 atributos identificativos:
ID: un elemento HTML solo debe tener un atributo ID y este debe ser único en la página. id=”caja” → #caja{color:blue}
CLASS: define un tipo de elementos. Un elemento puede tener varios. class=”caja” → .caja{color:blue}
Para controlar su formato en CSS se usan:
margin Margen exterior de la caja.
padding Margen interior de la caja.
border Borde de la caja.
box-sizing Permite elegir la forma de interpretar las medidas.
:content-box Mide a partir de padding y border.
:border-box Mide incluyendo padding y border
calc Permite hacer cálculos para determinar el valor de una propiedad.
Por ejemplo, para dividir una página en 3 div teniendo en cuenta que tengan un margen de 2em, les deberíamos asignar el ancho así: width:calc(100%/3 – 2em);
PRIORIDAD EN CSS
Cuando en CSS varias declaraciones afectan a un mismo elemento
Para cada declaración de CSS hay que calcular la tupla(A, B, C, D) ganadora de todas las reglas CSS que compiten. A tiene máximo peso y D mínimo. Si hay empate en A, se mira B y así sucesivamente.
A = estilo en línea ----→ Ya no se utiliza.
B = número de IDs
C = número de clases
D = número de marcas HTML
Ejemplo: #caja .cabecera h1 { color: red; }
En esta etiqueta tendríamos la tupla (0,1,1,1), ya que tiene un ID (#caja), una clase (.cabecera) y una marca (h1).
MENÚ
Los menús suelen ir dentro del <nav>, y se crean con la etiqueta <ul> (Unordered List) y sus correspondientes <li>.
Para quitar los puntos de la lista se usa list-style:none.
Para poder hacer menús horizontales utilizaremos la función CSS display:flex.
Para que una opción se remarque al pasar por encima debemos usar la función :hover. Por ejemplo :
li:hover{
background-color: red;
color: white;
}
ESTRUCTURA CSS
Se pueden posicionar las cajas con la función:
float: none | left | right
Especifica si un elemento debe aparecer a la izquierda o a la derecha de su contenedor, donde los elementos de texto y los en línea aparecerán a su alrededor.
Para romper el esquema de float se usa:
clear: none | left | right
Para evitar que los bloques internos se salgan de la caja contenedora empleamos:
overflow: hidden
También se pueden posicionar las cajas utilizando position: que puede tomar varios valores:
position: static Por defecto, no cambia nada.
relative Posición respecto a la que tiene por defecto.
absolute Posición con respecto a la página.
fixed Posición con respecto a la ventana.
sticky Comienza con una posición relative hasta llegar al umbral de desplazamiento (indicado con top , left …), entonces pasa a ser fixed;
A estas etiquetas se suman top | left | right | bottom para especificar los valores de las mismas.
CAJAS FLEXIBLES
La propiedad más utilizada y completa hoy en día es la de flex-box, ya que permite ordenar los div de manera más eficiente.
...