B.

Com 1stAño Diseño Web

SILABO

Clase–B.Com. Primer Año

Asunto: - Diseño Web

Unidad Contents
UNIDAD-I Introducción a Internet - World Wide Web, direccionamiento en Internet. Navegador, URL. Web
servidor
Software para diseño web - Notepad/Notepad++, Dreamweaver, Blue Griffon, Net
frijoles, Mono de Mar, WordPress, Sublime.
Introducción a HTML: Etiquetas y Atributos HTML, Etiquetas Básicas HTML, Etiquetas de Formato,
Codificación de colores HTML, etiquetas Div y Span para agrupar listas: listas desordenadas, listas ordenadas
Listas, lista de definiciones. Imágenes: Imagen y Mapeo de Imágenes
Hipervínculo: URL - Localizador Uniforme de Recursos, Codificación de URL.
<td>, <caption>, <thead>, <tbody>, <tfoot>, <colgroup>, <col> Atributos Usando Iframe como
el objetivo
Formulario
Headers:Title, Base, Link, Styles, Script
Etiqueta Meta HTML, XHTML, Etiquetas y Atributos HTML Obsoletos
UNIDAD–II CSS: Introducción, características y beneficios de CSS, sintaxis de CSS, hoja de estilo externa usando
<link>, Hojas de estilo múltiples, Longitudes de valor y Porcentajes.
Selectors:ID Selectors. Class Selectors, Grouping Selectors, Universal Selector,
Selectores de descendientes / hijos, selectores de atributos, pseudo-clases CSS.
Cursor de color de fondo
Cursor CSS
Fuentes de Texto
transformaciónDeTexto
estilo de fuente
UNIDAD–III Modelo de Caja: Bordes y Contorno, Margen y Relleno, Altura y Anchura, Dimensiones CSS.
Posicionamiento de Visualización
Posicionamiento, Posicionamiento Fijo, Posicionamiento Relativo, Posicionamiento Absoluto, Capas CSS
con Z-Index.
Flotantes: La propiedad float. La propiedad clear, El hack clearfix.
UNIDAD–IV El JavaScript: Naturaleza del JavaScript, Conceptos Básicos de Escritura de Scripts, Mejorando HTML
Documentos con JavaScript, los bloques de construcción.
Introducción a JavaScript
mutación
en JavaScript, Objetos, Conversión de Tipo y Coerción, Comprobación de Tipo Estática vs Dinámica.
Condicionales de JavaScript
Operadores y Condicionales. Escalera Condicional y declaración Switch.
Arreglos de JavaScript: Introducción a los arreglos, Declaración y Mutación de Arreglos, Métodos de Arreglos
y Propiedades, Replicación con Métodos de Array, Arreglos Multidimensionales.

UNIDAD–V Bucles de JavaScript: Introducción a los bucles, Bucles en JavaScript, Bucles While y Do/While
Bucles For, Romper y Continuar en Bucles, Iterando Arreglos, Iterando Objetos.
Funciones de JavaScript: Introducción a las Funciones, Funciones en JavaScript, Anidadas
Funciones en JavaScript
como el Objeto Devuelto,
Alcance de JavaScript: Introducción al Alcance, Alcance en JavaScript, Alcance Léxico. Alcance de Módulo.

45, Anurag Nagar, Detrás del Complejo de Prensa, Indore (M.P.) Tel.: 4262100, www.rccmindore.com
1
 B.Com 1stAño Diseño Web

Método para agregar interactividad a una página web, creando páginas web dinámicas, concepto de
Java Scripting los Formularios.
Java Scripting en los Formularios, Construcción Básica de Scripts, Hablando con los Objetos del Formulario.
Organizando los Objetos y Scripts, Validación a Nivel de Campo, Verificar Campos Requeridos como
Validando Código Postal
Cálculo

UNIDAD -1

Introducción a Internet

Internet, también conocido como la Red, es una red mundial de computadoras o red de redes
que están interconectados. A través de Internet, la información se distribuye a través de páginas web. Internet proporciona muchas
servicios en línea como la recuperación de información, correo electrónico, videojuegos, chat, etc.

Definición

El Consejo Federal de Redes (FNC) definió el término "Internet" en octubre de 1995. Según el FNC
"Internet" se refiere al sistema global de información que -

