Actividad 3: Comandos HTML.

50 %
50 %
Information about Actividad 3: Comandos HTML.
Education

Published on March 14, 2014

Author: CarlosAlbertoGarciaMares

Source: slideshare.net

<TITLE> Esta etiqueta se utiliza entre <head> y </head> y sirve para definir el título del documento que el navegador suele mostrar en la parte superior de la ventana. <html> <head> <title>Título de mi primera página</title> </head> <body> Mi primera página. </body> </html> Organización del texto Texto <html> <head> <title>ejemplo de texto</title> </head> <body> Ejemplo de texto en un página. Todos los espacios en blanco y saltos de línea serán sustituidos por un espacio en blanco. </body> </html> Comentarios <html> <head> <title>ejemplo de comentario</title> </head> <body> Esta línea no es un comentario. <!-- esta si es un comentario --> Esta no. <!-- esta si ... y esta también --> </body> </html> Salto de línea (<br>) <html> <head> <title>ejemplo de salto de linea</title> </head> <body> Esta línea no acaba en salto de linea. Esta línea no acaba en salto de linea. Esta línea si acaba en salto de linea.<br> Esta línea no acaba en salto de linea. Esta línea no acaba en salto de linea. Esta línea si acaba en salto de linea.<br> Esta línea no acaba en salto de linea. Esta línea no acaba en salto de linea. </body> </html>

Separadores (<hr>) Los separadores son elementos que se muestran como una barra horizontal en la pantalla. De ellos pueden modificarse varios atributos:  size: grosor de la barra horizontal  width: anchura de la barra horizontal  align: alineamiento de la barra, puede valer left, right o center  noshade: elimina el aspecto tridimensional Un ejemplo de separadores: <html> <head> <title>ejemplo de separadores</title> </head> <body> <hr width=33% align=left size=1> <hr width=33% align=center size=4> <hr width=33% align=right size=8> </body> </html> Estilos físicos Son un conjunto de etiquetas que aplican ciertos cambios a la forma en que se visualiza el texto.  <b>: muestra el texto en un tipo de letra más grueso  <i>: muestra el texto inclinado (en cursiva)  <u>: subraya el texto  <tt>: utiliza un tipo de letra no proporcional  <big>: muestra el texto con un tipo de letra más grande  <small>: utiliza un tipo de letra menor  <s>: utiliza un tipo de letra tachado  <sub>: escribe como subíndice  <sup>: escribe como superíndice Un ejemplo de cada uno de ellos: <html> <head> <title>ejemplo de estilos físicos</title> </head> <body> Estilos físicos:<br> <b>negrita</b>, <br> <i>cursiva</i>, <br> <u>subrayado</u>, <br> <tt>letra no proporcinal</tt>, <br> <big>grande</big>, <br> <small>pequeña</small>, <br> <s>tachado</s>, <br> <sub>subíndice</sub>, <br> <sup>superíndice</sup><br> </body> </html>

Estilos lógicos Al igual que los estilos físicos modifican el aspecto del texto, pero en vez de con un cambio permanente, la modificación depende de las preferencias del usuario.  <strong>: muestra el texto en un tipo de letra más fuerte, normalmente en negrita  <em>: muestra el texto enfatizado, noermalmente en cursiva  <code>: suele utilizarse para mostrar algun tipo de código, suele utilizar un tipo de fuente no proporcional  <blockquote>: bloque de texto indentado Un ejemplo de cada uno de ellos: <html> <head> <title>ejemplo de estilos lógicos</title> </head> <body> Estilos lógicos:<br> <strong>fuerte</strong>, <br> <em>enfatizado</em>, <br> <code>código</code>, <br> <blockquote>bloque indentado</blockquote>, <br> </body> </html> Fuentes de texto Tamaño del texto <html> <head> <title>ejemplo de basefont</title> <head> <body> El texto por defecto tiene tamaño 3. <basefont size=5> A partir de ahora tendrá tamaño 5. <body> </html> ************************************************************************* <html> <head> <title>ejemplo de font</title> </head> <body> <font size=1> fuente de tamaño 1</font><br> <font size=2> fuente de tamaño 2</font><br> <font size=3> fuente de tamaño 3</font><br> <font size=4> fuente de tamaño 4</font><br> <font size=5> fuente de tamaño 5</font><br> <font size=6> fuente de tamaño 6</font><br> <font size=7> fuente de tamaño 7</font><br> </body> </html>

Color del texto <html> <head> <title>ejemplo de color</title> </head> <body> <font color=red>Color rojo</font> <font color=green>Color verde</font> <font color=#0000ff>Color azul</font> </body> </html> Tipo de fuente <html> <head> <title>ejemplo de tipos de fuentes</title> </head> <body> Fuente por defecto <font face="arial">Fuente Arial</font> <font face="times">Fuente Times</font> <font face="helvetica">Fuente Helvetica</font> </body> </html> Cabeceras (<h1>..<h6>) <html> <head> <title>ejemplo de cabeceras</title> </head> <body> <h1>Cabecera h1</h1> <h2>Cabecera h2</h2> <h3>Cabecera h3</h3> <h4>Cabecera h4</h4> <h5>Cabecera h5</h5> <h6>Cabecera h6</h6> </body> </html> Párrafos <html> <head> <title>ejemplo de párrafos</title> </head> <body> Párrafos separados por un salto de línea. <br> Párrafos separados por un salto de línea. <br> <p>Un párrafos delimitado por <p>.</p> <div>Un párrafos delimitado por <div>.</div> </body> </html> Texto parpadeante <html> <head> <title>ejemplo de texto parpadeante</title> </head> <body> Esta línea es normal. <blink>Esta en cambio parpadea.</blink> </body>

</html> Listas Existen tres tipos de listas:  listas no ordenadas  listas ordenadas  listas de definiciones Listas no ordenadas <ul> Los posibles valores que puede tonar son:  circle: marcas en forma de circulo (por defecto)  square: marcas en forma de cuadrado  disk: marcas en forma de disco  none: no utilizar ningún tipo de marca He aqui un ejemplo: <html> <head> <title>ejemplo de lista no ordenada</title> </head> <body> <h1>Ejemplo de lista no ordenada</h1> <ul> <li>primer elemento</li> <li>segundo elemento <ul> <li>primer elemento</li> <li>segundo elemento</li> <li>tercer elemento</li> <li>cuarto elemento</li> </ul> </li> <li>tercer elemento</li> <li>cuarto elemento</li> </ul> </body> </html> Listas ordenadas <ol> <html> <head> <title>ejemplo de lista ordenada</title> </head> <body> <h1>Ejemplo de lista ordenada</h1> <table> <td> <ol> <li>primer elemento</li> <li>segundo elemento</li> <li>tercer elemento</li> </ol> </td> <td> <ol type=a> <li>primer elemento</li>

<li>segundo elemento</li> <li>tercer elemento</li> </ol> </td> <td> <ol type=A> <li>primer elemento</li> <li>segundo elemento</li> <li>tercer elemento</li> </ol> </td> <td> <ol type=i> <li>primer elemento</li> <li>segundo elemento</li> <li>tercer elemento</li> </ol> </td> <td> <ol type=I> <li>primer elemento</li> <li>segundo elemento</li> <li>tercer elemento</li> </ol> </td> </table> </body> </html> Listas de definiciones <dl> <html> <head> <title>ejemplo de lista de definiciones</title> </head> <body> <DL> <DT>HTML <DD>This tag marks a text file as an HTML document. <DT>HEAD <DD>This tag encloses the heading for the HTML document. <DT>BODY <DD>This tag displays the body for the HTML document. <DT>DL <DD>This tag displays a definition list in the HTML document. <DT>DT <DD>This tag displays a term in a definition list. <DT>DD <DD>This tag displays a definition description. </DL> </body> </html> Enlaces Los enlaces se crean mediante la etiqueta <a>. Esta etiqueta puede hacer cosas muy diferentes en función de cuáles de sus atributos utilicemos y como. Solamente veremos el uso de dos ellos: href y name.

El atributo name para crear identificadores dentro de una página para, así, luego poder saltar a ellos. La forma de crear un identificador es: <a name="identificador"> Para poder saltar a otra parte, tanto dentro del mismo documento como en cualquier otra dirección de la red, hemos de usar el atributo href de la siguiente forma: <a href="dirección"> Para saltar a otra parte dentro de un mismo documento primero habremos de definir un identificador mediante name y después saltar a él mediante href. Los saltos dentro del mismo documento son especiales y es necesario añadir un carácter # antes del identificador en href. Para pasar a cualquier otro documento de nuestro sistema de ficheros simplemente utilizaremos el atributo href al que pondremos la dirección del documento de destino. Esta dirección puede especificarse tanto de forma absoluta como relativa al directorio del documento de origen. También podremos saltar a páginas servidas por un servidor web utilizando la siguiente sintaxis: <a href="http://www.geneura.org"> Otro uso es poder descargarnos directamente ficheros a través del protocolo FTP. Veamos cómo hacerlo: <a href="ftp://ftp.geneura.org/datos.txt"> Para enviar un correo electrónico: <a href="mailto:pepe@sucasa.es"> Para escribir a un grupo de noticias: <a href="news:migrupo@colegas.es"> Para conectarnos mediante telnet a otro ordenador: <a href="telnet://mipc.es"> Gráficos Los gráficos se añaden al documento mediante la etiqueta <img>. Esta posse una gran cantidad de atributos para modificar su comportamiento. Veamos algunos de los más importantes:  src: localización de la imagen  lowsrc: localización de una imagen de baja resolución que se mostrará mientras la imagen es cargada  alt: texto que se mostrará si la imagen no está disponible  height: altura de la imagen  width: anchura de la imagen  align: alineación horizontal respecto al texto: left, right o center  valing: alineación vertical: top, bottom o middle  border: grosor del borde

