CURSO PÁGINAS WEB HTML: CÓDIGO EN EL EDITOR GEDIT

Tamaño: px

Comenzar la demostración a partir de la página:

Download "CURSO PÁGINAS WEB HTML: CÓDIGO EN EL EDITOR GEDIT"

Rocío Farías Moreno
hace 10 años
Vistas:

1 CURSO PÁGINAS WEB HTML: CÓDIGO EN EL EDITOR GEDIT Colegio Concertado Valdecás

2 1. Estructura de una página web a) Etiquetas de comienzo y fin del documento <html> (etiqueta de entrada)...</html> (etiqueta de cierre) b) Etiquetas que indican la forma de codificar la información y que le dice al navegador cómo debe interpretar los caracteres: <meta content="text/html; charset=utf-8" http-equiv="content-type"> 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 arriba a la izquierda) 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> Ejercicio 1 :Escribe en gedit el siguiente código y guarda el archivo como pag01.html. qué observas por pantalla? <html> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <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</p> </body> </html>

http-equiv="content-type"> b) Etiquetas de cabecera <head>... </head> Dentro de la cabecera suele ponerse otra etiqueta : <title>.

3 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,) <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 pag02.html Ejercicio 3: Utilizando un texto (Robótica), escribe tres párrafos del mismo que esté separado en el editor con espacios en blanco. Se separan en el navegador? Ejercicio 4: Utilizando el archivo anterior escribe los tres párrafos separados con una línea en blanco. Ejercicio 5: Utilizando el archivo anterior escribe los tres párrafos separados sin línea en blanco. Ejercicio 6: Utilizando el archivo anterior escribe los tres párrafos separados con múltiples líneas en blanco Prueba con <p>, con <br> y combinando <p> y <br>. Alineado de párrafos: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.

..</center> Línea de separación: Para que aparezca en pantalla una línea horizontal se utiliza la etiqueta siguiente, que no tiene cierre.

4 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 ejercicío 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 y cursiva y de tamaños 1,2,y 3 respectivamente. Guárdalo como mipag08.html Ejercicio 9:Realiza una página en la que aparezcan 10 palabras que sean colores, escritos en su color y en distintas líneas. Cinco escritos con el nombre del color y cinco con el código RGB.Incluye alguno de estos colores:silver,lime,olive,navy,purple,teal,fucsia,aqua. Ejercicio 10:Realiza una página en la que aparezcan las siguientes fórmulas, utilizando superíndices y subíndices: 2 3 =8 (a+x) 2 =a 2 +x 2 +2ax a n =a 1,a 2,a 3,a v 0 =v+at 2.3. Enlaces a)los enlaces externos <a href= Dirección a la que se realiza el enlace >Palabra ó imagen que sirve de enlace</a> En esta etiqueta hay que especificar la dirección del enlace. Ésta puede ser la dirección de una página que está ya colgada en Internet,el nombre de una página que hemos creado, un correo electrónico ó una dirección ftp: Si se trata de un página colgada en Internet se debe escribir siempre el mecanismo que utiliza para acceder a la misma(http): Ejemplo: href=

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.

5 Si es una página creada, basta con escribir el nombre de la página siempre y cuando la página en la que está el enlace y la página a la que llega el enlace estén situadas en la misma dirección: Ejemplo: href = mipag01.html Si el enlace se realiza a una dirección de correo electrónico hay que anteponer a la misma el mecanismo mailto : Ejemplo: href = mailto:[email protected] Si se trata de un servicio ftp (File Transfer Protocol), se debe indicar ftp://. Este servicio permite acceder a un servidor de ficheros y puede ser de dos tipos: anónimo si el acceso es libre y autorizado en el cual tenemos que especificar la contraseña adecuada. b) Los enlaces internos Ejemplo: href = ftp://valdecas.com En este tipo de páginas es necesario poner dos etiquetas, la primera en la palabra en la que se encuentre el enlace y es del tipo : <a href = #nombre_elegido_al_azar >...</a> En el lugar al que llega el enlace se coloca la etiqueta siguiente: <a name= nombre elegido al azar >...</a> Ejercicio 11: Escribe una página en la cual se hagan enlaces a las siguientes páginas colgadas en Internet y con palabras de enlace que tengan que ver con estas páginas: Guárdalo como pag11.html Ejercicio 12: Escribe una página que contenga tres enlaces internos.la página debe tener los tres párrafos del ejercicio 3 pero separados entre si al menos de 20 líneas en blanco (utilizando <p> y <br>).al principio de la página aparecerán las letras A,B y C en las cuales se pinchará para ir al inicio de cada uno de los párrafos anteriores. Guárdalo como pag12.html

es Si se trata de un servicio ftp (File Transfer Protocol), se debe indicar ftp://.

Documentos relacionados

TEMA 9 CREACIÓN DE PÁGINAS WEB

TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio