Download - Escuela Abierta - Taller de Html

HTML Lucas Portugal Esteban Iñiguez

Escuela Abierta - Taller de HTML

Página - 2 -

TALLER DE HTML BÁSICO

Para comenzar a trabajar con HTML es necesario contar con la interfaz GNOME instalada en nuestra XO.

GNOME es una interfaz gráfica similar a la de una computadora de escritorio, como podemos ver en la

siguiente imagen:

Una vez que nos encontremos en GNOME será necesario acceder al programa Gedit, que será el

programa que utilizaremos para la creación de nuestra página web en HTML.

Para acceder a Gedit debemos dirigirnos a la barra superior y buscar en el menú: Aplicaciones →

Accesorios → Editor de Textos como se muestra en la siguiente imagen:


Página - 3 -

Al seleccionar Editor de textos se abrirá el programa Gedit, que puede verse a continuación:

Una vez abierto el programa podemos comenzar a escribir nuestro código HTML y diseñar nuestra

primera página web.

Después crearemos una carpeta en el escritorio donde pondremos nuestras imágenes, las que quieras y

la que vas a usar, y también en donde guardaremos nuestra página web con el nombre de index.html

ESTRUCTURA BASICA DE HTML

HTML es un lenguaje que se compone de etiquetas. Estas etiquetas se escriben entre los signos < y >,

por ejemplo: <body>.

Para cerrar una etiqueta se escribe la etiqueta encerrada entre dichos signos, agregando una barra “/” al

comienzo del nombre de la etiqueta. Por ejemplo para cerrar la etiqueta <body> se escribe </body>

La estructura básica para comenzar a crear una página web es siempre la misma:


Página - 4 -

Esto se escribe en el editor de textos de la siguiente manera (siempre hay que respetando el orden que

se muestra):

<HTML>

<HEAD>

<TITLE> “Entre estas etiquetas se escribe el título de la página” </TITLE>

</HEAD>

<BODY>

“Entre estas etiquetas se incluye en contenido de la página, como por ejemplo color de fondo, color de

letras, imágenes, sonidos, textos, etc.”

</BODY>

</HTML>

Lo primero que debemos hacer es crear una carpeta en dónde iremos guardando nuestra página web,

las imágenes, sonidos, videos o cualquier recurso que deseemos agregar a la página.

Para ello debemos hacer click con el botón derecho del mouse en cualquier lugar libre del escritorio de

GNOME y luego seleccionar la opción Crear una carpeta, tal como se muestra a continuación:

Una vez creada la carpeta debemos escribir el nombre que queramos darle, se recomienda escribir el

nombre y apellido del alumno que esté haciendo la página, y sin dejar espacio entre ellos y todo con

letras minúsculas. Por ejempo el alumno Juan Perez le pondrá de nombre a su carpeta juanperez:


Página - 5 -

Una vez creada nuestra carpeta podremos volver al editor de textos Gedit. Comenzaremos por escribir

un código muy simple:

<html>

<head> </head>

<body>

Bienvenidos al taller de HTML

</body>

</html>

Debe quedar como en esta imagen:

Luego de esto debemos guardar el documento para ello debemos hacer click en el botón que dice

“Guardar” ubicado en la parte superior del programa.


Página - 6 -

Aparecerá una ventana que nos pedirá que ingresemos el nombre, el nombre que ingresaremos será

index, es importante saber que luego del nombre debe ir seguido por un punto (.) y luego por html.

Entonces en el cuadro de nombre debemos ingresar: index.html.

Luego debemos elegir el lugar dónde guardar esa página. Lo haremos en la carpeta personal que

creamos con nuestro nombre y apellido. Para ello hay que seleccionar la opción Buscar otras carpetas

que se encuentra marcada en la imagen:

Al presionar en esa opción la se despliega la ventana de Guardar y buscaremos el lugar dónde creamos

nuestra carpeta, esto es en: Escritorio, luego seleccionamos la carpeta con nuestro nombre y apretamos

en el botón Guardar.

Todo esto se encuentra en la secuencia de la siguiente imagen:

Una vez guardado minimizaremos el editor de textos Gedit y buscaremos en el escritorio y entraremos

en la carpeta con nuestro nombre y veremos lo que apareció:


Página - 7 -

Si, apareció un archivo llamado index.html. Este archivo es la página web en html que creamos en Gedit,

si hacemos doble click en index.html se abrirá el navegador Firefox y mostrará nuestra página:

Vemos que es una página muy básica ya que lo único que escribimos en el código html es “Bienvenidos

al taller de HTML”.

La parte marcada por el rectángulo rojo es el título de la página web.


Página - 8 -

Veamos ahora que sucede si agregamos algunas cositas más a nuestro código HTML.

Lo siguiente será ponerle un título a la página, cambiar el color de fondo de la página y el color de las

letras.

Para ello en el código que tenemos escrito en el editor de textos Gedit agregaremos la etiqueta <title>

