Diapositivas Unidas

UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
DESARROLLO DE APLICACIONES WEB
MSIG. JEFFERSON ELIAS NÚÑEZ GAIBOR
jefferson.nunezg@ug.edu.ec
13/7/2021 20:37:19
Universidad de Guayaquil
Facultad de Ciencias Matemáticas y Físicas
UNIDAD 1: INTRODUCCIÓN A
Carrera de Ingeniería en Sistemas Computacionales LAS APLICACIONES WEB
1.1 El internet y la web (nacimiento y crecimiento )
La world wide web es solo una manera de acceder a la información a través de Internet,
y aunque representa una gran porción de esta y sin duda la más popular, no deben
tratarse como sinónimos, porque no son lo mismo.
Internet es una red de computadoras que se encuentran interconectadas a nivel
mundial para compartir información.
Fuentes:
https://www.diferenciador.com/diferencia-entre-internet-y-web/
http://ific.uv.es/wop/SABER_MAS/internet.html
https://blogthinkbig.com/internet-y-la-web
13/7/2021 20:37:20
Desarrollo de Aplicaciones Web
1.2 Evolución de las aplicaciones Web
Fuentes:
https://www.timetoast.com/timelines/la-evolucion-de-las-aplicaciones-
web-499d1f8a-5537-44cf-bf36-86906c92f067
13/7/2021 20:37:20
1.3 El modelo cliente /servidor
Es un modelo de diseño de software en el que las tareas se reparten entre los

proveedores de recursos o servicios, llamados servidores, y los demandantes,
llamados clientes. Un cliente realiza peticiones a otro programa, el servidor, quien le
da respuesta. Esta idea también se puede aplicar a programas que se ejecutan sobre
una sola computadora, aunque es más ventajosa en un sistema operativo multiusuario
distribuido a través de una red de computadoras.
Algunos ejemplos de aplicaciones computacionales que usen el modelo cliente-
servidor son el Correo electrónico, un Servidor de impresión y la World Wide Web.
13/7/2021 20:37:20
1.4 Protocolos de internet (Arquitectura TCP/IP)
Nivel Aplicaciones
Servicios específicos a
usuarios
Transmitir datos de
forma óptima y libre de
errores entre
aplicaciones
Comunicación de
paquetes a través de la
red
Enlace y física entre

equipos
Nivel Físico
13/7/2021 20:37:20
1.5 URI
Uniform Resource Identifier: identificador uniforme de recursos.

Cadena que indica un recurso en internet. Puede llevar datos adicionales que
indiquen cosas como de qué forma acceder al recurso.
URN indica un nombre único y público de un recurso en internet.
URI identifica recurso pudiendo cambiar o no en toda la vida, la URL localiza por
lo que sí puede cambiar; quiere decir que una URL es siempre una URI, pero no
toda URI es una URL
13/7/2021 20:37:20
1.5 URL
Localizador de Recursos Uniforme, es un Identificador de recursos uniforme (Uniform

Resource Identifier, URI) define donde y como encontrar un recurso (pueden cambiar), esto es,
la dirección puede apuntar a recursos variables en el tiempo.
13/7/2021 20:37:20
Carrera de Ingeniería en Sistemas Computacionales
1.5 URI, URL y nombres de dominio
DNS (Domain Name System)

• Es el modo en el que los nombres de dominios en
internet son localizados y traducidos a direcciones IP.
• DNS: Nombres tienen una estructura jerarquica.

1.6 Protocolos http
(Hypertext Transfer Protocol, Protocolo de transferencia de hipertexto)
El propósito del protocolo HTTP es permitir la

transferencia de archivos (principalmente, en
formato HTML). entre un navegador (el cliente)
y un servidor web localizado mediante una
cadena de caracteres denominada
dirección URL.
13/7/2021 20:37:20
1.6 Protocolos http

El modelo Request/response de HTTP
1.6 Protocolos http

El modelo Request/response de HTTP
1.7 Servidores y Navegadores Web
• Obtiene la información del web.

–Más popular
– Netscape, Mozzilla, Chrome, Microsoft Internet Explorer
HTTP: Web Browser • Diferentes plataformas
– Opera, Safari
• Rápido
– Lynx
• Basado en texto
1.7 Servidores y Navegadores Web

HTTP: Web Server
• Programa que espera requerimientos de un cliente.

Provee ciertas funciones:
– Servir páginas web
– Correr programas y retornar la salida
– Controlar acceso al servidor
– Monitorear y loguear accesso
Ej. Apache, IIS, Netscape Web server, …
13/7/2021 20:37:20
Tecnologías para el desarrollo web
Cliente Servidor
JavaScript JSP
ASP.net Phyton
VB Script PHP
Html JSF
CSS Servlets
Resumen:
Cómo funciona la Web?
• 3 conceptos fundamentales: Web Server
• – URLs: direcciones de los recursos.
• – HTTP: diálogo entre cliente y servidor.
• – HTML: formato de los recursos. Web Browser
1 Click en la dirección (URL)

http://www.ug.edu.ec
2 Browser envía comando HTTP (METHOD):
Se conecta a www.ug.edu.ec
GET /inicio.html
3 Computadora remota envía el archivo
4 Computadora local muestra el archivo HTML
Prof: Ing. Karla Abad

1.8 Lenguajes de marcado

SGML (Standard Generalized Markup Language)
El lenguaje de marcado generalizado estándar(SGML; ISO 8879: 1986) es un

estándar para definir lenguajes de marcado generalizados para documentos.
HTML en teoría era un ejemplo de un lenguaje basado en SGML hasta HTML5,

que admite que los navegadores no pueden analizar como SGML (por razones de
compatibilidad) y codifica exactamente lo que debe hacer en su lugar.
SGML fue trabajado en 1998 al formato XML, un perfil exitoso de SGML. El uso
completo de SGML se encuentra raramente o nulo en nuevos proyectos.
1.8 Lenguajes de marcado

XML (eXtensible Markup Language)
Lenguaje de Marcado Extensible, es un meta-lenguaje que

