1.

FUNDAMENTOS DEL DESARROLLO DE APLICACIONES WEB

1.1. Arquitectura Cliente – servidor
1.2. Páginas web
1.3. Sitio web
1.4. Tipos de páginas web
1.5. Servidores web

FUNDAMENTOS DEL DESARROLLO DE APLICACIONES WEB

Desde el uso comercial del Internet allá en los años 90, el desarrollo web ha estado en constante evolución.
Mientras que antes las páginas web eran un compendio de campos de texto sobrios, hoy en día la costosa
presentación de contenidos multimedia ocupa un lugar privilegiado.
La que fue en su momento una plataforma informativa se ha convertido en un medio de entretenimiento.
En ella, los usuarios prefieren páginas web interactivas que convenzan a través de un diseño atractivo y que se
puedan manejar de manera intuitiva.
Los desarrolladores web cuentan, para este fin, con distintas herramientas que faciliten integrar contenidos
dinámicos y crear las páginas web a medida de los usuarios.
En este sentido el requisito es, sin embargo, un alojamiento web dinámico que sea capaz de ofrecer los
recursos necesarios y de favorecer los estándares actuales.
El desarrollo web ha ido evolucionando hasta convertirse en lo que se considera Desarrollo Frontend. El
trabajo de programación de un negocio se divide actualmente en el desarrollo Backend y el desarrollo
Frontend, siendo el Backend el encargado de transportar los datos desde y hacia la base de datos y aplicar
todas las reglas de negocio y validaciones necesarias. Por otro lado el Frontend se encarga de consumir los
datos entregados por diversos Backend para construir interfaces de usuario que sean sencillas y potentes,
principalmente mediante Aplicaciones Web.
Una Aplicación Web, es la integración de una Interfaz HTML orientada al usuario, un diseño CSS inteligente y
una funcionalidad Javascript transparente. Actualmente las aplicaciones web son utilizadas para crear
plataformas web dónde los usuarios conozcan el negocio en internet navegando desde un navegador web y
también los administradores del negocio puedan controlar la plataforma de forma remota, sin embargo, la
potencia de las aplicaciones web ha permitido que hoy en día encontremos aplicaciones móviles y videojuegos
en las tiendas para IOS y Android basadas completamente en aplicaciones web gracias a proyectos como
Apache Cordova, Phonegap, Ionic, NativeScript, Expo, entre otros.

ELEMENTOS DE LAS APLICACIONES WEB

El primer elemento de toda aplicación web es el maquetado, el cuál se refiere a la estructura visual que tendrá
la aplicación, dónde se definirán todos los elementos necesarios para que el usuario pueda interactuar con el
negocio, por ejemplo, formularios con campos de entrada de texto, correos, números, etc. También podemos
definir tablas, pestañas, modales, menús, entre otros. Este maquetado se logra a través de HTML (Hyper-Text
Markup Language) el cual es un lenguaje de marcado, que consiste en definir los elementos visuales que
tendrá una interfaz de forma rápida y consistente.

CÓDIGO HTML
Este código utiliza HTML (Lenguaje de Marcado de Hiper Texto), mediante este lenguaje se puede mostrar en
el navegador contenido como texto, imágenes, agrupar este contenido.

Estilos
Comúnmente llamado CCS (Estilos en cascada), este código se utiliza para mejorar el aspecto del contenido
web de nuestras páginas y también para dar efectos de animación.

Java Script
Es un lenguaje de programación, que permite la interacción entre el contenido de la página WEB y el usuario.

SITIO WEB
Indica algunos detalles del contenido o propósito de la página WEB, todas las páginas WEB deben estar
almacenadas en un determinado lugar y para acceder a ellas usaremos direcciones URL y el protocolo HTTP o
HTTPS.
Cualquier proyecto de Internet se muestra con un nombre único e inequívoco. El llamado dominio es uno de
los componentes básicos de los packs de alojamiento web. Los dominios siguen estrictamente la estructura
jerárquica del sistema de nombres de dominio y constan de dominios de nivel superior (p. ej., es), de dominios
libres (dominios de segundo nivel) y de subdominios facultativos. El registro de dominios se realiza a través de
un proveedor de Internet que remite la solicitud a la autoridad competente. Para la elección del dominio están
disponibles, desde formulaciones breves y concisas, hasta dominios de nivel superior comunes y corrientes.
La extensión de un dominio determina el propósito de esta web y su origen.

