CLASE # 9: HTML5, CSS Y JAVASCRIPT

HTML: es el lenguaje de marcado (markup), basado en etiquetas y funciona para organizar y describir el contenido de las páginas web.
Anatomía de elementos HTML:
La descripción del contenido de la página se encuentra en medio de las etiquetas, las cuales de abren y cierran. Puede tener elementos como
Doctype: el cual informa al navegar sobre el tipo de documento y la versión html usada.
Html: es el tag o contenido de la página web.
Head: es una etiqueta que brinda información al navegador pero no se muestra en la página ni forma parte de la estructura.
Body: se refiere a la información que se debe mostrar en la página web.
En HTML también se encuentran varios elementos de textos como:
Cabeceras o títulos:

Título 1

Título 2

Título 3


Párrafos

Texto de prueba


Texto en negrilla y en itálica

orem ipsum dolor sit amet adipisicing elit. Ullam labore blanditiis eum necessitatibus eius maiores numquam dolorum
repellendus dignissimos! Laborum debitis sunt voluptate! Placeat aliquid aut eveniet amet quia magni.


Adicionalmente, se pueden establecer los siguientes tipos de listas:
Listas ordenadas

  1. item 1

  2. item 2

  3. item 3


Listas sin orden

  • item 1

  • item 2

  • item 3


Listas de descripción

leche

Bebida color blanco

leche

Bebida color blanco


Las etiquetas también permiten:
Poner imágenes
texto alternativo
Enlaces
Enlace
Etiquetas semánticas:
Existen distintas etiquetas que permiten estructurar y subdivir la página web en partes importantes, estos son:
Header: encabezado de la página
Nav: se utilizar para navegar dentro de la página, por ejemplo, menús o barras de navegación.
Article: delimita el contenido de la página.
Section: se usa para dividir en secciones una página.
Main: contenido principal de la página.
Aside: se utiliza para mostrar enlaces de sitios web externos.
Footer: relacionado con el pie de página.
CCS: es una capa de estilo de las páginas web, contiene varias propiedades que permiten darle formato al contenido como fuentes, espaciado y ubicación. Esto se da a partir de la siguiente forma:

Es importante resaltar que para modificar ciertos elementos del documento hay que tener en cuenta los atributos class y el id de los elementos html, los cuales aplican cambios de distintos elementos o uno específicos.

Aplicar estilos:
Este proceso se puede hacer de tres maneras:
Inline: para elementos específicos

Texto de prueba


Internos: usando style dentro del head del html para estilos a toda la página

Externos: importando un archivo CSS externo en el cual están guardados los estilos a usar.


Continuación de la clase CSS:
Es posible usarlo en todos los elementos si necesidad de especificar la clase
first-child: aplica el estilo al primer elemento que encuentre de esa clase
last-child: aplica el estilo al último elemento que encuentre de esa clase
nth-child(X): aplica el estilo al n-ésimo elemento que encuentre de esa clase y la X significa el número al que se va asignar el estilo. También puede darse el parámetro de ‘odd’ para coger los ítems impares.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Implementación backend y Docker: Sistema computarizado de datos LIS perfil lipídico

Imagen
El link del repositorio es: https://github.com/DanielVallejo98/TECNOLOGIASWEB-BACKEND-FRONTEND-MONGO-DOCKER Para la implementación del backend de la aplicación de frontend realizada en React se hizo uso de Docker, la cual es una tecnología que permite contener imágenes de software (node,python,etc). Como parte de backend se utilizó el framework Flask de python. En este se configuró el servidor el cual va a responder a las peticiones realizadas desde el frontend.  Para implementar todo el trabajo se partió del repositorio dado en clase y se realizó una inspección del mismo para poderlo adaptar el proyecto.  Luego de eso se tomó la decisión de implementar un nuevo proyecto con un dockerfile distinto al dado. La decisión de realizar un proyecto a parte se tomó debido a que el repositorio dado en la clase hacía difícil implementar el hot reload del frontend (tocaba aplicar el comando de instalar los dependencias y el build para servirlo con nginx, y normalmente tardaba demasi...
Leer más

CLASE # 3: BASES DE DATOS

Imagen
En esta clase se abordó el tema de bases de datos, cuya definición establece que son un conjunto de datos que se vinculan entre sí y que contienen un grupo de programas para poder acceder posteriormente a los datos, generalmente se almacena información relevante para las empresas. También se comentó que existen dos tipos de bases de datos: las relacionales y no relacionales. Las bases relacionales más conocidas son Access, Oracle, MariaDB, MySQL y PostgreSQL. A su vez, hay ciertos conceptos que se deben tener en cuenta dentro de las bases relacionales: - Entidad: es un objeto del mundo real que sobresale de otros objetos y se describen mediante atributos. - Relaciones: se refiere a la asociación entre entidades. - Clave primaria: campos que identifican inequívocamente una entidad de otra. Se evidenciaron una serie de pasos para la creación de bases de datos, estos son: 1. Determinar los campos 2. Identificar tablas 3. Agrupar 4. Definir el campo clave 5. Definir relaciones
Leer más

Clase 1: Introducción al curso y a Linux

 En esta sesión se dio la introducción al curso. Se exploraron algunos conceptos generales de desarrollo web, tales como el front-end (desarrollo web enfocado en la experiencia visual del sitio web), el backend (desarrollo web enfocado en el manejo de la información y el almacenamiento de datos por parte de un lenguaje de programación, servidores y bases de datos).  Posterior a esta introducción se empezó a explicar la unidad de Linux. Linux es un sistema operativo o kernel el cual es muy usado para el desarrollo web debido a que es un sitema operativo de código abierto lo cual es útil ya que permite modificar el código fuente del sistema en areas especificas o estratégicas, cosa que otros sistemas operativos no permiten o es más complicado. Luego de eso se utilizaron VAGRANT y VIRTUAL BOX, programas que sirven para crear máquinas virtuales que crean una máquina virtual que ejecuta los comandos de un sistema operativo Linux, puesto que en mi caso, el sistema operativo original...
Leer más