Sesión 01 - Formatos Web

SESIN01
FORMATOS WEB
TEMAS A DESARROLLAR: HTML vs Pgina Web. Etiquetas bsicas de accin y formato. Pginas Web de Office. Pginas Web en Dreamweaver. Estilos de fondo Comparacin en cdigo. Crear una cuenta web gratuita. El archivo index. Editar web en el servidor. Cargar o publicar archivos. Formatos vlidos. Control de archivos del Sitio Web.
OBJETIVOS DE LA SESIN: El participante al final de la sesin estar en condiciones de: Entender de que estn compuestas las pginas web Comparar las etiquetas entre las distintas fuentes de cdigo visitadas
PRCTICA DE REFORZAMIENTO.
www.ucv.edu.pe/cis cisvirtual@ucv.edu.pe
INTRODUCCIN Estimado participante del curso virtual, te doy la bienvenida a esta sesin 01 a nombre del CIS de nuestra universidad Csar Vallejo. El propsito de la sesin es aprender a utilizar los formatos web en distintas formas y formatos as como la publicacin de los mismo en un servidor gratuito llamado MIARROBA. Necesitamos de tu compromiso para que juntos podamos generar el conocimiento suficiente en esta nueva aventura. Debes seguir las instrucciones planteadas a modo de ejemplo y tus dudas o sugerencias anotarlas para alcanzrmelas por correo o sesin de chat. Disfruta de este tpico titulado:
HTML VS PGINA WEB El lenguaje HTML (Hiper Text MarkupLanguage) es el lenguaje base de toda pgina web. Podemos comprobarlo con acceder a internet y cargar un portal. Este formato tiene la virtud de ser liviano, es decir de ocupar poco espacio. Para ver el cdigo fuente se puede utilizar el men Ver o pulsando botn derecho en la misma pgina. Ejemplo: 01. Carga el navegador Internet Explorer usando el nombre del ejecutable
O doble clic en
02. Carga la pgina deseada
03. Luego visualiza el cdigo fuente ir al men ver luego a la opcin Cdigo fuente.
04. Luego Prueba con la pgina de la Universidad Csar Vallejo: http://www.ucv.edu.pe
05. Ahora verifica que las pginas tienen etiquetas comunes. Ej. <html>, <body>,
ETIQUETAS BSICAS DE ACCIN Y FORMATO Las etiquetas HTML son comandos encerrados entre los smbolos <> y pueden ser de dos tipos bsicamente: Abiertos Cuando el comando no requiere su cancelacin. Ej. <hr size=10 color=blue> <br>
Cerrados Cuando el comando requiere su comando de cierre aplicando a la etiqueta el carcter \ Ej. <body bgcolor=yellow> </body> Los comandos que se agregan dentro de las etiquetas se conocen como argumentos. Ej. (bgcolor=yellow). Para comprobar su utilidad crearemos una pgina web usando un editor simple. Ejemplo: 01. Carga el editor simple de Windows llamado Block de Notas usando el nombre del ejecutable
O active el programa desde el grupo Accesorios
02. Escribe el siguiente cdigo de muestra
03. Guardar con el nombre bienvenido y no olvidar de agregar la extensin html
04. Verificar que existe y abrirlo con doble clic
05. Si desea modificar algo, debe abrirlo con el programa en que se cre.
06. Realiza los cambios deseados. Ej. Color de fondo a verde
07. Guarda los cambios 08. Luego Abre y apreciar los cambios:
PGINAS WEB DE OFFICE Las aplicaciones de Microsoft Office (Word, Excel, Power Point, etc.) incluyen entre sus formatos de salida al formato Pgina Web como una forma muy fcil de disear pginas. Hay que tener en cuenta que todo lo que el documento emplea registra una copia en una carpeta generada automticamente. Ejemplo: 01. Carga el editor profesional Microsoft Office Word 2007 usando el nombre de su ejecutable
O activar la aplicacin desde su grupo Microsoft Office 02. Ahora escribe el texto de muestra
10
03. Luego aplica los formatos de fuente y prrafo indicados
04. Luego aplica un color de fondo degradado para la pgina como se muestra
11
05. Verifica y guarda el trabajo con otro formato
06. Asgnale el nombre e-virtual y elegir el formato Pgina Web
12
07. Verifica y abre el archivo html.
08. Verificar que los componentes utilizados en la pgina se guardan en una carpeta generada llamada e-virtual_archivos
09. Toda la suite de Office tiene este recurso de generar pginas web. Ej. Crear un grfico de ventas usando Excel
13
O activar la aplicacin dese su grupo Microsoft Office
14
09. Guardar como ventas usando el formato Pgina Web
15
10. Verificar que se ha creado una nueva pgina web
11. Verifica el contenido de su carpeta ventas_archivos creado automticamente
16
PGINAS WEB EN DREAMWEAVER El Adobe Dreamweaver CS3 es un editor profesional para el diseo y generacin de documentos web. Utiliza una gama de formatos que se refleja en la interaccin que hacen con el usuario. Algunas pgina muestran datos al usuario (estticas) y otras solicitan informacin al usuario (dinmicas) Ejemplo: 01. Cargar el Editor Web Profesional llamada Adobe Dreamweaver CS3 usando el nombre de su ejecutable
O activar la aplicacin desde el men Programas
17
02. Crea una nueva pgina en formato HTML
03. Escribe e inserta la regla horizontal y tabla como se indica
04. Guardar los cambios con el nombre requerimientos
18
05. Descarga algunas imgenes apropiadas desde internet (o usarlas desde la carpeta Recursos)
19
06. Inserta las imgenes con un tamao de 100 x 100 (Ancho: 100, Alto: 100) como se indica
07. Verifica que las imgenes ya se insertaron.
08. Luego verifica: Cuando la pgina sufre algunos cambios, se identifica el carcter * al final de su nombre.
20
09. Verifica que Dreamweaver tiene una vista llamada Cdigo que muestra en HTML todo lo que ests realizando.
10. Verifica que la vista por defecto se llama Diseo.
11. Guarda los cambios
21
ESTILOS DE FONDO La presentacin de una pgina web es importante para lograr capturar la atencin del visitante. Se recomienda aprovechar un recurso especial de las pginas llamado Fondo con un tratamiento especial segn el editor empleado. Es comn aplicarle un color o una imagen. Ejemplo: 01. Descarga una imagen con motivo de nubes en la carpeta Trabajos (o copiarla desde la carpeta Recursos)
02. Crea una pgina web llamada fondo1 usando el block de notas donde se aplique un estilo de fondo con color verde
22
03. Modifica la pgina web llamada fondo1 para que se aplique la imagen nubes.jpg como fondo
04. Crea una pgina web llamada fondo2 usando Microsoft Word donde se aplique un estilo de fondo con color verde
23
24
06. Crea una pgina web llamada fondo3 usando Adobe Dreamweaver CS3 donde se aplique un estilo de fondo con color verde.
25
26
08. Verifica en su ventana de cdigo que se construye una etiqueta de estilos
27
COMPARACIN EN CDIGO El formato HTML es el lenguaje comn en las pginas Web. En el block de notas se necesita conocer los comandos y se deben escribir. En Microsoft Word y Adobe Dreamweaver los cdigos HTML se generan con cada accin del usuario. Sin embargo existe en internet diversos generadores de cdigo HTML que fcilmente se acoplan a nuestras pginas. Ejemplo. 01. Abre la pgina fondo1 y verificar su cdigo. Note que las etiquetas son simples y pocas.
02. Abre la pgina fondo2 y verificar su cdigo. Microsoft Word genera muchas etiquetas que hacen referencias externas, en especial a los motores de Microsoft Office.
28
03. Abre la pgina de fondo3 y verificar su cdigo. Adobe Dreamweaver hace referencias locales y genera sus propios estilos.
04. Ahora buscaremos portales en internet que generen cdigo HTML de forma muy fcil y que se pueden acoplar a nuestra pgina.
29
05. Selecciona el primer reporte como ejemplo
06. Llena la informacin solicitada y generar
30
07. Ubica el cdigo HTML generado
08. Copia el cdigo
31
09. Ubcate al final del cdigo de la pgina fondo3 desde su editor Dreamweaver y pegar
10. Guardar los cambios y verificar
32
CREAR UNA CUENTA WEB GRATUITA Una cuenta Web o sitio Web es un espacio alojado en el disco de un servidor Web conectado a la red de redes. Puede ser gratuita o pagada dependiendo de las caractersticas y niveles de seguridad deseado. Existen muchos servidores gratuitos y usaremos uno para el curso. Ejemplo: 01. Carga el servidor web gratuito llamada MiARROBA
02. Activa el registro e ingrese los datos solicitados. Reemplace los datos muestra por sus propios datos. Acepte los trminos y Continuar
33
03. Verifica que ahora espera un cdigo de activacin
04. Abre su cuenta de correo declarada, abrir el mensaje y copiar el cdigo de activacin proporcionado
34
05. Volver a portal de registros y escribir el cdigo proporcionado
06. Verifica que su cuenta ha sido creada
07. Ahora ir al portal principal
08. Verifica los servicios que dispone tu servidor
35
EL ARCHIVO INDEX Es el nombre que debe tener la pgina principal del sitio web debido a que la configuracin del sitio la reconoce como el portal de control. Ejemplo: 01. Descargar una foto de la Universidad Csar Vallejo encontrada en internet o usar la de la carpeta Recursos
36
02. Convertir la imagen a JPG (solo si fuese necesario como en este caso que es BMP)
37
03. Carga el Adobe Dreamweaver usando el acceso directo del men inicio
04. Crea una pgina usando HTML
38
05. Guarda el archivo con el nombre index
06. Inserta una tabla de 3 filas x 1 columna con 500 pxeles de ancho y sin bordes
39
07. Escribe el nombre de la institucin, insertar la foto y escribir una breve apreciacin de su centro de formacin profesional.
08. Aplica formatos de color de fuente y color de fondo como se indica (o a su gusto)
40
09. Guarda los cambios
41
CARGAR O PUBLICAR ARCHIVOS. FORMATOS VLIDOS Es la accin del usuario de copiar sus archivos desde su PC local hacia el espacio destinado en su cuenta web. Se pueden subir muchos tipos de documentos, pero se recomienda que los archivos sean livianos para que no se sature la carga y/o descarga. Ejemplo: 01. Define claramente que archivos se subirn (la pgina index y los archivos que se insertaron)
02. Entre a su cuenta web con los datos de su login y password definidos
42
03. Crea un espacio para tus archivos con un nombre nico en el servidor y la misma contrasea de acceso
43
04. Carga el servicio de archivos FTP y subir los archivos definidos en el paso 01
44
Nota: Para selecciones mltiples utilizar la tecla CTRL sostenida
05. Verifica el panel de mensajes y verificar que todo se realiza con normalidad.
06. Verifica que los archivos fueron cargados.
45
07. Verifica que se encuentra en una direccin de internet (cargar una nueva ventana para verificar)
http://grupo01cis.webcindario.com
08. Si desea saber la direccin web de un documento, haga clic en su icono
46
CONTROL DE ARCHIVOS DEL SITIO WEB El sitio web es un espacio en el servidor reservado por el solicitante de una cuenta web. En este espacio se puede administrar (crear, modificar, borrar) el contenido gracias al servicio FTP disponible para los espacios creados. Ejemplo. 01. Acceda a su cuenta web
02. Carga el Administrador de espacios
47
03. Cargar el Administrador del espacio deseado.
04. Carga el servicio FTP para controlar los archivos
05. Edita los objetos Crear carpetas
48
Crear archivos
Vista Previa
49
Modificar
Borrar
50

