CETPRO PUNO Operación de Computadoras

MODULO OPERACIÓN DE PÁGINAS WEB

Web Hosting o simplemente, el hosting, es el espacio

físico que también es conocido como almacenamiento
web (web hosting), es el servicio que provee a los
usuarios de Internet un sistema para poder almacenar
información, imágenes, vídeo, o cualquier contenido
accesible vía web.
Lo que viene a significar, que un hosting es el lugar en el
que se guarda una página web o sitio web y que permite
que tu sitio sea visible entre los usuarios de Internet.
Los proveedores de hosting son los que te ofrecen el
servicio de almacenamiento.
(Plnaneta hosting, Inkahosting 1hosting hostingPeru,
Ninjahosting Apache Peru etc.)

Dominio es la dirección que se escribe en el navegador

y sirve para identificar y acceder al sitio web. es el
nombre único que recibe un sitio web en internet. Este
nombre identifica a una página web concreta Ejemplo
https://drepuno.gob.pe/
https://ugelpuno.edu.pe/web/
https://cetpropuno.edu.pe/

Pág. 1
CETPRO PUNO Operación de Computadoras

DIFERENCIAS ENTRE PÁGINAS WEB Y SITIO WEB

Varias páginas web conforman un sitio web, de la misma forma en que varias páginas
conforman un documento de Word, las páginas web están estructuradas jerárquicamente
de manera que dan estructura a un sitio web.

Una página web contiene una serie de elementos, como texto, enlaces, imágenes, audio
o video, estos elementos se integran con lenguajes de programación como HTML, CSS y
Javascript

La estructura general de un sitio web

consta de una página o sección de
inicio, donde se describe el sitio web
de forma general, además tiene una
serie de secciones básicas donde se
describen los productos o servicios,
otra donde se habla sobre la
empresa, institución u organización
dueña del sitio web, una sección de
contacto, por decir las básicas.

Conclusión:

Página web: una página web es un documento HTML puede tener CSS y JS.

Sitio web: conjunto de páginas web estructurada dentro de un dominio, dominio es la

dirección en internet

Aplicación web: es un software completo con toda una lógica de negocio con base de
datos con usuarios funciona con tecnología web (red social (lógica demasiada compleja))

EXISTEN 2 TIPOS DE PÁGINAS

Pág. 2
CETPRO PUNO Operación de Computadoras

PÁGINAS ESTATICAS: información está escrito en el

mismo código, el contenido está en el código ejemplo hola
Álvaro eso está en el código si entra Beto va seguir diciendo
hola Álvaro

PÁGINAS DINÁMICAS: se conecta a una base de datos y

atreves de esa base de datos lee la información de forma
dinámica, responde diferentes contactos diferentes si entra
Álvaro dice hola Álvaro si entra Beto dice hola Beto

PAGINA WEB

HTML: Lenguaje para construir (estructura) las páginas web. define la estructura la
información del sitio, Es un lenguaje marcado de hipertexto,

CSS: Lenguaje para estilizar (estilismo)las páginas web. define los estilos visualmente es
el maquillaje de la página web para que sea bonita, cosas agradables ante el ojo humano,
que la hace ser atractiva

JavaScript: Lenguaje interpretado para programar (funcionalidad) las páginas web.es la

lógica la programación.

Pág. 3
CETPRO PUNO Operación de Computadoras

FUNCIONAMIENTO DE SITIOS WEB O PÁGINAS WEB

Es muy importante hablar un poco antes de entrar de lleno

en el diseño del sitio web. A diario visitamos sitios web. Para
ello, se ejecuta un programa llamado navegador web,
(Google Chrome, Firefox, Opera…)
Por tanto, los navegadores se comunican mediante lenguaje
HTML para mostrarnos el contenido de una página web

Hoy en día, cualquier persona acceder a la Web, pero ¿Cómo se crearon páginas
web?
Has oído hablar de HTML y CSS, ¿tiene esto que ver con el funcionamiento de sitios
web? ¡Por supuesto!

HTML, acrónimo inglés de (HyperText Markup Language) (lenguaje de marcas

hipertextuales), es un lenguaje de marcación diseñado para estructurar textos y
presentarlos en forma de hipertexto. Lenguaje con el que se definen páginas Web.

