¡Descarga Tutorial para crear páginas Web básicas con HTML y más Apuntes en PDF de Tecnologías de la Información y la Comunicación solo en Docsity!
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería
Tutorial #1 Creación de la 1ª. página Web
Quizás han de recordar, que tiempo atrás les comente que el Tema de Páginas Web, estaba muy bien tratado en el libro de texto , que algunos de ustedes ya lo habían adquirido, por ello las actividades que se van a llevar acabo, serán en gran parte apoyadas en este libro de texto. Y para aquellos que no lo adquirieron por equis razón, no se preocupen, para ello existe Internet, en el cual siempre encontrarán la información necesaria para cumplir con las actividades que iremos realizando, así que iniciamos este último tema de este semestre.
Introducción.
Antes de iniciar con el tema, debemos de explicar algunos aspectos que rodean a las páginas Web, Internet es un conjunto de computadoras que forman entre si una red global, a nivel mundial, son computadoras de cierta sofisticación, llamadas Servidores (Server, en inglés), las cuales son las que van a albergar grandes cantidades de información (páginas Web), todo este conjunto de información es lo que se conoce como: WWW , es decir World Wide Web (red informática mundial) , es un sistema de distribución de documentos de hipertexto o hipermedia interconectados y accesibles a través de Internet. Analogía entre Internet y el cerebro humano La imagen anterior establece una analogía entre Internet y el cerebro humano , ambas son las partes físicas , y por otro lado WWW y el conocimiento , ambos son los contenidos lógicos de Internet y del cerebro humano, respectivamente.
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería En este tema, nos ocuparemos de la parte lógica contenida en Internet, las páginas Web que son parte de toda esa información que conforma el elemento lógico. Por ello haremos un estudio muy a detalle del pseudolenguaje HTML ( H iper T ext M arkUp L anguage) el cual nos permite crear páginas Web. Otro concepto importante a tratar es el Navegador Web que todo mundo emplea en Internet. Un navegador web (en inglés, web browser ) es un software, aplicación o programa que permite el acceso a la Web (WWW), interpretando la información de distintos tipos de archivos ( por ejemplo las páginas Web que vamos a crear empleando HTML ) y sitios web para que estos puedan ser vistos. Esto quiere decir que lo que construyamos con HTML, requerimos que lo interprete un navegador web, para poder observar de manera correcta lo que hayamos diseñado y desarrollado. Ahora solo falta comentar que emplearemos la herramienta de Windows “ Bloc de notas ” (en inglés Notepad ) para precisamente construir las páginas Web que deseemos. Así que iniciamos precisamente con la construcción de nuestra primera página Web.
Construcción de nuestra 1ª. página Web
Paso 1. Accedemos al bloc de notas. Para ello, una forma de hacerlo es colocar el puntero del Mouse en la barra de tareas (parte inferior de la pantalla) y sobre el área del extremo izquierdo debe de estar el texto “Escribe aquí para buscar”, pues ahí teclea bloc de notas , tal como se muestra en la 2ª. imagen de abajo
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería ** Página Web #1 **** La etiqueta TITLE , permite especificar el título de la página Web, el ejemplo anterior nos muestra el título: “ Página Web #1 ” que se le asignará a la página Web en cuestión, el titulo esta delimitado por las etiquetas: **** y . La etiqueta HEAD permite especificar el encabezado de la página web, que por el momento sólo emplearemos la etiqueta TITLE como subordinada de la etiqueta HEAD. La etiqueta indica el inicio de la página Web y por ende, la etiqueta indica el fin de la página Web, en otras palabras y delimitan una página Web. Y finalmente, la etiqueta **** marca el inicio del cuerpo de la página Web, es decir la parte donde emplearemos la mayoría de las etiquetas de HTML para el diseño y construcción de una página Web, y por ende **** marcará el final del cuerpo de la página Web. Paso 3. Guardar el código HTML. Ahora vamos a grabar o guardar el código previamente tecleado en el bloc de notas, para ello debes de emplear el menú “ Archivo ”, se encuentra en la parte superior izquierda, tal como se muestra en la siguiente imagen: Y elige la opción: “ Guardar ”: Aparecerá la ventana “ Guardar ”, en la cual deberás de teclear el nombre al archivo y al final de éste “ .HTML ” que vas a guardar y en la caja de “ Tipo: ”, deberás de elegir la 2ª. opción, es decir “ Todos los archivos (.) ”, tal como se muestra enseguida:
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería Es muy importante que nunca olvides añadirle al nombre del archivo: “ .HTML ” ( punto HTML ), y al tipo elegir: “ Todos los archivos (.)** ”, esto es importante para que el archivo se considere una página Web, y finalmente haz clic en el botón “Guardar” y listo. La carpeta donde hayas guardado la página “ 1ª pagina Web.HTML ”, deberá de mostrarse como sigue: Observa bien, Windows le asigno como ícono al archivo “ 1ª pagina Web.HTML ” el del navegador Google Chrome, esto significa que efectivamente el archivo que hemos creado es realmente una página Web, pudo haber sido el icono de otro navegador, dependiendo de los navegadores que tengas activos en tu PC , por ejemplo: Google Chrome , Opera , Safari , Internet Explorer y Mozilla FireFox Paso 4. Interpretación de la página Web (o ejecución de la página Web). Para la interpretación de la página Web que hemos creado, sólo bastará darle doble clic al icono que la representa, así que damos doble clic a nuestro archivo y se deberá ver la siguiente ventana que nos muestra el contenido de la página Web que hemos creado ( 1ª pagina Web.HTML ):
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería que COLOR , SIZE y FACE son atributos de la etiqueta FONT , el atributo COLOR pues es sencillo de interpretar, se refiere al color que deseamos tenga el texto delimitado por las etiquetas **** y **** y es RED (rojo en español), el atributo SIZE , también sencillo de interpretar, se refiere al tamaño, 5 es un tamaño mayor al de omisión, y finalmente el atributo FACE (cara o apariencia en español) se refiere al tipo de letra, que en nuestro caso es “ Century Gothic ”, que es uno de mis favoritos. También se añadió la etiqueta que se refiera a “ negrita ” ( BOLD en inglés) y la etiqueta que se refiere “ itálica ” (letra inclinada), así que cuando quieras “ ejecutar ” a la página Web con éstos cambios, deberás primero GRABAR LOS CAMBIOS , es decir dar Ctrl+G (o también elegir la opción Guardar del menú Archivo ), y listo, deberás de observar a la página tal como sigue: Observa muy bien, el título de la página fue modificado, ahora aparece el texto: “ Mi primer página Web ” (parte superior izquierda), el texto rojo tal como se especificó, su tamaño cambio a 5 y su tipo a “ Century Gothic ”, el texto “ la página ” ahora esta en “ negrita ” y finalmente la palabra Web cambio a itálica: “ Web ”. También cabe mencionar, que algunas veces los navegadores no respetan nuestro idioma , por ejemplo observa la siguiente imagen: Observa detenidamente, las vocales acentuadas no se interpretaron como debiera, por ejemplo en la palabra Aquà debería ser Aquí , la palabra página debería ser página , esto se debe a que el bendito navegador no reconoció nuestro idioma Español, para obligar al navegador que reconozca el idioma Español , sólo basta añadir el atributo lang=es a la etiqueta **** , tal como se observa enseguida:
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería Paso #5. Más modificaciones a la página Web. Quiero que observes bien el siguiente código HTML , y realices los cambios mostrados, después de que hayas realizados los cambios, debes GUARDAR , y en seguida “ ejecutar ” la página Web, te mostraré tanto el código como el resultado de la interpretación del navegador Código HTML
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería Finalmente, realizaré el último cambio: Código HTML : Interpretación por parte del navegador: Observa detenidamente el código HTML, y te darás cuenta de cuáles fueron los cambios.
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería TAREA Hemos terminado por el momento, la tarea va a consistir en: (1) Crear una página Web, le llamarás como tus datos, por ejemplo: Petra López Hernández.HTML Deberá de contener todas las etiquetas que hemos explicado, así como deberás de añadir las siguientes: etiqueta CENTER (centrar), etiqueta IMG (imagen), esto significa que deberás de realizar una investigación previa: localizar , conocer , comprender el uso de ambas y entonces incorporarlas a tu página Web de tarea. El texto tú lo definirás y la imagen a incorporar una selfie de ustedes. (2) Contestar las cinco preguntas de la página 53 del libro de texto, que corresponden al “ Análisis crítico ”, en caso de que no hayan adquirido el libro de texto, comuníquense con sus pares (compañeros de clase) y solicítenles por lo menos una foto de esa página. Así que definiré dos entradas en Classroom para que envíen sus tareas, la fecha límite será el próximo Domingo ( 3 de Mayo 2020 , 11:59 pm), saludos y nos vemos en el próximo tutorial.
