SlideShare una empresa de Scribd logo
Maestría_en_Educación_Informática
Es el lenguaje oficial para la construcción de páginas web, el significado de la siguiente
es LENGUAJE DE MARCADO DE HIPERTEXTO.
HTML está compuesto por un conjunto de instrucciones o comandos conocidos con el
nombre de etiquetas, las cuales tiene la función de mostrar dentro de un navegador de
Internet todos aquellos elementos que conforman la pagina web, los cuales son te4xtos,
imagen, videos, animaciones, sonidos, etc.
Las etiquetas están compuestas de la siguiente forma:
<NOMBRE_ETIQUETA> </NOMBRE_ETIQUETA>
Etiqueta de apertura Etiqueta de cierre
Las páginas web están compuestas por un conjunto de etiquetas de las cuales 4 nos
permiten desarrollar una página web rápidamente estas son:
1. <HTML> </HTML>: Su función es indagarle al navegador cual va a ser el
principio y el final de la página.
2. <HEAD> </HEAD>: Representa la cabecera de la página, su función es
mostrar diferentes tipos de información al inicio de una página web. Ejemplo:
titulo, barra de navegador, un texto que pueda ser encontrado por los buscadores.
3. <TITLE> </TITLE>: Permite colocar un texto en la barra de titulo del
navegador, esta etiqueta debe trabajar junto a la etiqueta de la cabecera.
4. <HEAD> </HEAD>: En él se coloca toda la información que necesitamos
colocar en la página web.
Ejemplo:
<html>
<head><title>MI SITIO WEB</title></head>
<body>BIENVENIDO A MI PAGINA WEB </body>
<html>
Maestría_en_Educación_Informática.
Un atributo es cuando una de las propiedades o características que posee una etiqueta.
Estos pueden ser modificados para cambiar la apariencia de la etiqueta dentro de la
página web. Los atributos se escriben dentro de la etiqueta de apertura o de inicio, estos
se encuentran separados por otros atributos por un espacio, a cada atributo se le debe
establecer un valor en cual debe estar encerrado entre comillas dobles.
<ETIQUETA atributo1=”valor” atributo2=”valor”> Etiqueta de apertura.
</ETIQUETA> Etiqueta de cierra.
1. BGCOLOR: Se utiliza para cambiar el color de fondo de la página web.
2. BACKGROUND: Permite colocar una imagen de fondo en una página web.
3. TEXT: Cambia el color del texto que se encuentra en la página web.
Es utilizado dentro de los documentos o páginas web títulos o subtítulos en diferentes
niveles o tamaños dándole el nivel más grande en 1 y el nivel más pequeño es 6.
<H1> </H1>
<H12> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> </H6>
<B> </B> Coloca el texto en negrita
<I> </I> Coloca el texto en cursiva.
<S> </S> Coloca el texto en subrayado.
<U> </U> Coloca el texto en subrayado.
<BR> </BR> Salto de línea
<CENTER> </CENTER> Centra la información.
<P> </P> Crea párrafos de texto, tiene un atributo llamado
Aling cuyos valores son left, rigth, center.
<HR> </HR> Coloca una línea horizontal en la página web, sus
atributos son:
a) Width: Cambia el ancho de la línea.
b) Color: Cambia el color de la línea.
c) Size: Cambia el grosor de la línea.
<BLINK> </BLINK> Parpadeo
<SUB> </SUB> Coloca el texto por debajo de la línea imaginaria
<SUP> </SUP> Coloca el texto por encima de la línea imaginaria.
Es aquella que representa todo el texto que se encuentra dentro del cuerpo de una página
web, estos permite cambiar 3 características las cuales son:
a) Tipo de letra.
b) Tamaño.
c) Color.
La etiqueta que representa la fuente es <FONT></FONT>
ATRIBUTOS:
1. FACE: Permite indicar el tipo de fuente o letra que tendrá el texto dentro de la
pagina.
2. SIZE: Permite modificar el tamaño de la fuente, su valor absoluto se encuentra
en la escala de 1 a 7, donde 1 es la letra más pequeña y 7 la letra más grande
3. BGCOLOR: Especifica el color de la letra la cual debe ser escrito en Inglés.
Maestría_en_Educación_Informática.
EJEMPLO:
<html>
<head><title>::ANIMACIONES::</title>
</head>
<body bgcolor=”yellow”>
<hr width=”80%”>
<center><b><Font face=”snap itc” size=”7” color=”red”>
MARKETING Y PUBLICICDAD </font></b></center>
</hr width=”80%”>
<i><font face=”book Antiqua” size=”5” color=”green”>
1º
INTERNET </font></i></br>
<s><font face=”cardana” size=”4” color=”orange”>
2º REDES SOCIALES </font></s><br>
</body>
<html>
Para incluir comentarios en la página Web se utiliza la etiqueta <!-- -->.
Ejemplo:
<!-- Esto es un comentario sobre mi pagina Web -->
Los comentarios no serán mostrados por el navegador y son útiles para realizar
anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una
determinada parte del documento.
Se utiliza dentro de la página web para darle movimiento a los objetos (Imágenes o
textos) de una forma vertical u horizontal.
ATRIBUTOS:
1. WIDTH: Ancho de la marquesina.
2. HEIGHT: Alto de la marquesina.
3. BGCOLOR: Color de fondo de la marquesina, el color va en inglés.
4. BEHAVIOR: Determina el tipo de movimiento, sus valores son:
a. Scroll: Se desplaza dentro de la página web.
b. Alternate: Rebota dentro de la pagina web.
c. Slider: Se desliza dentro de la página.
d. Direction: Dirección del desplazamiento de la marquesina.
i. Rigth: derecha.
ii. Left: Izquierda
iii. Up: Arriba.
iv. Down: Abajo.
5. LOOP:
6. SCROLLAMOUNT: Determina la velocidad de desplazamiento.
7. SCROLLDELAY: Determina la velocidad de retardo de la marquesina.
8. HEIGHT: Anchura de la marquesina.
9. WIDTH: Altura de la marquesina
10. 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.
A continuación un ejemplo de marquesina sencilla:
Que podremos ir complicando hasta conseguir algo cómo:
Este ejemplo crea una marquesina vertical que se para al pasar el mouse por encima,
utiliza las funciones marquesina.start() y marquesina.stop() para arrancar y parar la
marquesina y los eventos onmouseover y onmouseout para detectar la posición del
mouse-
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
<marquee>
Texto desplazandose
</marquee>
<marquee
direction="up" height="200" width="100%" onmouseout="this.start()" onmouseo
ver="this.stop()">
Texto desplazandose
</marquee>
Maestría_en_Educación_Informática.
ETIQUETA DE IMAGEN
El uso de imágenes de la página web permite visualizar la información de una forma
agradable para el usuario, para utilizar una imagen se debe tener en cuenta lo siguiente:
1. Ubicación del archivo de imagen: Las imágenes son archivos que deben estar
guardados en una carpeta en la misma carpeta que esta la pagina web que se está
construyendo, de no ser así las imágenes no aparecerán en la página web.
2. Nombre y extensión del archivo: Los archivos más utilizados para colocar
imágenes son aquellos de extensión: JPG, GIF y PNG.
La etiqueta que representa a las imágenes es <IMG> </IMG>
ATRIBUTOS:
1. SRC: Permite escribir el nombre y la extensión del archive de imagen.
2. WIDTH: Ancho de la imagen.
3. HEIGHT: Alto de la imagen.
4. BORDE: Coloca un recuadro alrededor de la imagen.
<IMG SRC="/gráficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un
bebé">
5. ALT: Muestra un mensaje al pasar el puntero sobre la imagen. Es la alternativa
que se estableció cuando todavía existían visualizadores de solo texto. Entre
comillas podremos escribir un texto que suplantara a esta imagen si no se carga
o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por
encima.
Este valor se incluye detrás de las comillas que contienen la URL de la imagen:
<IMG SRC="URL DE LA IMAGEN" Alt="Texto a mostrar">
6. ALIGN: Uno de los parámetros que podemos cambiar al insertar las imágenes
es la alineación. Para ello tendremos que incluir el parámetro Align=”lugar”, que
permite controlar la alineación de una imagen con respecto a una línea de texto.
Los tres valores posibles son left, right, y middle
Este valor se incluye detrás de las comillas que contienen la URL de la imagen:
<IMG SRC="URL DE LA IMAGEN" Align="left">
7. Imágenes que enlazan a otras web
Podemos hacer que una imagen nos enlace a otra web poniendo un enlace normal, y
dentro del campo del texto que habría que pinchar, poner la etiqueta de incrustar la
imagen.
La etiqueta sería la siguiente:
<a href="URL DE LA WEB A LA QUE ENLAZAMOS" target="blanmk"><IMG
SRC="URL DE LA IMAGEN" ></a>
ETIQUETA DE VIDEO
Existen dos formas de insertar un video en una página web:
1. A través de www.youtube.com.
2. Por medio de un archivo de video. Para este último se debe tener en cuenta la
ubicación, el nombre y la extensión: AVI, MPG, WMV y DIVX.
La etiqueta que representa los videos es la siguiente: <IMG> </IMG>.
ATRIBUTOS:
1. DYNSRC: Indica el nombre y extensión del archivo de video.
2. LOOP: Número de veces que se repite el video, por defecto es indefinido.
3. WIDTH: Ancho del video.
4. HEIGHT: Alto del video.
5. START=”MOUSEOVER”: Reproduce el video cuando el puntero del mouse
esta sobre él.
ETIQUETA DE SONIDO
A través de esta etiqueta podemos colocar un sonido de fondo a la página web
<BGSOUND>.
ATRIBUTOS:
1. SRC: Nombre y extensión del archivo de audio. Los formatos de audio deben
ser: MP3, WAV, MID.
2. LOOP: Numero de veces en que se repite el sonido.
Existen diversas formas de incluir un fichero de audio en una página, formas que
dependen del tipo de fichero y del navegador usado, y podemos usar diferentes etiquetas
para cada una de ellas.
<BGSOUND SRC="imagine.mid" LOOP=INFINITE>
Maestría_en_Educación_Informática
BGSOUND
La etiqueta bgsound incorpora sonidos de fondo en una página web, sonidos que se
ejecutan automáticamente al cargarse la página. Es una etiqueta propietaria de
Microsoft, por lo que sólo es interpretada por Internet Explorer, admitiendo los
formatos de audio MP3, MID y WAV,
EMBED
Nestcape Navigator implementó la etiqueta embed para incorporar ficheros de audio. Es
ésta una etiqueta de carácter general, que se usa para la inclusión en las páginas web de
todos aquellos archivos ajenos al navegador y que necesitan por lo tanto la ejecución de
algún plugins para su interpretación.
Su sintaxis general, con sus atributos más importantes, es del tipo:
<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>
ATRIBUTOS:
 SRC="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a
reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local,
absoluta respecto el sistema de carpetas del servidor web o una URL completa
que localice el fichero en Internet.
 LOOP="l" determina el número de veces (l) que se debe ejecutar el fichero de
audio. Si le damos el valor infinite, el fichero se reproducirá indefinidamente.
 BALANCE="b" determina el balance del sonido entre los dos altavoces del
equipo, es decir, la potencia o intensidad con que se oirá en cada uno de ellos
(derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000,
correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces.
 VOLUME="v" fija el volumen al que se oirá el sonido, y sus valores pueden
variar entre -10,000 (mínimo) y 0 (máximo). No es soportado por los equipos
MAC.
Ejemplo:
<bgsound src=" “./sonidos/wav.wav" balance=0 volume=0></bgsound>
La etiqueta bgsound admite muchas más propiedades (disabled, delay, id, class,
controls, etc.). Asímismo, esta etiqueta es accesible en Internet Explorer mediante
código JavaScript, pudiendo modificar en tiempo real sus propiedades balance, loop,
src, y volume, aunque ésta última sólo es accesible en plataformas PC. Para una
información completa sobre todas las propiedades y funcionalidades de este etiqueta
podéis visitar la página correspondiente de Microsoft:
EJEMPLO:
<html>
<head><title>::APLICATIVO MULTIMEDIA::</title>
</head>
<body bgcolor=”yellow”>
<center>
<hr>
<img src=”zzz.jpg” width=”30%” height=”30%”>&nbsp
<img src=”xxx.jpg” width=”30%” height=”30%”>&nbsp
<img src=”bbb.jpg” width=”30%” height=”30%”>&nbsp
<img dynsrc=”aaa.mwv” width=”30%” height=”30%”>
<bgsound src=”kalimba”.mp3” loop=”4”>
</center>
</body>
<html>
La estructura en HTML para hacer un listado de elementos es bien simple, y lo mismo
los distintos valores que podemos asignar a sus atributos para tener un total control
sobre estas etiquetas HTML. Las listas HTML serían lo que son “Numeración y
viñetas” en los procesadores de texto.
LISTAS NO ORDENADAS O NO NUMERADAS:
Etiqueta: <ul></ul>
Elemento: <li></li>
Atributo: type=
Maestría_en_Educación_Informática.
Para comenzar siempre debe indicarse que comienza una lista mediante <ul> y para
finalizar </ul>. Si no indicamos el atributo type por defecto la lista se mostrará con un
círculo relleno. Lo más común es que dicho atributo se le asigne a la lista pero también
se le puede añadir a cada elemento en particular. La etiqueta <li> que indica un nuevo
elemento en la lista. Con el atributo “type” se indica que viñeta debe visualizarse
pudiendo ser un círculo vacío, un cuadrado relleno o un círculo relleno.
Atributo type=: “circle”, “disc” o “square”
Ejemplo:
<ul type=”disc”>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ul>
Resultado:
 Manzanas
 Naranjas
 Peras
Vamos con un pequeño ejemplo en código:
<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
Cuyo resultado visual será el que veremos a continuación:
o Esto es un tipo de punto.
 Este es otro.
 Y este es otro diferente.
LISTAS ORDENADAS O NUMERADAS:
Etiqueta: <ol></ol>
Elemento: <li></li>
Atributo: type=
Atributo: value=
Atributo: start=
Es más amplio lo que puede hacerse con las listas ordenadas ya que tiene tres atributos.
El atributo start es utilizado para los elementos, mientras que type y value para la lista.
Atributo type: define el tipo de lista ordenada y sus valores pueden ser “I” para que la
numeración sea de números romanos en mayúscula; “i” números romanos en
minúscula; “A” o “a” para obtener ordenamiento alfabético; “1″ para numeración con
números.
Atributo value: establece a partir de qué valor comienza la lista. Su valor sólo puede
ser numérico; Ej.: value=”4″ como resultado la el primer elemento de la lista será “4.”.
Puede utilizarse conjuntamente con el atributo type en la etiqueta de la lista <ol>.
Atributo start: su valor sólo puede ser numérico. Al utilizarlo al comienzo de la lista se
asume que la misma es del tipo numérica y sirve para indicar a partir de qué número se
empieza. No es combinable con los otros atributos.
Algunos ejemplos:
<ol type=”A” start=”1″>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Resultado:
A. Manzanas
B. Naranjas
C. Peras
<ol type=”I”>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Resultado:
I. Manzanas
II. Naranjas
III. Peras
Maestría_en_Educación_Informática.
<ol>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Resultado:
1. Manzanas
2. Naranjas
3. Peras
Las listas pueden anidarse, lo que implica simplemente crear otra lista dentro de una
lista. Hay otro tipo de lista, la llamada lista de definición <dl> que no se usa casi nunca
pero vale mencionarla.
<ol type=”I” start=”5″>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos
escribir lo siguiente:
<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>
</ol>
Y el resultado será el siguiente:
1. Este será el número 20.
2. Este será el 21.
3. Este será el 22. Y así sucesivamente
Un hipervínculo es una herramienta utilizada para vincular o unir 2 o más páginas web,
la etiqueta que la representa es:
<A> </A>
ATRIBUTOS:
1. HREF: Permite especificar el nombre del archivo de la pagina web que
deseamos vincular.
2. NAME: Se utiliza para darle un nombre a un ancla o marcador dentro de una
página web.
3. TITLE: Permite que al pasar el puntero del mouse sobre el hipervínculo
aparezca el mensaje con información.
Existen 3 clases de hipervínculos las cuales son:
1. HIPERVINCULO DENTRO DEL DOCUMENTO:
Este permite que el usuario se pueda desplazar o mover dentro del mismo
documento, ejemplo:
<H1>Tabla de Contenidos</H1>
<P><A href="#seccion1">Introducción</A><BR>
<A href="#seccion2">Antecedentes</A><BR>
<A href="#seccion2.1">Experiencias personales</A><BR>
...el resto de la tabla de contenidos...
...el cuerpo del documento...
<H2><A name="seccion1">Introducción</A></H2>
...sección 1...
<H2><A name="seccion2">Antecedentes</A></H2>
...sección 2...
<H3><A name="seccion2.1">Experiencias personales</A></H3>
...sección 2.1...
Maestría_en_Educación_Informática.
2. HIPERVÍNCULOS ENTRE PAGINAS:
Las paginas implicadas deben estar vinculas dentro de la misma carpeta, los
nombres de las paginas no pueden contener espacios, ni caracteres especiales.
<html>
<head><title>::HIPERVINCULOS::</title>
</head>
<body bgcolor=”yellow”>
<center>LA TECNOLOGIA</center>
<a href=”PAGINA2.HTML”>IR A LA CIENCIA</a>
</body>
</html>
<html>
<head><title>::HIPERVINCULOS::</title>
</head>
<body bgcolor=”yellow”>
<center>LA CIENCIA</center>
<a href=”PAGINA1.HTML”>IR A TECNOLOGIA</a>
</body>
</html>
3. HIPERVÍNCULOS EXTERNOS:
Estos permiten vincular una pagina creada por nosotros con una pagina que ya
existe en Internet, ademas, podemos abrir o descargar y mostrar un programa de
correo electrónico.
LA TECNOLOGÍA
IR A LA CIENCIA
LA CIENCIA
IR A TECNOLOGIA
EJEMPLO:
Lo mas visto:
HOTMAIL
FACEBOOK
DESCARGAR MÚSICA: CUMBIA COLOMBIANA
<html>
<head><title>::HIPERVINCULOS::</title>
</head>
<body bgcolor=”yellow”>
<center>LO MAS VISTO</center>
<a href=”http://www.hotmail.com”>HOTMAIL</a><br>
<a href=”http://www.facebook.com”>FACEBOOK</a><br>
<a href=”http://www.cumbia.mp3.com”> DESCARGAR MÚSICA:
CUMBIA COLOMBIANA</a>
</body>
<html>
Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas dos
etiquetas definiremos la tabla, las celdas que queremos, las columnas y las
características de cada uno de estos parámetros. Pero vamos a empezar explicándote la
etiqueta <table>.
Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero… ¿podemos
predefinir características de esa tabla? Por supuesto que sí. Una tabla admite muchos
parámetros. Nosotros vamos a explicarte los principales.
La tabla: <table>
Como ya ocurre con la etiqueta body, a una tabla también lo podemos definir el fondo
de la misma. Esto lo podemos conseguir con el parámetro "bgcolor", que nos pondrá un
color de fondo, o "background" para poner una imagen de fondo. Recuerda que si la
imagen es más pequeña que la tabla, ésta se repetirá tanto a lo ancho como a lo largo.
Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con el
parámetro "border". Como en todas los parámetros que ya hemos visto escribiremos:
border= "x" siendo la x un número. Ese número indicará el grosor del borde. Si no
Maestría_en_Educación_Informática
ponemos borde o lo escribimos "0", la tabla no mostrará borde ninguno. Por supuesto,
también podemos darle color al borde, escribiendo la etiqueta "bordercolor" e indicando
el color que queramos para nuestro borde.
El parámetro "width" indircará la anchura de la tabla. Esta anchura la podemos poner en
píxeles (width= "300") o con porcentaje (width= "100%").
Dos parámetros más son cellspacing (que define el espacio entre las celdas de la tabla) y
cellpadding (que le marca a la tabla el espacio que debe dejar alrededor del texto dentro
de una celda).
Como ejemplo, escribiremos el hipotético supuesto de querer una tabla que sea ancha al
100%, con un borde azul de un píxel de grosor y con un cellpadding de 10 y con un
cellspacing de 10. El código quedaría de la siguiente forma.
<table width="100%" border="1" bordercolor="#0000FF" cellspacing="10"
cellpadding="10"></table>
Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de las
mismas.
Las filas: <tr>
Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con
su correspondiente cierre </tr>. El contenido de las columnas que están dentro de la fila
lo podemos alínear tanto horizontal como verticalmente.
Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba
de la celda ("top"), en el centro ("middle") o debajo ("bottom").
Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributo
podremos alinear el contenido de las celdas en el centro ("center"), a la izquierda
("left"), a la derecha ("right") o justificado ("justify").
Por supuesto a las filas también les podemos definir el color de fondo ("bgcolor") y el
color del borde ("bordercolor").
Las celdas <td>
Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> y
su correspondiente cierre </td>.
Al igual que en las filas, en las celdas podemos definir la alineación del contenido que
está dentro con los atributos "valign" y "align".
Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas
columnas como indiquemos en él. Para agrupar celdas utilizaríamos el atributo
"colspan" y para agrupar celdas el atributo "rowspan".
Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td
colspan="2"></td>. Y para agrupar dos filas, la indicación sería la siguiente: <td
rowspan= "2"></td>.
Las celdas <th>
Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos
atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido
que esté dentro de una etiqueta <th> está considerado como el encabezado de la tabla,
por lo que se creará en negrita y centrado sin que nosotros se lo indiquemos.
A continuación vamos a ponerte un pequeño ejemplo de una tabla que combina todas
las cosas que hemos ido viendo en el artículo. Estúdiate primero el código, visualiza
cómo quedaría la tabla y luego mírala en el enlace siguiente: Ejemplo de tabla.
<table width="100%" border="1" cellpadding="0" cellspacing="0"
bordercolor="#000000">
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
<tr>
<td rowspan="2" valign="middle" align="left">Este texto está alineado al centro
verticalmente y a la izquierda horizontalmente</td>
<td>&nbsp;</td>
nowrap
nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligará al
navegador a no romper esa línea, o sea, a no hacer ningún salto de línea. Con este
atributo en la celda, el navegador no respeta el ancho predefinido de la tabla, si es que lo
hubiera, y respeta el ancho de la frase, ya que no puede partirla.
Por tanto, si la frase es más larga que el ancho definido de la tabla, ésta se estirará todo
lo necesario para albergar la frase sin saltos de línea. El siguiente código nos mostrará
cómo escribir este atributo en la etiqueta de la celda:
<table width="400" border="1" cellpadding="10" cellspacing="0"
bordercolor="#000000">
<tr>
<td nowrap>Aunque este texto sea m&aacute;s ancho que los 400 p&iacute;xeles
de la tabla, &eacute;sta no puede dividir mediante saltos de l&iacute;nea
el contenido de la misma, por lo que se estira para albergar toda la frase.</td>
</tr>
</table>
Y a continuación podemos ver el efecto del atributo:
Maestría_en_Educación_Informática
Aunque este texto sea más ancho que los 400 píxeles de la tabla, ésta no puede dividir
mediante saltos de línea el contenido de la misma, por lo que se estira para albergar toda
la frase.
Etiqueta “caption”
Esta etiqueta sirve para poder ponerle un título o encabezado a la tabla. Puedes poder el
encabezado arriba o abajo, dónde tu prefieras, mediante la etiqueta "align": "align=top"
para ponerlo arriba y "align=bottom" para ponerlo abajo. En el siguiente ejemplo
nosotros lo hemos puesto abajo.
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0"
bordercolor="#000000">
<caption align="bottom">Encabezado de la tabla.</caption>
<tr>
<td align="center">Tablita de ejemplo para la etiqueta "caption"</td>
</tr>
</table>
EJEMPLO:
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
RESULTADO:
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6

Más contenido relacionado

La actualidad más candente

Diapositivas Html
Diapositivas HtmlDiapositivas Html
Diapositivas Html
guest55d3b11
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
Alvaroav
 
Introducción a NVU
Introducción a NVUIntroducción a NVU
Introducción a NVU
restauracio
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos html
julyovalle
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
wladimirclipper
 
Manual de nvu
Manual de nvuManual de nvu
Manual de nvu
wilmerlopez
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
Oscar Eduardo Delgado Maya
 
comandos de pagina web
comandos de pagina webcomandos de pagina web
comandos de pagina web
Mariacornejocevallos
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
pablo3022
 
Estructura de una página html
Estructura de una página htmlEstructura de una página html
Estructura de una página html
IST Unitek Arequipa
 
Html5
Html5Html5
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
Elda Calderón
 
Practico html
Practico htmlPractico html
Practico html
lucascen
 
Capas en html
Capas en htmlCapas en html
Capas en html
IST Unitek Arequipa
 
Las etiquetas más utilizadas en html
Las etiquetas más utilizadas en htmlLas etiquetas más utilizadas en html
Las etiquetas más utilizadas en html
Jarvi Daniel Zambrano Santana
 
Creacion de paginas web
Creacion de paginas webCreacion de paginas web
Creacion de paginas web
elsaco
 
Elaboración de paginas web dinamicas
Elaboración de paginas web dinamicasElaboración de paginas web dinamicas
Elaboración de paginas web dinamicas
Lupita Mata
 
Comentarios (1)
Comentarios (1)Comentarios (1)
Comentarios (1)
sebastianpin
 
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
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
Juan Alberto Ortega Contreras
 

La actualidad más candente (20)

Diapositivas Html
Diapositivas HtmlDiapositivas Html
Diapositivas Html
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
Introducción a NVU
Introducción a NVUIntroducción a NVU
Introducción a NVU
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos html
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 
Manual de nvu
Manual de nvuManual de nvu
Manual de nvu
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
comandos de pagina web
comandos de pagina webcomandos de pagina web
comandos de pagina web
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Estructura de una página html
Estructura de una página htmlEstructura de una página html
Estructura de una página html
 
Html5
Html5Html5
Html5
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Practico html
Practico htmlPractico html
Practico html
 
Capas en html
Capas en htmlCapas en html
Capas en html
 
Las etiquetas más utilizadas en html
Las etiquetas más utilizadas en htmlLas etiquetas más utilizadas en html
Las etiquetas más utilizadas en html
 
Creacion de paginas web
Creacion de paginas webCreacion de paginas web
Creacion de paginas web
 
Elaboración de paginas web dinamicas
Elaboración de paginas web dinamicasElaboración de paginas web dinamicas
Elaboración de paginas web dinamicas
 
Comentarios (1)
Comentarios (1)Comentarios (1)
Comentarios (1)
 
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
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
 

Similar a Manual html

Html
HtmlHtml
Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)
Mariscalino2012
 
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 creacion de una pagina. Adriano Mazziotti
Html  creacion de una pagina. Adriano MazziottiHtml  creacion de una pagina. Adriano Mazziotti
Html creacion de una pagina. Adriano Mazziotti
Adriano Mazziotti
 
