HTML
(HyperText Markup
Language)
autora: CATALINA FIOL ROIG
[email protected]
1
1. Una Página básica

Principio esencial uso de ETIQUETAS (TAGS).



<XXX> inicio de una orden
</XXX> fin de la orden
Estructura de un documento en HTML
<HTML>
<HEAD>
Encabezamiento
</HEAD>
<BODY>
Cuerpo
</BODY>
</HTML>
autora: CATALINA FIOL ROIG
[email protected]
2


Encabezamiento
 <TITLE>
 Título de la página
 </TITLE>
Cuerpo del programa
 Separación del texto en párrafos con una línea en blanco
 <P>
 Cabeceras o títulos (los tamaños van entre 1 hasta 6)
 <H1> texto </H1>
 <H2> texto </H2>
 <H3> texto </H3>
 <H4> texto </H4>
 <H5> texto </H5>
 <H6> texto </H6>
 Centrado
 <CENTER> texto </CENTER>
 Separadores o barra incrustada
 <HR>
autora: CATALINA FIOL ROIG
[email protected]
3
2. Dando forma al texto

Separación de párrafos sin una línea en blanco
 <BR>
Múltiples líneas en blanco
 <BR><P>
 <BR><P>…

Negrita



Cursiva


<B> texto </B>
<I> texto </I>
Para fórmulas matemáticas índices y subíndices
<SUP> texto </SUP> (índices)m2
 <SUB> texto </SUB> (subíndices)m2

m <SUP> 2 </SUP>
m <SUB> 2 </SUB>
autora: CATALINA FIOL ROIG
[email protected]
4

Listas
 Listas desordenadas (no numeradas): sirven para presentar cosas que,
por no tener un orden determinado, no necesitan ir precedidas por un
número.
<UL>
<LI>Una cosa
<LI>Otra cosa
<LI>Otra más
</UL>
 Listas ordenadas (numeradas): sirven para presentar cosas en un orden
determinado.
<OL>
<LI>Primera cosa
<LI>Segunda cosa
<LI>Tercera cosa
</OL>
autora: CATALINA FIOL ROIG
[email protected]
5

Listas anidadas:
Por ejemplo:
<UL>
<LI> AA
<LI> BB
<OL>
<LI>BB1
<LI>BB2
</OL>
<LI> CC
</UL>
autora: CATALINA FIOL ROIG
[email protected]
6
Ejemplo práctico
<html>
<head>
<title> Mi página Web- 2 </title>
</head>
<Body>
<center>
<h1> Mis aficiones </h1>
</center>
<hr>
Sin un orden particular, mis <b> aficiones </b> son las siguientes:
<ul>
<li>El cine
<li>El deporte
<ul>
<li>Natación
<li>Baloncesto
</ul>
<li> la música
</ul>
La música que más me gusta es <I> (en orden de preferencia): </I>
<ol>
<li> el Rock
<li> el jazz
<li> la música clásica
</ol>
<Body>
autora: CATALINA FIOL ROIG
[email protected]
</html>
7
Práctica
Traduce la siguiente página WEB a su correspondiente código en lenguaje HTML:
Nombre del documento: PagRep1-2.html
Repaso Capítulos 1 y 2
En esta práctica estudiaremos:




Listas ordenadas

Negritas
Cursivas

Opciones de párrafo

Centrado
Múltiples líneas en blanco
1.
2.
1.
2.
Enter
Enter + Línea en blanco
Fórmulas
3.


H 2=C 2+C 2
A n={a1 + a2 + a3 + a4 +….+ ak }
Listas desordenadas



Listas anidadas
Listas combinadas
autora: CATALINA FIOL ROIG
[email protected]
8
3. Enlaces con otras páginas
Estructura general de un enlace


<A HREF=“XXX”> YYY </A>


XXX: destino del enlace (Nombre del archivo)
YYY: texto que indica el enlace
Tipos de enlaces:

1.
2.
3.
4.
Enlaces dentro de la misma página
Enlaces con otras páginas
Enlaces con una página fuera de nuestro sistema
Enlaces con una dirección e-mail
autora: CATALINA FIOL ROIG
[email protected]
9
1. Enlaces dentro de la misma página
<A HREF=“#marca”> YYY </A>
#marca: Salta en el sitio de la página dónde hemos puesto la marca. Marca puede
ser cualquier nombre.
¿Cómo se pone una marca dentro de un documento?
<A NAME=“marca”> </A>
Por ejemplo: Si deseo ir al final de este documento
<A HREF=“#FINAL1”>Pulsa aquí para ir al final de la
primera página </A>
<A NAME=“FINAL1”> </A>
autora: CATALINA FIOL ROIG
[email protected]
10
2. Enlaces con otra página nuestra
<A HREF=“MIPAG1.HTML”>Ejemplo 2 <A>
Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al
principio de la página (a donde va por defecto), es preciso indicarlo mediante
una marca:
<A HREF=“MIPAG1.HTML#fin_pag”>Ejemplo 2 <A>
 En el archivo MIPAG1.HTML colocaremos la marca de final de documento
en el final de éste de la siguiente forma:
<A NAME=“fin_pag”> </A>
 Observación importante: es conveniente tener todos nuestros archivos en
el mismo directorio, de lo contrario tendrá que especificarse la ruta.
autora: CATALINA FIOL ROIG
[email protected]
11
3. Enlaces con una página fuera de nuestro sistema
<A HREF=“http://www.uib.es”>Universidad de las Islas Baleares </A>
autora: CATALINA FIOL ROIG
[email protected]
12
4. Enlaces con una dirección e-mail
En este caso, sustituimos lo que se ha llamado antes XXX (destino del enlace)
por mailto: seguido de la dirección e-mail.
<A HREF=“mailto: dirección e-mail”>texto del enlace </A>
autora: CATALINA FIOL ROIG
[email protected]
13
Ejemplo
<html>
<head>
<title> Mi página web 3 </title>
</head>
<Body>
<center> <h1> Mis páginas favoritas </h1> </center>
<hr>
Estas son mis páginas favoritas:
<p> <a href=“http://www.uib.es”> UIB </a>
<br> <a href=“http://www.microsoft.com”> Microsoft </a>
<br> <a href=“http://www.google.com”> Buscador google </a>
</Body>
</html>
autora: CATALINA FIOL ROIG
[email protected]
14
Práctica: Crear las siguientes páginas con el bloc de notas
Contenido de Tecnología de la Información
Curso Conceptos básicos
Esta asignatura consta de los siguientes
temas:
1.Conceptos básicos
2.Curso HTML
3.Curso Excel
4.Curso Acces (básico)
5.Curso Word
6.Iniciación a la programación estructurada
1.
¿Qué es la informática?
1.
2.
2.
Estructura del ordenador
1.
2.
3.
3.
2.
3.
Volver al inicio de la página
Web oficial del colegio de San José Obrero
de Palma
Buzón de sugerencias
Definición de ordenador
¿Cómo funciona un ordenador?
Partes que integran un ordenador
Sistemas de numeración
1.
4.
¿Qué es la informática?
Aplicaciones
Sistema Binario
Sistema octal
Sistema hexadecimal
Arquitectura de un PC
1.
2.
Estudio de las diferentes partes que
integran un PC
Práctica
Volver a la página principal
Contenidos.html
[email protected]
Concep_Basic.html
autora: CATALINA FIOL ROIG
[email protected]
15
4. Imágenes
Etiqueta
general
<IMG SRC=“nombre_imagen.gif”>
Si se desea que salga una descripción de la imagen para que en el caso de
que no se carge LA IMAGEN se disponga de una breve descripción, se
añadiría el comando ALT de la siguiente forma:
<IMG SRC=“nombre_imagen.gif” alt=“descripción”>
Posición del título de la imagen
<IMG SRC=“IMG1.gif” Align=MIDDLE>
Título arriba
Título en medio
Título abajo
<IMG SRC=“IMG1.gif” Align=TOP>
<IMG SRC=“IMG1.gif” Align=BOTTOM>
autora: CATALINA FIOL ROIG
[email protected]
16

Imagen como enlace a otra página
<A HREF=“PAG.HTML”><IMG SRC=“IMG.GIF”> </A>


Borde de la imagen: Si no se desea que aparezca el rectángulo que
rodea la imagen para resaltar el vínculo, hay que incluir dentro de la
etiqueta de la imagen al atributo BORDER=0.
<A HREF=“PAG.HTML”><IMG SRC=“IMG.GIF” BORDER=0> </A>
Imagen que enlaza con otra imagen
<A HREF=“IMG1.GIF”><IMG SRC=“IMG2.GIF”> </A>
Img2.gif
Img1.gif
autora: CATALINA FIOL ROIG
[email protected]
17

