TALLER 11º Grado

INSTITUCIÓN EDUCATIVA GENERAL SANTANDER Código:
VIRTUD, DIOS Y CIENCIA GAC-PP-01-01

CREADO POR ORDENANZA No. 5 DE OCTUBRE 23 DE 1961
DANE 154874000130 Fecha Aprobación
17-JUNIO-2016
GESTION ACADEMICA
TALLER Versión: 1.0
Talle 01 Grad 11º

r No. o:
Periodo: 1 Fecha: Febrero 9 Doc Nohora Isabel Vera Rodriguez
ente
:
Área: Tecn. e Informática Asig Informática Duración (En 2
natu Horas)
ra:
Tema: Página Web en Html
Evidencias de -Utiliza las etiquetas básicas del HTML para crear páginas web.
Aprendizaje:
-Crea una Pagina web utilizando el lenguaje html
CONOCIMIENTOS PREVIOS
HTML es el lenguaje con el que se escriben las páginas web, las cuales pueden ser vistas por el usuario mediante
un tipo de aplicación llamada navegador.
Es usado por los navegadores para mostrar las páginas webs al usuario, siendo hoy en día la interface más
extendida en la red. Este lenguaje nos permite unir textos, sonidos e imágenes y combinarlos a nuestro gusto. Se
creó en un principio con objetivos divulgativos. Uno de los problemas que se presentan es la diversidad de
navegadores presentes en el mercado que no son capaces de interpretar un mismo código de una manera
unificada.
___________________________________________________________________________________
Calle 6 Nº 8-14 Barrio Gramalote, Villa del Rosario Norte de Santander
Teléfonos: 5700330 Fax 5702958
E-mail: colgesan@hotmail.com
GAC-PP-01-01 V01 – Taller – Institución Educativa General Santander – Pág. 1 de 9
Taller
a) Estructura de una página web
1. <HTML>, Identificador del tipo de documento

Todas las páginas escritas usando lenguaje HTML deben tener la extensión .htm o .html
Al crear una página web, en el código debemos iniciar la página con la viñeta <html> y finalizarla escribiendo
al final de todo el código la viñeta </html>. Entre estas dos etiquetas escribiremos el resto del código HTML
de la página web, así:
2. <head>, Cabecera o Encabezado de la página

El encabezado de la página se utiliza para agrupar información (título). Está formado por las etiquetas <head>
y </head>. La etiqueta<head> va justo debajo de la etiqueta <html>.
GAC V01 – Guía de Aprendizaje – Institución Educativa General Santander – Pág. 2 de 9

Taller
3. <title>, Título de la página

El título de la página es el texto que aparecerá en la barra de título, ubicada en la parte superior de la ventana
del navegador.
El texto deseado debe escribirse entre las etiquetas <title> y</title> Estas etiquetas deben estar dentro del
encabezado, es decir, entre las etiquetas <head> y </head>.
4. <body>, Cuerpo del documento

El cuerpo del documento contiene la información del documento, todo lo que deseemos que se visualice, el
texto de la página, las imágenes, texto, formularios, etc.
Todos los elementos que formarán el cuerpo de la página deben encontrarse entre las etiquetas <body> y
</body> y van justo después de el encabezado.

Taller
A través de la etiqueta <body> podemos establecer el color o la imagen de fondo para la página web.
Para establecer el color de fondo utilizamos el atributo bgcolor asignándole un color representado por un
número hexadecimal o por un nombre predefinido.
Para hacer que el color de fondo de una página sea de color azul, tendremos que escribir el siguiente código:
Sería equivalente a escribir:
c) ETIQUETAS
HTML es un lenguaje de marcas o etiquetas, estas marcas serán fragmentos de texto destacado de una
forma especial que permiten la definición de las distintas instrucciones de HTML. En documento HTML será un
fichero texto con etiquetas que variarán la forma de su presentación. Una etiqueta es un texto incluido entre
los símbolos menor que < y mayor que >. El texto incluido dentro de los símbolos será explicativo de la
utilidad de la etiqueta. Por ejemplo:

Taller
Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio
añadiéndole al principio una barra inclinada /. Por ejemplo: <title> FerGalo </title>
Las principales etiquetas usadas son:
Apertura Acción Atributos Cierre

Al principio y al fin de todo </HTML>
<HTML> documento. HEAD, BODY
Encabezado de la página. Aquí
se coloca titulo, metatags, e
información para
<HEAD> BASE, TITLE, ISINDEX, </HEAD>
buscadores entre otras cosas. NEXTID, META
Está información no es visible.
<TITLE> Título de la página web, dentro Ninguno </TITLE>

de HEAD
Cuerpo del documento. BGCOLOR, </BODY>
<BODY> Va toda la parte visible de la BACKGROUND, TEXT, LINK,
página web VLINK, ALINK
<FONT> Definición de la fuente. SIZE, COLOR. Internet Explorer: </FONT>

FACE.
<H1...H6> Tamaño de letras del 1 al 6. HTML 3.0: LEFT, CENTER, RIGHT </H1 .../H6>
Nombre Etiqueta Acción Valor

Tamaño de la letra de 1 a size=6
SIZE <font size=?> </font> 7
Color de la letra, se usa valor
COLOR <font color=?> </font> hexadecimal o color="#0000
nombre directo (blue, green, 00" (negro)
etc.)

Taller
font Fuente del texto Coloca el

FACE face=?> </font> tipo de letra: Arial, Verdana, face="helv"
Courier,Etc. (helvética)
d) Texto en Negrilla
Sirven para RESALTAR a aquellas palabras que sean más importantes en un texto, para que las VEAS mas
fácilmente.
La etiqueta para poner un texto en negrita se llama "b" (del ingles "bold").
<B> Letra Negrita, del inglés Bold (negrita).

