¡Descarga HTML Y CSS Introducción y más Apuntes en PDF de Programación Informática solo en Docsity!
CURSO HTML Y CSS (DEVCODE).
1. FUNDAMENTOS.
1. 1. Introducción:
Utilizaremos Google Chrome; la aplicación web codepen.io, que contiene un editor de HTML, CSS y Java Script que nos permite visualizar tanto el código como el resultado de nuestro código; para el desarrollo del proyecto utilizaremos como editor de texto a Sublime Text, por ser de nuestra preferencia. HTML: Nos da la estructura y la definición del contenido. Por ejemplo vamos a indicarle al navegador si lo que tenemos es una imagen, un vídeo o un párrafo de texto. CSS: Es un lenguaje de estilo creado para controlar el aspecto del contenido. Podemos añadir un color de fondo, agrandar el tamaño del texto, distribuir mejor el contenido… Son dos lenguajes diferentes, con su propia sintaxis y forma de trabajar, pero que se complementan muy bien.
1. 2. ¿Cómo funciona la Web? ¿Cómo interviene HTML en
este proceso?
Lo primero que debemos saber, es el que la web se basa en consultas que hace un cliente, normalmente de un navegador web a un servidor, a través de un protocolo de comunicación llamado HTTP o Protocolo de transferencia de Hipertexto. Todo inicia en nuestros navegadores, y para acceder a un sitio web, vamos a escribir en la barra de direcciones una dirección web. Por ejemplo si queremos ir a la página de W3C, escribimos: http://www.w3.org:80/standards. Esta dirección, conocida como URL, está dividida en algunos segmentos que dan información y ubicación del recurso que estamos consultando. Entre sus partes tenemos el protocolo de transporte, el nombre del host al que haremos la petición, el puerto por defecto 80 por ser un contenido web, y por último el recurso que estamos consultando antepuesto por “/”. De estos segmentos, no escribimos el protocolo http ni el puerto 80 porque generalmente estos dos valores están sobreentendidos en una comunicación web. Luego, con el URL el navegador realiza una solicitud y es enviada al servidor, el cual toma la solicitud y la procesa usando un lenguaje de programación como pueden ser Python, Ruby, PHP, Java… Además, en el transcurso del procesamiento puede darse el caso en el que se consulte
alguna base de datos, entre las más populares tenemos MySQL, PostgreSQL, Oracle, Microsoft SQL Server, etc.^1 Una vez que el servidor tiene todo listo, lo que hace es enviar una respuesta al navegador, en general en formato HTML, que no es más que texto plano. Después de que el navegador reciba el HTML, internamente genera una representación en forma de árbol de cada elemento que se encuentra en el documento HTML: Posteriormente, muestra al usuario el contenido de la página en el navegador del cliente. Si usamos HTML podremos ver solo texto. Sin embargo, usando CSS asociándolo a contenido HTML para que cambie el aspecto y podamos agregar colores, agrandar el tamaño del texto y distribuir mejor el contenido.
1. 3. Flujo de trabajo en el momento de desarrollar un sitio
web.
1. Necesidad: En primer lugar tenemos una necesidad , que puede ser de la empresa en la que trabajemos, de un cliente si somos freelancers, de nosotros mismos… 2. Experiencia de usuario (UX): El siguiente paso es diseñar la experiencia que queremos darle al usuario cuando visite nuestro sitio web. Para esto existen una serie de pasos y herramientas a emplear que no abarcaremos en este curso. 3. (UI/Interfaz de usuario): Una vez diseñada la experiencia que queremos entregar, la plasmaremos en un documento, que puede ser en papel, a través de un software (como Balsamiq), etc. 4. Desarrollo: Una vez tenemos lo que vamos a implementar, comenzamos a codear. Aquí tenemos que diferenciar dos tipos de desarrollo: 1. Front-End development: la parte visual que ve nuestro usuario. Esto lo logramos con HTML, CSS, Java Script. 2. Back-End development: trabaja desde el lado del servidor, usando Python, Ruby, PHP, … Estos son los pasos que debemos seguir a la hora de seguir el desarrollo de un sitio web. (^1) SQL es un lenguaje de dominio específico utilizado en programación, diseñado para administrar, y recuperar información de sistemas de gestión de bases de datos relacionales.
2. HTML5.
2. 1. Sintaxis.
La sintaxis es la forma visible de un lenguaje. Por ello, antes de crear nuestro primer documento en HTML debemos de tener claro lo siguiente: el DOCTYPE , o declaración del tipo de documento, es una instrucción especial que va al inicio de nuestro documento HTML y que permite al navegador entender qué versión de HTML estamos utilizando. Esta información determinará la manera en la que el navegador procesará un documento. Un DOCTYPE distinto podría implicar hasta una visualización distinta del sitio web dentro del mismo navegador. En el caso de HTML5, versión en la cual trabajaremos, el DOCTYPE a emplear es **: **. En las otras versiones de HTML: Otro concepto importante en HTML son los elementos , los cuales nos ayudan a estructurar y dar significado a las partes de un documento HTML. Con ellos podemos crear encabezados; párrafos; texto con énfasis, subrayados o cursivas; listas de elementos; tablas; imágenes; formularios, etc. Para definir y conocer la estructura de un elemento debemos revisar los conceptos de contenido, modelo de contenido, texto del contenido, etiqueta y atributo. Por ejemplo, tenemos el siguiente elemento llamado **“elemento p”: Contenido del elemento p En relación al contenido de un elemento, este puede ser:
- Caracteres: **Caracteres p
- Comentarios: **
- Otros elementos, como por ejemplo: **Elementos El modelo del contenido define la estructura de un elemento, si puede o no tener contenido, así como los atributos que puede tener. ** Elemento p Un elemento no puede contener atributos o contenidos que no formen parte de su modelo de contenido: **
Elemento p
El contenido del texto es el valor del atributo idl text contain del elemento. Este atributo idl lo exploraremos más en profundidad en el curso de JS. Elemento p
ETIQUETAS:
Las etiquetas se utilizan para delimitar el principio y el fin de un elemento, por ello existen etiquetas de inicio y etiquetas de cierre. Las etiquetas de inicio se componen de las siguientes partes en el siguiente orden: **Elemento p Un corchete angular <; el nombre de la etiqueta del elemento, en este caso la etiqueta p, que corresponde a un párrafo; opcionalmente uno o más atributos, cada uno de los cuales puede ser precedido por uno o más espacios en blanco, en este caso el atributo id con su respectivo valor “parrafo”; opcionalmente uno o más espacios en blanco, seguido de un corchete angular >. Las etiquetas de cierre se componen de las siguientes partes en el siguiente orden: **Elemento p Un corchete angular <; seguido de un slash /; el nombre de la etiqueta del elemento, en este caso p; seguido opcionalmente de uno o más espacios en blanco y seguido de un corchete angular >. Cabe mencionar que las etiquetas HTML no distinguen mayúsculas de minúsculas , es decir, el tipo de letra no afecta el funcionamiento de las etiquetas en HTML. Sin embargo, usamos las minúsculas. ATRIBUTOS: Sobre los atributos de un elemento, siempre se expresan en la etiqueta de inicio y tienen un nombre y un valor. Veamos los siguientes ejemplos: Atributo vacío: En este caso, se puede escribir solo el nombre del atributo o el nombre del atributo seguido del signo = y dos comillas que no contienen ningún valor.
Elemento p
Elemento p
**Atributo sin comillas:** Podemos escribir el valor del atributo sin utilizar comillas siempre y cuando no existan espacios en blanco.
Elemento p
**Atributo con comillas simples:** Podemos escribir el atributo con comillas simples, así como con **comillas dobles**
Elemento p
Elemento p
2. 3. Elementos estructurales.
En HTML4 tenemos div y span. El elemento div es un contenedor que se puede utilizar para agrupar secciones de contenido en bloque.
2. 4. Elementos para desplegar texto.
s
2. 5. Enlaces (parte 1).
s
2. 6. Enlaces (parte 2).
S
2. 7. Recursos.
HTML5: https://html.spec.whatwg.org/multipage/ Enlaces: https://www.w3.org/TR/html401/struct/links.html Ejemplo: Estructura basada en el elemento div: https://codepen.io/devcodela/pen/NPjXxJ ¿Debería utilizar los elementos B e I? https://www.w3.org/International/questions/qa-b-and-i- tags UTF-8: https://www.ietf.org/rfc/rfc3629.txt Ejemplo: Estructura HTML5 https://codepen.io/devcodela/pen/ZYKogK Ejemplo: Elementos DIV y SPAN https://codepen.io/devcodela/pen/azpmzE Importancia de la declaración DOCTYPE https://www.w3.org/QA/Tips/Doctype
3. CSS.
3. 1. Sintaxis.
3. 2. Selectores simples.
3. 3. Pseudoclases.
3. 4. Pseudoelementos.
3. 5. Combinación de selectores.
3. 6. Colores.
3. 7. Longitudes.
3. 8. Porcentajes.
3. 9. Recursos.
4. MODELO DE CAJA.
4. 1. Ancho y alto.
4. 2. Display.
4. 3. Modelo de caja.
4. 4. Padding (Parte 1).
4. 5. Padding (Parte 2).
4. 6. Bodes (Parte 1).
4. 7. Bordes (Parte 2).
4. 8. Margin.
4. 9. Recursos.
5. POSICIONAMIENTO.
5. 1. Static.
5. 2. Relative.
5. 3. Absolute.
5. 4. Fixed.
5. 5. Float.
6. TIPOGRAFÍA.
