Octava Guia de Informatica Del Grado Once

SEDE: PRINCIPAL JORNADA: MAÑANA GRADO: UNDÉCIMO
ÁREA: TECNOLOGÍA E INFORMÁTICA PERIODO: 3 FECHA: 11 de agosto 2021

ASIGNATURA o ESPECIALIDAD: TECNOLOGIA E INFORMÁTICA
DOCENTE: CARLOS ANDRES ARIAS Email: caa426@hotmail.com Celular: 3115274542
NOMBRE GENERAL ACTIVIDAD: ESTRUCTURA BASICA EN HTML.

TIEMPO TOTAL DE LA ACTIVIDAD EN GENERAL: 2 HORAS
RECOMENDACIONES GENERALES
1. Para el desarrollo de las actividades debe prevalecer los valores de la Honestidad y
Responsabilidad como principios de formación personal.
2. El estudiante debe primero leer la guía completamente antes de desarrollarla.
3. Se recomienda ver los links y hacer uso de esta ayuda solo a los estudiantes que tengan la
posibilidad de utilizar las redes sin afectar los datos que se emplean en la casa para comunicarse.
4. Resolver la actividad en el tiempo estipulado y enviar los resultados oportunamente.
5. Recordar que se debe portar el Uniforme correspondiente, cuando se envíen evidencias
fotográficas o visuales en las que aparece el estudiante. Las mismas deben ser autorizadas
mediante mensaje por el Padre de Familia o Acudiente.
6. No olvidar etiquetar la información a enviar: Escribir el Nombre Completo, Grado y Nombre
General de la Actividad.
7. El estudiante puede participar de forma voluntaria, en orientaciones académicas virtuales
organizadas por el docente con el empleo de aplicaciones y herramientas tecnológicas. Ellas no
afectarán la Jornada Normal de clase, ni la Valoración.
MOMENTO INICIAL
COMPETENCIA ESPECIFICA A DESARROLLAR
Resuelvo problemas tecnológicos y evalúo las soluciones teniendo en cuenta las condiciones,
restricciones y especificaciones del problema planteado.
En la presente guía se plantea la estructura básica en el lenguaje HTML con ejemplos para
tomarlos como referencia ppara realizar nuestra propia página, para ellos se debe realizar la
lectura que se encuentra en las páginas 1 a la 3, después de la lectura se debe realizar la
actividad que plantea la guía que se encuentra al finalizar la página 3.
IMAGEN/ES DE APOYO
TEXTO/S DE LECTURA
Estructura básica HTML

Antes de ver los códigos básicos, debes saber que la primera línea de tu documento HTML
siempre debe contener la etiqueta <!DOCTYPE html>. Esto hará que el código de tu sitio sea
legible en cualquier navegador.
Ahora bien, un documento HTML bien armado tiene cuatro etiquetas esenciales para que el
contenido se distribuya correctamente. Estas son:
1. HTML
<html> está al inicio de un documento HTML e indica a los navegadores que la página tiene
código HTML para que pueda leerlo de esa forma. Siguiendo la sintaxis del lenguaje, la etiqueta
______________________________________
Guía Didáctica para Actividades Virtuales 2021
de cierre </html> será el último elemento del documento.
2. Encabezado
<head> es la etiqueta que se utiliza para el encabezado de la página. Su principal función es

