Gua del Estudiante

1HTML Bsico

1 HTML Bsico...................................................................................................................1 1.1 Gua del Estudiante....................................................................................................3 1.1.1 Conceptos Bsicos..............................................................................................3 1.1.2 Gua de Etiquetas HTML....................................................................................4 HTML......................................................................................................................4 HEAD......................................................................................................................4 TITLE......................................................................................................................5 BODY......................................................................................................................5 COMENTARIOS.....................................................................................................6 PRE..........................................................................................................................6 A...............................................................................................................................6 P...............................................................................................................................7 B...............................................................................................................................7 I................................................................................................................................7 BR............................................................................................................................8 HR............................................................................................................................8 H1, H2, H3, H4, H5, H6..........................................................................................8 IMG..........................................................................................................................9 TABLE.....................................................................................................................9 Cellspacing y Cellpadding.....................................................................................10 TR..........................................................................................................................10 TD..........................................................................................................................11 Colspan y Rowspan................................................................................................11 UL..........................................................................................................................13 OL..........................................................................................................................13 LI............................................................................................................................13 Entidades HTML...................................................................................................14 1.1.3 Comandos del CSH de Linux...........................................................................15 Permisologa de Directorios y Archivos utilizando CHMOD...............................15

1.1 Gua del Estudiante En esta seccin se presentarn los conceptos bsicos necesarios para la solucin del laboratorio, as como un conjunto de guas y ayuda adicionales.
1.1.1 Conceptos Bsicos

Un browser es un programa de software que permite interpretar el texto de un documento HTML y presentarlo visualmente, as como proveer una interfaz interactiva al usuario. Un documento HTML est conformado por etiquetas y entidades. Una etiqueta esta formada por atributos, valores y texto. Un atributo permite dar a las etiquetas varias opciones tanto de estructura como de presentacin. La estructura bsica de una etiqueta es como sigue:
<NOMBRE_ETIQUETA ATRIBUTO1=VALOR1 ATRIBUTO2=VALOR2.>TEXTO HTML</NOMBRE_ETIQUETA> Cdigo Fuente 1.1. Estructura bsica de una etiqueta HTML

Donde: NOMBRE_ETIQUETA es una etiqueta HTML vlida (ver cdigo 1.3) ATRIBUTOi representa una opcin vlida para la etiqueta VALORi representa un texto alfanumrico simple TEXTO HTML puede ser un texto HTML (compuesto) conteniendo otras etiquetas y texto alfanumrico. Para que un navegador interprete de manera correcta un documento HTML es necesario seguir ciertos lineamientos para la estructuracin del mismo. Un navegador de Internet lee ciertas etiquetas importantes en un orden preestablecido, tal es el caso de las etiquetas HTML, HEAD y BODY. La etiqueta HTML contiene dentro de s todo el contenido que va a ser mostrado y procesado. Esta etiqueta HTML se divide en dos bloques principales: la cabecera (HEAD) y el contenido (BODY). La cabecera es la parte del documento comprendida entre las etiquetas <head> y </head>. sta contiene el ttulo del documento que se ve en la parte superior del navegador y otra informacin que no se muestra, la cual puede ser de inters para el servidor que guarda las pginas o para los buscadores que tratan de encontrarlas en la Web

El contenido es la parte del documento comprendida entre las etiquetas <body> y </body> y contiene la informacin que queremos que el usuario vea en su navegador. La estructura bsica de un documento HTML se presenta como sigue:
<html> <head>

<title>Ttulo de la Pgina</title> </head> <body> Contenido </body> </html> Cdigo Fuente 1.2. Estructura de un documento HTML

1.1.2

Gua de Etiquetas HTML

A continuacin se presentan las distintas etiquetas bsicas del HTML:

HTML

Indica que se est comenzando o finalizando un documento en HTML Sintaxis:

<html> <head> <title>Ttulo de la Pgina</title> </head> <body> Contenido </body> </html> Cdigo Fuente 1.3. Sintaxis del elemento HTML

HEAD

Delimita el bloque de la cabecera Sintaxis:

