html m.g.t.i. maría enriqueta castellanos bolaños facultad de matemáticas, uady
TRANSCRIPT
![Page 1: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/1.jpg)
HTML
M.G.T.I. María Enriqueta Castellanos Bolaños
Facultad de Matemáticas, UADY
![Page 2: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/2.jpg)
Internet y World Wide Web
• Internet: Red de redes de computadoras.• WWW: Subred de Internet que ofrece diversos
servicios.
![Page 3: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/3.jpg)
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.
![Page 4: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/4.jpg)
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.
![Page 5: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/5.jpg)
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>
![Page 6: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/6.jpg)
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>
![Page 7: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/7.jpg)
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>
![Page 8: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/8.jpg)
Listas
• Numeradas:<OL>
<LI>Elemento 1
<LI>Elemento 2
</OL>
• Viñetas: <UL>• Definición:
<DL>
<DT>Término
<DD>Definición
</DL>
![Page 9: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/9.jpg)
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">
![Page 10: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/10.jpg)
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
![Page 11: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/11.jpg)
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>
![Page 12: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/12.jpg)
Tablas
• Está formado por los marcadores:<TABLE>
<TR> (Fila)
<TD> (Celda o columna)
• Ejemplo:<TABLE>
<TR>
<TD>Celda1</TD>
<TD>Celda2</TD>
</TR>
</TABLE>
![Page 13: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/13.jpg)
Funcionamiento
Visor Web
Servidor Web
Documentos
Página Web
Solicitud
Entrega
![Page 14: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/14.jpg)
FORMAS
• <FORM></FORM>– ACTION– METHOD
• <FORM METHOD=“post” ACTION=“includes/registrar.php">
![Page 15: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/15.jpg)
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
![Page 16: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/16.jpg)
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
![Page 17: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/17.jpg)
FORMAS
• <INPUT TYPE="HIDDEN"• NAME="nombre"• VALUE="valor”>
• Por ejemplo : • <INPUT TYPE ="HIDDEN" NAME=“hdn_clave"
VALUE="anonimo">
![Page 18: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/18.jpg)
FORMAS
• <INPUT TYPE=“password"• MAXLENGTH="maxcaracteres"• NAME="nombre"• SIZE="largocaracteres"• VALUE="valor”>
• <INPUT TYPE=“password" NAME="clave" VALUE="" SIZE="25" MAXLENGTH="30">
![Page 19: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/19.jpg)
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
![Page 20: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/20.jpg)
FORMAS
• <INPUT TYPE=“reset"• NAME="nombre"• VALUE="etiqueta”>
• <INPUT TYPE=“reset" VALUE=“Restablecer">
![Page 21: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/21.jpg)
FORMAS
• <INPUT TYPE=“submit"• NAME="nombre"• VALUE="etiqueta”>
• <INPUT TYPE=“submit" VALUE="Enviar">
![Page 22: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/22.jpg)
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">
![Page 23: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/23.jpg)
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 >
![Page 24: HTML M.G.T.I. María Enriqueta Castellanos Bolaños Facultad de Matemáticas, UADY](https://reader036.vdocumento.com/reader036/viewer/2022062409/5665b4641a28abb57c9121f3/html5/thumbnails/24.jpg)
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>