HTML Y CSS

1. Etiquetas básicas​

1.1. <div> Divide la página en secciones </div>​ <p> Párrafo </p>​ <span> Sirve para agrupar elementos en línea </span>​ <u> Subrayado </u>​ <em> Cursiva o énfasis </em>​ <strong> Negrita o destacado </strong>​ _Subíndice​ <br> Salto de línea​ <hr> Línea de separación horizontal​ ​

2. Listas ordenadas​

2.1. Las listas ordenadas tienen varios atributos propios:​ Reversed : invierte el orden de la lista​ Start: establece en qué número o letra empieza la lista. Ejemplo: <ol start=“2”>​ Type: indica el tipo de numeral a utilizar. Ejemplo: <ol type=“a”> o <ol type=“i”>​

3. Encabezados​

3.1. Los encabezados son títulos para las diferentes secciones de una página web​ Son: <h1> <h2> <h3> <h4> <h5> <h6>​ El número indica la importancia del título (tamaño). El 1 el más importante.​

4. Unir celdas​

4.1. Atributos de la etiqueta <td> para unir celdas:​ colspan = "numero_de_columnas" : une varias celdas ocupando varias columnas​ rowspan = "numero_de_filas" : une varias celdas ocupando varias filas​ ​ Ejemplo 1:​ <td colspan="2">esta celda ocupa dos columnas</td>​ Ejemplo 2:​ <td rowspan="3">esta celda ocupa tres filas</td>​ ​ ​

5. Enlaces​

5.1. Son vínculos a otras páginas​ Pueden ser:​ Locales (dentro del sitio web)​ Externos (en otro sitio web)​ Etiqueta <a>​ Atributos: ​ href : URL de la página de destino​ Target="_blank" : abre la página de destino en una nueva pestaña​ ​ Ejemplos: ​ <a href="http://www.calasancioalicante.org">Calasancio Alicante</a>​ <a href="otrapagina.html"></a>

6. Selectores básicos​

6.1. Los selectores determinan qué elementos HTML se verán afectados por el código CSS​ Tipos de selectores:​ Por tipo : Etiqueta HTML. Ejemplo:​ p { color: green; }​ class: (varios elementos)​ .botonesRojos { background-color: red;}​ id: (un elemento)​ #primerParrafo { color: gray; }​ En caso de que un elemento esté afectado por varios selectores, la prioridad es:​ Id​ Clase​ Tipo​ ​ <p id="primerParrafo" class="botonesRojos">Lorem ipsum</p>​ ​

7. Propiedades del texto​

7.1. text-align : left, right, center o justify​ text-decoration : underline, none, overline o line-through​ text-transform : uppercase, lowercase y capitalize​ font-size : 12px, 12pt o x-small, small, mediuum, large o x-large​ font-family : serif, sans-serif, monospace, Verdana, Helvetica, etc.​ font-style : italic o normal​ font-weight : bold o normal​ text-shadow : -4px 2px 5px grey; ​ 4px a la izquierda, 2px hacia abajo, 5px difuminado y color de sombra.​

8. Bordes​

8.1. border-width : se establece en pixels​ Border-left-width, border-right-width, border-top-width, border-bottom-width​ border-style: solid, dashed (línea discontinua), dotted, double (línea doble)​ border-left-style, border-right-style, border-top-style, border-bottom-style​ border-color:​ border: 2px solid red;​ border-radius: radio del borde en px​ ​ ​

9. Imagen de fondo​

9.1. Podemos fijar una imagen de fondo en un elemento usando estas propiedades:​ background-image : url ('imagen.png');​ background-image : url ('../imagen.png'); ​ background-position: left top; /* posición horizontal y vertical */​ background-position: center center;​ background-position: right bottom;​ background-repeat: repeat;​ background-repeat: no-repeat;​ background-repeat: repeat-x;​ background-repeat: repeat-y;​

10. Estructura de un documento web: HTML​

10.1. Etiquetas​

10.1.1. Tienen un nombre que va entre los símbolos < y >. Ejemplo: <p>​ Algunas etiquetas tienen contenido, para delimitarlo se usa el nombre de la etiqueta entre </ y >. Ejemplos:​ <p>Esto es un párrafo</p>​ <strong>Este texto se vería en negrita</strong>​ Las etiquetas sin contenido pueden llevar el símbolo / antes de > Ejemplo:​ <br />​ Algunas etiquetas pueden contener a otras. Las internas debe cerrarse antes de las externas. Ejemplo:​ <p>Todo el texto se vería normal, excepto <strong>este texto</strong><p>​

10.2. Atributos​

