CONSTRUYENDO UNA PÁGINA WEB CON HTML. Introducción Construir una página web de sólo contenido es relativamente fácil La forma de abordarlo es sistémica.

Presentación del tema: "CONSTRUYENDO UNA PÁGINA WEB CON HTML. Introducción Construir una página web de sólo contenido es relativamente fácil La forma de abordarlo es sistémica."— Transcripción de la presentación:

1 CONSTRUYENDO UNA PÁGINA WEB CON HTML

2 Introducción Construir una página web de sólo contenido es relativamente fácil La forma de abordarlo es sistémica y responde a una visión estructurada McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

3 HYPERTEXT MARKUP LANGUAGE (HTML) HTML le permite Especificar el contenido Especificar el formato para el contenido McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

4 HYPERTEXT MARKUP LANGUAGE (HTML) Para crear un sitio web usted debe crear un documento html Documento HTML – archivo que contiene el sitio Web y las instrucciones de formato HTML Una página Web es un vista de documento HTML vista desde un browser McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

5 Creando un Documento HTML Use CUALQUIER editor de texto Para este efecto utilice Notepad Click en Start Seleccione Programas Seleccione Accesorios Seleccione Notepad Cree un documento HTML y grábelo con una extensión htm or html McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

6 Secciones del Documento HTML HTML tag – especifica el formato y presentación de la información en un sitio web Structure tags – tags HTML que establecen las secciones necesarias Existen dos secciones principales en un documento HTML Sección Head Sección Body McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

7 Secciones del Documento HTML McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Body section Structure tags

8 Tags HTML Usualmente son and Documento HTML entero McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

9 Documento HTML McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

10 Página Web Resultante McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Imagen Listas

11 Trabajando localmente Para ver un sitio web local en Internet Explorer Click en File y Open Click en Browser Elija la carpeta donde guardó el archivo y seleccione el documento HTML Click en Open y OK McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

12 Formateo Básico de Texto Strong (bold) - and Underline - and Emphasis (italics) - and Line break - Horizontal rule - McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

13 Formateo básico de Texto McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Many different basic formatting tags

14 Formateo Básico de Texto McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

15 Creando Encabezados Heading tags – Utilizados para definir encabezados y, donde number es de 1 a 6 y - más grande y - más pequeño McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

16 Creando Encabezados McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Heading tags

17 Creando Encabezados McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

18 Ajustando el Color del Texto El color por defecto es negro, pero puede ser cambiado and Ejemplo I like the color blue. Se le como…I like the color blue. McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

19 Ajustando el Color del Texto McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Font colors

20 Ajustando el Color del Texto McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

21 Ajustando el Tamaño del Texto Por defecto es 3, pero al igual que el color puede ser cambiado y Ejemplo A stronomy is fun Se lee como… A stronomy is fun. McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

22 Ajustando el Tamaño del Texto McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Font sizes

23 Ajustando el Tamaño del Texto McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

24 Cambiando el Color de Fondo Por defecto es blanco sin tag de finalización Ejemplo Cambia el color de fondo a verde. McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

25 Cambiando el Color de Fondo McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Cambia el color de fondo a verde

26 Agregando Vínculos a un Sitio Web Link (hyperlink) – texto o imagen clickable que lleva a otro sitio o página Tres tipos 1. Links a otro sitio Web 2. Links a archivos descargables 3. Links a e-mail McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

27 Agregando Vínculos a un Sitio Web El formato de tag de vínculo es screen text Ejemplo Para proporcionar una enlace al sitio web de MTV Visit MTV Displays as Visit MTV McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

28 Agregando Vínculos a un Sitio Web McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Link to another site or page

29 Agregando vínculos a un sitio Web McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Links usually appear blue and underlined

30 Agregando vínculos a un sitio Web Para un archivo descargable Reemplace la direcciónWeb site address con el nombre del archivo Ejemplo My Excel Workbook Despliega My Excel Workbook McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

31 Agregando vínculos a un sitio Web Para un enlace a un e-mail Reemplace dirección/nombre de archivo por mailto: y su dirección e-mail Ejemplo E-mail me Despliega E-mail me McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

32 ADDING LINKS TO A WEB SITE McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Link to downloadable file Link to e-mail

33 Agregando vínculos a un sitio Web McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

34 Agregando Imágenes Para insertar una imagen El archivo debe estar en el espacio web Es usualmente en formato.jpg o.gif No puede usar archivos.bmp McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

35 Agregando Imágenes McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. img src tags

36 Agregando Imágenes McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

37 Ajustando el Tamaño de las Imágenes Se puede ajustar el tamaño de la imagen con el uso de los parámetros height y width Proporcionan dimensionamiento en pixeles Ejemplo McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

38 Ajustando la Posición de las Imágenes Por defecto es a la izquierda, pero puede ser ajustada a través del parámetro align align=right es justificado a la derecha is centrado McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

39 Incorporando imágenes McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

40 Agregando Imágenes McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

41 Usando un Fondo Texturado Puede usar una imagen con fondo El Browser extenderá la imagen para rellenar la pantalla El archivo debe estar en el espacio web McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

42 Usando un Fondo Texturado McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Textured background

43 Creando y Usando Listas Las Listas pueden ser Numeradas No Numeradas El formato es (para numeradas) list content McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

44 Creando y Usando Listas Para no numeradas reemplace o con u El Formato es list content McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved.

45 Creando y Usando Listas McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. List tags

46 Creando y Usando Listas McGraw-Hill© 2007 The McGraw-Hill Companies, Inc. All rights reserved. Lists

47 Tablas Ejemplo 10 Tablas Cabereca 1 Cabereca 2 Cabereca 3 Dato 1 Dato 2 Dato 3 Dato 4 Dato 5 Dato 6

48 Frames Mi primera p á gina con marcos Lo siento, pero s ó lo podr á s ver esta p á gina si tu navegador tiene la capacidad de visualizar marcos.