Texto para enlazar con una imagen
<A HREF=“IMG.GIF”> Ver la imagen IMG </A>
autora: CATALINA FIOL ROIG
[email protected]
18
Ejemplo: Copia el siguiente documento y guarda en tu carpeta de trabajo dos
imágenes con los siguientes nombres hombre.gif, isla.gif y casa.gif.
<HTML>
<HEAD>
<TITLE> Mi página del web 4 </TITLE>
</HEAD>
<BODY>
<CENTER> <H1> Mi página del web </H1> </CENTER>
<HR>
Esta es mi página del web. No es muy extensa, pero tiene todos los elementos
básicos. Espero que os guste. Poco a poco le iré añadiendo más cosas interesantes.
<P> <A HREF=“MIPAG2.HTML”><IMG SRC=“hombre.gif”></A> Mis aficiones
<P> <A HREF=“MIPAG3.HTML”><IMG SRC=“Casa.gif”></A> Mis páginas favoritas
<CENTER> <H3> Un lugar ideal para mis vacaciones </H3>
<IMG SRC=“Isla.gif” ALT=“isla”>
</CENTER>
</BODY>
</HTML>
autora: CATALINA FIOL ROIG
[email protected]
19
Práctica
Tecnología de la Información
Presentacio.html
CONCEPTES BÀSICS I QUADERNS DE
PRÀCTIQUES DE TECNOLOGIA DE LA
INFORMACIÓ PER BATXILLERAT
Col·legi Sant Josep Obrer
Presentación
Després d’un parell d’anys de docència, de
preparar material i estudiar les necessitats dels
alumnes per que adquireixin els coneixements
necessaris per estudis posteriors , ja sigui a la
universitat o en la formació professional de grau
superior, en l’àrea de la tecnologia de la informació
he cregut convenient editar un material on el seu
objectiu fundamental és facilitar pràctiques amb les
que es pugui adquirir certa destresa en el maneig
de les eines estudiades; amb l’inconvenient de que
no és fàcil trobar bibliografia o material
exclusivament pràctic que permeti als alumnes
practicar i exercitar-se en el maneig de les eines,
tot el contrari, el material que s’ofereix explica
sobre tot el funcionament d’aquestes.
Objetivos
del curso
Contenido
Tornar a l’inici de la Pàgina principal
Contenidos.html
TecInf.html
autora: CATALINA FIOL ROIG
[email protected]
Presentacio.html
20
6. Los estándares del HTML
La mayoría de las etiquetas son estándar para todos los navegadores.
Etiqueta
no estándar: el parpadeo
<BLINK> Este texto parpadea </BLINK>
Separador
horizontal
Ocupará un 75% de su anchura normal
<HR WIDTH=300> Tiene una anchura de 300 pixels
<HR WIDTH=75% ALIGN=LEFT> Anchura del 75% con respecta a la
<HR WIDTH=75%>
anchura normal y alineada a la
izquierda
<HR WIDTH=75% ALIGN=RIGHT>
Anchura del 75% con respecta a
la anchura normal y alineada a la
derecha
<HR SIZE=20>
Varia el espesor del separador
autora: CATALINA FIOL ROIG
[email protected]
21
Tamaño
de las fuentes
<FONT SIZE=5> Texto en tamaño 5 </FONT>
Nota 1: Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal Base
es el de 3.
Nota 2: Se puede cambiar el tamaño relativamente con respecto al tamaño base de la
siguiente forma:
<FONT SIZE=+2> Texto en tamaño 5 </FONT>
<FONT SIZE=-2> Texto en tamaño 5 </FONT>
Tipos
de fuentes
Con el atributo FACE se indican varios tipos de fuentes distintas.
<FONT FACE=“TAHOMA, VERDANA, IMPACT”> Tipo de Fuente tahoma </FONT>
autora: CATALINA FIOL ROIG
[email protected]
22
7. Fondos

Fondo con un color uniforme
<BODY BGCOLOR=“#XXYYZZ”>
XX es un número indicativo de la cantidad de rojo
YY es un número indicativo de la cantidad de verde
ZZ es un número indicativo de la cantidad de azul
Numeración en Hexadecimal={0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F}
MENOR
MAYOR
Colores primarios
Otros colores
Rojo #FF0000
Blanco #FFFFFF
Verde #00FF00
Negro #000000
Azul #0000FF
Amarillo #FFFF00
Rojo oscuro #AA0000
Rosa # FF7070
autora: CATALINA FIOL ROIG
[email protected]
23

