Curso HTML by - WD PDF

HTML
(HiperTex Mark-up Language)
Mucha gente piensa que es muy difícil crear una página web; la verdad ¡Todos
podemos aprender a crear un sitio web! Y si sigues leyendo, tú también serás
capaz de hacerlo.
Otros creen -y están igual de equivocados- que para crear sitios web es
necesario un tipo de software caro y sofisticado. Es cierto que existen muchos
programas diferentes que aseguran hacer un sitio web por ti; unos se acercan
más que otros. Sin embargo, si quieres que todo salga perfecto, tienes que
hacerlo tú mismo.
Tampoco necesitas saber programar para poder entender este curso ¡Ya sabes
que siempre empezamos desde cero! Aprenderás las bases pero quizá luego
publiqué una segunda parte ;)
¿Entonces que necesitamos?

Nos olvidamos de cualquier programa que conozcas y nos quedamos solo con el
Bloc de Notas y el Internet Explorer :)
¿Es necesario estar conectado a Internet?

Ni en este momento, ni cuando estés haciendo tus sitios web, ni siquiera
mientras los veas en el navegador. Solo lo necesitaremos cuando quieras
compartir tu página con el mundo ;)
¿Para que me sirve HTML?

HTML se usa para crear sitios web. ¡Así de sencillo!
Todo sitio web contiene uno o más documentos HTML. Cuando navegas por la
web, no haces otra cosa que ir abriendo diferentes documentos HTML.
Muy bien, después de esta pequeña introducción podemos empezar sin

problemas.
1
Etiquetas
Todas las instrucciones que escribamos en HTML siempre van estar encerradas
entre los signos < (menor que) y > (Mayor que).
Las etiquetas son marcas que se usan para señalar el inicio y el fin de un
elemento. Por ejemplo <html> es una etiqueta de inicio y </html> es una
etiqueta de cierre. La diferencia entre ambas es la barra que tiene la de cierre.
Título de la página
Este va a ser nuestro primer ejercicio :) Abre una ventana del Block de Notas, si
se parece a esta lo hiciste bien:
Ahora escribe esto:
<html>
<head>
<title>Mi primera web</title>
</head>
</html>
El navegador lee el código HTML igual que lo haces tú: de arriba abajo y de
izquierda a derecha. Así pues, todo documento HTML empieza con lo que
debería aparecer en primer lugar en la página y termina con lo que debería ir en
último lugar :)
2
Lo primero que tienes que hacer es decirle al navegador que le "hablarás"
usando el lenguaje HTML. Esto se consigue con la etiqueta <html>. Así que antes
de hacer cualquier otra cosa, escribe <html> en la primera línea del Bloc de
notas.
Como acabamos de comentar <html> es una etiqueta de inicio y tiene que

cerrarse con su correspondiente etiqueta de cierre (cuando hayas terminado de
escribir todo el código HTML) es decir, al final siempre hay que colocar la
etiqueta </html>
Lo siguiente que vemos es la etiqueta <head> que significa cabecera y lo que

esté dentro de ella NO aparecerá en la página en sí. En este caso vemos que en
<head> se encuentra la etiqueta <title> y como su nombre lo indica sirve para
ponerle un título a nuestra página :)
Nuestro código se vería así en el navegador:
Barra de Títulos
Como ves es una página muy aburrida :( Ya habíamos dicho que nada de lo que
se ponga en la cabecera sería mostrado en la zona en blanco del navegador, es
decir, la zona dedicada a mostrar el contenido.
Esto nos hace pensar que existe una forma para poner el contenido de la página
:), pues así es: el cuerpo es el siguiente gran bloque de nuestro documento
HTML, para esto usaremos las etiquetas <body> y </body>
En su interior introduciremos todos aquellos elementos de los que queremos