contener toda la información del funcionamiento del sitio. Debido a esto, es un código encriptado
que las personas que entran a la página no pueden ver.
3. Título de la página
<title> es la etiqueta que da a tu sitio un nombre para que los usuarios puedan identificarlo. Es el
título que puedes ver en las pestañas del navegador.
4. Cuerpo
<body> es la etiqueta que contiene todos los elementos individuales del sitio. O dicho de otra
forma, comprende todo el contenido visible del sitio. Aquí podrás insertar texto, imágenes,
videos o cualquier otra funcionalidad que desees mostrar.
Ejemplo de las cuatro etiquetas esenciales:
<html>
<head>
<title>Mi página de ejemplo</title>
</head>
<body>
Aquí va el contenido
</body>
</html>
Si creas un documento .html con este código y lo abres en tu navegador, verás algo como esto:
______________________________________
Con las cuatro etiquetas anteriores ya tienes el “esqueleto” de tu página web. La siguiente tarea
sería introducir texto (entre los tags <body> y </body>) y controlar sus etiquetas. Veamos las más
elementales.
5. Títulos y subtítulos
<h1> <h2>… <h6> son etiquetas que funcionan para agregar títulos y subtítulos en el cuerpo del
texto, lo cual ayuda a jerarquizar la información. Por cierto, te recomendamos utilizar la etiqueta
H1 sólo una vez dentro del contenido.
Ejemplo:
<h1>Esta es una etiqueta H1. Utilízala en el título.</h1>
<h2>Esta es una etiqueta H2. Utilízala en los encabezados de secciones.</h2>
<h3>Esta es una etiqueta H3. Utilízala en sub-secciones.</h3>
<h4>Esta es una etiqueta H4. No se usan muy a menudo.</h4>
<h5>Esta es una etiqueta H5.</h5>
<h6>Esta es una etiqueta H6.</h6>
Resultado:
______________________________________
6. Párrafos
Las etiquetas <p> y <br> te ayudarán a organizar el texto en párrafos y saltos de línea.
Ejemplo:
<p>Tu primer párrafo.</p>
<p>Tu segundo párrafo.</p>
<p>Un enunciado.<br>
Un segundo enunciado (pegado al primero).</p>
Resultado:
7. Imágenes
<img> con esta etiqueta podrás agregar imágenes al cuerpo de tu página. Combinarlo con el
atributo src te permitirá especificar la ubicación donde se encuentra la imagen, y el atributo alt te
ayudará a darle un título a esa imagen para que lo lean buscadores como Google.
La estructura de los atributos es la siguiente: primero viene la palabra o abreviatura que lo define

(en este caso src es abreviatura de “source” o fuente), luego el signo igual (=) y al último el
modificador del atributo entre comillas dobles (“_”) o simples (‘_’).
Ejemplo:
______________________________________
<img src="https://images.unsplash.com/photo-1535378917042-10a22c95931a">
Resultado:
8. Hipervínculos
<a> te permite insertar un hipervínculo a la página. Por ejemplo, el link hacia tus redes sociales o
hacia otro sitio web con el que desees conectar tu página.
Ejemplo:
<a href="https://mx.godaddy.com/blog">Visita el blog de GoDaddy</a>
Resultado:
Visita el blog de GoDaddy
Como te habrás dado cuenta, el atributo que se utilizó aquí fue href.
9. Listas e índices
<ol> sirve para agregar listas numeradas y <ul> para agregar bullets, los cuales mejoran la
legibilidad de tus textos.
Ejemplo:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
______________________________________
Resultado:
10. Estilo
Aunque usualmente se ubica dentro de la etiqueta <head>, con el atributo <style> puedes definir

el estilo de tu contenido en términos de:
 Color
 Tamaño de fuente
 Tipografía, etc.
Ejemplo:
<p style="color:red; font-size:100px">Hola Mundo</p>
Resultado:
Tip adicional: basarte en los códigos HTML de otros sitios puede ayudarte a entender más sobre
diseño web. Estos están disponibles en todo momento al dar clic con el botón derecho del mouse
en alguna parte en blanco y seleccionar “Ver el código fuente de la página”.
Esperamos que este artículo haya despertado tu curiosidad para experimentar más con el
funcionamiento de estos códigos, y así no se te escape ningún detalle cuando empieces a dar
formato a tus páginas web. Recuerda que la práctica hace al maestro.
MOMENTO DE DESARROLLO
ACTIVIDAD/ES A DESARROLLAR
1. Realice la lectura del texto
2. Con los ejemplos dados trata de hacer una estructura en HTML con la temática del medio ambiente.
RECOMENDACIONES PERTINENTES A LAS ACTIVIDADES
1. Realizar la lectura del tema de forma ordenada y completa.
2. Realizar la actividad en el cuaderno o en hojas blancas de block y tomar evidencia de la
______________________________________
solución para enviarla al profesor.
3. Ante cualquier duda o aclaración comunicarse directamente con el profesor encargado
del área.
MOMENTO FINAL
EVIDENCIA/S DE APRENDIZAJE O RESULTADO/S A ENTREGAR
1. Desarrollar las actividades que plantea la guía
2. Entregar los ejemplos de la estructura en html.
RUBRICA PARA EVALUACION DE RESULTADOS

