ACTIVIDAD DE NIVELACIÓN INFORMATICA
DIEGO ALEJANDRO CASTAÑO
GRADO ONCE
INSTITUCION EDUCATIVA TECNICO CRUSTO REY
ARAUCA
2025
ACTIVIDAD DE NIVELACIÓN INFORMATICA
CREACIÓN DE UNA PÁGINA WEB PERSONALIZADA EN HTML
GRADO ONCE
Objetivo:
Desarrollar una página web sencilla utilizando HTML en Visual Studio
Code, incorporando elementos básicos como encabezados, párrafos,
listas, imágenes y personalización de estilos.
Materiales Necesarios:
- Computadora con Visual Studio Code instalado.
- Navegador web.
- imágenes.
I. Actividad practica:
Instrucciones:
1. Creación del archivo HTML
- Abre Visual Studio Code.
- Crea una nueva carpeta para el proyecto.
- Dentro de la carpeta, crea un archivo llamado index.html.
- La temática abordar dentro de la página sobre los sitios
turísticos del Colombia.
3. A través de una lista presentar los lugares turísticos de Colombia y
realizar la descripción.
4. insertar imágenes desde servido y local o como enlace web de la
temática.
A tener en cuenta de la actividad practica:
- La página debe incluir un encabezado con el título de la página.
- Debe contener párrafos <p> hablando sobre un tema de interés.
- Debe incluir listas <ol> o <ul> con al menos cinco elementos.
- Debe mostrar correctamente una imagen desde Internet y desde el
equipo de forma local.
- Se valorará la creatividad.
II. Actividad teórica
Realizar la descripción de las etiquetas de texto, de enlaces, de listas,
e imágenes, tablas trabajadas en clase. Adjunto el documento de
referencia para tomar la información:
https://eliseovega.github.io/curso_html.html#section1
Entrega:
Se debe entregar en la clase siguiente a la semana de retorno de
vacaciones de semana santa.
Los estudiantes deben guardar su archivo index.html y compartirlo con
el docente a través de una carpeta en la nube o mediante una
memoria USB.
Debe ser entregado impreso el plan de nivelación completo, con la
actividad practica (el código y foto de la imagen de la página web) y
teórica.
Pagina Web
Código HTML
Actividad teórica
Realizar la descripción de las etiquetas de texto, de enlaces, de listas, e
imágenes, tablas trabajadas en clase. Adjunto el documento de referencia
para tomar la información:
https://eliseovega.github.io/curso_html.html#section1
Etiquetas para Texto y Formato de Texto
Las etiquetas para texto en HTML, así como las etiquetas de formato,
aquellas que se emplean exclusivamente para crear elementos de texto y
controlar su formato hasta cierto punto, HTML nos permite indicar cómo se
muestra un texto en la página web mediante las etiquetas correspondientes.
Etiquetas para Texto
Como su nombre lo indican, las etiquetas para texto permiten modificar la
apariencia que tendrá un bloque de texto al interior de la página.
Las etiquetas que siempre indican texto:
Etiquetas para Formato de Texto
Esta etiquetas indican un formato semántico en el texto:
1. Etiquetas para Enlaces
Esta etiqueta se utiliza para crear los llamados enlaces, hipervínculos o link.
Lo más importante de los documentos HTML son los enlaces. Ya que
mediante los enlaces en HTML podemos comunicar una página con otra, un
documento ó ubicación dentro de la misma pagina.
Aprender a colocar enlaces en HTML a nuestras páginas web, es una tarea
muy fácil y a la vez muy útil para mejorar el uso de la pagina, tiene la función
de dirigir a los usuarios a otras direcciones URL, además de ello conoceremos
los atributos que corresponden a enlaces HTML.
Para definir enlaces o hipervínculos utilizaremos la siguiente etiqueta:
2. Atributos para enlaces HTML
Existen varios atributos para los enlaces, en esta Guia de aprendizaje los
desarrollamos detalladamente cada uno de ellos, pero a continuación veamos
un resumen de todos ellos:
3. Tipos de Enlaces
Para estudiar en profundidad los enlaces tenemos que clasificarlos por su
tipo, porque dependiendo ese tipo algunas cosas cambiarán a la hora de
construirlos.
1. Etiquetas para Listas
Las listas en html son elementos muy importantes de alto significado
semántico, en esta ocasión aprenderemos todo sobre ellas, además
aprenderemos a hacer listas ordenadas y sin ordenar, con viñetas de varios
tipos, etc.
Para empezar, existen dos tipos de listas html en general: listas ordenadas y
listas sin ordenar, a continuación veamos como se implementa cada uno y
sus diferencias.
Para definir las listas utilizaremos la siguiente etiqueta:
2. Listas no ordenadas <ul> en HTML
Una lista no ordenada en HTML es aquella en la que los elementos no están
enumerados ni marcados por algún caracter que designe orden. Los
elementos están simplemente listadas con alguna viñeta predeterminada
como puede ser un punto u otro tipo como veremos más adelante.
Una etiqueta <ul> contiene a todas los elementos de la lista y dentro de ella
irán los atributos que afectan a toda la lista en bloque.
Los elementos de la lista propiamente dichos, se especifican en una etiqueta
<li>, de tal manera que cada elemento es independiente de otro elemento.
Ejemplo de listas no ordenadas:
3. Listas ordenadas <ol> en HTML
Una lista ordenada en HTML es aquella en la que los elementos estan
enumerados o marcado con algún signo alfanumérico que indique el orden de
los elementos.
Se utiliza la etiqueta <ol> para crear listas ordenadas, entre la etiqueta de
apertura y cierre irán los elementos de la lista dentro de una etiqueta <li>
respectivamente.
En cualquier caso la etiqueta <li> sirve para indicar los elementos de la lista,
independientemente de si son ordenadas o desordenadas.
Ejemplo de listas ordenadas:
4. Listas Anidadas en HTML
Se puede decir que es una lista dentro de otra lista, donde podemos ingresar
etiquetas <ul> o <ol> justo después de una etiqueta <li> podemos
conseguir sublistas o listas dentro de listas.
Ejemplo de listas anidadas:
1. Etiqueta para imágenes
Insertar una imagen en HTML es muy simple, simplemente debemos indicar
que el elemento es una imagen y cuál es el archivo o donde esta ubicado
para que sea mostrado en el navegador:
La etiqueta que utilizaremos para insertar una imagen es <img>. Esta
etiqueta no posee su cierre correspondiente y en ella hemos de especificar
obligatoriamente la ubicación de nuestro archivo gráfico mediante el atributo
src.
Para definir una imagen utilizaremos la siguiente etiqueta:
2. Atributos para imágenes
Estos son los atributos que acompaña la etiqueta <img>:
Ejemplos de los atributos width y height :
Con estos atributos redimensionas la imagen al tamaño de ancho y alto
indicado, pero la imagen realmente tiene su propio tamaño
3. Formatos de imágenes soportados
En el area del diseño grafico existen múltiples formatos de imágenes, pero no
todos se usan en el desarrollo web. Veamos los formatos más utilizados y
cuales son más apropiados:
Cualquier otro formato no mostrado en esta lista no está recomendado para
utilizar en web. Formatos como BMP, TIFF, RAW, NEF, PSD, CDR son formatos
muy pesados o no orientados para su uso en la web.
4. URL con rutas relativas o absolutas
A la hora de indicar una URL para imágenes, se puede hacer de varias
formas:
Ejemplo de listas anidadas
El usuario puede utilizar la forma de indicar la ruta que prefiera, eso sí, se
aconseja ser coherente y utilizar siempre que se pueda un mismo formato de
ruta. Particularmente la ruta relativa ascedente.
Etiqueta para Tablas
Una tabla en HTML nos permite organizar los datos en una estructura
formada por filas horizontales y columnas verticales, la intersección entre fila
y columnas es lo que llamaremos celdas.
Veamos las etiquetas básicas para crear una tabla de la forma más sencilla
posible:
2. Estructura Sencilla de una Tabla
Para crear una tabla sencilla se ha de utilizar en primer lugar la etiqueta
<table>, la cual define la tabla. Y dentro de ella se han de situar por cada fila
una etiqueta <tr>, mientras que por cada celda dentro de la fila, se puede
utilizar una etiqueta <th> o <td>, dependiendo de que sea una celda de
cabecera o normal.
Ejemplo de una tabla con 1 fila y 3 columnas con border 1px :
Ejemplo de una tabla con 2 fila y 3 columnas con borde de 1px:
Ejemplo de una tabla con encabezado 3 fila y 3 columnas con borde de 1px:
3. Tabla con combinación de columnas
Uno de los atributos que se pueden aplicar a las etiquetas de celda,
independientemente que sean de encabezado o celdas normales:
4. Tabla con combinación de filas
Al igual que se puede realizar la combinación de columnas, también se puede
realizar la combinación de filas, mediante el atributo rowspan:
5. Estructura Avanzada de una Tabla
Estas etiquetas sirven para identificar la cabecera, el cuerpo y el pie de la
tabla, en algunas ocasiones necesitamos definir cuál será la cabecera de
nuestra tabla, el cuerpo y el pie de tabla dandole significado para los motores
de busqueda.
Etiquetas Semanticas:
