SlideShare una empresa de Scribd logo
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>
         <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&oacute;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&oacute;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&iacute; para visitar aula </a>

</table>

Más contenido relacionado

La actualidad más candente

Practica 1 power point avanzado
Practica 1 power point avanzadoPractica 1 power point avanzado
Practica 1 power point avanzado
DAVID
 
6 talleres word 1 3
6 talleres word 1 36 talleres word 1 3
6 talleres word 1 3
teamojaneth
 
Plan de mejoramiento tecnologia e informatica
Plan de mejoramiento tecnologia e informaticaPlan de mejoramiento tecnologia e informatica
Plan de mejoramiento tecnologia e informatica
mariadelosangeles1234
 
TeFormas Ejercicios Prácticos Word
TeFormas Ejercicios Prácticos WordTeFormas Ejercicios Prácticos Word
TeFormas Ejercicios Prácticos Word
TeFormas
 
Taller navegadores y buscadores
Taller navegadores y buscadores Taller navegadores y buscadores
Taller navegadores y buscadores
Biblioteca Madre Teresa de Calcuta
 
Actividad partes de una computadora
Actividad partes de una computadora Actividad partes de una computadora
Actividad partes de una computadora
Zulmiitha
 
Qué es html
Qué es htmlQué es html
Qué es html
edujoso
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
Sandra Meza
 
Word tablas y graficos estadisticos - para combinar
Word   tablas y graficos estadisticos - para combinarWord   tablas y graficos estadisticos - para combinar
Word tablas y graficos estadisticos - para combinar
winingther94
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
andreajose13
 
100 preguntas sobre Word
100 preguntas sobre Word100 preguntas sobre Word
100 preguntas sobre Word
TeFormas
 
Practica 05 Numeración y Viñetas
Practica 05 Numeración y ViñetasPractica 05 Numeración y Viñetas
Practica 05 Numeración y Viñetas
Daniel Zavala
 
Manual práctico de WORD 2013
Manual práctico de WORD 2013Manual práctico de WORD 2013
Manual práctico de WORD 2013
COMPU EDUCA
 
Examen teorico de power point
Examen teorico de power pointExamen teorico de power point
Examen teorico de power point
Univ. Queen
 
Practica 4 microsoft word
Practica 4 microsoft wordPractica 4 microsoft word
Practica 4 microsoft word
JOB COLQUICHAGUA ZEVALLOS
 
Ejercicios en clase temas word art y efectos de texto
Ejercicios en clase temas word art y efectos de textoEjercicios en clase temas word art y efectos de texto
Ejercicios en clase temas word art y efectos de texto
Aura Duque
 
Practicas: "MICROSOFT WORD"
Practicas: "MICROSOFT WORD"Practicas: "MICROSOFT WORD"
Practicas: "MICROSOFT WORD"
'Aroo Juárez
 
Cuestionario de microsoft word
Cuestionario de microsoft wordCuestionario de microsoft word
Cuestionario de microsoft word
Diego Suarez Camacho
 
Rúbrica para evaluar y ejercicios de excel 2010
Rúbrica para evaluar y ejercicios de excel 2010Rúbrica para evaluar y ejercicios de excel 2010
Rúbrica para evaluar y ejercicios de excel 2010
Javier Alfredo Alcala Alvarado
 
Guia didactica evolución del computador
Guia didactica evolución del computadorGuia didactica evolución del computador
Guia didactica evolución del computador
Alfiag
 

La actualidad más candente (20)

Practica 1 power point avanzado
Practica 1 power point avanzadoPractica 1 power point avanzado
Practica 1 power point avanzado
 
6 talleres word 1 3
6 talleres word 1 36 talleres word 1 3
6 talleres word 1 3
 
Plan de mejoramiento tecnologia e informatica
Plan de mejoramiento tecnologia e informaticaPlan de mejoramiento tecnologia e informatica
Plan de mejoramiento tecnologia e informatica
 
TeFormas Ejercicios Prácticos Word
TeFormas Ejercicios Prácticos WordTeFormas Ejercicios Prácticos Word
TeFormas Ejercicios Prácticos Word
 
Taller navegadores y buscadores
Taller navegadores y buscadores Taller navegadores y buscadores
Taller navegadores y buscadores
 
Actividad partes de una computadora
Actividad partes de una computadora Actividad partes de una computadora
Actividad partes de una computadora
 
Qué es html
Qué es htmlQué es html
Qué es html
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
 
Word tablas y graficos estadisticos - para combinar
Word   tablas y graficos estadisticos - para combinarWord   tablas y graficos estadisticos - para combinar
Word tablas y graficos estadisticos - para combinar
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
100 preguntas sobre Word
100 preguntas sobre Word100 preguntas sobre Word
100 preguntas sobre Word
 
Practica 05 Numeración y Viñetas
Practica 05 Numeración y ViñetasPractica 05 Numeración y Viñetas
Practica 05 Numeración y Viñetas
 
Manual práctico de WORD 2013
Manual práctico de WORD 2013Manual práctico de WORD 2013
Manual práctico de WORD 2013
 
Examen teorico de power point
Examen teorico de power pointExamen teorico de power point
Examen teorico de power point
 
Practica 4 microsoft word
Practica 4 microsoft wordPractica 4 microsoft word
Practica 4 microsoft word
 
Ejercicios en clase temas word art y efectos de texto
Ejercicios en clase temas word art y efectos de textoEjercicios en clase temas word art y efectos de texto
Ejercicios en clase temas word art y efectos de texto
 
Practicas: "MICROSOFT WORD"
Practicas: "MICROSOFT WORD"Practicas: "MICROSOFT WORD"
Practicas: "MICROSOFT WORD"
 
Cuestionario de microsoft word
Cuestionario de microsoft wordCuestionario de microsoft word
Cuestionario de microsoft word
 
Rúbrica para evaluar y ejercicios de excel 2010
Rúbrica para evaluar y ejercicios de excel 2010Rúbrica para evaluar y ejercicios de excel 2010
Rúbrica para evaluar y ejercicios de excel 2010
 
Guia didactica evolución del computador
Guia didactica evolución del computadorGuia didactica evolución del computador
Guia didactica evolución del computador
 

Destacado

HTML
HTMLHTML
HTML
PattAla
 
Inicio al HTML
Inicio al HTMLInicio al HTML
Inicio al HTML
JuanMa Ruiz
 
Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
duberlisg
 
Temas de html
Temas de htmlTemas de html
Temas de html
Elis Menbri
 
Taller de html
Taller de htmlTaller de html
Taller de html
alejandracagua15
 
Index 2 html taller informatica 904
Index 2 html taller informatica 904 Index 2 html taller informatica 904
Index 2 html taller informatica 904
jayerxD
 
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
iConstruye
 
Diseño visual basic
Diseño visual basicDiseño visual basic
Diseño visual basic
jhonny087
 
Conceptos básicos Html
Conceptos básicos HtmlConceptos básicos Html
Conceptos básicos Html
Raymond Marquina
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
wladimirclipper
 
Conceptos basicos html
Conceptos basicos htmlConceptos basicos html
Conceptos basicos html
joseNvarela906
 
Taller de html
Taller de htmlTaller de html
Taller de html
blankkizz
 
Conceptos basicos prog web introduccion a html y css
Conceptos basicos prog web   introduccion a html y cssConceptos basicos prog web   introduccion a html y css
Conceptos basicos prog web introduccion a html y css
Ariel Adolfo Rodriguez Hernandez
 
Parte del entorno de visual basic
Parte del entorno de visual basicParte del entorno de visual basic
Parte del entorno de visual basic
dabinson02
 
Entorno de desarrollo integrado de Visual Basic .NET
Entorno de desarrollo integrado de Visual Basic .NETEntorno de desarrollo integrado de Visual Basic .NET
Entorno de desarrollo integrado de Visual Basic .NET
Nilian Cabral
 

Destacado (15)

HTML
HTMLHTML
HTML
 
Inicio al HTML
Inicio al HTMLInicio al HTML
Inicio al HTML
 
Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
 
Temas de html
Temas de htmlTemas de html
Temas de html
 
Taller de html
Taller de htmlTaller de html
Taller de html
 
Index 2 html taller informatica 904
Index 2 html taller informatica 904 Index 2 html taller informatica 904
Index 2 html taller informatica 904
 
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
 
Diseño visual basic
Diseño visual basicDiseño visual basic
Diseño visual basic
 
Conceptos básicos Html
Conceptos básicos HtmlConceptos básicos Html
Conceptos básicos Html
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 
Conceptos basicos html
Conceptos basicos htmlConceptos basicos html
Conceptos basicos html
 
Taller de html
Taller de htmlTaller de html
Taller de html
 
Conceptos basicos prog web introduccion a html y css
Conceptos basicos prog web   introduccion a html y cssConceptos basicos prog web   introduccion a html y css
Conceptos basicos prog web introduccion a html y css
 
Parte del entorno de visual basic
Parte del entorno de visual basicParte del entorno de visual basic
Parte del entorno de visual basic
 
Entorno de desarrollo integrado de Visual Basic .NET
Entorno de desarrollo integrado de Visual Basic .NETEntorno de desarrollo integrado de Visual Basic .NET
Entorno de desarrollo integrado de Visual Basic .NET
 

Similar a Taller de HTML

Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
María C. Plata
 
Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF
fabianm94
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
Roberto Montanez
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
Daniel Alberto Reynaldo
 
Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
Macepla822
 