permite definir lenguajes de marcas desarrollado por el
World Wide Web Consortium (W3C) utilizado para
almacenar datos en forma legible.
Proviene del lenguaje SGML y permite definir la gramática
de lenguajes específicos para estructurar documentos
grandes.
XML no ha nacido únicamente para su aplicación en Internet, sino que se

propone como un estándar para el intercambio de información estructurada
entre diferentes plataformas. Se puede usar en bases de datos, editores de
texto, hojas de cálculo y casi cualquier cosa imaginable.
Carrera de Ingeniería en Sistemas Computacionales 1.9 HTML: estructura y sintaxis
1.9.1 HTML: Elementos estructurales
Carrera de Ingeniería en Sistemas Computacionales 1.9 HTML: estructura y sintaxis
Para más detalles y ejercicios, se sugiere visitar:

https://www.w3schools.com/html
HTML: ESTRUCTURA Y SINTAXIS
TABLAS HTML
 Las tablas HTML permiten a los desarrolladores web organizar los datos en filas y columnas.
13/7/2021 21
DEFINIR UNA TABLA HTML
 La etiqueta <table> define una tabla HTML.

 Cada fila de la tabla se define con una etiqueta <tr>.
 Cada encabezado de tabla se define con una etiqueta <th>.
 Cada tabla de datos / celda se define con una etiqueta <td>.
 Por defecto, el texto en los elementos <th> está en negrita y centrado.
 Por defecto, el texto en los elementos <td> es regular y está alineado a la
izquierda.
 Los elementos <td> son los contenedores de datos de la tabla. Pueden
contener todo tipo de elementos HTML; texto, imágenes, listas, otras
tablas, etc.
13/7/2021 22
TABLA HTML: CELDA QUE ABARCA MUCHAS COLUMNAS
 Para hacer que una celda abarque más de una

columna, use el atributo colspan:
13/7/2021 23
TABLA HTML: CELDA QUE ABARCA MUCHAS FILAS
 Para hacer que una celda abarque más de una fila,

use el atributo rowspan:
13/7/2021 24
TABLA HTML: AGREGAR UN TÍTULO
 Para agregar un título a una tabla, use la etiqueta

<caption>.
 La etiqueta <caption> debe insertarse
inmediatamente después de la etiqueta <table>.
13/7/2021 25
LISTAS HTML
 Las listas HTML permiten a los desarrolladores web agrupar un conjunto de elementos relacionados en listas.
13/7/2021 26
LISTA HTML DESORDENADA
 Una lista desordenada comienza con la etiqueta

<ul>. Cada elemento de la lista comienza con la
etiqueta <li>.
 Los elementos de la lista se marcarán con viñetas
(pequeños círculos negros) de forma
predeterminada:
13/7/2021 27
LISTA HTML ORDENADA
 Una lista ordenada comienza con la etiqueta <ol>.

Cada elemento de la lista comienza con la etiqueta
<li>.
 Los elementos de la lista se marcarán con números
de forma predeterminada.
13/7/2021 28
LISTAS DE DESCRIPCIÓN HTML
 HTML también admite listas de descripción.

 Una lista de descripción es una lista de términos,
con una descripción de cada término.
 La etiqueta <dl> define la lista de descripción,
 la etiqueta <dt> define el término (nombre) y
 la etiqueta <dd> describe cada término:
13/7/2021 29
BLOQUES HTML Y ELEMENTOS EN LÍNEA
HTML
13/7/2021 30
ELEMENTOS A NIVEL DE BLOQUE
 Un elemento de nivel de bloque siempre comienza

en una nueva línea y ocupa todo el ancho disponible
(se extiende hacia la izquierda y la derecha tanto
como sea posible).
 El elemento <div> es un elemento de nivel de
bloque.
13/7/2021 31
ELEMENTOS A NIVEL DE BLOQUE EN HTML
13/7/2021 32
ELEMENTOS EN LÍNEA
 Un elemento en línea no comienza en una nueva

línea y solo ocupa el ancho que sea necesario.
 Un elemento en línea no puede contener un

elemento de nivel de bloque.
13/7/2021 33
ELEMENTOS EN LÍNEA EN HTML
13/7/2021 34
EL ELEMENTO <DIV>
 El elemento <div> se usa a menudo como

contenedor para otros elementos HTML.
 El elemento <div> tiene atributos no son
necesarios, pero style, class y id son
comunes.
 Cuando se usa junto con CSS, el elemento
<div> se puede usar para diseñar bloques
de contenido:
13/7/2021 35
EL ELEMENTO <SPAN>
 El elemento <span> es un contenedor en línea que

se usa para marcar una parte de un texto o una
parte de un documento.
 El elemento <span> tiene atributos no son
necesarios, pero style, class y id son comunes.
 Cuando se usa junto con CSS, el elemento <span>
se puede usar para dar estilo a partes del texto:
13/7/2021 36
APUNTES
 Hay dos valores de visualización: bloque y en línea

 Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible
 Un elemento en línea no comienza en una nueva línea y solo ocupa tanto ancho como sea necesario
 El elemento <div> es un nivel de bloque y a menudo se usa como contenedor para otros elementos HTML
 El elemento <span> es un contenedor en línea utilizado para marcar una parte de un texto o una parte de un
documento
13/7/2021 37
CREAR PÁGINA(S) WEB HTML5
CONSIDERANDO SU ESTRUCTURA ESENCIAL DE ACUERDO AL ENUNCIADO PROPUESTO.
13/7/2021 38
HTML: ESTRUCTURA Y SINTAXIS
INTRODUCCIÓN
HTML
13/7/2021 40
LENGUAGE HTML
 HTML es el lenguaje de marcado

estándar para crear páginas web.
13/7/2021 41
¿QUÉ ES EL HTML?
 HTML significa lenguaje de marcado de hipertexto

 HTML es el lenguaje de marcado estándar para
crear páginas web
 HTML describe la estructura de una página web
 HTML consiste en una serie de elementos
 Los elementos HTML le dicen al navegador cómo
mostrar el contenido
 Los elementos HTML etiquetan piezas de contenido
como "este es un encabezado", "este es un párrafo",
"este es un enlace", etc.
13/7/2021 42
UN DOCUMENTO HTML SIMPLE
Ejemplo explicado:
 La <!DOCTYPE html> declaración define que este documento es un
documento HTML5
 El <html> elemento es el elemento raíz de una página HTML.
 El <head> elemento contiene metainformación sobre la página HTML.
 El <title> elemento especifica un título para la página HTML (que se muestra
en la barra de título del navegador o en la pestaña de la página)
 El <body> elemento define el cuerpo del documento y es un contenedor para
todos los contenidos visibles, como encabezados, párrafos, imágenes,
hipervínculos, tablas, listas, etc.
 El <h1> elemento define un encabezado grande
 El <p> elemento define un párrafo.
13/7/2021 43
¿QUÉ ES UN ELEMENTO HTML?
Un elemento HTML se define mediante una etiqueta de inicio, algo de contenido y una etiqueta de finalización:
 < tagname > El contenido va aquí ... < / tagname >
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta de finalización:
 < h1 > Mi primer encabezado < / h1 >
 < p > Mi primer párrafo. < / p >
Nota: Algunos elementos HTML no tienen contenido (como el elemento <br>). Estos elementos se llaman elementos
vacíos. ¡Los elementos vacíos no tienen una etiqueta final!
13/7/2021 44
NAVEGADORES WEB
 El propósito de un navegador web

(Chrome, Edge, Firefox, Safari) es leer
documentos HTML y mostrarlos
correctamente.
 Un navegador no muestra las etiquetas
HTML, pero las usa para determinar cómo
mostrar el documento:
13/7/2021 45
ESTRUCTURA DE PÁGINA HTML
 Nota: Solo el contenido

dentro de la sección
<body> (el área blanca)
se mostrará en un
navegador.
13/7/2021 46
EDITORES HTML
 Las páginas web se pueden crear y modificar utilizando editores HTML profesionales.
 Sin embargo, para aprender HTML, se recomienda un editor de texto simple como Notepad (PC) o TextEdit
(Mac).
 Creemos que usar un editor de texto simple es una buena manera de aprender HTML.
13/7/2021 47
PRIMERA PÁGINA WEB CON BLOC DE NOTAS / TEXTEDIT
O CUALQUIER OTRO EDITOR
PRÁCTICA HTML
13/7/2021 48
DOCUMENTOS HTML
 Todos los documentos HTML deben comenzar con una declaración

de tipo de documento: <!DOCTYPE html>.
 El documento HTML en sí comienza <html>y termina con </html>.
 La parte visible del documento HTML está entre <body>y </body>.
13/7/2021 49
LA DECLARACIÓN <! DOCTYPE>
 La <!DOCTYPE>declaración representa el tipo de documento y ayuda a los navegadores a mostrar las páginas
web correctamente.
 Solo debe aparecer una vez, en la parte superior de la página (antes de cualquier etiqueta HTML).
 La <!DOCTYPE>declaración no distingue entre mayúsculas y minúsculas.
 La <!DOCTYPE>declaración para HTML5 es:
13/7/2021 50
ENCABEZADOS HTML
 Los encabezados HTML se definen con las etiquetas <h1>to <h6>.

 <h1>define el encabezado más importante. <h6>define el encabezado menos importante:
13/7/2021 51
PÁRRAFOS HTML
 Los párrafos HTML se definen con la <p> etiqueta:
13/7/2021 52
ENLACES HTML
 Los enlaces HTML se definen con la <a> etiqueta:
13/7/2021 53
IMÁGENES HTML
 Las imágenes HTML se definen con la <img>etiqueta.

 El archivo fuente (src), el texto alternativo (alt) width, y height se proporcionan como atributos:
13/7/2021 54
ELEMENTOS DE FORMATO HTML
Los elementos de formato fueron diseñados para mostrar tipos especiales de texto:
 <b> - Texto en negrita
 <strong> - Texto importante
 <i> - Texto en cursiva
 <em> - Texto enfatizado
 <mark> - Texto marcado
 <small> - Texto más pequeño
 <del> - Texto eliminado
 <ins> - Texto insertado
 <sub> - Texto del subíndice
 <sup> - Texto superíndice
13/7/2021 55
COMENTARIOS HTML
 Los comentarios HTML no se muestran en el  Con comentarios, puede colocar notificaciones y

navegador, pero pueden ayudar a documentar su recordatorios en su código HTML:
código fuente HTML.
 Observe que hay un signo de exclamación (!) En la

etiqueta de inicio, pero no en la etiqueta de
finalización.
 El navegador no muestra comentarios, pero pueden
ayudar a documentar su código fuente HTML.
13/7/2021 56
COLORES HTML
Nombres de colores
 En HTML, se puede especificar un color utilizando un nombre de color:
13/7/2021 57
COLOR DE FONDO
 Puede establecer el color de fondo para los elementos HTML:
13/7/2021 58
COLOR DE TEXTO
 Puedes configurar el color del texto:
13/7/2021 59
COLOR DE BORDE
 Puede establecer el color de los bordes:
13/7/2021 60
SEGUNDA PÁGINA WEB CON BLOC DE NOTAS / TEXTEDIT
O CUALQUIER OTRO EDITOR
PRÁCTICA HTML
13/7/2021 61
PRÁCTICA HTML
13/7/2021 62
PRÁCTICA HTML
13/7/2021 63
HTML Y ESTILOS CSS
¿Qué es CSS?
 Las hojas de estilo en cascada (CSS) se utilizan
para formatear el diseño de una página web.
 Con CSS, puede controlar el color, la fuente, el
tamaño del texto, el espacio entre los elementos,
cómo se colocan y distribuyen los elementos, qué
imágenes de fondo o colores de fondo se utilizarán,
diferentes pantallas para diferentes dispositivos y
tamaños de pantalla, y mucho ¡más!
 CSS ahorra mucho trabajo.
 Puede controlar el diseño de varias páginas web a la