Manual de html
Manual de htmlManual de html
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
María C. Plata
 
Taller de HTML
Taller de HTMLTaller de HTML
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
albafa1995
 
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTML
JONNATAN TORO
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
Elmer Roman
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
Elmer Roman
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
JessicaSanchezMarin
 
Codigo html
Codigo htmlCodigo html
Codigo html
Juan Barillas
 
Guia rapida html
Guia rapida htmlGuia rapida html
Guia rapida html
Franklin E. Quispe Mayta
 
Clase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDFClase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDF
nicolasmolinach
 
Marquesinas (marquees)
Marquesinas (marquees)Marquesinas (marquees)
Marquesinas (marquees)
Elim Aqp
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
David Alejandro González González
 
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
 
Tutorial ejercicio 1
Tutorial ejercicio 1Tutorial ejercicio 1
Tutorial ejercicio 1
Kelly Johanna Santos
 
Html111
Html111Html111
Html111
pelusa0104
 

Similar a Manual html (20)

Html
HtmlHtml
Html
 
Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)
 
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 creacion de una pagina. Adriano Mazziotti
Html  creacion de una pagina. Adriano MazziottiHtml  creacion de una pagina. Adriano Mazziotti
Html creacion de una pagina. Adriano Mazziotti
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Taller de HTML
Taller de HTMLTaller de HTML
Taller de HTML
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTML
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Guia rapida html
Guia rapida htmlGuia rapida html
Guia rapida html
 