<HTML> <HEAD></HEAD> </HTML> Cdigo Fuente 1.4. Sintaxis del elemento HEAD

TITLE

Se utiliza para colocar el titulo de la pgina en la barra de titulo del navegador Sintaxis:
<HEAD> <TITLE><<texto simple>></TITLE> </HEAD> Cdigo Fuente 1.5. Sintaxis del elemento TITLE BODY

Se utiliza para delimitar el rea del contenido del documento HTML Sintaxis:
<body background="<<URL_Imagen>>" bgcolor="<<HexColor>>" text="<<HexColor>>" link="<<HexColor>>" vlink="<<HexColor>>" alink="<<HexColor>>" leftmargin="<<entero>>" topmargin="<<entero>>" rightmargin="<<entero>>" bottommargin="<<entero>>" marginwidth="<<entero>>"> Cdigo Fuente 1.6. Sintaxis del elemento BODY

Donde: Atributo background, grfico de fondo para la pgina Atributo bgcolor, color del fondo (estndar blanco o gris) Atributo text, color del texto (estndar negro) Atributo link, color de los enlaces (estndar azul) Atributo vlink, color de los enlaces visitados (estndar prpura) Atributo alink, color de los enlaces activos (estndar rojo) Atributo leftmargin, tamao del margen izquierdo (estndar 0, compatible con IE1) Atributo topmargin, tamao del margen superior (estndar 0, compatible con IE) Atributo bottonmargin, tamao del margen inferior (estndar 0, compatible con IE) Atributo marginwidth, tamao del margen izquierdo (estndar 0, compatible con NS2) Atributo marginheight, tamao del margen superior (estndar 0, compatible con NS)

1 2

IE = Internet Explorer NS = Netscape

Valor URL_Image representa el url donde se encuentra un archivo de imagen (gif, jpg, png, etc.) Valor HexColor representa un cdigo de color en el formato RGB hexadecimal #x255x255x255 o #FFFFFF

COMENTARIOS

Se llaman comentarios en el mbito de HTML a las notas que el autor o autores ponen en el texto para facilitar su compresin. Estos comentarios no son mostrados por el navegador y por lo tanto sern visibles solo al consultar el texto. Sintaxis:
<!-- <<texto>>--> Cdigo Fuente 1.7. Sintaxis de los comentarios en HTML PRE

La etiqueta PRE permite mantener la alineacin de los datos tales como las tabulaciones y los saltos de lnea originales del texto. Sintaxis:
<pre><<texto>></pre> Cdigo Fuente 1.8. Sintaxis del elemento PRE A

Permite incorporar un hiperenlace. Sintaxis:

<a name="<<texto>>" id="<<texto>>" href="<<protocolo>><<url>>" target="<<destinos>>" title="<<texto>>"><<texto HTML>></a> Cdigo Fuente 1.9. Sintaxis del elemento A

Donde: Atributo name, identificador del hiperenlace (compatible con NS) Atributo id, identificador del hiperenlace (compatible con IE y NS) Atributo href, url del hiperenlace Atributo target, modificador o identificador de ventana de la entidad receptora del hiperenlace del hiperenlace. Atributo title, permite categorizar el hiperenlace, algunos navegadores utilizan este el valor de este atributo como texto emergente (tooltip) del hiperenlace. Valor Protocolo, cualquier representacin de un protocolo compatible:

o o o o o o o o o Valor o o o

http:// https:// ftp:// gopher:// file:// telnet:// wais:// news:// mailto:// destinos, al utilizar estos modificadores el hiperenlace se abrir en: _self, la misma ventana o marco (frame) _top, la ventana activa _parent, el marco que nos contiene o la ventana que creo la ventana actual. o _blank, en una ventana nueva o <<texto>>, una ventana con el nombre <<texto>>

Se utiliza para darle formato a los prrafos Sintaxis

<p align="<<alineacin>>"><<texto HTML>></p> Cdigo Fuente 1.10. Sintaxis del elemento P