Sesión 01 - Formatos Web

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Sesión 01 - Formatos Web

Загружено:

Авторское право:

Доступные форматы

SESIN01

02. Carga la pgina deseada

04. Luego Prueba con la pgina de la Universidad Csar Vallejo: http://www.ucv.edu.pe

O active el programa desde el grupo Accesorios

02. Escribe el siguiente cdigo de muestra

03. Guardar con el nombre bienvenido y no olvidar de agregar la extensin html

04. Verificar que existe y abrirlo con doble clic

06. Realiza los cambios deseados. Ej. Color de fondo a verde

03. Luego aplica los formatos de fuente y prrafo indicados

05. Verifica y guarda el trabajo con otro formato

06. Asgnale el nombre e-virtual y elegir el formato Pgina Web

07. Verifica y abre el archivo html.

O activar la aplicacin dese su grupo Microsoft Office

09. Guardar como ventas usando el formato Pgina Web

10. Verificar que se ha creado una nueva pgina web

11. Verifica el contenido de su carpeta ventas_archivos creado automticamente

O activar la aplicacin desde el men Programas

02. Crea una nueva pgina en formato HTML

03. Escribe e inserta la regla horizontal y tabla como se indica

04. Guardar los cambios con el nombre requerimientos

07. Verifica que las imgenes ya se insertaron.

10. Verifica que la vista por defecto se llama Diseo.

11. Guarda los cambios

08. Verifica en su ventana de cdigo que se construye una etiqueta de estilos

05. Selecciona el primer reporte como ejemplo

06. Llena la informacin solicitada y generar

07. Ubica el cdigo HTML generado

08. Copia el cdigo

10. Guardar los cambios y verificar

03. Verifica que ahora espera un cdigo de activacin

05. Volver a portal de registros y escribir el cdigo proporcionado

06. Verifica que su cuenta ha sido creada

07. Ahora ir al portal principal

08. Verifica los servicios que dispone tu servidor

04. Crea una pgina usando HTML

05. Guarda el archivo con el nombre index

09. Guarda los cambios

Nota: Para selecciones mltiples utilizar la tecla CTRL sostenida

06. Verifica que los archivos fueron cargados.

08. Si desea saber la direccin web de un documento, haga clic en su icono

02. Carga el Administrador de espacios

03. Cargar el Administrador del espacio deseado.

04. Carga el servicio FTP para controlar los archivos

05. Edita los objetos Crear carpetas

Вам также может понравиться