Guía 2 - Universidad Don Bosco
Anuncio
Diseño digital V GUÍA 2 GUÍA 2 Tema: Uso de las etiquetas HTML, imágenes y procedimiento ilustrado en diez pasos. CONTENIDOS • Aplicación de etiquetas HTML y sus atributos. • Insertar imágenes en Adobe Dreamweaver CC. • Crear un nuevo sitio OBJETIVO ESPECÍFICO • Introducir a los estudiantes en la estructura general de un página web. • Conocer la distribución de las etiquetas de apertura y de cierre dentro de un HTML. MATERIALES • Leer previamente la Guía Número 2 • Traer 10 fotografías ilustrando un proceso de realización (Por ejemplo: ¿Cómo cocinar un pastel?, ¿Cómo mejorar un jardín? ¿Cómo hacer pizza? dimensiones: 250 x 250 px, en modo de color RGB. ¿Cómo funcionan las etiquetas dentro de un HTML? En la guía anterior concluíamos que un HTML utiliza etiquetas o marcas, que consisten en breves instrucciones 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. Las etiquetas básicas de HTML, de obligada presencia en todo documento son: ETIQUETA DESCRIPCIÓN <HTML> y </HTML> Es la etiqueta que define el inicio del documento html, le indica al navegador que todo lo que viene a continuación debe tratarlo como una serie de códigos html. <HEAD> Define la cabecera del documento html, esta cabecera suele contener información sobre el documento que no se muestra directamente en el navegador. Como por ejemplo el título de la ventana de su navegador. Dentro de la cabecera <HEAD> podemos encontrar: a las etiquetas <title> y <link>. <TITLE> y </TITLE> Define el titulo de la página. Por lo general, el título aparece en la barra de título encima de la ventana. <LINK> Para definir algunas características avanzadas, como por ejemplo las hojas de estilo usadas para el diseño de la página, ejemplo: <link rel=“stylesheet” href=“/style.css” type=“text/css”>. Diseño digital V GUÍA 2 ETIQUETA <BODY> y </BODY> <BODY BGCOLOR> DESCRIPCIÓN Define el contenido principal o cuerpo del documento, esta es la parte del documento html que se muestra en el navegador, dentro de esta etiqueta definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro de <body> podemos encontrar numerosísimas etiquetas como: Este parámetro define el color de fondo de la página. La etiqueta completa es: <body bgcolor= “#FFFFFF”> ATRIBUTO Donde los número y letras indican un código de color en sistema hexadecimal. <BODY TEXT> Define el color del texto en toda la estructura de la página web. <H1> . . . <H6> Encabezados o títulos del documento en diferentes tamaños de fuente siento H1 La más grande y H6 la más pequeña. <P> <BR> Etiqueta párrafo. Salto de línea forzado. <A> y </A> Indica la existencia de un hipervínculo o enlace, dentro o fuera la página web. Debe definirse el parámetro de pasada por medio del atributo href. <DIV> y </DIV> Se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico. <IMG> Indica la existencia de una imagen para mostrarse en el navegador. <img src=“imagen_muestra.jpg”> Diseño digital V GUÍA 2 2. Dentro de la carpeta de guia 2 haga una carpeta que se llame imagenes, pegue las imagenes de su procedimiento, cámbieles el nombre a cada una y ordénelas del 1 al 10, es importante recordar que los archivos no deben de llevar jamás “´ o ñ” 3. Abra Dreamweaver cree el HTML y guardelo en la carpeta de la guia 2 con el nombre de: “guia2.html” no deje espacios al momento de guardarlo. 4. Coloque las etiquetas de apertura y cierre de HTML, HEAD, TITLE Y BODY, como se presenta a continuación: <HTML> <HEAD> <TITLE> Procedimiento </TITLE> </HEAD> <BODY> </BODY> </HTML> Guarde el archivo y visualícelo con el menú Archivo / Vista con la herramienta de Dreamweaver Vista Previa: En medio de la etiqueta CENTER colocaremos el título del procedimiento, ahora cuando lo actualicemos si aparecerá en la página HTML: ... <BODY BGCOLOR=”FFCC00”> <CENTER> <H1> Como hacer Brownies </H1> </CENTER> </BODY> ... Notemos que para colocar el título le asignamos una etiqueta para darle carácter de título siendo H1 la etiqueta que nos proporciona el tamaño de letra aumentado y H6 la etiqueta que nos da el tamaño de letra reducido para un título. Si nosotros vamos a colocar tildes también debemos de incluir un código especial para cada una de estas: ... <BODY BGCOLOR=”FFCC00”> <CENTER> <H1> C&oacute;mo hacer Brownies </H1> </CENTER> </BODY> ... Si queremos tildar debemos de usar: & + vocal a tildar + acute + ; Déle clic al ícono de vista previa, visualizará algo similar a lo siguiente: Lo que observará será una página HTML en blanco, pero note que la barra del título tiene el nombre del procedimiento que usted puso dentro de la etiqueta TITLE de su HTML. 5. En medio de la etiqueta de apertura de BODY, escribiremos los siguientes parámetros marcados con negrita: ... (Estos puntos seguidos quiere decir que hay etiquetas HTML previas o posteriores) ... <BODY BGCOLOR=”FFCC00”> </BODY> ... Con la etiqueta BODY BGCOLOR usted puede otorgarle photoshop o sitios en línea. 6. Damos una serie de enters en medio de la etiqueta de apertura y cierre de BODY y escribiremos los siguientes parámetros que nos servirán para que la composición permanezca centrada: ... <BODY BGCOLOR=”FFCC00”> <CENTER> </CENTER> </BODY> 7. Damos un par de enters después de la etiqueta de cierre de H1, acontinuación ocuparemos la etiqueta TABLE (etiqueta TD) Similar cuando las hemos ocupado en Word o Excel. ... <BODY BGCOLOR=”FFCC00”> <CENTER> <H1> C&oacute;mo hacer Brownies </H1> </CENTER> <TABLE> <TR> </TR> </TABLE> </BODY> ... <TD> </TD> <TD> </TD> Para poder visualizarlo vamos a agregar el siguiente valor: &nbsp; este valor representa un espacio en blanco. Diseño digital V GUÍA 2 ... <BODY BGCOLOR=”FFCC00”> <CENTER> <H1> C&oacute;mo hacer Brownies </H1> </CENTER> <TABLE> <TR> </TR> </TABLE> </BODY> ... <TD>&nbsp;</TD> <TD>&nbsp;</TD> Coloquémos además la etiqueta CENTER de nuevo para centrar la tabla: ... <BODY BGCOLOR=”FFCC00”> <CENTER> <H1> C&oacute;mo hacer Brownies </H1> </CENTER> <CENTER> <TABLE> <TR> Visualmente dentro de Dreamweaver en el apartado de diseño el resultado será el siguiente: <TD>&nbsp;</TD> <TD>&nbsp;</TD> </TR> </TABLE> </CENTER> </BODY> ... Visualmente dentro de Dreamweaver en el apartado de diseño el resultado será el siguiente: 9. En cada celda de la derecha (Etiqueta TD), incrustaremos una imagen para esto vamos a ocupar una etiqueta especial IMG SRC, borraremos la etiqueta &NBSP: ... <TD><IMG SRC=”URL”></TD> <TD>&nbsp;</TD> </TR> ... Nótese que esta etiqueta no tiene etiqueta de cierre. Para que el resultado sea el requerido en sus materiales se le pidió imagenes de 200 x 200 pixeles. Visualmente dentro de Dreamweaver en el apartado de diseño el resultado será el siguiente: 8. Debido a que nuestro procedimiento tiene diez pasos puede copiar y pegar cada etiqueta de apertura y cierre de TR. ... <TR> <TD>&nbsp;</TD> <TD>&nbsp;</TD> </TR> <TR> <TD>&nbsp;</TD> <TD>&nbsp;</TD> </TR> ... 10. En cada celda de la derecha colocará por medio de listas de bullets los ingredientes para la preparación, para esto ocuparemos la etiqueta UL con el valor DISC, SQUARE o CIRCLE, y luego ocuparemos la etiqueta LI, así como lo vemos en lo siguiente: Diseño digital V GUÍA 2 ... <TD><IMG SRC=”URL”></TD> <TD> INGREDIENTES: <UL TYPE=”DISC”> <LI> Huevo </LI> <LI> Chocolate</LI> <LI> Leche</LI> </TD> ... Visualmente dentro de Dreamweaver en el apartado de diseño el resultado será el siguiente: proceso puede activar despues de guardar el ejercicio la Vista Previa para verlo en vivo en el navegador. REFERENCIAS BIBLIOGRÁFICAS • html.hazunaweb.com • platea.pntic.mec.es • kioskea.net • www2.uca.es • Guía 2 Diseño Digital 5, Universidad Don Bosco.
