POO-WEB-IRN: PAGINAS WEB 2 UNIDAD TRABAJOS Y PRACTICAS

Manual de Dreamweaver de RodriguezNunezIvan

EXAMEN DE HTML

hola como esta
 
ayudaa
 
<del>hola amigos</del>
 
<big>holaa</big>
 
holaa
 
holaaajajaja
 
holaaaG jajaajaj
 
 
<big>
<marquee bgcolor="pink" behavior="alternate"
scrollamount= "12px" scrolldelay="90">examen</marquee>
</big>
 
<big>
<big>
<marquee bgcolor="green" behavior="slipe"
loop="4">examen</marquee>
</big>
</big>
 

<marquee bgcolor="brown" direction="up"
loop="30" scrollamount= "15px" scrolldelay="100">examen</marquee>

 
<h1>Ivan</h1>
 
 
 
hola como estan todos
yo estoy bien y tu?
<center>PERFECTO</center>
PERFECTO
PERFECTO
<UL TYPE= CIRCLE>
<li>hola</li>
<li>hola</li>
<li>hola</li>
</Ul>
<OL>
<li>hola</li>
<li>hola</li>
<li>hola</li>
</OL>
 
<img src="https://media.giphy.com/media/l3q2yYNt8DXoyKRdm/giphy.gif">
<img src"ERROR INTENCIONAL PARA QUE VEA EL TEXTO ALTERNATIVO"="https://media.giphy.com/media/l3q2yYNt8DXoyKRdm/giphy.gif"
alt="EXAMEN">
 
<BODY background="https://media.giphy.com/media/13gvXfEVlxQjDO/giphy.gif">
 

<table width= "60%" border= "1" aling="center" cellpadding="0"
bordercolor="BLACK" body bgcolor="brown">
<caption align="bottom">EXAMEN</caption>
<tr>
<th>EXAMEN</th>
<th>ALUMNO</th>
</tr>
<tr>
<td aling="left">CETIS109</td>
<td aling="left">IVAN</td>
</tr>
</table>

PRACTICAS

ESTRUCTURA DE UN DOCUMENTO HTML de RodriguezNunezIvan

Audio

Opciones para poner audio:
Este es la forma basica:
<audio src="audio.mp3"></audio>
Con este puedes controlar el play:
<audio src="audio.mp3" preload="none" controls></audio>
<audio src="audio.ogg" autoplay loop></audio>

Marquesina

La etiqueta html <marquee> se utiliza para insertar un area de texto en movimiento. También se la conoce como marquesina.

Atributos:

behavior

Establece cómo se desplazará el texto en la etiqueta marquee. Los valores posibles son scroll, slide, y alternate. Si no hay un valor especificado, el valor por defecto establecido es scroll.

Scroll: Hara que lo que este en la marquesina se mueva de derecha a izquierda, de manera ininterrumpida.
Slide: Una vez que completa el recorrido de derecha a izquierda(por defecto) se detiene.
Alternate: Se movera de una esquina a la otra, dando el efecto de rebote.

bgcolor

Establece el color de fondo, puede utilizarse el nombre, o su valor hexadecimal.

direction

Establece la dirección en la que el texto contenido se desplazará. Los valores posibles son left (para moverse hacia la izquierda), right (para moverse a la derecha), up (hacia arriba) y down (hacia abajo). Si no se especifica un valor, por defecto será left.

height

Establece la altura de la etiqueta en pixeles, o en un valor porcentual.

hspace

Establece el margen horizontal.

loop

Establece el número de veces que la marquesina realizará el desplazamiento. Sino se especifica esta propiedad, por defecto es -1, lo que quiere decir que la marquesina se desplazará continuamente.

scrollamount

Establece el valor de movimiento para cada intervalo en pixeles. Por defecto su valor es 6.

scrolldelay

Establece el intervalo entre cada desplazamiento, en milisegundos. El valor por defecto es 85. Nota: Cualquier valor inferior a 60 será ignorado, (puesto que el valor minimo es 60) y se establecerá 60 en su lugar. Salvo que se especifique truespeed.

truespeed

