Unidad 1 / Escenario 2 Lectura Fundamental

HTML

Contenido

1 El Lenguaje de Marcado de Hipertexto: HTML

1

2 Construcci´ on de Formularios

10

3 HTML5

13

Palabras Claves: Desarrollo Web, tecnolog´ıas Web, HTML, lenguajes de etiquetas.

El lenguaje utilizado para describir el conjunto de elementos de una p´ agina Web es HTML, que junto con otras tecnolog´ıas como Cascading Style Sheets (CSS) y JavaScript, permiten dar vida a los sitios Web tales como los conocemos hoy en d´ıa.

1. El Lenguaje de Marcado de Hipertexto: HTML

1.1. Estructura B´asica de una P´agina HTML HTML permite establecer el contenido de una p´agina. Para ello define un conjunto de elementos que permiten especificar los componentes que har´ an parte de la p´agina. Los elementos son indicados dentro de HTML por medio del uso de etiquetas. Una etiqueta de apertura y una etiqueta de cierre son utilizadas para representar un elemento, aunque en algunas ocasiones la etiqueta de cierre es opcional1 . Las etiquetas son palabras encerradas con los s´ımbolos ‘<’ y ‘>’, adem´as la etiqueta de cierre incluye el s´ımbolo ‘/’ al inicio de la palabra. Por ejemplo, para el elemento t´ıtulo la etiqueta de apertura es . tag de apertura

tag de cierre

< title > Politecnico Grancolombiano - Sitio Web Oficial

Figura 1. texto Fuente: elaboraci´on propia

1.2. Elementos HTML de Texto Uno de los elementos de texto que HTML permite definir es un p´ arrafo. Para ello se debe encerrar el texto que hace parte del p´arrafo dentro las etiquetas

y

. 1

para el elemento br basta la etiqueta de apertura


´ POLITECNICO GRANCOLOMBIANO

1

Al definir una secuencia de p´ arrafos, estos son separados por una l´ ınea en blanco sin necesidad de especificar alg´ un elemento adicional.

Adem´ as cada p´ arrafo iniciar´ a en una nueva l´ ınea.

Por defecto los navegadores ajustan autom´ aticamente el texto de los p´ arrafos de acuerdo al ancho de la ventana.

Figura 2. P´ arrafos definidos a trav´ es de la etiqueta

Fuente: elaboraci´on propia

Si fuera necesario especificar saltos de l´ınea, es posible hacerlo mediante el uso de la etiqueta
. Note que no es necesario utilizar la etiqueta de apertura y la respectiva etiqueta de cierre para este elemento. HTML define varios elementos para los cuales no es necesario. Para establecer t´ıtulos dentro de una p´agina suelen utilizarse los encabezados, la diferencia entre tipos de encabezado se determina entre el tama˜ no de letra, separaci´ on que existe entre palabras y los elementos que est´an a su alrededor, las etiquetas

y

suelen utilizarse para definir t´ıtulos principales, las etiquetas

,

... en adelante se utilizan para definir subt´ıtulos del t´ıtulo principal.

T´ ıtulo principal

Subt´ ıtulo 1

Subt´ ıtulo 2

Subt´ ıtulo 3

Figura 3. Encabezados definidos a trav´ es de las etiquetas

a

Fuente: elaboraci´on propia Las etiquetas <strong> son utilizadas principalmente para definir o resaltar una palabra importante en el texto, produce el efecto de aplicar negrita. Por otro lado la etiqueta <em> suele ser utilizada para establecer ´ enfasis en alguna palabra del texto, produce el efecto de hacer la letra cursiva.

El siguiente <strong>p´ arrafo contiene una mezcla de los diferentes <strong>´ enfasis en un <em>texto, resaltando palabras con la etiqueta <strong>strong y haciendo un ´ enfasis con la etiqueta <em>em

Figura 4. Texto resaltado en un p´ arrafo Fuente: elaboraci´on propia

´ POLITECNICO GRANCOLOMBIANO

2

Strong y em no son las u ´nicas etiquetas en el lenguaje HTML para definir palabras o frases en negrita y cursiva respectivamente, tambi´en existen las etiquetas bold, para resaltar una palabra con el efecto de negrita y las etiquetas italic, para hacer ´ enfasis, o crear el efecto de letra cursiva.

El siguiente p´ arrafo contiene una mezcla de los diferentes ´ enfasis en un texto, resaltando palabras con la etiqueta b y haciendo un ´ enfasis con la etiqueta i

Figura 5. Texto en negrita y cursiva Fuente: elaboraci´on propia

En HTML es posible crear super´ındices y sub´ındices, ya sea para una formula matem´atica o una referencia. Los sub´ındices y super´ındices son un n´ umero o letra de un tama˜ no menor al de la escritura normal que puede estar tanto arriba como abajo, siendo esto definido al ser un super´ındice o sub´ındice respectivamente. Un super´ındice se crea con las etiquetas <sup> , y un sub´ındice se crea con las etiquetas <sub> .

La identidad de Euler est´ a definida como:

e<sup>i𝜋 + 1 = 0

El ´ oxido de sodio Na<sub>2O se considera un ´ oxido b´ asico

Figura 6. Texto con s´ uper ´ındices y sub-´ındices Fuente: elaboraci´on propia

En el lenguaje existen algunas etiquetas especiales, una de ellas es la etiqueta

---

ue representa una l´ınea horizontal que puede ser utilizada para separar secciones del texto por medio de una l´ınea, como puede ser el caso de separar entre t´ıtulo y subt´ıtulo, t´ıtulo y p´ arrafo o entre p´ arrafo y p´ arrafo, la etiqueta

---

a diferencia de las dem´as etiquetas no tiene una de apertura y una de cierre, s´olo es necesaria una.

T´ ıtulo del texto

---

Contenido del texto

Figura 7. Texto con encabezados y p´ arrafos Fuente: elaboraci´on propia Si en el texto desea utilizar la abreviaci´ on de alguna palabra o un acr´ onimo por diferentes razones, se deben utilizar las etiquetas y respectivamente para cada acci´on y con ayuda del atributo title se agregan estas referencias o abreviaciones.

´ POLITECNICO GRANCOLOMBIANO

3

El IDRD genera espacios para promover el deporte en Bogot´ a D.C.

Figura 8. Texto con acr´ onimos Fuente: elaboraci´on propia

Para poder citar alguna frase o fragmento de texto se pueden utilizar las etiquetas y , la primera de ellas permite convertir el texto a un formato similar al que har´ıa una etiqueta de ´enfasis, mientras que la otra permite ubicar comillas (””) en cada extremo del texto a citar.

Nadie debe conocer su sentido mientras no hayan cumplido cien a~ nos, fragmento sacado del libro Cien a~ nos de soledad de Gabriel Garc´ ıa M´ arquez.

Figura 9. Texto con citas Fuente: elaboraci´on propia

Si el texto es de constante modificaci´ on es posible que desee tener una referencia de lo que estaba antes de ser modificado, por lo que el lenguaje provee unas etiquetas las cuales permiten hacer este tipo de modificaciones. Con la etiqueta <del> es posible hacer una marca o linea en medio del texto, el cual permite mostrar que la frase ahora no es usada correctamente, alterno a esto puede usarse tambi´en la etiqueta para mostrar una nueva palabra o frase que ser´ıa el reemplazo de la frase modificada se puede diferenciar por que est´a ahora sobre una l´ınea.

Smartphone:

<del>Antes $750

Ahora $350

Figura 10. Texto tachado Fuente: elaboraci´on propia En el texto, es posible agregar enlaces o hiperv´ınculos que permiten al usuario navegar hacia otras p´aginas o recursos. Para insertar estos enlaces se utilizan las etiquetas y por medio del atributo href se indica la direcci´on del recurso al que se quiere dirigir.

