Scribd
Cargar
40 vistas

Guia2hdg HTML I

El documento presenta los conceptos básicos de HTML y da instrucciones para crear una página web sencilla mediante tres prácticas. La primera práctica enseña a crear una página con título. La segunda una hoja de vida. Y la tercera una página más compleja con encabezado, imagen, párrafos e hipervínculos.

Cargado por

Dan Ser
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
40 vistas

Guia2hdg HTML I

El documento presenta los conceptos básicos de HTML y da instrucciones para crear una página web sencilla mediante tres prácticas. La primera práctica enseña a crear una página con título. La segunda una hoja de vida. Y la tercera una página más compleja con encabezado, imagen, párrafos e hipervínculos.

Cargado por

Dan Ser
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

Cronograma INF WEB 120 Gua 02 - html Gua 02 - html Cronograma INF WEB 120

INF 222 I SEMESTRE INF 222 I SEMESTRE


1
Glosario de trminos
WEB
LA WEB es en la actualidad el fenmeno ms dinmico y sorprendente de toda la serie
de desarrollos tecnolgicos de punta. Internet cambio la forma de trabajar, de pensar y
de relacionarse por parte de los seres humanos.

WebSite
Se denomina WebSite al sitio donde se alojan las paginas (Homepage) de informacin.

Servidor - Server - Host
Es el equipo donde se guardan los archivos o paginas (HOMEPAGE) que componen un
sitio WEB

Cliente - Station
El equipo de cmputo que se conecta a la red Internet y examina la informacin
contenida en un servidor por medio de un browser o examinador (Internet o Firefox)

WWW. Internet
Viene de las siglas World Wide Web = Informacin amplia del mundo
Permite visualizar informacin e interactuar con ella por medio de paginas Homepages
colocadas en servidores por sistemas corporativos, que accedan bases de datos

Ftp - File Transfer Protocol
Protocolo de transferencia de archivos. Se utiliza para enviar informacin a servidores en
Internet

Email - Hotmail, Gmail
Correo electrnico. El servicio ms usado por los usuarios

Chat - Messenger
Sistemas de mensajera en tiempo real - online. Messenger

Video Conferencia
Sistemas de chat por video llamada con mltiples personas
Ejemplo OOVOO - permite 6 conferencias simultneas con buena calidad de video

Redes sociales - Facebook, Twitter, MySpace, etc.
Sistemas modernos de informacin y noticias con un elevado factor de inmediatez.

Homepage
Pgina de informacin grafica, multimedia e interactiva que permite al usuario recibir y
enviar informacin a sitios comerciales, educativos, gubermanamentales, etc. por medio
de la red Internet

2
Estructura de una direccin en Internet
Toda direccin en internet presenta una serie de componentes. Vamos a utilizar una
direccin de ejemplo para discriminar sus componentes
Ejemplo
Direccin de la homepage de Coca-Cola en Colombia.
http: //www.cocacola.com.co/index.html
Componentes
http://
Es el protocolo o regla (hyper text transfer protocol) de transferencia por
hipertextos.
Un hipertexto es un texto o imagen subrayado o destacado que al dar clic
sobre este objeto nos enlaza a otra pagina (homepage) en el mismo o en otro
servidor (server).
En los servidores seguros (bancos, financieras, gobierno, etc.) se utiliza https://
www
world wide web es la informacin (web) amplia (wide) en el mundo (world)
Coca-Cola
Es el nombre de la empresa
com
Es el tipo de empresa (com=comercial, mil=militar, net=red de servicios,
org=organizacin no gubernamental, gov=gobierno, etc.)
co
Es el pas, co=Colombia, pe=pero, au= australia, es=espaa, mx=mexico, etc.
Nota
La nica direccin que no lleva extensin es estados unidos.
ndex
Es el nombre del archivo por defecto de la homepage ndice y que se carga sin
necesidad de escribirlo
html
Es la extensin por defecto de archivos homepage

Lenguaje HTML
Hyper Text Mark Language
Lenguaje de marcas por hiper texto.
Se llaman marcas, tags, cdigos o instrucciones.
Lenguaje de programacin simple, interpretada, que funciona por TAGs o
cdigos, para generar Homepages de informacin.
Tags
Son cdigos, instrucciones o marcas de programacin base del lenguaje HTML
que aplican sus atributos al prrafo contenido.
Regla
Un tag que se abre debe cerrarse y contener un prrafo.
Ejemplo title = titulo coloca el prrafo descrito como un titulo en la barra de
ttulos de la ventana del navegador.
Cronograma INF WEB 120 Gua 02 - html Gua 02 - html Cronograma INF WEB 120
INF 222 I SEMESTRE INF 222 I SEMESTRE
3
Ejemplos de Tags
Colocar un titulo en la barra superior de la ventana del browser
<TITLE>
Mi primera HomePage
</TITLE>
Instruccin sobre el tag cuerpo
<BODY>
<P> Este es un prrafo </P>
...
...
</BODY>

Homepage
Pgina de informacin grafica, multimedia, interactiva, que puede integrar y
ejecutar algunos lenguajes de programacin, lo que le brinda un gran poder.
Los usuarios navegan entre las diferentes Homepage guardadas en la red
Internet por medio de Hipervnculos
Para navegar se utilizan los Browsers (examinadores) como Internet Explorer,
Firefox, Opera, etc.
Caractersticas de una Homepage
Una homepage consta de
Identificador <html> ................................. </html>
cabeza <head> ................................. </head>
cuerpo <body> ................................. </body>
Se puede escribir en maysculas o minsculas Se puede digitar en el mismo o
en diferentes renglones o lneas (concepto de los espacios).

