Curso html

HTML
Lucas Portugal
Esteban Iñiguez

Escuela Abierta - Taller de HTML

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


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


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


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


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


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


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


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


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


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


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.

Página - 12 -


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


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


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”

Página - 15 -

Curso html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (8)

Similar a Curso html

Similar a Curso html (20)

Curso html