HTML - Lenguajes de marca

LENGUAJE DE MARCAS

Comenzando con HTML

INDICE

INTRODUCCIÓN

TIPOS DE DATOS, OPERADORES Y VARIABLES

nuestro primer programa

ESTRUCTURAS CONDICIONALES

estructuras repetitivas

librerias de python Y FUNCIONES

INTRODUCCIÓN

lenguajes de marcado: ¿qué es?

Los lenguajes de marcado o de marcas son utilizados para estructurar y organizar la información en la web y otros entornos digitales.

DEFINICIÓN

• Un lenguaje de marcado es un sistema de codificación que utiliza etiquetas y marcadores para definir la estructura y el formato de un documento.
• En lugar de utilizar un lenguaje natural como el inglés o el español, los lenguajes de marcas utilizan instrucciones específicas para que las computadoras puedan entender y representar la información de manera coherente.

IMPORTANTE

• Los lenguajes de marcado suelen confundirse con lenguajes de programación. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritméticas o variables, como tienen los lenguajes de programación.

• Ejemplos de lenguajes de marcado son HTML (HyperText Markup Language), XML (eXtensible Markup Language) y Markdown.

mapa de los lenguajes de marcas

LENGUAJES DE MARCA APLICADOS A TECNOLOGÍAS DE INTERNET

• HTML (HyperText Markup Language): Utilizado para crear páginas web y estructurar su contenido.
• Markdown: Empleado para escribir documentos de texto plano con formato ligero, como READMEs en GitHub.
• LaTeX: Utilizado en la producción de documentos científicos y técnicos de alta calidad tipográfica.

LENGUAJES DE MARCA APLICADOS A DOCUMENTOS EN GENERAL

• HTML (HyperText Markup Language): Utilizado para crear páginas web y estructurar su contenido.
• Markdown: Empleado para escribir documentos de texto plano con formato ligero, como READMEs en GitHub.
• LaTeX: Utilizado en la producción de documentos científicos y técnicos de alta calidad tipográfica.

LENGUAJES ESPECIALIZADOS

• SVG (Scalable Vector Graphics): Empleado para la representación de gráficos vectoriales escalables en la web.
• MathML (Mathematical Markup Language): Utilizado para representar expresiones matemáticas de manera estructurada en documentos web.
• CALS (Continuous Acquisition and Life-cycle Support): Utilizado en la industria para la estandarización de formatos de documentos técnicos y manuales.

EJEMPLOS DE LENGUAJES DE MARCA

HTML

MARKDOWN

XML

LENGUAJE DE MARCAS HTML

BREVE HISTORIA HTML

El lenguaje de marcas HTML es un estándar reconocido en todo el mundo y sus normas están definidas en la página web del organismo W3C (World Wide Web Consortium) y en la página oficial del grupo de trabajo WHATWG (Web Hypertext Application Technology Working Group)

• El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) comenzó su desarrollo.

• Sin embargo, no se publicó ningún documento HTML formal hasta el año 1991. Hoy en día, este documento puede ser consultado online.

ETIQUETAS HTML

Todas las etiquetas HTML disponen de los símbolos mayor que y menor que ( < > ), y normalmente se utilizan en parejas. Una al principio (etiqueta de apertura) y otra al final del texto al que afectan (etiqueta de cierre).

• En el siguiente ejemplo se define un párrafo mediante la etiqueta <p>. Observa que la etiqueta de cierre del final incluye una barra inclinada

ETIQUETAS DE AUTOCIERRE

• También existen ETIQUETAS VACÍAS O DE AUTOCIERRE.
• Son aquellas que no contienen contenido entre una etiqueta de apertura y una de cierre
• Estas etiquetas se cierran automáticamente dentro de la etiqueta de apertura.

ELEMENTOS ESTRUCTURALES

ELEMENTOS ESTRUCTURALES

ELEMENTOS ESTRUCTURALES

