Guardar como MENU (SU NOMBRE) no olvide colocar .HTML
nav con la clase menu. Los estilos CSS para el menú se definen dentro de la etiqueta style en el encabezado del documento HTML. En este caso, el menú tiene un fondo de color #333 (un tono de gris oscuro), y el texto es de color blanco. Los enlaces dentro del menú se definen con un margen de 10 píxeles y un tamaño de fuente de 18 píxeles. Para crear una figura ASCII en HTML, puedes utilizar la etiqueta pre y escribir el diseño de la figura utilizando caracteres ASCII. Aquí te mostramos un ejemplo:
TRABAJELO EN EL BLOCK DE NOTAS COMO SIEMPRE COMO EDITOR DE HTML.
EL NOMBRE DE SU ARCHIVO SERÁ OSO.HTML
¿QUÉ ES CÓDIGO ASCII?
El código ASCII (American Standard Code for Information Interchange) es un conjunto de caracteres que se utilizan para representar letras, números, signos de puntuación y otros símbolos en una computadora. Fue desarrollado por la Asociación Estadounidense de Estándares (ASA) en la década de 2000 y se convirtió en el estándar de codificación de caracteres en las computadoras y dispositivos electrónicos.
El código ASCII incluye 128 caracteres diferentes, numerados del 0 al 127, que se representan mediante números binarios de 7 bits. Los caracteres incluyen letras mayúsculas y minúsculas, números, signos de puntuación, caracteres especiales como el símbolo del dólar y los caracteres de control como el salto de línea y el retorno de carro.
El código ASCII se utiliza para la comunicación entre dispositivos y para el almacenamiento de información en formato de texto en una computadora. También es la base de muchos otros sistemas de codificación de caracteres, como Unicode y el conjunto de caracteres ISO 8859.
COPIAR EN SU CUADERNO. TODO. LUEGO EJECUTAR EL PROGRAMA DEL CUADRO NEGRO, PROBARLO, CORREGIRLO SI ES NECESARIO. ENVIAR AL PROFESOR
Primero, puede comenzar creando una estructura básica de una página web utilizando HTML. Por ejemplo:
En este ejemplo, se crea una página web con un encabezado, un párrafo y tres imágenes. Las imágenes se deben guardar en el mismo directorio que el archivo HTML y se deben especificar sus nombres en el atributo src.
Después de esto, puede buscar imágenes en internet que sean relevantes para la práctica de diseño web. Hay muchos sitios web que ofrecen imágenes gratuitas que se pueden usar con fines educativos y no comerciales, como Unsplash, Pexels y Pixabay.
Una vez que haya encontrado las imágenes que desea utilizar, asegúrese de verificar las restricciones de uso y proporcionar crédito si es necesario. Luego, puede descargar las imágenes y agregarlas a su página web como se muestra en el ejemplo anterior.
Recuerde que el código HTML es solo una parte de la creación de una página web. También necesitará agregar estilos CSS para hacer que la página se vea atractiva y fácil de usar.
PRÁCTICA 3
Este código comienza con la declaración <!DOCTYPE html>, que indica que estamos utilizando la versión más reciente de HTML. Luego, la etiqueta html define el comienzo del documento HTML.
El encabezado de la página está contenido dentro de las etiquetas head, y contiene el título de la página, que aparecerá en la pestaña del navegador.
El contenido real de la página está dentro de las etiquetas body. En este ejemplo, hay un encabezado que se muestra con la etiqueta header, que contiene un título usando la etiqueta h1.
El contenido principal de la página está dentro de la etiqueta main. Aquí hay un párrafo que se muestra con la etiqueta p. Después del párrafo, hay una lista no ordenada usando la etiqueta ul. Cada elemento de la lista está contenido dentro de la etiqueta li.
Este es solo un ejemplo simple para principiantes. HTML es un lenguaje muy extenso y existen muchas etiquetas y atributos que se pueden usar.
+ + P R A C T I C A + +
EJERCICIO 1
**Realizar el siguiente ejercicio de HTML
Recuerde TRABAJARLO EN EL BLOCK DE NOTAS y grabarlo con un nombre .html
HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web. Es un lenguaje que permite estructurar y presentar el contenido de una página web, mediante el uso de etiquetas (tags) que indican al navegador cómo mostrar el contenido.
HTML se utiliza para describir la estructura y contenido de una página web, es decir, para definir los elementos como encabezados, párrafos, listas, tablas, imágenes y enlaces, entre otros. Los navegadores web interpretan el código HTML y lo utilizan para renderizar la página web que se muestra al usuario.
HTML es un lenguaje muy importante en la creación de páginas web y es uno de los bloques de construcción fundamentales de la web. Es un lenguaje fácil de aprender y utilizar, y es ampliamente utilizado en el desarrollo web tanto por profesionales como por aficionados.
Ejemplo de Etiquetas HTML
Un documento HTML contiene marcas (etiquetas), las cuales se escriben empleando los caracteres menor que "<", mayor que ">" y barra inclinada "/".
Por ejemplo, las etiquetas de inicio (<html>) y fin (</html>) representan al elemento raíz ("html") que en todo documento HTML hay que escribir.
<html> </html>
Dentro del elemento "html", es decir, entre <html> y </html>, se debe escribir el elemento "head" que, como iremos viendo a lo largo del tutorial, puede contener diversa información sobre el documento:
<html>
<head>
</head>
</html>Entre <head> y </head> se pueden escribir otros elementos. Por ejemplo, el elemento "title", el cual sirve para indicar el título del documento.
<html>
<head>
<title>Ejemplo de 2 párrafos</title>
</head>
</html>Véase en el ejemplo "dos-parrafos.html" que, el texto escrito entre <title> y </title>, es decir "Ejemplo de 2 párrafos", se visualiza en la parte superior de la pestaña donde se muestra la página web en el navegador.
En un documento HTML, después del "head", hay que escribir el elemento "body":
<html>
<head>
<title>Ejemplo de 2 párrafos</title>
</head>
<body>
</body>
</html>El elemento "body" alberga todo el contenido (párrafos, imágenes, vídeos...) del documento, los cuales se mostrarán en el navegador.
En este caso, entre <body> y </body> se incluyen dos elementos "p" delimitados por la etiqueta de inicio <p> y la de cierre </p>:
<html>
<head>
<title>Ejemplo de 2 párrafos</title>
</head>
<body>
<p>Esto es un párrafo.</p>
<p>Esto es otro párrafo.</p>
</body>
</html>Finalmente, completaremos el código de este primer ejemplo añadiendo:
<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>Ejemplo de 2 párrafos</title> </head> <body> <p>Esto es un párrafo.</p> <p>Esto es otro párrafo.</p> </body> </html>
<!DOCTYPE html> en la primera línea. Esta es la forma de indicar al navegador donde se visualice el documento que este está escrito en la versión HTML5.
lang="es-ES" en la etiqueta de inicio <html>. Esto sirve para especificar, mediante el atributo lang, el idioma del contenido del elemento "html". En este caso español (España). Otros posibles valores del atributo lang son: "es-AR" para español (Argentina), "es-CO" para español (Colombia), "es-MX" para español (México), etc.
<meta charset="utf-8"> dentro del elemento "head". Así, se indica la codificación de caracteres del documento, en esta ocasión UTF-8 (8-bit Unicode Transformation Format, Formato de Transformación Unicode de 8 bits). Obsérvese que, el elemento "meta" está vacío (no tiene contenido) y, en consecuencia, no necesita ser cerrado escribiendo </meta>.
De esta forma, hemos escrito la estructura básica de un documento HTML que muestra por pantalla dos párrafos. Gráficamente, los elementos utilizados se pueden representar del siguiente modo:
Nota: los documentos HTML están formados por elementos cuya gran mayoría deben escribirse delimitados por una etiqueta de inicio <etiqueta> y otra de fin </etiqueta>, tales como: "html", "head", "body", "title" o "p". No obstante, existen otros elementos que no necesitan ser cerrados con la etiqueta de fin, como por ejemplo: "meta".
Por ejemplo, con el Bloc de notas de Microsoft Windows, podemos crear el siguiente archivo "dos-parrafos.html" (la extensión del archivo puede ser ".html" o ".htm"):
A la hora de guardar el archivo, pinchando en "Archivo" > "Guardar como...", es importante hacerlo codificado en UTF-8, como se muestra en la siguiente imagen:
El resultado sería el esperado. Ahora bien, si se guardase codificado en ANSI en vez de UTF-8, en pantalla se visualizaría algo parecido a:
| Ejercicio |
|---|
En un navegador es posible ver el código fuente de un documento HTML. Por ejemplo, en Google Chrome se puede ver pulsando el botón derecho del ratón sobre la pantalla y seleccionando "Ver código fuente de la página":
En este caso se verá:
Copie en su cuaderno y resuelva correctamente:
¿Qué es la programación? La programación es el proceso de diseñar, codificar, probar y mantener el código fuente de un software.
¿Qué es un lenguaje de programación? Un lenguaje de programación es un conjunto de reglas y símbolos utilizados para escribir código que se pueda ejecutar en una computadora.
¿Cuáles son los tipos de lenguajes de programación? Hay varios tipos de lenguajes de programación, incluyendo lenguajes de programación de bajo nivel, lenguajes de programación de alto nivel, lenguajes de programación interpretados, lenguajes de programación compilados y lenguajes de programación orientados a objetos.
¿Qué es un algoritmo? Un algoritmo es un conjunto de instrucciones que se utilizan para resolver un problema o realizar una tarea específica.
¿Qué es una variable en programación? Una variable es un contenedor que se utiliza para almacenar un valor en la memoria de una computadora. El valor de una variable puede cambiar a lo largo del tiempo, dependiendo de cómo se utilice en el código.
¿Qué es una estructura de control de flujo? Una estructura de control de flujo es un conjunto de instrucciones que se utilizan para controlar el orden en el que se ejecutan las instrucciones en un programa. Algunos ejemplos de estructuras de control de flujo incluyen bucles, condicionales y saltos.
¿Qué es una función en programación? Una función es un conjunto de instrucciones que se agrupan para realizar una tarea específica en un programa. Las funciones se utilizan para evitar la repetición de código y para hacer que el código sea más fácil de leer y mantener.
¿Qué es un arreglo en programación? Un arreglo es una estructura de datos que se utiliza para almacenar una colección de valores en una sola variable. Cada valor en un arreglo se identifica mediante un índice.
¿Qué es una clase en programación orientada a objetos? Una clase es una plantilla para crear objetos en la programación orientada a objetos. Una clase define los atributos y métodos que se utilizan para crear y manipular objetos.
¿Qué es un IDE? Un IDE (Entorno de Desarrollo Integrado) es un software que proporciona herramientas para desarrollar, depurar y probar software. Un IDE generalmente incluye un editor de código, un depurador y un compilador o intérprete.
Copiar el diagrama de flujo utilizando las figuras correctas:
Problema: Quieres preparar una taza de té. ¿Cómo lo harías?
Solución:
Escribe un diagrama de flujo para determinar si un número ingresado por el usuario es positivo, negativo o cero.
Solución:
Este diagrama de flujo comienza en el paso 1, donde se inicia el programa. Luego, en el paso 2, se le pide al usuario que ingrese un número. En el paso 3, se verifica si el número es mayor que cero. Si es así, el programa va al paso 6 y muestra el mensaje "El número es positivo". Si el número es menor que cero, el programa va al paso 7 y muestra el mensaje "El número es negativo". Si el número es igual a cero, el programa va al paso 8 y muestra el mensaje "El número es cero". Finalmente, el programa termina en el paso 9.