09/01/2018

Definiciones
Una página web, o página electrónica, página digital, o ciber página​​, es la
unidad básica de información en el internet.
Es un documento o información electrónica capaz de contener texto, sonido,
Página Web vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la
llamada World Wide Web y que puede ser accedida mediante un navegador web.

HTML Un sitio web o ciber sitio es una colección de páginas web relacionadas y
comunes a un dominio de internet o subdominio en la World Wide Web dentro de

Sitio Web
Lenguaje de Marcas de
Internet.
Un dominio es un nombre lógico (URL Uniform Resource Locator ó identificador de
recursos uniforme) que permite su localización, todos los sitios web públicamente

HiperTexto
accesibles constituyen una gigantesca World Wide Web de información.

Constituye la página principal (Portal) de un sitio web, que se caracteriza por

Ing. Diego Marcelo Reina Haro integrar, componer, conformar los diferentes tipos de acceso a una serie de

Portal Web
recursos y de servicios relacionados al mismo sitio. Incluye: enlaces webs,
buscadores, foros, documentos, aplicaciones, compra electrónica, etc.
Principalmente un portal en Internet está dirigido a resolver necesidades de
información específica de un tema en particular.

Definiciones Definiciones
Un servicio web (web service o web services) es una tecnología que utiliza un Es un lenguaje estático para el desarrollo de páginas, sitios, portales web, el

Servicios Web
conjunto de protocolos y estándares que sirven para intercambiar datos entre
aplicaciones (paginas dinámicas) Distintas aplicaciones de software Lenguaje Web principal lenguaje se denomina HTML (HyperText Markup Language), en
español Lenguaje de Marcas Hipertexto). Dicho lenguaje puede ser
desarrolladas en lenguajes de programación diferentes, y ejecutadas sobre interpretado por los diferentes navegadores web.
cualquier plataforma o navegador.
Es una actividad que consiste en la planificación, diseño, implementación y
Constituyen todos los elementos(herramientas), que se utilizan sobre una mantenimiento de sitios web. Para el diseño de sitios web se debe considerar
pagina web con el fin de generar información de interés; normalmente son Diseño Web características como: navegabilidad, interactividad, usabilidad, arquitectura
Recursos Web elementos multimedia los que mas se utilizan en este ámbito: texto, audio,
video, sonido, imágenes, animaciones, códigos JavaScript, lenguaje de
de la información; interacción de medios, entre los que podemos
mencionar audio, texto, imagen, enlaces, video y la optimización de motores de
programación, bases de datos, etc.; todos y cada unos orientados a funcionar búsqueda.
en la web.
El alojamiento web (web hosting) es el servicio que provee a
Un navegador web (web browser ó browser) es los usuarios de Internet un sistema para poder almacenar información
un software, aplicación o programa que permite el acceso a la paginas, Alojamiento Web (ocupar un lugar específico en un servidor publico o privado),
Navegador Web sitios, portales web, interpretando la información de distintos tipos de imágenes, vídeo, o cualquier contenido accesible vía web. A este
espacio o lugar de almacenamiento se le asocia el dominio o nombre
recursos web para que estos puedan ser visualizados conjuntamente.
(visualización de documentos de hipertexto) lógico del sito.

Definiciones Diseño Web

Hojas de estilo en cascada (CSS, Cascading StyleSheets) es un lenguaje de diseño El lenguaje principal
gráfico para definir y crear la presentación de un documento estructurado escrito en un HTML.
llamando HTML, comprende
CSS Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario
escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML. un conjunto de marcas, tags,
códigos; los mismo que
CABECERA

eXtensible Markup Language ó "Lenguaje de Marcas Extensible", es un meta-lenguaje que

permite definir lenguajes de marcas, utilizado para almacenar datos en forma legible, permite caracterizan por estar entre
XML estructurar documentos grandes. A diferencia de otros lenguajes, XML da soporte a bases de los símbolos < _ _>; las
PAGINA WEB

datos, siendo útil cuando varias aplicaciones deben comunicarse entre sí o integrar información.
(sirve para el paso de información estructurada) marcas, tags, códigos
siempre tienen un inicio y un
CUERPO

Los lenguajes de programación en el ámbito del diseño web, constituyen la fin; estos últimos van con un
Lenguajes de herramienta principal para diseñar páginas web dinámicas que permitan slash así < /_ _>. Una pagina
Programación interactuar con los usuarios; estos lenguajes son capaces de convivir
conjuntamente con el HTML, los principales lenguajes de programación web tiene 2 partes
usados son: Javascript, PHP, ASP, ASP.NET, JSP, Python, Ruby identificables conocidas
como la cabecera y el cuerpo.

1
 09/01/2018

Diseño Web TAGS, MARCAS, CÓDIGOS

En la actualidad existen muchos
BLOC DE NOTAS
CABECERA
editores de HTML, pero realmente el CUERPO
reto es manejarlo de la manera mas Titulo de Página Web:
pura y sencilla; con esto queremos
dar énfasis que el verdadero reto es el
<title>_____________</title>
conocer y usar el lenguaje HTML.
Para este curso utilizaremos el Bloc de
Notas en el cual crearemos un
Ejercicio 1: Crear una Página Web, con titulo de Página
documento de texto .txt, un archivo SALUDO cuyo contenido sea HOLA MUNDO
.html; todo dentro de una carpeta.
Posteriormente usaremos editores
mas especializados en el área.
ORGANIZACION