ETIQUETAS Y ATRIBUTOS

• Las etiquetas se utilizan para marcar o envolver diferentes partes del contenido, como textos, imágenes, enlaces, listas, entre otros elementos. Por ejemplo, <p> define un párrafo y <img> define una imagen.
• Un atributo proporciona información adicional sobre una etiqueta y suele especificarse dentro de la etiqueta de apertura.
• Los atributos modifican el comportamiento o la apariencia de las etiquetas y pueden ser obligatorios u opcionales dependiendo del contexto

EJEMPLOS

• En la etiqueta <html>, el atributo lang especifica el idioma del documento HTML.

• En la etiqueta <meta>, el atributo name especifica metadatos adicionales del documento HTML, como el título o la descripción, lo cual es importante para el SEO y la manera en que los motores de búsqueda indexan una página.

EJEMPLO PRÁCTICO

explicación EJEMPLO PRÁCTICO

• <!DOCTYPE html>: Declara que el documento está escrito en HTML5.
• <html lang="es">: Indica el inicio del documento HTML y establece el idioma del contenido como español, lo que ayuda con la accesibilidad y el SEO.
• <head>: Contiene metadatos sobre el documento.
• <title>Título de la WEB</title>: Define el título de la página web, que aparece en la pestaña del navegador.
• <meta charset="UTF-8">: Especifica la codificación de caracteres. En nuestro caso usamos UTF-8 porque es una codificación de caracteres que permite representar prácticamente todos los caracteres de los distintos lenguajes del mundo de manera universal.
• <meta name="title" content="Título de la WEB">: Proporciona información sobre el título del documento.
• <meta name="description" content="Descripción de la WEB">: Proporciona una descripción del contenido de la página.
• <link href="estilos.css" rel="stylesheet">: Enlaza un archivo CSS externo para dar estilo a la página.
• <style> header {background-color: yellow;} </style>: Incluye un bloque de estilo CSS que establece el color de fondo del elemento header como amarillo.
• <script src="script.js"></script>: Enlaza un archivo JavaScript externo.
• <script type="text/javascript"> /* Código JS */ </script>: Incluye un bloque de código JavaScript interno.
• <body>: Contiene el contenido visible de la página web.
• ¡Hola Mundo!: Texto que se mostrará en la página web.
• <!-- Añade tu código HTML aquí -->: Un comentario HTML que no se mostrará en la página web.

Estructura básica y elementos semánticos

ELEMENTOS SEMÁNTICOS

• Una de las principales ventajas de HTML5 es la inclusión de elementos semánticos, o marcados semánticos, que nos ayudan a definir las distintas divisiones de una página web.
• En las versiones anteriores a HTML5 se solía utilizar la etiqueta <div> para realizar las divisiones de una página web, pero actualmente es recomendado utilizar los elementos semánticos

¿QUE ES UN ELEMENTO SEMÁNTICO?

• Una etiqueta semántica describe su significado. Por ejemplo: <header>, <section>, <footer>, <form>, <table>, <article>, <nav>…
• Ejemplos de elementos no semánticos (no dicen nada sobre su contenido): <div> y <span>.
• Como se puede observar en el esquema de la siguiente figura, mediante marcadores semánticos se puede diferenciar claramente el contenido que referencia cada etiqueta.

CÓDIGO

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML5

CÓDIGO

elementos semánticos

• Las etiquetas <body> <h1> y <main> solo se pueden utilizar una vez por documento HTML, el resto de etiquetas de contenido se pueden usar siempre que sea necesario.

elementos semánticos

Etiquetas de contenido y texto

etiquetas de contenido

Las etiquetas de contenido son las que agrupan el contenido que hay en su interior.

CÓDIGO

etiquetas de contenido

• Con <figure>, se marca el contenido como una unidad independiente relacionada con el texto principal, lo que es útil para imágenes, gráficos o multimedia. Sin <figure>, la imagen simplemente se inserta sin esa estructura semántica ni la opción clara de agregar un pie de foto.

