Hypertext Markup Language HTML

1
Hypertext Markup LanguageHTML
2
OBJETIVOS

• Conocer los fundamentos de HTML
• Escribir HTML usando un editor sencillo
• Escribir HTML usando otra herramienta
• Conocer las marcas HTML
• Visualizar el HTML en un navegador

3
HTML

• HTML es un lenguaje de marcas, sencillo,
  pensado para el intercambio de información en la
  WWW.
• Se trata de una "Definición de Tipo de
  Documento (DTD)" SGML (Standard Generalised
  Markup Language) que contiene un juego de marcas
  con las que se identifican gran parte de los
  elementos que se encuentran en los documentos
  electrónicos típicos.

4
Archivo HTML básico
5
Elementos

• Etiquetas
• ltBRgt
• ltHRgt
• ltPgt
• Pares de etiquetas
• ltEtiquetagt Texto lt/Etiquetagt
• Etiquetas con atributos
• ltEtiqueta Atributo"Valor"gt
• Las etiquetas pueden anidarse

6
Estructura básica

• ltHTMLgt
• Código de la página
• lt/HTMLgt

7
Estructura General

• lt!DOCTYPE HTML PUBLIC version htmlgt
• ltHTMLgt
• ltHEADgt
• ltTITLEgt Titulo de mi Páginalt/TITLEgt
• ...... Información opcional .....
• lt/HEADgt
• ltBODYgt
• .... el texto del documento con marcas....
• lt/BODYgt
• lt/HTMLgt

Cabecera
Cuerpo
8
Reglas Generales

• Los documentos son estructurados
• Nombres de elementos o atributos no sensibles a
• mayúsculas
• Valores de atributos pueden ser sensibles a
  mayúsculas
• Nombres de elementos no pueden contener
  espacios
• Usar comillas para valores de atributos
• El browser destruye e ignora caracteres de
  espacio
• No es un WYSIWYG

9
Reglas Generales

• Puede contener comentarios
• lt!- Comentario -gt
• Anidamiento estricto (bien formado)
• Ignora elementos desconocidos
• Ignora atributos desconocidos
• Los browsers suelen ser permisivos

10
Herramientas para escribir HTML

• Conversores son programas con otra función que
  la de la programación Web pero que permiten
  convertir a HTML
• Son ejemplos de conversores Microsoft Word
  ,Quark XPress y PageMaker

11
Herramientas para escribir HTML

• Asistentes ayudan a crear el código HTML e
  incluyen plantillas de código prefabricadas, por
  ejemplo
• HotDog (Win), HomeSite(Win),HTML Editor
  (Mac), Quanta (Linux, KDE) o Bluefish (Linux,
  GNOME).

12
Herramientas para escribir HTML

• Editores WYSIWYG (What You See Is What You Get,
  lo que ves es lo que obtienes) estos editores
  permiten crear páginas web sin escribir código
  HTML como si se tratase de un programa de dibujo
  por ordenador.
• Algunos ejemplos de este tipo de editores son
  Macromedia Dreamweaver, HotMetal o Microsoft
  Frontpage

13
Elemento HTML
Nombre de La Etiqueta
Nombre del atributo
Etiqueta Final
Valor del atributo
ltH1 ALIGNLEFTgt Encabezado de Ejemplo lt/H1gt
Atributo
Contenido
Etiqueta de Inicio
Elemento HTML
14
Documento HTML con cabecera

• lthtmlgt
• ltheadgt
• Elementos de la cabecera
• lt/headgt
• ... Resto de código de la página ...
• lt/htmlgt

15
Documento HTML con título

• lthtmlgt
• ltheadgt
• lttitlegtMi primera página WEBlt/titlegt
• lt/headgt
• lt/htmlgt

16
Documento HTML con contenido

• lthtmlgt
• ltheadgt
• lttitlegtMi primera página WEBlt/titlegt
• lt/headgt
• ltbodygt
• Hola a todos, como han deducido por el
  titulo esta es la
• primera pagina web que hago, espero que les
• guste. Seguiré mejorando.
• lt/bodygt
• lt/htmlgt

17
Documento HTML con encabezados

• lth1gtEncabezado 1lt/h1gt
• lth2gtEncabezado 2lt/h2gt
• lth3gtEncabezado 3lt/h3gt
• lth4gtEncabezado 4lt/h4gt
• lth5gtEncabezado 5lt/h5gt
• lth6gtEncabezado 6lt/h6gt

18
Uso de etiquetas HTML

• ltHRgt
• Dibujo de líneas horizontales
• ltBRgt
• Escritura de contenido sin tener en cuenta
  espacios en blanco
• nbsp
• ltPgt
• Escritura de párrafos
• Comentarios lt!-- Esto es un comentario --gt

19
Presentación de texto en HTML

• Alineamiento align "center", "left" y "right"
• Espaciado ltbrgt nbsp
• Tipo de letra
• ltBgt, ltIgt, ltTTgt, ltSTRIKEgt, ltBIGgt, ltSMALLgt,
  ltSUBgt, ltUgt
• ltSUPgt, ltSUBgt, ltSTRONGgt, ltEMgt, ltCODEgt,
  ltSAMPgt, ltVARgt
• ltCITEgt, ltDFNgt, ltPREgt
• Tamaño de letra ltFONT SIZE""gt
• Color de letra ltFONT COLOR"RRGGBB"gt

20
Presentación de texto en HTML

• Escritura de caracteres del alfabeto español
• á, é, í, ó, ú, ñ Á, É, Í, Ó, Ú, Ñ
• Escritura de caracteres especiales
• lt, gt, , "
• nnn

21
Presentación de texto en HTML

• Listas
• Numerada u ordenada ltOLgt ltLIgt
• No ordenada ltULgt ltLIgt
• Listas de glosario o de definición ltDLgt ltLIgt
• Menús ltMENUgt ltLIgt
• Listas de directorio ltDIRgt ltLIgt
• Tablas ltTABLEgt, ltTRgt, ltTHgt, ltTDgt

22
Imágenes en HTML

• ltimg srcimage001.gif"gt
• ltIMGgt
• La imagen tiene que estar en un archivo separado
• Ejemplos de tipo de archivo BMP, GIF, JPEG, XPM,
  XBM, PNG, TIFF,

23
Enlaces hipertexto en HTML

• Página en otro directorio dir/subdir/arch
• Uso de anclas
• lta name"nombreAncla"gtComienzolt/a
  gt
• Referencia externa
• lta href"http//www.sitio.com/ancla_enS"gtText
  o sensiblelt/agt

24
Apariencia de una página

• Color de fondo ltbody bgcolor"RRGGBB"gt
• Imágenes de fondo ltbody background"fondo1.jpg"gt
• Imágenes y texto
• lth2gt ltimg srcdibujo.gif"gtTexto lt/h2gt
• Imagen de enlace
• lta href"index.htm"gt
• ltimg src"img/izda.gif"gt
• lt/agt

25
Otras facilidades en HTML

• Uso de frames
• Videos
• Sonido
• Multimedia
• ltA HREFarchivo_multimedia"gt
• Un archivo multimedia
• lt/Agt

26
Otras facilidades en HTML

• Plug-ins
• Cookies
• Applets
• Formularios
• Botones de acción
• Botones de Selección
• Cajas de selección
• Cajas de texto multilínea

27
Bibliografía

• www.w3.org
• http//java.sun.com/applets/index.html

28
Preguntas?