<TABLE> Definirá una tabla.
<IMG> Inclusión de una IMaGen.
Etiqueta de texto en negrilla: <b> </b> <B>Texto que será en
negrita</B>.
Obtendremos:
Texto que será en negrita
DESARROLLO DEL TALLER
1. Cree una carpeta en el escritorio y asígnele como nombre “mi primera pagina web”

Taller
2. Se debe abrir un editor de Texto que puede ser Bloc de Notas o Notepad++ en este caso Siga los
siguientes pasos para abrir Bloc de Notas:
✔ De clic en el botón inicio

✔ De clic en todos los programas
✔ De clic en accesorios
✔ De clic en bloc de notas
3. Abierto el bloc de notas escriba lo siguiente tal y como aparece aquí:
<html>
<head>
<title> Mi primera página </title>
</head>
<body>
Aquí van a colocar el texto del documento, o gráficos, enlaces, etc.
</body>
</html>
4. Guarde el archivo con el nombre practica1 dentro de la carpeta anteriormente creada

5. Ahora vuelva a Guardar el archivo con el nombre index.html dentro de la carpeta anteriormente
creada
6. Cierre el bloc de notas
7. Vaya a la carpeta y observe que sucedió con el archivo guardado con index.html y con
practica1 abra comente con sus compañeras y la profesora que sucedió, que diferencia hay
entre uno y otro.
8. Elimine el archivo Practica 1
9. De doble clic en index y observe los resultados
10. Ahora vaya a su carpeta y de clic derecho en el archivo index y en el menú contextual seleccione
abrir con y buscan en el bloc de notas
11. Haga los cambios necesarios para que el código quede de la siguiente manera:

Taller
<html>
<head>
<title> Mi primera página </title>
</head>
<body>
<h1>Mucha importancia</h1>
<h2>Menos importancia</h2>
<h3>Mucha menos importancia</h3>
</body>
</html>
12. Guarde los cambios y vaya al navegador y actualízalo en su defecto oprima la tecla F5
13. Observe que sucede y comente con las compañeras y profesora
14. Haga los cambios necesarios para que el código quede de la siguiente manera:
<html>
<head>
<title color= “Yellow”> Mi primera página </title>
</head>
<body>
<font color= “blue” size= “4” face= “Comic Sans MS, Arial, MS Sans
Serif”>Bienvenidos a mi primera página</font>
</body>
</html>

Taller
15. Guarde los cambios y vaya al navegador y actualízalo en su defecto oprima la tecla F5
16. Ahora cámbiele de colores a la letra y de tamaño y escriba un poema
RETROALIMENTACION (AUTOEVALUACION)
Leer la teoría y contestar en una hoja y luego socializar:
a) Que es HTML?
b) Cual es la estructura de una página web?
c) Averigua para que se utilizan las etiquetas HTML, head, title, body, h1. h2. h3 y Font, color, size
d) Averiguar cual etiqueta se utiliza para escribir el texto en negrilla
e) Elabora una página web en html aplicando lo aprendido

TALLER 11º Grado

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

TALLER 11º Grado

Cargado por

Copyright:

Formatos disponibles

INSTITUCIÓN EDUCATIVA GENERAL SANTANDER Código:

VIRTUD, DIOS Y CIENCIA GAC-PP-01-01

Talle 01 Grad 11º

a) Estructura de una página web

1. <HTML>, Identificador del tipo de documento

2. <head>, Cabecera o Encabezado de la página

GAC V01 – Guía de Aprendizaje – Institución Educativa General Santander – Pág. 2 de 9

3. <title>, Título de la página

4. <body>, Cuerpo del documento

GAC V01 – Guía de Aprendizaje – Institución Educativa General Santander – Pág. 3 de 9

Sería equivalente a escribir:

GAC V01 – Guía de Aprendizaje – Institución Educativa General Santander – Pág. 4 de 9

Las principales etiquetas usadas son:

Apertura Acción Atributos Cierre

<TITLE> Título de la página web, dentro Ninguno </TITLE>

<FONT> Definición de la fuente. SIZE, COLOR. Internet Explorer: </FONT>

Nombre Etiqueta Acción Valor

GAC V01 – Guía de Aprendizaje – Institución Educativa General Santander – Pág. 5 de 9

font Fuente del texto Coloca el

<B> Letra Negrita, del inglés Bold (negrita).

Texto que será en negrita

DESARROLLO DEL TALLER

GAC V01 – Guía de Aprendizaje – Institución Educativa General Santander – Pág. 6 de 9

✔ De clic en el botón inicio

3. Abierto el bloc de notas escriba lo siguiente tal y como aparece aquí:

<title> Mi primera página </title>

Aquí van a colocar el texto del documento, o gráficos, enlaces, etc.

4. Guarde el archivo con el nombre practica1 dentro de la carpeta anteriormente creada

GAC V01 – Guía de Aprendizaje – Institución Educativa General Santander – Pág. 7 de 9

<title> Mi primera página </title>

<h3>Mucha menos importancia</h3>

<title color= “Yellow”> Mi primera página </title>

Serif”>Bienvenidos a mi primera página</font>

GAC V01 – Guía de Aprendizaje – Institución Educativa General Santander – Pág. 8 de 9

Leer la teoría y contestar en una hoja y luego socializar:

e) Elabora una página web en html aplicando lo aprendido

GAC V01 – Guía de Aprendizaje – Institución Educativa General Santander – Pág. 9 de 9

También podría gustarte