PDF de programación - Crea tu web - Programación en HTML, 1ª parte

Profesional

Programación en HTML, 1ª Parte

ÍNDICE DEL CURSO

Fundamentos: crear el primer archivo HTML
Cómo diseñar y dar formato a los textos
Listas, barras y vínculos
Insertar imágenes
Distintos formatos de escritura
División de páginas con tablas
Insertar y dimensionar marcos
Ejemplo de formulario
Qué son y para qué sirven los identificadores
Conceptos básicos del estilo en cascada
HTML con Java
Probando las páginas HTML
Principios legales de las páginas de Internet

Para
principiantes

Para
expertos

Para
profesionales

SUMARIO

¿Qué es el HTML?
Así funciona el HTML
Mi primer documento HTML
Ver mi primera página HTML
Los navegadores más importantes

Nº 35
Nº 37
Nº 39
Nº 41
Nº 43
Nº 45
Nº 47
Nº 49
Nº 51
Nº 53
Nº 55
Nº 57
Nº 59

66
66
67
68
68

plorer de Microsoft y seguir
los pasos siguientes:

ciendo click en

1Inicia el navegador ha-

,
.
También se puede acceder
directamente haciendo do-
ble click sobre el icono:

y

que normalmente estará en
el escritorio

05 (Pág. 68)

.

2 Una vez dentro del

navegador haz click en
cualquier parte de la barra
de
forma que la dirección ac-
tual quede seleccionada en
azul:
.
A continuación escribe la
dirección
y
pulsa la tecla $.

,

3 Tendrás que esperar

unos instantes hasta que
aparezca la página principal
de “Yahoo España”:

.
y
o
H

r
e
t
u
p
m
o
C

:
e
j
a
t
n
o
M


.
k
c
o
t
S

r
e
p
u
S

:
o
t
o
F

L a mayoría de las páginas

Web que visitamos en la
red Internet pertenecen
a las empresas, que utilizan
este medio para vender o
promocionar sus productos
y servicios. Pero Internet es
un medio que puede ser uti-
lizado por todos. Dominan-
do el lenguaje HTML
se
pueden crear páginas Web
propias y publicarlas en In-
ternet. El HTML es el len-
guaje que se utiliza en las
páginas Web y debe ser in-
terpretado por los navega-
dores
para mostrar los
64

02

01

La palabra Web significa en inglés tela de araña y se utiliza por su similitud
con la estructura de las páginas de Internet. Nosotros no nos vamos a convertir
en el hombre araña pero vamos a aprender a crear nuestra propia página Web.

textos y las imágenes con-
tenidos en las páginas.

Aprender el

lenguaje
HTML no es demasiado di-
fícil. En Computer Hoy he-
mos dividido este curso en
trece capítulos donde ex-
plicaremos paso a paso to-
das las herramientas nece-
sarias para diseñar atractivas
páginas de inicio

03

.

En esta primera entrega
del curso vamos a crear un
pequeño archivo HTML que
cargaremos con el navega-
dor. Así aprenderemos a in-
troducir los textos e imáge-

04

nes de nuestra página. Poco
a poco aprenderemos a dar
formato a los elementos y
complicaremos las cosas
con hipervínculos
, ta-
blas y formularios.
¿Qué es HTML?
La abreviatura HTML sig-
nifica “Hypertext Markup
Language”, traducido al cas-
tellano “Lenguaje para cre-
ar hipertextos”. Con el len-
guaje HTML se puede dar
formato al texto de las pá-
ginas Web y lo más impor-
tante, permite interrelacio-

Nº 35

nar unas páginas con otras
utilizando hipervíncu-
los para “navegar” a tra-
vés de la información y
saltar de página en pá-
gina para localidar la in-
formación deseada.
Así es el HTML
El texto HTML que se
oculta detrás de una pá-
gina Web se puede ver
sin más. Para echar tu
primer vistazo al códi-
go HTML de una página
Web de Internet puedes
utilizar el navegador Ex-

Programación en HTML, 1ª Parte

Profesional

4 Para terminar tu primer

archivo HTML escribe
en la última fila. El

código
completo
debe ser:

ciones

y
aparece la ventana:

5 Haciendo click en las op-
6 Para guardar el texto en

la carpeta

puedes seguir con el paso
7. Si quieres guardarlo en
otro sitio haz click en:

y elige la ruta deseada.

¿Qué es...?
HTML

01
Significa “Hypertext
Markup Language” y es
el lenguaje de progra-
mación utilizado para
crear las páginas de In-
ternet. En él se definen
las imágenes, los textos
y los hipervínculos que
tendrá la página. En el
HTML se permite la utili-
zación de dos formatos
de imagen: el GIF y el
JPEG. En algunas varia-
ciones de este lenguaje
se han incluido otros
formatos gráficos como
el PNG. También permi-
te la introducción de
otros contenidos como
vídeo y sonido.

Si quieres ver el texto
HTML que se esconde de-
trás de esta página tendrás
que hacer click sobre
y
. Aparecerá una
ventana con mucho texto:

y

A primera vista,lo que más
llama la atención de este
texto son las palabras que
se encuentran entre

06 (Pág. 68)

Estos elementos son iden-
tificadores
que
permiten dar formato al tex-
to. Por ejemplo: el identifi-
hace que el tex-
cador
to que
se escriba a
continuación aparezca en
negrita. No te preocupes si
no entiendes nada de lo que
pone. Cuando hayas termi-
nado con todos los capítu-
los del curso podrás desci-
frar sin problemas este texto
HTML.

4 Cierra el Bloc de notas y

el Internet Explorer ha-