DISEñO-DE-PAGINAS-CON-HTML.pdf
DISEñO-DE-PAGINAS-CON-HTML.pdfDISEñO-DE-PAGINAS-CON-HTML.pdf
DISEñO-DE-PAGINAS-CON-HTML.pdf
DanielHidalgo92
 
Practicas html
Practicas htmlPracticas html
Practicas html
Paula López Burgos
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
ABel Palma
 
Html
HtmlHtml
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
David Alejandro González González
 
Manual html
Manual htmlManual html
Manual html
Marcos Rozze
 
Html
HtmlHtml
Html
UEB
 
Practico html
Practico htmlPractico html
Practico html
Lautaro Lopez
 
Practico html
Practico htmlPractico html
Practico html
lucascen
 
Html
HtmlHtml
Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)
Mariscalino2012
 
Diseño de paginas con html1
Diseño de paginas con html1Diseño de paginas con html1
Diseño de paginas con html1
Ricardo ViGuillermo
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
Elmer Roman
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
Elmer Roman
 
HTML 2011
HTML 2011HTML 2011

Similar a Taller de HTML (20)

Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
 
DISEñO-DE-PAGINAS-CON-HTML.pdf
DISEñO-DE-PAGINAS-CON-HTML.pdfDISEñO-DE-PAGINAS-CON-HTML.pdf
DISEñO-DE-PAGINAS-CON-HTML.pdf
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
 
Html
HtmlHtml
Html
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
Manual html
Manual htmlManual html
Manual html
 
Html
HtmlHtml
Html
 
Practico html
Practico htmlPractico html
Practico html
 
Practico html
Practico htmlPractico html
Practico html
 
Html
HtmlHtml
Html
 
Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)
 
Diseño de paginas con html1
Diseño de paginas con html1Diseño de paginas con html1
Diseño de paginas con html1
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 

Más de UNIVERSIDAD DE LOS LLANOS

ABIOCedario del Meta
ABIOCedario del MetaABIOCedario del Meta
ABIOCedario del Meta
UNIVERSIDAD DE LOS LLANOS
 
MATEMATICAS Y AMBIENTE
MATEMATICAS Y AMBIENTEMATEMATICAS Y AMBIENTE
MATEMATICAS Y AMBIENTE
UNIVERSIDAD DE LOS LLANOS
 
ABP vs ABPr vs gamificacion
ABP vs ABPr vs gamificacionABP vs ABPr vs gamificacion
ABP vs ABPr vs gamificacion
UNIVERSIDAD DE LOS LLANOS
 
Metodologia
MetodologiaMetodologia
VILLAVICENCIO CIUDAD EN DESARROLLO PARA DESCUBRIR
VILLAVICENCIO CIUDAD EN DESARROLLO PARA DESCUBRIRVILLAVICENCIO CIUDAD EN DESARROLLO PARA DESCUBRIR
VILLAVICENCIO CIUDAD EN DESARROLLO PARA DESCUBRIR
UNIVERSIDAD DE LOS LLANOS
 
BOCATOMA AGUAS CLARAS- ACUEDUCTO ARIARI, META
BOCATOMA AGUAS CLARAS- ACUEDUCTO ARIARI, METABOCATOMA AGUAS CLARAS- ACUEDUCTO ARIARI, META
BOCATOMA AGUAS CLARAS- ACUEDUCTO ARIARI, META
UNIVERSIDAD DE LOS LLANOS
 
Foco purificador de aire
Foco purificador de aireFoco purificador de aire
Foco purificador de aire
UNIVERSIDAD DE LOS LLANOS
 
SISTEMA NACIONAL AMBIENTAL- SINA
SISTEMA NACIONAL AMBIENTAL- SINASISTEMA NACIONAL AMBIENTAL- SINA
SISTEMA NACIONAL AMBIENTAL- SINA
UNIVERSIDAD DE LOS LLANOS
 
Autonomia y libertad
Autonomia y libertadAutonomia y libertad
Autonomia y libertad
UNIVERSIDAD DE LOS LLANOS
 
Demanda biológica del oxigeno- DBO
Demanda biológica del oxigeno- DBODemanda biológica del oxigeno- DBO
Demanda biológica del oxigeno- DBO
UNIVERSIDAD DE LOS LLANOS
 
Evolucion del hombre
Evolucion del hombreEvolucion del hombre
Evolucion del hombre
UNIVERSIDAD DE LOS LLANOS
 
Clonacion
ClonacionClonacion
Nanotecnología
NanotecnologíaNanotecnología
Nanotecnología
UNIVERSIDAD DE LOS LLANOS
 
Alimentos transgénicos
Alimentos transgénicosAlimentos transgénicos
Alimentos transgénicos
UNIVERSIDAD DE LOS LLANOS
 