Clase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDFClase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDF
 
Marquesinas (marquees)
Marquesinas (marquees)Marquesinas (marquees)
Marquesinas (marquees)
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
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
 
Tutorial ejercicio 1
Tutorial ejercicio 1Tutorial ejercicio 1
Tutorial ejercicio 1
 
Html111
Html111Html111
Html111
 

Más de Angel Arias Camacho

Reactivos investigación sin respuestas
Reactivos investigación sin respuestasReactivos investigación sin respuestas
Reactivos investigación sin respuestas
Angel Arias Camacho
 
Reactivos psicologia del color teoria 1parcial
Reactivos psicologia del color teoria 1parcialReactivos psicologia del color teoria 1parcial
Reactivos psicologia del color teoria 1parcial
Angel Arias Camacho
 
Reactivos multimedia teoria 1parcial sr
Reactivos multimedia teoria 1parcial srReactivos multimedia teoria 1parcial sr
Reactivos multimedia teoria 1parcial sr
Angel Arias Camacho
 
Reactivos diseño 2d y 3d teoria 1er parcial SR
Reactivos diseño 2d y 3d teoria 1er parcial SRReactivos diseño 2d y 3d teoria 1er parcial SR
Reactivos diseño 2d y 3d teoria 1er parcial SR
Angel Arias Camacho
 
Reactivos fundamentos del diseño teoria 1parcial (sr)
Reactivos fundamentos del diseño teoria 1parcial (sr)Reactivos fundamentos del diseño teoria 1parcial (sr)
Reactivos fundamentos del diseño teoria 1parcial (sr)
Angel Arias Camacho
 
Plan de clases de la asignatura dg - Fundamentos del diseño
Plan de clases de la asignatura dg - Fundamentos del diseñoPlan de clases de la asignatura dg - Fundamentos del diseño
Plan de clases de la asignatura dg - Fundamentos del diseño
Angel Arias Camacho
 
Programa de clases de la asignatura dg - Psicologia del color
Programa de clases de la asignatura    dg - Psicologia del colorPrograma de clases de la asignatura    dg - Psicologia del color
Programa de clases de la asignatura dg - Psicologia del color
Angel Arias Camacho
 
Programa de clases de la asignatura dg - diseño y animación 3 d
Programa de clases de la asignatura dg - diseño y animación 3 dPrograma de clases de la asignatura dg - diseño y animación 3 d
Programa de clases de la asignatura dg - diseño y animación 3 d
Angel Arias Camacho
 
Programa de Clases De la asignatura dg - Multimedia
Programa de Clases De la asignatura  dg - MultimediaPrograma de Clases De la asignatura  dg - Multimedia
Programa de Clases De la asignatura dg - Multimedia
Angel Arias Camacho
 
Webdesignportfolios
WebdesignportfoliosWebdesignportfolios
Webdesignportfolios
Angel Arias Camacho
 
Manual de-diseño Editorial
Manual de-diseño EditorialManual de-diseño Editorial
Manual de-diseño Editorial
Angel Arias Camacho
 
Que es el-diseño editorial
Que es el-diseño editorialQue es el-diseño editorial
Que es el-diseño editorial
Angel Arias Camacho
 
Diseñar con y sin retcula de timothy samara
Diseñar con y sin retcula de timothy samaraDiseñar con y sin retcula de timothy samara
Diseñar con y sin retcula de timothy samara
Angel Arias Camacho
 
Principiios del diseño editorial
Principiios del diseño editorialPrincipiios del diseño editorial
Principiios del diseño editorial
Angel Arias Camacho
 
Layout
LayoutLayout
Formato de ambross harry
Formato de ambross harryFormato de ambross harry
Formato de ambross harry
Angel Arias Camacho
 
Arnheim rudolf arte_y_percepcion_visual
Arnheim rudolf arte_y_percepcion_visualArnheim rudolf arte_y_percepcion_visual
Arnheim rudolf arte_y_percepcion_visual
Angel Arias Camacho
 