TIPOS DE PÁGINAS WEB

Los tipos de páginas web se pueden clasificar por su contenido, estructura, tecnología, función y propósito.
Por su contenido Informativas, Transaccionales, Interactivas.
Por su estructura Estáticas, Dinámicas.
Por su tecnología HTML, CSS, JavaScript, CMS (gestores de contenido).
Por su función
Comerciales, Educativas, Informativas, Interactivas, Corporativas, De noticias, De blogs, De redes sociales, De
portfolios.

SERVIDORES WEB
Los COMPUTADORES de alojamiento web para principiantes se llevan a cabo a través del llamado alojamiento
compartido. Con este tipo de alojamiento, son varias las cuentas de hosting las que pueden compartir los
recursos de un mismo servidor. Para los proyectos profesionales de gran envergadura, los proveedores de
alojamiento web ofrecen diferentes posibilidades de servidores web que brindan a los clientes componentes
de hardware de manera exclusiva. A las empresas grandes se les recomienda, además del alquiler, la
adquisición de equipamiento propio.

Lenguaje de hipertexto
El lenguaje de hipertexto es un conjunto de etiquetas que se utilizan para estructurar y mostrar el contenido
de una página web. El lenguaje de hipertexto más conocido es el HTML, que son las siglas en inglés de
Hypertext Markup Language.
Características del lenguaje de hipertexto
 Permite definir la estructura de una página web
 Permite definir el aspecto que mostrará la página web en un navegador
 Permite incluir enlaces a otras páginas o documentos
 Permite crear formularios de activación de transacciones online
 Permite agregar vídeos, sonidos y hojas de cálculo al documento
Cómo funciona el lenguaje de hipertexto
El navegador interpreta las etiquetas HTML y las utiliza para definir el texto y otros elementos que compondrán
una página web.
Ejemplos de etiquetas HTML
 La etiqueta <html> es el elemento raíz que define todo el documento HTML
 La etiqueta <head> contiene información meta como el título y el conjunto de caracteres de la página
 La etiqueta <body> encierra todo el contenido que aparece en la página

 Estructura de una página web

 Cuando hablamos de las partes de una página web, normalmente nos referimos a su estructura. O lo
que es lo mismo, a todos los elementos o funcionalidades que la componen como, por ejemplo, las
secciones o menús, que hacen que se pueda navegar por ella y sea funcional.
 Aunque menos habitual, también es posible referirnos a las partes de una página web para hablar de
su contenido, es decir, las diferentes páginas que se albergan dentro de un sitio web, por ejemplo, la
página de contacto, la de servicios o la propia home o página principal
 Partes de una página web en función de su estructura (estructura
web)

o Cabecera o header
o Cuerpo o body
o Pie de página o footer
 Partes de una página web en función de la distribución del contenido
o Inicio o home
o Contacto
o Productos y servicios
o Quiénes somos o Acerca de
o Blog
o Política de privacidad
HTML
Una página WEB en su formato html, tiene la siguiente estructura básica
Etiqueta de apertura:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

head
 En esta sección se coloca toda la información necesaria para configurar la página web, para ello se
utilizan etiquetas <meta>
 También se puede colocar el título que el navegador mostrará en el computador.

body
 En esta sección se colocan las etiquetas que permiten mostrar el contenido en la página web.

 Editor de Texto
 Las páginas web utilizan texto plano para poder crear sus códigos a través de las etiquetas.
 Entre los editores más utilizados están:
 Visual Studio Code
 Atom
 Sublime Text
 Note Pad ++
 Geany

Visual Studio Code

Este editor fue desarrollado por MicroSoft, tiene licencia del MIT, por lo tanto no se paga nada por usarlo, el
programa es multiplatarfoma, eso significa que puede ser utilizado en diferentes sistemas operativos como
Linux, Windows y IO’s.

 Extensiones
 Para que el programa sea más eficiente requiere de algunos programas desarrollados por terceros que