vez.
13/7/2021 64
USANDO CSS
CSS se puede agregar a documentos HTML de 3

maneras:
 En línea : mediante el uso del atributo style dentro
de elementos HTML
 Interno : mediante el uso de un elemento <style>
en la sección <head>
 Externo : mediante el uso de un elemento <link>
para vincular a un archivo CSS externo
La forma más común de agregar CSS es mantener los
estilos en archivos CSS externos.
13/7/2021 65
CSS EN LÍNEA
 Se utiliza un CSS en línea para aplicar un estilo único

a un único elemento HTML.
 Un CSS en línea utiliza el atributo style de un
elemento HTML.
 El siguiente ejemplo establece el color del texto del
elemento <h1> en azul y el color del texto del
elemento <p> en rojo:
13/7/2021 66
CSS INTERNO
 Se usa un CSS interno para definir un estilo para

una sola página HTML.
 Un CSS interno se define en la sección <head> de
una página HTML, dentro de un elemento <style>.
 El siguiente ejemplo establece el color del texto de
TODOS los elementos <h1> (en esa página) en azul
y el color del texto de TODOS los elementos <p>
en rojo.
 Además, la página se mostrará con un color de
fondo "azul polvo":
13/7/2021 67
EL ATRIBUTO CLASS
 El atributo HTML class se usa para especificar una clase

para un elemento HTML.
 Varios elementos HTML pueden compartir la misma clase.
 Los atributos class se usa a menudo para señalar un
nombre de clase en una hoja de estilo.
 También puede ser utilizado por un JavaScript para acceder
y manipular elementos con el nombre de clase específico.
 El atributo class se puede usar en cualquier elemento
HTML.
 El nombre de la clase distingue entre mayúsculas y
minúsculas.
13/7/2021
68
LA SINTAXIS PARA CLASS
 Para crear una clase; escriba un carácter de punto

(.), seguido de un nombre de clase. Luego, defina las
propiedades CSS entre llaves {}
13/7/2021 69
CLASES MÚLTIPLES
 Los elementos HTML pueden pertenecer

a más de una clase.
 Para definir varias clases, separe los
nombres de las clases con un espacio, por
ejemplo, <div class = "city main">.
 El elemento tendrá un estilo de acuerdo
con todas las clases especificadas.
 En el siguiente ejemplo, el primer
<h2>elemento pertenece tanto a la
cityclase como a la mainclase, y obtendrá
los estilos CSS de ambas clases:
13/7/2021 70
DIFERENTES ELEMENTOS PUEDEN COMPARTIR LA MISMA CLASE
 Diferentes elementos HTML pueden apuntar al

mismo nombre de clase.
 En el siguiente ejemplo, tanto <h2>y <p> puntos
para la clase "ciudad" y compartirán el mismo estilo:
13/7/2021 71
CSS EXTERNO
 Se utiliza una hoja de estilo externa para definir el

estilo de muchas páginas HTML.
 Para usar una hoja de estilo externa, agregue un
enlace en la sección <head> de cada página HTML.
 La hoja de estilo externa se puede escribir en
cualquier editor de texto.
 El archivo no debe contener ningún código HTML y
debe guardarse con una extensión .css
13/7/2021 72
SELECTORES CSS
 Los selectores CSS se utilizan para "encontrar" (o seleccionar) los elementos HTML que desea
diseñar.
 Podemos dividir los selectores CSS en cinco categorías:
 Selectores simples (seleccione elementos basados en nombre, id, clase)
 Selectores de combinador (seleccione elementos basados en una relación específica entre ellos)
 Selectores de pseudo-clase (seleccionar elementos basados en un cierto estado)
 Selectores de pseudoelementos (seleccionar y diseñar una parte de un elemento)
 Selectores de atributos (seleccione elementos basados en un atributo o valor de atributo)
13/7/2021 73
SELECTORES CSS
El selector de elementos CSS

El selector de elementos selecciona elementos HTML en función del nombre del elemento.
Ejemplo
Aquí, todos los elementos <p> de la página estarán alineados al centro, con un color de texto rojo:
p{
text-align: center;
color: red;
}
13/7/2021 74
SELECTORES CSS
El selector de id. De CSS

El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.
La identificación de un elemento es única dentro de una página, por lo que el selector de identificación se utiliza para
seleccionar un elemento único.
Para seleccionar un elemento con una identificación específica, escriba un carácter hash (#), seguido de la identificación
del elemento.
Ejemplo
La siguiente regla CSS se aplicará al elemento HTML con id = "para1":
#para1 {
text-align: center;
color: red;
}
Nota: ¡ Un nombre de identificación no puede comenzar con un número!
13/7/2021 75
SELECTORES CSS
El selector de clase CSS

El selector de clase selecciona elementos HTML con un atributo de clase específico.
Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), Seguido del nombre de la clase.
Ejemplo
En este ejemplo, todos los elementos HTML con class = "center" estarán rojos y alineados al centro:
.center {
text-align: center;
color: red;
}
13/7/2021 76
SELECTORES CSS
El selector de clase CSS
También puede especificar que solo los elementos HTML específicos se vean afectados por una clase.
Ejemplo
En este ejemplo, solo los elementos <p> con class = "center" estarán alineados al centro:
p.center {
text-align: center;
color: red;
}
13/7/2021 77
SELECTORES CSS
Los elementos HTML también pueden referirse a más de una clase.

Ejemplo
En este ejemplo, el elemento <p> tendrá un estilo de acuerdo con class = "center" y class = "large":
<p class="center large">This paragraph refers to two classes.</p>
Nota: ¡ Un nombre de clase no puede comenzar con un número!

13/7/2021 78
SELECTORES CSS
El selector universal de CSS

El selector universal (*) selecciona todos los elementos HTML en la página.
Ejemplo
La siguiente regla CSS afectará a cada elemento HTML en la página:
*{
text-align: center;
color: blue;
}
13/7/2021 79
SELECTORES CSS
El selector de agrupación CSS