I. Está lógicamente vinculado por un espacio de direcciones globalmente único basado en el Protocolo de Internet
(IP) o sus extensiones posteriores
II. Es capaz de soportar comunicaciones utilizando el Protocolo de Control de Transmisión/ Protocolo de Internet
(TCP/IP) suite o sus extensiones posteriores y/o otros protocolos compatibles con IP; y
III. Proporciona, utiliza o hace accesibles, ya sea públicamente o privadamente, servicios de alto nivel en capas.
sobre las comunicaciones y la infraestructura relacionada descrita en este documento.

Correo electrónico

Información
Juegos n Recuperación

Comunicación Social
n Internet Medios

Entretenimiento Datos

WWW

45, Anurag Nagar, Detrás del Complejo de Prensa, Indore (M.P.) Tel.: 4262100, www.rccmindore.com
2
B.Com 1stAño Diseño Web

PÁGINA WEB
Una página web es una colección de texto, gráficos, video y audio. Contiene un hipervínculo que conecta a
siguiente página del sitio web. Una página web se escribe comúnmente en HTML (Lenguaje de Marcado de Hipertexto) que
es accesible a través de Internet u otras redes utilizando un navegador de Internet (Google Chrome,
Mozilla, Opera, etc.). El nombre "página web" en un sitio web es similar a las páginas de papel que están encuadernadas.
juntos en un libro.

SITIO WEB
Un sitio web representa una colección de páginas web gestionadas de manera central, que contiene un grupo de imágenes de texto.
y todos los tipos de archivos multimedia presentados a la atención de los usuarios de Internet de manera visual y fácil
una forma accesible. El sitio web brinda a los usuarios acceso a una vasta colección de documentos que están conectados a
el uno al otro mediante enlaces de hipertexto o hipermedia, es decir, hiperenlaces, conexiones electrónicas que
vincular piezas de información relacionadas para permitir que un usuario acceda a ellas fácilmente.

SITIO WEB ESTÁTICO

Los sitios web estáticos, o 'fijos', son los más simples. Su contenido no cambia dependiendo de
el usuario, y no se actualiza regularmente. Los sitios web estáticos se construyen utilizando un código HTML simple, y
típicamente proporcionan información.

SITIO WEB DINÁMICO

Un sitio web o página web dinámica mostrará contenido diferente cada vez que se visite. Ejemplos
incluya blogs y sitios de comercio electrónico, o en general cualquier sitio que se actualice regularmente. Dinámico
Los sitios web también se pueden configurar para mostrar contenido diferente a diferentes usuarios, en diferentes momentos del
los sitios web dinámicos ofrecen una experiencia más personal e interactiva para el usuario.
aunque pueden ser un poco más complejas de desarrollar y pueden cargar ligeramente más despacio que las estáticas
unos.

RED MUNDIAL DE REDES ('WWW')

La World Wide Web ("WWW", "Web" o "W3") fue comenzada en 1989 por Tim Berners-Lee y su
colegas en CERN, una organización científica internacional con sede en Ginebra, Suiza. Ellos
creó un protocolo, Protocolo de Transferencia de Hipertexto (HTTP), que estandarizó la comunicación
entre servidores y clientes. Su navegador web basado en texto se hizo disponible para el lanzamiento general en
Enero de 1992.

La World Wide Web, que también se conoce como la Web, es una colección de sitios web o páginas web almacenadas.
en servidores web y conectados a computadoras locales a través de Internet. Los usuarios pueden acceder a la
contenido de estos sitios de cualquier parte del mundo a través de internet utilizando sus dispositivos como
computadoras, laptops, teléfonos celulares, etc.

NAVEGADOR WEB
Un navegador web es una aplicación de software utilizada para localizar, recuperar y mostrar contenido en la World
Red Ancha, incluyendo páginas web, imágenes, videos y otros archivos. Esto significa que el navegador web pregunta

45, Anurag Nagar, Detrás del Complejo de Prensa, Indore (M.P.) Tel.: 4262100, www.rccmindore.com
3
B.Com 1stAño Diseño web