Para acceder a la p´ agina de Google, siga el siguiente enlace

Figura 11. Texto con enlaces Fuente: elaboraci´on propia

´ POLITECNICO GRANCOLOMBIANO

4

1.3. Listas HTML permite crear diferentes tipos de listas, una de estas es la lista ordenada, que permite mostrar los elementos numerados. Para crear una lista ordenada, es necesario utilizar las etiquetas

, y dentro de estas especificar los elementos en el orden en que ser´ an numerados encerrando cada uno con las etiquetas

. El nombre del elemento ol del ingl´es ordered list y el nombre li, list item, elemento de lista.

Lista de ingredientes.

1. 1kg de harina.
2. 15g de sal.
3. 500ml de agua.
4. 45g de levadura.
5. 50ml de aceite.


Figura 12. Listas ordenadas Fuente: elaboraci´on propia

Otro tipo de listas utilizada com´ unmente son las listas no ordenadas. Para crear una lista no ordenada, deben utilizarse las etiquetas
, e igual que en las listas ordenadas, para cada elemento dentro de la lista ser´ a necesario utilizar las etiquetas
.



Lugares por visitar.

• Francia.
• Irlanda.
• Canada.
• Australia.
• Alemania.


Figura 13. Listas no ordenadas Fuente: elaboraci´on propia

Es posible crear listas cuyos elementos incluyan una definici´on o descripci´ on. Este tipo de listas son listas de definici´ on. Para crear una lista de definici´on se utilizan las etiquetas
, dentro de ellas se define cada elemento de la lista con las etiquetas
y para la definici´on de cada elemento se utilizan las etiquetas
.



BFS.

B´ usqueda en anchura.

DFS.

B´ usqueda en profundidad.

Dijkstra.

Caminos m´ ınimos.

Prim.

´ Arbol recubridor m´ ınimo.

Edmonds-Karp.

Flujo m´ aximo.



Figura 14. Listas de definiciones Fuente: elaboraci´on propia

´ POLITECNICO GRANCOLOMBIANO

5

De ser necesario es posible anidar listas, esto es, incluir un tipo de lista sea ordenada o no ordenada dentro de otra. Un ejemplo de esta pr´actica es el siguiente, en donde se una lista no ordenada hace parte de los elementos de una lista ordenada. Esto suele servir para mostrar clasificaciones de objetos o mostrar sus dependencias.



Productos.

1. Huevos
2. Leche
3. Queso
• Cheddar
• Mozarella
• Parmesano
4. Caf´ e


Figura 15. Listas anidadas Fuente: elaboraci´on propia

1.4. Im´agenes Otra posibilidad que brinda HTML es la de agregar im´ agenes. Esto se logra por medio de la etiqueta con ayuda de los atributos src, alt y title, los cuales permiten agregar la imagen desde una ruta, hacer una descripci´on y generar un t´ıtulo para la imagen, respectivamente.



Figura 16. Imagen en p´ agina HTML Fuente: elaboraci´on propia En una imagen podemos de igual forma manipular su tama˜ no, dentro de la etiqueta utilizando los atributos height y width cuyos valores est´ an dados en p´ıxeles.



Figura 17. Imagen con ancho y alto especificados dentro a trav´ es de los atributos de la etiqueta Fuente: elaboraci´on propia

´ POLITECNICO GRANCOLOMBIANO

6

Con el atributo align es posible ubicar las im´agenes en los laterales de un p´arrafo.



Agregar la im´ agen en la parte lateral izquierdo de un p´ arrafo.

---

Agregar la imagen en la parte lateral derecha de un p´ arrafo.



Figura 18. Im´ agenes alineadas dentro de un p´ arrafo Fuente: elaboraci´on propia

Tambi´en es posible agregar una imagen junto con un p´arrafo, ya sea antes, iniciando o en medio del p´ arrafo.



Agregar la imagen antes de un p´ arrafo.

---

Agregar la imagen en la primer del p´ arrafo.

---

Agregar la imagen en una l´ ınea intermedia de un p´ arrafo.



negro."

negro," l´ ınea

negro."

Figura 19. Im´ agenes dentro de p´ arrafos Fuente: elaboraci´on propia

1.5. Tablas Para crear un conjunto de datos o tabla, HTML provee las etiquetas en las cuales se pueden agregar subconjuntos de datos fila por fila, por medio de las etiquetas y dentro de ellas cada uno de los elementos que pertenecen a esta fila por medio de las etiquetas .

´ POLITECNICO GRANCOLOMBIANO

7



1	2	3
4	5	6
7	8	9



Figura 20. Tabla de 3 filas y 3 columnas Fuente: elaboraci´on propia

Pueden agregarse a la tabla especificaciones sobre los elementos que est´an contenidos, con las etiquetas podemos especificar el tipo de dato en cada fila o columna de la tabla utilizando el atributo scope.



	Precio Normal	Precio Descuento
Televisor:	$670	$470
Computador:	$990	$650



Figura 21. Tabla con encabezados Fuente: elaboraci´on propia

Si se desea dar formato a una tabla haciendo uni´on de celdas entre filas o entre columnas, se puede hacer uso de los atributos rowspan y colspan dentro de la etiquetas y .



	Precio Normal	Precio Descuento
Televisor:	$870	$470
Computador:		$650



Figura 22. Tablas con celdas que ocupan m´ as de un fila o columna Fuente: elaboraci´on propia

´ POLITECNICO GRANCOLOMBIANO

8

Si la tabla tiene un gran contenido, el cual se debe diferenciar entre s´ı, el uso de las etiquetas , y , permiten separar campos de datos.



Dia	Mes	A~ no
1	Enero	1970
2	Octubre	1996
28	Febrero	2008



Figura 23. Tabla haciendo uso de las etiquetas y Fuente: elaboraci´on propia

Existen atributos para formatos en tablas los cuales permiten dar un color, tama˜ no o establecer bordes para diferenciar las filas y columnas, estos atributos son border, bgcolor, width y height, en el atributo border se especifica el tama˜ no del borde en p´ıxeles, en el atributo bgcolor se especifica el color de fondo para la tabla, este color debe ser ingresado como un valor hexadecimal y los atributos width y height especifican el tama˜ no de la fila o columna en p´ıxeles.



	Precio Normal	Precio Descuento
Televisor:	$870	$470
Computador:		$650



Figura 24. Tabla personalizada a trav´ es de los atributos de las etiquetas y Fuente: elaboraci´on propia

´ POLITECNICO GRANCOLOMBIANO

9

2. Construcci´on de Formularios Para que el navegador env´ıe datos adicionales al servidor estos deben ser ingresados por el usuario, por tal raz´ on la p´agina debe brindar los mecanismos para capturarlos. HTML define un conjunto de elementos especiales que permiten recopilar datos. Tales elementos se traducen en componentes gr´aficos que permiten ingresar texto, seleccionar opciones, seleccionar archivos del sistema de archivos del pc, entre otros. Todos estos elementos son reunidos en un formulario (form) que permite agrupar los elementos de captura que hacen parte de un mismo env´ıo. Para crear un formulario se utilizan las etiquetas
, en cada etiqueta
es posible especificar el atributo action cuyo valor debe ser una ruta de acceso al servidor del que recibe y procesa la informaci´on. Un formulario tiene dos tipos de m´etodo de acceso get y post que corresponden con el m´etodo HTTP que ser´ a indicado en la petici´ on al servidor, el m´etodo get es ideal cuando recibe textos cortos y el m´etodo post cuando el usuario desea agregar un archivo o enviar informaci´on sensible al servidor que posiblemente es almacenada. La etiqueta es utilizada para recibir informaci´ on por medio de una caja de texto, ´esta etiqueta contiene atributos como type que especifica el tipo de texto de entrada, name que crea una variable donde se almacena el texto de entrada, size asigna un tama˜ no al cuadro de ingreso del texto y maxlength determina la cantidad de caracteres que est´an permitidos dentro del cuadro de texto.



