Estructura de una página web
En Internet existen muchos lenguajes de programación, sin embargo, el más común y sencillo de aprender es el HTML, conocido como lenguaje de marcas de hipertexto (Hyper Text Markup Language), se trata de un conjunto de etiquetas (tags) que tienen una apertura y cierre, estás etiquetas son interpretadas por un software llamado navegador y son mostradas en la ventana del visualizador.
La principal regla a cumplir en este lenguaje es conocer y crear la estructura básica del programa, la etiqueta html de apertura, para ello, se encierra entre los símbolos de menor que y mayor que <html>, conocida como la etiqueta de apertura, en otra línea del programa se escribe la etiqueta de apertura head <head>, seguida de la etiqueta title <title>, se escribe el título de la página web que se elabora, posteriormente se cierra la etiqueta title, agregando una diagonal al inicio de la etiqueta </title>, a continuación se cierra la etiqueta head </head>, el contenido de la página web que se observa en Internet, se coloca dentro una etiqueta llamada body <body>, comúnmente se denomina el cuerpo del programa, al terminar de escribir el contenido de la página, se cierra la etiqueta body </body> y termina el programa cerrando la etiqueta html </html> la estructura básica se describe en el video 38.
<html>
<head>
<title> título de la página web que se visualiza en Internet </title>
</head>
<body>
En esta sección se escribe el contenido de la página web y todos sus componentes
</body>
</html>
HTML, significa Lenguaje de Marcado de Hipertexto, se basa en el SGML (Lenguaje Estándar de Marcado Generalizado), un sistema grande de procesamiento de documentos (Arce, 2016, pp. 133 - 144).
Video 38. Estructura básica de una página web.
Actividad de aprendizaje 1
Estructura básica de una página web
En esta actividad de aprendizaje se inicia el proyecto de la creación de un sitio web de la unidad académica CECyT No. 7. Se crea un archivo que lleva por nombre portada.htm, tiene una breve descripción de las diferentes áreas académicas, científicas, tecnológicas, culturales, sociales y deportivas de la escuela.
Una vez creado el sitio que tiene a todos los archivos htm, imágenes, sonidos y video, cuyo propósito del diseño del sitio web llamado cecyt72IVE, es mostrar las seis especialidades que oferta la escuela. Para ello, se inicia por elaborar una página web que haga referencia a la portada de la institución, este procedimiento se realiza a través del bloc de notas y posteriormente se crea otro archivo que contenga las carreras, se utiliza el editor institucional Dreamweaver CS6.
Actividad de aprendizaje 1 Parte 1
Creación de la estructura básica, mediante etiquetas html en el bloc de notas
En esta actividad se crea una portada que identifique a la unidad académica. En el video 39 se detalla la estructura básica elaborada mediante etiquetas html escritas en el bloc de notas, tiene como nombre portada.htm, se guarda en el disco duro C: dentro de un subdirectorio llamado Humberto y dentro de él, en la carpeta cecyt72IVE
A continuación se describe paso a paso el procedimiento a seguir para la elaboración de la actividad de aprendizaje 1 parte 1.
|
Procedimiento para crear el archivo portada.htm en el bloc de notas |
Video 39. Creación del archivo portada.htm en el bloc de notas.
También se elabora en el software Dreamweaver CS6 en vista diseño, el archivo titulado indice.htm, el cual tiene la lista de las carreras que se imparten en la unidad académica. El archivo generado debe tener como nombre indice.htm y guardarlo en el disco duro C: en la carpeta cecyt72IVE
A continuación, se describe el procedimiento paso a paso, para crear el archivo indice.htm y presentacion.htm
|
Procedimiento para crear el archivo indice.htm y presentacion.htm en Dreamweaver |
Actividad de aprendizaje 1 Parte 2
Creación de la estructura básica, mediante el software Dreamweaver CS6
Se crean en Dreamweaver CS6 en vista diseño, un archivo htm de cada taller de la unidad académica, se describe el título oficial de la carrera, objetivo, competencias a desarrollar y campo ocupacional.
En la tabla 2 se muestra la relación de la especialidad y el nombre que lleva el archivo htm, se recomienda asignar este nombre. Los archivos generados se guardan en el disco duro C: en la carpeta cecyt72IVE
Tabla 2. Especialidades del CECyT No. 7 "Cuauhtémoc".
| Especialidad o carrera | Nombre del archivo de la página |
| Técnico en aeronáutica | aeronautica.htm |
| Técnico en sistemas automotrices | automotriz.htm |
| Técnico en construcción | construccion.htm |
| Técnico en instalaciones y mantenimiento eléctricos | electricidad.htm |
| Técnico en mantenimiento industrial | mantenimiento.htm |
| Técnico en soldadura industrial | soldadura.htm |
Recuerda que en el nombre del archivo se omiten los acentos, caracteres especiales y se respete la extensión de 3 letras (htm).
Empieza por el archivo aeronautica.htm, una vez digitado en Dreamweaver CS6 la información referente al título oficial de la carrera, objetivo, competencias a desarrollar y campo ocupacional, su visualización en el navegador se muestra como en la figura 18:
Figura 18. Contenido del archivo aeronautica.htm
En el video 40 se explica detalladamente la creación del archivo de la especialidad de aeronautica.htm en Dreamweaver en vista diseño versión CS6.
Video 40. Creación del archivo aeronautica.htm en Dreamweaver CS6.
Continuar con el archivo automotriz.htm, construccion.htm, electricidad.htm, mantenimiento.htm y soldadura.htm
|
Procedimiento para crear las cinco especialidades restantes en Dreamweaver |
El presente material es usado exclusivamente con fines académicos y educativos sin cuestiones de lucro, se otorgan los correspondientes derechos de autor, créditos, autoría, marcas registradas de cada imagen, texto y contenido del presente material educativo en las citas textuales y fuentes de consulta que son parte de este recurso.