conste nuestra página pueden ser texto, imágenes, tablas, etc. Conociendo la
etiqueta body podemos mejorar el ejemplo anterior ;)
3
<html>
<head>
</head>
<body>
<h1> Soy el encabezado más grande</h1>
<h2> Espera ya no soy el más grande</h2>
<h3>¿Por qué me estoy encogiendo?</h3>
<h4>Me estoy empezando a preocupar</h4>
<h5>Ya casi no me miro</h5>
<h6>Ya valí bestia :(</h6>
</body>
</html>
Cuando lo pasemos al navegador se miraría así:
Soy el encabezado más

grande
Espera ya no soy el más grande
¿Por qué me estoy encogiendo?
Me estoy comenzando a preocupar
Ya casi no me miro
Ya valí bestia :(
Creo que lo único que debo explicar son los elementos h1, h2, h3, h4, h5 y h6.
La h proviene de heading y como te imaginas se usa para crear encabezados o
titulares. Solo hay 6 niveles. (Fíjate como están dentro de la etiqueta <body>)
No pienses que cuando escribas la etiqueta <h1> el texto va a ser tamaño 24 y

va estar en negritas. Lo único que le estamos diciendo al navegador es que ese
texto es el más importante de la página y él decidirá como presentarlo.
4
Imagina que en el futuro los monitores pueden mostrar objetos en 3era
dimensión, estaría muy bien que el navegador mostrara nuestro titular en 3-D
pues sabe que es lo principal y que debe resaltarlo. Suena interesante ¿no? ;)
-Pero que acelerado eres, ya quieres pasarte al futuro y ni siquiera me has dicho
como hacerle para mirar el código en el navegador :(
¿Qué tú no eres el Luciérnago :|?
-No, yo soy el Sidronio
Ahaa perdón ._. Una vez que termines de escribir tienes que dar clic en Archivo,
Guardar Como y por último escribir cualquier nombre pero guardarlo CON LA
EXTENSIÓN .HML ó .HTM
Ve a donde lo guardaste y debe estar un archivo como este:
Pues ábrelo y disfruta tu web sin estar conectado ;)
Más elementos ;)
Ok, veamos ahora el elemento em (emphasis) que se usa para dar énfasis al
texto.
<html>
<head>
</head>
<body>
<h1>HackxCrack</h1>
<em> Este texto tiene énfasis</em>
</body>
</html>
Esto se vería así en el Internet Explorer:
5
HackxCrack
Este texto tiene énfasis
Sencillo, ¿verdad?
Otra etiqueta básica es <p> (paragraph) que sirve para escribir un párrafo.
<html>
<head>
</head>
<body>
<h1>HackxCrack </h1>
<p> Bienvenidos a mi nueva web, ya se que no parece muy
interesante pero pronto lo será.</p>
<em> ¡He dicho pronto! Tengan cuidado porque ya amenacé :)</em>
</body>
</html>
Aquí tienes una vista previa:
HackxCrack
Bienvenidos a mi nueva web, ya se que no parece muy
interesante pero pronto lo será.
¡He dicho pronto! Tengan cuidado porque ya amenacé :)
6
También tenemos el elemento hr (horizontal rule) que se usa para trazar una
línea horizontal. La etiqueta que usaremos es <hr /> Este es un caso especial y
se llama elemento vacío porque abre y cierra con la misma etiqueta.
<html>
<head>
</head>
<body>
<h1> HackxCrack</h1>
<p> Bienvenidos a mi nueva web, ya se que no parece muy
interesante pero pronto lo será.</p>
<em> ¡He dicho pronto! Tengan cuidado porque ya amenacé :)</em>
<hr />
</body>
</html>
En esta imagen puedes observar la línea gris que dibuja la etiqueta <hr />
HackxCrack
¡He dicho pronto! Tengan cuidado porque ya amenacé :)
Otro elemento vacío muy común es br y su etiqueta es <br /> Lo que hace es
crear un salto de línea forzado. Por ejemplo:
Observación: La etiqueta <p> también puede hacer el trabajo de la etiqueta

<br /> Malamente la utilizan así porque su función es solo escribir párrafos.
7
<html>
<head>
<body>
</head>
<h1> WebMasters </h1>
<p> Bienvenidos a mi nueva web, ya se que no parece muy interesante
pero pronto lo será.</p>
<em> ¡He dicho pronto!<br />Tengan cuidado porque ya amenacé :)</em>
<hr />
</body>
</html>
En el navegador miraríamos esto:
HackxCrack
¡He dicho pronto!

Tengan cuidado porque ya amenacé :)
Recapitulando ;)
Nunca confundas lo siguiente:
Esto body es un elemento.
Esto <body> y esto </body> son etiquetas.
Esto <body> es una etiqueta de inicio.
Esto </body> es una etiqueta de cierre.
Cualquier etiqueta que abras tiene que cerrarse. Si escribiste <em> en algún
momento tienes que escribir </em>. Por supuesto, esta regla no aplica para los
elementos vacíos.
8
En la sección del cuerpo (body) se escribe el contenido de la página. Ya conoces
algunos de los elementos más importantes:
<p>Se usa para escribir <h1>Encabezado de nivel 1</h1>

párrafos</p> <h2>Encabezado de nivel 2</h2>
<em>Muestra el texto <h3>Encabezado de nivel 3</h3>
enfatizado</em>
<h4>Encabezado de nivel 4</h4>
<hr />Dibuja una línea horizontal
<br />Crea un salto de línea forzado
Strong y Small
Del mismo modo que enfatizamos el texto al incluirlo entre la etiqueta de
inicio <em> y la etiqueta de cierre </em>, se puede acentuar más ese énfasis
usando la etiqueta de inicio <strong> y la etiqueta de cierre </strong>. Esta
palabra significa fuerte.
Asimismo, puedes hacer que el texto sea más pequeño usando <small> y
</small>. Esta palabra significa pequeño :)
Aquí abajo tienes el código fuente:
<html>
<head>
</head>
<body>
<h1>HackxCrack</h1>
<strong> Este texto tiene énfasis acentuado</strong>
<br />
<small>Este texto debería verse más pequeño</small>
</body>
</html>
9
Y se visualizaría así en el Navegador:
HackxCrack
Este texto tiene énfasis acentuado
Este texto debería verse más pequeño
Italic y Bold
Estos elementos se parecen bastante a <em> y <strong>. La diferencia es que la
etiqueta <i> indica exclusivamente texto en itálica (cursiva) y <b> solo significa
negritas. A diferencia de las otros dos que se interpretan como el navegador
desee. Si gustas puedes comprobarlo :)
Subrayado
Para esta acción tenemos el par de etiquetas: <u> y </u> (underlined)
Sin embargo, si no tenemos cuidado, podemos confundir al lector ya que los
enlaces de hipertexto también van subrayados. Aquí tienes un ejemplo sencillo de
su uso:
HackxCrack
Este texto esta subrayado
¿Y Puedo usar varios elementos a la misma vez?

Claro que si puedes, siempre que evitemos elementos superpuestos. Esto lo
entenderemos mejor con un ejemplo:
Si quieres que el texto aparezca enfatizado y más pequeño, se debe hacer de la

siguiente manera:
<em><small>Texto enfatizado más pequeño</small></em>
y NO de la siguiente manera:
10
<em><small>Texto enfatizado más pequeño</em></small>
En el primer ejemplo, cerramos en último lugar el elemento que abrimos

primero. De este modo evitamos confundir al navegador y a nosotros mismos :)
Si te parece muy confuso, también se vale que lo escribas así:
<em>
<small>Texto enfatizado más pequeño</small>
</em>
Anidar etiquetas
Todas las etiquetas pueden ser anidadas unas dentro de otras y conseguir
distintas combinaciones. Así, podemos crear un texto en negrita e itálica
introduciendo una etiqueta dentro de la otra:
<b>Esto sólo está en negrita <i>y esto en negrita e itálica</i></b>
Esto nos daría:
HackxCrack
Esto sólo está en negrita y esto en negrita e itálica
<Blockquote> (Citar Bloque)

Este elemento lo utilizamos para indicar que un párrafo está parafraseado. Es
decir, que estamos citando las palabras de un autor. Por ejemplo:
11
<html>
<head>
<title>Ejemplo de Blockquote</title>
</head>
<body>
<h2>Mis palabras favoritas de Santiago: <blockquote></h2>
<blockquote> “Porque toda especie de bestias salvajes así como de aves y de
cosas que se arrastran y de criaturas marinas ha de ser domada y ha sido domada
por el género humano. Pero la lengua, nadie de la humanidad puede domarla.
Cosa ingobernable y perjudicial, está llena de veneno”. </blockquote>
</body>
</html>
El resultado sería:
Como vez el navegador inserto sangrado en el texto; es lo que la mayoría