para datos del sitio web y el servidor web envía la información de vuelta al navegador, que luego
muestra los resultados en el dispositivo con acceso a Internet. Algunos navegadores web comunes son Google
Chrome, Mozilla Firefox, Internet Explorer, Safari, etc.

SERVIDOR WEB

Un SERVIDOR WEB es un software y hardware que se utiliza para almacenar y entregar el contenido del sitio web.
El contenido podría ser cualquier cosa, desde imágenes, textos, datos de aplicaciones, videos y muchos más según el
solicitud del navegador web. Básicamente, cuando un navegador pide información, entonces el proceso continúa
a través de muchos pasos. La persona especifica la URL en la barra de direcciones del navegador web, y luego
el navegador web obtiene la dirección IP del nombre de dominio. Esto se hace ya sea traduciendo la URL
utilizando el Sistema de Nombres de Dominio o DNS, o se hace buscando en la caché. Esto trae
el navegador al servidor web. El servidor web luego responde y envía la página solicitada al
navegador.

Algunos usos del servidor web

Enviar y recibir correos electrónicos.

Descargue el protocolo de transferencia de archivos o solicitud FTP

Crea y publica páginas web.

DIRECCIÓN DEL SITIO WEB

Una dirección de sitio web, también conocida como URL (localizador uniforme de recursos), es una dirección de Internet o intranet.

nombre que apunta a una ubicación donde se aloja un archivo, directorio o página de sitio web

DIRECCIÓN ABSOLUTA Y RELATIVA

Siempre comienza con el nombre del protocolo. Una referencia absoluta es la dirección completa a
una página webincluyendo http://www, tal como lo usarías en el navegador barra de direcciones Absoluta
Las referencias se utilizan para hacer referencia a un sitio en algún lugar de Internet.

45, Anurag Nagar, Detrás del Complejo de Prensa, Indore (M.P.) Tel.: 4262100, www.rccmindore.com
4
B.Com 1stAño Diseño Web

Una URL relativa es cualquier URL que no especifica explícitamente el protocolo (por ejemplo, ―http://" o "https://
) y/o dominio ( www.example.com ), lo que obliga al navegador web del visitante (o la búsqueda
bots de motores) asumir que se refiere al mismo sitio en el que aparece la URL

Lenguaje de Marcado de Hipertexto (HTML)

HTML (HyperText Markup Language) es el bloque de construcción más básico de la Web. Define el
significado y estructura del contenido web. "Hiperenlace" se refiere a los enlaces que conectan las páginas web entre sí.
otro, ya sea dentro de un solo sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la
Web. HTML utiliza "marcado" para anotar texto, imágenes y otros contenidos para su visualización en una Web
navegador.

Un elemento HTML se distingue del resto del texto en un documento por "etiquetas", que consisten en el elemento
nombre rodeado por "<" y ">". El nombre de un elemento dentro de una etiqueta no diferencia entre mayúsculas y minúsculas. Es decir, que
se puede escribir en mayúsculas, minúsculas o una mezcla. Por ejemplo, la etiqueta <title> se puede escribir
como <Título>, <TÍTULO>, o de cualquier otra manera.

<html>

Esta etiqueta encierra el documento HTML completo y consta principalmente del encabezado del documento que es
representado por <head>...</head> y el cuerpo del documento que está representado por <body>...</body>
etiquetas.

<cabeza>
Esta etiqueta representa el encabezado del documento que puede mantener otras etiquetas HTML como <title>, <link>, etc.

title
La etiqueta <title> se utiliza dentro de la etiqueta <head> para mencionar el título del documento

<cuerpo> </cuerpo>

Esta etiqueta representa el cuerpo del documento que conserva otras etiquetas HTML como <h1>, <div>, <p>, etc.

La etiqueta <body> tiene atributos que se pueden usar para establecer diferentes colores −

bgcolor− establece un color para el fondo de la página.

texto− establece un color para el texto del cuerpo.

Etiquetas de encabezado

Cualquier documento comienza con un encabezado. Puedes usar diferentes tamaños para tus encabezados. HTML también tiene
seis niveles de encabezados, que utilizan los elementos <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Mientras
al mostrar cualquier encabezado, el navegador añade una línea antes y una línea después de ese encabezado.

Etiqueta de párrafo