Por defecto, si los valores de scrolldelay son inferiores a 60 serán ignorados. Pero si truespeed está presente, esos valores inferiores a 60 serán aceptados.

vspace

Establece el margen vertical en pixeles o en un valor porcentual.

width

Establece el ancho de la etiqueta en pixeles o un valor porcentual.

Negritas

Existen dos etiquetas que hacen que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es en principio indiferente (aunque pueda atribuírseles un significado diferente a cada una de ellas no vamos a prestarle atención a esto ahora). La primera es la etiqueta y la otra es la etiqueta . Aquí va un ejemplo de código y lo que veríamos en pantalla:

Esta palabra la vamos a poner en negrita y esta otra también

Cursiva

Para escribir un texto en cursiva se ha utilizado mucho en el pasado la etiqueta (que por supuesto debes cerrarla con la etiqueta ). También se ha utilizado la etiqueta . Como en el caso de la negrita, aunque podrían atribuírseles distintos significados no vamos a prestarle atención a esta cuestión ahora. Aquí presentamos un ejemplo:

Esta palabra la vamos a poner en cursiva y esta otra también

Subrayado

Para que la palabra o el texto quedara subrayado se usó en el pasado el rodearlo con la etiqueta y cerrarlo con su correspondiente etiqueta . Así se subrayaría una frase:

Así subrayaríamos una frase importante

PALABRAS MÁS GRANDES O MÁS PEQUEÑAS

Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados (los encabezados son etiquetas especiales que explicaremos más adelante). La variación de tamaño se podía conseguir gracias a las etiquetas <big> y . Sus propios nombres en inglés nos indican cuáles eran sus funciones: <big> agrandará el texto y lo disminuirá. No recomendamos su uso ya que las nuevas versiones de HTML no van a admitir esta etiqueta. La modificación del tamaño del texto se debe hacer a través de técnicas CSS.

Cada vez que se escribe una etiqueta big, se hace el texto un punto más grande. Estas etiquetas también se podían combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos. Un ejemplo sería el siguiente:

Esta palabra se va a escribir pequeñita, esta se va a escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>

SUPERÍNDICES Y SUBÍNDICES

Mediante HTML también podemos escribir expresiones con símbolos matemáticos. Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta te servirá para escribir un subíndice y será la etiqueta para un superíndice. Así nos queda un ejemplo como el siguiente:

Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos matemáticos como esta: H2O o números elevados a potencias 73

TEXTO TACHADO

Existen tres etiquetas que se han venido usando para conseguir que un texto quede tachado. Hablamos de las etiquetas <strike>, <s> y <del>. Todas ellas ofrecen el mismo resultado. Aquí presentamos una muestra:

Puedo proceder a tachar una palabra <strike>así</strike>, <s>así</s> o <del>así</del>

Cambiar tipo de letra

Arial

Arial

times new roman

Times new roman

courier new

Courier new

courier

Courier

roman

Roman

small fonts

Small fonts

tahoma

Tahoma

impact

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.

<caption align="bottom">Encabezado de la tabla.</caption>

<tr>

<td align="center">Tablita de ejmplo para la etiqueta "caption"</td>

</tr>

</table>

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á como escribir este atributo en la etiqueta de la celda:

<tr>

<td nowrap>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.</td>

</tr>

</table>

Las filas: <tr>

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 el 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:

<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 centroverticalmente y a la izquierda horizontalmente</td>

</tr>

<tr>

</tr>

</table>

Las Filas

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”).

Por supuesto a las filas también les podemos definir el color de fondo (“bgcolor”) y el color del borde (“bordercolor”).

Crear tabla

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.

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 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:

Colocar un fondo en una pagina 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">

POO-WEB-IRN

Páginas

PAGINAS WEB 2 UNIDAD TRABAJOS Y PRACTICAS

EXAMEN DE HTML

PRACTICAS

Etiqueta caption

Nowrap

Las filas: <tr>

Las celdas <td>

Las celdas <th>

Colocar un fondo en una pagina Web

Colocar un fondo en una pagina Web

No hay comentarios:

Publicar un comentario

PRESENTACION