Energia mecánica
Energia mecánicaEnergia mecánica
Energia mecánica
UNIVERSIDAD DE LOS LLANOS
 
Fuentes de energia electrica
Fuentes de energia electricaFuentes de energia electrica
Fuentes de energia electrica
UNIVERSIDAD DE LOS LLANOS
 
Baloncesto
BaloncestoBaloncesto
Lass maravillas del infierno - Termofilas
Lass maravillas del infierno - TermofilasLass maravillas del infierno - Termofilas
Lass maravillas del infierno - Termofilas
UNIVERSIDAD DE LOS LLANOS
 
Reglamento del SENA
Reglamento del SENAReglamento del SENA
Reglamento del SENA
UNIVERSIDAD DE LOS LLANOS
 
FORMACIÓN PROFESIONAL INTEGRAL - FPI
FORMACIÓN PROFESIONAL INTEGRAL - FPI FORMACIÓN PROFESIONAL INTEGRAL - FPI
FORMACIÓN PROFESIONAL INTEGRAL - FPI
UNIVERSIDAD DE LOS LLANOS
 

Más de UNIVERSIDAD DE LOS LLANOS (20)

ABIOCedario del Meta
ABIOCedario del MetaABIOCedario del Meta
ABIOCedario del Meta
 
MATEMATICAS Y AMBIENTE
MATEMATICAS Y AMBIENTEMATEMATICAS Y AMBIENTE
MATEMATICAS Y AMBIENTE
 
ABP vs ABPr vs gamificacion
ABP vs ABPr vs gamificacionABP vs ABPr vs gamificacion
ABP vs ABPr vs gamificacion
 
Metodologia
MetodologiaMetodologia
Metodologia
 
VILLAVICENCIO CIUDAD EN DESARROLLO PARA DESCUBRIR
VILLAVICENCIO CIUDAD EN DESARROLLO PARA DESCUBRIRVILLAVICENCIO CIUDAD EN DESARROLLO PARA DESCUBRIR
VILLAVICENCIO CIUDAD EN DESARROLLO PARA DESCUBRIR
 
BOCATOMA AGUAS CLARAS- ACUEDUCTO ARIARI, META
BOCATOMA AGUAS CLARAS- ACUEDUCTO ARIARI, METABOCATOMA AGUAS CLARAS- ACUEDUCTO ARIARI, META
BOCATOMA AGUAS CLARAS- ACUEDUCTO ARIARI, META
 
Foco purificador de aire
Foco purificador de aireFoco purificador de aire
Foco purificador de aire
 
SISTEMA NACIONAL AMBIENTAL- SINA
SISTEMA NACIONAL AMBIENTAL- SINASISTEMA NACIONAL AMBIENTAL- SINA
SISTEMA NACIONAL AMBIENTAL- SINA
 
Autonomia y libertad
Autonomia y libertadAutonomia y libertad
Autonomia y libertad
 
Demanda biológica del oxigeno- DBO
Demanda biológica del oxigeno- DBODemanda biológica del oxigeno- DBO
Demanda biológica del oxigeno- DBO
 
Evolucion del hombre
Evolucion del hombreEvolucion del hombre
Evolucion del hombre
 
Clonacion
ClonacionClonacion
Clonacion
 
Nanotecnología
NanotecnologíaNanotecnología
Nanotecnología
 
Alimentos transgénicos
Alimentos transgénicosAlimentos transgénicos
Alimentos transgénicos
 
Energia mecánica
Energia mecánicaEnergia mecánica
Energia mecánica
 
Fuentes de energia electrica
Fuentes de energia electricaFuentes de energia electrica
Fuentes de energia electrica
 
Baloncesto
BaloncestoBaloncesto
Baloncesto
 
Lass maravillas del infierno - Termofilas
Lass maravillas del infierno - TermofilasLass maravillas del infierno - Termofilas
Lass maravillas del infierno - Termofilas
 
Reglamento del SENA
Reglamento del SENAReglamento del SENA
Reglamento del SENA
 
FORMACIÓN PROFESIONAL INTEGRAL - FPI
FORMACIÓN PROFESIONAL INTEGRAL - FPI FORMACIÓN PROFESIONAL INTEGRAL - FPI
FORMACIÓN PROFESIONAL INTEGRAL - FPI
 

Taller de HTML

  • 1. 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
  • 2. 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
  • 3. 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?
  • 4. 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
  • 5. 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.
  • 6. 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:
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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>
  • 11. 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:
  • 12. 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…
  • 13. 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.
  • 14. 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>
  • 15. 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>
  • 16. <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>
  • 17. <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>
  • 18. <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”.
  • 19. 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>
  • 20. 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&oacute;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>
  • 21. <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&oacute;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&iacute; para visitar aula </a> </table>