El lenguaje HTML: Principios básicos TAE de Programación Web I Elaborado por: Mtro. Luis Alberto González Aguilar Escuela Preparatoria 8 Calendario 2012B Justificación Las siguientes laminas constituyen.
Download ReportTranscript El lenguaje HTML: Principios básicos TAE de Programación Web I Elaborado por: Mtro. Luis Alberto González Aguilar Escuela Preparatoria 8 Calendario 2012B Justificación Las siguientes laminas constituyen.
El lenguaje HTML: Principios básicos TAE de Programación Web I Elaborado por: Mtro. Luis Alberto González Aguilar Escuela Preparatoria 8 Calendario 2012B Justificación Las siguientes laminas constituyen un recurso de apoyo para la clase de programación web I, de 5to semestre, en ellas se lleva un proceso de los contenidos vertidos en el programa de esta Trayectoria de área especializante, video tutorial, así como algunas practicas que el docente incorporo como reforzamiento al aprendizaje adquirido. Cabe aclarar que hasta la fecha no existe guía ni otros recursos oficiales por parte de SEMS-UDG para esta unidad de aprendizaje por tanto esto sugiere un material didáctico de apoyo a las clases. Contenidos (1/4) Características generales Estándares de HTML ¿Como funciona? Editores Edición de páginas HTML Algunas Terminologías Las etiquetas Fundamentos Practica 1 Mi primer pagina Video 1. Paso a Paso Fondos Contenidos (2/4) Algunos atributos de “body” Practica 2- Colores en hexadecimal Encabezados - Títulos Tarea 1 Formateo elemental de textos Atributos en las etiquetas Practica 3 -Creación de listas Añadir viñetas a las listas Simbolos especiales en html Practica 4 Contenidos (3/4) Otras etiquetas Inclusión de imágenes Creación de hiperenlaces Practica 5 Mas sobre enlaces Anclas Hiperenlaces entre secciones de diferentes páginas HTML Practica6 Practica 7 Tablas Contenidos (4/4) Practica 8 Incorporando Sonido Video Frames Practica 9 Formularios Practica 10 Bibliografía. Características generales Hipertexto e Hipermedia HTML: HyperText Markup Language El proceso de textos mediante marcas: Script de IBM TEX Documentos HTML: fichero ASCII Lenguajes interpretados y compilados Estándares de HTML HTML 1 Desarrollado en CERN HTML 2.0 Incluye mejoras en NCSA Mosaic (formularios e imágenes) HTML 3.2 Mejoras para controlar el formateo de tablas, etc. HTML 4.0 Mejoras para publicaciones multiplataforma (CSS, XML, WAP, DHTML) ¿Como funciona? Protocolo http Cliente Cliente: • Explorer • Netscape Dame el archivo x Aquí está Servidor Remoto Editores • Programa que permite redactar documentos. Editores visuales. Evitan la escritura de código HTML (la pagina se construye). Editores de texto. La pagina se crea a través del código HTML. Edición de páginas HTML Editores de propósito general Block de notas ó notepad Editores asociados al navegador: Netscape Composer MS Front Page Editores específicos Aracnofobia Procesadores de Texto Dreamweaver Algunas Terminologías HTTP: Hypertext Transfer Protocol Parámetros de comunicación cliente - servidor Web HTML: Hypertext Markup Language Lenguaje nativo para documentos publicados en el Web independiente del tipo de plataforma. URL: Uniform Resource Locator Dirección de un objeto en el Web http://www.colnodo.org.co/ Las etiquetas El formato general a seguir: <etiqueta>contenido</etiqueta> Las etiquetas que nunca deben faltar: <HTML></HTML> <HEAD></HEAD> <BODY></BODY> Fundamentos Rótulos <H1>Inicio</H1> No sensitivos a mayúsculas y minúsculas <H1> o <h1> Algunos atributos pueden ser sensibles a mayúsculas y minúsculas como los nombre de archivos, por ejemplo. Normalmente van en pares denotando inicio y fin <H1> y </H1> Practica 1 Mi primer pagina Crear un archivo llamado p1.html “mis documentos” Con el bloc de notas escribir el siguiente codigo: <html> <head> <title>pagina de inicio</title> </head> <body bgcolor="99CC99" > </body> </html> • Guardar el archivo “guardar como” con el nombre p1.html recuerda seleccionar la opción todos los archivos. Video 1. Paso a Paso Fondos Pueden ser: Texturas, Imágenes y Colores Sintaxis: <BODY BACKGROUND= “fondo.gif ” > <BODY BGCOLOR= “color” > Ejemplos 6, 7 y 8 Algunos atributos de “body” <body bgcolor="#0000FF"> <body bgcolor="blue"> <body background="fondo.gif"> <body background="imagenes/fondo.gif"> <body text="#FF0000"> <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > Practica 3 -Colores en hexadecimal Modifica en tu practica 1 la etiqueta body de manera que tengas alguno de los siguientes colores hexadecimales Color Hexadecimal Nombre #FFFFFF white #000000 black #000080 navy #0000FF blue #008000 green #008080 teal #00FF00 lime #00FFFF aqua #800000 maroon #800080 purple #808000 olive #808080 gray #C0C0C0 silver #FF0000 red #FF00FF fuchsia #FFFF00 yellow Encabezados - Títulos Etiqueta Ejemplo <H1> Título 1: HTML <H2> <H3> Título 2: HTML Título 3: HTML <H4> Título 4: HTML <H5> Título 5: HTML <H6> Título 6: HTML <H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4> Tarea 1 Investigar y aplicar en una pagina web las siguientes etiquetas html: <pre> <b> <br> <i> <a href> Formateo elemental de textos Encabezamientos <H1></H1>...........<H6></H6> Salto de párrafo <P></P> Centrado <CENTER></CENTER> Negrita y Cursiva <B></B> <I></I> Atributos en las etiquetas Alineación de párrafos Izquierda: ALIGN=left (opción por defecto) Derecha: ALIGN=right Centrado: ALIGN=center Utilización. <p ALIGN=opción> Ejemplo 1 Practica 3 -Creación de listas Listas no ordenadas <UL> <LI> </UL> Listas ordenadas <OL> <LI> </OL> Ejemplo 2 Crea con un nuevo archivo La siguiente lista no ordenada: Añadir viñetas a las listas Sintaxis general <UL TYPE=atributo> <OL TYPE=atributo> Atributos listas no ordenadas DISC, CIRCLE, SQUARE Atributos listas ordenadas 1, A, I Otras propiedades de las listas Listas de definición <DL> <DT> <DD> </DL> Listas anidadas (Ejemplo 3) <UL> <LI> <UL> <LI> Simbolos especiales en html • < y > indican inicio y fin de etiqueta Carácter Representación < < > > á á Á Á é é É É í í Í Í ó ó Se puede escribir directamente sin la representación en HTML Ó Ó ú ú Ú Ú   espacio en blanco ñ ñ Ñ Ñ ™ ™ Algunos caracteres especiales Practica 4 Escribir un párrafo de texto preformateado donde se describan la problemática de los animales en peligro de extinción. Alinearlo a la derecha y firmarlo (nombre completo y año) Utilizar una imagen creativa como fondo la cual debe estar colocada en el directorio imágenes. Crear un listado –no ordenado- de animales en peligro de extinción. Crear un listado ordenado con los animales que encabezan la lista de peligros de extinción en el planeta. Incorporar el nombre completo de tu Maestro a fin de acentuar acertadamente con código html Otras etiquetas Línea horizontal <HR> Atributos de <HR> <HR NOSHADE SIZE=valor WIDTH=“porcentaje” ALIGN=valor> La etiqueta <BLINK> (Ejemplo 4) <BLINK> ¡Hola Pepe! </BLINK> La etiqueta <META> <META HTTP-EQUIV= “refresh” CONTENT= “5; url=http://www.uam.es” > Inclusión de imágenes Formatos principales GIF y JPEG (Ejemplo 5) Sintaxis: <IMG SRC= “imagen.gif ” > Atributos <IMG SRC= “imagen.gif ” HEIGHT= valorWIDTH= valor > Alineación <IMG SRC= “imagen.gif ” ALIGN= top > Creación de hiperenlaces Permiten enlazar dos páginas cualesquiera independientemente de la ubicación de cada una: local o en red. (ejemplo hiperenlace 1) Ejemplos: <A HREF= “http://www.elpais.es” > Diario El País </A> <A HREF= “pagina.html” > Página1 </A> <A HREF= “http://www.uam.es” ><IMG SRC= “imagen.gif ” ></A> Practica 5 Realizar una pagina donde se haga uso de la etiqueta <HR>, utilizando sus atributos para separar cada formato de las imágenes propuestas la siguiente instruccion.. Incrustar en la pagina (y con apoyo de un editor grafico) 5 imagenes con dimensiones de 150X100 en los siguientes formatos: Jpg Bmp Png Gif Incorporar una liga que envie a la siguiente direccion web: www.udg.mx Mas sobre enlaces Enlace a otro lugar del mismo documento En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá. Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que queremos saltar: <A HREF="#inicio"> Ir al Inicio</A> Anclas Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="inicio"> </A> Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador Hiperenlaces entre secciones de diferentes páginas HTML Enlace desde una página (indice de autores.html) a una sección específica en otro documento (autores.html). (hiperenlace 2) Primero creamos la referencia en el primer documento: <A HREF= “autores.html#A1” > Autor1 </A> A continuación creamos el anclaje en el segundo documento: <A NAME= “A1” > Autor1 </A> Practica6 En una carpeta crearas 1 archivo html con las siguientes instrucciones: Elabora una pagina llamada Practica6.html con el siguiente contenido: Nombre completo –centrado con tamaño <h3> 1) Quien soy 2) Mis artistas favoritos El punto 1 agrégale un link que te envié a “quiensoy.html” El punto 2 agrégale un link que te envié a “maf.html” *recuerda el uso del <a href=“”> Practica 7 Elabora en la misma carpeta de la practica anterior un archivo con el nombre “quiensoy.html” En esta pagina deberás escribir algun parrafo que te describa –breve- incluyéndoles titulo: -Mis generales -Mis hobbies -Metas a corto plazo -Mis sueños Realiza un índice y las anclas correspondientes para facilitar su búsqueda. Elabora la pagina faltante “maf.html” con sus contenidos. Tablas Para definir una tabla básica se usan las etiquetas: <TABLE> y </TABLE> son las etiquetas donde está contenida la tabla <TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera) <TD> y </TD> señalan una celda (columna). Tablas en HTML -ejemplo La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas <TABLE > <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE>. Tablas en HTML -ejemplo La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas <TABLE BORDER="3" CELLSPACING="5" > <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE>. Atributos de las etiquetas de fila y celda WIDTH="30". Ancho de toda la fila o celda. También se puede dar en % ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila COLSPAN=3. Especifica el número de columnas que abarca la fila ROWSPAN=2. Especifica el número de filas que abarca la columna Ejemplo: <TABLE BORDER="3" CELLSPACING="5" WIDTH="200"> <TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el título</TH> <TR align="center"> <TD>Esta es la celda de la 1ª fila y de la 1ª columna</TD> <TD> Esta es de la 1ª fila y de la 2ª columna</TD> </TR> <TR BGCOLOR="#6D8FFF> <TD>Esto está con un fondo azul</TD> <TD align="right" valign="bottom">Y esto también</TD> </TR> </TABLE> Practica 8 Elabora con los aprendizajes adquiridos una tabla con la siguiente información: Incluye el color a las celdas (amarillo), la alineación a derecha y centrado y color de la fuente (azul). MULTIMEDIA Incorporando Sonido De un modo similar a como se inserta una imagen se puede insertar un fichero de sonido o de vídeo. Sonido de fondo al cargar la página En este caso la etiqueta depende del navegador, ya que se implementa de forma diferente en el Explorer y el Mozilla. Los formatos más usados son mid (para temas musicales sin voces) , wav y wma, mp3. .flv Etiqueta de Sonido La etiqueta básica para que se cargue el fichero de música con la página, sin intervención del usuario, es en Mozilla (siendo obligatorio especificar el tamaño): <EMBED SRC=“sonido/salsa.mid" WIDTH=144 HEIGHT=30> En Mozilla se verá para WIDTH=160 HEIGHT=70 como: EMBED atributos AUTOSTART= FALSE (por defecto) y TRUE. Este último hace que suene inmediatamente después de cargar la página sin necesidad de pulsar el botón. HIDDEN=TRUE, oculta la consola y sólo tiene este valor . Como no se podría activar el sonido pulsando el botón, suene al cargar la página LOOP=FALSE ,TRUE(por defecto),N para oir el fichero una vez, infinitas o el número que especifiquemos en N CONTROLS=SMALLCONSOLE, aparece una consola pequeñita A tomar en cuenta Si pones esta etiqueta, las versiones más recientes del Explorer (desde la 4.0) también la interpretan correctamente, salvo LOOP. El Explorer lee el fichero una vez para LOOP=0 y lo repite indefinidamente para N igual a otro valor cualquiera. Video Los ficheros avi y mpeg se reproducen con el Reproductor Multimedia de Windows, pero los demás necesitan visores propios que se deben instalar previamente. Por ejemplo los ficheros ram se visualizan con Real Player, los mov con Quick Time, etc. Son los llamados plug-in En Netscape, la etiqueta es muy parecida a la de sonido, siendo obligatorio especificar también las dimensiones: <EMBED SRC="video.avi" HEIGHT=300 WIDTH=400 AUTOSTART=false LOOP=false> En explorer debes llamar al fichero con un enlace <A HREF="gifs/jordan.avi">Mira el vídeo de Jordan</A> Recursos de video en youtube Seleccionar el video. Presionar el botón COMPARTIR (se desplegaran nuevas opciones) Presionar al botón INSERTAR Copiar el codigo en el cuerpo de tu HTML Frames Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargua una página html distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no podrán verlos. Sintaxis Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorará. Continuación Frames… <HTML> <HEAD> <TITLE> Título de la página </TITLE> </HEAD> <FRAMESET ROWS=75,*> <FRAME SRC="frames1.htm" > <FRAME SRC="frames2.htm" > </FRAMESET> </HTML> Cuando un navegador no lo reconoce <NOFRAMES> <BODY> Lo siento, su navegador no soporta frames. Pulse <a href="frames1.htm>aquí </A> para acceder a los contenidos de estas páginas. </BODY> </NOFRAMES> Practica 9 Realizar la practica siguiente: Formularios Interactividad Retroalimentación Recolección de datos Pueden tabularse y analizarse Respuestas personalizadas Aceptado por todos los navegadores Practica 9 Realiza el siguiente formulario con los elementos trabajados. Bibliografía. Berciano, A.(1999) “Guia HTML”, Consultado el 02 de Enero del 2012. Disponible en: http://platea.pntic.mec.es/~abercian/guiahtml/