INSTITUTO DE COMPUINGLÉS DE ORIENTE
Páginas Web Interactivas Programador de Sistemas y Redes
1
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
HTML • Es un lenguaje para la creación de páginas web, HyperText Markup Language (Lenguaje de marcado de hipertexto). • Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código basado en etiquetas (tags). • La especificación más actual del lenguaje HTML es HTML5.
2
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Etiqueta • Una etiqueta (tag) es una palabra reservada del lenguaje HTML que permite incluir un cierto tipo de contenido o modificar la forma en que un contenido se muestra, las etiquetas van encerradas entre signos <>, existen diferentes tipos de etiquetas que permiten añadir contenido a una página web, por ejemplo: texto, imágenes, hipervínculos, tablas, etc. • Existen etiquetas que deben trabajar en pares, una para la apertura y otra para el cierre, por ejemplo: <i>Texto</i> (texto en cursiva), hay otras etiquetas en las que solo se requiere una sola, por ejemplo: <br /> (nueva línea).
3
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Etiqueta Las etiquetas pueden tener atributos que modifican su comportamiento, los atributos de una etiqueta dependen de ésta, en resumen se puede dar la siguiente sintaxis de una etiqueta: Sintaxis Etiqueta con apertura y cierre <etiqueta atributo1=“valor1” atributo2=“valor2” …> contenido </etiqueta> Etiqueta simple <etiqueta atributo1=“valor1” atributo2=“valor2” … /> 4
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Estructura de una página HTML Una página HTML5 tiene la siguiente estructura: <!DOCTYPE html> <html lang=“es-MX”> <head> <!-- Etiquetas del encabezado de la página web (esto es un comentario)--> </head> <body> <!-- Contenido de la página web (esto es otro comentario) --> </body> </html> El atributo de html lang=“es-MX” especifica que el lenguaje de la página es español de México. 5
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Etiquetas de encabezado Etiqueta Descripción <title> Título de la página web Enlaza el contenido de otro archivo con éste, puede ser <link> una hoja de estilos o un icono Define un script que puede tomarse de un archivo o <script> listarse despues de esta etiqueta. Conocidas como meta etiquetas, pueden tener varios <meta> valores dependiendo de su uso.
Sintaxis <title>título</title>
<link href="archivo.ext" rel="relacion" type="tipo de contenido" /> <script src="archivo.ext" type="tipo"></script> <meta name="nombre" content="contenido" />
Meta etiquetas Etiqueta <meta charset> <meta name="author">
Descripción Define el mapa de caracteres que se usará en esta página Sirve para indicar al autor de la página. Permite escribir una breve descripción del contenido de la <meta name="description"> página. Define un conjunto de palabras clave separados por comas <meta name="keywords"> que resumen el contenido de la página.
Ejemplo: <meta charset="UTF-8" /> <meta name="author" content="Juan Pérez"> <meta name="description" content="Sitio personal de Juan Pérez"> <meta name="keywords" content="persona, Juan Pérez, estudiante">
6
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Etiquetas de formato Estas son algunas de las etiquetas de formato que se usan en HTML. Etiqueta
Descripción Define un encabezado con valor del 1 al 6, <h1>…<h6> el 1 es el de mayor importancia. <strong> Escribe el texto en negrita. <i> Escribe el texto en cursiva. <u> Texto subrayado.
<h1>Título</h1> <strong>texto en negrita</strong> <i>texto en letra cursiva</i> <strong>subrayado</strong>
<big> <small> <sup> <sub> <mark>
<strong>grande</strong> <small>pequeño</small> H<sub>2</sub>O E=mc<sup>2</sup> <mark>Texto resaltado</mark>
Texto mas grande Texto mas pequeño Texto superindice. Texto subindice. Resalta un texto
Uso
Resultado
Título texto en negrita texto en letra cursiva subrayado
grande pequeño
H2O E=mc2 Texto resaltado
Es posible anidar las etiquetas HTML, es decir, colocar una dentro de otra, p.e. <strong><i>Negrita y cursiva</i></strong>, produce: Negrita y Cursiva 7
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Etiquetas de formato Algunas de las etiquetas de formato para párrafos. Etiqueta
Descripción
Uso
Resultado texto del párrafo
<p>
<br />
Define un párrafo
<p>texto del párrafo</p>
Define una nueva línea
Texto en varias Texto<br />en varias<br />líneas líneas
Las etiquetas de formato de párrafo pueden incluir etiquetas de formato de texto dentro de ellas.
8
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Etiquetas para insertar elementos Insertar imágenes: <img src=“ruta/archivo.ext” width=“ancho” height=“alto” alt=“texto alternativo” /> Insertar hipervínculos (links, ligas, enlaces): <a href=“URL” target=“abrir_en”>Texto del enlace</a> p.e. <a href=“http://www.icocompuingles.com” target=“_blank”>ICO</a> Target puede valer: _blank Abre una ventana en blanco para cargar el sitio. _parent Carga el sitio en la ventana padre del documento actual. _self Carga el sitio en lugar de la página actual. _top Carga el sitio en la ventana principal. Nombre Carga el sitio en la ventana que tenga el nombre que se especifica. 9
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Etiquetas para insertar elementos Tablas.- Para insertar tablas se usan varias etiquetas. Esta es la construcción de una tabla. <table></table>.- Define el comienzo y fin de la tabla. <tr></tr>.Define el comienzo y fin de un renglón. <td></td>.Define el contenido de una celda. <table> <tr> <td>Contenido de celda 1</td> <td>Contenido de celda 2</td> </tr> <tr> <td>Contenido de celda 3</td> <td>Contenido de celda 4</td> </tr> </table>
El código anterior produjo la siguiente tabla: Contenido de celda 1 Contenido de celda 3
Contenido de celda 2 Contenido de celda 4
10
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
_SiteLayout.cshtml La página _SiteLayout.cshtml contiene la disposición general de la información en todas las páginas del sitio, contiene los elementos que no cambian que se muestran en el resto de las páginas.
11
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Práctica 1: Página de carreras. - Crea la página de carreras de computación: Asistente Ejecutivo, Diseño Gráfico y Programador de Sistemas y Redes puedes darte una idea verificando el sitio web original del instituto en: http://www.icocompuingles.com/
12
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Práctica 2: Página de cursos. - Crea la página de cursos de AutoCAD, puedes auxiliarte del contenido real que está en http://www.icocompuingles.com/
13
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Práctica 3: Página de planteles. - Crea la página de planteles con la lista de los planteles que pertenecen a tu estado, usa una tabla para colocar los datos de dirección y teléfono puedes ayudarte de la página de ICO: http://www.icocompuingles.com/
14
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Práctica 4: Página de enlaces.
- Busca en Internet tres sitios que tengan que ver con la educación y la tecnología y haz que desde la página de Enlaces se pueda entrar a cada uno de ellos.
15
Área de Investigación en Computación
16