autora: catalina fiol roig [email protected] 1 html (hypertext markup language)

autora: CATALINA FIOL ROIG [email protected]

1

HTML(HyperText Markup Language)


2

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><HTML>

<HEAD> <HEAD>

EncabezamientoEncabezamiento

</HEAD></HEAD>

<BODY><BODY>

CuerpoCuerpo

</BODY></BODY>

</HTML></HTML>


3

Encabezamiento <TITLE><TITLE>

Título de la páginaTítulo de la página </TITLE></TITLE>

Cuerpo del programa Separación del texto en párrafos con una línea en blanco

<P><P> Cabeceras o títulos (los tamaños van entre 1 hasta 6)

<H1> texto </H1><H1> texto </H1> <H2> texto </H2><H2> texto </H2> <H3> texto </H3><H3> texto </H3> <H4> texto </H4><H4> texto </H4> <H5> texto </H5><H5> texto </H5> <H6> texto </H6><H6> texto </H6>

Centrado <CENTER> texto </CENTER><CENTER> texto </CENTER>

Separadores o barra incrustada <HR><HR>


4

2. Dando forma al texto Separación de párrafos sin una línea en blanco

<BR><BR> Múltiples líneas en blanco

<BR><P><BR><P> <BR><P>…<BR><P>…

Negrita <B> texto </B><B> texto </B>

Cursiva <I> texto </I><I> texto </I>

Para fórmulas matemáticas índices y subíndices <SUP> texto </SUP><SUP> texto </SUP> (índices)m2 m <SUP> 2 </SUP> <SUB> texto </SUB><SUB> texto </SUB> (subíndices)m2 m <SUB> 2 </SUB>


5

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><UL>

<LI>Una cosa<LI>Una cosa

<LI>Otra cosa<LI>Otra cosa

<LI>Otra más<LI>Otra más

</UL></UL> Listas ordenadas (numeradas): sirven para presentar cosas en un orden

determinado.

<OL><OL>

<LI>Primera cosa<LI>Primera cosa

<LI>Segunda cosa<LI>Segunda cosa

<LI>Tercera cosa<LI>Tercera cosa

</OL></OL>


6

Listas anidadas:

Por ejemplo:

<UL><UL>

<LI> AA<LI> AA

<LI> BB<LI> BB

<OL><OL>

<LI>BB1<LI>BB1

<LI>BB2<LI>BB2

</OL></OL>

<LI> CC<LI> CC

</UL></UL>


7

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></html>


8

PrácticaTraduce 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árrafo1. Centrado

2. Múltiples líneas en blanco1. Enter

2. Enter + Línea en blanco

3. Fórmulas H 2=C 2+C 2

A n={a1 + a2 + a3 + a4 +….+ ak }

Listas desordenadas Listas anidadas Listas combinadas


9

3. Enlaces con otras páginas

Estructura general de un enlace <A HREF=“XXX”> YYY </A><A HREF=“XXX”> YYY </A>

XXX: destino del enlace (Nombre del archivo) YYY: texto que indica el enlace

Tipos de enlaces:1. Enlaces dentro de la misma página

2. Enlaces con otras páginas

3. Enlaces con una página fuera de nuestro sistema

4. Enlaces con una dirección e-mail


10

1. Enlaces dentro de la misma página

<A HREF=“#marca”> YYY </A><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><A NAME=“marca”> </A>

Por ejemplo: 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>


11

2. Enlaces con otra página nuestra

<A HREF=“MIPAG1.HTML”>Ejemplo 2 <A><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><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><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.


12

3. Enlaces con una página fuera de nuestro sistema

<A HREF=“http://www.uib.es”>Universidad de las Islas Baleares </A><A HREF=“http://www.uib.es”>Universidad de las Islas Baleares </A>


13

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><A HREF=“mailto: dirección e-mail”>texto del enlace </A>


14

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>


15

Práctica: Crear las siguientes páginas con el bloc de notas

Contenido de Tecnología de la Información

Esta asignatura consta de los siguientes temas:1.Conceptos básicos 2.Curso HTML3.Curso Excel4.Curso Acces (básico)5.Curso Word6.Iniciación a la programación estructurada

Volver al inicio de la páginaWeb oficial del colegio de San José Obrero

de PalmaBuzón de sugerencias

Curso Conceptos básicos

1. ¿Qué es la informática?1. ¿Qué es la informática?2. Aplicaciones

2. Estructura del ordenador1. Definición de ordenador2. ¿Cómo funciona un ordenador?3. Partes que integran un ordenador

3. Sistemas de numeración1. Sistema Binario2. Sistema octal3. Sistema hexadecimal

4. Arquitectura de un PC1. Estudio de las diferentes partes que

integran un PC2. Práctica

Volver a la página principal

Contenidos.html [email protected]


16

4. ImágenesEtiqueta general