10.2.1. Los atributos pueden modificar características de las etiquetas​ Tiene un nombre que indica que propiedad modifican, y un valor entrecomillado​ Son opcionales, pueden usarse o no.​ Se añaden en la etiqueta de apertura​ Ejemplos:​ <img src="foto1234.jpg" />​ <img src="foto2134.jpg" alt="Dia soleado en el campo" />​ <p align="right">Párrafo alineado a la derecha.</p>​

11. Estructura básica de una página web HTML​

11.1. Para crear un documento HTML podemos usar cualquier editor de texto plano. Por ejemplo:​ Bloc de notas​ Notepad++: Resalta con colores las etiquetas HTML y podemos abrir varios documentos en pestañas.​ Componentes básicos de la estructura HTML:​ DOCTYPE: Indica qué tipo de archivo es. Ejemplo: <!DOCTYPE html>​ <html>: Etiqueta raíz que contiene el resto de etiquetas​ <head>: Primera etiqueta tras <html>. Contiene información sobre la página web. Dentro se encuentra la etiqueta <title> que indica cuál es el título.​ <meta charset="UTF-8" />: Indica la codificación usada​ <body>: Va a continuación de <head>. Incluye el cuerpo de la página web.​

12. Tablas​

12.1. Las tablas son un elemento de bloque ​ Se crean con la etiqueta <table>​ Las filas se crean con la etiqueta <tr> (table row)​ Las filas contienen celdas que se crean con la etiqueta <td>​ Atributo border: se usa indicar el ancho de los bordes de la tabla​ Ejemplo:​ <table>​ <tr>​ <td>Fila 1 Columna 1</td> <td>Fila 1 Columna 2</td>​ </tr>​ <tr>​ <td>Fila 2 Columna 1</td> <td>Fila 2 Columna 2</td>​ </tr>​ </table>​

13. Imágenes​

13.1. Las imágenes son un elemento en línea​ Etiqueta: <img>​ Atributos:​ Alt: texto alternativo​ Src: ruta de la imagen a visualizar. Generalmente las imágenes se almacenan en una carpeta diferente a la de las páginas. Ejemplos:​ Imagen.jpg : la imagen se encuentra en la misma carpeta de la página​ Img/imagen.jpg : la imagen se encuentra dentro de la carpeta Img​ ../imagen.jpg : la imagen se encuentra en la carpeta superior o padre​ ​ Ejemplo:​ ​ <img src="../imagenes/image.jpg" alt="bosque" />​ ​

14. Colocación del código CSS​

14.1. El código CSS se puede vincular a una estructura HTML de tres formas diferentes:​ En un atributo HTML, con el atributo style​ <div style="width: 100px; height: 100px; background-color: red;"></div>​ Con la etiqueta <style>​ <style type="text/css">​ div {​ width: 100px;​ height: 100px;​ background-color:red;​ }​ </style>​ En un archivo independiente:​ <link rel="stylesheet" href="css/estilo.css" type="text/css" />​

15. Colores​

15.1. Propiedades:​ color: modifica el color de texto​ background-color: modifica el color de fondo​ Nombres: red, orange, blue, brown, cyan, black, white, gray, darkgray... más colores​ RGB (Red Green Blue): colores formados mezclado estos 3 indicando proporción de cada uno:​ #FF0000 : tres números hexadecimales (rojo)​ rgb(255,0,0) : decimales de 0 a 255​ rgb(100%,0,0) : porcentajes​ rgba(255,0,0,0.5) : tres números de 0 a 255 y un número de 0 a 1 que indica el nivel de tranparencia (0 = transparente, 1 = opaco).​

16. Tamaño​

16.1. Recuerda​ Tamaño horizontal por defecto:​ Elementos de bloque: ocupan todo el ancho disponible​ Elementos en línea: ocupan en función de su espacio​ Tamaño vertical por defecto: ambos casos depende de su contenido​ Con CSS podemos modificar el tamaño de la mayoría de elementos​ display: block. Visualizar como elemento de bloque.​ display: inline. Visualizar como elemento en línea.​ display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo​ width, height, max-width, max-height, min-width y min-height​ Sus valores se fijan en pixeles o en porcentajes​ ​

17. Posicionamiento​

17.1. position: static -> posicionamiento por defecto​ position: relative -> Ocupa el mismo espacio que static pero nos permite desplazarlo usando top left right bottom​ position: absolute -> posición dentro del documento​ Position: sticky -> sitúa al elemento basado en el scroll​ Position: fixed -> posición dentro de la ventana del navegador​

18. Hostinger.es​

18.1. Hostinger nos permite:​ Crear un sitio web con nuestras propias páginas​ Subiendo nuestras páginas por FTP (FileZilla)​ Subiendo nuestras páginas desde la propia página​ Crear un blog con WordPress​ Crear un sitio web desde la propia página de Hostinger.es​