Historiadelarte2daedicin maria farga
Historiadelarte2daedicin maria fargaHistoriadelarte2daedicin maria farga
Historiadelarte2daedicin maria farga
Angel Arias Camacho
 
Origenysignificadodelartepaleolitico
OrigenysignificadodelartepaleoliticoOrigenysignificadodelartepaleolitico
Origenysignificadodelartepaleolitico
Angel Arias Camacho
 
De la-torre-lenguaje-de-los-simbolos-graficos
De la-torre-lenguaje-de-los-simbolos-graficosDe la-torre-lenguaje-de-los-simbolos-graficos
De la-torre-lenguaje-de-los-simbolos-graficos
Angel Arias Camacho
 

Más de Angel Arias Camacho (20)

Reactivos investigación sin respuestas
Reactivos investigación sin respuestasReactivos investigación sin respuestas
Reactivos investigación sin respuestas
 
Reactivos psicologia del color teoria 1parcial
Reactivos psicologia del color teoria 1parcialReactivos psicologia del color teoria 1parcial
Reactivos psicologia del color teoria 1parcial
 
Reactivos multimedia teoria 1parcial sr
Reactivos multimedia teoria 1parcial srReactivos multimedia teoria 1parcial sr
Reactivos multimedia teoria 1parcial sr
 
Reactivos diseño 2d y 3d teoria 1er parcial SR
Reactivos diseño 2d y 3d teoria 1er parcial SRReactivos diseño 2d y 3d teoria 1er parcial SR
Reactivos diseño 2d y 3d teoria 1er parcial SR
 
Reactivos fundamentos del diseño teoria 1parcial (sr)
Reactivos fundamentos del diseño teoria 1parcial (sr)Reactivos fundamentos del diseño teoria 1parcial (sr)
Reactivos fundamentos del diseño teoria 1parcial (sr)
 
Plan de clases de la asignatura dg - Fundamentos del diseño
Plan de clases de la asignatura dg - Fundamentos del diseñoPlan de clases de la asignatura dg - Fundamentos del diseño
Plan de clases de la asignatura dg - Fundamentos del diseño
 
Programa de clases de la asignatura dg - Psicologia del color
Programa de clases de la asignatura    dg - Psicologia del colorPrograma de clases de la asignatura    dg - Psicologia del color
Programa de clases de la asignatura dg - Psicologia del color
 
Programa de clases de la asignatura dg - diseño y animación 3 d
Programa de clases de la asignatura dg - diseño y animación 3 dPrograma de clases de la asignatura dg - diseño y animación 3 d
Programa de clases de la asignatura dg - diseño y animación 3 d
 
Programa de Clases De la asignatura dg - Multimedia
Programa de Clases De la asignatura  dg - MultimediaPrograma de Clases De la asignatura  dg - Multimedia
Programa de Clases De la asignatura dg - Multimedia
 
Webdesignportfolios
WebdesignportfoliosWebdesignportfolios
Webdesignportfolios
 
Manual de-diseño Editorial
Manual de-diseño EditorialManual de-diseño Editorial
Manual de-diseño Editorial
 
Que es el-diseño editorial
Que es el-diseño editorialQue es el-diseño editorial
Que es el-diseño editorial
 
Diseñar con y sin retcula de timothy samara
Diseñar con y sin retcula de timothy samaraDiseñar con y sin retcula de timothy samara
Diseñar con y sin retcula de timothy samara
 
Principiios del diseño editorial
Principiios del diseño editorialPrincipiios del diseño editorial
Principiios del diseño editorial
 
Layout
LayoutLayout
Layout
 
Formato de ambross harry
Formato de ambross harryFormato de ambross harry
Formato de ambross harry
 
Arnheim rudolf arte_y_percepcion_visual
Arnheim rudolf arte_y_percepcion_visualArnheim rudolf arte_y_percepcion_visual
Arnheim rudolf arte_y_percepcion_visual
 
Historiadelarte2daedicin maria farga
Historiadelarte2daedicin maria fargaHistoriadelarte2daedicin maria farga
Historiadelarte2daedicin maria farga
 
Origenysignificadodelartepaleolitico
OrigenysignificadodelartepaleoliticoOrigenysignificadodelartepaleolitico
Origenysignificadodelartepaleolitico
 
De la-torre-lenguaje-de-los-simbolos-graficos
De la-torre-lenguaje-de-los-simbolos-graficosDe la-torre-lenguaje-de-los-simbolos-graficos
De la-torre-lenguaje-de-los-simbolos-graficos
 

Último

BARBARA PADILLA DETALLES ESTRUCTURALES.PDF
BARBARA PADILLA DETALLES ESTRUCTURALES.PDFBARBARA PADILLA DETALLES ESTRUCTURALES.PDF
BARBARA PADILLA DETALLES ESTRUCTURALES.PDF
Brbara57940
 
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptxSEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
CarlosDanielAlanocaT1
 
soporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computosoporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computo
mantenimientofresita
 
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdfROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
JesusFlores151669
 
Centro Veterinario Público CVP Diseño arquitectónico
Centro Veterinario Público CVP Diseño arquitectónicoCentro Veterinario Público CVP Diseño arquitectónico
Centro Veterinario Público CVP Diseño arquitectónico
OmairaQuintero7
 
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdfLOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
BARBARAAMAYA4
 
manual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargadosmanual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargados
AlbertoGarcia461436
 
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Soleito
 
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
AMADO SALVADOR
 
EXPOSICION CLOROFILA INVESTIGACION .pptx
EXPOSICION CLOROFILA INVESTIGACION .pptxEXPOSICION CLOROFILA INVESTIGACION .pptx
EXPOSICION CLOROFILA INVESTIGACION .pptx
raulvedia2
 
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdfBROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
IzaakAzaga
 
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdfPresentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
Rubi Caballero pizarro
 
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICAUNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
suclupesanchezm
 
Lab 0 - Instalación Hidráulica (Completo).docx
Lab 0 - Instalación Hidráulica (Completo).docxLab 0 - Instalación Hidráulica (Completo).docx
Lab 0 - Instalación Hidráulica (Completo).docx
MarcosAntonioAduvire
 
ETAPAS DE LLITIA LITERATURA PERUANA.pptx
ETAPAS DE LLITIA LITERATURA PERUANA.pptxETAPAS DE LLITIA LITERATURA PERUANA.pptx
ETAPAS DE LLITIA LITERATURA PERUANA.pptx
ruthyeimi937
 
puentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documentopuentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documento
GuillermoAlejandroCh6
 
Evolucion del computador para diseño pub
Evolucion del computador para diseño pubEvolucion del computador para diseño pub
Evolucion del computador para diseño pub
ivanna200511
 
Proyecciones, vistas isométricas y en plano
Proyecciones, vistas isométricas y en planoProyecciones, vistas isométricas y en plano
Proyecciones, vistas isométricas y en plano
jordanodominguez
 
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitecturaEl Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
slaimenbarakat
 
Manual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computoManual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computo
mantenimientofresita
 

Último (20)

BARBARA PADILLA DETALLES ESTRUCTURALES.PDF
BARBARA PADILLA DETALLES ESTRUCTURALES.PDFBARBARA PADILLA DETALLES ESTRUCTURALES.PDF
BARBARA PADILLA DETALLES ESTRUCTURALES.PDF
 
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptxSEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
 
soporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computosoporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computo
 
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdfROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
 
Centro Veterinario Público CVP Diseño arquitectónico
Centro Veterinario Público CVP Diseño arquitectónicoCentro Veterinario Público CVP Diseño arquitectónico
Centro Veterinario Público CVP Diseño arquitectónico
 
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdfLOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
LOS-PROYECTOS-SOCIOPRODUCTIVOS-EN-FUNCIÓN-DE-LA-FORMACIÓN-LABORAL (1).pdf
 
manual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargadosmanual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargados
 
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
 
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
 
EXPOSICION CLOROFILA INVESTIGACION .pptx
EXPOSICION CLOROFILA INVESTIGACION .pptxEXPOSICION CLOROFILA INVESTIGACION .pptx
EXPOSICION CLOROFILA INVESTIGACION .pptx
 
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdfBROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
 
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdfPresentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
 
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICAUNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
 
