Scribd
Cargar
463 vistas25 páginas

Guía Básica de Diseño Web HTML

Este documento describe conceptos básicos sobre el diseño de páginas web. Explica que una página web es un documento que contiene información en formato HTML accesible a través de un navegador de internet. Detalla los elementos básicos de una página web como HTML, head, title y body. También menciona algunos programas comunes para diseñar páginas web como Dreamweaver y describe brevemente las funciones de Dreamweaver.

Cargado por

Mariangeles Devera
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPT, PDF, TXT o lee en línea desde Scribd

Temas abordados

  • contenido interactivo,
  • estructura de documentos,
  • experiencia de usuario,
  • programación web,
  • editores HTML,
  • interfaz de usuario,
  • codificación web,
  • accesibilidad,
  • hiperenlaces,
  • documentos multimedia
463 vistas25 páginas

Guía Básica de Diseño Web HTML

Este documento describe conceptos básicos sobre el diseño de páginas web. Explica que una página web es un documento que contiene información en formato HTML accesible a través de un navegador de internet. Detalla los elementos básicos de una página web como HTML, head, title y body. También menciona algunos programas comunes para diseñar páginas web como Dreamweaver y describe brevemente las funciones de Dreamweaver.

Cargado por

Mariangeles Devera
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPT, PDF, TXT o lee en línea desde Scribd

Temas abordados

  • contenido interactivo,
  • estructura de documentos,
  • experiencia de usuario,
  • programación web,
  • editores HTML,
  • interfaz de usuario,
  • codificación web,
  • accesibilidad,
  • hiperenlaces,
  • documentos multimedia

DISEO DE PGINAS WEB

Ing. Bretnerys Milln

Objetivo 1
Conceptos Bsicos

Qu es Disear?

Pgina Web
Una pgina web es una fuente de
informacin adaptada para la World Wide
Web (www) y accesible mediante un
navegador de Internet. Esta informacin
se presenta generalmente en formato
HTML y puede contener hiperenlaces a
otras pginas web, constituyendo la red
enlazada de la World Wide Web.

Las pginas Web son combinaciones


de documentos multimedia y de
hipertexto.
Son documentos multimedia porque
incorporan
imgenes,
vdeos,
animaciones, sonidos, textos de todo tipo;
y son documentos de hipertexto, porque
incorporan enlaces con otras pginas.

Diseo de pgina web


Se trata bsicamente de realizar un
documento con informacin hiperenlazado
con otros documentos y asignarle una
presentacin para diferentes dispositivos
de salida (en una pantalla de computador,
en papel, en un telfono mvil, etc).

Para disear una pgina web ,no es


necesario de utilizar un programa
especfico, si conocemos el cdigo HTML,
podramos desarrollar nuestras pginas
web incluso, desde el Block de Notas que
viene con el Windows.

Ejemplo:
<html>
<head>
<title>Mi pgina web</title>
</head>
<body>
Contenido de mi pgina web
</body>
</html>

Guardar el archivo en Escritorio con el


nombre: [Link]
Abrir el archivo guardado

HTML
(Lenguaje de Marcacin de
Hipertexto)

Es el lenguaje en el que se disean las


pginas que se visualizan a travs del
navegador. Este lenguaje se basa en
etiquetas (instrucciones que le dicen al
navegador como deben mostrarse) y
atributos (parmetros que dan valor a la
etiqueta).

Entendiendo el cdigo HTML


de una Pgina web Bsica
<html>
<head>
<title>Mi pgina web</title>
</head>
<body>
Contenido de mi pgina web
</body>
</html>

Para iniciar siempre una pgina web,


debemos
empezar
a
por
la
etiqueta <html>, esta etiqueta es
necesaria
para
que
nuestros
navegadores
puedan identificar el
contenido que va a mostrar.

<html>
<head>
<title>Mi pgina web</title>
</head>
<body>
Contenido de mi pgina web
</body>
</html>

La etiqueta HEAD la contienen todos


los documentos y es la cabecera de
informacin. Siempre aparece en la
parte superior del documento.

<html>
<head>
<title>Mi pgina web</title>
</head>
<body>
Contenido de mi pgina web
</body>
</html>

Se encuentra situado entre la etiqueta


HEAD y es la que le da el ttulo al
documento. Por lo general aparece en
la parte superior.

<html>
<head>
<title>Mi pgina web</title>
</head>
<body>
Contenido de mi pgina web
</body>
</html>

Este es el cierre de la etiqueta Head;


es necesario cerrar cada una de las
etiquetas para que no existan errores.

<html>
<head>
<title>Mi pgina web</title>
</head>
<body>
Contenido de mi pgina web
</body>
</html>

La etiqueta BODY se coloca despus


de la estructura HEAD y dentro del la
etiqueta BODY se coloca todo el
contenido de la pgina web:
imgenes, textos, links, etc. La
etiqueta BODY es importante para
que no se pierdan los parmetros de
otras etiquetas.

<html>
<head>
<title>Mi pgina web</title>
</head>
<body>
Contenido de mi pgina web
</body>
</html>

Esta frase es el contenido de la


pgina web.

Etapas para el Diseo de


una Pgina Web

Los programas que existen en el


mercado, simplemente lo que hacen es
escribir el cdigo HTML solo con hacer
unos simples clicks desde el programa.
Los ms utilizados son: Macromedia
Dreamweaver, Microsoft Front Page,
Adobe GoLive, Web Developer, etc.

Preguntas?

Investigar

Objetivo 2
Macromedia Dreamweaver

Qu es Dreamweaver?
Es un editor HTML profesional para
disear, codificar y desarrollar sitios,
pginas y aplicaciones Web. Tanto si
desea controlar manualmente el cdigo
HTML como si prefiere trabajar en un
entorno de edicin visual, Dreamweaver
proporciona tiles herramientas para la
creacin Web.

Las funciones de edicin visual de Dreamweaver permiten:

También podría gustarte