CSS (Cascading Style Sheets, también conocidas como hojas de estilo): el papel de
CSS es gestionar la apariencia de la página web (diseño, posicionamiento, colores,
tamaño de texto). Este lenguaje ha complementado el código HTML desde 1996.

HTML 5 Es un lenguaje de maquetado o de etiquetado, no es un lenguaje de programación

Editor de código o texto: son Programas para escribir Códigos dedicados a la escritura
de código. Uno por lo general, puede utilizarlos para varios lenguajes, no sólo HTML
y CSS.

Hay muchos editores de código: (Visual Studio Code, Sublime Text, Notepad++, Brackets,
Atom, etc.) hay muchos, al final aquí cada uno elige el que más le gusta.
Un editor de código no debe tener formato, negrita, cursiva, subrayado. Al escribir códigos
debe autocompletarse, Puede soportar múltiples lenguajes, debe detectar errores de
sintaxis debe tener ayudas para un programador
El bloc de notas es uno de los primeros editores de texto, pero no es recomendable

Pág. 4
CETPRO PUNO Operación de Computadoras

DESCARGAR E INSTALAR NOTEPAD++

Pág. 5
CETPRO PUNO Operación de Computadoras

Pág. 6
CETPRO PUNO Operación de Computadoras

Pág. 7
CETPRO PUNO Operación de Computadoras

Pág. 8
CETPRO PUNO Operación de Computadoras

Pág. 9
CETPRO PUNO Operación de Computadoras

HTML5 - básico

HTML5 es la versión 5 del lenguaje de marcado HTML. Un documento escrito en HTML

tiene una estructura básica como la siguiente:

<HTML> Indica el inicio del documento.

<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.

Posible resultado de nuestro código HTML5

Pág. 10
CETPRO PUNO Operación de Computadoras

Descripción de la anatomía del código HTML5 – Las partes y su significado.

DOCTYPE
<!DOCTYPE html> La etiqueta doctype declara el tipo de documento, por lo que esta
está señalando que este es un documento HTML.

HTML
<html></html> Delimita el documento HTML.

Atributo a destacar LANG

<html lang="es"></html> Indica el lenguaje de contenido del código.

HEAD
<head></head> El elemento head delimita la cabecera del documento, entre sus
etiquetas contiene información como scripts, metadatos, estilos, ubicación de documentos
de estilos, título de la página, etc.

META
<meta name="description" content="Descripción de la WEB">
Las metas etiquetas se utilizan para identificar propiedades del documento como por
ejemplo el autor, el título y la descripción que mostrarán los buscadores, etc.

Usos a destacar META CHARSET

<meta charset="UTF-8"> Establece el tipo de codificación del documento.

META TITLE
<meta name="title" content="Título de la WEB">
Contiene el título que se mostrará en los buscadores.

META DESCRIPTION
<meta name="description" content="Descripción de la WEB">
Es el texto que se muestra bajo el título en los motores de búsqueda.

LINK
<link href="http://dominio.com/hoja-de-estilos.css"
rel="stylesheet" type="text/css"/>
Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este
documento.

BODY
<body></body> La etiqueta body delimita el cuerpo del documento y contiene todo
aquello que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc…

H1, H2, H3, H4, H5, H6

<h1>Título de la WEB</h1>
<h2>CONTENIDO PRINCIPAL</h2>
<h3>Testimonios</h3>
<h4>Avisos legales</h4>
Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más
importante y H6 el menos importante.
Pág. 11
CETPRO PUNO Operación de Computadoras

Escribir el siguiente ejemplo en la ventana de Notepad++

guardar como en algún lugar de la PC

Pág. 12
CETPRO PUNO Operación de Computadoras

si hay alguna corrección

siempre guardar nuevamente
haciendo clic en el icono

Para ver el resultado de nuestro ejemplo

Clic en boton derecho del mpuse clic en Abrir

Resultado final

Pág. 13
CETPRO PUNO Operación de Computadoras

Realizar el siguiente ejemplo:

Escribir el ejemplo 02

Pág. 14
CETPRO PUNO Operación de Computadoras

Resultado

Pág. 15