TAGS, MARCAS, CÓDIGOS TAGS, MARCAS, CÓDIGOS

CABECERA CABECERA
Tipografía básica: CUERPO CUERPO
Encabezados:
negrita: <b>____________</b> Encabezado 1: <h1>____________</h1>
cursiva: <i>_____________</i> .
subrayado : <u>____________</u> .
Centrado de Texto: <center>______</center> Encabezado 6: <h2>____________</h2>
Salto de línea : <br>
Línea horizontal: <hr>
<hr size=“1”>
<hr width=“80”> Ejercicio 3: Crear una Página Web, con titulo de Página
TITULOS cuyo contenido tenga varios títulos en diferentes
Ejercicio 2: Crear una Página Web, con titulo de Página MI
tamaños encabezado.
PAGINA cuyo contenido sea un párrafo con una definición.

TAGS, MARCAS, CÓDIGOS TAGS, MARCAS, CÓDIGOS

CABECERA CABECERA
Bloques de Texto: CUERPO Tipografía Completa: CUERPO
Párrafo: <p>____________</p> <font>______________________</font>
<p align= “center”>
<p align= “right”>
<p align= “left”> Color: <font color= “ff0000”>
<p align= “justyfi”>
Tipo de letra: <font face= “arial”>
Tamaño de letra: <font size= “12”>
Divisiones: <div>____________</div>
<div align= “center”>
<div align= “right”>
<div align= “left”> Ejercicio 5: Crear una Página Web, con titulo de Página
<div align= “justyfi”>
Ejercicio 4: Crear una Página Web, con titulo de Página POEMA cuyo HIMNO NACIONAL cuyo contenido sea varios párrafos del
contenido se alineado a diferentes lados himno nacional; centrar, color, tamaño diferente

2
 09/01/2018

TAGS, MARCAS, CÓDIGOS TAGS, MARCAS, CÓDIGOS

CABECERA CABECERA
Color de Fondo de Pagina: CUERPO Color de Fondo de Pagina: CUERPO
<body bgcolor = “red”>__________________body> <body bgcolor = “red”>__________________body>

Color de Texto de Pagina:

<body text = “white”>________________body>
Color de Texto de Pagina:
<body text = “white”>________________body>
Imagen Fondo de Pagina:
<body background= “fondo.jpg”>________________body> Ejercicio 6: Crear una Página Web, con titulo de Página
COLORES cuyo fondo y texto tengan colores diferentes.
Ejercicio 6: Crear una Página Web, con titulo de Página
COLORES cuyo fondo y texto tengan colores diferentes.

TAGS, MARCAS, CÓDIGOS TAGS, MARCAS, CÓDIGOS

CABECERA CABECERA
Listas : CUERPO Listas de Glosario: CUERPO
No ordenadas o Viñetas: Glosario de Términos:
<ol> <dl>
<li>___</li> <dt></dt>
</ol> <dd></dd>

Ordenadas o Numeración: <dt></dt>

<ul> <dd></dd>
Ejercicio 8:
Ejercicio 7: <li>___</li>
<li>___</li> Crear un glosario de 4 términos </dl>
Crear 2 ejemplos de listas
</u> Los términos deben ir en rojo y
ordenadas y no ordenadas
la descripción en azul

TAGS, MARCAS, CÓDIGOS TAGS, MARCAS, CÓDIGOS

Imágenes: CABECERA Video: *mp4,webm,ogv,mkv,avi,hevc CABECERA
CUERPO CUERPO
<img src = “\nombre.ext” > <video src = “nombre.ext” >
ancho: <img width=“178”> ancho: <img width=“178”>
Alto: <img height=“180”> Alto: <img height=“180”>
borde: <img border=“2”> Control en pantalla: <controls>
Espacio vert.: <img vspace=“3”> Silencio: < muted>
Espacio horiz.: <img hspace=“3”> Repetir: <loop>
Alineación sup: <img align=“top”> Imagen Portada: <poster="presentacion.jpg“>
Alineación media: <img align=“middle”>
Alineación inferior: <img align=“bottom”> Ejercicio 10: Crear una pagina que
Ejercicio 9: Crear una pagina con 2
Alineación izq: <img align=“left”> cargue un video automáticamente y
párrafos y 1 imagen en medio
Alineación derec: <img align=“right”> se repita constantemente

3
 09/01/2018

TAGS, MARCAS, CÓDIGOS TAGS, MARCAS, CÓDIGOS

Audio: CABECERA Hipervínculos: CABECERA
*mp3,mid,wav
CUERPO CUERPO
<embed src=“audio.ext" > <a href = “pagina.html” >___link______</a>
ancho: < embed width="0" > <a href = “http://::::::::::” >___link______</a>
Alto: < embed height=“180”>
Volumen: < embed volume="80" > Destino otra ventana: <target=“_blank”>
Play automat. : <embed autostart=“true” > Destino misma ventana: <target=“_self”>
ToolTip : <title =“Informacion”>

Ejercicio 12: Crear una pagina que

Ejercicio 11: Crear una pagina con un
enlace una pagina propia y a una sitio
sonido de fondo
web externo