Lab 0 - Instalación Hidráulica (Completo).docx
Lab 0 - Instalación Hidráulica (Completo).docxLab 0 - Instalación Hidráulica (Completo).docx
Lab 0 - Instalación Hidráulica (Completo).docx
 
ETAPAS DE LLITIA LITERATURA PERUANA.pptx
ETAPAS DE LLITIA LITERATURA PERUANA.pptxETAPAS DE LLITIA LITERATURA PERUANA.pptx
ETAPAS DE LLITIA LITERATURA PERUANA.pptx
 
puentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documentopuentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documento
 
Evolucion del computador para diseño pub
Evolucion del computador para diseño pubEvolucion del computador para diseño pub
Evolucion del computador para diseño pub
 
Proyecciones, vistas isométricas y en plano
Proyecciones, vistas isométricas y en planoProyecciones, vistas isométricas y en plano
Proyecciones, vistas isométricas y en plano
 
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitecturaEl Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
 
Manual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computoManual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computo
 

Manual html

  • 1. Maestría_en_Educación_Informática Es el lenguaje oficial para la construcción de páginas web, el significado de la siguiente es LENGUAJE DE MARCADO DE HIPERTEXTO. HTML está compuesto por un conjunto de instrucciones o comandos conocidos con el nombre de etiquetas, las cuales tiene la función de mostrar dentro de un navegador de Internet todos aquellos elementos que conforman la pagina web, los cuales son te4xtos, imagen, videos, animaciones, sonidos, etc. Las etiquetas están compuestas de la siguiente forma: <NOMBRE_ETIQUETA> </NOMBRE_ETIQUETA> Etiqueta de apertura Etiqueta de cierre Las páginas web están compuestas por un conjunto de etiquetas de las cuales 4 nos permiten desarrollar una página web rápidamente estas son: 1. <HTML> </HTML>: Su función es indagarle al navegador cual va a ser el principio y el final de la página. 2. <HEAD> </HEAD>: Representa la cabecera de la página, su función es mostrar diferentes tipos de información al inicio de una página web. Ejemplo: titulo, barra de navegador, un texto que pueda ser encontrado por los buscadores. 3. <TITLE> </TITLE>: Permite colocar un texto en la barra de titulo del navegador, esta etiqueta debe trabajar junto a la etiqueta de la cabecera. 4. <HEAD> </HEAD>: En él se coloca toda la información que necesitamos colocar en la página web. Ejemplo: <html> <head><title>MI SITIO WEB</title></head> <body>BIENVENIDO A MI PAGINA WEB </body> <html>
  • 2. Maestría_en_Educación_Informática. Un atributo es cuando una de las propiedades o características que posee una etiqueta. Estos pueden ser modificados para cambiar la apariencia de la etiqueta dentro de la página web. Los atributos se escriben dentro de la etiqueta de apertura o de inicio, estos se encuentran separados por otros atributos por un espacio, a cada atributo se le debe establecer un valor en cual debe estar encerrado entre comillas dobles. <ETIQUETA atributo1=”valor” atributo2=”valor”> Etiqueta de apertura. </ETIQUETA> Etiqueta de cierra. 1. BGCOLOR: Se utiliza para cambiar el color de fondo de la página web. 2. BACKGROUND: Permite colocar una imagen de fondo en una página web. 3. TEXT: Cambia el color del texto que se encuentra en la página web. Es utilizado dentro de los documentos o páginas web títulos o subtítulos en diferentes niveles o tamaños dándole el nivel más grande en 1 y el nivel más pequeño es 6. <H1> </H1> <H12> </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> <B> </B> Coloca el texto en negrita <I> </I> Coloca el texto en cursiva. <S> </S> Coloca el texto en subrayado. <U> </U> Coloca el texto en subrayado.
  • 3. <BR> </BR> Salto de línea <CENTER> </CENTER> Centra la información. <P> </P> Crea párrafos de texto, tiene un atributo llamado Aling cuyos valores son left, rigth, center. <HR> </HR> Coloca una línea horizontal en la página web, sus atributos son: a) Width: Cambia el ancho de la línea. b) Color: Cambia el color de la línea. c) Size: Cambia el grosor de la línea. <BLINK> </BLINK> Parpadeo <SUB> </SUB> Coloca el texto por debajo de la línea imaginaria <SUP> </SUP> Coloca el texto por encima de la línea imaginaria. Es aquella que representa todo el texto que se encuentra dentro del cuerpo de una página web, estos permite cambiar 3 características las cuales son: a) Tipo de letra. b) Tamaño. c) Color. La etiqueta que representa la fuente es <FONT></FONT> ATRIBUTOS: 1. FACE: Permite indicar el tipo de fuente o letra que tendrá el texto dentro de la pagina. 2. SIZE: Permite modificar el tamaño de la fuente, su valor absoluto se encuentra en la escala de 1 a 7, donde 1 es la letra más pequeña y 7 la letra más grande 3. BGCOLOR: Especifica el color de la letra la cual debe ser escrito en Inglés.
  • 4. Maestría_en_Educación_Informática. EJEMPLO: <html> <head><title>::ANIMACIONES::</title> </head> <body bgcolor=”yellow”> <hr width=”80%”> <center><b><Font face=”snap itc” size=”7” color=”red”> MARKETING Y PUBLICICDAD </font></b></center> </hr width=”80%”> <i><font face=”book Antiqua” size=”5” color=”green”> 1º INTERNET </font></i></br> <s><font face=”cardana” size=”4” color=”orange”> 2º REDES SOCIALES </font></s><br> </body> <html> Para incluir comentarios en la página Web se utiliza la etiqueta <!-- -->. Ejemplo: <!-- Esto es un comentario sobre mi pagina Web --> Los comentarios no serán mostrados por el navegador y son útiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Se utiliza dentro de la página web para darle movimiento a los objetos (Imágenes o textos) de una forma vertical u horizontal. ATRIBUTOS: 1. WIDTH: Ancho de la marquesina.
  • 5. 2. HEIGHT: Alto de la marquesina. 3. BGCOLOR: Color de fondo de la marquesina, el color va en inglés. 4. BEHAVIOR: Determina el tipo de movimiento, sus valores son: a. Scroll: Se desplaza dentro de la página web. b. Alternate: Rebota dentro de la pagina web. c. Slider: Se desliza dentro de la página. d. Direction: Dirección del desplazamiento de la marquesina. i. Rigth: derecha. ii. Left: Izquierda iii. Up: Arriba. iv. Down: Abajo. 5. LOOP: 6. SCROLLAMOUNT: Determina la velocidad de desplazamiento. 7. SCROLLDELAY: Determina la velocidad de retardo de la marquesina. 8. HEIGHT: Anchura de la marquesina. 9. WIDTH: Altura de la marquesina 10. 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. A continuación un ejemplo de marquesina sencilla: Que podremos ir complicando hasta conseguir algo cómo: Este ejemplo crea una marquesina vertical que se para al pasar el mouse por encima, utiliza las funciones marquesina.start() y marquesina.stop() para arrancar y parar la marquesina y los eventos onmouseover y onmouseout para detectar la posición del mouse- 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 <marquee> Texto desplazandose </marquee> <marquee direction="up" height="200" width="100%" onmouseout="this.start()" onmouseo ver="this.stop()"> Texto desplazandose </marquee>
  • 6. Maestría_en_Educación_Informática. ETIQUETA DE IMAGEN El uso de imágenes de la página web permite visualizar la información de una forma agradable para el usuario, para utilizar una imagen se debe tener en cuenta lo siguiente: 1. Ubicación del archivo de imagen: Las imágenes son archivos que deben estar guardados en una carpeta en la misma carpeta que esta la pagina web que se está construyendo, de no ser así las imágenes no aparecerán en la página web. 2. Nombre y extensión del archivo: Los archivos más utilizados para colocar imágenes son aquellos de extensión: JPG, GIF y PNG. La etiqueta que representa a las imágenes es <IMG> </IMG> ATRIBUTOS: 1. SRC: Permite escribir el nombre y la extensión del archive de imagen. 2. WIDTH: Ancho de la imagen. 3. HEIGHT: Alto de la imagen. 4. BORDE: Coloca un recuadro alrededor de la imagen. <IMG SRC="/gráficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé"> 5. ALT: Muestra un mensaje al pasar el puntero sobre la imagen. Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima. Este valor se incluye detrás de las comillas que contienen la URL de la imagen: <IMG SRC="URL DE LA IMAGEN" Alt="Texto a mostrar"> 6. ALIGN: Uno de los parámetros que podemos cambiar al insertar las imágenes es la alineación. Para ello tendremos que incluir el parámetro Align=”lugar”, que permite controlar la alineación de una imagen con respecto a una línea de texto. Los tres valores posibles son left, right, y middle Este valor se incluye detrás de las comillas que contienen la URL de la imagen: <IMG SRC="URL DE LA IMAGEN" Align="left"> 7. Imágenes que enlazan a otras web Podemos hacer que una imagen nos enlace a otra web poniendo un enlace normal, y dentro del campo del texto que habría que pinchar, poner la etiqueta de incrustar la imagen.
  • 7. La etiqueta sería la siguiente: <a href="URL DE LA WEB A LA QUE ENLAZAMOS" target="blanmk"><IMG SRC="URL DE LA IMAGEN" ></a> ETIQUETA DE VIDEO Existen dos formas de insertar un video en una página web: 1. A través de www.youtube.com. 2. Por medio de un archivo de video. Para este último se debe tener en cuenta la ubicación, el nombre y la extensión: AVI, MPG, WMV y DIVX. La etiqueta que representa los videos es la siguiente: <IMG> </IMG>. ATRIBUTOS: 1. DYNSRC: Indica el nombre y extensión del archivo de video. 2. LOOP: Número de veces que se repite el video, por defecto es indefinido. 3. WIDTH: Ancho del video. 4. HEIGHT: Alto del video. 5. START=”MOUSEOVER”: Reproduce el video cuando el puntero del mouse esta sobre él. ETIQUETA DE SONIDO A través de esta etiqueta podemos colocar un sonido de fondo a la página web <BGSOUND>. ATRIBUTOS: 1. SRC: Nombre y extensión del archivo de audio. Los formatos de audio deben ser: MP3, WAV, MID. 2. LOOP: Numero de veces en que se repite el sonido. Existen diversas formas de incluir un fichero de audio en una página, formas que dependen del tipo de fichero y del navegador usado, y podemos usar diferentes etiquetas para cada una de ellas. <BGSOUND SRC="imagine.mid" LOOP=INFINITE>
  • 8. Maestría_en_Educación_Informática BGSOUND La etiqueta bgsound incorpora sonidos de fondo en una página web, sonidos que se ejecutan automáticamente al cargarse la página. Es una etiqueta propietaria de Microsoft, por lo que sólo es interpretada por Internet Explorer, admitiendo los formatos de audio MP3, MID y WAV, EMBED Nestcape Navigator implementó la etiqueta embed para incorporar ficheros de audio. Es ésta una etiqueta de carácter general, que se usa para la inclusión en las páginas web de todos aquellos archivos ajenos al navegador y que necesitan por lo tanto la ejecución de algún plugins para su interpretación. Su sintaxis general, con sus atributos más importantes, es del tipo: <bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound> ATRIBUTOS:  SRC="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL completa que localice el fichero en Internet.  LOOP="l" determina el número de veces (l) que se debe ejecutar el fichero de audio. Si le damos el valor infinite, el fichero se reproducirá indefinidamente.  BALANCE="b" determina el balance del sonido entre los dos altavoces del equipo, es decir, la potencia o intensidad con que se oirá en cada uno de ellos (derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces.  VOLUME="v" fija el volumen al que se oirá el sonido, y sus valores pueden variar entre -10,000 (mínimo) y 0 (máximo). No es soportado por los equipos MAC. Ejemplo: <bgsound src=" “./sonidos/wav.wav" balance=0 volume=0></bgsound> La etiqueta bgsound admite muchas más propiedades (disabled, delay, id, class, controls, etc.). Asímismo, esta etiqueta es accesible en Internet Explorer mediante código JavaScript, pudiendo modificar en tiempo real sus propiedades balance, loop, src, y volume, aunque ésta última sólo es accesible en plataformas PC. Para una información completa sobre todas las propiedades y funcionalidades de este etiqueta podéis visitar la página correspondiente de Microsoft:
  • 9. EJEMPLO: <html> <head><title>::APLICATIVO MULTIMEDIA::</title> </head> <body bgcolor=”yellow”> <center> <hr> <img src=”zzz.jpg” width=”30%” height=”30%”>&nbsp <img src=”xxx.jpg” width=”30%” height=”30%”>&nbsp <img src=”bbb.jpg” width=”30%” height=”30%”>&nbsp <img dynsrc=”aaa.mwv” width=”30%” height=”30%”> <bgsound src=”kalimba”.mp3” loop=”4”> </center> </body> <html> La estructura en HTML para hacer un listado de elementos es bien simple, y lo mismo los distintos valores que podemos asignar a sus atributos para tener un total control sobre estas etiquetas HTML. Las listas HTML serían lo que son “Numeración y viñetas” en los procesadores de texto. LISTAS NO ORDENADAS O NO NUMERADAS: Etiqueta: <ul></ul> Elemento: <li></li> Atributo: type=
  • 10. Maestría_en_Educación_Informática. Para comenzar siempre debe indicarse que comienza una lista mediante <ul> y para finalizar </ul>. Si no indicamos el atributo type por defecto la lista se mostrará con un círculo relleno. Lo más común es que dicho atributo se le asigne a la lista pero también se le puede añadir a cada elemento en particular. La etiqueta <li> que indica un nuevo elemento en la lista. Con el atributo “type” se indica que viñeta debe visualizarse pudiendo ser un círculo vacío, un cuadrado relleno o un círculo relleno. Atributo type=: “circle”, “disc” o “square” Ejemplo: <ul type=”disc”> <li>Manzanas</li> <li>Naranjas</li> <li>Peras</li> </ul> Resultado:  Manzanas  Naranjas  Peras Vamos con un pequeño ejemplo en código: <ul> <li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li> </ul> Cuyo resultado visual será el que veremos a continuación: o Esto es un tipo de punto.  Este es otro.  Y este es otro diferente.
  • 11. LISTAS ORDENADAS O NUMERADAS: Etiqueta: <ol></ol> Elemento: <li></li> Atributo: type= Atributo: value= Atributo: start= Es más amplio lo que puede hacerse con las listas ordenadas ya que tiene tres atributos. El atributo start es utilizado para los elementos, mientras que type y value para la lista. Atributo type: define el tipo de lista ordenada y sus valores pueden ser “I” para que la numeración sea de números romanos en mayúscula; “i” números romanos en minúscula; “A” o “a” para obtener ordenamiento alfabético; “1″ para numeración con números. Atributo value: establece a partir de qué valor comienza la lista. Su valor sólo puede ser numérico; Ej.: value=”4″ como resultado la el primer elemento de la lista será “4.”. Puede utilizarse conjuntamente con el atributo type en la etiqueta de la lista <ol>. Atributo start: su valor sólo puede ser numérico. Al utilizarlo al comienzo de la lista se asume que la misma es del tipo numérica y sirve para indicar a partir de qué número se empieza. No es combinable con los otros atributos. Algunos ejemplos: <ol type=”A” start=”1″> <li>Manzanas</li> <li>Naranjas</li> <li>Peras</li> </ol> Resultado: A. Manzanas B. Naranjas C. Peras <ol type=”I”> <li>Manzanas</li> <li>Naranjas</li> <li>Peras</li> </ol> Resultado: I. Manzanas II. Naranjas III. Peras
  • 12. Maestría_en_Educación_Informática. <ol> <li>Manzanas</li> <li>Naranjas</li> <li>Peras</li> </ol> Resultado: 1. Manzanas 2. Naranjas 3. Peras Las listas pueden anidarse, lo que implica simplemente crear otra lista dentro de una lista. Hay otro tipo de lista, la llamada lista de definición <dl> que no se usa casi nunca pero vale mencionarla. <ol type=”I” start=”5″> <li>Manzanas</li> <li>Naranjas</li> <li>Peras</li> </ol> Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo siguiente: <ol> <li value="20">Este será el número 20. </li> <li>Este será el 21. </li> <li> Este será el 22. Y así sucesivamente. </li> </ol> Y el resultado será el siguiente: 1. Este será el número 20. 2. Este será el 21. 3. Este será el 22. Y así sucesivamente
  • 13. Un hipervínculo es una herramienta utilizada para vincular o unir 2 o más páginas web, la etiqueta que la representa es: <A> </A> ATRIBUTOS: 1. HREF: Permite especificar el nombre del archivo de la pagina web que deseamos vincular. 2. NAME: Se utiliza para darle un nombre a un ancla o marcador dentro de una página web. 3. TITLE: Permite que al pasar el puntero del mouse sobre el hipervínculo aparezca el mensaje con información. Existen 3 clases de hipervínculos las cuales son: 1. HIPERVINCULO DENTRO DEL DOCUMENTO: Este permite que el usuario se pueda desplazar o mover dentro del mismo documento, ejemplo: <H1>Tabla de Contenidos</H1> <P><A href="#seccion1">Introducción</A><BR> <A href="#seccion2">Antecedentes</A><BR> <A href="#seccion2.1">Experiencias personales</A><BR> ...el resto de la tabla de contenidos... ...el cuerpo del documento... <H2><A name="seccion1">Introducción</A></H2> ...sección 1... <H2><A name="seccion2">Antecedentes</A></H2> ...sección 2... <H3><A name="seccion2.1">Experiencias personales</A></H3> ...sección 2.1...
  • 14. Maestría_en_Educación_Informática. 2. HIPERVÍNCULOS ENTRE PAGINAS: Las paginas implicadas deben estar vinculas dentro de la misma carpeta, los nombres de las paginas no pueden contener espacios, ni caracteres especiales. <html> <head><title>::HIPERVINCULOS::</title> </head> <body bgcolor=”yellow”> <center>LA TECNOLOGIA</center> <a href=”PAGINA2.HTML”>IR A LA CIENCIA</a> </body> </html> <html> <head><title>::HIPERVINCULOS::</title> </head> <body bgcolor=”yellow”> <center>LA CIENCIA</center> <a href=”PAGINA1.HTML”>IR A TECNOLOGIA</a> </body> </html> 3. HIPERVÍNCULOS EXTERNOS: Estos permiten vincular una pagina creada por nosotros con una pagina que ya existe en Internet, ademas, podemos abrir o descargar y mostrar un programa de correo electrónico. LA TECNOLOGÍA IR A LA CIENCIA LA CIENCIA IR A TECNOLOGIA
  • 15. EJEMPLO: Lo mas visto: HOTMAIL FACEBOOK DESCARGAR MÚSICA: CUMBIA COLOMBIANA <html> <head><title>::HIPERVINCULOS::</title> </head> <body bgcolor=”yellow”> <center>LO MAS VISTO</center> <a href=”http://www.hotmail.com”>HOTMAIL</a><br> <a href=”http://www.facebook.com”>FACEBOOK</a><br> <a href=”http://www.cumbia.mp3.com”> DESCARGAR MÚSICA: CUMBIA COLOMBIANA</a> </body> <html> Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas dos etiquetas definiremos la tabla, las celdas que queremos, las columnas y las características de cada uno de estos parámetros. Pero vamos a empezar explicándote la etiqueta <table>. Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero… ¿podemos predefinir características de esa tabla? Por supuesto que sí. Una tabla admite muchos parámetros. Nosotros vamos a explicarte los principales. La tabla: <table> Como ya ocurre con la etiqueta body, a una tabla también lo podemos definir el fondo de la misma. Esto lo podemos conseguir con el parámetro "bgcolor", que nos pondrá un color de fondo, o "background" para poner una imagen de fondo. Recuerda que si la imagen es más pequeña que la tabla, ésta se repetirá tanto a lo ancho como a lo largo. Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con el parámetro "border". Como en todas los parámetros que ya hemos visto escribiremos: border= "x" siendo la x un número. Ese número indicará el grosor del borde. Si no
  • 16. Maestría_en_Educación_Informática ponemos borde o lo escribimos "0", la tabla no mostrará borde ninguno. Por supuesto, también podemos darle color al borde, escribiendo la etiqueta "bordercolor" e indicando el color que queramos para nuestro borde. El parámetro "width" indircará la anchura de la tabla. Esta anchura la podemos poner en píxeles (width= "300") o con porcentaje (width= "100%"). Dos parámetros más son cellspacing (que define el espacio entre las celdas de la tabla) y cellpadding (que le marca a la tabla el espacio que debe dejar alrededor del texto dentro de una celda). Como ejemplo, escribiremos el hipotético supuesto de querer una tabla que sea ancha al 100%, con un borde azul de un píxel de grosor y con un cellpadding de 10 y con un cellspacing de 10. El código quedaría de la siguiente forma. <table width="100%" border="1" bordercolor="#0000FF" cellspacing="10" cellpadding="10"></table> Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de las mismas. Las filas: <tr> Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con su correspondiente cierre </tr>. El contenido de las columnas que están dentro de la fila lo podemos alínear tanto horizontal como verticalmente. Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba de la celda ("top"), en el centro ("middle") o debajo ("bottom"). Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributo podremos alinear el contenido de las celdas en el centro ("center"), a la izquierda ("left"), a la derecha ("right") o justificado ("justify"). Por supuesto a las filas también les podemos definir el color de fondo ("bgcolor") y el color del borde ("bordercolor"). Las celdas <td> Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> y su correspondiente cierre </td>. Al igual que en las filas, en las celdas podemos definir la alineación del contenido que está dentro con los atributos "valign" y "align". Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas columnas como indiquemos en él. Para agrupar celdas utilizaríamos el atributo "colspan" y para agrupar celdas el atributo "rowspan".
  • 17. Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td colspan="2"></td>. Y para agrupar dos filas, la indicación sería la siguiente: <td rowspan= "2"></td>. Las celdas <th> Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido que esté dentro de una etiqueta <th> está considerado como el encabezado de la tabla, por lo que se creará en negrita y centrado sin que nosotros se lo indiquemos. A continuación vamos a ponerte un pequeño ejemplo de una tabla que combina todas las cosas que hemos ido viendo en el artículo. Estúdiate primero el código, visualiza cómo quedaría la tabla y luego mírala en el enlace siguiente: Ejemplo de tabla. <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> <th>Encabezado 3</th> </tr> <tr> <td rowspan="2" valign="middle" align="left">Este texto está alineado al centro verticalmente y a la izquierda horizontalmente</td> <td>&nbsp;</td> nowrap nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligará al navegador a no romper esa línea, o sea, a no hacer ningún salto de línea. Con este atributo en la celda, el navegador no respeta el ancho predefinido de la tabla, si es que lo hubiera, y respeta el ancho de la frase, ya que no puede partirla. Por tanto, si la frase es más larga que el ancho definido de la tabla, ésta se estirará todo lo necesario para albergar la frase sin saltos de línea. El siguiente código nos mostrará cómo escribir este atributo en la etiqueta de la celda: <table width="400" border="1" cellpadding="10" cellspacing="0" bordercolor="#000000"> <tr> <td nowrap>Aunque este texto sea m&aacute;s ancho que los 400 p&iacute;xeles de la tabla, &eacute;sta no puede dividir mediante saltos de l&iacute;nea el contenido de la misma, por lo que se estira para albergar toda la frase.</td> </tr> </table> Y a continuación podemos ver el efecto del atributo:
  • 18. Maestría_en_Educación_Informática Aunque este texto sea más ancho que los 400 píxeles de la tabla, ésta no puede dividir mediante saltos de línea el contenido de la misma, por lo que se estira para albergar toda la frase. Etiqueta “caption” Esta etiqueta sirve para poder ponerle un título o encabezado a la tabla. Puedes poder el encabezado arriba o abajo, dónde tu prefieras, mediante la etiqueta "align": "align=top" para ponerlo arriba y "align=bottom" para ponerlo abajo. En el siguiente ejemplo nosotros lo hemos puesto abajo. <table width="50%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000"> <caption align="bottom">Encabezado de la tabla.</caption> <tr> <td align="center">Tablita de ejemplo para la etiqueta "caption"</td> </tr> </table> EJEMPLO: <table> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table> RESULTADO: Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6