Laboratorio Estructuras de datos

1
Laboratorio Estructuras de datos
2
Práctica no. 1

• Introducción a HTML
• Familiarizarse con los estándares de Internet
• Realizar una página utilizando el lenguaje HTML

3
Estándares de Internet y especificaciones

• Son necesarios para transferir información.
• Incluyen protocolos como FTP para transferencia
  de archivos, HTTP para distribuir información en
  la WEB.
• Todos estos son resultado de organizaciones y
  grupos de trabajo
• ISO (International Organization for
  Standardization), IETF (Internet Engineering Task
  Force), W3C (World Wide Web Consotium)

4
URL

• Uniform Resource Locator
• Está formado por la dirección del servidor donde
  se encuentra la página o la información, dónde se
  encuentra y qué protocolo se utilizará.
• http//www.lci.ulsa.mx/Cursos
• http//200.13.89.248080/Catedra/index.jsp

5
Características de URL

• No es case sensitive
• Para una URL se pueden usar la letras, números y
  los siguientes caracteres
• ! - _ ( ) .

6
Tabla de significados de caracteres usados en URL
Separador http//tvp.com/vp1.html
// Indica que es un protocolo reconocido
/ Separa una ruta del nombre del host y su puerto
Usado al inicio de la ruta para indicar que el recurso está en el directorio público de html http//www.aloha.com/william
Para sustituir a caracteres especiales /english/Book20Table
_at_ Separa el nombre de usuario del nombre del host mvilla_at_lci.ulsa.mx
? Usado en la ruta para especificar el inicio de un string de query /usr/cgi-bin/useit.p1?keyword
Para consultas en vez de espacios
Separa una llave en una búsqueda dentro de una consulta
En consultas para separar llaves y valores
7
HTML

• Hiper
• Text
• Markup
• Language

8
HTML

• Permite controlar aspectos de diseño de texto e
  imágenes. (tamaño de letra, color, tamaño de
  imágenes, etc.)

9
Java y HTML

• Con Java se pueden crear documentos dinámicos
  llamados applets.
• Son programas que se ejecutan en el momento de
  mostrar la página WEB.

10
Crear un documento HTML

• Los documentos HTML se dividen en tres partes
  bien diferenciadas
• La Cabecera de tipo de documento. La usa el
  software para saber la versión de HTML que se
  está usando (no visible).
• La Cabecera del documento (document HEADer).
  Usada para dar información sobre el documento (no
  visible).
• El Cuerpo del documento (document BODY). Es la
  parte principal del documento, la parte que el
  usuario ve.
• ltHTMLgt
• ltHEADgt
• .
• .
• lt/HEADgt
• ltBODYgt
• .
• .
• lt/BODYgt
• lt/HTMLgt

Directiva o Tag. Códigos especiales contenidos en
un documento
11
Cabecera del documento ltHEADgt

• ltTITLEgt. Título del documento
• ltBASEgt. URL base del documento
• ltISINDEXgt
• ltLINKgt
• ltMETAgt
• ltNEXTIDgt

12
ltTITLEgt lt/TITLEgt

• No es visible dentro de la página web, pero
  muchos visualizadores lo muestran en alguna parte
  (barra de títulos de Windows). Tambien es usado
  como el título por defecto para las entradas de
  las hotlist'' o bookmark'' que el usuario va
  almacenando. Nota Coherencia.
• Para definir el título, se hará dentro de la
  directiva HEAD y utilizando la directiva
  ltTITLEgt...lt/TITLEgt
• ltHEADgt
• ltTITLEgtIntroducción a HTMLlt/TITLEgt
• lt/HEADgt

13
ltBASEgt

• Establece una ruta por omisión.
• ltBASE HREF"D\Clases\ANAHUAC\Estructuras de
  datos\"gt

14
Párrafos y salto de línea

• ltPgtEste es mi primer párrafo. Aunque escriba este
  texto en otra línea, seguirá perteneciendo al
  mismo párrafo.lt/Pgt ltPgtEste es mi segundo
  párrafo.lt/Pgt El usuario verá
• Este es mi primer párrafo. Aunque escriba este
  texto en otra línea, seguirá perteneciendo al
  mismo párrafo.
• Este es mi segundo párrafo.
• ltPgtSe verá la siguiente linealtBRgt en otra
  linea.lt/Pgt El usuario verá
• Se verá la siguiente líneaen otra línea.

15
Centrado, parpadeo, añadir comentarios y líneas
de separación