Colores del texto y de los enlaces
TEXT color del texto
LINK color de los enlaces
VLINK color de los enlaces visitados
<BODY BGCOLOR=“#XXYYZZ” TEXT =“#XXYYZZ” LINK=“#XXYYZZ” VLINK =“#XXYYZZ” >

Cambio del color de una parte del texto
<FONT COLOR=“#XXYYZZ”> Texto </FONT>
Recuerda que…
<FONT FACE=“Arial” SIZE=4 COLOR=“#XXYYZZ”> Texto </FONT>

Fondos con una imagen
<BODY BACKGROUND=“IMAGEN.GIF”>
autora: CATALINA FIOL ROIG
[email protected]
24
Curso de Word
1. Conceptos básicos
Práctica 1
Práctica 2
Práctica 3
2. Tablas y tabulaciones
Práctica 4
Práctica 5
Práctica 6
3. Herramientas del Word
Práctica 7
Práctica 8
Práctica 9
4. Opciones del párrafo
Práctica 10
Práctica 11
Práctica 12
5. Trabajo con hojas de cálculo y gráficos
Práctica 13
Práctica 14
Práctica 15
6. Hipervínculos, objetos y otras opciones
Práctica 16
Práctica 17
Práctica 18
7. Exámenes de prueba
Examen 1
Características de la página
Tipo de fuente: Tahoma
Color de la fuente: Azul pastel
Color de fondo: Lila Pastel
Color enlaces: Amarillo
Color enlaces visitados: Rojo
Tamaño títulos: H2
Tamaño fuente: 4
Largo de la barra (HR)=75%
Nombre de la página: Word.html
Volver a contenidos
autora: CATALINA FIOL ROIG
[email protected]
25
8. Alineación y dimensionado de las
imágenes
Alineación a la izquierda o a la derecha de una imagen en la
página

Un ordenador llamado también computadora, es la máquina
que hace una serie de operaciones simples (sumas, restas,
multiplicaciones, divisiones, lecturas, impresiones, etc.) es un
tiempo mínimo y con la máxima seguridad.
<IMG SRC=“ordenador.gif” ALIGN=LEFT>
La aplicación de la informática comercial cada día llega a más
áreas de la sociedad, desde la automatización de ciertos
electrodomésticos hasta los grandes ordenadores de ciertas
empresas.
<IMG SRC=“ordenador.gif” ALIGN=RIGHT>
autora: CATALINA FIOL ROIG
[email protected]
26
Interrumpir el proceso de rellenado del texto a los lados de la imagen
<BR CLEAR=LEFT> Busca el primer margen libre a la izquierda
<BR CLEAR=RIGHT> Busca el primer margen libre a la derecha
<BR CLEAR=ALL>  Busca el primer margen libre a ambos lados
Ejemplo 1:
Los periféricos corresponden a los elementos que proporcionan la información al
ordenador y a los elementos por los cuales el ordenador suministra los resultados
del proceso.
<BR CLEAR=RIGHT>
Los datos de entrada suministran la información necesaria al ordenador para que pueda resolver un
problema.
Ejemplo 2:
Los periféricos corresponden a los elementos que proporcionan la información al
ordenador y a los elementos por los cuales el ordenador suministra los resultados del
proceso.
<BR CLEAR=LEFT>
Los datos de entrada suministran la información necesaria al ordenador para que pueda resolver un
problema.
autora: CATALINA FIOL ROIG
[email protected]
27

Dimensionado de una imagen
WIDTH: ancho
HEIGHT: alto
<IMG SRC=“IMAGEN.GIF” WIDTH=50 HEIGHT=50>
<IMG SRC=“boton.gif” WIDTH=50 HEIGHT=25>
autora: CATALINA FIOL ROIG
[email protected]
28
Práctica
Objetivos del curso
En general, los objetivos que se consideran
fundamentales en esta i todas las asignaturas son:
Expresión y comprensión de
mensajes. Para ello se incidirá en la
utilización correcta de los conceptos y
terminología especifica del mundo de la
informática.
¿Cómo llevar a cabo
estos objetivos?
• Muchas ganas de aprender
• Interés
• Ilusión
• Curiosidad
• Constancia
•…
Tratamiento de la información.
Organizando adecuadamente la
información utilizando para ello las
herramientas oportunas.
Resolución de problemas. Resoldre
problemes d’un certa dificultat amb
el maneig del programa full de càlcul.
Actitudes básicas como la
constancia y regularidad.
Volver a la página principal
ObjetivosI.html
autora: CATALINA FIOL ROIG
[email protected]
Volver a la página principal
ObjetivosII.html
29
10. Tablas
Estructura
de una tabla
<table>
<table border=2>
etiquetas
<tr>
</table>
<td> Text1 </td>
<td> Text2 </td>
<td> Text3 </td>
</tr>
<tr>
Text1 Text2
<td> aa </td>
<td> bb </td>
aa
bb
<td> cc </td>
dd
ee
</tr>
gg
hh
<tr>
<td> dd </td>
<td> ee </td>
<td> ff </td>
</tr>
<tr>
<td> gg </td>
<td> hh </td>
<td> ii</td>
</tr>
autora: CATALINA FIOL ROIG
</table>
[email protected]
Text3
cc
ff
ii
30

