MANUAL-HTML-Y-CSS.pdf

MANUAL BÁSICO DE PROGRAMACIÓN EN HTML Y CSS Contenido 1. FRONTEND.................................................................................................................................2 1.1 Estándares de desarrollo...............................................................

MANUAL BÁSICO DE PROGRAMACIÓN EN HTML Y CSS Contenido 1. FRONTEND.................................................................................................................................2 1.1 Estándares de desarrollo.....................................................................................................2 2. HTML............................................................................................................................................3 2.1 Anatomía de una página web..............................................................................................3 2.2 Index y su estructura básica:................................................................................4 2.2.1 Ejemplo de un :.................................................................................................4 2.3 Index y su estructura básica:................................................................................5 2.3.1 Ejemplo de un :.................................................................................................5 2.4 Anatomía de una etiqueta HTML........................................................................................6 2.5 Etiquetas multimedia............................................................................................................7 2.5.1 Etiqueta , y.....................................................................7 2.5.2 Etiqueta............................................................................................................7 2.6 Poniendo en práctica lo aprendido.....................................................................................8 2.6.1 Configurando nuestro ambiente de trabajo................................................................8 2.6.2 Creando nuestro proyecto..........................................................................................12 2.6.3 Escribiendo nuestro index.html..................................................................................13 2.6.4 Antes que nada, la estructura....................................................................................15 2.6.5 Sección de bienvenida................................................................................................16 2.6.6 Sección de imágenes..................................................................................................19 2.6.7 Sección de videos........................................................................................................22 3. CSS.............................................................................................................................................24 3.1 Anatomía de una regla CSS..............................................................................................25 3.2 Aplicar un archivo CSS en HTML.....................................................................................25 3.3 Clases y IDs.........................................................................................................................26 3.3.1 Seleccionar etiquetas HTML mediante clases.........................................................26 3.3.2 Seleccionar etiquetas mediante IDs..........................................................................28 3.4 Pseudo-clases y pseudo-elementos................................................................................29 3.4.1 Pseudo-clases..............................................................................................................29 3.4.2 Pseudo-elementos.......................................................................................................30 3.5 Medidas en CSS.................................................................................................................30  3.5.1 Las medidas relativas (EM y REM)...........................................................................31 3.6 Modelo de caja....................................................................................................................32 3.7 Position.................................................................................................................................33 3.8 Tipos de Display..................................................................................................................34 3.8.1 Display block................................................................................................................34 3.8.2 Display inline................................................................................................................34 3.9 Fuentes de letra..................................................................................................................38 3.10 Variables............................................................................................................................39 3.11 Poniendo en práctica lo aprendido.................................................................................40 3.11.1 Creando la hoja de estilos para nuestro proyecto.................................................40 3.11.2 Organizando nuestros elementos...........................................................................41 3.11.3 Ajustando el texto......................................................................................................43 3.11.4 Aplicando una paleta de colores.............................................................................46 3.11.5 Estilizando las imágenes..........................................................................................47 3.11.6 Estilizando los videos................................................................................................48 1. FRONTEND Un desarrollador front-end es aquel que maneja toda la parte visual de un proyecto web, es decir, toda parte que entra en interacción con el usuario mediante el cliente (navegador). Por tanto, este perfil de desarrollador deberá enfocarse en los siguientes aspectos: -Interacciones -Animaciones -Estilos -Navegación 1.1 Estándares de desarrollo En el front encontramos tres estándares que son fundamentales para el desarrollo web, estos son: 1. HTML: un lenguaje de referencia, o como sus siglas lo indican, un “Lenguaje de Marcas de Hipertexto” (HyperText Markup Language), que permite estructurar un documento mediante etiquetas. 2. CSS: un lenguaje utilizado para definir el diseño de un documento previamente escrito en un lenguaje de referencia. Sus siglas indican “Hojas de estilo en cascada” (Cascading Style Sheets), debido a que es un código que se lee por el navegador de arriba hacia abajo. 3. JavaScript: un lenguaje de programación que indicará al navegador que tareas deberá realizar. Es un lenguaje de programación basado en prototipos, por tanto, se podría definir como orientado a objetos. Este manual solo abarcará los dos primeros estándares, es decir, HTML y CSS. Sin embargo, es importante comprender la importancia de cada uno de ellos en la estructura de todo proyecto web. La anterior imagen sirve como ilustración de la funcionalidad de cada uno de los lenguajes anteriormente descritos. HTML servirá para establecer la estructura de nuestra página web. (Esqueleto) CSS servirá para definir el estilo o apariencia de nuestra página web. (Apariencia) JavaScript servirá para añadir dinamismo y una lógica a nuestra página web. (Lógica) 2. HTML 2.1 Anatomía de una página web La anatomía de una página web son los elementos básicos que la conforman. Estos son: - Header - Logo - Nav - Main content - Side Bar - Footer Estos elementos se pueden ver distribuidos de la siguiente manera: 2.2 Index y su estructura básica: El head es aquella parte de la estructura del index.html que va a llamar a todos los archivos importantes que necesita la página web para su correcto funcionamiento y que no deben ser visibles por los usuarios. Algunos de estos archivos pueden ser: -Frameworks: son estructuras o plantillas que pueden ser incorporadas en proyectos personales para optimizar los tiempos de trabajo. -Librerías: Archivos con código previamente escrito, que puede ser usado en otros proyectos. -Estilos: Archivos CSS con estilos escritos. -Fuentes: fuentes de letra externas. -APIs: mecanismos que van a permitir la comunicación entre dos tipos de software diferentes. 2.2.1 Ejemplo de un :  Mi página *El primer archivo que carga cualquier sitio web será el index.html, por tanto, el nombre debe ser siempre el mismo. 2.3 Index y su estructura básica: El body es aquella parte de la estructura del index.html que organizará el contenido que los usuarios ven. En el body se manejan dos tipos de etiquetas, las de contenido y las contenedoras. Las de contenido son las encargadas de mostrar texto, imágenes, videos, etc... Mientras que las contenedoras son las que nos van a permitir darle un orden apropiado a ese contenido. Un ejemplo de etiqueta contenedora podría ser el , pues esta etiqueta guarda otras etiquetas de contenido. 2.3.1 Ejemplo de un :  Soy un texto Soy un titulo Soy un link 2.4 Anatomía de una etiqueta HTML Las etiquetas HTML tienen una estructura básica. Algunas etiquetas tendrán que cerrarse una vez se llaman, esto se hace con un “/”, de esta manera: Aquí va el contenido que aloja la etiqueta Otras etiquetas no tendrán su etiqueta de cierre, como los pueden ser las etiquetas de imagen. 2.5 Etiquetas multimedia Etiquetas utilizadas para insertar imágenes y vídeos. 2.5.1 Etiqueta , y Imagen src: donde está la imagen, es decir, su ruta de acceso. Puede ser desde nuestras carpetas o desde un enlace de la web. alt: Texto alternativo por si no se renderiza la imagen. : genera un contenedor para la imagen. : agrega una descripción a la imagen. Será visible en la parte inferior de esta misma. Es recomendable siempre utilizar la etiqueta para insertar un archivo multimedia. 2.5.2 Etiqueta Nos permite subir un video mediante la misma forma que una imagen, mediante el atributo src. controls: aparecen los controles para manipular el vídeo. No recibe valores, es un parámetro vacío. preload: ayuda a que el video se empiece a descargar una vez se abre el navegador en esa página. : va dentro de la etiqueta video y se usa para especificar varias rutas en caso de que el navegador no entienda algún formato de vídeo. Al poner varios formatos, el navegador usa el que más le convenga. Para usarlo se elimina el atributo src del video y se le pone a las etiquetas source. Al video se le dejan los demás atributos. Si queremos que el vídeo inicie y termine en un minuto/segundo específico, debemos usar unos atributos dentro del src: #t=: indica el tiempo en el cual empezará y terminará. 10, 90: son los valores en segundos. Donde 10 (izquierda) es donde inicia y 90 (derecha) donde finaliza. Deben ir separados solo por una coma sin espacio. 2.6 Poniendo en práctica lo aprendido Con todo lo visto en la sección anterior, deberías de tener las suficientes herramientas para elaborar tu primer documento en HTML. Para practicar, dedicaremos este último apartado para elaborar un documento HTML con todos los componentes que hemos visto hasta el momento. 2.6.1 Configurando nuestro ambiente de trabajo Para escribir un documento de referencia, podemos hacer uso de cualquier editor de texto que queramos. Sin embargo, existen muchos editores de código fuente que nos facilitarán el trabajo a la hora de escribir. Uno de ellos bastante conocido es Visual Studio Code desarrollado por Microsoft. Para instalarlo tendremos que dirigirnos a la web oficial de descarga: https://code.visualstudio.com/ Allí daremos click en el botón “Download for Windows” en caso de que trabajemos en dispositivo Windows, o “Download for macOS” en caso de que trabajemos en dispositivo Mac. Se descargará un archivo ejecutable.exe en nuestro equipo. Al ejecutarlo saldrá una ventana de instalación. De ahí en adelante es tan sencillo como dar click en “siguiente” e “instalar”. Al finalizar la instalación y abrir el programa, nos encontraremos con la interfaz de Visual Studio Code. Hagamos un repaso rápido de cada uno de sus apartados: En el apartado (1) visualizaremos cualquier documento que tengamos abierto. Es en donde podremos editar y visualizar código. En el apartado (2) tendremos un área de trabajo, parecido a un explorador de archivos. Podremos agregar carpetas de proyectos y crear archivos dentro de ellas. En el apartado (3) tendremos acceso a varias herramientas dentro de VS Code. Entre ellas, la más importante es la de “Extensiones”. Desde allí podremos instalar distintas extensiones de la comunidad, que nos ayudarán a escribir código mucho más rápido. Para este apartado de la guía se utilizarán las siguientes extensiones: “HTML CSS Support” añadirá funciones de autocompletado de código, mientras que “Live Server” nos permitirá visualizar nuestro proyecto en tiempo real desde el navegador. 2.6.2 Creando nuestro proyecto Con VS Code instalado, ya podremos empezar a escribir nuestro documento HTML. Lo primero que haremos será crear una carpeta donde alojaremos todos los archivos del proyecto. Lo podemos hacer desde el explorador de archivos del sistema o directamente desde VS Code. Ahora crearemos nuestro index.html. Lo podemos hacer desde el explorador de VS Code. Al abrir este archivo desde VS Code, ya podremos visualizarlo y empezar a escribir. 2.6.3 Escribiendo nuestro index.html Todo documento HTML tiene una estructura básica (véase apartados 2.2 y 2.3). Escribir esta estructura puede resultar bastante tedioso, por suerte, VS Code viene con algunos snippets que la escribirán por nosotros. Para hacerlo, deberemos escribir “!” seguido de la tecla Tab o Enter en nuestro teclado. Como podemos observar, ya se habrán escrito varias etiquetas importantes, entre ellas: y. Recordemos que la etiqueta guarda el nombre que muestra la página en la pestaña del navegador, podemos cambiarla antes de empezar a añadir los demás componentes. Si bien todavía no hemos añadido nada al , ya podremos visualizar nuestro documento en el navegador. Para ello haremos uso de “Live Server”, dando click en el siguiente botón: *También podemos utilizar el atajo de teclado Alt + L + O Al hacerlo, se abrirá el navegador predeterminado del sistema con nuestro documento en blanco. 2.6.4 Antes que nada, la estructura Antes de empezar a añadir componentes al , es conveniente y una buena práctica empezar a estructurar nuestro documento, dejando en claro la división de los elementos básicos que lo conformarán. En este caso, dividiremos el contenido del documento en tres secciones principales: -Sección de bienvenida. -Sección de imágenes. -Sección de videos. Para escribirlo en nuestro index.html, podemos hacer uso de las etiquetas y (véase apartado 2.3.1). Como podemos observar, hemos añadido tres etiquetas contenedoras dentro de otra etiqueta contenedora. Nótese que todas ellas están dentro de la etiqueta. Con la estructura ya planteada, podremos empezar a añadir todos los componentes de forma ordenada. 2.6.5 Sección de bienvenida Vamos a empezar con un título de bienvenida. Recordemos que podemos utilizar las etiquetas destinadas para ello, estas son: , , , , y. De tener texto, cada una de ellas lo añadirá en negrilla con un tamaño predeterminado, que por ahora no tocaremos. En nuestro caso, optaremos por la etiqueta para el título. Dentro de la primera etiqueta escribiremos lo siguiente: Bienvenid@ a mi primer proyecto web Al guardar el archivo con Live Server ejecutándose (esto lo podemos hacer con el atajo: Ctrl + S), deberíamos de poder ver los cambios desde el navegador. Sigamos añadiendo componentes. Ahora añadiremos un párrafo de bienvenida seguido de nuestro nombre. Para esto podemos hacer uso de la etiqueta. Escribiremos las siguientes líneas después de la etiqueta de título: ¡Lo que ves ahora es mi primer proyecto web! En este podrás encontrar imágenes y videos divertidos para que pases un buen rato :D Por: tu nombre aquí Al guardar, nuestro documento debería verse de la siguiente manera: Tip adicional: de querer añadir un párrafo muy largo, añadirlo en una sola línea puede resultar tedioso. Para tener un código más organizado y fácil de leer, podemos utilizar el format de VS Code (Alt + Shift + F). 2.6.6 Sección de imágenes Empezaremos añadiendo un título a la sección. Esta vez lo haremos con la etiqueta , para tener un tamaño de fuente más pequeño: Imágenes divertidas *Nótese que la nueva etiqueta se añade dentro de la otra etiqueta , no en la que ya habíamos añadido elementos. Ahora añadiremos las imágenes. Primero crearemos una carpeta “Assets” dentro de la carpeta de proyecto, lo podemos hacer desde VS Code o desde el explorador de archivos. En esa carpeta agregaremos todas las imágenes que vayamos a cargar. Como todavía no vamos a utilizar hojas de estilo, usaremos imágenes de dimensiones semejantes (es recomendable utilizar imágenes ligeras, de entre 70 a 100kb). Con las imágenes en la carpeta, ya podremos añadirlas en el HTML Para ello usaremos las etiquetas e de la siguiente manera (véase apartado 2.5):