• ltCENTERgtlt/CENTERgt
• ltBLINKgt lt/BLINKgt
• lt!-- --gt En cada línea de texto que se
  quiera comentar.
• ltHRgt Crea una línea divisoria. No requiere
  cierre.

16
Entidades

• Proporcionan un método para incluir caracteres
  especiales o reservados dentro de un documento
• Caracteres internacionales (ej. caracteres
  acentuados)
• Símbolos tipográficos
• Símbolos especiales para HTML

17
Entidades
CARÁCTER ENTIDAD DESCRIPCION
lt lt Menor que
gt gt Mayor que
amp Ampersan
Á aacute a agudo
Á Aacute A agudo
 acirc a circunflejo
 Acirc A circunflejo
À agrave a grave
À Agrave A grave
Ñ ntilde n tilde
Ñ Ntilde N tilde
18
Formatos a texto

• Estilos lógicos
• Estilos físicos

19
Estilos lógicos

• ltDFNgt
• para una palabra que está siendo definida.
  Normalmente aparece en italics.
• ltEMgt
• para dar énfasis. Usualmente aparece en italics
  (Cuidado con el perro!)
• ltCITEgt
• para títulos de libros, películas, etc.
  Normalmente aparece en italics.
• ltCODEgt
• Para códigos de computador. Aparece con un
  formato fijo.
• ltKBDgt
• para entradas desde el teclado. Aparecerá en un
  formato fijo y en negrita, pero muchos
  visualizadores lo escriben en otro formato
• ltSAMPgt
• para mensajes estándar de computadores. Se ve en
  formato fijo.
• ltSTRONGgt
• para mayor énfasis. Normalmente aparece en
  negrita.
• ltVARgt
• para una variablemetasintáctica'', donde el
  usuario debe reemplazarlo por un elemento
  específico (rm filename borra el fichero.)

20
Estilos físicos

• ltBgt texto en negrita
• ltIgt texto en itálica

21
Listas marcadas

• Para hacer una lista, se debe utilizar la
  directiva ltULgt...lt/ULgt mientras que, para cada
  elemento de la lista debe utilizarse la directiva
  ltLIgt...lt/LIgt
• ltULgtltLIgtGrupo de cuerdalt/LIgtltLIgtGrupo de
  vientolt/LIgtltLIgtGrupo de percusioneslt/LIgtltLIgtGrup
  o de voceslt/LIgtlt/ULgt

22
Lista enumerada

• Para hacer una lista enumerada, se deberá
  especificar con la directiva ltOLgt...lt/OLgt. Cada
  elemento de la lista estará contenida entre
  ltLIgt...lt/LIgt
• ltOLgtltLIgtEstá conectado a la corriente?lt/LIgtltLIgtE
  stá el interruptor a ON?lt/LIgtltLIgtEstá la
  pantalla encendida?lt/LIgtltLIgtEstá la linea de
  alimentación caida?lt/LIgtlt/OLgt

23
Listas de definiciones

• Las listas de definiciones se usan para formatear
  un conjunto de palabras con sus correspondientes
  descripciones.
• ltBgt
• Negrita (bold).
• ltIgt
• Cursiva (italic).
• Para formatear una lista de descripciones se
  usarán las directivas ltDLgt...lt/DLgt. Cada elemento
  debe especificarse entre ltDTgt...lt/DTgt. Cada
  definición debe especificarse entre ltDDgt...lt/DDgt.
  
• ltDLgtltDTgtltBgtlt/DTgtltDDgtNegrita (bold).lt/DDgtltDTgtltIgt
  lt/DTgtltDDgtCursiva (italic).lt/DDgtlt/DLgt

24
Ligas a otros documentos

• Se especifica el texto de enlace utilizando la
  directiva Anchor ltA.
• Se especifica el enlace
• El atributo HREF (hypertext reference) es un
  enlace a otro objeto. Puede ser desde un enlace a
  otra parte del documento (referencias locales)
  hasta un enlace a un documento en otra máquina
  diferente.
• Para crear un enlace o referencia hipertexto, se
  utilizará la siguiente plantilla
• ltA HREF"introHTML.html"gtTexto de enlace.
  Indicelt/Agt
• El usuario veráTexto de enlace. Indice

25
Investigación para alumnos

• Concepto de Hipertexto
• http//www.ldc.usb.ve/abianc/hipertexto.htmlDefi
  niciones
• Buscar sitios en Internet (www.bravenet.com) para
  crear una página de manera gratuita y crear su
  propia página con una portada.
• http//www.reyvilmar.bravehost.com/
• Si es posible agregar la página creada en el
  laboratorio.