<IMG SRC=“nombre_imagen.gif”><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”><IMG SRC=“nombre_imagen.gif” alt=“descripción”>Posición del título de la imagen

Título arriba

Título en medio

Título abajo

<IMG SRC=“IMG1.gif” Align=TOP><IMG SRC=“IMG1.gif” Align=TOP>

<IMG SRC=“IMG1.gif” Align=MIDDLE><IMG SRC=“IMG1.gif” Align=MIDDLE>

<IMG SRC=“IMG1.gif” Align=BOTTOM><IMG SRC=“IMG1.gif” Align=BOTTOM>


17

Imagen como enlace a otra página

<A HREF=“PAG.HTML”><IMG SRC=“IMG.GIF”> </A><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 HREF=“PAG.HTML”><IMG SRC=“IMG.GIF” BORDER=0> </A></A>

Imagen que enlaza con otra imagen

<A HREF=“IMG1.GIF”><IMG SRC=“IMG2.GIF”> </A><A HREF=“IMG1.GIF”><IMG SRC=“IMG2.GIF”> </A>

Img2.gifImg1.gif


18

Texto para enlazar con una imagen

<A HREF=“IMG.GIF”> Ver la imagen IMG </A><A HREF=“IMG.GIF”> Ver la imagen IMG </A>


19

<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>

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.


20

Práctica Tecnología de la Información CONCEPTES BÀSICS I QUADERNS DE

PRÀCTIQUES DE TECNOLOGIA DE LA INFORMACIÓ PER BATXILLERAT

Col·legi Sant Josep Obrer

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.

Tornar a l’inici de la Pàgina principal

Presentación

Objetivos del curso

Contenido

Contenidos.html

TecInf.html Presentacio.html

Presentacio.html


21

6. Los estándares del HTMLLa mayoría de las etiquetas son estándar para todos los navegadores.

Etiqueta no estándar: el parpadeo<BLINK> Este texto parpadea </BLINK><BLINK> Este texto parpadea </BLINK>

Separador horizontal<HR WIDTH=75%><HR WIDTH=75%> Ocupará un 75% de su anchura normal

<HR WIDTH=300><HR WIDTH=300> Tiene una anchura de 300 pixels

<HR WIDTH=75% ALIGN=LEFT><HR WIDTH=75% ALIGN=LEFT> Anchura del 75% con respecta a la anchura normal y alineada a la izquierda

<HR WIDTH=75% ALIGN=RIGHT><HR WIDTH=75% ALIGN=RIGHT> Anchura del 75% con respecta a la anchura normal y alineada a la derecha

<HR SIZE=20><HR SIZE=20> Varia el espesor del separador


22

Tamaño de las fuentes<FONT SIZE=5> Texto en tamaño 5 </FONT><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>

<FONT SIZE=-2> Texto en tamaño 5 </FONT><FONT SIZE=-2> Texto en tamaño 5 </FONT>

Tipos de fuentesCon el atributo FACE se indican varios tipos de fuentes distintas.

<FONT FACE=“TAHOMA, VERDANA, IMPACT”> Tipo de Fuente tahoma </FONT><FONT FACE=“TAHOMA, VERDANA, IMPACT”> Tipo de Fuente tahoma </FONT>


23

7. Fondos Fondo con un color uniforme

<BODY BGCOLOR=“#XXYYZZ”><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}

MENORMENOR MAYORMAYOR

Colores primarios

Rojo #FF0000

Verde #00FF00

Azul #0000FF

Otros colores

Blanco #FFFFFF

Negro #000000

Amarillo #FFFF00

Rojo oscuro #AA0000

Rosa # FF7070


24

Colores del texto y de los enlacesTEXT color del texto

LINK color de los enlaces

VLINK color de los enlaces visitados

<BODY BGCOLOR=“#XXYYZZ” TEXT =“#XXYYZZ” LINK=“#XXYYZZ” VLINK =“#XXYYZZ” ><BODY BGCOLOR=“#XXYYZZ” TEXT =“#XXYYZZ” LINK=“#XXYYZZ” VLINK =“#XXYYZZ” >

Cambio del color de una parte del texto

<FONT COLOR=“#XXYYZZ”> Texto </FONT><FONT COLOR=“#XXYYZZ”> Texto </FONT>

Recuerda que…

<FONT FACE=“Arial” SIZE=4 COLOR=“#XXYYZZ”> Texto </FONT><FONT FACE=“Arial” SIZE=4 COLOR=“#XXYYZZ”> Texto </FONT>

Fondos con una imagen

<BODY BACKGROUND=“IMAGEN.GIF”><BODY BACKGROUND=“IMAGEN.GIF”>


25

Curso de Word