(siempre dentro de las etiquetas HEAD) y los atributos bgcolor y text (que corresponden a la etiqueta

body).

<html>

<head> <title>Taller de HTML</title></head>

<body bgcolor=”green” text=”white”>

Bienvenidos al taller de HTML

</body>

</html>

Como verá hay que agregar lo que está en rojo al código que ya tenemos escrito.


Página - 9 -

Cuando hayamos hecho estas modificaciones volveremos a apretar en el botón Guardar, ya no será

necesario elegir un nombre ni la ubicación del archivo.

Al volver a ejecutar nuestro archivo index.html desde la carpeta que creamos en el escritorio veremos

como el navegador muestra los cambios que se agregaron al código HTML:

Se puede observar que el rectángulo rojo nos indica que ahora el título cambió y es el mismo que

escribimos entre las etiquetas <title> del documento HTML.

Por otra parte las modificaciones en el <body> influyeron en el color de la letra y en en color de fondo

de la página. Lo que sucedió es que se agregaron algunos atributos al body y se les cambió sus valores

Algunos atributos útiles de la etiqueta <body>:

• Bgcolor define el color de fondo de la página.

• Text define el color del texto de la página.

• Link define el color de los vínculos en la página.

• Background define el archivo gráfico que será desplegado como fondo.


Página - 10 -

Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.

Por ejemplo: <body bgcolor=”blue” text=”white”> Esto indica que la pagina tendrá un color de fondo

azul (blue) y un color de letras blanco (White).

Los colores en HTML se los indica en idioma inglés, en la siguiente tabla pueden ver cada color con su

respectivo nombre en inglés:

IMÁGENES Y TITULARES

Lo primero que tenemos que hacer es tener una o varias imágenes en la carpeta que creamos

anteriormente, la que tiene nuestro nombre y está en el Escritorio.

Con la etiqueta <img src= “bebe.jpg”> introduciremos nuestras imágenes y reemplazaremos el

nombre de bebe.jpg por el nombre de la imagen que deseemos insertar.

Podemos cambiar el tamaño de un título con una simple etiqueta <h1> </h1> siendo este el tamaño

mayor de los títulos y <h6> el menor.

Las etiquetas <br> se utilizan para pasar al siguiente renglón. No tienen etiqueta de cierre.


Página - 11 -

Veamos el resultado de aplicar las etiquetas mencionadas:

ENLACES (LINKS)

El link crea una conexión con otro documento web por medio de la dirección URL.

Primero presionamos las teclas ctrl + s y guardamos nuestra página

Para mostrar cómo se hace la creación de link te proponemos que creemos otra página para eso vamos

a ir a Archivo -> Guardar Como -> y Aquí cambiamos el Nombre de nuestra página de index.html -> a ->

pagina1.html.


Página - 12 -

Cerramos la aplicación, vamos a nuestra carpeta y abrimos index.html y agregamos la etiqueta de link

que es:

<a title="al pasar el puntero de mouse muestra una descripción "

href="direccionWEBodemicarpeta/pagina1.html">NOMBRE DEL LINK LO QUE SE VA VER EN LA PÁGINA

</a>

VIDEOS

Podemos agregar en nuestra página videos alojados en una página web, como por ejemplo youtube.

Para esto primero debemos acceder al sitio en cuestión (http://www.youtube.com) y buscar el video

que nos interese agregar a nuestra página.

http://www.youtube.com/


Página - 13 -

Lo primero que debemos hacer es presionar el botón “Compartir” que se encuentra debajo de la

pantalla de reproducción del video.

Luego nos aparece por debajo lo siguiente:

Ahora debemos presionar el botón “Insertar” y finalmente nos aparece:


Página - 14 -

Apareció un cuadro en dónde se encuentra la etiqueta necesaria para insertar el video en nuestra

página. Solo debemos copiar todo el texto y luego pegarlo en el editor de textos donde estemos

escribiendo el código html para nuestra página:

<html>

<head>

<title>Taller de HTML</title>

</head>

<body>

<h1> Mi video </h1>

<iframe width="420" height="315" src="http://www.youtube.com/embed/UqAsEacgUxQ"

frameborder="0" allowfullscreen></iframe>

</body>

</html>

Todo esto debería hacer que nuestra página se muestre de la siguiente manera:


Página - 15 -

Seguir editando mi página

En el caso de que cerremos el archivo index.html que tenemos en el editor te textos, y luego nos

interese seguir modificando nuestra página, lo que debemos hacer es dirigirnos a la carpeta creada en el

escritorio con nuestro nombre, hacer click con el botón derecho del mouse sobre el archivo

“index.html” y seleccionar la opción “Abrir con Editor te textos”.

Recuerden que si intentamos abrirla normalmente con doble click o con Enter se ejecutará la página en

el navegador web “Mozilla Firefox”

Download - Escuela Abierta - Taller de Html

Top Related