Escuela Abierta - Taller de Html

¿Para qué estudiar HTML y formación Web?
1. Para saber cómo funciona la Web.
2. Para poder publicar páginas Web.
3. Para aprender sobre sus tecnologías
4. Para estar un paso por delante.
Internet es una interconexión de muchas redes, es el medio de comunicacón de mayor
crecimiento y el lenguaje HTML es usado para describir la estructura y el contenido en forma
de texto, así como insertar imágenes/objetos multimedia. De esta forma los navegadores
(Actividad Navegar XO - Firefox Mozilla - Google Chrome - etc.) pueden interpretar este código
y nosotros podremos ver perfectamente una página web.

www. -dominio-. (.edu - .com - .org - .net - . tur .etc ) .(.ar - .br - .cl -.etc )

¿Qué es HTML?

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje que
se utiliza para crear las páginas web. Este lenguaje indica a los navegadores cómo deben mostrar el
contenido de una página web.
Un navegador web o de Internet es un programa que permite visualizar la información que contiene una página
web. Los navegadores web más conocidos son: Google Chrome, Internet Explorer y Firefox.

¿Por qué necesitamos de los navegadores para visitar estos sitios?
Esto se debe a que el formato de los documentos en la web es bastante particular, para permitir el uso
de los enlaces o links que todos conocemos, entre otros elementos. Para lograr esto, las páginas se
codifican usando lenguajes especializados, que sólo los navegadores pueden leer, HTML es uno de esos
lenguajes.

¡MANOS A LA OBRA!

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:

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.

Despues crearemos un carpeta en el escritorio donde pondremos nuestras imagenes, las
que quieras y la que vas a usar , y tambien en donde guardaremos nuestra pagina 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:

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:

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.

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

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.

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.

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.

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:

Ahora introduciremos una imagen y cambiamos el tamaño de los título
Lo primero que tenemos que hacer es tener una o varias imagenes en la carpeta que creamos
anteriormente la que tiene nuestro nombre y esta en el Escritorio.
Con la etiqueta <img src= “bebe.jpg”> introduciremos nuestras imagenes y reemplazaremos el
nombre de bebe.jpg por el nuestro.
Con los titulos podemos cambiar su tamaño con una simple etiqueta <h1> </h1> siendo este el tamaño
mayor de los titilos.
los <br> son renglones vacios dejamos libres.

LINK:

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 pagina para eso vamos
a ir a Archivo -> Guardar Como -> y Aquí cambiamos el Nombre de nuestra página de index.html -> a ->
pagina1.html.

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="direccionWEBode/
micarpeta/pagina1.html">NOMBRE DEL LINK LO QUE SE VA VER EN LA PÁGINA </a>
también te pedimos que cambies los atributos como ser imagen, color de fondo, contenido etc.

Bueno ahora los invitamos a usar algunas etiquetas que no hayan usado

Insertar Musica y Video

link de musica que se abre en otra pestaña o ventana. solo .ogg
<a title="vamos a escuchar musica" href="mimusica.ogg" target="_blank">MI musica</
a>

Introducir Video solo .ogv

<embed src="mivideo.ogv" width="600" height="480" autostart="true"></embed>
</video>

Qué es FTP?
FTP. Es un protocolo de transferencia de archivos entre computadoras conectadas a una red,
donde un equipo llamado cliente se puede conectar a otro denominado servidor para descargar
archivos desde él o para subirlos.
La aplicación más común de servidor FTP es el hosting o almacenamiento web, que nos
habilita a subir los archivos de nuestro sitio para ser visualizados por los equipos conectados a
la red mediante un navegador.
El propio navegador puede funcionar como cliente FTP, pero si no tiene esta función,
necesitaremos un programa cliente para conectarse con el servidor FTP y transferir los
archivos.

para acceder a nuestro ftp

ftp://ftp.miprimerhtml.com.ar.concienciavirtual.com/micarpeta/index.html

usuario:
contraseña:

Escuela Abierta - Taller de Html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Destacado

Destacado (20)

Similar a Escuela Abierta - Taller de Html

Similar a Escuela Abierta - Taller de Html (20)

Más de Daniel Alberto Reynaldo

Más de Daniel Alberto Reynaldo (13)

Último

Último (20)

Escuela Abierta - Taller de Html