Presentacion5HTML 5965cce4812ec77

Desarrollo Web – Front-End
HTML
Front-End
• Front-End se le llama a la parte del sitio web con la que el usuario interactúa.
• Es lo que algunos llaman “el lado del cliente”.
• También se refiere a las tecnologías que se ejecutan del lado del cliente, es decir,
del lado del navegador web y son desarrolladas en tres lenguajes específicos:
• HTML
• CSS
• JavaScript
• El Front-End de una aplicación/sitio se encarga de simplificar y realzar la página

de tal manera que sea amigable y cómoda para el usuario.
Estructura Front-End de una página Web
Elementos Front-End
• Estructuración: Generalmente utiliza HTML, lo que permite que se pueda
mantener el código de forma organizada, permitiendo además agregar algunas
funciones como geolocalización, opciones multimedia, entre otras.
• Presentación: Se utiliza CSS para presentar todo lo estructurado en HTML, de tal
forma que sea más agradable a la vista, ya sea con bordes, fondos múltiples,
sombras, degradados o incluso paleta de colores.
• Interactividad: Se utiliza JavaScript y parte de sus frameworks para hacer el
diseño interactivo.
Es recomendable que los tres elementos estén presentes, sin estos el Front-End no
funcionará adecuadamente y no tendrá el mejor rendimiento. Como consecuencia
cuando los usuarios interactúen con el Front-End los errores empezarán a aparecer.
HTML
• HTML (HyperText Markup Language).
• Es un lenguaje que da formato, más no es un lenguaje de programación.
• Define la sintaxis y ubicación de imágenes, instrucciones y objetos en el
navegador.
• Permite realizar conexión entre diferentes documentos, o con otros recursos en
Internet a través de hipertexto.
• Lenguaje de marcas.
• Código abierto.
• Editores: VS Code, Notepad, Sublime Text, entre otros.
Estándares de HTML
• HTML 1: Desarrollado en el CERN.
• HTML 2.0: Incluye mejoras en NCSA Mosaic (formularios e imágenes).
• HTML 3.2: Mejoras para controlar el formateo de tablas, etc.
• HTML 4.0: Mejoras para publicaciones multiplataforma (CSS, XML, WAP, DHTML).
• HTML 5.0: Mejoras de HTML 4.0, herramientas tipo "escritorio" en versión web.
Extensiones para Visual Studio Code para HTML
HTML5
Estructura base de un documento html.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Título</title>
<!– Encabezado de la web. Aquí incluiremos metainformación y
cargaremos componentes y estilos utilizados en la web-->
</head>
<body>
<!– Cuerpo de la web. Aquí escribiremos el contenido-->
…..
</body>
</html>
Estructura de un documento HTML
Cabecera: <head> </head>
• Título de la página: <title> </title>
• Meta-tags: <meta http-equiv="Content-language" content="es">
• Estilos: <link rel="stylesheet" href="estilo.css" media="screen" type="text/css">
Cuerpo: <body> </body>

• <body background="imagenes/logo_usabilidad.gif">
• <body bgcolor="white">
• <body leftmargin="5px" bottommargin="5px">
El concepto de elemento HTML
• Los elementos son los componentes fundamentales del HTML.
• Se definen 2 propiedades básicas:

• Atributos.
• Contenido.
• Están conformados con una etiqueta de apertura y otra de cierre.
• Los atributos se colocan dentro de la etiqueta de apertura, y el contenido se coloca

entre la etiqueta de apertura y la de cierre.
Fundamentación básica de HTML
Atributos en los Elementos de HTML
• Los atributos son utilizados para personalizar las etiquetas. ¿Qué significa esto?
Si por algún motivo, algún día quieres cambiar de tamaño una imagen o una tabla
o cambiar el color de la fuente, entonces lo que necesitas es un atributo HTML.
Todo esto es posible con la ayuda de los atributos. La mayoría de las etiquetas
tienen sus propios atributos
Tipos de elementos de HTML
• Estructurales: Describen el propósito del texto y no denotan ningún formato
específico.
<h1>Curso HTML</h1>
• De presentación: Describen la apariencia del texto, independientemente de su