El selector de agrupación selecciona todos los elementos HTML con las mismas definiciones de estilo.
Mire el siguiente código CSS (los elementos h1, h2 y p tienen las mismas definiciones de estilo):
h1 {
text-align: center; Será mejor agrupar los selectores para minimizar el código.
color: red; Para agrupar selectores, separe cada selector con una coma.
}
Ejemplo
h2 { En este ejemplo, hemos agrupado los selectores del código anterior:
text-align: center; h1, h2, p {
color: red; text-align: center;
} color: red;
}
p{
text-align: center;
color: red;
}
13/7/2021 80
SELECTORES CSS
Todos los selectores simples de CSS
Selector Example Example description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
Selects all <div> elements and all <p>

element,element,.. div, p
elements
13/7/2021 81
Unidades CSS
CSS tiene varias unidades diferentes para expresar una longitud.
Muchas de las propiedades CSS toman valores "longitud", tales como width, margin, padding, font-size, etc.
La longitud es un número seguido de una unidad de longitud, como 10px, 2em, etc.
No puede aparecer un espacio en blanco entre el número y la unidad. Sin embargo, si el valor es 0, la unidad
puede omitirse.
Para algunas propiedades CSS, se permiten longitudes negativas.
Hay dos tipos de unidades de longitud: absoluta y relativa.
13/7/2021 82
Longitudes absolutas
Las unidades de longitud absoluta son fijas y una longitud expresada en cualquiera de ellas
aparecerá exactamente como ese tamaño.
No se recomienda el uso de unidades de longitud absoluta en la pantalla, porque los tamaños
de pantalla varían mucho. Sin embargo, se pueden usar si se conoce el medio de salida, como
para el diseño de impresión.
Unit Description
cm centimetersTry it
mm millimetersTry it
in inches (1in = 96px = 2.54cm)Try it
px * pixels (1px = 1/96th of 1in)Try it
pt points (1pt = 1/72 of 1in)Try it
pc picas (1pc = 12 pt)
* Los píxeles (px) son relativos al dispositivo de visualización. Para dispositivos de baja
resolución, 1 px es un píxel (punto) de dispositivo de la pantalla. Para impresoras y
pantallas de alta resolución, 1px implica múltiples píxeles del dispositivo.
13/7/2021 83
Longitudes Relativas
Las unidades de longitud relativa especifican una longitud relativa a otra propiedad de longitud. Las unidades de longitud
relativa se escalan mejor entre diferentes medios de representación.
Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the
current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element
Consejo: Las unidades em y rem son prácticas para crear diseños perfectamente escalables!
* Viewport = el tamaño de la ventana del navegador. Si la ventana gráfica tiene 50 cm de
ancho, 1vw = 0.5 cm.
13/7/2021 84
MODELO DE CAJA CSS
Todos los elementos HTML se pueden considerar como cuadros. En CSS, el término "modelo de caja"
se usa cuando se habla de diseño.
El modelo de cuadro CSS es esencialmente un cuadro que envuelve todos los elementos
HTML. Consiste en: márgenes, bordes, relleno y el contenido real.
•Contenido : el contenido del cuadro,

donde aparecen el texto y las
imágenes.
•Relleno : borra un área alrededor
del contenido. El acolchado es
transparente
•Borde : un borde que rodea el
relleno y el contenido.
•Margen : borra un área fuera del
borde. El margen es transparente
13/7/2021 85
MODELO DE CAJA CSS
13/7/2021 86
CONSIDERANDO SU ESTRUCTURA ESENCIAL DE ACUERDO AL ENUNCIADO PROPUESTO.
13/7/2021 87
DESARROLLO DE APLICACIONES
WEB
Programación del lado del cliente
JAVASCRIPT: INTRODUCCIÓN
 JavaScript es el lenguaje de programación ligero más popular en
Internet.
 JavaScript es un lenguaje interpretado (las secuencias de
comandos se ejecutan sin compilación preliminar).
 Usualmente está embebido directamente en las páginas html a
través de la etiqueta <script> de forma interna o externa.
 Interna:
<script type="text/javascript">
document.write("<p>Mi primer JavaScript</p>");
</script>
Archivo con extensión .js
Externa:
<script type="text/javascript" src="myScript.js"></script>
http://www.w3schools.com/js/js_intro.asp
JAVASCRIPT: QUÉ PUEDE HACER?
 JavaScript puede reaccionar a eventos - Un JavaScript puede ser
configurado para ejecutarse cuando algo sucede, como cuando una página ha
terminado de cargar o cuando un usuario da click en un elemento html.
 JavaScript puede manipular elementos HTML - JavaScript puede leer y
modificar el contenido de un elemento HTML a través del uso de DOM.
 JavaScript se puede utilizar para validar datos - un JavaScript se puede
utilizar para validar formularios de entrada de datos.
 JavaScript puede ser utilizado para detectar el browser del visitante - y
dependiendo del browser cargar otra página diseñada específicamente para
ese navegador.
 JavaScript puse ser usado para crear cookies - JavaScript puede ser usado
para almacenar y recuperar información en la computadora del visitante.
JAVASCRIPT: SINTÁXIS
 JavaScripts puede ser colocado dentro de las secciones <head> o <body> de una
página html.
<html>
<body><h1>My Web Page</h1>
<p id="demo">Un párrafo</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=“Mi primer
JavaScript";
</script>
</body>
</html>
 Nota: Colocar el código javascript debajo de la página asegura que éste no

se ejecute antes de que el elemento <p> sea creado.
JAVASCRIPT: SINTAXIS (FUNCIONES Y EVENTOS)
 El ejemplo anterior de JavaScript es ejecutado cuando la página carga.
 Sin embargo, algunas veces nosotros necesitamos ejecutar código JavaScript cuando
ocurre un evento, por ejemplo cuando un usuario hace click sobre un botón.
 Entonces colocamos el script dentro de una function.
 Normalmente las funciones son usados en combinación con eventos.