• En HTML (cuando no usas <pre>), los espacios en blanco múltiples, saltos de línea o tabulaciones no se muestran tal cual; se comprimen a un solo espacio

CÓDIGO

etiquetas de contenido

• EJEMPLO

CÓDIGO

etiquetas de contenido: atributos mas usados

Los atributos más usados son id y class.

• id: se utiliza para identificar de manera única a un elemento. Como es un atributo identificativo único, no debemos añadir dos bloques con el mismo valor de id en el mismo documento HTML.

• class: se utiliza para asignar una o varias clases a un elemento HTML. Las clases son muy útiles para aplicar estilos CSS. El mismo valor de class se puede asignar a varios elementos.

CÓDIGO

etiquetas de contenido: ATRIBUTOS MÁS USADOS

Los atributos de las listas en HTML te permiten personalizar tanto las listas ordenadas como las listas no ordenadas.

LISTAS NO ORDENADAS

• Atributo type
• disc»: Puntos sólidos (●, ●, ●, …).
• «circle»: Círculos (○, ○, ○, …).
• «square»: Cuadrados (■, ■, ■, …).

EJEMPLO

LISTAS ORDENADAS

• Atributo type
• «1»: Numeración decimal (1, 2, 3, …).
• «A»: Letras mayúsculas (A, B, C, …).
• «a»: Letras minúsculas (a, b, c, …).
• «I»: Números romanos mayúsculos (I, II, III, …).
• «i»: Números romanos minúsculos (i, ii, iii, …).

• Atributo start: Establece el valor inicial de la numeración de la lista.
• Atributo reversed: Invierte el orden de numeración de la lista.

CÓDIGO

etiquetas de texto

Las etiquetas de texto son las que dan significado a los textos que contienen.

CÓDIGO

etiquetas de texto

EJEMPLO

ETIQUETAS DE TEXTO: HIPERENLACES

Como hemos visto, el elemento <a> o hiperenlace crea un enlace a otra página o archivo

ATRIBUTO HREF

• tel, mailto: enlaces para llamar a un numero y para enviar.

ATRIBUTO DOWNLOAD

• Se utiliza para especificar que un enlace debe ser descargado al hacer clic en él en lugar de navegar hacia él.
• Permite proporcionar un nombre de archivo sugerido para el archivo descargado

ATRIBUTO TARGET

• Se utiliza para especificar dónde se debe abrir el enlace cuando un usuario hace clic en él
• «_blank» Abre el enlace en una nueva ventana o pestaña del navegador.
• «_self» Abre el enlace en la misma ventana o pestaña del navegador (valor predeterminado).
• «_parent» Abre el enlace en el marco principal o padre en caso de que se esté utilizando frames.
• «_top» Abre el enlace en la ventana principal del navegador, reemplazando cualquier frame existente.

¡pongámonos manos a la obra!

1. Crea un programa que pida dos numeros y muestre un mensaje con la suma de los dos números

2. Crea un programa que reciba la base y la altura de un triángulo y muestre un mensaje con su área

3. Crea un programa que reciba una palabra y muestre el número de letras que tiene, la primera letra y las dos últimas

CÓDIGO

resolución

1. Crea un programa que pida dos numeros y muestre un mensaje con la suma de los dos números

CÓDIGO

resolución

2. Crea un programa que reciba la base y la altura de un triángulo y muestre un mensaje con su área

CÓDIGO

resolución

3. Crea un programa que reciba una palabra y muestre el número de letras que tiene, la primera letra y las dos últimas

estructuras condicionales

estructuras condicionales

Todos los lenguajes de programación disponen de estructuras que permiten evaluar expresiones cuyo resultado es True o False y dependiendo del resultado llevar a cabo un determinado bloque de instrucciones y otro.