Donde: Atributo align, alineacin del texto HTML Valor alineacin, puede ser: o Left, alineacin izquierda o Right, alineacin derecha o Center, alineacin centrada o Justify, alineacin justificada (compatible con navegadores versin 4 o superior)
B

Se utiliza para colocar en negritas uno o varios caracteres. Sintaxis:

<b><<texto>></b> Cdigo Fuente 1.11. Sintaxis del elemento B I

Se utiliza para colocar en itlicas uno o varios caracteres. Sintaxis:

<i><<texto>></i> Cdigo Fuente 1.12. Sintaxis del elemento I BR

Se utiliza para insertar un salto de lnea Sintaxis:

<br> <br/> <br></br> Cdigo Fuente 1.13. Sintaxis del elemento BR HR

Esta etiqueta permite trazar lneas horizontales o dibujar un rectngulo Sintaxis:

<hr align="<<alineacin>>" width="<<entero>>" size="<<entero>>" color="<<HexColor>>" noshade> Cdigo Fuente 1.14. Sintaxis del elemento HR

Donde: Atributo Atributo Atributo Atributo IE) Atributo

align, alineacin de la lnea o rectngulo width, cantidad de pxeles de ancho para la lnea o rectngulo size, cantidad de pxeles de alto para la lnea o rectngulo color, color hexadecimal de la lnea o rectngulo (compatible con noshade, no presenta el borde decorativo (ya no se utiliza)

H1, H2, H3, H4, H5, H6

Representa a los ttulos que poseen un estilo de presentacin predefinido. Sintaxis:

<h1 align="<<alineacion>>"><<textoHTML>></h1> <h2 align="<<alineacion>>"><<textoHTML>></h2> ... Cdigo Fuente 1.15. Sintaxis de los elementos H1, H2, H3, H4, H5 y H6

Donde Atributo align, alineacin del contenido de la etiqueta

IMG

Permite insertar un grfico en el documento. Sintaxis:

<img src="<<url>>" alt="<<text>>" name="<<text>>" id="<<text>>" width="<<entero>>" height="<<entero>>" hspace="<<entero>>" vspace="<<entero>>" border="<<entero>>" align="<<alineacin>>"> Cdigo Fuente 1.16. Sintaxis del elemento IMG

Donde: Atributo Atributo Atributo Atributo Atributo Atributo Atributo Atributo Atributo
TABLE

src, url del grafico alt, utilizado como informacin emergente (tooltip) de la imagen name, identificador de la imagen (compatible con IE y NS) id, identificador de la imagen (Compatible con IE) width, tamao de ancho en pxeles de la presentacin imagen height, tamao de alto en pxeles de la presentacin imagen hspace, espacio horizontal entre el texto y la imagen vspace, espacio vertical entre el texto y la imagen align, alineacin de la imagen

Permite la creacin de tablas. Se definen mediante el uso de filas y celdas. Sintaxis:

<table width="<<rel-abs>>" height="<<rel-abs>>" border="<<entero>>" cellspacing="<<entero>>" cellpadding="<<entero>>" align="<<alineacion>>" bordercolor="<<HexColor>>" background="<<url>>" bgcolor="<<HexColor>>"> Cdigo Fuente 1.17. Sintaxis del elemento TABLE

Donde: Atributo width, ancho de la tabla Atributo height, alto de la tabla

Atributo border, tamao del borde de la tabla en pxeles Atributo cellspacing, espaciado entre las celdas Atributo cellpadding, espaciado entre las celdas y el contenido de las mismas Atributo align, alineacin de la tabla Atributo bordercolor, color hexadecimal del borde Atributo background, url del grafico a mostrar en el fondo Atributo bgcolor, color hexadecimal del fondo de la tabla Valor rel-abs, indica el ancho de la tabla como un valor relativo o absoluto. Los valores relativos se indican como porcentajes y los valores absolutos como pxeles. Un valor relativo de 50% le indica al procesador del navegador que la tabla ocupara la mitad del rea de la pgina (de ancho o de alto dependiendo de a que atributo se aplique)

Cellspacing y Cellpadding

Estos atributos controlan el espaciado entre y dentro de las celdas. La siguiente figura presenta una explicacin grafica de su funcionamiento.

Figura 1.1 Relacin entre cellpacing y cellpadding TR

Permite definir una fila de una tabla Sintaxis:

<tr align="<<alineacin>>" valign="<<alineacionv>>" bgcolor="<<HexColor>>"><<textoHTML>></tr> Cdigo Fuente 1.18. Sintaxis del elemento TR

Donde:

Atributo align, alineacin horizontal del contenido de la fila

Valor o o o o

Atributo valign, alineacin vertical del contenido de la fila Atributo bgcolor, color de fondo para la fila alineacin vertical, puede ser: top, alineacin izquierda middle, alineacin derecha bottom, alineacin abajo baseline, alineacin con el texto

TD

Permite definir una celda de una fila Sintaxis:

<td width="<<rel-abs>>" height="<<rel-abs>>" colspan="<<entero>>" rowspan="<<entero>>" align="<<alineacin>>" valign="<<alineacionv>>" bgcolor="<<HexColor>>"></td> Cdigo Fuente 1.19. Sintaxis del elemento TD

Donde: Atributo Atributo Atributo Atributo Atributo Atributo Atributo

height, alto de la celda width, ancho de la celda colspan, cuantas celdas horizontales deben expandirse o unirse rowspan, cuantas celdas verticales deben expandirse o unirse align, alineacin horizontal del contenido de la celda valign, alineacin vertical del contenido de la celda bgcolor, color de fondo para la celda

Colspan y Rowspan

El siguiente ejemplo muestra (con la ayuda del borde de tabla como las definiciones de celdas que se expanden en mas de una fila o columna, afectan las definiciones de otras celdas. Considere la siguiente definicin de tabla:
<TABLE border="1"> <TR><TD>1 <TD rowspan="2">2 <TD>3 <TR><TD>4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE> Cdigo Fuente 1.20. Definicin de tabla de ejemplo rowspan

La celda 2 se expande hacia en la primera y segunda fila, la definicin de la segunda fila ser tomada en cuenta, no as la de la tercera fila. As, el Segundo

TD de la segunda fila realmente define la celda de la tercera fila. Visualmente, la tabla puede ser vista en un modo texto como:

------------| 1 | 2 | 3 | ----| |---| 4 | | 6 | ----|---|---| 7 | 8 | 9 | ------------Figura 1.2. Representacin basada en texto del rowspan

En un navegador de Internet se ver de la siguiente manera

Figura 1.3. Representacin visual del rowspan

De manera similar, en la siguiente definicin de tabla:

<TABLE border="1"> <TR><TD>1 <TD>2 <TD>3 <TR><TD colspan="2">4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE> Cdigo Fuente 1.21. Definicin de tabla de ejemplo colspan

la celda 4 se expande dos columnas, as que el segundo TD de la fila realmente define a la tercera celda 6:
------------| 1 | 2 | 3 | --------|---| 4 | 6 | --------|---| 7 | 8 | 9 | ------------Figura 1.4 Representacin basada en texto del rowspan

En un navegador de Internet se ver de la siguiente manera:

Figura 1.5. Representacin visual del colspan

UL

Permite definir una lista no ordenada

OL

Permite definir una lista ordenada Sintaxis: <ol start="1"></ol>

LI

Permite definir un tem en una lista ordenada o no ordenada Para las listas ordenadas se cuenta con la siguiente sintaxis:
<li value="<<tipo>>"><<textoHTML>></li> Cdigo Fuente 1.22. Sintaxis para el elemento LI en listas ordenadas

En listas ordenadas se puede definir que tipo de orden se quiere: nmeros o letras. En la tabla 1.1 se observan los distintos valores que pueden tener el valor <<tipo>>: tipo 1 a A i I Estilo de Numeracin Nmeros Arbigos Alfanumricos minsculas Alfanumricos maysculas Nmeros romanos minsculas Nmeros romanos maysculas

1, 2, 3, ... a, b, c, ... A, B, C, ... i, ii, iii, ... I, II, III, ...

Tabla 1.1. Valores posibles para un tem de una lista ordenada.

Para las listas no ordenadas se cuenta con la siguiente sintaxis:

<li type="<<tipo>>"><<textoHTML>></li> Cdigo Fuente 1.23. Sintaxis para el elemento LI en listas no ordenadas

En listas ordenadas se puede definir que tipo de adorno que se quiere. En la tabla 1.2 se observan los distintos valores que pueden tener el valor <<tipo>>: Type Disc Circle square Estilo de Numeracin Disco, punto o vieta Circulo o vieta abierta Cuadrado o vieta cuadrada

Tabla 1.2. Valores posibles para un tem de una lista no ordenada.

Entidades HTML

Existen varias implementaciones de navegadores para muchos sistemas operativos que trabajan con codificacin de caracteres diferentes. Tenemos por ejemplo que los navegadores que se ejecutan sobre los sistemas Windows de Microsoft en castellano trabajan con unos cdigos de caracteres distintos a los sistemas en ingls; asimismo los sistemas Unix trabajan con cdigos de caracteres distintos. Por lo que se hace poco probable que si escribimos un carcter como , ste sea visto de igual manera en todas las implementaciones de los distintos navegadores. Las entidades de HTML nos permiten codificar estos caracteres como caracteres especiales. El formato estndar de una entidad HTML es: &<<entidad>>;, se podra describir como un ampersand seguido de un texto o identificador de la entidad y un punto y coma. En la siguiente tabla podemos ver algunas entidades HTML: Entidad &amp; &aacute; &eacute; &iacute; &oacute; &uacute; &ntilde; Visualizacin &

&nbsp; &#225; &#250

(espacio)
Tabla 1.3. Algunas entidades de HTML

1.1.3

Comandos del CSH de Linux

Permisologa de Directorios y Archivos utilizando CHMOD

Los archivos en linux poseen informacin complementaria, adems de un nombre, una cierta cantidad de bytes, fecha y un formato. Los archivos de plataformas Unix tienen un propietario, permisos y un grupo. Linux posee un comando que nos permite cambiar los atributos de permisos: chmod. Al listar el contenido de un directorio podemos obtener algo como sigue:
-rw-rw-r-prueba.html 1 root root 12334 Jan 2 03:51

El primer lugar pertenecen al tipo de archivo (comnmente si se encuentra una "d" es un directorio, si se encuentra un "-" puede ser un archivo, enlace, etc), los segundos tres lugares pertenecen a los permisos otorgados al dueo del archivo (rw-), los segundos tres lugares a los otorgados al grupo (rw-) y los ltimos tres lugares a los permisos de otros usuarios que no pertenecen al grupo (r--). Sintaxis:
chmod [opciones] [(u) (o) (g) (a)] [(+) (-) (=)] [(r) (w) (x)] [archivos]

Con esto indicamos que parte de los usuarios queremos modificar: u g o a El dueo del file Otros usuarios que formen parte del grupo del file Los dems usuarios Todos los usuarios

Modificadores del acceso: + = Agrega los permisos indicados Quita los permisos indicados Aade los permisos indicados a un archivo

Y por ultimo estas letras indican los permisos:

r w x

Permiso de lectura Permiso de escritura Permiso de ejecucin

Sintaxis [opciones] -f -R -c -v No muestra los errores Agrega los cambios a un directorio y su contenido Muestra los cambios realizados Explica que acciones realizo sobre el archivo

El CHMOD usa con base octal (no decimal) y a travs de esta tablita, el uso se puede simplificar: Permiso Solo lectura Solo escritura Solo ejecucin Lectura y escritura Lectura y ejecucin Lectura, escritura y ejecucin Numrico 4 2 1 6 5 7 Carcter r--w--x rwr-x rwx

Entonces, si tenemos un archivo "prueba.html" con los permisos -rwxrwxrwx Si ejecutamos...

chmod 727 prueba.html

Es lo mismo que...
chmod u-rx prueba.html

Alternativamente, podemos darles todos los permisos a todos los usuarios:

chmod 777 prueba.html

El primer 7 afecta al dueo, el segundo al grupo y el tercero a otros usuarios.