Estructura de una homepage
Toda homepage consta de:
Identificador que abre
Cabeza
Cuerpo
Identificador que cierra
Nota
Todos los archivos tienen que estar en la misma carpeta, html, jpg, etc.
Prctica 1
Crear una homepage simple
1. Abrir bloc de notas
2. Digitar:
<html>
<head>
<title>
Mi primera homepage
</title>
4
</head>
<body>
<p>
Mi primera homepage
</p>
</body>
</html>
1. Guardar estos cdigos (OJO: tenga en cuenta al guardar de cambiar el tipo de
extensin a Todos los archivos) con el nombre index.html
2. Ejecucin
Busque el archivo recin guardado, observe que el icono sea del navegador de
internet que usted utiliza y presione doble clic.
Nota
Toda instruccin que se abre hay que cerrarla
<title> Hoja de Vida </title>
Prctica 2
Crear una Homepage con los datos de su hoja de vida
Solucin
1. Abrir el Bloc de Notas
2. Digite las siguientes instrucciones
<HTML>
<HEAD>
<TITLE> Mi Hoja de Vida</TITLE>
</HEAD
<BODY>
<CENTER>
<H1>
MI HOJA DE VIDA
</H1>
<P>
NOMBRE: "Escriba su nombre"
</P>
<P>
DIRECCION: "Escriba su direccin"
</P>
<P>
TELEFONO: "Escriba su telfono"
</P>
<P>
DIRECCION: "Escriba su Email"
</P>
</CENTER>
</BODY>
</HTML>
Cronograma INF WEB 120 Gua 02 - html Gua 02 - html Cronograma INF WEB 120
INF 222 I SEMESTRE INF 222 I SEMESTRE
5
3. GUARDAR CAMBIANDO EL TIPO por : - Todos los programas *.*
CON EL NOMBRE: hojadevida.html (sin espacios)
3. EJECUTAR
Buscar el archivo recin guardado y doble clic para ejecutarlo en Internet
Explorer o browser por defecto.
Prctica 3
Crear una homepage
Debe aparecer al inicio un encabezado centrado en texto grande que diga Mi primera
pgina en Internet, con fondo azul, los textos en amarillo, agregar una foto de 250 x 250
centrada y separada con una raya arriba y abajo, y debajo muestre un prrafo que dice:
Bienvenido a mi pagina seor internauta. Esta primera pagina es muy sencilla pero
pronto presentar caractersticas destacadas que me identificarn plenamente.
Gracias por su visita.
Aparece de nuevo una raya de separacin y muestra alineado a la izquierda los
siguientes links, encadenados, hipervnculos o hipertextos.
Presionar clic para ver mi primera homepage
Presionar clic para ver mi hoja de vida
Este enlace conduce a la pgina del Tecnolgico T. de A.
Este hipervnculo muestra la pagina del profesor dario lara

Al final, despus de digitar, guardar el archivo con el nombre primera.html

1. Abrir bloc de notas
2. Digitar

<html>

<head>
<title>
Mi primera pgina
</title>
</head>

<body bgcolor=blue text=yellow>

<center>
<h1>
Mi primera pgina en Internet
</h1>

<hr>
<img src=foto.jpg width=250 height=250>
<hr>

6
<p>
Bienvenido a mi pagina seor internauta. Esta primera pagina es muy sencilla
pero pronto presentar caractersticas destacadas que me identificarn
plenamente.
<br>
Gracias por su visita.
</p>
<hr>
<p align=left>
<a href=index.html>
Presionar clic para ver mi primera homepage
</a>
<br>
<a href=hojadevida.html>
Presionar clic para ver mi hoja de vida
</a>
<br>
<a href=http://www.tdea.edu.co>
Este enlace conduce a la pgina del Tecnolgico T. de A.
</a>
<br>
<a href=http://www.mipagina.com>
Este hipervnculo muestra la pagina del internet
</a>
</p>
</body>
</html>
3. Guardar con nombre primera.html
4. Ejecutar con doble clic
Significado de los tag utilizados
<html> </html> Identifica una homepage - inicio y fin
<title> </title> Identifica un titulo para la barra de ttulos
<head> </head> Identifica la cabeza de la homepage
<body bgcolor=blue text=yellow>
</body> Identifica el cuerpo con fondo azul y textos en
amarillo
<h1> </h1> Identifica un encabezado grande. Van de h1 a h6
<img src=foto.jpg> Identifica una imagen
<center> </center> Centra el contenido
<hr> Coloca una raya
<br> Abre un espacio y equivale a un enter
<p align=left> Prrafo alineado a la izquierda
<a href= . > </a> Se utiliza para generar enlaces o hipervnculos

Cronograma INF WEB 120 Gua 02 - html Gua 02 - html Cronograma INF WEB 120
INF 222 I SEMESTRE INF 222 I SEMESTRE


LEA DEENIDAMENTE LAS INSTRUCCIONES

Para lograr el objetivo de comprensin y apropiacin del
conocimiento, Usted debe leer el documento antes de iniciar la
prueba, este le ayudara al desarrollo del mismo.

Este taller tiene una ponderacin de 15 puntos (5 puntos por cada
prctica)

También podría gustarte