Llama a la función cuando ocurre el evento click
Revisar lista de eventos en:https://www.w3schools.com/jsref/dom_obj_event.asp

JAVASCRIPT DISPLAY
POSSIBILITIES
JavaScript can mostrar datos en diferentes maneras:
Escribiendo dentro de un elemento HTML, utilzando innerHTML.

Ej. document.getElementById("demo").innerHTML = 5 + 6;
Escribiendo como salida del documento HTML, utilizando document.write().

Ej. document.write(5 + 6);
Escribiendo una caja de alerta, utlizando window.alert() o alert().

Ej. alert(5+ 6);
Escribiendo en la consola del navegador, utilizando console.log().

console.log(5 + 6);
DOM : DOCUMENT OBJECT MODEL
❑ Estándar que define un API para la representación de documentos HTML
y XML.
❑ Representa estos documentos como árboles de nodos. En DOM todo es
un nodo.
❖ Es una interfaz de programación de aplicaciones para acceder y manipular
dinámicamente contenido, estructura y estilo en documentos utilizando lenguajes
como ECMAScript (JavaScript).
Ejemplo XML DOM
http://www.w3.org/DOM/
DOM : DOCUMENT OBJECT MODEL
❖ El HTML DOM es un estandar para obtener, cambiar, añadir o eliminar
elementos HTML.
Ejemplo HTML DOM
http://www.w3schools.com/htmldom/default.asp
JAVASCRIPT: MÉTODOS
PRINCIPALES
 getElementById(id)
 Permite obtener un elemento del documento html por su
ID. Retorna un elemento.
 Ejemplo:
 document.getElementById("demo").innerHTML = "Hello
JavaScript";
 document.getElementById('myImage').src='pic_bulbon.gif'
PRINCIPALES
 getElementsByTagName(tagname)
 Permite obtener elementos por su nombre de etiqueta.
