html javascript 1
TRANSCRIPT
DATA SYSTEMS COMPUTADORASMÓDULO: HTML y JavascriptInstructor: Br. Henry Renderos
Con HTML usted puede crear sus propios sitios web. HTML significa “Hyper Text Markup Language” (Lenguaje de Marcado de Hipertexto) el cuál es interpretado por los Navegadores web como Mozilla Firefox, Google Chrome, Opera, Internet Explorer, entre otros. Cuando usted navega por internet verá este tipo de lenguaje de manera gráfica.
Ejercicio 1: Visite algunas páginas y vea el código HTML de los sitios
realizando los siguientes pasos:• De click derecho sobre algún área con texto.• Seleccione la opción “Ver código fuente” (View page source)
En una nueva ventana se abrirá el código fuente HTML de la página que usted está visitando, si hace este mismo ejercicio con otras páginas verá patrones similares y símbolos que se repiten en todo el texto como por ejemplo los símbolos de Mayor que y Menor que (< >).
Existen diferentes editores de código HTML entre los cuáles hay unos en que su licencia es de paga y por lo tanto en algunas ocasiones es poco atractivo obtenerlas, sin embargo estos editores de paga ahorran mucho tiempo en la escritura de código y en la creación de sitios web. Un ejemplo puede ser Adobe Dreamweaver. En esta ocasión para que usted comience a conocer y a escribir de forma correcta el código HTML usará un editor de texto plano llamado Bloc de Notas (Windows) o Gedit (Linux).
En esta ocasión comenzaremos a editar un archivo de HTML5.
Ejercicio 2: Abra el editor de texto Bloc de Notas (Inicio > Todos los
Programas > Accesorios > Bloc de Notas), o (Aplicaciones > Accesorios > Editor de textos gedit).
Escriba el siguiente código ignorando los números de línea.
Explicación: • La declaración DOCTYPE define el tipo de documento.• El texto entre <html> y </html> describe la página web.• El texto entre <body> y </body> es el contenido visible de la página.• El texto entre <h1> y </h1> despliega un encabezado.• El texto entre <p> y </p> despliega un párrafo.
La declaración <!DOCTYPE html> es un tipo de documento para HTML5.
Para finalizar el ejercicio haga lo siguiente:1. Vaya al menú Archivo > Guardar y luego en el cuadro de texto “Nombre” coloque “index.html” sin las comillas.
2. Guarde el archivo en el Escritorio.3. Vaya al Escritorio y busque el archivo que usted creó con el nombre “index.html” y ábralo dando doble click sobre él.4. Se abrirá un navegador web predeterminado mostrando lo que usted escribió. Esa es su primer página web.
Etiquetas HTML• Las etiquetas HTML son palabras clave (nombre de etiquetas) entre los símbolos de Mayor que y Menor que como <html>• Las etiquetas HTML usualmente vienen en pares como <b> y </b>• La primera etiqueta en el par es la etiqueta de inicio, y la segunda es la etiqueta de fin.• La etiqueta del final es escrita como la etiqueta inicial, con una pleca antes del nombre de la etiqueta.• Etiquetas de inicio y de final son llamadas Etiquetas de apertura y etiquetas de cierre.
<etiqueta>Contenido</etiqueta> Estructura de un documento HTML
<html><body>
<h1>Este es un encabezado</h1>
<p>Este es un parrafo</p>
<h2>Este es un encabezado mas pequenio</h2>
</body></html>
Hipervínculos (Links)Los hipervínculos son un tipo de texto especial que nos llevan a otros sitios dentro o fuera de nuestra página. Los hipervínculos se definen con la etiqueta <a></a> y esta lleva ATRIBUTOS que hacen referencia al lugar al que queremos ir, a continuación veremos algunos ejemplos.
Ejemplos:
Elabore este ejemplo con los pasos del ejercicio 2 y vea qué es lo que ocurre en su navegador.Nota: observe que la dirección es especificada en el atributo href.
Ejercicio 3: Elabore una página web con hipervínculos que se dirijan a
Google, Facebook y Twitter.
ImágenesLas imágenes en HTML son proveídas por la etiqueta <img>, esta es una etiqueta que no lleva etiqueta de cierre.Las imágenes pueden estar en internet o en su equipo local.Si las imágenes están en internet, en el ATRIBUTO src deberá ir con el vínculo hacia la imagen, ejemplo <img src=”http://www.google.com/images/dato.jpeg”>.De lo contrario, si la imagen se encuentra en el equipo local, en el ATRIBUTO src debe especificarse la ubicación del archivo, por ejemplo supongamos que tenemos una carpeta llamada “Imagenes” y dentro de ella está una imagen llamada “flor.jpeg”, la etiqueta queda como sigue: <img src=”Imagenes/flor.jpeg”>
Ejercicio 4: A continuación se muestra un ejemplo de imágenes en
HTML.
Ejercicio 5: También puede combinarse la etiqueta <a> con la etiqueta
<img> para hacer que una imagen sea un vínculo, por ejemplo:
Ejercicio propuesto:Elabore una página web que sea su biografía, incluya encabezados, párrafos, hipervínculos e imágenes.
Referencias: http://www.w3schools.com/