hace.
<blockquote> Cita de un
autor<blockquote>
Recapitulando ;) <strong>Énfasis más fuerte</strong>
<small>Texto pequeño</small>
<i>Texto en itálica</i>
<b>Texto en negritas</b>
12
Atributos
En HTML un atributo es la información extra que podemos añadirle a un
elemento. Podríamos decir que un atributo es lo mismo que un parámetro.
Ahora bien no todos los elementos aceptan atributos pero la mayoría sí lo hace.
Ejemplo:
<html>
<head>
<title>Anarquía</title>
</head>
<body>
<h2>Este es un texto centrado</h2>
<p align="center"> La anarquía es una
forma de pensar, consiste en el
caos,...hacer lo que cada uno quiera sin
importar las consecuencias; sin gobierno,
sin estado, sin autoridad. La mayoría de los
hackers adoran la anarquía. </p>
</body>
</html>
El navegador nos enseñaría lo siguiente:
Este es un texto centrado

La anarquía es una forma de pensar, consiste en el
caos,...hacer lo que cada uno quiera sin importar las
consecuencias; sin gobierno, sin estado, sin autoridad. La
mayoría de los hackers adoran la anarquía.
13
Como leímos y comprendimos muy bien el artículo pasado lo único que no vamos a
entender es lo que subraye con rojo :)
Sabemos que el elemento p sirve para escribir párrafos pero esta vez le agregamos
información extra, es decir, le incluimos un atributo.
Los atributos siempre se colocan dentro de la etiqueta de inicio. En nuestro

ejemplo el atributo sería aling (alinear).
Los cuales llevan justamente después el signo igual y el valor que tienen pero
encerrado entre comillas. Si miras el código anterior te darás cuenta de que aling
es igual a "center" (centrar).
Con esto le dijimos al navegador que el texto que escribimos en el párrafo lo

queríamos centrado.
Mucho cuidado con las comillas que escribas; no es lo mismo poner “center” que
poner "center".
Además el atributo aling tiene otros dos valores más: right (derecha) y left
(izquierda)
Aquí te dejo el código fuente y la vista que nos daría el Internet Explorer.
Apunte: El atributo center también es un elemento al igual que right y left y se

pueden usar como tal.
<html>
<head>
<title>Warez</title>
</head>
<body>
<h2>Este es un texto alineado a la derecha</h2>
<p align="right"> El warez es simplemente el trafico y/o contrabando de
programas protegidos por copyright © que en teoría se deben comprar para su
uso. En una palabra el warez es Piratería. En la mayoría de los casos, los
programas traficados están crackeados para eliminar las claves o seriales de
acceso que “los protegen”. </p>
</body>
</html>
14
Este es un texto alineado a la derecha
El warez es simplemente el trafico y/o contrabando de
programas protegidos por copyright © que en teoría se deben
comprar para su uso. En una palabra el warez es Piratería. En
la mayoría de los casos, los programas traficados están
crackeados para eliminar las claves o seriales de acceso que
“los protegen”.
Como ejercicio te propongo que hagas un texto alineado a la izquierda ;)
Color, Tamaño y Tipo de Letra

