1 / 25

HTML

HTML. M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY. Internet y World Wide Web. Internet: Red de redes de computadoras. WWW: Subred de Internet que ofrece diversos servicios. HTML. Lenguaje de Marcación de Hipertexto

mckile
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY

  2. Internet y World Wide Web • Internet: Red de redes de computadoras. • WWW: Subred de Internet que ofrece diversos servicios.

  3. HTML • Lenguaje de Marcación de Hipertexto • Lenguaje en el que están codificados los documentos que son accedidos desde la Web. • Archivo de texto ASCII con la extensión .html que contiene marcadores HTML. • El HTML define la estructura del documento y esto indica la disposición que tendrá el documento. Las capacidades de despliegue del visor Web determinan la apariencia final del documento HTML en pantalla.

  4. HTML • El HTML permite definir: • El título de un documento, • La estructura jerárquica del documento con encabezados de nivel y nombres de secciones, • Listas numeradas, con viñetas, y anidadas, • Puntos de inserción de gráficas, • Énfasis especial para palabras claves o frases, • Hiperenlaces y URL asociados.

  5. Sintáxis de Marcadores HTML • Los marcadores HTML son colocados dentro de un menor que (<) y un mayor que (>). • Marcadores Simples: • <marcador opcion1 opcion2> • Marcadores Pares: • <marcador opcion1 opcion2 >objeto</marcador> • No es sensitivo al uso de mayúsculas o minúsculas. • Ejemplo: <P> <STRONG></STRONG> <P ALIGN=“CENTER”></P>

  6. Estructura de un documento HTML <HTML> <HEAD> Elementos del Encabezado <TITLE>Título del documento</TITLE> </HEAD> <BODY> Elementos del documento y contenido </BODY> </HTML>

  7. Texto • Párrafos: <P> • Saltos de Línea: <BR> • Formato físico: <B> <U> <I> <S> • Fuentes y colores: <FONT FACE=“fuente” COLOR=“#color” SIZE=“tamaño”> • Ejemplo: <B> <FONT FACE=“Arial” COLOR=“#FFFFFF” SIZE=“14”>Un texto</FONT> </B>

  8. Listas • Numeradas: <OL> <LI>Elemento 1 <LI>Elemento 2 </OL> • Viñetas: <UL> • Definición: <DL> <DT>Término <DD>Definición </DL>

  9. Imágenes • Soportadas: GIF y JPG, PNG. • Sintaxis: <IMG SCR=”ruta" ALT=”texto” WIDTH=“tamaño” HEIGHT=“tamaño”> • Ejemplo: <IMG SCR="Prueba.gif" ALT="Diagrama de pruebas">

  10. URL’s • Dirección de un archivo o directorio en un servidor. • Tipos de URL’s • Absolutas: servicio://servidor/directorio/archivo • Relativas: ..[/directorio1][/directorio2]/archivo • Ejemplo: http://www.uady.mx/sitios/matemati/index.html ../organización/index.html

  11. Hiperenlaces • Establece conexiones entre documentos HTML. • Punto Inicial: <A HREF=”URL">Texto</A> • Punto final (opcional): <A NAME=”sección”>Texto</A> • Ejemplo: <A HREF="http://www.uady.mx/index.html">La UADY</A> <A NAME="Indice”>Contenido</A>

  12. Tablas • Está formado por los marcadores: <TABLE> <TR> (Fila) <TD> (Celda o columna) • Ejemplo: <TABLE> <TR> <TD>Celda1</TD> <TD>Celda2</TD> </TR> </TABLE>

  13. Funcionamiento Página Web Servidor Web Solicitud Entrega Visor Web Documentos

  14. FORMAS • <FORM></FORM> • ACTION • METHOD • <FORM METHOD=“post” ACTION=“includes/registrar.php">

  15. FORMAS • <INPUT> • TYPE • CHECKBOX, Casillas de selección • HIDDEN, Campos ocultos • IMAGE, Imágenes que actúen como botones • PASSWORD, Campos de claves • RADIO, Casillas de opción • RESET, Botón de borrado • SUBMIT, Botón de envío • TEXT, Cuadros de Texto

  16. FORMAS • <INPUT TYPE=“checkbox" • CHECKED • NAME="nombre" • VALUE="valor”> • <INPUT TYPE="CHECKBOX" NAME=“chk_leer" CHECKED>Leer • <INPUT TYPE="CHECKBOX" NAME=“chk_viajar" CHECKED>Viajar

  17. FORMAS • <INPUT TYPE="HIDDEN" • NAME="nombre" • VALUE="valor”> • Por ejemplo : • <INPUT TYPE ="HIDDEN" NAME=“hdn_clave" VALUE="anonimo">

  18. FORMAS • <INPUT TYPE=“password" • MAXLENGTH="maxcaracteres" • NAME="nombre" • SIZE="largocaracteres" • VALUE="valor”> • <INPUT TYPE=“password" NAME="clave" VALUE="" SIZE="25" MAXLENGTH="30">

  19. FORMAS • <INPUT TYPE=“radio" • CHECKED • NAME="nombre" • VALUE="valor”> • <INPUT TYPE=“radio" NAME="estudios" VALUE=“chk_primaria" CHECKED>Primaria • <INPUT TYPE=“radio" NAME="estudios" VALUE=“chk_secundaria">Secundaria

  20. FORMAS • <INPUT TYPE=“reset" • NAME="nombre" • VALUE="etiqueta”> • <INPUT TYPE=“reset" VALUE=“Restablecer">

  21. FORMAS • <INPUT TYPE=“submit" • NAME="nombre" • VALUE="etiqueta”> • <INPUT TYPE=“submit" VALUE="Enviar">

  22. FORMAS • <INPUT TYPE=“text" • MAXLENGTH="maxcaracteres" • NAME="nombre" • SIZE="largocaracteres" • VALUE="valor”> • Nombre<BR> • <INPUT TYPE=“text" NAME=“txt_nombre" VALUE="" SIZE="25" MAXLENGTH="30">

  23. FORMAS • <SELECT • NAME="nombre" • MULTIPLE • SIZE="largolista”>  • <OPTION ...> • ... • <OPTION ...> • </SELECT> • Visor favorito:<BR> • <SELECT NAME=“cmb_visor" SIZE=2> • <OPTION>Navigator</OPTION> • <OPTION>Explorer </OPTION> • </SELECT >

  24. FORMAS • <TEXTAREA • COLS="columnas" • NAME="nombre" • ROWS="filas" • WRAP="OFF" | "HARD" | "SOFT”>  • Texto a desplegar • </TEXTAREA> • <TEXTAREA COLS="30" ROWD="10" WRAP=“soft" NAME="comentario"> • Escribe un comentario • </TEXTAREA>

  25. HTML M.G.T.I. María Enriqueta Castellanos Bolaños enriqueta.c@uady.mx Facultad de Matemáticas, UADY

More Related