Guia 1 introduccion al html inesani 2016
- 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?