45, Anurag Nagar, Detrás del Complejo de Prensa, Indore (M.P.)

5
B.Com 1stAño Asunto - Diseño web

La<p>etiqueta ofrece una manera de estructurar tu texto en diferentes párrafos. Cada párrafo de texto
debería ir entre una etiqueta <p> de apertura y una etiqueta </p> de cierre.

Etiqueta de salto de línea

Cada vez que uses el<br />elemento, cualquier cosa que le siga comienza desde la siguiente línea. Este tag es un
ejemplo de un elemento vacío, donde no necesitas etiquetas de apertura y cierre, ya que no hay nada
ir entre ellos.

Centrando Contenido
Puedes usar la etiqueta <center> para centrar cualquier contenido en la página o en cualquier celda de la tabla.

Texto en negrita

Cualquier cosa que aparezca dentro del elemento <b>...</b>, se muestra en negrita

Texto en cursiva

Cualquier cosa que aparezca dentro del elemento <i>...</i> se muestra en cursiva

Texto subrayado

Cualquier cosa que aparezca dentro del elemento <u>...</u> se muestra con subrayado

Insertar imagen

Puedes insertar cualquier imagen en tu página web utilizando la etiqueta <img>. A continuación se muestra la sintaxis simple para
usa esta etiqueta.

<img src = "URL de la imagen" ... lista-de-atributos/>

La etiqueta <img> es una etiqueta vacía, lo que significa que solo puede contener una lista de atributos y no tiene
etiqueta de cierre.

HTML - Listas

HTML ofrece a los autores web tres maneras de especificar listas de información. Todas las listas deben contener uno
o más elementos de lista. Las listas pueden contener −

<ul>−Una lista desordenada. Esto enumerará los elementos utilizando viñetas simples.

<ol>−Una lista ordenada. Esto utilizará diferentes esquemas de números para enumerar tus elementos.

<dl>−Una lista de definiciones. Esto organiza tus elementos de la misma manera en que están organizados en un
diccionario.

Listas desordenadas HTML

45, Anurag Nagar, Detrás del Complejo de Prensa, Indore (M.P.) Tel.: 4262100, www.rccmindore.com
6
B.Com 1stAño Diseño Web

Una lista desordenada es una colección de elementos relacionados que no tienen un orden o secuencia especial. Esta lista es
creado utilizando la etiqueta HTML <ul>. Cada elemento de la lista está marcado con un viñeta.

Listas ordenadas HTML

Si se le requiere poner sus artículos en una lista numerada en lugar de con viñetas, entonces lista ordenada HTML
se utilizará. Esta lista se crea utilizando la etiqueta <ol>. La numeración comienza en uno y se incrementa.
por uno por cada elemento de lista ordenada sucesivo etiquetado con <li>.

Listas de definición HTML

HTML admite un estilo de lista que se llama listas de definición, donde las entradas se enumeran como en un diccionario.
o enciclopedia. La lista de definiciones es la forma ideal de presentar un glosario, lista de términos u otro
lista de nombre/valor.

La lista de definiciones utiliza las siguientes tres etiquetas.

<dl> − Define el inicio de la lista

− Un término

<dd> − Definición de término

</dl> − Define el final de la lista

HTML - Tablas

Las tablas HTML permiten a los autores web organizar datos como texto, imágenes, enlaces, otras tablas, etc. en
filas y columnas de celdas.

Las tablas HTML se crean utilizando la etiqueta <table> en la que se usa la etiqueta <tr> para crear filas de la tabla.
y la etiqueta <td> se utiliza para crear celdas de datos. Los elementos bajo <td> son regulares y están alineados a la izquierda por

predeterminado
Encabezado de la tabla

El encabezado de la tabla se puede definir usando la etiqueta <th>. Esta etiqueta se utilizará para reemplazar la etiqueta <td>, que se utiliza
para representar una celda de datos actual. Normalmente colocarás tu fila superior como encabezado de tabla como se muestra a continuación,
de lo contrario, puedes usar el elemento <th> en cualquier fila. Los encabezados, que se definen en la etiqueta <th> son
centrado y en negrita por defecto.

45, Anurag Nagar, Detrás del Complejo de Prensa, Indore (M.P.) Tel.: 4262100, www.rccmindore.com
7