• A este tipo de estructuras se le llaman estructuras condicionales, evalúan una condición y cuando la condición resulta True ejecutan un determinado código y cuando resultan False pueden ejecutar otro bloque de código.

• En Python estas estructuras vienen definidas con las palabras reservadas: if, else y elif.

estructuras condicionales

• En las siguientes estructuras, la condición representa una expresión cuyo resultado será True o False.
• Podemos encontrarnos con las siguientes construcciones:

estructuras condicionales

• Vamos a poner algunos ejemplos para que se entienda mejor.
• Supongamos que en un programa tenemos una variable numérica, podríamos hacer condiciones de las formas:

operadores lógicos

• Los operadores lógicos son unas operaciones que trabajan con valores booleanos.

• and: "y" lógico. Este operador da como resultado True si y sólo si sus dos operandos son True.

• or: "o" lógico. Este operador da como resultado True si algún operando es True

• not: negación. Este operador da como resultado True si y sólo si su argumento es False.

¿QUÉ VALOR DEVUELVE LA EXPRESIÓN "not True and False"?

Expresiones compuestas

• Al componer expresiones más complejas hay que tener en cuenta que Python evalúa primero los not, luego los and y por último los or.

• Si no se está acostumbrado a evaluar expresiones lógicas compuestas, se recomienda utilizar paréntesis para asegurar el orden de las operaciones.

• El operador not se evalúa antes que el operador and.

• El operador and se evalúa antes que el operador or.

• El operador not se evalúa antes que el operador or.

ejemplos Expresiones compuestas

EJEMPLO 3

EJEMPLO 1

EJEMPLO 2

Leer más

estructuras condicionales TIPO 1

Vamos a hacer un programa que nos pida un número y a continuación nos diga si dicho número es múltiplo de 3 y si es múltiplo, que entonces nos muestre la división de ese número entre 3.

CÓDIGO

TERMINAL

estructuras condicionales TIPO 2

Vamos a hacer un programa que nos pida un número y a continuación nos diga si dicho número es múltiplo de 3 o no lo es y nos muestre la división de ese número entre 3.

CÓDIGO

TERMINAL

estructuras condicionales TIPO 3

En el tipo 3 de estructuras condicionales podemos comprobar que entran en juego varias condiciones, tantas como consideremos oportuno, pero el programa sólo ejecutará el bloque de instrucciones de la primera condición que resulte True

CÓDIGO

condicionales anidadas

¿Y si queremos crear un programa que nos indica si un número es múltiplo de 2,3 y 5? ¿Es posible hacerlo? Anidar estructuras significa incluir unas estructuras dentro de otras.

CÓDIGO DE EJEMPLO

¡pongámonos manos a la obra!

1. Crea un programa que pida un número y muestre un mensaje indicando si es par o impar.

2. Crea un programa que reciba una cadena de texto y devuelva el número de letras que tiene si la cadena no esta formanda por espacios en blanco.

3. Crea un programa que reciba tres número y muestre un mensaje de salida indicando cual es el mayor de los 3.

CÓDIGO

estructuras REPETITIVAS (bUCLES)

estructuras repetitivas

• Las estrucuras repetitivas sirven para poder realizar un gran número de operaciones escribiendo muy poco.
• Reciben el nombre de bucles, y en Python, encontramos 2 tipos de construcciones, las que podemos llevar a cabo con la palabra reservada for y las que podemos realizar con la palabra reservada while.

BUCLES FOR y tipos de objetos iterables

Un bucle for consta de una variable, un objeto iterable y un bloque de código.

¿QUE ES UN OBJETO ITERABLE?

• Se trata de un conjunto de valores que la variable irá tomando en cada una de las veces que ejecutará el bloque de código.

• En Python tenemos muchos objetos iterables y además podemos construir los nuestros propios.

EJEMPLO: Objeto iterable 1 (TUPLA) La variable n ha tomado el valor n=1 y ha ejecutado el bloque de código que en esta ocasión es una única instrucción. La variable n ha tomado el valor n=2 y ha vuelto a ejecutar el bloque de código. Así sucesivamente hasta recorrer todos los valores del objeto iterable. ¿Cómo sería su diagrama de flujo?