Retorna un arreglo de elementos
 var x = document.getElementsByTagName("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
PRINCIPALES
 getElementsByName(name)
 Permite obtener elementos por el valor de su atributo
name. Retorna un arreglo de elementos
 var x = document.getElementsByName("animal");
var i;
for (i = 0;i < x.length;i++) {
if (x[i].type == "checkbox") {
x[i].checked = true;
}
}
PRINCIPALES
 querySelector(selector)
 Retorna el primer elemento cuyo selector CSS coincida
con el especificado.
 document.querySelector("#demo").innerHTML = "Hello
World!";
 var y= document.querySelector("a[target]");
 y.style.color= "red";
PRINCIPALES
 querySelectorAll(selector)
 Retorna todos los elementos cuyo selector CSS coincida
con el especificado.
 var x = document.querySelectorAll(".example");
 x[0].style.backgroundColor = "red";
 var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
PRINCIPALES
 createElement(tagname)
 Crea un nodo de tipo elemento, según el nombre de
etiqueta especificado.
 var para = document.createElement("P"); // Create a
<p> element
para.innerHTML = "This is a paragraph."; // Insert
text
document.getElementById("myDIV").appendChild(para); //
Append <p> to <div> with id="myDIV"
PRINCIPALES
 appendChild(child)
 Agrega el nodo especificado, como último hijo.
 var item;
 var lista = document.querySelector("ul");//selecciona elemento
ul
for (i = 0;i < 10;i++) {
 item = document.createElement("li"); //crea elemento li
 Item.innerHTML = " Item" + i; // escribe contenido en elemento item
 lista.appendChild(item); // agrega el item a la lista
}
PRINCIPALES
 removeChild(child)
 Elimina el nodo especificado.
 var lista = document.querySelector("ul");//selecciona la lista ul
 var items = document.querySelector("ul li");//selecciona
elementos li de la lista ul
 for (var i = 0;i < lista.length;i++) {
if (lista.hasChildNodes()) {
lista.removeChild(items[i]);// elimina cada item de la lista
}
 }
JAVASCRIPT: OBJETO
STYLE
 El objeto style de cada elemento html representa su
estilo individual.
 document.getElementById("demo").style.display = "none";
 document.getElementById("demo").style.fontSize = "35px";
JAVASCRIPT:
EVENTOS
Los eventos HTML son "cosas" que le suceden a los elementos HTML.
Cuando se usa JavaScript en páginas HTML, JavaScript puede "reaccionar" ante
estos eventos.
Un evento HTML puede ser algo que hace el navegador o algo que hace un usuario.
Aquí hay algunos ejemplos de eventos HTML:
•Una página web HTML ha terminado de cargarse

•Se modificó un campo de entrada HTML
•Se hizo clic en un botón HTML
A menudo, cuando ocurren eventos, es posible que desee hacer algo.

JavaScript le permite ejecutar código cuando se detectan eventos.
JAVASCRIPT:
EVENTOS
HTML permite agregar atributos de controlador de eventos, con
código JavaScript , a elementos HTML.
Con comillas simples:

<element event='some JavaScript'>
Con comillas dobles:
<element event="some JavaScript">
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT:
EVENTOS
HTML permite agregar atributos de controlador de eventos, con
código JavaScript , a elementos HTML.
Con comillas simples:

<element event='some JavaScript'>
Con comillas dobles:
<element event="some JavaScript"> <!DOCTYPE html>
<html>
<!DOCTYPE html> <body>
<html>
<body> <p>Click the button to display the date.</p>
<button <button onclick="displayDate()">The time is?</button>

onclick="document.getElementById('demo').inner
HTML=Date()">The time is?</button> <script>
function displayDate() {
<button onclick="this.innerHTML=Date()">The document.getElementById("demo").innerHTML =
time is?</button> Date();
}
<p id="demo"></p> </script>
</body> <p id="demo"></p>

</html>
</body>
</html>
JAVASCRIPT:
EVENTOS
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body onload="myFunction()"> <body>
<h1>Hello World!</h1> <img src="w3html.gif" onload="loadImage()"

width="100" height="132">
<script>
function myFunction() { <script>
alert("Page is loaded"); function loadImage() {
} alert("Image is loaded");
</script> }
</script>
</body>
</html> </body>
</html>
JAVASCRIPT:
EVENTOS
Algunos eventos HTML comunes:
Evento Descripción
onchange Se ha cambiado un elemento HTML.
onclick El usuario hace clic en un elemento
HTML.
onmouseover El usuario mueve el mouse sobre un
elemento HTML
onmouseout El usuario aleja el mouse de un elemento
HTML
onkeydown El usuario presiona una tecla del teclado
onload El navegador ha terminado de cargar la
página.
La lista es mucho más larga: W3Schools JavaScript Reference HTML DOM

Events .
JAVASCRIPT:VALIDACIÓN DE
FORMULARIOS
 El elemento <form> de html define un formulario que es utilizado para
recolectar datos de entrada del usuario.
Ejemplo:
<form name="form_datos" action="/action_page.php" method="get">
<label>Nombre:</label>
<input type="text" name= "nombre"/></br>
<label>Apellidos:</label>
<input type="text" name="apellidos"/></br>
<input type="submit" value="Enviar"/>
</form>
FORMULARIOS
 El elemento <form> de html define un formulario que es utilizado para
recolectar datos de entrada del usuario.
Propiedades de los elementos de formulario Html
FORMULARIOS
 Un formulario html contiene elementos de formaulario.Los elementos de formulario más
importantes son los <input>.
 Los elementos input pueden ser mostrados de manera diferente,dependiendo del valor de su
atributo type.
 Ejemplos:
 Botones: <input type="button">,<input type="reset">,<input type="submit">
 Cajas de texto:<input type="text">,<input type="password">,<input type="number">
 Casillas de verificacion: <input type="checkbox">
Botones de opcion: <input type="radio">
Campos ocultos: <input type="hidden">
 Cajas de fecha o tiempo:<input type="date">,<input type="time">
 Cajas para selección de archivos: <input type="file">
Para más información visitar:

https://www.w3schools.com/html/html_form_input_types.asp
FORMULARIOS
Adicionalmente existen otros elementos de formulario como:
El elemento <select> que define una lista drop-down (combo).Ejemplo:

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
El elemento <textArea> que define una caja de texto de varias líneas
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Validación de Formularios
Ejemplo validación campo vacio.

VALIDACIÓN DE
FORMULARIOS
Uso de expresiones regulares para validación

Las expresiones regulares (regex) son modelos que describen las
combinaciones de caracteres en el texto. Se podrían definir como una serie
de caracteres que forman un patrón, de tal forma que podemos comparar
el patrón con otros conjuntos de caracteres para ver las coincidencias.
Manual para expresiones regulares

http://www.desarrolloweb.com/articulos/2033.php
http://www.w3schools.com/js/js_obj_regexp.asp
VALIDACIÓN DE
FORMULARIOS
VALIDACIÓN DE
FORMULARIOS
Ejemplo validación campo fecha.
var regexFecha = /^(0[1-9]|1\d|2\d|3[1-2])\/(0[1-9]|1[0-2])\/\d{4}$/;

Validación de Formularios
Ejemplo validación grupos de opciones.
Ejercicio práctico:
1.- Crear formulario
2.- Aplicar CSS
3.- Crear JavaScript con validaciones
MAQUETACIÓN
La maquetación web es el proceso en el que el prototipo gráfico

también denominado «layout» (con los requisitos estructurales y
estéticos definidos y aprobados en un análisis inicial) pasa a transformase
en código html, css y js (estándares web) para que los navegadores
puedan interpretarlo correctamente.
HTML tiene varios elementos semánticos que definen las

diferentes partes de una página web:
<header> - Define un encabezado para un documento o una sección

<nav> - Define un conjunto de enlaces de navegación
<section> - Define una sección en un documento
<article> - Define un contenido independiente e independiente
<aside> - Define contenido aparte del contenido (como una barra lateral)
<footer> - Define un pie de página para un documento o una sección
13/7/2021 120
MAQUETACIÓN
Técnicas de diseño HTML

Existen cuatro técnicas diferentes para crear diseños de varias columnas. Cada técnica tiene sus pros y sus contras:
• Frameworks CSS
• Propiedad flotante CSS
• CSS flexbox
• Cuadricula CSS
Frameworks de CSS
Si desea crear su diseño rápidamente, puede usar un frameworks CSS, como W3.CSS o Bootstrap .
Diseño de cuadrícula CSS

El módulo de diseño de cuadrícula CSS ofrece un sistema de diseño basado en cuadrícula, con filas y columnas, lo que
facilita el diseño de páginas web sin tener que usar flotantes y posicionamiento.
13/7/2021 121
MAQUETACIÓN
Diseño flotante CSS

Es común hacer diseños web completos utilizando la propiedad float CSS . Flotar es fácil de aprender: solo necesita
recordar cómo funcionan las propiedades float y clear. Desventajas: los elementos flotantes están vinculados al flujo
de documentos, lo que puede dañar la flexibilidad.
/* Clear floats after the columns */
<!DOCTYPE html> /* Create two columns/boxes that floats next to each other */ section:after {
<html lang="en"> nav { content: "";
<head> float: left; display: table;
<title>CSS Template</title> width: 30%; clear: both;
<meta charset="utf-8"> height: 300px; /* only for demonstration, should be removed */ }
<meta name="viewport" content="width=device-width, initial-scale=1"> background: #ccc;
<style> padding: 20px; /* Style the footer */
*{ } footer {
box-sizing: border-box; background-color: #777;
} /* Style the list inside the menu */ padding: 10px;
nav ul { text-align: center;
body { list-style-type: none; color: white;
font-family: Arial, Helvetica, sans-serif; padding: 0; }
} }
/* Responsive layout - makes the two columns/boxes stack on top
/* Style the header */ article { of each other instead of next to each other, on small screens */
header { float: left; @media (max-width: 600px) {
background-color: #666; padding: 20px; nav, article {
padding: 30px; width: 70%; width: 100%;
text-align: center; background-color: #f1f1f1; height: auto;
font-size: 35px; height: 300px; /* only for demonstration, should be removed */ }
color: white; } }
} </style>
</head>
13/7/2021 122
<body>
<h2>CSS Layout Float</h2>

