Ing. Cleyver Vazquez Jijon
¿Qué es el HTML? (Hyper Text Markup Language) Es el lenguaje con el que se diseñan las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Ing. Cleyver Vazquez Jijon
Editores de Código HTML Un editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Algunos de los editores visuales con los que podrás crear tus páginas Web son: Macromedia Dreamweaver. Bloc de Notas Microsoft Frontpage. Adobe Pagemill. NetObjects Fusion. Ing. Cleyver Vazquez Jijon
Ing. Cleyver Vazquez Jijon ETIQUETAS Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo está delimitada por los caracteres < >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. La etiqueta de final está delimitada por los caracteres </ >. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. EJEMPLO: <etiqueta> </etiqueta> Ing. Cleyver Vazquez Jijon
ETIQUETAS PRINCIPALES Las siguientes etiqueta todas la páginas web las tienen que llevar. <HTML> Indica el inicio de una pagina web <TITLE> Indica el titulo de la página el nombre que aparecerá en la parte superior del navegador. <BODY> El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc Ing. Cleyver Vazquez Jijon
Ing. Cleyver Vazquez Jijon ESTRUCTURA GENERAL DE UNA PAGINA WEB <HTML> <TITLE> Mano Amiga </TITLE> <BODY> Bienvenidos </BODY> </HTML> Ing. Cleyver Vazquez Jijon
CREAR MI PRIMER PÁGINA WEB Ing. Cleyver Vazquez Jijon
¿Qué programa utilizaremos? Para crear nuestra primer pagina web utilizaremos el bloc de notas esta es un aplicación que no tienes que instalar ya que viene en cualquier versión de Windows que tengas en tu computadoras (xp, vista o seven). Para esto vayan al botón “Inicio”, luego “Accesorios” y por ultimo “Bloc de notas”. Ing. Cleyver Vazquez Jijon
¿Qué programa utilizaremos? También utilizaremos un navegador es decir un programa o interfaz grafica que permite abrir las páginas de Internet para poder visualizar el resultado de codificación que estamos elaborando. Dentro de los navegadores mas comunes tenemos: Internet Explorer. Mozilla Firefox Google Chrome Netscape Ing. Cleyver Vazquez Jijon
Ing. Cleyver Vazquez Jijon ESCRIBIENDO EL CÓDIGO Ya que abrimos el bloc de notas escribimos el siguiente código tal y como se muestra en la siguiente ventana: Nota: Pueden escribirlo en mayúsculas o minúsculas no hay ningún problema Ing. Cleyver Vazquez Jijon
Ing. Cleyver Vazquez Jijon ¿Cómo se guarda? Una vez que terminamos de escribir el código es importante guardarlo de forma correcta para que pueda funcionar. Para ello realizaremos los siguiente pasos: Seleccionamos “Archivo”. Seleccionamos “Guardar”. Seleccionamos la dirección donde se guardara. Colocamos el nombre del archivo incluyendo la extensión .html. Nota: Se recomienda crear una carpeta en el escritorio o en el disco local “C:” con el nombre de “practicas de html” con el objetivo de tener todas nuestras practicas bien organizadas en una sola carpeta. Ing. Cleyver Vazquez Jijon
¿Cómo verifico si se guardo correctamente? Si el archivo se guarda de forma correcta se mostrara el siguiente icono: Pero si el archivo no se guardo correctamente entonces se mostrara un icono de la siguiente forma: Ing. Cleyver Vazquez Jijon
¿Cómo ver el funcionamiento de mi página? Es muy sencillo solo le das doble clic al archivo y en ese momento te va abrir el navegador que tengas instalado y te mostrara el resultado de la pagina: Ing. Cleyver Vazquez Jijon
Ing. Cleyver Vazquez Jijon Código y Resultado La etiqueta <TITLE> permite colocarle el titulo a nuestra pagina Web. Ing. Cleyver Vazquez Jijon
Ing. Cleyver Vazquez Jijon Código y Resultado La etiqueta <BODY> permite insertar texto a nuestra pagina Web. Ing. Cleyver Vazquez Jijon
Hacer modificaciones a mi página Web Para realizar modificaciones a la página primeramente se debe cerrar la pagina si se esta utilizando, posteriormente haga clic derecho sobre el archivo y seleccione la opción “Abrir con..” y seleccione “Bloc de notas”: Ing. Cleyver Vazquez Jijon
Hacer modificaciones a mi página Web Se realizan las modificaciones necesarias y posteriormente se guarda de forma normal (Archivo – Guardar) ya que no es necesario incluir la extensión .html esto se realiza cuando se guarda por primera vez y se cierra el bloc de notas. Ing. Cleyver Vazquez Jijon
Ver las modificaciones realizadas Una vez que se realizaron modificaciones abrimos nuevamente el archivo dándole doble clic sobre el: Ing. Cleyver Vazquez Jijon
Ing. Cleyver Vazquez Jijon Preguntas ¿Cómo le hizo para ponerle color? ¿Cómo le hizo para hacer la letra mas grande? ¿Cómo le hizo para poner ese tipo de letra? Respuesta Para poder realizar esos cambios se utilizan otras etiquetas y atributos que vamos a ir viendo poco a poco en los próximos temas. Ing. Cleyver Vazquez Jijon
Ing. Cleyver Vazquez Jijon Etiquetas y atributos Al inicio vimos que en la codificación HTML se manejan etiquetas y cada una de ellas tiene una funcionalidad dentro de una pagina, pero existen etiquetas que a su vez cuentan con algunos atributos. Los atributos son propiedades de las etiquetas. Por Ejemplo: <BODY> Etiqueta sin atributos <BODY bgcolor=pink> Etiqueta con atributos Recuerda que la etiqueta <body> representa el cuerpo de la pagina es decir el contenido de la pagina web y en este ejemplo utilizamos el atributo bgcolor y le asignamos el valor pink utilizando el signo de “=“ esto permite que el fondo de la pagina sea color rosa. Ing. Cleyver Vazquez Jijon
Otro ejemplo de Etiquetas y atributos <FONT> Etiqueta sin atributos <FONT size=6 color=blue> Etiqueta con atributos La etiqueta <FONT> permite asignarle propiedades al texto: Con el atributo size asignamos el tamaño de la letra que va desde 1 hasta 7. Con el atributo color asignamos el color de la letra el cual tiene que ser escrito en ingles. Asi como los dos ejemplos anteriores exiten muchas etiquetas y algunas de estas etiquetas cuentan con atributos, pero tambien recuerden que estas etiquetas se tienen que cerrar. </FONT> Ing. Cleyver Vazquez Jijon
Mas Etiquetas y atributos Descripción Atributos <FONT> Permite aplicar formato al texto de la pagina web SIZE COLOR FACE Tamaño de la letra Color de la letra Tipo de letra <BR> Realiza un salto de línea <P> Realiza un salto de párrafo <OL> Realiza lista ordenadas TYPE START Define el tipo de lista Indica el número en que iniciara la lista <UL> Realiza lista desordenadas Indica el tipo de lista <LI> Coloca cada uno de los elementos de las listas <UL> y <OL> <IMG> Inserta una imagen en la pagina web SRC WIDTH HEIGHT BODER Indica la dirección de la imagen Ancho de la imagen Alto de la imagen Colocar borde a la imagen con un grosor Ing. Cleyver Vazquez Jijon
Mas Etiquetas y atributos Descripción Atributos <TABLE> Permite insertar una tabla a una página web BORDER <TR> <TD> Coloca un borde a la pagina Permite insertar Filas a la tabla Permite insertar Columnas a la tabla <MARQUEE> Aplica un efecto de movimiento a un determinado elemento BEHAVIOR Indica el tipo de efecto <A> Insertar un hipervínculo HREF Indica la dirección a la cual se va a enlazar <BGSOUND> Insertar un sonido a la pagina web SRC LOOP Indica la dirección de archivo de audio Indica la cantidad de veces que se repetira <EMBED> Insertar un video WIDTH HEIGHT Indica la dirección del video Ancho del video Alto del video <CENTER> Permite centrar un elemento de la pagina web Ing. Cleyver Vazquez Jijon
Ing. Cleyver Vazquez Jijon Ejercicios Realizar la practica 1 que ya viene en esta presentación Realizar la practica 2. Si gustas puedes poner otros colores y otros tipos de letras, pero para el tipo de letra se debe de poner entre comillas si el nombre lleva mas de dos palabras como se muestra en la práctica 2 Ing. Cleyver Vazquez Jijon
Ing. Cleyver Vazquez Jijon Gracias Dudas y sugerencias cleyver@hotmail.com Ing. Cleyver Vazquez Jijon