Apuntes HTML
Enviado por Fockhaman • 27 de Diciembre de 2020 • Trabajos • 2.285 Palabras (10 Páginas) • 82 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>.
...