permiten ayudar a identificar errores de sintaxis, in dentar el código, mostrar los resultados, etc..

Instalar - Extensiones
 Para instalar las extensiones en VS, se requiere tener conexión a internet.
 Paso 1.
 Abrir el programa Visual Studio Code
 Paso 2.
 Seleccionar la opción Extensiones

 Extensiones Recomendadas
 Prettier
 Bracket
 Path Intellisense
 Live Server
 Página WEB
 Las etiquetas HTML, se clasifican en dos:
 Etiquetas de apertura y cierre
 <p> </p>
 Etiquetas de apertura
 <br>
 Etiquetas de Texto
 La etiqueta párrafo <p> </p>, permite mostrar un párrafo de texto en la página web
 Ejemplo:
o <p> Este Mundo es amplio y extenso </p>

TÍTULO
 Para convertir texto en un título se utiliza la etiqueta <h#> </h#>
 Se tienen varias opciones para mostrar Titulos subtítulos.
 h1
 h2
 h3
 h4

 Listas
  Pueden ser de dos tipos:
 Ordenadas y Desordenadas
 Se utiliza la etiqueta
 <ul> <li> </li> </ul>
 Ejemplo
 <ul>
 <li>
 UNO
 </li>
 <li>
 DOS
 </li>
 <li>
 TRES
 </li>
 <li>
 CUATRO
 </li>
 </ul>

Listas Ordenadas
 <ol>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
 ...
 <li>Elemento N</li>
 </ol>
 <ol start="5">
 <li>Julio</li>
 <li>Carmen</li>
 <li>Ignacio</li>
 <li>Elena</li>
 </ol>
 Listas Desplegables
 Este control, es muy útil al momento de seleccionar una opción entre varias alternativas.
 Ejemplo de uso:

 <select >
 <option value="javascript">JavaScript</option>
 <option value="php">PHP</option>
 <option value="java">Java</option>
 <option value="golang">Golang</option>
 <option value="python">Python</option>
 <option value="c#">C#</option>
 <option value="C++">C++</option>
 <option value="erlang">Erlang</option>
 </select>
 Imagenes
 Para insertar una imagen en nuestra pagina utilizaremos la etiqueta:

 <img>
 sus argumentos son:
 < img src=”archivo_imagen” alt=”” width=”px” heigth=”px”>
 picture
 Es la nueva manera de insertar imágenes en una página web de una forma más flexible que con la
etiqueta img que ha venido usándose hasta la versión 5.1. de HTML. La etiqueta picture es preferible,
sobre todo, si queremos diseñar páginas web que se adapten a todo tipo de pantallas, ya que permite
mostrar diferentes imágenes en función de varios parámetros, como las dimensiones de la ventana,
orientación de la ventana, tipo de imagen y resolución del dispositivo.

 <picture>
 <source media="(condición 1)" srcset="imagen_1.jpg">
 <source media="(condición n)" srcset="imagen_n.jpg">
 <img src="imagen_alt" alt="Si no se cumple ninguna condición">
 </picture>
INTRODUCCIÓN
HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un término de
marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas
capacidades de Javascript.

Nuevas etiquetas de HTML5

HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML normal seguirá
funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo único que tienes que hacer es colocar
este DOCTYPE4 antes de la etiqueta :

<!DOCTYPE html>

ETIQUETAS
En HTML4 sólo existía un elemento contenedor sin significado semántico
En HTML5 existen Div, Section y Article que además de cumplir con una comportamiento similar a div aportan
semántica.
<div> :Es el contenedor genérico, es un elemento a nivel de bloque sin sentido adicional semántico.
<section> :Es un "documento genérico o sección de aplicación" Normalmente, tiene un header y suele tener
un footer.
<article> :Es una parte independiente del documento. También suele llevar un título y un footer.
<aside> : Se usa para definir la sidebar.
<footer>: La parte más baja, donde tenemos toda la información
<header>: La cabecera de la web.
<nav>: Se usa para definir el menú o la navegación de la página.