<p>In this example, we have created a header, two columns/boxes and a footer.
On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more
about this in our next chapter - HTML Responsive.)</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for
two millennia, its history going back to its founding by the Romans, who named it
Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
13/7/2021 123
MAQUETACIÓN
Diseño CSS Flexbox
El uso de flexbox asegura que los elementos se comporten de manera predecible cuando el
diseño de la página debe acomodar diferentes tamaños de pantalla y diferentes dispositivos de
visualización. /* Style the content */
article {
-webkit-flex: 3;
<!DOCTYPE html> /* Container for flexboxes */ -ms-flex: 3;
<html lang="en"> section { flex: 3;
<head> display: -webkit-flex; background-color: #f1f1f1;
<title>CSS Template</title> display: flex; padding: 10px;
<meta charset="utf-8"> } }
<meta name="viewport" content="width=device-
width, initial-scale=1"> /* Style the navigation menu */ /* Style the footer */
<style> nav { footer {
*{ -webkit-flex: 1; background-color: #777;
box-sizing: border-box; -ms-flex: 1; padding: 10px;
} flex: 1; text-align: center;
background: #ccc; color: white;
body { padding: 20px; }
font-family: Arial, Helvetica, sans-serif; }
} /* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next
/* Style the list inside the menu */ to each other */
/* Style the header */ nav ul { @media (max-width: 600px) {
header { list-style-type: none; section {
background-color: #666; padding: 0; -webkit-flex-direction: column;
padding: 30px; } flex-direction: column;
text-align: center; }
font-size: 35px; }
color: white; </style>
} </head>
13/7/2021 124
<body>
<h2>CSS Layout Flexbox</h2>

<p>In this example, we have created a header, two columns/boxes and a footer.
On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10
and earlier versions.</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for
two millennia, its history going back to its founding by the Romans, who named
it Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
13/7/2021 125
RESPONSIVE
¡El diseño web receptivo se trata de crear páginas web que se vean bien en todos los dispositivos!
Un diseño web receptivo se ajustará automáticamente para diferentes tamaños de pantalla y ventanas gráficas.
13/7/2021 126
¿Qué es el diseño web receptivo?
Responsive Web Design se trata de usar HTML y CSS para redimensionar, ocultar, reducir o
ampliar automáticamente un sitio web, para que se vea bien en todos los dispositivos
(computadoras de escritorio, tabletas y teléfonos):
@media only screen and (max-width:800px) {

/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
@media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
13/7/2021 127
MAQUETACIÓN / RESPONSIVE
13/7/2021 128

Diapositivas Unidas

Cargado por

Información del documento

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

Diapositivas Unidas

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

DESARROLLO DE APLICACIONES WEB

MSIG. JEFFERSON ELIAS NÚÑEZ GAIBOR

1.1 El internet y la web (nacimiento y crecimiento )

1.2 Evolución de las aplicaciones Web

1.3 El modelo cliente /servidor

Es un modelo de diseño de software en el que las tareas se reparten entre los

1.4 Protocolos de internet (Arquitectura TCP/IP)

Enlace y física entre

Uniform Resource Identifier: identificador uniforme de recursos.

Localizador de Recursos Uniforme, es un Identificador de recursos uniforme (Uniform

1.5 URI, URL y nombres de dominio

DNS (Domain Name System)

• DNS: Nombres tienen una estructura jerarquica.

1.6 Protocolos http

(Hypertext Transfer Protocol, Protocolo de transferencia de hipertexto)

El propósito del protocolo HTTP es permitir la

1.6 Protocolos http

1.6 Protocolos http

1.7 Servidores y Navegadores Web

• Obtiene la información del web.

1.7 Servidores y Navegadores Web

• Programa que espera requerimientos de un cliente.

1 Click en la dirección (URL)

Prof: Ing. Karla Abad

1.8 Lenguajes de marcado

El lenguaje de marcado generalizado estándar(SGML; ISO 8879: 1986) es un

HTML en teoría era un ejemplo de un lenguaje basado en SGML hasta HTML5,

1.8 Lenguajes de marcado

Lenguaje de Marcado Extensible, es un meta-lenguaje que

XML no ha nacido únicamente para su aplicación en Internet, sino que se

Para más detalles y ejercicios, se sugiere visitar:

 La etiqueta <table> define una tabla HTML.

 Para hacer que una celda abarque más de una

 Para hacer que una celda abarque más de una fila,

 Para agregar un título a una tabla, use la etiqueta

 Una lista desordenada comienza con la etiqueta

 Una lista ordenada comienza con la etiqueta <ol>.

 HTML también admite listas de descripción.

 Un elemento de nivel de bloque siempre comienza

 Un elemento en línea no comienza en una nueva

 Un elemento en línea no puede contener un

 El elemento <div> se usa a menudo como

 El elemento <span> es un contenedor en línea que

 Hay dos valores de visualización: bloque y en línea

 HTML es el lenguaje de marcado

 HTML significa lenguaje de marcado de hipertexto

 El propósito de un navegador web

 Nota: Solo el contenido

 Todos los documentos HTML deben comenzar con una declaración

 Los encabezados HTML se definen con las etiquetas <h1>to <h6>.

 Los párrafos HTML se definen con la <p> etiqueta:

 Los enlaces HTML se definen con la <a> etiqueta:

 Las imágenes HTML se definen con la <img>etiqueta.

 Los comentarios HTML no se muestran en el  Con comentarios, puede colocar notificaciones y

 Observe que hay un signo de exclamación (!) En la

 Puede establecer el color de fondo para los elementos HTML:

 Puedes configurar el color del texto:

 Puede establecer el color de los bordes:

CSS se puede agregar a documentos HTML de 3

 Se utiliza un CSS en línea para aplicar un estilo único

 Se usa un CSS interno para definir un estilo para

 El atributo HTML class se usa para especificar una clase