Diseño Web - Guía 2 - Estructura de Una Página Web2

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL La programación de HTML se puede hacer desde cualquier editor de texto y el
resultado de su ejecución se puede ver desde cualquier navegador (Chrome, Mozilla,

AREA: Tecnología e Informática – Grado 11 Opera, etc).
TEMA: Estructura básica de una página web Los documentos HTML se deben guardar con la extensión htm, html o php en el
caso que incluya código de PHP. Ejemplo: mi_pagina.html.
Glosario
 Codificación de caracteres: es el método que permite convertir un carácter de un Estructura básica de una página web
lenguaje natural en un símbolo de otro sistema de representación. La estructura de una página web debe contener los siguientes elementos:
 Etiqueta: es un texto incluido entre los símbolos menor que < y mayor que >.
 Extensión: Son letras que van al final del nombre del archivo precedidas por un
punto las cuales ayudan a diferenciar el tipo de archivo y el tipo de información
que este contiene.
 Hipervínculo: es un enlace, a una página web, un archivo, imagen, etc.
 Navegador: programa que permite navegar por internet u otra red informática de
comunicaciones.
El lenguaje HTML
HTML, por su sigla de HyperText Markup Language (lenguaje de marcas de
hipertexto), hace referencia al lenguaje de marcado para la Como vemos aquí, todo el documento se encierra entre las etiquetas <html> y
elaboración de páginas web. Está compuesto por una serie </html> e internamente contiene las etiquetas <head> </head> y <body> </body> las
de etiquetas, que el navegador interpreta y da forma en la cuales traducen en español cabeza y cuerpo, respectivamente.
pantalla. HTML dispone de etiquetas para imágenes, Entre las Etiquetas <head> </head>, pueden ir otras etiquetas como por
hipervínculos que nos permiten dirigirnos a otras páginas, ejemplo <title> </title>, en ésta se define el título que queremos que aparezca en la
saltos de línea, listas, tablas, etc. HTML también puede pestaña del navegador.
describir, hasta un cierto punto, la apariencia de un documento.
Por ejemplo:
HTML es un lenguaje de programación, que nos permiten crear páginas web
estáticas, es decir que su información no cambia, y la posibilidad de integrar otros
lenguajes de programación como PHP, creando así páginas Web dinámicas, es decir,
que su contenido puede cambiar dinámicamente. Da como resultado:
La etiqueta <!DOCTYPE html> indica el tipo de documento, y para este caso
está indicando que es un documento html en su última versión, la cual corresponde a
HTML5.
Entre las etiquetas <head> </head> se puede especificar el autor de la página,
una descripción, la codificación de caracteres etc., utilizando la etiqueta <meta> de la
siguiente forma:
Ejercicio: transcríbelo en un editor web. Guárdalo con el nombre mipagina.html en

En este ejemplo se establece la codificación de caracteres en UTF8, esta el escritorio. Luego ábrelo con el navegador web y observa los resultados.
permitirá que en la página se reconozcan las tildes y otros caracteres propios del
español.
Párrafos
Todo lo que va entre las etiquetas <head> y </head> no será visible en la página, a
Para los párrafos HTML proporciona las etiquetas <p> y </p>. Cada párrafo de la
excepción del título que aparece en la pestaña con la etiqueta <title> </title>.
página se debe encerrar entre este par de etiquetas y entre cada párrafo se mostrará
un espaciado. Un ejemplo del uso de estas etiquetas se muestra en la imagen que se
Todo lo que será visible irá entre las etiquetas <body></body>.
ve a continuación:
Títulos, párrafos y listas en HTML

Títulos
HTML provee una serie de etiquetas para establecer títulos dentro de la página.
Estas etiquetas son:<h1>, <h2>, <h3>, <h4>, <h5>, <h6>; cada una con su respectivo
cierre.
Un texto establecido entre alguna de estas etiquetas se mostrará en negrita,
con un espaciado arriba y abajo, y con un tamaño que depende de la etiqueta que se
use, es decir, un texto entre las etiquetas <h1> y </h1> se verá más grande que un
texto entre las etiquetas <h6> y </h6>.
Por ejemplo, veamos el siguiente código:
Ejercicio: abre el archivo mipagina.html con notepad. Digita las líneas 7-12 de la
imagen anterior justo después de la etiqueta <h6> del archivo editado. Guarda los
cambios y observa con el navegador web los resultados.
Listas
En HTML las listas son similares a las viñetas que colocamos a un texto. A
continuación veremos 2 tipos de listas, las listas ordenadas y las no ordenadas.
Listas no ordenadas: van dentro de la etiqueta <ul> y </ul>. Cada ítem que
queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre </li>
Ejercicio: Crea una página web llamada receta. En ella debe utilizar las etiquetas
Por ejemplo:
estudiadas en esta guía (títulos, párrafos, listas). Siga el siguiente ejemplo:
Las etiquetas HTML pueden tener propiedades, en este caso vemos que la
etiqueta <li> tiene una propiedad type en la cual determinamos el tipo de viñeta que
queremos utilizar, las cuales pueden ser circle, square o disc.
Listas ordenadas: van enmarcadas dentro de las etiquetas <ol> y </ol>. Cada ítem
de la lista se escribe con la misma etiqueta que en las no ordenadas: <li> y </li>. Por
ser listas ordenadas las viñetas serán números.
Por ejemplo:

Diseño Web - Guía 2 - Estructura de Una Página Web2

Cargado por

Copyright:

Formatos disponibles

Diseño Web - Guía 2 - Estructura de Una Página Web2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Web - Guía 2 - Estructura de Una Página Web2

Cargado por

Copyright:

Formatos disponibles

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL La programación de HTML se puede hacer desde cualquier editor de texto y el

resultado de su ejecución se puede ver desde cualquier navegador (Chrome, Mozilla,

Ejercicio: transcríbelo en un editor web. Guárdalo con el nombre mipagina.html en

Títulos, párrafos y listas en HTML

También podría gustarte