Esto lo lograremos a partir de la etiqueta <font> y su cierre correspondiente.
Dentro de esta etiqueta vamos a especificar los atributos que deseemos definir.
Atributo Face
Este nos ayuda a definir el tipo de letra (fuente). Por defecto los navegadores
utilizan la fuente Times New Roman y pudiera ser que no cuenten con el tipo de
letra que a nosotros nos guste, por eso dentro del atributo face es bueno que
escribamos más de una fuente separadas por comas.
z<html>
<head>
<title>Cambiando la letra</title>
</head>
<body>
<font face="Algerian, Comic Sans MS, Arial"> Este texto ya no está en Times
New Roman</font>
</body>
</html>
Lo más probable es que veamos:
15
Este texto ya no está en Times New Roman
Atributo Size (tamaño)

Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo. Para el
primer caso existen 7 niveles de tamaño distintos. Si escribimos size="1" será la
letra más pequeña y si ponemos size="7" será la más grande.
Ahora que si escribimos un párrafo con tamaño 4 y queremos que el siguiente sea
más grande, podemos aplicar el valor relativo, quizá escribir size="+2" de esta
manera la letra será 2 veces más grande que la anterior, o sea, tamaño 6
también podemos hacerla más pequeña poniendo por ejemplo size="-3"
Apunte: En html no es necesario poner comillas a los valores de atributos que sean
números, pero es una buena costumbre hacerlo :)
Atributo color
Es posible definir de una manera bastante fácil algunos de los colores más usados
con solo escribir su nombre en inglés. La manera más complicada es poniendo su
valor en Hexadecimal. Existen más de 1.000 códigos hexadecimales y no es fácil
calcular qué código hexadecimal corresponde a un color específico. En fin, aquí te
dejo ambas opciones:
Para ambos casos es la misma sintaxis a seguir.
Ejemplo:
<html>
<head>
<title>Cambiando el color</title>
</head>
<body>
<font color="Fuchsia"> Ya aprendí a cambiar el color
de la letra. Soy tan feliz :)</font>
<br />
<font color="6600FF"> Ya aprendí a cambiar el color
de la letra. Soy tan feliz :)</font>
</body>
</html>
16
Tabla de colores en Hexadecimal
FFFFFF FFCCFF FF99FF FF66FF FF33FF FF00FF
FFFFCC FFCCCC FF99CC FF66CC FF33CC FF00CC
FFFF99 FFCC99 FF9999 FF6699 FF3399 FF0099
CCFFFF CCCCFF CC99FF CC66FF CC33FF CC00FF
CCFFCC CCCCCC CC99CC CC66CC CC33CC CC00CC
CCFF99 CCCC99 CC9999 CC6699 CC3399 CC0099
99FFFF 99CCFF 9999FF 9966FF 9933FF 9900FF
99FFCC 99CCCC 9999CC 9966CC 9933CC 9900CC
99FF99 99CC99 999999 996699 993399 990099
99FF66 99CC66 999966 996666 993366 990066
99FF33 99CC33 999933 996633 993333 990033
99FF00 99CC00 999900 996600 993300 990000
66FF99 66CC99 669999 666699 663399 660099
66FF66 66CC66 669966 666666 663366 660066
66FF33 66CC33 669933 666633 663333 660033
66FF00 66CC00 669900 666600 663300 660000
33FF99 33CC99 339999 336699 333399 330099
33FF66 33CC66 339966 336666 333366 330066
33FF33 33CC33 339933 336633 333333 330033
33FF00 33CC00 339900 336600 333300 330000
17
00FF99 00CC99 009999 006699 003399 000099
00ff66 00cc66 009966 006666 003366 000066
00FF33 00CC33 009933 006633 003333 000033
00FF00 00CC00 009900 006600 003300 000000
Listas
Estos tres elementos se usan para crear listas: li, ul, y ol
-li significa List Item (o sea, elemento de lista)
-ul significa Unordered List (es decir, lista no ordenada) Sirve para insertar
viñetas a cada elemento.
-ol significa Ordered List (es decir, lista ordenada) y numera cada elemento de
nuestra lista
<html>
<head>
</head>
<body>
<ul>
<li>Aquí pongo lo que quiera que vaya en la
lista</li>
<li>Es decir, pongo un elemento de lista</li>
</ul>
</body>
</html>
Así interpretaría nuestro código el Internet Explorer:
18
HackxCrack
 Aquí pongo lo que quiera que vaya en la lista
 Es decir, pongo un elemento de lista
Veamos un ejemplo con Ordered list
<html>
<head>
</head>
<body>
<ol>
lista</li>
<li>Es decir pongo un elemento de lista</li>
</ol>
</body>
</html>
Pon especial atención en esto: Siempre que quieras escribir una lista el
contenido tiene que estar entre las etiquetas <li> y </li> Las otras dos solo nos
ayudan para darle formato a nuestra lista. Es decir, ul agrega viñetas y ol hace
una numeración.
Con lo anterior obtendríamos:
19
HackxCrack
1. Aquí pongo lo que quiera que vaya en la lista
2. Es decir pongo un elemento de lista
Atributos para <ul>

