1) <header> Define la cabecera de una pagina o seccion que contiene un logotipo, el titulo del sitio web o una tabla de navegacion .
2) <nav> Es la sección que contiene los distintos enlaces de navegacion. 3)<section> Define una sección en un documento. 4)<article> Define un contenido autónomo que podría existir independientemente del resto del contenido.
5)<aside> Define a los contenidos relacionados ala página .
5)<footer> Es el pie de página .
En esta practica html5 tiene su hoja de estilo css , se podrá ver en la descarga .
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje html. Esta nueva versión se esta llevando acabo en la actualidad .
HTML5 está destinado a sustituir no sólo HTML 4, sino también XHTML 1 y DOM Nivel 2. Esta versión nos permite una mayor interacción entre nuestras páginas web y el contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.
ESTRUCTURA DE HTML5
1) <header> Define la cabecera de una pagina o seccion que contiene un logotipo, el titulo del sitio web o una tabla de navegacion .
2) <nav> Es la sección que contiene los distintos enlaces de navegacion. 3)<section> Define una sección en un documento. 4)<article> Define un contenido autónomo que podría existir independientemente del resto del contenido.
5)<aside> Define a los contenidos relacionados ala página .
5)<footer> Es el pie de página .
PAGINA WEB/html5
Hacer clic donde indica para poder obtener la página, el contenido de la pagina esta relacionada ala carrera de Computación e Informatice del instituto Pedro "P." D iaz.
Son las diversas unidades didácticas que la
carrera de computación e informática lleva entre sus tres módulos , al descargar la pagina se podrá ver lo que tiene en conjunto y encontraremos el plan de estudio como se muestra en la imagen ;
Dreamweaver CS6 es
un software oprograma de la empresa
Adobe fácil de usar que permite crear páginas web profesionales. Las funciones
de edición visual de Dreamweaver
CS6permiten agregar rápidamente diseño y funcionalidad a las
páginas, sin la necesidad de programar manualmente el código HTML.
¿Para qué sirve Dreamweaver cs6?
El Dreamweaver,
sirve para diseño y
programación web, básicamente para hacer
o modificar páginas de Internet. Para
utilizarlo se necesita al menos algún conocimiento de lenguaje Html o
PHP, estos son códigos o lenguajes que se utilizan para desarrollar sitios web.
Elementos que presenta
Dreamweaver cs6
1)Botón de menú
control:
Comenzando desde la esquina superior
derecha, se encuentra el botón de menú control , el cual nos permite controlar la ventana de la aplicación de
dreamweaver CS6, por ejemplo, se puede minimizar, maximizar, restaurar e
incluso cerrar la aplicación.
2)Barra de herramientas de acceso rápido
:
La versión de dreamweaver CS6 posee una barra de
herramientas de acceso rápido para realizar las siguientes funciones:
cambiarse a los diferentes tipos de vista, es decir, trabajar en la vista
diseño o bien en la vista de código, además puede manipular otras extensiones
o aplicaciones a dreamweaver y también se administran los sitios en su
servidor.
3)Perfiles de usuario :
La
opción perfiles de usuario tiene como propósito configurar el espacio de
trabajo en el software de diseño como lo es dreamweaver CS6, es una parte
fundamental, debido a que existen tres grandes grupos de usuarios de esta
aplicación, entre los cuales podemos mencionar:
desarrolladores
de aplicación
programadores y los enfocados al diseño de
páginas web.
Cada
uno de ellos emplea diferentes herramientas para la realización de su labor
dentro del amplio campo de internet, por lo tanto, el espacio de trabajo de
la aplicación se adapta a cada perfil de usuario.
4)Búsqueda:
La opción de búsqueda permite localizar información que requerimos para
la realización de una tarea en específico, por ejemplo: buscar todo lo
relacionado con las hojas de estilo en cascada, basta con teclearlo en el cuadro
de texto y oprimir la tecla Enter, para que la computadora se conecte a
internet y traiga información del tema en cuestión.
5)Menú principal :
A continuación se presenta el menú principal, que muestra las opciones
desplegables clásicas para el trabajo, los cuales aparecen por lo general en
cualquier tipo de ventana, cabe mencionar que el menú principal posee todas las
opciones que necesitamos en la aplicación.
6)Identificador de documento:
El identificador del documento o nombre de archivo que se esta
trabajando en el momento es muy valioso porque nos permite ver su nombre
completo, además de indicarme si sufrió modificaciones y todavía no las
guardamos, porque al final del nombre tiene un asterisco, también es muy
relevante la indicación de la trayectoria completa de la ubicación del archivo
dentro de la computadora, como se muestra en la imagen.
7)Panel
de insertar :
En la parte derecha de la ventana de dreamweaver
CS6 se encuentra el panel de insertar, que contiene los botones más comunes
para la inserción de diversos tipos de "objetos", como
hipervínculos, imágenes, tablas, elementos multimedia y plantillas en un
documento. Cada objeto es un fragmento de código html que permite establecer
diversos atributos al insertarlos, por ejemplo, se puede insertar una imagen
haciendo clic en el icono imagen de la
barra de insertar. Alternativamente, pueden poner objetos utilizando la
opción de insertar, localizada en el menú principal.
Este mismo panel se subdivide en otras fichas
como son: común, diseño, formularios, datos, spry, texto y favoritos, cada
una de estas fichas cuenta con distintos iconos enfocados a una función en
especial, que permite mejorar el diseño del contenido.
8)La barra de herramientas del documento:
Contiene iconos y menús emergentes que
proporcionan diferentes vistas de la ventana de documento (como la vista diseño
y vista código), diversas opciones de visualización y algunas operaciones
comunes como la obtención de una vista previa en un navegador, activar la
regla, cuadrícula y administrar los archivos creados, como puede ser subirlo al
servidor de internet y publicarlo a los clientes.
La vista en vivo se aplica por ejemplo, cuando se trabaja con bases de
datos y se muestra la información a través de una página web en tiempo real y
se puede probar la programación de la página asp o bien la conexión de a la
base de datos, como puede ser access o sql.
9)Área de trabajo :
Enseguida de la barra de herramientas del documento se observa
la ventana o área de trabajo, que muestra el documento actual que se
está creando y editando, como se muestra en la siguiente imagen.
10)Selector de etiquetas :
Inmediatamente debajo de la ventana o área de trabajo, se encuentra el
selector de etiquetas en la parte inferior izquierda, que muestra la jerarquía
de etiquetas que rodean a la selección actual en la vista de diseño, por
ejemplo, si estamos utilizando una tabla, veremos varias etiquetas relacionadas
con este tema, es decir, aparece la etiqueta <table> correspondiente a la
tabla, la etiqueta <tr> que forma el renglón de la tabla y la etiqueta
<td> identificando la columna de la tabla en donde estamos ubicados, el
selector de etiquetas permite ubicar perfectamente a cada elemento dando clic
en su etiqueta o parámetro correspondiente.
11)Panel de archivos :
En la parte derecha de la ventana de diseño, se encuentra
el grupo de paneles, podiendo activarlo o desactivarlo desde el menú
principal en la opción de ver y seleccionando ocultar paneles del menú
desplegable.Normalmente el panel que se encuentra abierto corresponde al de
archivos que permite administrar el sitio web o portal, mostrando los
archivos y carpetas que lo conforman. Utilizamos este panel para crear un
nuevo sitio, crear una nueva carpeta y archivo. Cuando se le cambia de nombre
a las carpetas y archivos, automáticamente dreamweaver realizará las
actualizaciones en las ligas que existan en el sitio con esos archivos. Otra
de las acciones más comúnmente empleadas es para actualizar el sitio cuando
hemos realizado algunos cambios y no se reflejan automáticamente y es
necesario refrescar su contenido.
12)Panel de propiedades :
En el panel de propiedades existen dos modos de establecer las
características de los elementos que componen a una página web, es decir, puedo
trabajar con código html o bien crear reglas para definir las hojas de estilo
en cascada (CSS). Al momento de dar un clic en el botón de programación HTML,
las propiedades que podemos aplicar a un objeto de la página son unas muy
particulares y al momento de aplicarlas se incrusta la etiqueta html de la
propiedad seleccionada.
12.1)Programación HTML:
En la parte inferior de la ventana de dreamweaver CS6 se encuentra el
panel de propiedades, que permite ver y cambiar diversas propiedades del objeto
o texto seleccionado, cada tipo de objeto tiene distintas propiedades.
Dependiendo del objeto seleccionado son las propiedades para aplicar, además el
panel de propiedades se puede expandir o contraer mediante un clic en el icono
ubicado en la esquina inferior derecha.
12.2)Hojas de estilo en cascada (CSS)
Dreamweaver CS6, en su panel de propiedades tiene un botón para aplicar
las características de los objetos que componen una página web, a través de las
hojas de estilo en cascada (CSS, Cascade Style Sheet), con ello, definimos
reglas para aplicar las propiedades de formato a los elementos de una archivo
html, mediante código especial, posteriormente se invoca a la clase definida
para que el objeto adquiera esas propiedades. Esto resulta relativamente
sencillo mediante la utilización del panel de propiedades en la modalidad de
hojas de estilo en cascada.
Ejemplo práctico
PASO
1:Abrimos
Dreamweaver CS6, clic en HTML y nos enviara a la pantalla de documento:
PASO 2: Si
al ingresar encontramos con algunas
direcciones, lo quitamos para que no haya alguna confusión:
PASO 3 :Comenzamos a trabajar
con tratar de imprimir “HOLA AMIGOS COMO ESTAN ” , como título
de página pondremos PRIMERA PAGINA utilizando los códigos como se muestra a continuación :
Para que nuestro mensaje
salga centrada, tamaño de letra y en negrita solo se empleó las siguientes
etiquetas:
<center><h1><b> HOLA AMIGOS COMO ESTAN </b></h1></center>
PASO
4 : Luego de haber digitado los códigos lo guardamos con el nombre index.html, para ello hacemos clic en Archivo/Guardar como /Guardar, y se
guardara la página:
PASO 5:Para ver nuestra página en el navegador solo hacemos clic a
la imagen del planeta y elegimos en que navegador verlo:
PASO 6:Podemos darle una Vista previa en chrome y el resultado será
como se muestra en la imagen:
Como se puede apreciar
como título de página esta MI
PRIMMER PAGINA y como contenido se
observa HOLA AMIGOS COMO ESTAN, entonces es así como Dreammweaver
va permitirnos desarrollar poco a
poco nuestra página web, ya teniendo en cuenta sobre más códigos se podrá
digitarlos para que nuestra página sea buena.