BUCLES FOR y tipos de objetos iterables

Un bucle for consta de una variable, un objeto iterable y un bloque de código.

EJEMPLO: Objeto iterable 2 (LISTAS)

• El objeto iterable lo hemos definido en la línea 1 en donde hemos declarado una variable nombres que contiene una lista de nombres propios.
• En la línea 2 definimos el bucle, donde la variable n recorre la lista de nombres.
• En la línea 3 mostramos el valor que va tomando la variable n en cada una de las iteraciones del bucle.
• En la línea 4, mostramos el valor de n, la longitud de la cadena de caracteres n.

¿Cuántas veces se repite el bucle y por qué?

BUCLES FOR y tipos de objetos iterables

Un bucle for consta de una variable, un objeto iterable y un bloque de código.

EJEMPLO: Objeto iterable 3 (CADENA DE TEXTO)

• En el bucle for la variable es c y va tomando cada uno de los caracteres que hayamos introducido a través de la instrucción input y almacenado en la variable palabra.
• Una cadena de texto también es un objeto iterable, siendo cada uno de los caracteres los elementos que se iteran en cada uno de los ciclos.
• En la línea 5 hemos utilizado la función ord() que nos devuelve el valor unicode del carácter que se le pasa como parámetro.

¿Cuántas veces se repite el bucle y por qué? RETO: ¿Eres capaz de sumar 100 primeros numeros con un bucle for?

BUCLES FOR y la función range

La función range tiene la siguiente sintaxis: range(valorinicial, valorfinal, incremento)

• Esta función nos devuelve un objeto iterable que incluye valorinicial como primer elemento y llega hasta una unidad menos de valorfinal.

• Incremento es un parámetro opcional que indica el incremento de la variable del bucle en cada iteración. Si se omite el incremento, por defecto se establece a 1.

EJEMPLO: Objeto iterable 4 (RANGOS)

ESTRUCTURA WHILE

Un bucle while ejecuta un bloque de instrucciones hasta que la condición deja de ser True.

EJEMPLO: Bucle while 1

El mecanismo de uso habitual de los bucles while, siempre es el siguiente:

• En la condición del bucle while entran en juego una o más variables que han sido declaradas previamente.

• Dentro del bloque de instrucciones, algunas de las variables que forman parte de la condición son modificadas según el objetivo del programa.

• El bloque de instrucciones se repite mientras que las condición resulte verdadera.

ESTRUCTURA WHILE

Pasos para definir un bucle while:

1. Definir una variable de control del bucle con valor True. Esta variable será la condición del bucle.
2. Dentro del bucle realizaremos alguna comprobación con una estructura condicional que servirá para modificar el valor de la variable de control que hemos definido en el paso anterior.
3. El bloque de instrucciones del bucle se estará repitiendo mientras no cambie la variable de control.

EJEMPLO: Bucle while 2

CONTADORES Y ACUMULADORES

Los contadores y acumuladores son variables auxiliares (no están definidas inicialmente en nuestro problema) y nos ayudarán a llevar el control de nuestro programa, así como almacenar información.

EJEMPLO: Contadores y acumuladores

¡pongámonos manos a la obra!

1. Crea un programa que indique la paridad de la siguiente lista de números: L =[-4, 5,9,245, 1222, -986, 13]

2. Crea un programa que reciba una cadena de texto contabilice el número de palabras que lo componen.

3. Crea un programa que indique el mayor y el menor de la siguiente lista de números: L =[-4, 5,9,245, 1222, -986, 13]

CÓDIGO

Librerías Y FUNCIONES

librerias de python