función.
<b>Curso HTML</b>
Los elementos de presentación se encuentran obsoletos desde la aparición del CSS.
• De hipertexto: Relaciona una parte del documento a otros documentos.

<a href=“http://www.uninorte.edu.co”>Universidad del Norte</a>
Elementos de HTML
• Títulos: <h1> </h1>, <h2> </h2>,…, <h6> </h6>
• Párrafos: <p> </p>
• Listas (ol, ul): <ol> <li> </li> <li> </li> </ol>
• Vínculos: <a href=http://.........>Descripción</a>
<a href=“mailto:[email protected]”>Juan</a>
• Avance de línea: <br>
• Imágenes: <img scr="miimagen.gif" width=130 height=50>

Elementos de HTML
• Texto en negritas: <strong> </strong>
• Tablas: <table> </table>
• Filas de una tabla: <tr> </tr>
• Celdas de una tabla: <td> </td>
• Encabezado de una tabla: <th> </th>

Ejemplo HTML
<html>
<head>
<title>Primer ejemplo en HTML</title>
</head>
<body>
<h1>Mis canciones favoritas</h1>
<h2>Grupo 1</h2>
<p>Descripción del grupo</p>
<ol>
<li>Canción 1</li>
<li>Canción 2</li>
</ol>
</body>
<html>
Formularios en HTML
• Un formulario es una
página escrita en HTML
que tiene elementos
especiales, los cuales le
permiten al usuario
introducir datos que
serán enviados al
servidor Web.
Formularios en HTML
Un formulario en HTML es el segmento de un documento HTML que aparece entre las
etiquetas <form></form>.
Suma.html
<html>
<body>
<form>
<input type="text" name="op1" />
+
<input type="text" name="op2" />
<input type="submit" value=" = " />
</form>
</body>
</html>
iframes
En HTML5, <iframe> (Inline Frame) es una etiqueta que se utiliza para incrustar otro
documento HTML o recurso externo dentro de una página web. Los iframes son útiles
para mostrar contenido de otras fuentes, como páginas web externas,
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video de YouTube con Iframe</title>
</head>
<body>
<h1>Video de YouTube</h1>
<iframe width="900" height="500" src="https://zonacero.com/" frameborder="0"
allowfullscreen></iframe>
</body>
</html>
Etiqueta pre
El elemento HTML "pre" nos permite mostrar toda la información que está contenida
entre las marcas de comienzo y fin tal cual como lo hemos escrito respetando inclusive
los espacios en blanco y salto de líneas.
<!DOCTYPE html>
<html>
<head>
<title>título página</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Etiqueta HTML pre</h1>
<pre>
select * from editoriales
left join libros
on editoriales.codigo=libros.codigoeditorial;
</pre>
</body>
</html>
Etiqueta div
La etiqueta <div> en HTML es una de las etiquetas más utilizadas y versátiles. "Div"
es una abreviatura de "division" (división en inglés), y se utiliza para dividir o
agrupar contenido en bloques. Esta etiqueta no tiene un significado semántico
propio, pero es fundamental para la estructura y el diseño de una página web.
<div>

</div>
La etiqueta <div> se utiliza para crear un contenedor genérico sin un significado

semántico específico.
Puedes anidar varias etiquetas <div> para organizar y estructurar el contenido de
tu página web.
Etiqueta div Propósito y Uso:
Agrupación de Contenido:
Se utiliza para agrupar y organizar secciones relacionadas de contenido.

Permite aplicar estilos y reglas de diseño específicas a un conjunto particular de
elementos.
Aplicación de Estilos y Clases:
Es común asignar clases (class) a elementos <div> para aplicar estilos CSS
específicos a esos bloques.
Layout y Estructura:
Utilizado para establecer la estructura general de la página, dividiendo el

contenido en secciones y bloques.
Etiqueta div atributos:
La etiqueta div no es más que un contenedor para otras etiquetas. Estos son los
atributos mas importante de la etiqueta div:
id - define una id para hacer referencia el div vía javascript

title - muestra un titulo del elemento
style - define estilo vía CSS inline
height - altura del div. Es recomendable usar CSS
width - ancho del div. Es recomendable usa CSS
Etiqueta div Ejemplo de Uso:
<div id="my_menu" align="right">
<a href="#">HOME</a> | <a href="#">CONTACT</a> | <a href="#">ABOUT</a>
</div>
<div id="my_content" align="left" bgcolor="white">

