tecnologias para la integracion de soluciones · 2017. 9. 20. · facultad de estadística e...
TRANSCRIPT
Facultad de Estadística e Informática
SISTEMAS WEB
Facultad de Estadística e Informática
Bibliografía w3Schools.com. (s.f.). Consultado el 12 de septiembre de 2017. Extraído de: https://www.w3schools.com/ Listas con viñetas. (s.f.). Extraído desde http://platea.pntic.mec.es/~abercian/guiahtml/listas.htm, Consultado el 12 de septiembre de 2017. W3C. (s.f.). Extraído desde https://www.w3.org/, Consultado el 12 de septiembre de 2017.
Facultad de Estadística e Informática
Agenda
IV. Metodologías y Lenguajes para el desarrollo de sistemas web. • HTML. • Introducción • Conceptos y elementos básicos
Facultad de Estadística e Informática
HTML – HyperText Markup Language
HTML – HyperText Markup Language (Lenguaje de marcas de hipertexto)
o Es el lenguaje de marcas estandarizado empleado para crear páginas Web.
o Junto con CSS (Cascading Style Sheets), constituyen dos de las tecnologías principales para la construcción de páginas Web.
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Versión Año HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014
Evolución de HTML
Facultad de Estadística e Informática
HTML – HyperText Markup Language HTML describe la estructura de una página Web
mediante etiquetas o marcas. Por lo tanto, todos los elementos del lenguaje se
definen mediante piezas o bloques de contenido, tales como:
• Párrafos • Listas • Tablas
• Etcétera.
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Etiquetas que definen el contenido HTML: o <etiqueta>Contenido aquí...</etiqueta> o Normalmente se escriben en pares: <p> y </p> o La primera etiqueta es de inicio y la segunda es de
fin. También se dice que la primera “abre” y la segunda “cierra”.
Facultad de Estadística e Informática
HTML – HyperText Markup Language Etiquetas que definen el contenido HTML: o Existen etiquetas sin contenido y sin etiqueta de
cierre, como <br> (salto de línea). Lo ideal es: <br /> o Las etiquetas se pueden anidar. o Las etiquetas son NO sensibles a mayúsculas. Se
recomienda usar minúsculas.
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Ejemplo de etiquetas o marcas.
o Los navegadores Web no
muestran las etiquetas; las usan para construir y desplegar el contenido.
<!DOCTYPE html> <html> <head> <title>Título de la página</title> </head> <body> <h1>Este es el encabezado</h1> <p>Este es un párrafo</p> </body> </html>
Facultad de Estadística e Informática
HTML – HyperText Markup Language
<!DOCTYPE html> <html> <head> <title>Título de la página</title> </head> <body> <h1>Este es el encabezado</h1> <p>Este es un párrafo</p> </body> </html>
Define que el documento será HTML5
Etiqueta raíz
Contiene meta información
Define el título
Contenido visible
Define el encabezado
Define un párrafo
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Los elementos HTML son los constructores de la página
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Herramientas para editar HTML: • Bloc de notas. =S • Notepad ++ • Sublime Text • JetBrains WebStorm • VisualStudio Code
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Mi primera página HTML 1) Abrir editor 2) Escribir el siguiente código HTML
Facultad de Estadística e Informática
HTML – HyperText Markup Language <!DOCTYPE html> <html> <head> <title>Título de la página</title> </head> <body> <h1>Este es el encabezado</h1> <p>Este es un párrafo</p> </body> </html>
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Mi primera página HTML 3) Guardar el archivo con el nombre index.htm 4) Abrir el documento en el navegador de Internet
(Doble clic o Clic derecho ‘Abrir con’)
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Facultad de Estadística e Informática
HTML – HyperText Markup Language <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Título de la página</title> </head> <body> <h1>Este es el encabezado</h1> <p>Este es un párrafo</p> </body> </html>
Facultad de Estadística e Informática
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Título de la página</title> </head> <body> <h1>Este es el encabezado h1</h1> <h2>Este es el encabezado h2</h2> <h3>Este es el encabezado h3</h3> <h4>Este es el encabezado h4</h4> <p>Este es un párrafo</p> <p>Este es otro párrafo</p> </body> </html>
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Hipervínculo en HTML <a href="https://www.uv.mx">Hipervínculo a la Universidad Veracruzana</a>
Imágenes en HTML <img src=“images/banner_web_iiicongreso3.jpg" alt=“SLAPrim" width=“1000" height=“320">
Facultad de Estadística e Informática
HTML – HyperText Markup Language <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Título de la página</title> </head> <body> <img src="images/banner_web_iiicongreso3.jpg" alt="SLAPrim" width=“1000" height=“320">
<h1>Este es el encabezado h1</h1> <h2>Este es el encabezado h2</h2> <h3>Este es el encabezado h3</h3> <h4>Este es el encabezado h4</h4> <p>Este es un párrafo</p> <p>Este es otro párrafo</p> <a href="http://www.uv.mx/">Hipervínculo a la Universidad Veracruzana</a>
</body> </html>
Facultad de Estadística e Informática
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Listas con viñetas <ul> <li>Primer término de la lista</li> <li>Segundo término</li> <li>Tercer término</li> </ul>
Facultad de Estadística e Informática
<!DOCTYPE html> <html lang="es">
<head> <meta charset="utf-8"> <title>Título de la página</title> </head> <body>
<img src="images/banner_web_iiicongreso3.jpg" alt="SLAPrim" width=“1000" height=“320"> <h1>Este es el encabezado h1</h1> <h2>Este es el encabezado h2</h2> <h3>Este es el encabezado h3</h3> <h4>Este es el encabezado h4</h4> <p title="Soy un tooltip">Este es un párrafo con tooltip</p> <p>Este es otro párrafo</p> <a href="http://www.uv.mx/">Hipervínculo a la Universidad Veracruzana</a> <ul>
<li>Primer término de la lista</li> <li>Segundo término</li> <li>Tercer término</li>
</ul> </body>
</html>
Facultad de Estadística e Informática
HTML – HyperText Markup Language Otras Viñetas
<ul> <li type="circle">Primer término de la lista</li> <li type="circle">Segundo término</li> <li type="circle">Tercer término</li>
</ul> <ul>
<li type="square">Primer término de la lista</li> <li type="square">Segundo término</li> <li type="square">Tercer término</li>
</ul>
Facultad de Estadística e Informática
HTML – HyperText Markup Language Viñetas numeradas
<ol type="i"> <li>Primer término de la lista <li>Segundo término <li>Tercer término <li>Cuarto <li>Quinto </ol>
Facultad de Estadística e Informática
HTML – HyperText Markup Language Atributos HTML
• Todos los elementos HTML pueden tener atributos. • Proveen información adicional de los elementos. • Siempre son especificados en la etiqueta que abre el
elemento. • Usualmente se presentan como nombre/valor: name=“value”
Facultad de Estadística e Informática
HTML – HyperText Markup Language Atributos HTML
• Ejemplos: <html lang="es"> <p title=“Soy un tooltip"> <a href="http://www.uv.mx/">Hipervínculo a la Universidad Veracruzana</a> <img src="images/banner_web_iiicongreso3.jpg" alt="SLAPrim" width=“1000" height=“320">
Facultad de Estadística e Informática
Facultad de Estadística e Informática
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Atributos HTML:
• Lista de todos los atributos existentes en HTML: https://www.w3schools.com/tags/ref_attributes.asp • Lista de atributos globales: https://www.w3schools.com/tags/ref_standardattributes.asp
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Atributos de Eventos: • HTML 4 permite disparadores de eventos. Por
ejemplo, iniciar código Javascript cuando el usuario hace clic en un elemento.
https://www.w3schools.com/tags/ref_eventattributes.asp
Facultad de Estadística e Informática
HTML – HyperText Markup Language
Elabora una página Web con los siguientes bloques:
Facultad de Estadística e Informática
Nombre h1
Imagen de encabezado Título de la página: Mi Página Personal
Mis estudios h2
• Lista con viñetas tipo square
Mis intereses h2
• Lista con viñetas tipo círculo
Facultad de Estadística e Informática
Imagen de encabezado Título de la página: Mi Página Personal
Ligas de interés h2
• Lista con viñetas numeradas
Mis habilidades h2
• Lista con viñetas e hipervínculos
Facultad de Estadística e Informática
Gracias por su atención