html tutorial
TRANSCRIPT
¿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ías4. 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: