Texto de Alumnos de HTML

H
TML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos, el cliente (Netscape, IE, Mosaic, Lynx, IBrowse) los interpreta y los despliega. Existen clientes grficos como Netscape, y otros como el Lynx que solo despliegan texto. Crear una buena pgina tiene dos aspectos; por un lado el conocimiento tcnico para crear cdigo HTML correcto, por otro lado el diseo grfico necesario para presentar la informacin y hacerla ms atractiva para el usuario. Los factores que afectan la presentacin de la informacin son: Las marcas utilizadas. El tamao fsico de la pgina Las fuentes utilizadas para desplegar el texto La resolucin de colores soportada por el monitor Una pgina es un archivo de texto con extensin "htm" o "html" que puede ser creada con cualquier procesador de palabras as como por el Edit de DOS, o el Notepad de Windows. Todas las pginas intranet tienen la siguiente estructura: <HTML> <HEAD> <TITLE>primera pgina</TITLE> </HEAD> <BODY> hola amigos </BODY> </HTML> En la primer lnea encontramos el comando <HTML>. Esto le indica al cliente (ejemplo: Netscape) que comienza un documento HTML. Luego viene <HEAD>, la primer parte de un documento HTML. Dentro de HEAD puede ir el titulo <TITLE> del documento (Netscape y MS Internet Explorer lo muestra en la barra superior de la ventana) y otros comandos mas avanzados. PRACTICA NO. 1 Abrir el bloc de notas Escribir el texto html anterior Guardarlo como practica1.html
1
Abrir el Internet Explorer Ir a : Archivo , Abrir , Examinar y dar la ruta de la pagina realizada. Dibujar la pantalla de Internet con el resultado
Tarea: Traer en disco una imagen
P armetros
de BODY
BACKGROUND: Permite incluir una imagen de fondo. Se recomienda tener cuidado de que la imagen de fondo no dificulte la lectura del texto. Esto es equivalente a incluir una marca de agua en un documento. Los tipos de archivo de imagen ms comnmente usados en la construccin de pginas son GIF y JPEG. Para incluir un fondo en el documento debe seguir la siguiente sintaxis: < body background = "ArchivoDeImagen.extensin"> PRACTICA NO 2. Abrir el bloc de Notas Anotar el siguiente texto : < HTML > < HEAD> <TITLE> MI SEGUNDA PAGINA</TITLE> </HEAD> <BODY> BODY BACKGROUND = RUTADEIMAGEN.EXTENSIN HOLA AMIGOS </BODY> </HTML> Guardarlo como practica2.html Abrir el Internet Explorer Ir a : Archivo , Abrir , Examinar y dar la ruta de la pagina realizada. Dibujar la pantalla de Internet con el resultado TAREA: TRAER LA LETRA DE TU CANCIN FAVORITA BGCOLOR: Establece el color de fondo de una pgina. Se especifica con seis nmeros hexadecimales, correspondiendo los dos primeros al color rojo,
los 2 siguientes al verde y los restantes al azul. La sintaxis para usar este atributo o clusula se muestra a continuacin: <body bgcolor = "#hhhhhh"> El color a usar se expresa entre comillas e inicia con el signo "#" para indicarle al navegador que se trata de un nmero hexadecimal. Algunos ejemplos se listan a continuacin: <body bgcolor="#FFFFFF"> <body bgcolor="#000000"> El primero establece el color de fondo a blanco, mientras que el segundo lo hace a negro. Podemos establecer los siguientes colores: Nombre del color Nmero hexadecimal antiquewhite FAEBD7 darkgray A9A9A9 darkgreen 006400 darkpink FF1493 beige F5F5DC black 000000 floralwhite FFFAF0 blue 0000FF brown A52A2A greenyellow ADFF2F indigo 4B0082 lemonchiffon FFFACD lightblue ADD8E6 orange FFA500 lightyellow FFFFE0 magenta FF00FF pink FFC0CB marron 800000 silver C0C0C0 tan D2B48C darkcyan 008B8B tomato FF6347 yellow FFFF00 Los nmeros hexadecimales son 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C ,D, E y F. PRACTICA NO. 3 Realizar una pagina que tenga de fondo el color de tu preferencia El texto sera la letra de la cancin que elegiste Guardarlo como practica3.html Abrir el Internet Explorer
Ir a : Archivo , Abrir , Examinar y dar la ruta de la pagina realizada. Dibujar la pantalla de Internet con el resultado
TAREA: INVESTIGAR ACERCA DEL CICLO DEL AGUA TEXT: Declara el color del texto de toda una pgina. La seleccin de color funciona igual que para el atributo bgcolor; por ejemplo: <body text="#FF6347"> Le indica al navegador que las letras tendrn el color "tomato". LINK: Cambia el color de todas las conexiones (links) de la pgina. VLINK: Cambia el color de todas las conexiones visitadas. ALINK: Establece el color de las conexiones seleccionadas. En la ltima linea del cdigo del ejemplo encontramos </HTML>. Esto le indica al cliente (Netscape) que el documento ha finalizado. Observe que: <HEAD> tiene su correspondiente llave de cierre </HEAD>, y <BODY> tiene </BODY>, esto es fundamental incluirlo en la pgina para tener un documento HTML correcto. Esta estructura de cabezal (HEAD) y cuerpo (BODY) siempre debe ser mantenida. PRACTICA NO 4 1. Escribe una pgina con las siguientes caractersticas: El ttulo de la pagina: mi cuarta pagina El color de fondo se establecer como tu quieras (consulta la tabla de colores). El color de las letras ser "AZUL" . El texto ser el ciclo del agua TAREA: INVESTIGAR REFERENTE A LOS HOYOS NEGROS
I
NCLUIR TEXTO CON FORMATO En sus inicios, casi la totalidad de las pginas Web contenan exclusivamente texto, siendo pocas aquellas que se aventuraban a incluir imgenes que las hicieran ms atractivas a la vista de los usuarios, situacin que ha cambiado rpidamente al grado de que ahora ya es comn hablar de multimedia e incluso realidad virtual en la red.
Las capacidades que poseen los navegadores de mostrar texto con formato es limitada si lo comparamos con las posibilidades de los modernos procesadores de texto y paquetes de edicin; esto debido principalmente se debe a las restricciones que impone el HTML. ACENTUAR UNA PALABRA An cuando introducimos una vocal acentuada, esta no se muestra en la pantalla por lo que para incluirlas correctamente es necesario escribirlas como se muestra a continuacin: Carcter Cdigo Carcter Cdigo á Á é É í Í ó Ó ú Ú ñ Ñ Carcter < > & " Cdigo < > & "
Si se desea escribir un carcter definido e la tabla ASCII, es posible utilizar el cdigo: &#n; donde n es el nmero de cdigo ASCII. Algunos ejemplos del uso de este tipo de caracteres se muestran en seguida: árbol rbol día da caminar&eacute caminar niño nio 5 &lt 6 5 < 6 ~ ~ Para prevenir que el navegador rompa una lnea en un carcter de espacio, una secuencia de escape es utilizada en lugar del carcter normal de espacio. Esta secuencia esta representada por los caracteres . Esta tambin puede ser utilizada para introducir ms espacios entre caracteres o palabras, por ejemplo: A AB PRACTICA CINCO Hacer una pagina muestre en la pantalla una salida con las siguientes caractersticas: Un ttulo en la ventana que diga: Cdigos Especiales. Un fondo de color blanco. La letra de color rojo
El texto debera ir con acentos y espacios, sera lo investigado acerca de los hoyos negros TAREA: INVESTIGAR ACERCA DE LA LEYENDA DEL POPOCATEPETL
E
specificar Fuente Debido a que las pginas Web se muestran en una variedad de plataformas, Windows, Unix, Mac, Solaris, etc., y en diversos navegadores, Netscape, Internet Explorer, Mosaic, etc., las fuentes presentes en una mquina cliente pueden no estar disponibles en otra. Adems de que un usuario puede preferir configurar su navegador para un tipo de fuente diferente al resto, es difcil asegurar que una pgina se vea exactamente igual en cualquier plataforma. El HTML cuenta con una etiqueta para especificar la fuente de un prrafo o carcter: <font> </font>, cuyos atributos se describen a continuacin: face Permite asignar una fuente al texto, por ejemplo Arial, Verdana, Times New Roman, etc. El valor del atributo debe encerrase entre comillas dobles.color Asigna un color al texto que se encuentra delimitado por la etiqueta <font> </font>. Usualmente el valor del atributo se expresa en hexadecimal y se encierra entre comillas. size Especifica el tamao de la fuente; se muestra como un nmero que puede ser absoluto o relativo. Cuando se expresa con nmeros absolutos se usan los nmeros del 1 al 7, siendo el 7 el tamao mximo. Los siguientes son ejemplos del uso de esta etiqueta: <font face="Verdana" color="#000000" size=7> <font face="Arial" color="#0000FF" > <font color="#FF0000" > PRACTICA SEIS Crear una pgina que tenga las siguientes caractersticas: Un ttulo de ventana que diga: Fuentes. El color de fondo debe ser blanco. Una lnea de texto cuya fuente COMIC SANS MS de color marrn de tamao 7,que diga: Tamao mximo. Otra lnea de texto cuya fuente sea Courier de color azul y dos veces ms pequea que el tamao base, que diga: Letra pequea. PRACTICA SIETE Copiar este texto en el bloc de notas y dibujar la pantalla con el resultado <HTML>
<HEAD> <TITLE> PRACTICA SIETE </TITLE> </HEAD> <BODY> <FONT SIZE=5> HOLA </FONT> <FONT SIZE=1> MUNDO </FONT> </BODY> </HTML> Encabezados Un encabezado es un estilo de ttulo predefinido en HTML, semejante a los estilos de Word. Existen 6 niveles de encabezados o ttulos, siendo el ms grande el nmero 1. Su sintaxis es la siguiente: <Hn> </Hn> donde la n vara desde 1 a 6 En el siguiente ejemplo, se pueden observar los diferentes niveles de encabezados: <html> <body> <h1>Primer nivel</h1> <h2>Segundo nivel</h2> <h3>Tercer nivel</h3> <h4>Cuarto nivel</h4> <h5>Quinto nivel</h5> <h6>Sexto nivel</h6> </body> </html> PRACTICA OCHO Copiar este texto en el bloc de notas y dibujar la pantalla con el resultado <HTML> <HEAD> <TITLE> PRACTICA OCHO </TITLE> </HEAD> <BODY> <H6> HOLA
</H6> <H5> HOLA </H5> <H4> HOLA </H4> <H3> HOLA </H3> <H2> HOLA </H2> <H1> HOLA </H1> </BODY> </HTML> Crear una pagina que contenga: De titulo: la leyenda del popocatepetl El fondo deber ser de color gris La letra de color azul El encabezado (titulo del texto) ser de tamao 2 Se deber de escribir por lo menos una cuartilla de la investigacin Dibujar el resultado de la practica
Prrafos
Una pgina est compuesta por uno o varios prrafos. Un prrafo puede estar constituido por uno o varios renglones de texto. En Word un prrafo se define como un bloque de texto comnmente delimitado con una marca de prrafo introducida cuando se pulsa la tecla "enter". Como en HTML los retornos de carro son ignorados, se debe hacer uso del siguiente contenedor para especificar el prrafo: <p> </p> La etiqueta de prrafo puede tener un atributo con tres posibles valores para l; dicho atributo es ALIGN (alineacin) y su sintaxis es la siguiente: <p align = alineacin> </p> donde alineacin puede tomar cualquiera de los siguientes valores: - left (alineacin a la izquierda, que es el valor por omisin) - center (alineacin centrada). - right (alineacin a la derecha).
PRACTICA NUEVE De la practica anterior agregar el atributo de PARRAFO y convertir el texto en tres prrafos. Agregar el atributo ALIGN a los prrafos de la siguiente manera: al primero asgnar el valor "left", al segundo "center" y al tercero "right" Dibujar el resultado de la practica Saltos de lnea Dentro de un prrafo es posible forzar un salto de lnea utilizando para ello la etiqueta <br> de la siguiente manera: <p>Esto es un ejemplo de <br> como es posible forzar un salto de línea dentro de un párrafo</p> Observe que la etiqueta <br> no requiere otra que la cierre. Esta etiqueta tiene un slo atributo que es CLEAR, el cual puede tomar los valores "left", "right" y "all". Con CLEAR se fuerza un salto de lnea hasta una que cumpla con alguna de las siguientes condiciones, dependiendo del valor que tome el atributo: Hasta donde exista una lnea cuyo margen izquierdo se encuentre libre de texto o de imgenes. Hasta donde exista una lnea cuyo margen derecho se encuentre libre de texto o de imgenes. Hasta donde exista una lnea que se encuentre libre de texto o de imgenes. Por ahora no utilizaremos este atributo, sino hasta que estemos en condiciones de incluir imgenes a la pgina Intranet. PRACTICAS Formatos Fsicos Los formatos fsicos existentes en HTML son semejantes a los de cualquier procesador de texto, siendo tres los bsicos soportados por cualquier navegador: negritas, itlicas y subrayado, <b> </b>, <i> </i> y <u> </u>, respectivamente. Se dice que el efecto de estas etiquetas es absoluto, es decir que todos los navegadores interpretan y muestran el contenido exactamente de la misma manera (por ello se afirma que es un formato fsico). Cada vez que "abra" una de estas etiquetas debe "cerrarla" para delimitar exactamente el texto que requiere se le aplique el efecto deseado. As, en los ejemplos que se muestran en seguida, el resultado ser: PRACTICA Este cdigo ... se ver as: <b>negritas</b> negritas <i>itálicas</i> itlicas <u>subrayado</u> subrayado <b><i><u>formatos físicos básicos</u></i></b> formatos fsicos bsicos Lneas horizontales
Una lnea horizontal puede ser creada con la etiqueta <HR>, siendo su sintxis la que se muestra a continuacin: <hr size=nn noshade width=nn/pp%> donde son atributos oprcionales size, width y noshade. El atributo size especifica el grosor de la lnea y se expresa en pixeles. Para especificar el largo de la lnea horizontal se usa el atributo width, pudiendo especificar el tamao como un porcentaje en relacin con el tamao de la ventana. Por omisin, las lneas horizontales tienen una sombra que les proporciona un efecto de tercera dimensin, pero puede eliminarse mediante el atributo noshade. Algunos ejemplos del uso de esta etiqueta se muestra en seguida: PRACTICA <html> <head> <title>Ejemplos de líneas horizontales</title> </head> <body bgcolor="#FFFFFF"> <p>Fin de una seccin</p> <HR> <p>Nueva seccin</p> <p>Slo 40% de ancho</p> <HR WIDTH=40%> <p>Nueva seccin</p> <p> El grosor del separador</p> <HR SIZE=10> <p>Nueva seccin</p> </body> </html> IMGENES Del mismo modo que el texto, imgenes pueden ser insertadas en un documento. Una imgen puede ser reconocida en varios formatos, sin embargo los ms utilizados son los formatos GIF y JPEG. Si se desea utilizar un formato diferente es necesario contar con el agregado especfico. Dicho agregado permite aumentar la capacidad del navegador y leer los nuevos formatos. Para insertar una imagen se debe utilizar la etiqueta <img src="urlimagen">; adems de los diferentes atributos que incluyen: SRC="url-imagen" Indica el nombre y el URL de la imagen. ALT="*" Ocasiona que se despliegue un * en vez de la imagen. Esto ocurrir si el navegador no puede desplegar imgenes o el desplegado ha sido suprimido.
10
ALIGN=TOP Ocasiona que cualquier texto que se despliegue sea alineado con la parte superior de la imagen. ALIGN=BOTTOM. Ocasiona que cualquier texto que se despliegue sea alineado con la parte inferior de la imagen. ALIGN=MIDDLE. Ocasiona que cualquier texto que se despliegue sea alineado con la parte central de la imagen. ALIGN=LEFT Ocasiona que la imagen sea alineada a la izquierda de la pgina. El texto fluye alrededor de la imagen por su lado derecho. ALIGN=RIGHT Ocasiona que la imagen sea alineada a la derecha de la pgina. El texto fluye alrededor de la imagen por su lado izquierdo. HEIGHT=n Fija el alto de la imagen en n pixeles. WIDTH=n Fija el ancho de la imagen en n pixeles. BORDER=yes/no Activa o desactiva el borde de una imagen. PRACTICAS HIPERTEXTO La palabra hipertexto significa literalmente "texto exagerado o excesivo", pero en el ambiente actual de la informtica significa texto interactivo. El hipertexto usa ligas para conectar a dos documentos, pudiendo estar representada por una cadena de texto o una imagen. Cuando se apunta con el ratn a un elemento de hipertexto, el apuntador cambia, regularmente de una flecha a una mano, indicando con ello la posibilidad de navegar a otro documento, cuya localizacin aparece en la barra de mensajes del visualizador (normalmente ubicado en la parte inferior de la ventana). A diferencia de lo que los usuarios de Windows estn acostumbrados, los vnculos o ligas se activan con un slo clic. Incluir Ligas en una pgina Para incorporar una liga dentro de una pgina, se usa el elemento ancla (anchor), cuya sintaxis general se expresa de la siguiente manera: <a href="url-destino">Cadena de texto</a> donde url-destino puede ser un documento ubicado en otro servidor o directorio, o un marcador dentro de la misma pgina.
11
PRACTICAS Imgenes como hipertexto Una imagen pude ser usada como hipertexto de dos formas. En su forma bsica toda la imagen funciona como una liga, mientras que en su forma avanzada, por llamarla de alguna manera, es posible subdividir una imagen en regiones, de tal manera que cada una de estas sea una liga. Para hacer que una imagen funcione como hipertexto escriba lo siguiente: <a href="RUTA DE DOCUMENTO"><img src="RUTA DE IMAGEN"></a> PRACTICAS LISTAS Existen diversos tipos de listas, una lista desordenada puede ser creada con las siguientes marcas: Resultado Marcas de HTML requeridas Elemento uno de la lista Elemento dos de la lista <UL> <LI>Elemento uno de la lista <LI>Elemento dos de la lista </UL> Las listas no ordenadas aceptan un atributo llamado TYPE, el cual puede adquirir los valores de: circle square disc En el siguiente ejemplo se puede observar el uso de estos atributos: <html> <head> <title>Ejemplo de listas no ordenadas</title> </head> <body> <ul type=square> <li>Sistemas Operativos <ul type=circle> <li>MD-Dos <li>Unix </ul> </ul> </body> </html> Una lista ordenada tiene un formato similar, excepto que cada unidad es numerada consecutivamente.
12
1. Elemento uno de la lista 2. Elemento dos de la lista <OL> <LI>Elemento uno de la lista <LI>Elemento dos de la lista </OL> Un atributo de listas es Type que puede tener los siguientes valores TYPE=A: La numeracin de los elementos de la lista va de la A a la Z (maysculas). TYPE=a: La numeracin de los elementos de la lista va de la a a la z (minsculas). TYPE=I: La numeracin de los elementos de la lista se hace en nmeros romanos todos ellos escritos en maysculas. TYPE=i: La numeracin de los elementos de la lista se hace en nmeros romanos todos ellos escritos en minsculas. TYPE=1: La numeracin de los elementos de la lista se hace en nmeros arbigos, que es el valor por omisin. START=n: Comienza la numeracin a partir del nmero especificado. E j emp lo <html> <head> <title>Ejemplo de listas ordenadas</title> </head> <body> <ol type=A> <li>Sistemas Operativos <ol type=a> <li>Monousuarios <ol type=I> <li> MS-DOS <li> Windows </ol> <li>Multiusuarios <ol type=i> <li> Unix <li> Windows NT </ol>
13
</ol> </ol> <ol start=5> <li>Procesadores de Palabras <li>Hojas Electrnicas <li>Editores de Imagen </ol> </body> </html> PRACTICAS TABLAS Las tablas son elementos compuestos de celdas organizadas en renglones y columnas. Celdas simples Una tabla es creada utilizando la etiqueta <TABLE>. La tabla ms simple consiste de una sla celda de datos. La etiqueta <TD> define el inicio de la celda de una tabla. PRACTICA: Texto dentro de una tabla <TABLE BORDER CELLPADDING=2> <TD> Texto dentro de una tabla </TD> </TABLE> Los siguientes componentes adicionales se pueden agregar a la etiqueta <TABLE>: UNITS= Define las unidades utilizadas para definir otros atributos, el default es pixeles. BORDER Especifica que la tabla tendr un borde alrededor de las celdas. El ancho del borde es opcionalmente especificado por el atibuto BORDER=n. CELLPADDING Especifica la separacin alrededor del contenido de la tabla. Si el texto en la celda de datos debe alinearse a la derecha el componente adicional ALIGN=LEFT puede ser aadido a la etiqueta <TD>, por ejemplo: <TD ALIGN=LEFT> Otras alineaciones son: ALIGN=RIGHT, ALIGN=CENTER. Renglones de celdas Un rengln de celdas se puede crear repitiendo la etiqueta <TD>. Texto formateado Marcas de HTML requeridas celda de datos no. 1 celda de datos no. 2 <TABLE BORDER CELLPADDING=2> <TD> celda de datos no. 1 </TD> <TD> celda de datos no. 2 </TD> </TABLE>
14
Para formar una tabla de muchos renglones es necesario insertar la etiqueta <TR> en cada lugar en el que comience un nuevo rengln en la tabla. celda de datos no. 1 celda de datos no. 2 <TABLE BORDER CELLPADDING=2> <TD> celda de datos no. 1 </TD> <TD> celda de datos no. 2 </TD> <TR> <TD> celda de datos no. 3 </TD> <TD> celda de datos no. 4 </TD> </TABLE> celda de datos no. 3 celda de datos no. 4 Encabezados de columnas La etiqueta <TH> puede ser utilizada en lugar de <TD> si la celda es un columna de encabezado, por ejemplo: <TABLE BORDER CELLPADDING=2> <TH ALIGN=LEFT> Mnemonico</TH> <TH ALIGN=LEFT> Expansion </TH> <TR> <TD> HTML</TD> <TD> Hyper Text<BR>Markup Language</TD> </TABLE> HTML HyperText Markup Language Subdivisin de renglones y columnas Los elementos ROWSPAN y COLSPAN de las etiquetas <TD> y <TH> se utilizan para formar celdas de datos que a su vez se dividen en ms celdas de datos, por ejemplo: Lenjuage Encapsulacin <TABLE BORDER CELLPADDING=2> <TH ALIGN=LEFT>Lenguaje</TH> <TH ALIGN=LEFT COLSPAN=2>Encapsulacin</TH> <TR> <TD> Ada 95</TD> <TD ROWSPAN=2>Utiliza</TD> <TD> Clases</TD> <TR> <TD> C++</TD> <TD> Paquetes</TD> </TABLE> Ada 95 Utiliza Clases C++ Paquetes PRACTICAS
15

Texto de Alumnos de HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Texto de Alumnos de HTML

Enviado por

Direitos autorais:

Formatos disponíveis

H

Tarea: Traer en disco una imagen

Você também pode gostar