<h4>HTML title here</h4>
<p>The div tag is a non-visual (by default) element that can be used to apply
additional properties to content contained within it. Unlike the span tag</p>
</div>
Elementos semanticos
Los elementos semánticos en HTML5 son etiquetas que proporcionan un significado adicional al
contenido, haciendo que la estructura del documento sea más comprensible tanto para los
desarrolladores como para los navegadores. Estos elementos se centran en describir la estructura y
el significado del contenido, más que simplemente indicar cómo debería ser presentado
visualmente. Aquí hay algunos de los elementos semánticos más comunes en HTML5:
<section>:
Descripción: Representa una sección o área temática en un documento. Se utiliza para agrupar
contenido relacionado. Puede contener encabezados, párrafos, listas y otros elementos.
<article>:
Descripción: Define un contenido independiente y autónomo que podría ser distribuido y
reutilizado por separado. Ejemplo: artículos de noticias, entradas de blog.
<nav>:
Descripción: Define un bloque de navegación, como menús y enlaces. Debería contener enlaces a
otras páginas o secciones del sitio.
<aside>:
Descripción: Representa contenido tangencialmente relacionado

con el contenido que lo rodea. Puede ser utilizado para barras
laterales, notas de margen, publicidad, etc.
<header>:
Descripción: Define un encabezado para una sección o grupo de
contenido. Contiene elementos como títulos, logotipos y enlaces de
navegación.
<footer>:
Descripción: Define un pie de página para una sección o el documento completo.
Puede contener información de derechos de autor, enlaces de contacto, etc.
<main>:
Descripción: Representa el contenido principal del documento. Debería contener el
contenido principal de la página, excluyendo encabezados, pies de página y barras
laterales.
<figure> y <figcaption>:
<figure> - Descripción: Se utiliza para agrupar cualquier contenido que se refiera a
un solo concepto, como una imagen, un gráfico o un código.
<figcaption> - Descripción: Proporciona una descripción para el contenido dentro de
un elemento <figure>.
Taller Investigar cómo Subir las páginas HTML
a un servidor de Internet
Usar:
https://co.000webhost.com/

Presentacion5HTML 5965cce4812ec77

Cargado por

Copyright:

Formatos disponibles

Presentacion5HTML 5965cce4812ec77

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Presentacion5HTML 5965cce4812ec77

Cargado por

Copyright:

Formatos disponibles

Desarrollo Web – Front-End

• Es lo que algunos llaman “el lado del cliente”.

• El Front-End de una aplicación/sitio se encarga de simplificar y realzar la página

• HTML 2.0: Incluye mejoras en NCSA Mosaic (formularios e imágenes).

• HTML 3.2: Mejoras para controlar el formateo de tablas, etc.

Estructura base de un documento html.

Cuerpo: <body> </body>

• Se definen 2 propiedades básicas:

• Están conformados con una etiqueta de apertura y otra de cierre.

• Los atributos se colocan dentro de la etiqueta de apertura, y el contenido se coloca

• De presentación: Describen la apariencia del texto, independientemente de su

• De hipertexto: Relaciona una parte del documento a otros documentos.

• Párrafos: <p> </p>

• Listas (ol, ul): <ol> <li> </li> <li> </li> </ol>

• Vínculos: <a href=http://.........>Descripción</a>

• Avance de línea: <br>

• Imágenes: <img scr="miimagen.gif" width=130 height=50>

• Tablas: <table> </table>

• Filas de una tabla: <tr> </tr>

• Celdas de una tabla: <td> </td>

• Encabezado de una tabla: <th> </th>

La etiqueta <div> se utiliza para crear un contenedor genérico sin un significado

Se utiliza para agrupar y organizar secciones relacionadas de contenido.

Aplicación de Estilos y Clases:

Utilizado para establecer la estructura general de la página, dividiendo el

id - define una id para hacer referencia el div vía javascript

<div id="my_content" align="left" bgcolor="white">

Descripción: Representa contenido tangencialmente relacionado

También podría gustarte