Las librerías, o también llamados módulos, suelen ser colecciones de funciones, constantes, clases, objetos, ... que tenemos agrupados bajo un mismo nombre. EJEMPLO: En el módulo math, hay disponible funciones para la realización de cálculos matemáticos como logaritmos, exponenciales, raíces, redondeos, trigonometría, m.c.d., etc.

¿CÓMO SE USAN LAS LIBRERÍAS? Forma 1: import math Al usar el módulo math de esta manera estamos importando todas las funciones que contiene el módulo y por tanto a partir de este momentos todas están disponibles anteponiéndoles el nombre del módulo.

Forma 2: from math import sqrt, gcd Sólo importamos las funciones sqrt y gcd, es decir, sólo importamos las funciones enumeradas en la importación.

Una variante de esta segunda forma es: from math import * así estamos importando todas las funciones y podemos usarlas directamente sin necesidad de anteponer el nombre del módulo.

LIBRERÍAS COMUNES Y DE USO FRECUENTE

EL MÓDULO RANDOM Nos permite disponer de herramientas para la generación de resultados aleatorios dentro de nuestros programas.

EL MÓDULO MATH Incluye funciones para realizar operaciones matemáticas. La librería math pone a disposición algunas constantes como son los números pi y e.: math.pi y math.e. EJEMPLO: suma iterable

EJEMPLO: random

LIBRERÍAS COMUNES Y DE USO FRECUENTE

EL MÓDULO TIME

• Python utiliza el concepto de marca de tiempo (timestamp), con una precisión de una millonésima de segundo.
• Se basa en el reloj interno que tienen nuestros equipos. Esta instante (timestamp), Python lo gestiona internamente como un valor numérico.
• En el momento del diseño de Python, se acordó establecer el momento 0 en el 1 de enero de 1970 as las 00:00:00. Por lo tanto, el número que obtenemos al ejecutar la función time() del módulo time, representa la cantidad de segundos transcurridos desde el momento 0.

EJEMPLO: tiempos 1

EJEMPLO: tiempos2

LIBRERÍAS COMUNES Y DE USO FRECUENTE

EL MÓDULO DATETIME

• Este módulo pone a disposición varios objetos (clases) que disponen de muchas características, se trata de datetime.date, datetime.time y datetime.datetime
• datetime.date.today() nos suministra la fecha actual.
• datetime.datetime.today() nos suministra la fecha y la hora actual.

EJEMPLO: fechas 1

¡pongámonos manos a la obra!

1. Crea un programa que obtenga la raíz cuadrada de todos los números impares entre 1 y 100.

2. Crea un programa que solicite una palabra y a continuación muestre un carácter aleatorio de los que contenga la palabra introducida.

3. Crea un programa que nos pida introducir una palabra y nos indique el tiempo que hemos tardado en introducir la palabra.

CÓDIGO

definición de funciones

• Las funciones nos ayudan a organizar el código de nuestra aplicación.
• Si nuestro programa comienza a tener una extensión considerable, será recomendable separar nuestro código en funciones que cada una de ellas realice una tarea determinada del programa.

¿CÓMO DEFINIR UNA FUNCIÓN?

• Las funciones debemos definirlas al principio de nuestro archivo.
• Es necesario darle un nombre a la función, y generalmente tendremos que pasarle unos valores para que la función realice los cálculos o las tareas necesarias con esos valores.
• A los valores que se le pasan a la función se le llaman parámetros o argumentos, y una función puede recibir uno, varios o ninguno.
• También es habitual que las funciones devuelvan un valor, aunque no es obligatorio.

ESTRUCTURA

EJEMPLO:

¡pongámonos manos a la obra!

1. Crea un programa que que obtenga la raíz cuadrada de todos los números pares entre 1 y 100.

2. Realiza un programa que genere 2 número aleatorios entre 1 y 6 simulando el lanzamiento de dados. Debe mostrar los 2 números obtenidos y la suma de dichos números.

3. Realiza un programa que genere 10 fechas aleatorias a partir de la fecha de hoy

CÓDIGO