CURSO PÁGINAS WEB
HTML:
CÓDIGO EN EL EDITOR GEDIT
Colegio Concertado Valdecás
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>
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.
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:
23=8
(a+x)2=a2+x2+2ax
a n=a1,a2,a3,a4....
v0=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=”http://www.yahoo.es”
•
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.
Ejemplo: href =”ftp://valdecas.com”
b) Los enlaces internos
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:
http://www.google.es
http://www.elpais.es
http://www.yahoo.es
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
0