Maqueta en HTML 5

Nuevas Características:
• Audio & Video
• Canvas
• Almacenamiento local
• WebSockets
• Semántica
• Compatibilidad hacia atrás
• Eficacia en el renderizado

AUDIO
La etiqueta <audio> o cualquier tipo de streaming de audio.
Atributos:
• autoplay
• controls
• loop
• preload
• src

La etiqueta define un botón de comando o un radiobutton o un checkbox. Atributos:

• checked
• disabled
• icon
• label
• radiogroup
• type
<command onclick="alert('Hola Mundo')">Haz click aquí</command>
La etiqueta <mark> se usa para destacar una palabra o una parte del texto.
La etiqueta <hgroup> se usa para agrupar titulares (h1,h2).
<hgroup>
<h1>Bienvenidos a mi web</h1>
<h2>La web de HTML5</h2>
</hgroup>
La etiqueta <progress> se usa para visualizar el progreso de una tarea que se esté realizando
<progress>
<span id="objprogress">25</span>%
</progress>
La etiqueta <source> se usa para definir la fuente de un archivo de audio o video.
<audio controls="controls">
<source src="cancion.ogg" type="audio/ogg" />
<source src="cancion.mp3" type="audio/mpeg" />
</audio>
La etiqueta <summary> contiene el encabezado para el elemento details, que se usa para dar detalles sobre un
documento o parte de un documento.
<details>
<summary>Copyright por mi persona.</summary>
<p>Lorem ipsum dolor sit amet....</p>
</details>

META ETIQUETAS
Las Meta etiquetas o meta tags encabezan un documento HTML y suministran información codificada a
navegadores y motores de búsqueda sobre una página web.
Los metadatos son invisibles para el usuario y se encargan de añadir información para facilitar el análisis de los
archivos HTML y la gestión del contenido de una página web. Los meta tags de HTML siguen a menudo la
misma sintaxis: en primer lugar se define un elemento y en segundo lugar se asigna un contenido:
<meta name="Nombre del elemento" content="Contenido asignado"/>

Uso
Los metadatos fueron de gran importancia para el SEO, ahora su influencia en el posicionamiento en los
buscadores más conocidos ha disminuido. Sin embargo, los meta tags siguen siendo relevantes para
metabuscadores y archivos de búsqueda locales, por lo que no está de más contar con una detallada lista de
los mismos. Además, permiten definir indicaciones para guiar a los bots (crawlers) de los motores de
búsqueda.

Codificación
Si la fuente no fue previamente definida en el header del archivo HTTP, es necesario hacerlo usando HTML. Así
se evita, por ejemplo, que la ñ o las tildes no se muestren correctamente. El meta tag que se debe usar es:
<meta charset="utf-8"/>
Este metadato es, además, relevante en el caso de que un navegador acceda a los archivos HTML directamente
desde el disco duro y no los reciba por HTTP.

Description
En la descripción o meta description se puede describir brevemente el contenido de la página web. Esta
información se muestra como snippet (una síntesis en dos líneas del tema de una página que aparece bajo la
URL) en los buscadores de uso más generalizado como Google o Bing, por lo que se recomienda cuidar su
redacción.
La descripción no debe sobrepasar los 160 caracteres de longitud, ya que se corre el riesgo de que esta
aparezca incompleta en la lista de resultados
La meta descripción se dirige principalmente al usuario, por lo que debería contener un resumen preciso del
contenido que le espera cuando haga clic en la página. Según Google, cada subpágina de una página web
debería contar con una descripción propia que facilite información útil y precisa sobre su contenido. Esto
aporta al usuario un valor añadido y ayuda a los administradores a aumentar su ratio de clics. En la meta
descripción se puede encontrar, por ejemplo, la siguiente información:
<meta name="description" content="Los meta tags de HTML codifican información para ser interpretada por el
navegador y los buscadores"/>

