Curso HTML by White Darkness

1

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.

2

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:

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

<html>

<head>

<title>Mi primera web</title>

</head>

</html>

3

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:

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

Barra de Títulos

4

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

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.

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

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

5

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.

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

<html>

<head>


</head>

<body>

<h1>HackxCrack</h1>

<em> Este texto tiene énfasis</em>

</body>

</html>

6

Sencillo, ¿verdad?

Otra etiqueta básica es <p> (paragraph) que sirve para escribir un párrafo.

Aquí tienes una vista previa:

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

HackxCrack

Este texto tiene énfasis

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é :)

7

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.

En esta imagen puedes observar la línea gris que dibuja la etiqueta <hr />

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.

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

HackxCrack




8

En el navegador miraríamos esto:

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.

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

HackxCrack




9

En la sección del cuerpo (body) se escribe el contenido de la página. Ya conoces algunos de los elementos más importantes:

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:

<h1>Encabezado de nivel 1</h1>




<br />Crea un salto de línea forzado

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

<p>Se usa para escribir párrafos</p>

<em>Muestra el texto enfatizado</em>

<hr />Dibuja una línea horizontal

10

Y se visualizaría así en el Navegador:

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:

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

y NO de la siguiente manera:

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

HackxCrack

Este texto tiene énfasis acentuado

Este texto debería verse más pequeño

HackxCrack

Este texto esta subrayado

11

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

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:

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

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

<em>

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

</em>

HackxCrack

Esto sólo está en negrita y esto en negrita e itálica

12

El resultado sería:

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

Recapitulando ;)

<blockquote> Cita de un

autor<blockquote>

<strong>Énfasis más fuerte</strong>

<small>Texto pequeño</small>

<i>Texto en itálica</i>

<b>Texto en negritas</b>

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

13

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:

El navegador nos enseñaría lo siguiente:

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

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.

14

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>

15

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.

Lo más probable es que veamos:

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

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>

16

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:

Este texto ya no está en Times New Roman

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>

17

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

18



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

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

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

19

Veamos un ejemplo con Ordered list

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:

HackxCrack

Aquí pongo lo que quiera que vaya en la lista

Es decir, pongo un elemento de lista

<html>

<head>


</head>

<body>


<ol>

<li>Aquí pongo lo que quiera que vaya en la lista</li>

<li>Es decir pongo un elemento de lista</li>

</ol>

</body>

</html>

20

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

HackxCrack

1. Aquí pongo lo que quiera que vaya en la lista

2. Es decir pongo un elemento de lista

21

Aquí tienes el código fuente:

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

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.

<html>

<head>


</head>

<body>

<h1> Masters Hacker</h1>

<ol type="A" start="5">

<li>Aquí pongo lo que quiera que vaya en la lista</li>

<li>Es decir pongo un elemento de lista</li>

</ol>

</body>

</html>

Masters Hacker

E. Aquí pongo lo que quiera que vaya en la lista

F. Es decir pongo un elemento de lista

22

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.

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>

<html>

<head>


</head>

<body>

<h1> Enlaces</h1>

<a href="http://www.html.net">Desde aquí enlazamos con HTML.net</a>

<br />

<a href="http://www.DesarrolloWeb.com"> Desde aquí enlazamos con DesarrolloWeb.com </a>

</body>

</html>

Recuerda que los atributos se

escriben dentro de la etiqueta

de inicio, en este caso dentro de

<a> después se escribe un signo

igual seguido del valor del

atributo pero encerado entre

comillas. Como son enlaces el

valor debe ser, por ejemplo, una

URL (Uniform Resource Locator),

Ten en cuenta que siempre debe

incluirse el "http://" en las URLs

No es más que el protocolo por

el cual deseamos acceder. No es

el momento de tocar el tema.

Enlaces

Desde aquí enlazamos con HTML.net

Desde aquí enlazamos con DesarrolloWeb.com

http://www.html.net/

http://www.desarrolloweb.com/

23

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.

http://www.html.net/

http://www.desarrolloweb.com/

24

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:

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…

La imagen se llama abstract.png

En un momento veremos las diferencias

entre los distintos formatos para imágenes :)

25

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.

Curso HTML by White Darkness

Documents

Transcript of Curso HTML by White Darkness