Nombre:



Figura 25. Formulario con un solo campo Fuente: elaboraci´on propia

El tipo de texto puede variar para dependiendo de la necesidad, entre los m´ as usados en HTML se encuentra el tipo de texto password, que oculta los s´ımbolos ingresados en el caja de texto visualiz´ andolos como puntos o asteriscos impidiendo la identificaci´ on del texto ingresado.



Nombre:

Contrase~ na:



Figura 26. Formulario con campo de contrase˜ na Fuente: elaboraci´on propia

Para tener una caja de texto de varias l´ıneas es necesario utilizar la etiqueta , que permite especificar su tama˜ no con los atributos cols y rows.

´ POLITECNICO GRANCOLOMBIANO

10



Ingresar texto

Ingrese el texto.


Figura 27. Formulario con caja de texto Fuente: elaboraci´on propia

Uno de los tipos de controles que permite seleccionar una opci´on entre varias es el tipo radio que se define igual que las cajas de texto por medio de la etiqueta pero en el atributo type se debe especificar el valor radio. De similar manera que para las cajas de texto, se utilizan los atributos name que asigna un nombre para el valor que ser´a enviado, value que representa el texto de la opci´on y en el caso del radio el atributo checked que sirve para dejar marcada una de las opciones de manera predeterminada.



Seleccione una opci´ on:
Opci´ on 1 Opci´ on 2 Opci´ on 3



Figura 28. Formulario con radiobuttons Fuente: elaboraci´on propia

Otro control es el tipo checkbox que permite seleccionar cero o m´as opciones dentro de un listado de posibles opciones, incluye los mismos atributos que el control de tipo radio.



Seleccione las opciones:
Opci´ on 1 Opci´ on 2 Opci´ on 3



Figura 29. Formulario con checkboxes Fuente: elaboraci´on propia

Se pueden almacenar las opciones dentro de una lista desplegable o caja de opciones con las etiquetas <select> , dentro de ellas para agregar cada elemento en la lista se utilizan las etiquetas .

´ POLITECNICO GRANCOLOMBIANO

11



Seleccione una opci´ on:

<select name="opciones"> Opci´ on 1 Opci´ on 2 Opci´ on 3


Figura 30. Formulario con lista desplegable Fuente: elaboraci´on propia

Es posible recibir archivos por medio de un cuadro de texto, por ejemplo im´agenes, videos, pdf, en la etiqueta se utiliza el atributo de tipo file para cargar el archivo y control input con el atributo de tipo submit permite enviarlo.



Agregue un archivo:





Figura 31. Formulario con botones para cargar archivos y env´ıo de datos Fuente: elaboraci´on propia

El control input de tipo submit, permite visualizar un bot´on que es utilizado para realizar el env´ıo de la informaci´on especificada en un formulario.



Ingrese su nombre:





Figura 32. Formulario con bot´ on de env´ıo Fuente: elaboraci´on propia

HTML permite agregar botones o controles ocultos (hidden) que permiten diferentes acciones, como por ejemplo agregar archivos haciendo una mezcla entre texto e im´agenes utilizando las etiquetas .


Agregar


Figura 33. Formulario con elementos ocultos Fuente: elaboraci´on propia

´ POLITECNICO GRANCOLOMBIANO

12

Para etiquetar los elementos de captura de datos, se utiliza , de tal manera que se permite relacionar una etiqueta con un control, estos elementos son u ´tiles dado que permite a los software de asistencia para personas invidentes conocer los campos del formulario. Uno de los atributos de la etiqueta es for que permite relacionar un elemento label con un control a trav´es del id.