KeyWords
Con esta meta etiqueta los administradores tienen la posibilidad de definir palabras clave para el buscador. Las
keywords son aquellos criterios a los que responde un buscador para ofrecerle al usuario páginas HTML como
respuesta, donde tales palabras clave son parte de los meta tags. Anteriormente, esta etiqueta era considerada
como el factor SEO más importante, ya que los buscadores primitivos recurrían a este atributo como
característica central para el posicionamiento en las listas de resultados.
La elección de las palabras clave requiere de cierta sutileza: hay que evitar su uso abusivo, fenómeno conocido
como keyword stuffing, así como aquellas sin relación con el contenido de las páginas en una web. A
consecuencia de que los archivos locales de búsqueda y los metabuscadores acuden a la información en los
meta tags de las palabras clave, se recomienda introducir términos relevantes.
Una línea puede contener varios elementos. Las palabras clave se separan por comas.
<meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"/>

Autor - Derechos de autor

Estos dos meta tags, de uso opcional desde el punto legal, permiten hacer referencia al diseñador de una
página web y al propietario de los derechos del código fuente de una página HTML. En algunos sistemas de
gestión de contenido (CMS), las etiquetas de autor se generan automáticamente y en ellas se nombra a la
persona que ha trabajado la página en último lugar. De esta forma, los administradores pueden extraer del
directorio quién gestiona cada página.
<meta name="author" content="Nombre del autor" />
<meta name="copyright" content="Propietario del copyright" />

Control de Caché
Para asegurar la fluidez del funcionamiento de Internet, las webs se suelen guardar en servidores proxy
intermedios o en el caché del navegador para ser descargadas fácilmente en el futuro.
Para impedirlo usamos el meta tag “cache-control” con el valor no-cache:
<meta http-equiv="cache-control" content="no-cache"/>
Las páginas web que cuentan con este meta tag se cargan nuevamente desde el servidor web cada vez que se
accede a ellas. Esto puede ralentizar la navegación, pero puede ser conveniente en el caso de páginas que
actualizan su contenido diariamente.

Expires
Es posible que no se quiera prohibir el almacenamiento temporal en caché de forma absoluta. En este caso se
puede usar el atributo “http-equiv” para definir una fecha de expiración para los datos HTML solicitados. Se
haría de esta manera:
<meta http-equiv="expires" content="tiempo de expiración en segundos"/>
Así es posible asignar a las páginas HTML la fecha de caducidad que se deseen. Una vez se supera esta fecha, el
navegador tiene que cargar el documento HTML desde la página de origen.

Ejemplo
Pero si tiene que acudir siempre a la página original entonces se introduce un punto de caducidad de 0
segundos. En caso de que se quiera indicar un período de 12 horas, se introducen 43.200 segundos
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="43200"/>

Refresh
Con los meta tags “http-equiv” es posible configurar también una transferencia sencilla. De forma parecida a
como funciona la etiqueta “expires”, con este atributo también se define una fecha de vencimiento, a partir de
la cual los navegadores o los motores de búsqueda serán dirigidos a una URL establecida previamente.
<meta http-equiv="refresh" content="10"/>

Estructura
HTML
Una página WEB en su formato html, tiene la siguiente estructura básica
Etiqueta de apertura:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>
head
 En esta sección se coloca toda la información necesaria para configurar la página web, para ello se
utilizan etiquetas <meta>
 También se puede colocar el título que el navegador mostrará en el computador.

body
 En esta sección se colocan las etiquetas que permiten mostrar el contenido en la página web.

Editor de Texto
 Las páginas web utilizan texto plano para poder crear sus códigos a través de las etiquetas.
 Entre los editores más utilizados están:
 Visual Studio Code
 Atom
 Sublime Text
 Note Pad ++
 Geany
 bloc de notas notepad

Visual Studio Code

 Este editor fue desarrollado por MicroSoft, tiene licencia del MIT, por lo tanto no se paga nada por
usarlo, el programa es multiplataforma, eso significa que puede ser utilizado en diferentes sistemas
operativos como Linux, Windows y IO’s.

Extensiones
 Para que el programa sea más eficiente requiere de algunos programas desarrollados por terceros que
permiten ayudar a identificar errores de sintaxis, indentar el código, mostrar los resultados, etc..

