Universidad de Deusto ESIDE Curso wx Python Dr

Universidad de Deusto. . ESIDE Curso wx. Python Dr. Diego Lz. de Ipiña Gz. de Artaza http: //paginaspersonales. deusto. es/dipina Cursos de Julio ESIDE, 14 Julio

Universidad de Deusto. . ESIDE Contenidos n n Introducción wx. Python: cross-platform GUI toolkit n n n n Primeros pasos Controles Eventos Dibujando en wx. Python wx. Glade Ejemplo: Tres en Raya modo gráfico Conclusión

Universidad de Deusto. . ESIDE Programación de GUIs en Python n Tkinter es la GUI toolkit que por defecto viene con Python (http: //www. python. org/doc/current/lib/module. Tkinter. html) n n n Basada en Tcl/tk, no tiene apariencia nativa Es lenta pero su uso es muy sencillo Pmw (Python meta widgets) (http: //pmw. sourceforge. net/) n n Componentes más elaborados encima de Tkinter Existen otras toolkits para generación de GUIs: n wx. Python (http: //www. wxpython. org/) n n Pythonwin (http: //www. python. org/windows/pythonwin/) n n n Apariencia nativa, basado en wx. Widgets (multiplaforma), muy rápida Solamente para Windows, usa directamente la API de Windows Py. GTK (http: //www. pygtk. org/) Py. Qt (http: //www. riverbankcomputing. co. uk/pyqt/)

Universidad de Deusto. . ESIDE Ejemplo Tkinter I # gui/tkinterwatch. py from Tkinter import * import time, sys class Stop. Watch(Frame): """ Implements a stop watch frame widget. """ def __init__(self, parent=None, **kw): Frame. __init__(self, parent, kw) self. _start = 0. 0 self. _elapsedtime = 0. 0 self. _running = 0 self. timestr = String. Var() self. make. Widgets() def make. Widgets(self): """ Make the time label. """ l = Label(self, textvariable=self. timestr) self. _set. Time(self. _elapsedtime) l. pack(fill=X, expand=NO, pady=2, padx=2) def _update(self): """ Update the label with elapsed time. """ self. _elapsedtime = time() - self. _start self. _set. Time(self. _elapsedtime) self. _timer = self. after(50, self. _update) def _set. Time(self, elap): """ Set the time string to Minutes: Seconds: Hundreths """ minutes = int(elap/60) seconds = int(elap - minutes*60. 0) hseconds = int((elap - minutes*60. 0 - seconds)*100) self. timestr. set('%02 d: %02 d' % (minutes, seconds, hseconds))

Universidad de Deusto. . ESIDE Ejemplo Tkinter II def Start(self): """ Start the stopwatch, ignore if running. """ if not self. _running: self. _start = time() - self. _elapsedtime self. _update() self. _running = 1 def Stop(self): """ Stop the stopwatch, ignore if stopped. """ if self. _running: self. after_cancel(self. _timer) self. _elapsedtime = time() - self. _start self. _set. Time(self. _elapsedtime) self. _running = 0 def Reset(self): """ Reset the stopwatch. """ self. _start = time() self. _elapsedtime = 0. 0 self. _set. Time(self. _elapsedtime) if __name__ == '__main__': root = Tk() sw = Stop. Watch(root) sw. pack(side=TOP) Button(root, text='Start', command=sw. Start). pack(side=LEFT) Button(root, text='Stop', command=sw. Stop). pack(side=LEFT) Button(root, text='Reset', command=sw. Reset). pack(side=LEFT) Button(root, text='Quit', command=sys. exit(0)). pack(side=LEFT) root. mainloop()

Universidad de Deusto. . ESIDE Ejemplo de GUI con Pmw

Universidad de Deusto. . ESIDE Introducción a wx. Python n n Basada en la toolkit wx. Widgets (http: //www. wxwidgets. org/): Creada para proveer una manera barata y flexible de maximizar la inversión realizada en el desarrollo de GUIs n n Hasta Febrero del 2004, wx. Widgets era conocida como wx. Windows, pero Microsoft “sugirió” un cambio de nombre Esconde al programador de la complejidad de C++ y permite el acceso a la misma funcionalidad desde Python n Implementada como un módulo de extensión Python que funciona como un wrapper alrededor de wx. Widgets

Universidad de Deusto. . ESIDE Características wx. Python n Creada por Robin Dunn, beneficiándose del excelente trabajo de Julian Smart en wx. Widgets n n Multiplataforma, presencia nativa, alto rendimiento gráfico Basada en la API C++ wx. Widgets creada en 1992 (http: //www. wxwidgets. org) Alternativa capaz y sencilla a MFC y Windows. Forms en Windows o GTK y Qt en Linux wx. Widgets + Python = wx. Python (creada en 1996) n n Permite realizar interfaces gráficas complicadas de una forma sencilla Combina eficiencia, sencillez de uso e independencia de la plataforma n Escribimos código una sola vez y su presencia se adapta a la de la plataforma donde la aplicación es ejecutada.

Universidad de Deusto. . ESIDE wx. Widgets n n Objetivo Manera barata y sencilla de maximizar el desarrollo de aplicaciones gráficas Es la única que cumple los siguientes requisitos: n n Bajo precio Open source API asequible Soporte de varios compiladores

Universidad de Deusto. . ESIDE Características wx. Widgets n n n Bajo coste (gratis) Fuentes disponibles. Disponible en todas las plataformas más populares. Trabaja con todos los compiladores más populares de C++ y Python Más de 50 programas de ejemplos Más de 100 páginas de documentación imprimible y on-line Permite la generación de documentación Windows, HTML y Word RTF con Text 2 RTF Fácil de usar, API orientada a objetos. Mecanismo de eventos flexible. Llamadas gráficas incluyen líneas, rectángulos rendondeados, splines, etc. Incluye manejadores de disposición (layout managers).

Universidad de Deusto. . ESIDE Características wx. Widgets n n n Controles avanzados como paneles multipestaña, árboles, etc. Genera Post. Script en UNIX y estándar MS Windows printing Soporta MDI (Multiple Document Interface) Puede usarse para crear DLLs bajo Windows o. so en Unix Diálogos avanzados: ficheros, impresión, colores Una API para la generación de ayuda. Ventana HTML disponible Editor de diálogos Soporte para la comunicación en red mediante sockets y librerías de multi-threading. Procesamiento de imágenes independiente de la plataforma. Soporte para cualquier tipo de ficheros (BMP, PNG, JPEG, GIF, XPM, PNM, PCX).

Universidad de Deusto. . ESIDE Instalación wx. Python n En Windows: n n n En Linux: n n Prerrequisito requiere que hayas instalado Python previamente En http//www. wxpython. org/downloads encontramos el ejecutable wx. Python 2. 6 -win 32 -unicode-2. 6. 1. 0 py 24. exe Depende de las librerías glib y gtk+ Requiere el uso de la librería compartida wx. GTK Podemos encontrar binarios para Fedora y Mandrake Para más detalles: http: //wxpython. org/download. php#binaries

Universidad de Deusto. . ESIDE Programando con wx. Python n n En wx. Python todas las clases están definidas dentro del módulo wx, que debe importarse en toda aplicación Para crear una aplicación en wx. Python hay que crear una clase que derive de wx. App y sobreescriba el método App. On. Init n n n Devuelve True o False, indicando si el procesamiento debería continuar o no App. Set. Top. Window sirve para indicar cuál será la ventana principal Toda aplicación está formada al menos de un Frame o un Dialog Los marcos pueden contener otros paneles, controles y barras de menús y herramientas (Menu. Bar y Tool. Bar ) y línea de estado (Status. Bar) Para finalizar una aplicación se puede invocar a wx. Exit(), aunque es mejor gestionar el evento wx. Close. Event

Universidad de Deusto. . ESIDE Programando con wx. Python n n Los marcos y diálogos contienen controles: Button, Check. Box, Choice, List. Box, Radio. Box y Slider, . . . Los controles derivan de la clase base Control, la cual deriva de Window Existen diálogos predefinidos: Message. Dialog o File. Dialog A través del programa wx. Pythondemo. py se pueden ver demos n Vienen acompañadas de código fuente

Universidad de Deusto. . ESIDE Ejemplo Hola Mundo Básico # wx. Python. Hola. Mundo. Basico. py import wx app = wx. Py. Simple. App() frame = wx. Frame(None, -1, "Hola Mundo Básico") frame. Show(True) app. Main. Loop()

Universidad de Deusto. . ESIDE Ejemplo Hola. Mundo wx. Python I #!/usr/bin/env python import wx class Mi. Marco(wx. Frame): """Clase frame que visualiza una imagen. """ def __init__(self, imagen, padre=None, id=-1, pos=wx. Default. Position, titulo='Ongietorriak wx. Python-ra!'): """Crea una instancia de Frame y visualiza una imagen. """ temp = imagen. Convert. To. Bitmap() tamano = temp. Get. Width(), temp. Get. Height() wx. Frame. __init__(self, padre, id, titulo, pos, tamano) self. bmp = wx. Static. Bitmap(self, -1, temp)

Universidad de Deusto. . ESIDE Ejemplo Hola. Mundo wx. Python II class Mi. Aplic(wx. App): """La clase aplicacion. """ def On. Init(self): wx. Init. All. Image. Handlers() imagen = wx. Image('semanaeside. jpg', wx. BITMAP_TYPE_JPEG) self. mi. Marco = Mi. Marco(imagen) self. mi. Marco. Show() self. Set. Top. Window(self. mi. Marco) return True if __name__ == '__main__': mi. Aplic = Mi. Aplic() mi. Aplic. Main. Loop()

Universidad de Deusto. . ESIDE Explicación Hola. Mundo n n n La clase App deriva de wx. App La invocación al método Main. Loop() hace que empiece a escuchar eventos de ratón y teclado En On. Init se crean los elementos gráficos de la aplicación wx. Init. All. Image. Handlers() inicializa los gestores de imágenes Creamos un imagen, un marco Mi. Marco, visualizamos el marco y hacemos que sea la ventana principal En la clase Mi. Marco le asignamos como atributo bmp el contenido de la imagen utilizada.

Universidad de Deusto. . ESIDE Manejo de eventos en wx. Python n Todo control (derivado de wx. Window) define una serie de eventos que se lanzan cuando el usuario interactúa sobre ellos n n Mirar documentación de wx. Widgets (Event Handling Overview) wx. Python define por cada control una tabla de eventos que asocia un tipo de evento con un gestor del mismo El segundo parámetro es de tipo wx. Event conteniendo su tipo, identificador, timestamp, referencia al objeto generado, etc. . wx. EVT_BUTTON(self, self. boton. Nuevo. Usuario. Get. Id(), self. On. Nuevo. Usuario). . . def On. Nuevo. Usuario(self, evt): # código para crear nuevo usuario n n Ahora también se puede hacer lo siguiente: n n Las funciones EVT_* son instancias de wx. Py. Event. Binder Ejemplo: n n n self. Bind(wx. EVT_SIZE, self. On. Size) self. Bind(wx. EVT_BUTTON, self. On. Button. Click, the. Button) self. Bind(wx. EVT_MENU, self. On. Exit, id=wx. ID_EXIT)

Universidad de Deusto. . ESIDE Gestores de posicionamiento en wx. Python n n Representados por wx. Sizer y sus descendientes en la jerarquía de clases de wx. Python Definen posicionamiento de controles en diálogos, independientes de la plataforma, teniendo en consideración las diferencias en tamaño y estilo de los controles individuales n n Grid. Sizer: dispone los controles en una matriz donde las celdas tienen el mismo tamaño Box. Sizer: dispone controles en una fila o columna bsizer = wx. Box. Sizer(wx. VERTICAL) n Otros disponibles son: Flex. Grid. Sizer, Static. Box. Sizer, Notebook. Sizer top. Sizer = wx. Box. Sizer(wx. HORIZONTAL) top. Sizer. Add(nombre. Usuario. Label, 0, wx. GROW|wx. ALL, 4) top. Sizer. Add(self. nombre. Usuario. Txt. Ctrl, 0, wx. GROW|wx. ALL|wx. ALIGN_RIGHT , 4) bsizer. Add(top. Sizer, 0, wx. GROW|wx. ALL, 4) bsizer. Fit(self) self. Set. Sizer(bsizer)

Universidad de Deusto. . ESIDE Generación de Ayuda n Las clases Help y Help. Controller permiten añadir ayuda a tus aplicaciones.

Universidad de Deusto. . ESIDE Programando un Editor # ejemplo. Editor 1. py import wx class Main. Window(wx. Frame): """ We simply derive a new class of Frame. """ def __init__(self, parent, id, title): wx. Frame. __init__(self, parent, -4, title, size = ( 200, 100), style=wx. DEFAULT_FRAME_STYLE|wx. NO_FULL_REPAINT_ON_RESIZE) self. control = wx. Text. Ctrl(self, 1, style=wx. TE_MULTILINE) self. Show(True) app = wx. Py. Simple. App() frame = Main. Window(None, -1, "Small editor") frame. Show(True) app. Main. Loop()

Universidad de Deusto. . ESIDE Editor con Menú # ejemplo. Editor 2. py import wx ID_ABOUT=101 ID_EXIT=110 class Main. Window(wx. Frame): def __init__(self, parent, id, title): wx. Frame. __init__(self, parent, -4, title, size = (200, 100), style=wx. DEFAULT_FRAME_STYLE|wx. NO_FULL_REPAINT_ON_RESIZE ) self. control = wx. Text. Ctrl(self, 1, style=wx. TE_MULTILINE) self. Create. Status. Bar() # A Statusbar in the bottom of the window # Setting up the menu. filemenu= wx. Menu() filemenu. Append(ID_ABOUT, "&About", " Information about this program") filemenu. Append. Separator() filemenu. Append(ID_EXIT, "E&xit", " Terminate the program") # Creating the menubar. menu. Bar = wx. Menu. Bar() menu. Bar. Append(filemenu, "&File") # Adding the "filemenu" to the Menu. Bar self. Set. Menu. Bar(menu. Bar) # Adding the Menu. Bar to the Frame content. self. Show(True) app = wx. Py. Simple. App() frame = Main. Window(None, -1, "Sample editor") frame. Show(True) app. Main. Loop()

Universidad de Deusto. . ESIDE Editor Gestionando Eventos n EVT_MENU(self, ID_ABOUT, self. On. About ) n n Asocia el evento de selección de menú ID_ABOUT sobre la ventana self, al método self. On. About. Nuevo modelo de eventos usado en ejemplo. Editor 5. py #ejemplo. Editor 3. py self. Set. Menu. Bar(menu. Bar) # Adding the Menu. Bar to the Frame content. wx. EVT_MENU(self, ID_ABOUT, self. On. About) wx. EVT_MENU(self, ID_EXIT, self. On. Exit) self. Show(True) def On. About(self, e): # Create a message dialog box d= wx. Message. Dialog( self, " A sample editor n in wx. Python", "About Sample Editor", wx. OK) d. Show. Modal() # Shows it d. Destroy() # finally destroy it when finished. def On. Exit(self, e): self. Close(True) # Close the frame.

Universidad de Deusto. . ESIDE Editor Abriendo y Cerrando Documentos n Nos beneficiamos del control avanzado wx. File. Dialog def On. Open(self, e): """ Open a file""" dlg = wx. File. Dialog(self, "Choose a file", self. dirname, "", "*. *", wx. OPEN) if dlg. Show. Modal() == wx. ID_OK: self. filename=dlg. Get. Filename() self. dirname=dlg. Get. Directory() f=open(self. dirname+'\'+self. filename, 'r') self. control. Set. Value(f. read()) f. close() dlg. Destroy()

Universidad de Deusto. . ESIDE Dibujando gráficos en wx. Python n n n Preciso usar un contexto de dispositivo (device context ó DC). DC es la clase base para Client. DC, Paint. DC, Memory. DC, Post. Script. DC, Memory. DC, Metafile. DC y Printer. DC Se puede utilizar exactamente el mismo código para dibujar encima de cualquiera de estos dispositivos Algunos ejemplos de las funciones disponibles para dibujar son DC. Draw. Line, DC. Draw. Circle o DC. Draw. Text. Para optimizar el pintado de figuras geométricas, es recomendable incluir las primitivas de dibujo entre las llamadas DC. Begin. Drawing y DC. End. Drawing. El color del fondo de cada figura dibujada se puede controlar con el concepto de brocha (Brush) y el grosor y color de los bordes de cada figura con el concepto de bolígrafo (Pen).

Universidad de Deusto. . ESIDE Ejemplo dibujado gráficos wx. Python I dc = wx. Paint. DC(self) dc. Clear() dc. Begin. Drawing() dc. Set. Pen( wx. Pen("BLACK", 1) ) dc. Set. Brush( wx. Brush("RED") ) cabecera = "Total partidas jugadas: " + str(int(partidas. Jugadas)) (w, h) = dc. Get. Text. Extent(cabecera) dc. Draw. Text(cabecera, 320 -(w/2), 70 -h) (w, h) = dc. Get. Text. Extent("Ganadas") dc. Draw. Text("Ganadas", 160 -(w/2), 390 -h) dc. Draw. Rectangle(100, 350, 120, -altura. Barra. Ganadas) (w, h) = dc. Get. Text. Extent(`self. resultado. Estadisticas[0]`) dc. Draw. Text(‘self. resultado. Estadisticas[0]’, 160 -(w/2), 350 -altura. Barra. Ganadas-20). . .

Universidad de Deusto. . ESIDE Ejemplo dibujado gráficos wx. Python II

Universidad de Deusto. . ESIDE wx. Glade n No siempre es necesario (o conveniente) crear de manera programática las interfaces en wx. Python. n Hay herramientas que nos ayudarán a generar el código wx. Python correspondiente: n n n wx. Glade (http: //wxglade. sourceforge. net/) Basado en Glade, el famoso generador de interfaces gráficas para GTK+/GNOME Tutorial sobre wx. Glade en: http: //wxglade. sourceforge. net/tutorial. php

Universidad de Deusto. . ESIDE Ejemplo wx. Glade n n Instalar wx. Glade Realizar un ejemplo sencillo: n n Frame conteniendo un panel con dos pestañas La primera pestaña conteniendo un redimensionador de ventanas vertical con dos filas En la primera fila colocar una textbox En la segunda fila un par de botones

Universidad de Deusto. . ESIDE Ejemplo wx. Glade

Universidad de Deusto. . ESIDE Juego Tres. En. Raya Modo Texto n Implementar el juego de tres en raya en la clase Juego. Tres. En. Raya con métodos: n n n reset. Game __elegir. Marca. Maquina __ver. Tablero __hay. Ganador jugar Permitir jugar sólo a aquellos usuarios que hagan login previamente a través de la clase Registro. Jugadores n n Registrar estadísticas de juego primero en memoria con un diccionario y luego de manera persistente con un shelf. Los métodos soportados por esta clase serán: n n registrar. Jugador login registrar. Victoria | registrar. Empate | registrar. Perdida get. Estadisticas

Universidad de Deusto. . ESIDE Ejemplo: Tres En Raya Modo Gráfico

Universidad de Deusto. . ESIDE Tres en Raya Modo Gráfico n Vamos a crear las siguientes ventanas: n n n Ventana de login: hacer login y salir Ventana de nuevo usuario Ventana principal de control: jugar nueva partida, ver estadísticas, ir a ventana de login Ventana de partida tres en raya Diálogo de resultado de partida Ventana estadísticas

Universidad de Deusto. . ESIDE Ventana de Login class Login. GUI(wx. Frame): def __init__(self, registro, parent=None, id=-1, title='Juego tres en raya: login'): wx. Frame. __init__(self, parent, id, title) self. Set. Background. Colour(wx. WHITE) self. registro = registro # Preparamos la barra de menu. Bar = wx. Menu. Bar() menu 1 = wx. Menu() menu 1. Append(101, "&Salir", "Haz clic para salir") menu. Bar. Append(menu 1, "&Tres. En. Raya") self. Set. Menu. Bar(menu. Bar) wx. EVT_MENU(self, 101, self. On. Salir) nombre. Usuario. Label = wx. Static. Text(self, -1, "Nombre usuario: ") self. nombre. Usuario. Txt. Ctrl= wx. Text. Ctrl(self, -1, "", size=(125, -1)) password. Label = wx. Static. Text(self, -1, "Password: ") self. password. Txt. Ctrl = wx. Text. Ctrl(self, -1, "", size=(125, -1), style=wx. TE_PASSWORD). . . self. boton. Nuevo. Usuario = wx. Button(self, -1, "Nuevo usuario") wx. EVT_BUTTON(self, self. boton. Nuevo. Usuario. Get. Id(), self. On. Nuevo. Usuario) self. boton. Login = wx. Button(self, -1, "Login") self. boton. Login. Enable(False) wx. EVT_BUTTON(self, self. boton. Login. Get. Id(), self. On. Login)

Universidad de Deusto. . ESIDE Ventana de Login self. boton. Salir = wx. Button(self, -1, "Salir") wx. EVT_BUTTON(self, self. boton. Salir. Get. Id(), self. On. Salir) bsizer = wx. Box. Sizer(wx. VERTICAL) top. Sizer = wx. Box. Sizer(wx. HORIZONTAL) top. Sizer. Add(nombre. Usuario. Label, 0, wx. GROW|wx. ALL, 4) top. Sizer. Add(self. nombre. Usuario. Txt. Ctrl, 0, wx. GROW|wx. ALL|wx. ALIGN_RIGHT , 4) bsizer. Add(top. Sizer, 0, wx. GROW|wx. ALL, 4). . . boton. Accion. Sizer = wx. Box. Sizer(wx. HORIZONTAL) boton. Accion. Sizer. Add(self. boton. Nuevo. Usuario, 0, wx. GROW|wx. ALL, 4). . . bsizer. Add(boton. Accion. Sizer, 0, wx. GROW|wx. ALL, 4) bsizer. Fit(self) self. Set. Auto. Layout(True) self. Set. Sizer(bsizer) wx. EVT_CLOSE(self, self. On. Salir)

Universidad de Deusto. . ESIDE Manejadores Ventana Login def On. Salir(self, evt): self. __cerrar. Aplicacion() def On. Login(self, evt): try: self. registro. login(self. nombre. Usuario. Txt. Ctrl. Get. Value (), self. password. Txt. Ctrl. Get. Value()) except: mostrar. Dialogo(self, 'No hay ningun usuario registrado con el nombre de usuario y password especificados', 'Login incorrecto') return try: self. ventana. Usuario = Logged. In. GUI(self. nombre. Usuario. Txt. Ctrl. Get. Value(), self. password. Txt. Ctrl. Get. Value(), parent=self) self. ventana. Usuario. Show() self. Hide() except Exception, e: mostrar. Dialogo(self, "Problemas haciendo login para usuario " + self. nombre. Usuario. Txt. Ctrl. Get. Value() + ": " + str(e. args), "Error al hacer login")

Universidad de Deusto. . ESIDE Manejadores Ventana Login def On. Nuevo. Usuario(self, evt): ventana. Nuevo. Usuario = Nuevo. Usuario. GUI(self) ventana. Nuevo. Usuario. Show() self. Hide() def __cerrar. Aplicacion(self): if self. __dict__. has_key('ventana. Usuario'): if self. ventana. Usuario: self. ventana. Usuario. Destroy() self. Destroy() def Evt. Text(self, event): if len(self. nombre. Usuario. Txt. Ctrl. Get. Value(). strip()) > 0 and len(self. password. Txt. Ctrl. Get. Value(). strip()) > 0: self. boton. Login. Enable(True) else: self. boton. Login. Enable(False)

Universidad de Deusto. . ESIDE Grid. Sizer en la Ventana de Partida def __init. Tablero(self): self. gridsizer = wx. Grid. Sizer(3, 3, 0, 0) self. celda. Tablero = [] self. bitmaps = [] for i in range(9): self. bitmaps. append(wx. Bitmap("images/blank. png", wx. BITMAP_TYPE_PNG)) self. celda. Tablero. append(wx. Bitmap. Button(self, i, self. bitmaps[i])) wx. EVT_BUTTON(self, i , self. On. Click) self. gridsizer. Add(self. celda. Tablero[i]) self. gridsizer. Fit(self) self. Set. Auto. Layout(True) self. Set. Sizer(self. gridsizer)

Universidad de Deusto. . ESIDE Mostrar diálogo def mostrar. Dialogo(ventana. Padre, mensaje, titulo, modo=wx. OK): dialog = wx. Message. Dialog(ventana. Padre, mensaje, titulo, modo); dialog. Show. Modal()

Universidad de Deusto. . ESIDE References n Nueva documentación wx. Python: n n n wx. Widgets 2. 5. 3: A portable C++ and Python GUI toolkit n n n wx. Python API: http: //www. wxpython. org/docs/api/ wx. Python howto: http: //www. wxpython. org/docs/howto/ http: //www. wxpython. org/onlinedocs. php Libro “Dive into Python”, http: //diveintopython. org/ Librería de Python: http: //docs. python. org/lib. html