taller de html
DESCRIPTION
Guía 1 Taller Lenguaje HTML Guia 2 Taller de HTML Etiquetas Tecnologia e Informatica Crear Fondos Paginas WebTRANSCRIPT
TALLER DE HTML
FERNANDA GALINDO LOPEZ
Estudiante
MYRIAM RAMOS
Docente Académico
COLEGIO NACIONALIZADO FEMENINO DE VILLAVICENCIO
DISEÑO E INTEGRACION DE MULTIMEDIA
10-2
2012
1. Cree una carpeta en el escritorio póngale como nombre mi primera pagina web
2. Siga los siguientes pasos:
De clic en el botón inicio De clic en todos los programas De clic en accesorios De clic en bloc de notas
3. Abierto el bloc de notas escriba lo siguiente tal y como aparece aquí:
<html><head><title> Mi primera página </title></head><body>Aquí van a colocar el texto del documento, o gráficos, enlaces, etc.</body></html>
4. Guarde el archivo con el nombre practica1 dentro de la carpeta anteriormente creada
5. Ahora vuelva a Guardar el archivo con el nombre index.html dentro de la carpeta anteriormente creada
6. Cierre el bloc de notas7. Vaya a la carpeta y observe que sucedió con el archivo guardado con
index.html y con practica1 abra comente con sus compañeras y la profesora que sucedió, que diferencia hay entre uno y otro.
8. Elimine el archivo Practica 19. De doble clic en index y observe los resultados10.Ahora vaya a su carpeta y de clic derecho en el archivo index y en el
menú contextual seleccione abrir con y buscan en el bloc de notas11.Haga los cambios necesarios para que el código quede de la siguiente
manera:
<html><head><title> Mi primera página </title></head><body><h1>Mucha importancia</h1><h2>Menos importancia</h2><h3>Mucha menos importancia</h3></body></html>
12.Guarde los cambios y vaya al navegador y actualízalo en su defecto oprima la tecla F5
13.Observe que sucede y comente con las compañeras y profesora14.Haga los cambios necesarios para que el código quede de la siguiente
manera:
<html><head><title color= “Yellow”> Mi primera página </title></head><body>
<font color= “blue” size= “4” face= “Comic Sans MS, Arial, MS Sans Serif”>Bienvenidos a mi primera página</font>
</body></html>
15.Guarde los cambios y vaya al navegador y actualízalo en su defecto oprima la tecla F5
16.Ahora cámbiele de colores a la letra y de tamaño y escriba un poema
Tareas:
Leer la teoría y contestar en una hoja y luego socializar:
a) Que es HTML?b) Cual es la estructura de una página web?c) Averigua para que se utilizan las etiquetas HTML, head, title, body, h1.
h2. h3 y Font, color, sized) Averiguar cual etiqueta se utiliza para escribir el texto en negrilla
Solución
a) HTML
HTML es el lenguaje con el que se escriben las páginas web, las cuales pueden ser vistas por el usuario mediante un tipo de aplicación llamada navegador.
Es usado por los navegadores para mostrar las páginas webs al usuario, siendo hoy en día la interface más extendida en la red.Este lenguaje nos permite unir textos, sonidos e imágenes y combinarlos a nuestro gusto. Se creó en un principio con objetivos divulgativos. Uno de los problemas que se presentan es la diversidad de navegadores presentes en el mercado que no son capaces de interpretar un mismo código de una manera unificada.
b) Estructura de una página web
1. <HTML>, Identificador del tipo de documentoTodas las páginas escritas usando lenguaje HTML deben tener la extensión .htm o .html
Al crear una página web, en el código debemos iniciar la página con la viñeta <html> y finalizarla escribiendo al final de todo el código la viñeta </html>. Entre estas dos etiquetas escribiremos el resto del código HTML de la página web, así:
2. <head>, Cabecera o Encabezado de la páginaEl encabezado de la página se utiliza para agrupar información (título).Está formado por las etiquetas <head> y </head>. La etiqueta<head> va justo debajo de la etiqueta <html>.Por ejemplo:
3. <title>, Título de la páginaEl título de la página es el texto que aparecerá en la barra de título, ubicada en la parte superior de la ventana del navegador. El texto deseado debe escribirse entre las etiquetas <title> y</title>Estas etiquetas deben estar dentro del encabezado, es decir, entre las etiquetas <head> y </head>.Ejemplo:
4. <body>, Cuerpo del documentoEl cuerpo del documento contiene la información del documento, todo lo que deseemos que se visualice, el texto de la página, las imágenes, texto, formularios, etc.Todos los elementos que formarán el cuerpo de la página deben encontrarse entre las etiquetas <body> y </body> y van justo después de el encabezado.
A través de la etiqueta <body> podemos establecer el color o la imagen de fondo para la página web.Para establecer el color de fondo utilizamos el atributo bgcolor asignándole un color representado por un número hexadecimal o por un nombre predefinido.
Para hacer que el color de fondo de una página sea de color azul, tendremos que escribir el siguiente código:
Sería equivalente a escribir:
c) ETIQUETAS
HTML es un lenguaje de marcas o etiquetas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la
definición de las distintas instrucciones de HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación. Una etiqueta es un texto incluido entre los símbolos menor que < y mayor que >. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:
Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. Por ejemplo: <title> FerGalo </title>
Las principales etiquetas usadas son:
Apertura
Acción Atributos Cierre
<HTML>Al principio y al fin de
todo documento. HEAD, BODY</HTML>
<HEAD>
Encabezado de la página. Aquí se coloca
titulo, metatags, e información para
buscadores entre otras cosas.
Está información no es visible.
BASE, TITLE, ISINDEX, NEXTID, META
</HEAD>
<TITLE> Título de la página web, dentro de HEAD
Ninguno </TITLE>
<BODY>Cuerpo del documento.Va toda la parte visible
de la página web
BGCOLOR, BACKGROUND, TEXT,
LINK, VLINK, ALINK
</BODY>
<FONT> Definición de la fuente. SIZE, COLOR. Internet Explorer: FACE.
</FONT>
<H1...H6>
Tamaño de letras del 1 al 6.
HTML 3.0: LEFT, CENTER, RIGHT
</H1 .../H6>
Nombre Etiqueta Acción Valor
SIZE <font size=?> </font>Tamaño de la letra de 1
a 7size=6
COLOR <font color=?> </font>
Color de la letra, se usa valor hexadecimal o
nombre directo (blue, green, etc.)
color="#000000" (negro)
FACE font face=?> </font>Fuente del texto
Coloca el tipo de letra: Arial, Verdana,
Courier,Etc.
face="helv" (helvética)
d) Texto en NegrillaSirven para RESALTAR a aquellas palabras que sean más importantes en un texto, para que las VEAS mas fácilmente.La etiqueta para poner un texto en negrita se llama "b" (del ingles
"bold").Etiqueta de texto en negrilla: <b> </b>
<B>Texto que será en negrita</B>.
Obtendremos:
Texto que será en negrita
<B> Letra Negrita, del inglés Bold (negrita).
<TABLE> Definirá una tabla.
<IMG> Inclusión de una IMaGen.
Etiquetas para aplicar en cada una de las prácticas que ejecute con lenguaje HTML y quieras crear una página web
Cuando quieras colocar un texto en negrilla es necesario que utilice la siguiente etiqueta:
1. Para abrir y para cerrar <b> esto sale en negrilla </b>2. <p> Hola para construir párrafos <p>3. Etiqueta para colocar color de letra y tamaños:
<Font color= “blue” size= “10”face= “Comic Sans Ms, Arial.Ms Sans Serif”>Bienvenidos a crear páginas web </font><br></br>
4. Atributo bgcolor, color de fondo seguido de la etiqueta body5. Practica de color de fondo, tamaño de fuente, y centrado de la imagen:
<html><head><title> Mi página en colores</title></head><body bgcolor= “#507FFF”><h1><p> Aqui iria el resto de la pagina</p><h1><p align= “center”><img src=“computador.gif” width=“122” height=“85”><bgsound src=“C:\06 a dúo con luis silva.mp3 balance=0 volume=0> De clic aquí </bgsound></body></html>
6. Para colocar movimiento al texto o la imagen debe utilizar la etiqueta:
<marquee> escribe el mensaje </marquee>
7. Las imágenes deben ser cargadas o guardadas en la carpeta, donde tiene guardada la pagina que esta creando, las imágenes deben ser con extensión .gif
ETIQUETA <HR>
Esta etiqueta “abierta”, dibuja una línea horizontal (Horizontal Rule), con alineación, tamaño y ancho variables. Se utiliza con frecuencia para separar secciones de contenido. Su sintaxis se ilustra en las siguientes líneas:
Haga el siguiente programa… ya saben como…
<HTML>
<HEAD>
<TITLE> Líneas<TITLE>
</HEAD>
<BODY>
Línea centrada, de tamaño 10 puntos y ocupando el 30% de la página
<HR ALIGN=“center” SIZE=“10” WIDTH=“30%”>
Línea alineada a la izquierda, de tamaño 5 puntos y ocupando la mitad de la pagina
<HR ALIGN=“left” SIZE=“5” WIDTH=“50%”>
Línea alineada a la derecha, de tamaño 20 puntos y ocupando la mitad de la pagina
<HR ALIGN=“right” SIZE=“20” WIDTH=“50%”>
</BODY>
</HTML>
ETIQUETA <BODY>
Hasta ahora se ha trabajado con páginas cuyos colores son: blanco para el fondo y negro para el texto escrito en ellas. Estos son los colores de HTML toma por defecto. El uso adecuado de la etiqueta <BODY>, que por supuesto tiene atributos, permite entre otras cosas cambiar o establecer: el color del texto, un color o una imagen de fondo y los colores de los enlaces que tendrá la página.
La siguiente es la sintaxis completa de esta etiqueta: <BODY BACKGROUND = "nombre imagen" BGCOLOR = "color fondo" TEXT = "color texto" LINK = "color enlace" VLINK = "color enlace_V" ALINK = “color enlace_A">…</BODY>
Nombre_imagen se refiere al nombre, o mejor a la ubicación del archivo de una imagen que se quiere aparezca como fondo de la página, color_fondo, color_texto, color_enlace, color_enlace_V y color_enlace_A corresponden a los códigos o los nombres de los colores para el fondo de la pagina, el texto de la información, el texto de los enlaces no visitados, el texto de los enlaces visitados y el texto de los enlaces activos respectivamente.
El manejo de estos tres últimos se vera con fondo negro (black) y texto de color lima (#00ff00):
Haga el siguiente programa... ya saben como…
<HTML>
<HEAD>
<TITLE> Cuerpo<TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“#00ff00”>
<H3>ESTA PÁGINA TENDRÁ FONDO NEGRO Y TEXTO LIMA</H3>
</BODY>
</HTML>
Resultado:
ETIQUETA <BR> y <P>La etiqueta <BR> permite forzar un salto de línea dentro de un texto.
Observe que esta etiqueta no se cierra con </BR>, razón por la que se le conoce como etiqueta abierta. <P> es otra etiqueta que puede utilizarse abierta o cerrada. Si se usa de la primera forma, iniciará un nuevo párrafo dejando una línea en blanco, si por el contrario se cierra con </P> permite alinear el nuevo párrafo a la derecha, en el centro, a la izquierda o justificado, dependiendo del valor asignado al parámetro ALIGN. A continuación se muestran algunos ejemplos:
Código Función<P align=“left”>…</P> Párrafo alineado a la izquierda
<P align=“center”>…</P> Párrafo centrado
<P align=“right”>…</P> Párrafo alineado a la derecha
<P align=“justify”>…</P> Párrafo justificado
Práctica
Cree una página muy linda y creativa utilizando los conceptos vistos en esta segunda práctica… cambie los colores al fondo y letra…
1. Cree una carpeta en el escritorio y póngale el nombre que quiera2. Busque en internet una imagen tipo GIF y guárdela en la carpeta
anteriormente creada con el nombre de compu3. Ahora abra el bloc de notas y escriba lo siguiente:
<HTML><HEAD><TITLE> INSERTAR IMÁGENES</TITLE><BODY BGCOLOR=“white”><IMG SRC=“compu.gif” width=“178” Height=“180”></HEAD></HTML>
4. Guarde el archivo con el nombre imágenes.gif5. Ejecútelo6. Comente con sus compañeros que sucede o que aparece7. Ahora escriba el siguiente código:
<HTML><HEAD><TITLE> Insertar Imágenes</TITLE><BODY BGCOLOR=“white”><IMG SRC=“compu.gif” WIDTH=500 HEIGHT=180 ALT=“computadores”></HEAD></HTML>
8. Guarde el archivo y ejecútelo. ¿Que sucede con la imagen?La imagen adquiere una descripción por la función: ALT
9. Cambie los valores de WIDTH y HEIGHT por valores mayores o de menos valor y diga que sucede.
CELULA
<html>
<head>
<title> MI WEB LA CELULA<TITLE>
</HEAD>
<BODY>
<H1><CENTER> LA CELULA</CENTER></H1>
<HR><FONT COLOR=RED><MARQUEE><P ALIGN=“LEFT”> LA CELULA LA UNIDAD FUNDAMENTAL</FONT></MARQUEE>
</P></H1>CLASES DE CELULA</H1>
</P></H1>PARTES DE LA CELULA</H1>
<HR><FONT COLOR=READ> NUCLEO</FONT>
<IMG ALIGN=RIGHT SRC=“celula.gif”>
</BODY>
</html>
Colocar un fondo en una página web
Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localización.
<body background=“fondo.gif">
Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la página.
Fondo en otros elementos
No solo la página puede tener un fondo, también lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.
<table background=“fondo.gif">
<td background=“fondo.gif">
OTRO
<html><head><title> Mi página en colores</title></head>
<body background=“bkgnd2.gif”><h1>bienvenido a mi página< h1><p>Aquí iría el resto de la página</p></body></html>
<html><head><title> Mi página en colores</title></head><body background=“bkgnd2.gif” text=“#000080”><h1>bienvenido a mi página< h1><p>Aquí iría el resto de la página</p></body></html>
<MARQUEE> es una de las etiquetas no estándar de HTML, que soportan los navegadores mas comunes, pero que no están comprendidas dentro de las especificaciones de HTML. Sirve para animar elementos dentro de la magina. En concreto permite que el contenido que pongamos dentro de la etiqueta ya sea texto, fotografías, o las dos cosas, se desplace horizontalmente por la página.
La etiqueta marquee puede servirnos para hacer animaciones en páginas sencillas, sin ningún conocimiento de lenguajes de programación ni otras complicaciones semejantes. Para los que solo conocen HTML es una herramienta perfecta si desean hacer que un elemento de la página se mueva.
Pero atención, aunque este comentando este truco para mover texto por la página o imágenes, tenemos que utilizar el marquee con mucha prudencia, puesto que tiene desventajas:
Marquee no esta comprendido en los estándares HTML Utilizar marquee puede tener problemas de accesibilidad, es decir, se
puede hacer difícil de leer para determinadas personas con discapacidades
El hecho de animar elementos de una pagina favorece el dinamismo y ayuda a llamar la atención sobre determinados mensajes o imágenes, pero si utilizas marquee en muchos lugares puede provocar confusión y marear al usuario
Para utilizar marquee, simplemente colocamos dentro de la etiqueta los contenidos que queremos que se muevan, ya sean texto, imágenes o cualquier otro tipo de contenido. Algo como esto:
<marquee> texto que se mueve</marquee>
Pero también podríamos meter algo como esto:
<marquee>
<table align=“center” width=“1002”border=“1”>
<tr>
<td> Esta tabla se desplaza con todo el contenido de la tabla</td>
</tr>
</table>
</marquee>
Marquee soporta una serie de atributos para modificar su comportamiento o su aspecto. Son los siguientes:
WIDTH
Anchura de la marquesina. Si no marcamos altura, se colocará en la siguiente línea, como en un párrafo distinto. Si marcamos una anchura, la marquesina intentara mostrarse en la misma línea donde lo hayamos colocado. Si no hay espacio para ella se realizara el consiguiente salto de línea para mostrarla un poco más abajo.
DIRECTION Hacia donde queremos que se displace el contenido del marquee. Los posibles valores son “LEFT” y “RIGHT”.
BEHAVIOR Es el comportamiento de la marquesina, de entre los posibles: SCROLL (el comportamiento por defecto) indica que tiene que hacer el desplazamiento siempre en una misma dirección y ALTERNATE, que indica que el desplazamiento se hace a un lado y al otro de manera alternada.
SCROLLDELAY Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la posición de lo que hay desplazándose. Es decir, cuanto mayor sea el valor, más milisegundos tardará la marquesina en moverse. El valor por defecto es 85, pero si por ejemplo ponemos un valor 500 la marquesina cambiará de estado (desplazará el contenido) cada medio segundo.
SCROLLAMOUNT Es la cantidad de pixel que tiene que desplazarse el contenido de la marquesina cada vez que se mueve. A mayor scrollamount, más se desplazará la marquesina en cada movimiento y por tanto la animación será más rápida. El valor por defecto es 6. Podemos probar a colocar un valor mayor y veremos que el movimiento será más “a golpes”.
LOOP El número de ciclos que va a moverse el texto o lo que quiera que haya dentro de la marquee. Este atributo sólo funciona en Internet Explorer. Por defecto es INFINITE, que quiere decir que se desplazará todo el tiempo sin parar. Pero si por ejemplo colocamos un valor como 3, querrá decir que la marquesina sólo realizará tres ciclos o movimientos y luego parará.
BGCOLOR El color de fondo de la marquesina. Acepta el nombre de un color HTML o bien un valor RGB de dicho color.
HSPACE y VSPACE Estos dos atributos sirven para definir el número de píxel que debe aparecer entre la marquesina y otros contenidos de la página, en horizontal y vertical.
Algunos ejemplos de marquee:
<marquee width=200 direction=right>Marquesina a la derecha y con ancho</marquee>
<marquee behaviour=alternate scrolldelay=500 bgcolor=“#ff8833”>texto que se mueve</marquee>
Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags:el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple).
TABLA1
<table border="1"summary="Ejemplo de tabla simple con unificación de celdas de una columna.">
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
TABLA1CORAZON
<HTML>
<HEAD>
<TITLE> EL CORAZON</TITLE>
</head>
<body bgcolor=“black” text=“#00ffF0”>
<h2> ES UN ORGANO MUSCULAR HUECO CUYA FUNCION PRINCIPAL <BR></BR>ES BOMBEAR LA SANGRE POR LOS VASOS SANGUINEOS</h2>
<h2>PARA LLEVARLA A TODOS LOS RINCONES DEL CUERPO</h2>
<a href=“ensayo sobre abuelos/htm”>Enlace a Tema 4: Hiperenlaces</a>
<body>
</HTML>
<table border="1"summary="Ejemplo de tabla simple con unificación de celdas de una columna.">
<tr>
<td rowspan=“3”>EL CORAZON</td>
<td>DIASTOLES</td>
<td>SISTOLE AURICULAR</td>
</tr>
<tr>
<td>SISTOLE VENTRICULAR 5</td>
<td>CAVIDADES DEL CORAZON</td>
</tr>
<tr>
<td>VALVULAS</td>
<td>VENTRICULOS</td>
</tr>
<a href=http://www.aulaclic.com/Pulse aquí para visitar aula </a>
</table>