CURSO PÁGINAS WEB HTML:

Transcripción

1 CURSO PÁGINAS WEB HTML: CÓDIGO EN EL BLOC DE NOTAS Colegio Concertado Valdecás

2 HTML: EDICIÓN DE PÁGINAS WEB 1. Cómo escribir una página web? Detrás de las páginas que vemos por Internet se esconde un código, llamado HTML, que permite al usuario acceder a gran cantidad de información.en este curso se pretende aprender a manejar las herramientas más sencillas para poder construir nuestras propias páginas. Primeramente escribiremos el código de la forma más básica, utilizando simplemente el Bloc de notas y guardando nuestros archivos con extensión html ó htm. Una vez que manejemos las herramientas del código utilizaremos programas llamados editores que realizarán de forma automática el mismo y nos permitirán ver la página antes de colgarla en Internet. 2.Trabajo con el bloc de notas 2.1. Estructura de una página web Los documentos HTML se realizan intercalando etiquetas. Cada etiqueta es una orden que leerá el navegador (en nuestro caso Firefox).En general las etiquetas se escriben entre los símbolos y, además se escriben por parejas,de forma que la inicial se llama de entrada < > y la final de cierre </ >..Las partes fundamentales de una página web son: a) Etiquetas de comienzo y fin del documento <html> (etiqueta de entrada)...</html> (etiqueta de cierre) b) Etiquetas de cabecera <head>... </head> Dentro de la cabecera suele ponerse otra etiqueta : <title>...</title> ( Normalmente se escribe un título entre la etiqueta de entrada y de cierre que aparecerá en la barra del navegador) c) Etiquetas de cuerpo <body>...</body> Por tanto la estructura general de una página web quedaría como: <html> <head><title>...</title></head> <body>... Texto de la página (aquí se escriben los elementos que se verán por pantalla) </body> </html>

3 Ejercicio 1 :Escribe en el bloc de notas el siguiente código y guarda el archivo como mipag01.html. qué observas por pantalla? <html> <head><title>mi primera página</title></head> <body> <center><h1> página 1</h1></center> <hr> <p> Esta es la primera página que escribo </body> </html> 2.2 FORMATO DE TEXTOS Y PÁRRAFOS Títulos: Los títulos de nuestras páginas se pueden escribir en distintos tamaños con las etiquetas siguientes: <h1>...</h1> + <h2>...</h2> <h3>...</h3> Tamaño <h4>...</h4> <h5>...</h5> <h6>...</h6> - Centrado : La etiqueta de centrado se utiliza para centrar todo tipo de información :textos, imágenes, tablas... <center>...</center> Línea de separación: Para que aparezca en pantalla una línea horizontal se utiliza la etiqueta siguiente, que no tiene cierre. <hr> Separación de párrafos: Los párrafos se pueden separar con dos etiquetas: <p>...</p> ( en la separación introduce una línea en blanco, no se suele escribir el cierre) <br> (separa los párrafos sin dejar línea en blanco, no tiene cierre) Ejercicio 2: Modifica el primer fichero de forma que el cuerpo de la página sea: <h1>título 1</h1> <h2>título 2</h2> <h3>.título 3</h3> <h4>título 4</h4> <h5>título 5</h5> <h6>título 6</h6> Guárdalo como mipag02.html Ejercicio 3: Utilizando un texto, escribe tres párrafos del mismo que estén separado con líneas en blanco utilizando intro, sin etiquetas.guárdalo como mipag03.html Qué ocurre?

4 Ejercicio 4: Utilizando el archivo anterior, escribe los tres párrafos del mismo separados con una línea en blanco utilizando las etiquetas adecuadas.guárdalo como mipag04.html Ejercicio 5: Utilizando el archivo anterior, escribe los tres párrafos del mismo separados sinlínea en blanco utilizando las etiquetas adecuadas.guárdalo como mipag05.html Ejercicio 6: Utilizando el archivo anterior, escribe los tres párrafos del mismo que separados con múltiples línea en blanco utilizando las etiquetas adecuadas(prueba muchas <p>, muv chas <br> y la combinación de <p> y <br>.indica en el mismo archivo cuáles funcionan y cuáles no..guárdalo como mipag06.html Alineado de párrafos:el alineado se realiza como en cualquier editor de textos: a derecha, a izquierda, centrado ó justificado(alineado a ambos lados).la etiqueta es: <div align =x>...párrafo...</div> Donde x puede tener el valor right(derecha),left(izquierda),center(centrado) ó justify(justificado) La primera parte de la etiqueta div recibe el nombre de directiva y align recibe el nombre de atributo, ya que completa a la directiva dando más información.algunos atributos son optativos y otros obligatorios.en nuestro caso el atributo align es necesario ya que indica cuál es la alineación concreta. Aspecto de la letra:las etiquetas utilizadas para modificar la letra son las siguientes: Negrilla: <b>...</b> Cursiva:<i>...</i> Subrayado:<u>...</u> Letra subíndice:<sub>...</sub> Letra superíndice:<sup>...</sup> Tamaño de la letra:<font size=n>...</font> Donde n=1,2,3,4,5,6,7 - + Font sería la directiva y size es un atributo que indica tamaño. Color de la letra: <font color= Nombre color en inglés ó código de números y letras(código RGB) >...</font> En este caso la directiva es de nuevo font y el atributo color. Nota:Si se quiere modificar a la vez tamaño y color de letra se puede utilizar una única etiqueta que incluya los dos atributos: <font size= n color= nombre del color en inglés >...</font> Ejercicio 7: Utilizando el ejercicio anterior alinea los párrafos a derecha, izquierda y justificado. Guárdalo como mipag07.html Ejercicio 8:Abre la página anterior e introduce las etiquetas adecuadas para que la primera palabra de cada párrafo aparezca en negrilla, cursiva y subrayado y de tamaños 1,2,y 3 respectivamente. Guárdalo como mipag08.html Ejercicio 9:Realiza una página en la que aparezcan las 8 palabras( 4 utilizando el color en inglés y 4 el RGB) que sean colores,con el color que les corresponde y en distintas líneas. Ej:Silver,Lime,olive,navy,purple,teal,fucsia,aqua. Guárdalo como mipag09.html

5 2.7.Formularios Para aumentar la interacción entre el usuario y el autor de la página se introducen formularios que permiten conocer por ejemplo datos sobre el usuario. Los formularios trabajan de dos formas, bien mandando los datos directamente a una dirección de correo electrónico o bien enviando los datos a un servidor en el que se encuentra alojado un programa que trata la información.nosotros enviaremos los datos a una dirección de correo electrónico por ser la más sencilla.la etiqueta que hay que escribir para enviar un formulario es: <form action= mailto:dirección_de_correo_electrónico method= post enctype= text/plain name= f1 > Elementos del formulario... </form> Esta etiqueta indica a qué dirección se enviará la información pero por sí sola no muestra datos por pantalla. Lo que aparecerá por pantalla serán los elementos del formulario, de los cuales destacamos los más importantes a continuación: a)cajas de texto: Son espacios que me permiten escribir datos. Junto a esta caja se suele indicar al usuario el dato que debe introducir. La etiqueta que visualiza por pantalla la caja de texto es: < input type= text name= nombre_del_dato value= por defecto > Atributo name:es un parámetro interno,que distingue una caja de otra y sirve para guardar el dato de dicha caja. Cuando un usuario escriba sus datos y los envíe por correo electrónico aparecerá, name=dato que haya introducido el usuario, en el correo indicado en la etiqueta form. Es obligatorio. Atributo value:es un parámetro opcional. Se escribe para que no aparezcan las cajas sin información al cargar la página.su valor aparece por tanto escrito dentro de la caja. Atributo size= número :Indica el tamaño de la caja de texto. Atributo maxlength= número :Indica el número máximo de caracteres que se pueden escribir dentro de la caja. Si se cambia el tipo de type= text a type= password los caracteres escritos en la caja se escriben con asteriscos, como si se escribiera una contraseña. Ejercicio 10: Crea un archivo llamado form01.html que tenga un formulario que envíe los datos al correo inforbach1a@gmail.com (contraseña i1ai1ai1a) y que incluya dos cajas de texto una que pida nombre y otra apellido. Ejercicio 11:Modifica el archivo anterior de forma que el tamaño de la primera caja de texto sea 10 y la segunda 25,el número máximo de caracteres para escribir sea de 8 y 20 respectivamente y en la primera caja los datos se vean con asteriscos.guárdalo como form02.html b)cajas de comentario:son cajas similares a las anteriores, pero por pantalla se visualizan un mayor número de caracteres.se suelen utilizar cuando queremos que el usuario se exprese de forma más extensa.su etiqueta es: <textarea name= nombre_del_dato rows= número filas cols= número columnas >

6 Texto que aparecerá escrito dentro de la caja </textarea> Atributo name: realiza la misma función que en las cajas de texto. Rows: Filas visibles. Cols: Columnas visibles. Ejercicio 12: Modifica el archivo anterior y añade una caja de comentario con 6 filas y 40 columnas,que pida al usuario su opinión sobre la misma. Guárdalo como form03.html c)listas desplegables :Se utilizan cuando queremos que el lector escoja entre varias opciones que se le presenten. Su etiqueta es: <select name= nombre_del_dato > <option> opción1</option> <option>opción 2</option> <option>opción 3... </option> </select> Ejercicio 13:Abre el archivo anterior y añade una lista desplegable que de a elegir entre los colores azul,verde y rojo. Guardar como form04.html d)botón de confirmación:si queremos que el usuario confirme una opción se utiliza la siguiente etiqueta que introduce la caja indicada: <input type= checkbox name= nombre_del_dato > texto que se afirma ó se niega. El mensaje que aparecerá en el correo se igualará con ON si se ha hecho clic sobre el botón y se omitirá si no se ha marcado. e)botones de radio:se utilizan cuando queremos que el usuario elija una única opción entre varias, presentándolas todas a la vez.la etiqueta será: <input type= radio name= Nombre_del_dato value= Valor_del_dato > Tendremos que escribir para todos los botones de la misma opción el mismo name y distinto value. Los atributos name y value serán obligatorios en estos botones.el mensaje que llegará al correo será name igual al value que se seleccione. Si queremos que aparezca alguna de las opciones marcada inicialmente, habrá que añadir dentro de la etiqueta Checked. Ejercicio 14:Añade al archivo anterior la opción para que el usuario elija un sistema operativo utilizando una serie de botones de radio,de forma que se den a elegir tres sistemas operativos :MS-DOS, WINDOWS y LINUX.Guárdalo como form05.html Ejercicio 15:Añade al archivo anterior una serie de botones de confirmación con los textos que se indican: Profesor de ESO Residente en Madrid. Guárdalo con el nombre form06.html f) Botones de envío y de borrado de datos: El botón de envío de datos es necesario en todo formulario para que los datos lleguen al correo. Debemos escribirlo al finalizar el mismo:

7 <Input type= submit value= Texto_que_aparece_en_el_botón > El botón de borrado de datos, elimina todos los datos introducidos: <Input type= reset value= Texto_que_aparece_en_el_botón > Ejercicio 16:Añade a los ejercicios anteriores los botones de envío y borrado de datos. Guarda los cambios y envía dos formularios que completes con datos. Comprueba que los formularios han llegado a la cuenta de correo.