TECNOLOGIAS PARA LA INTEGRACION DE SOLUCIONES · 2017. 9. 20. · Facultad de Estadística e...

Facultad de Estadística e Informática

SISTEMAS WEB


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.

https://www.w3schools.com/

http://platea.pntic.mec.es/~abercian/guiahtml/listas.htm

https://www.w3.org/


Agenda

IV. Metodologías y Lenguajes para el desarrollo de sistemas web. • HTML. • Introducción • Conceptos y elementos básicos


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.



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


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.



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”.


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.



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>



<!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



Los elementos HTML son los constructores de la página



Herramientas para editar HTML: • Bloc de notas. =S • Notepad ++ • Sublime Text • JetBrains WebStorm • VisualStudio Code



Mi primera página HTML 1) Abrir editor 2) Escribir el siguiente código HTML


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>



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’)


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>


<!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>



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">


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>



Listas con viñetas <ul> <li>Primer término de la lista</li> <li>Segundo término</li> <li>Tercer término</li> </ul>


<!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>


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>


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>


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”


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">



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

https://www.w3schools.com/tags/ref_attributes.asp

https://www.w3schools.com/tags/ref_standardattributes.asp

https://www.w3schools.com/tags/ref_standardattributes.asp



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

https://www.w3schools.com/tags/ref_eventattributes.asp



Elabora una página Web con los siguientes bloques:


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


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


Gracias por su atención

TECNOLOGIAS PARA LA INTEGRACION DE SOLUCIONES · 2017. 9. 20. · Facultad de Estadística e...

Documents

Transcript of TECNOLOGIAS PARA LA INTEGRACION DE SOLUCIONES · 2017. 9. 20. · Facultad de Estadística e...