Guia 4 Grado 11 - Informatica y Tecnologia - Adonay

Escuela Normal Superior
Marceliano Eduardo Canyes Santacana

Leticia Amazonas
GUÍA DE APRENDIZAJE EN CASA.

GRUPO(s) __________ONCES (11o)_____________________________.
GUÍA N°: 4 ASIGNATURA: INFORMATICA Y TECNOLOGIA PERIODO: 2do

Nombre del profesor: ADONAY RAMIREZ G Celular No. 3212011287
Correo electrónico [email protected]
1. TEMA: ¿QUÉ VAMOS A APRENDER?
PROGRAMACIÓN DE PÁGINAS WEB CON HTML
- Introducción al lenguaje HTML (que es el lenguaje HTML, características de los archivos html.
CONCEPTO DE WEB.
- Sintaxis de la dirección URL
ELEMENTOS Y ETIQUETAS DE HTML.
- Reglas básicas
- Atributos de las etiquetas.
- Etiqueta body (fondo de página, ubicación de archivos)
- Tablas de colores en hexadecimal y en ingles
- Cabecera de un documento – Etiqueta HEADING
- Etiquetas de párrafos – Alineación.
2. COMPETENCIA E INDICADORES DE DESEMPEÑO:

NATURALEZA Y EVOLUCION DE LA TECNOLOGIA.
 Utilizo adecuadamente herramientas informáticas de uso común para la búsqueda y
procesamiento de la información y la comunicación de ideas.
3. ORIENTACIONES DIDÁCTICAS
 Estructura de una página web.
 Etiquetas para texto (alineación, tamaño, color, tipo de fuente, espacios, saltos de línea, caracteres
especiales)
 Realizar un taller, utilizando el computador y el bloc de notas, con un programa en donde se
apliquen las etiquetas vistas.
 Esta programación busca contribuir a soluciones sostenibles dentro de un contesto participativo de
la comunidad.
4. DESARROLLO DEL TEMA (TEORIA, CONCEPTOS, ETC.)

¿HISTORIA DEL HTML?
Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomo dos herramientas preexistentes: El concepto de
Hipertexto (Conocido también como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje
Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse .
HTML no es un lenguaje de programación, sino que es un lenguaje de marcas.
• HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".
• HTML es el lenguaje que te permite describir y dar forma a tú páginas Web.
El concepto de la Web
Es un sistema de información en línea, basado en el “hipertexto” (los documentos o páginas Web, están entrelazados
mediante vínculos que son palabras o imágenes que permiten acceder a otros documentos), almacenadas en servidores
Web, son equipos que están constantemente conectados a Internet y que proveen las páginas que los usuarios solicitan.
Cada página Web y, en general, cualquier fuente en línea (como imágenes, videos, música y animaciones) se asocia con
una dirección única llamada URL (Uniform Resource Locator - Localizador Uniforme de Recursos) le permite al navegador
encontrar una dirección o sitio en Internet.
Sintaxis de la dirección URL.
Una dirección Internet completa como esta: http://www.virtualnauta.com/es/html/una-pagina.html
Sigue estas reglas de sintaxis.
esquema://host.dominio:puerto/ruta/nombre_de_archivo
esquema: Define el tipo de servicio Internet. El más común es http.
host: Por defecto para http es www. (en todo el mundo)
dominio: Define el nombre del dominio como por ej.: virtualnauta.com.
puerto: Define el nombre de puerto en el host. Por lo general este número es omitido. El número por defecto para http
es 80.
Informática y Tecnología Prof. Adonay Ramirez Guía 4 curso 11

Leticia Amazonas
ruta: Define el camino o subdirectorio en el servidor. Si es omitido, el documento debe encontrarse en el directorio principal,
de lo contrario no será localizado.
nombre de archivo: Define el nombre del documento. Se usan como nombres de archivo por defecto default.htm
o index.htm.
El elemento clave para navegar a través de páginas Web es el navegador, un programa que envía solicitudes a los
servidores Web, procesa los datos resultantes y muestra la información como se requiere, en base a las instrucciones de la
página HTML.
Los navegadores más usados en Internet son:
• Mozilla Firefox
• Microsoft Internet Explorer
• Netscape Navigator
• Safari
• Google Chrome.
Características de los archivos HTML
• Los archivos HTML deben tener una extensión html (ej. mipagina.html).
• Un archivo HTML está compuesto por etiquetas.
• Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Google Chrome, Opera, Safary, etc.) como mostrar la
página Web.
• Para crear un archivo HTML solo hace falta un editor de texto, como los que ofrecen los sistemas operativos Windows
(Bloc de notas o WordPad )
• Algunos de los editores visuales con los que podremos crear páginas web son: Macromedia Dreamweaver, Microsoft
Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia,
de los cuales algunos tienen la ventaja de ser gratuitos.
Los elementos
Los elementos son declaraciones para visualizar o dar forma a una página Web.
Las etiquetas
Las etiquetas (en inglés: tags) son marcas insertadas en un documento HTML, que delimitan cada uno de los elementos que
componen un documento HTML, para proporcionar información sobre una unidad o contenido.
Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.
Reglas básicas
• Las etiquetas están encerradas entre los caracteres "<" y ">".
• Generalmente vienen en pares <p> y < p>.
• La primera es de apertura y la segunda de cierre.
• El texto que se encuentra entre dos etiquetas es el contenido del elemento.
• Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que<B>.
La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la etiqueta, y
no contiene atributos. Su sintaxis es: </identificador>
A excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir,
insertar etiquetas entre otras etiquetas de comienzo y de cierre.
Estructura mínima
HTML Marca el inicio y fin del documento.
HEAD Encierra datos que no hacen al documento en sí, sino a sus propiedades.
TITLE Contiene el título mostrado en el navegador.
BODY Encierra el contenido de la página que será visualizado mediante el navegador.
<HTML>
• <HEAD>
• <TITLE>
• PÁGINA DE EJEMPLO
• </TITLE>
• </HEAD>
• <BODY>
• CONTENIDO DEL EJEMPLO.
• </BODY>
</HTML>

Leticia Amazonas
¡VAMOS A HACER NUESTRO PRIMER SITIO!

SI ESTÁS USANDO WINDOWS, ABRE EL "BLOC DE NOTAS".
EJEMPLO: ESCRIBA EL SIGUIENTE TEXTO
CÓDIGO
<html>
<head>
<title> PAGINA DE PRUEBA </title>
</head>
<body> BIENVENIDOS A MI PRIMERA PAGINA </body>
</html>
RESULTADO
BIENVENIDOS A MI PRIMERA PAGINA
Guarda el archivo como "mipagina.html" (las extensiones ".htm” nos indican que se trata de un archivo HTML).
Nota: observa que todas las etiquetas de cierre se diferencian de las de apertura por llevar "/" antes del nombre.
Etiquetas básicas
Salto de línea. El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos cortar una
línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea donde quiera que la
ubiquemos.
Ejemplo: Esto es <br> un salto de lí<br>nea.
El resultado es.
Esto es
un salto de lí
nea.
Párrafos. Los párrafos se definen con la etiqueta <p>.
Ejemplo.
<html>
<head>
<title>Párrafos</title>
</head>
<body>
<p>Este es el primer párrafo.</p>
<p>Y este es el segundo párrafo.</p>
</body>
</html>
RESULTADO
Este es el primer párrafo.
Y este es el segundo párrafo.
TEXTO EN NEGRITA.
Colocar entre las etiquetas body
<body>
Hola a todos. <b>Este texto es en negrita</b>
</body>
<U> y < /U> Sirve para subrayar un texto

<STRIKE> y </STRIKE> Sirve para tachar un texto.
<i> y </i> Para colocar un texto en cursiva.
Otro separador de bloques de texto es el elemento vacío <HR> (por Horizontal Rule) Línea horizontal.
TITULOS
<HX> ------- <H1>, <H2>, <H3>, <H4>, <H5>, <H6>
Nos definen el tamaño de un título o cabecera.
<h1> nos da el tipo de letra más grande.
<h6> nos da el tipo de letra más pequeño.
HTML agrega automáticamente un espacio antes y después de cada título.

Leticia Amazonas
Ejemplo:
<h1> Titulo principal </h1>
<h2> Titulo secundario </h2>
<h3> Titulo terciario </h3>
<h4> Titulo cuarto nivel </h4>
<h5> Titulo quinto </h5>
<h6> Titulo sexto </h6>
¿Qué son los atributos de las etiquetas?

Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.
• Los atributos siempre van con la estructura: nombre="valor".
• Los atributos siempre van en la etiqueta de apertura.
• Los valores siempre hay que ponerlos entre comillas.
EJEMPLO.
<body bgcolor="#FFFF00">
Hola a todos. <b>Este texto es en negrita</b>
</body>
En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el valor"#FFFF00"(representa el
color amarillo en hexadecimal). Esto quiere decir que el color de fondo de la página será amarillo.
Ejemplos:
<FONT COLOR="WHITE">Blanco</FONT> Blanco #FFFFFF
<FONT COLOR="BLACK">Negro</FONT> Negro #000000
<FONT COLOR="RED">Rojo</FONT> Rojo #FF0000
<FONT COLOR="GREEN">Verde</FONT> Verde #00FF00
<FONT COLOR="BLUE">Azul</FONT> Azul #0000FF
<FONT COLOR="YELLOW">Amarillo</FONT> Amarillo #FFFF00
<FONT COLOR="CYAN">Cyan</FONT> Cyan #00FFFF
<FONT COLOR="MAGENTA">Magenta</FONT> Magenta #FF00FF
Etiquetas de párrafo.
Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy útil debido a que si uno escribe algo, por
mucho espacio que uno le de al texto, siempre va a aparecer en la misma línea.
El elemento <P> admite cuatro atributos de alineación:
ALIGN=LEFT (por defecto) Alinea a la izquierda
ALIGN=RIGHT Alinea a la derecha
ALIGN=CENTER Realiza un centrado
ALIGN=JUSTIFY
EJEMPLO
<p align="left"> Párrafo... </p> Alinea a la izquierda.
<p align="center"> Párrafo... </p> Realiza un centrado.
<p align="right"> Párrafo... </p> Alinea a la derecha.
OBSERVACIONES:
 Envié la hoja del cuestionario, marcando claramente o resaltando la respuesta que crea acertada.
 Envie al profesor solamente esta hoja con las respuestas marcadas, solo una hoja.

Leticia Amazonas
5. EVALUACIÓN: MOMENTO DE TRANSFERENCIA Y VALORACIÓN

CUESTIONARIO
1. ¿Cuál es el código XHTML correcto para un salto de línea?

A. <br />
B. <break/>
C. <br>
D. Las anteriores respuestas no son correctas
2. ¿ Qué significa XHTML?
A. Xml HyperText Markup Language
B. eXtensible HyperText Modeling Language
C. eXtensible HyperText Markup Language.
D. Las anteriores respuestas no son correctas
3. En HTML, para definir una línea horizontal de separación se emplea
A. <dd>
B. <hr>
C. <pre>
D. <xmp>
4. En HTML, la etiqueta <p> se utiliza para
A. Definir un punto de destino para un hipervínculo
B. Insertar un salto de línea
C. Definir un párrafo
D. Las anteriores respuestas no son correctas.
5. En HTML, las etiquetas <h1>, <h2> y <h3> se emplean para definir
A. Hipervínculos
B. Encabezados
C. Listas
D. Tablas
6. ¿Cuál es el código correcto para un párrafo en XHTML?
A. <p>Un <b><i>párrafo</i></b> corto</p>
B. <p>Un <b><i>párrafo</i></b> corto
C. <p>Un <b><i>párrafo</b></i> corto</p>
D. <p>Un <b><i>párrafo</b></i> corto
7. Cuando se escribe una página XHTML
A. Los valores de los atributos no necesitan estar encerrados entre comillas
B. Los valores de los atributos necesitan estar encerrados entre comillas
C. Todas las etiquetas necesitan al menos un atributo.
D. Las anteriores respuestas no son correctas.
8. cuál de estas etiquetas no existe en html
A. <bodi>
B. < font>
C. <hr>
D. <br>
E. Todas las anteriores.
9. Cuál de las etiquetas está bien escrita en html.
A. <Body bgcolor=#blue> ENS </body>
B. <Body bgcolor=”#blue”> ENS </body>
C. <Body bgcolor=”blue”> ENS </body>
10. Cuál de las siguientes instrucciones en html está bien escrita.
A. </STRIK><p align="left"> Escuela Normal </p><STRIK>
B. <STRIKE><p> <aling="left"> Escuela Normal </p></STRIKE>
C. <p align="left"><STRIKE>< Escuela Normal </STRIKE></p>
D. Ninguna de las anteriores.

Leticia Amazonas
DATOS ADICIONALES AL CUESTIONARIO.
Información del estudiante:
Nombre del estudiante que desarrolla la guía:

CURSO:
Teléfonos donde me pueden contactar:
Datos de recepción y entrega de la guía :

Recibí esta guía en la fecha: Entrego mi guía al profesor en la fecha:
DIA MES AÑO 2021 DIA MES AÑO 2021
S
NOTA. ESTUDIANTE. AUTOEVALUACION________
NOTA. DEL PADRE DE FAMILIA. COEVALUACION O FIRMA____________________
Felicitaciones anticipadas, por su dedicación al estudiar el tema tratado.

Guia 4 Grado 11 - Informatica y Tecnologia - Adonay

Cargado por

Copyright:

Formatos disponibles

Guia 4 Grado 11 - Informatica y Tecnologia - Adonay

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

Guia 4 Grado 11 - Informatica y Tecnologia - Adonay

Cargado por

Copyright:

Formatos disponibles

Escuela Normal Superior

Marceliano Eduardo Canyes Santacana

GUÍA DE APRENDIZAJE EN CASA.

GUÍA N°: 4 ASIGNATURA: INFORMATICA Y TECNOLOGIA PERIODO: 2do

2. COMPETENCIA E INDICADORES DE DESEMPEÑO:

4. DESARROLLO DEL TEMA (TEORIA, CONCEPTOS, ETC.)

Informática y Tecnología Prof. Adonay Ramirez Guía 4 curso 11

Informática y Tecnología Prof. Adonay Ramirez Guía 4 curso 11

¡VAMOS A HACER NUESTRO PRIMER SITIO!

<U> y < /U> Sirve para subrayar un texto

Informática y Tecnología Prof. Adonay Ramirez Guía 4 curso 11

¿Qué son los atributos de las etiquetas?

Informática y Tecnología Prof. Adonay Ramirez Guía 4 curso 11

5. EVALUACIÓN: MOMENTO DE TRANSFERENCIA Y VALORACIÓN

1. ¿Cuál es el código XHTML correcto para un salto de línea?

Informática y Tecnología Prof. Adonay Ramirez Guía 4 curso 11

DATOS ADICIONALES AL CUESTIONARIO.

Información del estudiante:

Nombre del estudiante que desarrolla la guía:

Datos de recepción y entrega de la guía :

NOTA. DEL PADRE DE FAMILIA. COEVALUACION O FIRMA____________________

Felicitaciones anticipadas, por su dedicación al estudiar el tema tratado.

Informática y Tecnología Prof. Adonay Ramirez Guía 4 curso 11

También podría gustarte