Podemos definir el tipo de viñeta que deseemos usando el atributo type
(tipo) con sus valores:
o Circle (Inserta círculos)

 Disc (Inserta discos)
 Square (Inserta cuadrados)
Si colocamos el atributo type dentro de la etiqueta <ul> el cambio le ocurrirá

a todos los elementos de la lista pero si lo introducimos en el elemento li solo
modificara a uno.
Atributos para <ol>

También es posible cambiar el estilo de las listas ordenadas (Ordered list)
usando el mismo elemento type pero esta vez con los valores:
1. (Ordena por números)

a. (Ordena por letras del alfabeto minúsculas)
A. (Ordena por letras del alfabeto mayúsculas)
i. (Ordena por números romanos en minúscula)
I. (Ordena por números romanos en mayúscula)
Además pudiera darse el caso que deseemos comenzar nuestra enumeración
por un número o letra que no tiene que ser el primero de todos.
Para arreglar esta situación, podemos utilizar un segundo atributo, start
(Iniciar), que tendrá como valor un número. Este número, que por defecto es
1, corresponde al valor en que empezamos nuestra lista.
Para el caso de las letras o los números romanos, el navegador se encarga de
hacer la traducción de número a letra :)
20
Aquí tienes el código fuente:
<html>
<head>
</head>
<body>
<h1> Masters Hacker</h1>
<ol type="A" start="5">
lista</li>
<li>Es decir pongo un elemento de lista</li>
</ol>
</body>
</html>
Mostrará una lista ordenada por letras pero empezando desde la E.
Masters Hacker
E. Aquí pongo lo que quiera que vaya en la lista
F. Es decir pongo un elemento de lista
Por lo pronto basta de listas aunque aún faltan las listas de definición
(definition list) si te interesa puedes buscarlo en otro lado :)
Enlaces en HTML
HTML se convirtió en todo un éxito debido a que permite crear enlaces. De
poco serviría tener una página si la gente no pudiera saltarse a otras. Un
sencillo elemento con un atributo y podrás enlazar con cualquier cosa y con
todo.
21
Para lograrlo usaremos la etiqueta <a> y </a>. Este elemento es la
abreviatura de “anchor” (ancla) y lo acompañaremos del atributo href
(Hypertext Reference) que especifica hacia donde va dirigido el enlace.
<html> Recuerda que los atributos se

<head> escriben dentro de la etiqueta
<title>Mi primera web</title> de inicio, en este caso dentro de
</head> <a> después se escribe un signo
<body> igual seguido del valor del
atributo pero encerado entre
<h1> Enlaces</h1>
comillas. Como son enlaces el
<a href="http://www.html.net">Desde aquí
enlazamos con HTML.net</a> valor debe ser, por ejemplo, una
URL (Uniform Resource Locator),
<br />
Ten en cuenta que siempre debe
<a href="http://www.DesarrolloWeb.com">
incluirse el "http://" en las URLs
Desde aquí enlazamos con DesarrolloWeb.com
</a> No es más que el protocolo por
el cual deseamos acceder. No es
</body>
el momento de tocar el tema.
</html>
Enlaces
Desde aquí enlazamos con HTML.net
Desde aquí enlazamos con DesarrolloWeb.com
Enlaces entre mis propias páginas (Enlaces Locales)
Por ejemplo, si has creado dos páginas (llamémoslas web1.htm y web2.htm)

y las has guardado en la misma carpeta, puedes enlazar una página con la
otra con sólo escribir el nombre del fichero en el enlace. Es decir agregando
la etiqueta:
<a href="web2.htm">Haz clic para ir a la página 2</a>
22
Si la página 2 estuviera en una subcarpeta (llamada "Mi otra carpeta"), el
enlace tendría el siguiente aspecto:
<a href="Mi otra carpeta/pagina2.htm">Haz clic para ir a la página 2</a>
En sentido inverso, enlazar desde la página 2 (en la subcarpeta) a la página 1