Es la valoración de las acciones que realizan los estudiantes en el desarrollo de la Guía Didáctica, que se
demuestran en los resultados solicitados por el docente.
COMPONENTES PONDERACION Y DESCRIPTORES
Demuestra permanentemente Demuestra competencias No obstante sus
competencias de de responsabilidad, y no dificultades de
responsabilidad, calidad y obstante ciertas dificultades cumplimiento y calidad del
CRITERIOS eficiencia del trabajo en casa, de cumplimiento y calidad trabajo en casa, su
que lo califican como un/a como un@ buen desempeño en la
estudiante excepcional en estudiantes en condiciones adversidad, le amerita
condiciones de adversidad. de adversidad. oportunidades de mejora.
En el desarrollo de las
En el desarrollo de las
actividades pedagógicas y las
actividades pedagógicas y A pesar de sus dificultades
guías didácticas, sus
las guías didácticas, sus en ocasiones hace
contribuciones son
INDICADORES contribuciones son contribuciones sencillas y
significativas, dando respuesta
interesantes y se emplean emplea recursos dentro
a lo planteado en cada una de
correctamente los recursos. de sus posibilidades.
ellas y con una presentación
eficaz.
DESEMPEÑO SUPERIOR DESEMPEÑO ALTO DESEMPEÑO BÁSICO
DESEMPEÑOS
(DE 4.6 A 5.0) (DE 4.0 A 4.5) (DE 3.0 A 3.9)
CONSULTAS RECOMENDADAS AL ESTUDIANTE:

Estructura básicas del lenguaje HTML
FRASE REFLEXIVA:
Si no te gusta algo, cámbialo. Si no lo puedes cambiar, cambia tu actitud.
______________________________________

Octava Guia de Informatica Del Grado Once

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Octava Guia de Informatica Del Grado Once

Cargado por

Copyright:

Formatos disponibles

SEDE: PRINCIPAL JORNADA: MAÑANA GRADO: UNDÉCIMO

ÁREA: TECNOLOGÍA E INFORMÁTICA PERIODO: 3 FECHA: 11 de agosto 2021

DOCENTE: CARLOS ANDRES ARIAS Email: caa426@hotmail.com Celular: 3115274542

NOMBRE GENERAL ACTIVIDAD: ESTRUCTURA BASICA EN HTML.

Estructura básica HTML

<head> es la etiqueta que se utiliza para el encabezado de la página. Su principal función es

Ejemplo de las cuatro etiquetas esenciales:

<title>Mi página de ejemplo</title>

<h1>Esta es una etiqueta H1. Utilízala en el título.</h1>

<h2>Esta es una etiqueta H2. Utilízala en los encabezados de secciones.</h2>

<h3>Esta es una etiqueta H3. Utilízala en sub-secciones.</h3>

<h4>Esta es una etiqueta H4. No se usan muy a menudo.</h4>

<h5>Esta es una etiqueta H5.</h5>

<h6>Esta es una etiqueta H6.</h6>

Las etiquetas <p> y <br> te ayudarán a organizar el texto en párrafos y saltos de línea.

<p>Tu primer párrafo.</p>

<p>Tu segundo párrafo.</p>

Un segundo enunciado (pegado al primero).</p>

La estructura de los atributos es la siguiente: primero viene la palabra o abreviatura que lo define

<a href="https://mx.godaddy.com/blog">Visita el blog de GoDaddy</a>

Visita el blog de GoDaddy

Como te habrás dado cuenta, el atributo que se utilizó aquí fue href.

Aunque usualmente se ubica dentro de la etiqueta <head>, con el atributo <style> puedes definir

<p style="color:red; font-size:100px">Hola Mundo</p>

RUBRICA PARA EVALUACION DE RESULTADOS

CONSULTAS RECOMENDADAS AL ESTUDIANTE:

Si no te gusta algo, cámbialo. Si no lo puedes cambiar, cambia tu actitud.

También podría gustarte