introducción al html

1. Institución Educativa San isidro - INESA NI
Montería - Córdoba
TECNOLOGIA E INFORMATICA GRADO 10
CREACION DE PAGINAS WEB CON HTML
INTRODUCCION
HTML, HyperText Markup Language (Lenguaje de marcado de hipervínculos o hipertexto), es un lenguaje
simple utilizado para crear documentos de hipertexto para WWW.
Por tanto, como hemos visto, HTML es un lenguaje muy sencillo que nos permite preparar documentos Web
insertando en el texto de los mismos una serie de marcas (tags) que controlan los diferentes aspectos de la
presentación y comportamiento de sus elementos.
En la actualidad, hay muchos programas útiles que nos ayudan en la creación y el diseño de estas páginas, de
tal modo que no hace falta conocer todas las instrucciones, pero siempre es conveniente tener una idea para
ajustar mejor algunos parámetros.
 Conceptos claves:
Antes de iniciar la temática sobre la creación de páginas web, es recomendable reconocer algunos conceptos:
 Navegador: Un navegador web o explorador web (browser) es un programa (aplicación de software)
que permite al usuario recuperar y visualizar la información que contiene una página web desde
servidores web de todo el mundo a través de Internet.
Ejemplo de navegadores: internet Explorer, Mozilla Firefox, Netscape, etc.
 Buscador o Motor de Búsqueda: es un programa o software que busca sitios web basándose en
palabras clave (keywords) designadas como términos de búsqueda y los lista a través de enlaces
para su posterior acceso.
Ejemplo de buscadores: Google, Yahoo, Altavista, etc.
 Pagina Web: Es un documento (único archivo) adaptado para la Web y que normalmente forma parte
de un sitio web, está compuesto por Texto, imágenes, videos, sonidos, etc. Su principal característica
son los hiperenlaces a otras páginas, siendo esto el fundamento de la Web.
 Sitio Web: es una colección de páginas web relacionadas y comunes a un dominio de Internet o
subdominio en la World Wide Web en Internet. Si lo comparáramos con un libro, un sitio web sería el
libro entero y una página web de ese sitio web sería cada página del libro.
 Programas para crear paginas Web:
El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser el Bloc
de Notas de Windows (o Notepad), o cualquier otro editor que admita texto sin formato como Microsoft
Wordpad,TextPad,Vim.
Existen además, otros programas para la realización de sitios Web o edición de código HTML, a los que se les
conoce como editores WYSIWYG o What You See Is What You Get (en español: “lo que ves es lo que
obtienes”), como por ejemplo Microsoft FrontPage, el cual tiene un formato básico parecido al resto de los
programas de Office. También existe el famoso software de Macromedia (que adquirió la empresa Adobe)
llamado Dreamweaver, siendo uno de los más utilizados en el ámbito de diseño y programación Web. Estos
programas son editores visuales en los cuales se va mostrando el resultado de lo que se está editando en
tiempo real a medida que se va desarrollando el documento.

2. Institución Educativa San isidro - INESA NI
Montería - Córdoba
 Elementos necesarios para crear una página Web:
 Un Editor de Texto: los documentos HTML están en formato de texto sencillo (también conocido
como ASCII). El editor de texto se utiliza para escribir el documento en lenguaje HTML, que será
posteriormente interpretado por el programa navegador correspondiente.
Un editor utilizado para la inserción de etiquetas es el bloc de notas.
 Un navegador en el cual se puede visualizar la página Web. Dentro de los más comunes, se
encuentra el Internet Explorer, Mozilla Firefox, Chrome, etc.
 Estructura de una página Web con el Lenguaje Html.
HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las
cuales se determinan la forma en la que debe aparecer en su navegador el texto, así como también las
imágenes y los demás elementos, en la pantalla del ordenador.
Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información
necesita introducir. Esto ayuda a que la página que diseña sea claramente legible y se pueda modificar más
fácilmente. Si una página Web es complicada en su diseño, habrá muy pocos que sepan dar el mantenimiento
adecuado. Abajo se muestra la estructura lógica de una página Web.
<HTML>
<HEAD>
<TITLE>Primera página</TITLE>
</HEAD>
<BODY>
AQUI VA EL RESTO DE LAS ETIQUETAS
</BODY>
</HTML>
Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta
o tan larga sea la página y el contenido.
La primera instrucción <HTML> indica al explorador de Internet que ahí comienza una página Web. La siguiente
instrucción <HEAD> indica el encabezado de la página, es decir el área de la barra de título. <TITLE> indica el
título de la página propiamente dicho. <BODY> es una instrucción que indica al explorador de Internet que ahí
empieza el área de contenido de la página (es decir el cuerpo de la página).
En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para indicar al programa que las
propiedades aplicadas con esa instrucción se terminan ahí donde se pone el signo diagonal. Si el signo de
cierre (/) no se aplica convenientemente, el programa seguirá aplicando las propiedades de la instrucción
anterior a todas las líneas inferiores, hasta que se encuentre otra instrucción que modifique las propiedades
actuales.

3. Institución Educativa San isidro - INESA NI
Montería - Córdoba
 Guardado del archivo como página Web
Cuando se haya escrito el código de la página Web, es necesario guardar el archivo como una página Web.
Una página Web tiene la extensión HTM, la cual se debe especificar en el momento de guardar la página. Una
vez guardado el archivo con la extensión HTM, se puede crear un acceso directo para este archivo o se puede
abrir directamente desde el sitio en el que se guardó.
 Ejercicio
Abre el Bloc de notas y copia el siguiente código que se muestra. Cuando hayas terminado de capturar el
código, guárdalo con el nombre de Primera.html ; ahora busca tu archivo y ábrelo.
<HTML>
<HEAD>
<TITLE> Página Inesanista </TITLE>
</HEAD>
<BODY>
<CENTER> <H1>BIENVENIDOS A NUESTRA PAGINA INESANI</H1></CENTER>
</BODY>
</HTML>
Después de haber creado y visualizado tu primera página web, espera las indicaciones del docente para
incrustar otras etiquetas que te permitirán centrar el texto, asignar un fondo, asignar color al texto, entre otros.
Nota: Investiga otras etiquetas básicas para dar formato al texto en el lenguaje HTML.
Actividad En Clases:
Responde en el cuaderno las siguientes preguntas:
1. ¿Cuál crees que es la importancia del HTML?
2. ¿Explica la diferencia entre navegador web y motor de búsqueda? da ejemplos de cada uno.
3. ¿Explica la diferencia entre Página Web y Sitio Web? da ejemplos de cada uno.
4. ¿Cuáles son los elementos necesarios para crear una página o sitio web?
5. ¿Escribe cuál es la estructura básica de un documento HTML?
6. ¿Cuál es la extensión de archivo, que se debe utilizar al guardar un documento HTML?