Edad:
Acepta t´ erminos y condiciones
Si No

Figura 34. Formulario con elementos etiquetados Fuente: elaboraci´on propia

Si desea tener un grupo de campos de entrada puede utilizar la etiqueta
, junto con la etiqueta
que permite separar estos campos.


Ingrese los n´ umeros
N´ umero 1:

N´ umero 2:

N´ umero 3:



Figura 35. Formulario con grupos de campos Fuente: elaboraci´on propia

3. HTML5 El objetivo de HTML5 es asegurar que el est´ andar HTML refleje el estado actual de la Web. Una de las caracter´ısticas de esta nueva especificaci´on es que el viejo HTML y XHTML continuar´a siendo v´ alido. Con HTML5 el DOCTYPE puede ser ignorado y basta con poner html simplemente de la siguiente manera: .

´ POLITECNICO GRANCOLOMBIANO

13

Para finalizar Como pudo observar, el lenguaje de marcado HTML es muy importante en la creaci´on de p´aginas Web debido a que por medio de este es posible definir el contenido de una p´ agina Web, la cual puede incluir, texto sin o con formato, im´agenes, audio y video, entre otros. Sin embargo, presenta grandes limitaciones que de no ser cubiertas por otras tecnolog´ıas como CSS y JavaScript no se podr´ıa escribir aplicaciones que proporcionen al usuario una gran experiencia, como ocurre en las aplicaciones o sitios Web hoy en d´ıa. Aun as´ı, dado que HTML es el lenguaje est´andar para describir el contenido de una p´agina Web es de gran importancia para la construcci´ on de aplicaciones Web.

´ POLITECNICO GRANCOLOMBIANO

14

Referencias Basham, B., Sierra, K., & Bates, B. (2008). Head first servlets and jsp: passing the sun certified web component developer exam. Head first series. O’Reilly Media. Recuperado desde https://books.google.com.co/books?id= 15wp6fmAy4sC Code School LLC. (2017). Server-side languages. Recuperado desde https://www.codeschool.com/beginners-guideto-web-development/server-side-languages Collins, M. (2017). Pro html5 with css, javascript, and multimedia: complete website development and best practices. Apress. Connolly, D. (2017). Hypertext transfer protocol http 1.1. Recuperado desde https://www.w3.org/Protocols/ rfc2616/rfc2616.html Duckett, J. (2014). Html and css: design and build websites (1.a ed.). Wiley Publishing. Haverbeke, M. (2017). Http requests. Recuperado desde http://eloquentjavascript.net/1st edition/chapter14.html Meloni, J. (2014). Html, css and javascript all in one, sams teach yourself: covering html5, ccs3, and jquery (2.a ed.). Sams. Mozilla Developer Network y colaboradores. (2017). Http request methods. Recuperado desde https://developer. mozilla.org/en-US/docs/Web/HTTP/Methods Mozilla Developer Network y colaboradores individuales. (2017, 1 de agosto). How the web works. Recuperado desde https://developer.mozilla.org/en-US/docs/Learn/Getting started with the web/How the Web works Shenoy, A. (2014). Thinking in html. Packt Publishing Ltd.

´ POLITECNICO GRANCOLOMBIANO

15

´ TECNICA ´ INFORMACION

M´ odulo: Desarrollo de Front-End Unidad 1: Desarrolo Web y HTML Escenario 2: HTML Autor: Diego Satoba Asesor Pedag´ ogico: Ingrid Ospina Posada Dise˜ nador Gr´ afico: Catalina L´opez Asistente: Angie Laiton Este material pertenece al Polit´ecnico Grancolombiano. Por ende, es de uso exclusivo de las Instituciones adscritas a la Red Ilumno. Prohibida su reproducci´ on total o parcial.

´ POLITECNICO GRANCOLOMBIANO

16