Ejemplo: <html> <head> <title>ejemplo de imagen</title> </head> <body> <table> <td> <img src="apple.jpg" align=top border=0> align=top </td> <td> <img src="apple.jpg" align=center border=1> align=center </td> <td> <img src="apple.jpg" align=bottom border=4> align=bottom </td> </table> </body> </html> Tablas Las tablas son utilizadas con más frecuencia. Esto se debe a que no sólo se usan para crear tablas propiamente dichas, sino que con frecuencia toda una página es en realidad una tabla y entonces su uso se debe a su capacidad distribuir los diferentes elementos de forma ordenada. Las tablas se crean utilizando las etiquetas <table> y </table>. Atributos más importantes:  align: posición horizontal de la tabla: left, rigth o center  bgcolor: color de fondo  border: anchura del borde  cellpadding: cantidad de espacio en blanco entre el contenido de una celda y el borde  cellspacing: cantidad de espacio en blanco entre elementos  height: altura de la tabla  width: anchura de la tabla  cols: número de columnas Dentro de una tabla podremos utilizar otra serie de etiquetas para identificar las diferentes partes de una tabla. <caption> y </caption>. Estas etiquetas permiten especificar un título para la tabla. Posee un atributo, align, que permite escoger si este se mostrará por encima o por debajo de la tabla (top y bottom). <tr> y </tr> sirven para crear filas. <td> y </td> sirven para crear columnas. La forma más habitual de utilizarlos es creando en primer lugar las filas y a su vez dentro de estas las columnas. Ambas etiquetas tienen varios atributos en común:  align: alineación horizontal de la celda: left|right|center  valign: alineación vertical de la celda: top|botton|middle|baseline  bgcolor: color del fondo de la celda Ejemplo: <html> <head> <title>título</title> </head> <body> <table border=0> <td> <table border=1 align=left> <caption>Tabla básica</caption>

<tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> </tr> <tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> </tr> <tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> </tr> </table> </td> <td> <table border=1 align=left> <caption>Tabla hueca</caption> <tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> </tr> <tr> <td>2,1</td> <td> </td> <td>2,3</td> </tr> <tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> </tr> </table> </td> <td> <table border=1 align=left> <caption>Tabla con colspan</caption> <tr> <td colspan=3 align=center>1,x</td> </tr> <tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> </tr> <tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> </tr> </table> </td> <td> <table border=1> <caption>Tabla con rowspan</caption> <tr> <td rowspan=3>x,1</td> <td>1,2</td> <td>1,3</td> </tr> <tr> <td>2,2</td> <td>2,3</td> </tr> <tr> <td>3,2</td> <td>3,3</td> </tr> </table> </td> </table> </body> </html>

Add a comment

Related presentations

Related pages

11.3.4.5 Actividad: Comandos show

11.3.4.5 Actividad: Comandos show
Read more

Paso a Paso: Actividad 2.3.8: Configuración de la ...

Actividad 2.3.8: Configuración de la administración básica del switch Tabla de direccionamiento. ... Acceder y configurar el historial de comandos.
Read more

CONMUTACION Y REDES: ACTIVIDAD #3

ACTIVIDAD #3 ACTIVIDAD #3. CONFIGURACIÓN DE INTERFACES PASIVOS EN RIP * ... Además de explicar brevemente para que sirven los nuevos comandos.
Read more

Actividad de Packet Tracer 3.3.4: Configuración de las ...

Tarea 3: Asignar VLAN a puertos El comando range reduce en gran medida la cantidad de comandos repetitivos que se ... Actividad de Packet Tracer 3.3.4:
Read more

Redes Virtuales CCNA3: UNIDAD 3 VLAN CONFIGURACIÓN Y ...

ACTIVIDAD 3 PROBLEMAS CON VLAN. Objetivo: Identificar los problemas de conexión entre Vlan, ... ¿Qué comando muestra el resultado (en la actividad)?
Read more

Cisco3: Actividad de Packet Tracer 4.4.1: Configuración ...

En esta actividad, realiza configuraciones básicas del switch, configura el VTP, ... Configurar los siguientes comandos en el switch 3. S3(config) ...
Read more

Ejecutar comando de AutoCAD

Esta actividad del Diseñador de flujos de trabajo ejecuta cualquier comando de AutoCAD admitido por AutoCAD Map 3D que se puedan ejecutar desde la línea ...
Read more

Practica Cisco III: Actividad PT 3.5.2: Desafío de ...

Actividad PT 3.5.2: Desafío de configuración de VLAN ... Use el comando show vlan brief para verificar que las VLAN se hayan creado. S1#show vlan brief.
Read more

Denis Alonso: Actividad 3. Creando mi blog

Actividad 3. Creando mi blog Propósitos · Explorar las funciones de los diferentes sitios para la creación de blogs, mediante el ...
Read more

Curso Propedeutico UnADM: Actividad 3. Creando Mi Blog.

Actividad 3. Creando Mi Blog. INDICACIONES: 1. Elabora un resumen de la lectura: ¿Qué es ser un estudiante en línea? de Millán Martínez, S. (2014 ...
Read more