Instalar - Extensiones
 Para instalar las extensiones en VS, se requiere tener conexión a internet.
 Paso 1.
 Abrir el programa Visual Studio Code
 Paso 2.
 Seleccionar la opción Extensiones

Extensiones Recomendadas
 Prettier
  Bracket
 Path Intellisense
 Live Server

Página WEB
 Las etiquetas HTML, se clasifican en dos:
 Etiquetas de apertura y cierre
 <p> </p>
 Etiquetas de apertura
 <br>

Etiquetas de Texto
 La etiqueta párrafo <p> </p>, permite mostrar un párrafo de texto en la página web
 Ejemplo:
 <p> Este Mundo es amplio y extenso </p>

TÍTULO
 Para convertir texto en un título se utiliza la etiqueta <h#> </h#>
 Se tienen varias opciones para mostrar Titulos subtítulos.
 h1
 h2
 h3
 h4

Listas
 Pueden ser de dos tipos:
 Ordenadas y Desordenadas
 Se utiliza la etiqueta
 <ul> <li> </li> </ul>

Ejemplo
 <ul>
 <li>
 UNO
 </li>
  <li>
 DOS
 </li>
 <li>
 TRES
 </li>
 <li>
 CUATRO
 </li>
 </ul>

Listas Ordenadas
 <ol>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
 ...
 <li>Elemento N</li>
 </ol>
 <ol start="5">
 <li>Julio</li>
 <li>Carmen</li>
 <li>Ignacio</li>
 <li>Elena</li>
 </ol>
Listas Desplegables
Este control, es muy útil al momento de seleccionar una opción entre varias alternativas.

Ejemplo de uso:

<select >

<option value="javascript">JavaScript</option>

<option value="php">PHP</option>

<option value="java">Java</option>

<option value="golang">Golang</option>
 <option value="python">Python</option>

<option value="c#">C#</option>

<option value="C++">C++</option>

<option value="erlang">Erlang</option>

</select>

Imagenes
Para insertar una imagen en nuestra pagina utilizaremos la etiqueta:

<img>

sus argumentos son:

< img src=”archivo_imagen” alt=”” width=”px” heigth=”px”>

picture
Es la nueva manera de insertar imágenes en una página web de una forma más flexible que con la etiqueta
img que ha venido usándose hasta la versión 5.1. de HTML. La etiqueta picture es preferible, sobre todo, si
queremos diseñar páginas web que se adapten a todo tipo de pantallas, ya que permite mostrar diferentes
imágenes en función de varios parámetros, como las dimensiones de la ventana, orientación de la ventana,
tipo de imagen y resolución del dispositivo.

<picture>

<source media="(condición 1)" srcset="imagen_1.jpg">

<source media="(condición n)" srcset="imagen_n.jpg">

<img src="imagen_alt" alt="Si no se cumple ninguna condición">

</picture>
 ETIQUETAS - EJERCICIOS
EJERCICIO 1
Crear una página web que tenga sus datos personales, con diferentes tipos de letra, tamaño y color

Solución. Para iniciar el proceso de creación de una página web, debemos realizar primero….

1. Elegir y usar un editor de texto, en nuestro caso será Visual Studio Code.
2. Crear entorno de trabajo. Significa que debemos crear una carpeta (con nuestros apellidos) en el disco
duro.
3. Abrir la carpeta usando el editor

 Ingresar a la carpeta desde la terminal y escribir code .

 Usar la opción Abrir Carpeta (VC)
 4. Crear el archivo index.html
 5. En la página en blanco escribir: el símbolo de admiración !
 !
 El editor escribirá la estructura de una página web

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

</head>

<body>

</body>

</html>

En la sección de body escribir:

<body>

<h1> DATOS PERSONALES </h1>

<h2> BÁSICOS</h2>

<h3> Nombre: </h3>

<h3> Edad: </h3>

<h3> Fecha de Nacimiento: </h3>

<h3> Trabajo / Profesión: </h3>

<h2> ESTUDIOS </h2>

<h4> Escuela : </h4>

<h4> Bachiller:</h4>