1. Conceptos básicosPráctica 1Práctica 2Práctica 32. Tablas y tabulacionesPráctica 4Práctica 5Práctica 63. Herramientas del WordPráctica 7Práctica 8Práctica 94. Opciones del párrafo Práctica 10Práctica 11Práctica 125. Trabajo con hojas de cálculo y gráficosPráctica 13Práctica 14Práctica 156. Hipervínculos, objetos y otras opcionesPráctica 16Práctica 17Práctica 187. Exámenes de pruebaExamen 1

Volver a contenidos

Características de la páginaCaracterísticas de la páginaTipo de fuente: TahomaColor de la fuente: Azul pastelColor de fondo: Lila Pastel Color enlaces: AmarilloColor enlaces visitados: RojoTamaño títulos: H2Tamaño fuente: 4Largo de la barra (HR)=75%Nombre de la página: Word.html


26

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

<IMG SRC=“ordenador.gif” ALIGN=LEFT><IMG SRC=“ordenador.gif” ALIGN=LEFT>

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.

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><IMG SRC=“ordenador.gif” ALIGN=RIGHT>


27

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.

Los datos de entrada suministran la información necesaria al ordenador para que pueda resolver un problema.

<BR CLEAR=LEFT><BR CLEAR=LEFT>

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.

Los datos de entrada suministran la información necesaria al ordenador para que pueda resolver un problema.

<BR CLEAR=RIGHT><BR CLEAR=RIGHT>

Ejemplo 2:

Interrumpir el proceso de rellenado del texto a los lados de la imagen

<BR CLEAR=LEFT><BR CLEAR=LEFT> Busca el primer margen libre a la izquierda

<BR CLEAR=RIGHT><BR CLEAR=RIGHT> Busca el primer margen libre a la derecha

<BR CLEAR=ALL> <BR CLEAR=ALL> Busca el primer margen libre a ambos lados

Ejemplo 1:


28

Dimensionado de una imagen

WIDTH: anchoWIDTH: ancho

HEIGHT: altoHEIGHT: alto

<IMG SRC=“IMAGEN.GIF” WIDTH=50 HEIGHT=50><IMG SRC=“IMAGEN.GIF” WIDTH=50 HEIGHT=50>

<IMG SRC=“boton.gif” WIDTH=50 HEIGHT=25><IMG SRC=“boton.gif” WIDTH=50 HEIGHT=25>


29

Práctica

Objetivos del curso

En general, los objetivos que se consideran fundamentales en esta i todas las asignaturas son:

¿Cómo llevar a cabo estos objetivos?

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.

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.

ObjetivosI.html


• Muchas ganas de aprender• Interés• Ilusión• Curiosidad• Constancia•…


ObjetivosII.html


30

10. Tablas Estructura de una tabla<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><td> ff </td>

</tr><tr>

<td> gg </td><td> hh </td><td> ii</td>

</tr></table>

Text1 Text2 Text3

aa bb cc

dd ee ff

gg hh ii

<table>etiquetas

</table>


31

Filas con desigual números de celdas

<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>

Titular de la tabla

<caption> Título de la tabla </caption>

Text1 Text2 Text3

aa bb cc

dd ee

Text1 Text2 Text3

aa bb cc

dd ee

Título de la tabla

Celdas de cabecera En lugar de <TD> texto </TD> escribir <TH> texto </TH> y pondrá en negrita y centrado las celdas cabecera.

Text1 Text2 Text3

aa bb cc

dd ee


32

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>

Texto 1

Enlace Texto 2

Texto 3 Texto 4


33

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>

Texto 1

Enlace Texto 2

Texto3 Texto 4


34

Dimensiones de la tablaAncho <table Width=Nº%><table Width=Nº%>Alto <table Height=Nº%><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>

Text1 Text2

aa

bb cc

ee ff

hh ii


35

Color de fondo en las tablas Color en la totalidad de la tabla

<table bgcolor=“#XXYYZZ”><table bgcolor=“#XXYYZZ”> Color en una celda determinada

<td bgcolor=“#XXYYZZ”> texto </td><td bgcolor=“#XXYYZZ”> texto </td>

Imágenes de fondo en las tablas

<table background=“img.jpg”><table background=“img.jpg”>

Separación entre las celdas de una tabla

<table border cellspacing=20><table border cellspacing=20>

Separación entre el borde y el contenido dentro de las celdas

<table border cellpadding=20><table border cellpadding=20>


36

Prácticas: Crea las siguientes tablas utilizando el lenguaje HTML

T1 T2 T3

A B C

D E F

G H I

Titulo 1

Txt1 Txt2

Txt3 Txt4

Enlace Txt5

T1

T2

AA BB CC

DD

FF GG

HH

T1 T2

A B

C D

Tabla 1 Tabla 2 Tabla 3

Tabla 4Tabla 5

T1 T2

AA BB CC

DD EE FF GG

HH II

JJ KK LL MM

autora: catalina fiol roig [email protected] 1 html (hypertext markup language)

Documents