Taller de HTML

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 notas
7. 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 1
9. De doble clic en index y observe los resultados
10. 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 notas

11. 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 profesora
14. 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, size
d) 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 documento
Todas 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ágina
El 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ágina
El 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 documento
El 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
Al principio y al fin de </HTML>
<HTML> todo documento. HEAD, BODY
Encabezado de la
página. Aquí se coloca
titulo, metatags, e
<HEAD> información para BASE, TITLE, ISINDEX, </HEAD>
buscadores entre otras NEXTID, META
cosas.
Está información no es
visible.
<TITLE> Título de la página web, Ninguno </TITLE>
dentro de HEAD
Cuerpo del documento. BGCOLOR, </BODY>
<BODY> Va toda la parte visible BACKGROUND, TEXT,
de la página web LINK, VLINK, ALINK

<FONT> Definición de la fuente. SIZE, COLOR. Internet </FONT>
Explorer: FACE.
<H1...H6> Tamaño de letras del 1 al HTML 3.0: LEFT, </H1 .../H6>
6. CENTER, RIGHT

Nombre Etiqueta Acción Valor
Tamaño de la letra de 1 a size=6
SIZE <font size=?> </font> 7
Color de la letra, se usa
COLOR <font color=?> </font> valor hexadecimal o color="#0000
nombre directo (blue, 00" (negro)
green, etc.)
Fuente del texto
FACE font face=?> </font> Coloca el tipo de letra: face="helv"
Arial, Verdana, (helvética)
Courier,Etc.

d) Texto en Negrilla
Sirven 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").

<B> Letra Negrita, del inglés Bold (negrita).
<TABLE> Definirá una tabla.
<IMG> Inclusión de una IMaGen.

Etiqueta de texto en negrilla: <b> </b>

<B>Texto que será en negrita</B>.

Obtendremos:

Texto que será en negrita

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 body
5. 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 quiera
2. Busque en internet una imagen tipo GIF y guárdela en la carpeta
anteriormente creada con el nombre de compu
3. 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.gif
5. Ejecútelo
6. Comente con sus compañeros que sucede o que aparece
7. 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>
</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>
</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>

Taller de HTML

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Taller de HTML

Más de UNIVERSIDAD DE LOS LLANOS

Taller de HTML