se haría usando el siguiente código:
<a href="../pagina1.htm">Enlace a la pagina1</a>
Los dos puntos con la barra, "../", hacen referencia a una carpeta que se
encuentra un nivel por encima de donde se encuentra el fichero. Siguiendo
este mismo sistema, se puede señalar a dos o más carpetas en niveles
superiores escribiendo "../../". De cualquier modo, si así lo prefieres puedes
escribir toda la URL del documento.
Colores Predeterminados
text: Este atributo sirve para asignar el color del texto a toda la página. Por
defecto es el negro.
link: El color de los enlaces que no han sido visitados. (Por defecto es Azul
clarito)
vlink: Es el color que tendrán los enlaces que ya hemos visitado. La "v" viene
justamente de la palabra visitado. Por defecto su color es morado.
alink: Es el color de los enlaces activos. Un enlace está activo en el preciso

instante en que se pulsa y como el navegador abandona la página
rápidamente no podemos ver el enlace activo más que por unos instantes.
Los enlaces suelen aparecer subrayados y con un color más vivo que el texto
para que los usuarios puedan identificarlos fácilmente. Además si deslizamos
el ratón sobre ellos el puntero cambia de una flechita a una manita con un
dedo señalando :). De paso les recuerdo que estos 4 atributos van en la
etiqueta <body>.
Atributos para páginas

Estos atributos se incluyen en la etiqueta <body> y, afectarán a toda la
página.
23
bgcolor: Especificamos un color plano de fondo, es decir el mismo para toda
la superficie del navegador.
background: Sirve para colocar una imagen como fondo de tipo mosaico, es
decir, se repite muchas veces hasta ocupar todo el espacio de la página.
Vamos a colocar esta imagen como fondo de la página:

La imagen se llama abstract.png
En un momento veremos las diferencias
entre los distintos formatos para imágenes :)
Supondremos que la imagen se encuentra en el mismo directorio que la

página. En este caso se colocaría la siguiente etiqueta:
<body background="abstract.png">
Hay tres clases diferentes de tipos de ficheros de imagen que puedes insertar
en tus páginas:
 GIF (Graphics Interchange Format)
 JPG o JPEG (Joint Photographic Experts Group)
 PNG (Portable Network Graphics)
Normalmente, las imágenes GIF son mejores para gráficos y dibujos,

mientras que las imágenes JPEG son mejores para fotografías. Las imágenes
GIF sólo constan de 256 colores, mientras que las imágenes JPEG constan de
millones de colores, pero el formato GIF es mejor a la hora de comprimir
imágenes sencillas, ya que el formato JPEG está optimizado para imágenes
más complejas. Cuanto mejor sea la compresión, y más pequeño el tamaño
de la imagen, más rápido se cargará la página.
Tradicionalmente, los formatos GIF y JPEG han sido los dos tipos de imagen
dominantes, pero últimamente el formato PNG ha ganado cada vez más
popularidad. El formato PNG contiene, en muchos aspectos, lo mejor de
ambos formatos: millones de colores y una compresión efectiva.
Sugerencias…
24
A la mayoría de los navegadores les da igual si escribes en mayúscula, minúscula
o una mezcla de las dos. <HTML>, <html> o <HTml> normalmente tendrán el
mismo resultado. Sin embargo, el modo correcto es escribir las etiquetas en
minúscula. Y si no te has dado cuenta no es necesario escribir la etiqueta <p>
para poder escribir un párrafo, pero nosotros haremos las cosas como se beben
hacer :)
Además, es bueno y recomendable que escribas el código fuente de una forma

nítida, con saltos de línea y sangrados, pues así es más fácil entenderlo. Aunque
por ahorrar espacio yo no lo hice ;)
Y si crees que el título que va entre las etiquetas <title> y </title> no es

importante, te equivocas porque los motores de búsqueda (por ejemplo,
Google) lo utilizan para indexar tu sitio y además porque aparece reflejado en
los resultados de la búsqueda.
¿Y por qué puedo usar la extensión htm y html? Porque en el principio de los
tiempos las extensiones solo podían tener solo hasta 3 caracteres pero después
los límites impuestos por el S.O. DOS desaparecieron por eso es válido usar
cualquiera de las 2 extensiones.
Recuerda: el único modo de aprender HTML es utilizando el método de prueba

y error. Pero no te preocupes, es imposible que destroces tu ordenador o
Internet. Así que sigue experimentando; es el mejor modo de adquirir
experiencia y de pasada no estaría mal que aprendieras algo de inglés ;)
Si quieres saber como se programa una web al 100% toma tu navegador y

metete a la que sea tu favorita luego en alguna parte despejada da clic derecho
y selecciona “Guardar como” verás que abajo en “Tipo” dirá “Página web
completa”, ve al directorio donde la guardaste y lo más probable es que tengas
un fichero html y una carpeta con el mismo nombre que lleva adentro el
contenido que mostrará el fichero que no te de miedo y curiosea todo :D
Una última cosa es que es un pecado aprender html sin aprender CSS los dos
van de la mano.
25

Curso HTML by - WD PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso HTML by - WD PDF

Cargado por

Copyright:

Formatos disponibles

HTML

(HiperTex Mark-up Language)

¿Entonces que necesitamos?

¿Es necesario estar conectado a Internet?

¿Para que me sirve HTML?

Muy bien, después de esta pequeña introducción podemos empezar sin

Ahora escribe esto:

Como acabamos de comentar <html> es una etiqueta de inicio y tiene que

Lo siguiente que vemos es la etiqueta <head> que significa cabecera y lo que

Nuestro código se vería así en el navegador:

En su interior introduciremos todos aquellos elementos de los que queremos

Cuando lo pasemos al navegador se miraría así:

Soy el encabezado más

Me estoy comenzando a preocupar

No pienses que cuando escribas la etiqueta <h1> el texto va a ser tamaño 24 y

¿Qué tú no eres el Luciérnago :|?

-No, yo soy el Sidronio

Ve a donde lo guardaste y debe estar un archivo como este:

Pues ábrelo y disfruta tu web sin estar conectado ;)

Esto se vería así en el Internet Explorer:

Aquí tienes una vista previa:

¡He dicho pronto! Tengan cuidado porque ya amenacé :)

¡He dicho pronto! Tengan cuidado porque ya amenacé :)

Observación: La etiqueta <p> también puede hacer el trabajo de la etiqueta

En el navegador miraríamos esto:

¡He dicho pronto!

Esto body es un elemento.

Esto <body> y esto </body> son etiquetas.

Esto <body> es una etiqueta de inicio.

Esto </body> es una etiqueta de cierre.

<p>Se usa para escribir <h1>Encabezado de nivel 1</h1>

Aquí abajo tienes el código fuente:

¿Y Puedo usar varios elementos a la misma vez?

Si quieres que el texto aparezca enfatizado y más pequeño, se debe hacer de la

<em><small>Texto enfatizado más pequeño</small></em>

En el primer ejemplo, cerramos en último lugar el elemento que abrimos

Si te parece muy confuso, también se vale que lo escribas así:

<b>Esto sólo está en negrita <i>y esto en negrita e itálica</i></b>

Esto nos daría:

<Blockquote> (Citar Bloque)

Como vez el navegador inserto sangrado en el texto; es lo que la mayoría

El navegador nos enseñaría lo siguiente:

Este es un texto centrado

Los atributos siempre se colocan dentro de la etiqueta de inicio. En nuestro

Con esto le dijimos al navegador que el texto que escribimos en el párrafo lo

Apunte: El atributo center también es un elemento al igual que right y left y se

Como ejercicio te propongo que hagas un texto alineado a la izquierda ;)

Color, Tamaño y Tipo de Letra

Lo más probable es que veamos:

Atributo Size (tamaño)

-li significa List Item (o sea, elemento de lista)

Así interpretaría nuestro código el Internet Explorer:

Veamos un ejemplo con Ordered list

Con lo anterior obtendríamos:

Atributos para <ul>

o Circle (Inserta círculos)

Si colocamos el atributo type dentro de la etiqueta <ul> el cambio le ocurrirá

Atributos para <ol>

1. (Ordena por números)

Mostrará una lista ordenada por letras pero empezando desde la E.

<html> Recuerda que los atributos se

Enlaces entre mis propias páginas (Enlaces Locales)

Por ejemplo, si has creado dos páginas (llamémoslas web1.htm y web2.htm)