Filas con desigual números de
celdas

Titular de la tabla
<caption> Título de la tabla </caption>
<table border=2>
<tr>
<td> Text1 </td>
<td> Text2 </td>
<td> Text3 </td>
</tr>
<tr>
<td> aa </td>
<td> bb </td>
<td> cc </td>
</tr>
<tr>
<td> dd </td>
<td> ee </td>
</tr>
</table>
Título de la tabla
Celdas
Text1
Text2
Text3
aa
bb
cc
dd
ee
de cabecera
En lugar de <TD> texto </TD> escribir
<TH> texto </TH> y pondrá en negrita
y centrado las celdas cabecera.
Text1
Text2
Text3
Text1
Text2
Text3
aa
bb
cc
aa
bb
cc
dd
ee
dd
ee
autora: CATALINA FIOL ROIG
[email protected]
31

Contenido de las celdas
 Imágenes y Enlaces
<table>
<tr>
<td><img src=“img1.jpg”></td>
<td valign=TOP>Texto1</td>
</tr>
<tr>
<td align=RIGHT><A href=“mipag1.html”>Enlace
</a></td>
<td>Texto2</td>
</tr>
<tr>
<td> Texto3</td>
<td>Texto4</td>
</tr>
</table>
autora: CATALINA FIOL ROIG
[email protected]
Texto 1
Enlace Texto 2
Texto 3
Texto 4
32
Posicionamiento del contenido dentro de la celda
<table>
<tr>
<td><img src=“img1.jpg”></td>
<td valign=Bottom>Texto1</td>
</tr>
<tr>
<td align=Center><A href=“mipag1.html”>Enlace
</a></td>
<td>Texto2</td>
</tr>
<tr>
<td> Texto3</td>
<td>Texto4</td>
</tr>
</table>

autora: CATALINA FIOL ROIG
[email protected]
Texto 1
Enlace
Texto3
Texto 2
Texto 4
33

Dimensiones de la tabla
Ancho  <table Width=Nº%>
Alto <table Height=Nº%>
Combinar celdas: Filas y Columnas
<table border=2>
<tr>
<td colspan=2> Text1 </td>
<td> Text2 </td>
</tr>
<tr>
<td rowspan=3> aa </td>
<td> bb </td>
<td> cc </td>
</tr>
<tr>
<td> ee </td>
<td> ff </td>
</tr>
<tr>
<td> hh </td>
<td> ii</td>
</tr>
</table>

autora: CATALINA FIOL ROIG
[email protected]
Text1
aa
Text2
bb
cc
ee
ff
hh
ii
34

Color de fondo en las tablas

Color en la totalidad de la tabla
<table bgcolor=“#XXYYZZ”>
 Color en una celda determinada
<td bgcolor=“#XXYYZZ”> texto </td>

Imágenes de fondo en las tablas
<table background=“img.jpg”>

Separación entre las celdas de una tabla
<table border cellspacing=20>

Separación entre el borde y el contenido dentro de las celdas
<table border cellpadding=20>
autora: CATALINA FIOL ROIG
[email protected]
35

Prácticas: Crea las siguientes tablas utilizando el lenguaje HTML
Tabla 1
T1
T2
Tabla 2
Titulo 1
T3
A
B
C
D
E
F
G
H
I
Txt1
Txt2
Txt3
Txt4
Enlace
Tabla 4
T1
Tabla 3
T2
A
B
C
D
Txt5
Tabla 5
T2
T1
T2
AA
BB
DD
EE
CC
FF
HH
JJ
KK
GG
T1
AA
II
LL
MM
DD
BB
CC
FF
GG
HH
autora: CATALINA FIOL ROIG
[email protected]
36
Descargar

Document