ciendo click sobre

.

¿Que se necesita?
Para programar en HTML
tan sólo necesitas un orde-
nador con Windows 95 ó 98
y un navegador para ver las
páginas. El Internet Explo-
rer que viene con Windows
95 y 98 puede servirnos per-
fectamente.

También necesitas el pro-
grama “Bloc de notas” que
viene con Windows 95 y 98.
Para iniciarlo tienes que ha-
,
cer click sobre
y

,

.

A continuación verás la

ventana del editor

que utilizarás para escribir
tu primer ejemplo.
Nuestro primer
documento

en la
primera fila y pulsa la te-

1Escribe
2 Introduce las tres líneas

de texto

cla $.

pulsando la tecla $ al final
de cada una.

Con estas líneas estamos
dando un título a nuestra pá-
gina. Este título será el que
aparece en la barra superior
de la ventana del navegador
cada vez que se muestre la
página:

3 Escribe la cuarta, quinta

y sexta filas:

No olvides pulsar la tecla
$ después de cada una de
ellas. Con este paso hemos
conseguido introducir el

texto
que en la página
Web que tendrá el
aspecto
cuando sea mostra-
da en el navegador.

Navegadores
02
Estos programas permi-
ten visualizar el conteni-
do de las páginas Web
de Internet. También se
utilizan para descargar
ficheros o visualizar
contenidos multimedia.
En la actualidad los na-
vegadores más utiliza-
dos son el Explorer de
Microsoft y el Navigator
de Netscape. El sistema
operativo Windows 98
incorpora el navegador
de Internet como uno de
los accesorios básicos
del sistema.
Página
de Inicio

También llamada Home
o Homepage. La presen-
tación de personas o
empresas en Internet
consiste en varias pági-
nas conectadas entre sí.
La página de inicio es la
principal y la que da ac-
ceso a las demás.

03

Hipervínculos
04
También se conocen co-
mo enlaces. Son re-
ferencias entre varias
páginas que se encuen-
tran en la red Internet.
Se suelen distinguir por
tener un color distinto al
resto del texto, estar su-
brayados o representa-
dos por una imagen. Al
hacer click sobre ellos,
el navegador carga la
página correspondiente.
Los hipervínculos per-
miten que el usuario se-
leccione la información
que desea visualizar.

!

Editores HTML

!

No es programación

La forma más sencilla de
crear una página Web es
utilizar un editor especial de
HTML. Este tipo de progra-
mas permiten colocar fácil-
mente los textos e imá-
genes que se desean pre-
sentar en la página Web y
genera el código HTML au-
tomáticamente.
Pero estos editores también
tienen sus inconvenientes.
Los programas económicos
suelen ser poco eficaces y
los más caros tienen un ma-
nejo muy complicado.
Además, muchos de estos
editores crean un código
HTML poco depurado. En
muchos casos se repiten
instrucciones que no sirven
para nada y ralentizan el
funcionamineto de la pá-
gina. Para solucionar este

problema hay que conocer
el lenguaje HTML y optimi-
zar las instrucciones de las
páginas manualmente.
En Computer Hoy hemos
preferido centrarnos en el
diseño de páginas con un
editor de texto normal. Es-
to te permitirá aprender la
sintaxis y funcionamiento
de este lenguaje y crear
páginas mucho más efi-
cientes. Si después de este
curso dominas el HTML,
podrás utilizar cualquier
editor sin problemas. Ade-
más, tendrás una gran ven-
taja: dispondrás de amplios
conocimientos sobre el len-
guaje HTML. Esto te per-
mitirá optimizar el funcio-
namiento de tu páginas in-
troduciendo parte de códi-
go manualmente.

.

07(Pág. 68)

09 (Pág. 70)

Aunque escuches una y otra
vez la frase “programar en
HTML”, el HTML no es un
lenguaje de programación.
En HTML no se pueden cre-
ni
ar Bucles
evaluar las condiciones
de las varia-
08 (Pág. 68)
bles
Al HTML también le falta
otra característica: no per-
mite evaluar los datos in-
troducidos por el usuario.
En HTML sólo se pueden in-
sertar datos a través de los
campos de un formulario.
Pero la evaluación de esta
información se debe reali-
zar posteriormente con un
programa adicional.
La realidad es que el HTML
es un lenguaje para pre-
sentar textos. Su estructu-
ra es sencilla y resulta muy

adecuado para mostrar di-
ferentes tipos de conteni-
dos de texto e imágenes.
La idea básica de funciona-
miento de este lenguaje co-
menzó a surgir a principios
de la era de la informática.
En esa época se estaba em-
pezando a procesar textos
con ordenadores y todavía
no existía nada que se
pareciera a WYSIWYG
10 (Pág. 70)
En aquella época, cuando se
quería presentar una pala-
bra determinada en cursiva,
se colocaba delante y detrás
de la palabra una orden que
indicaba a la impresora:
“escribe el siguiente texto
en cursiva”. En HTML se si-
gue el mismo principio de
funcionamiento para mos-
trar los textos.

.

Nº 35

65

▼
▲
Profesional

Programación en HTML, 1ª Parte

¿Qué es...?
Escritorio

05
Es la superficie de tra-
bajo de Windows 95 y
98. En ella podemos de-
jar todo tipo de ficheros
y aplicaciones para que
estén accesibles en
cualquier momento. En
el escritorio se encuen-
tran los iconos más im-
portantes del sistema
como el de Mi PC, la Pa-
pelera de reciclaje o Mis
documentos. El escrito-
rio se puede personali-
zar a nuestro gusto con
colores, gráficos o