</body>

Formato
<b> : Negrilla

<u>: Subrrayado

<font color="#9900FF"> </font> : Color al texto usando la palabra color

size: Define el Tamaño del texto → <font size=”12”> </font>

Abreviaturas emmet
ANIDAR
Para anidar un elemento dentro de otro, lo que podemos hacer es lo siguiente, a nuestra plantilla HTML
vamos a escribirle dentro de la etiqueta body un main que contenga una section, entonces escribimos:
main>section

section>aside>div>p

Agregar elementos hermanos

Ahora, vamos a pensar que en la primera sección que habíamos generado vamos a colocar un div y un aside
como nodos hermanos, para esto podemos agregar el símbolo de suma (+), por ejemplo: div+aside

Ahora, vamos a pensar que en la primera sección que habíamos generado vamos a colocar un div y un aside
como nodos hermanos, para esto podemos agregar el símbolo de suma (+), por ejemplo: div+aside

Multiplicar elementos
Si realizamos: div*3 obtendremos

<div></div>

<div></div>

<div></div>

Agrupar elementos
Si escribimos: footer>(ul>li*3>a)*3

<footer>

<ul>
 <li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

</ul>

<ul>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

</ul>

<ul>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

</ul>

</footer>

IMÁGENES

Para colocar una imagen se usa la etiqueta:

<img src=”” >

Enlaces
Se utiliza la etiqueta <a href=”” > </a>

<a href=”” > texto</a>

href:indica la dirección en la que se encuentra la pagina html

texto: Es la palabra(s) que hacen referencia al enlace

TABLA
<table>

<tr> </tr> : indica una fila

<td> </td> indica una columna

LABORATORIO 4
M.Sc. Fernando Arellano Ponce
Propósito
Utilizar las etiquetas para generar listas y tablas en tres páginas web

TABLAS
Las tablas son estructuras bidimensionales que se utilizan para organizar la información, hace años se solía
utilizar para la maqueta del sitio. Las etiquetas son: table : crea una tabla theader:Crea la cabecera de la tabla
tbody: incia el cuerpo de la tabla es decir su contenido tr: crea una fila td: crea una columna

UNIR COLUMNAS
SPANCOL: propiedad que se usa para unir (combinar) columnas
spanrow: propiedad que se usa para combinar filas

Listas
La etiqueta que se utiliza para crear una lista es :
<ul>
<li> </li>
</ul>
Listas ordenadas
<ol>
<li> </li>
</ol>
<ol type=’A’> <ol type=’I´> <ol type=’5’>
<li> <li> SECRETARIADO <li> SECRETARIADO
SECRETARIADO </li> </li>
</li> <li> SISTEMAS </li> <li> SISTEMAS </li>
<li> SISTEMA </ol> </ol>
</li>
</ol>

Listas de descripciones
lista de descripción es un tipo especial de …lista se crea mediante etiquetas "<dl> que encapsulan un conjunto
de etiquetas <dt> y <dd> Los elementos se crea de una etiqueta <dd>
<dl>
Marte
<dd>El planeta más cercano al Sol </dd>
<dt>Tierra </dt>
<dd> Nuestro planeta </dd>
</dl>

Lista desplegable
<select name="lenguajes" id="lang">
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option> <
option value="C++">C++</option>
<option value="kotlin">Kotlin</option>
</select>

Botones radio
<fieldset>

<legend>Seleccione una opcion: </legend> <div>

<input type="radio" id="casio" name="casio" value="casio" checked />
<label for="casio">Casio</label>
</div>
<div>
<input type="radio" id="oliveti" name="oliveti" value="oliveti" />
<label for="oliveti">Oliveti</label>
</div>
<div>
<input type="radio" id="citizen" name="citizen" value="citizen" />
<label for="louie">Citizen</label>
</div>
</fieldset>

Check Box
<label >
<input type="checkbox" id="cbox1" value="first_checkbox" /> Este es mi primer checkbox</label >
<br />
<input type="checkbox" id="cbox2" value="second_checkbox" />
<label for="cbox2">Este es mi segundo checkbox</label>