Download
1 / 22
220 likes | 347 Views
DISSENY DE PÀGINES WEB. NIVELL BÀSIC CODI CURS 075/10 Jose Artigas. Servidor: www4.ub.edu Usuari: curs0907510 password: professor URL curs: http://www.ub.edu/curs0907510. HTML. Es un lenguaje basado en etiquetas que definen el aspecto de las páginas.
E N D
DISSENY DE PÀGINES WEB. NIVELL BÀSIC CODI CURS 075/10 Jose Artigas
Servidor: www4.ub.edu • Usuari: curs0907510 • password: professor • URL curs: • http://www.ub.edu/curs0907510
HTML • Es un lenguaje basado en etiquetas que definen el aspecto de las páginas. • Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. • Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). • Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.
HTML • Navegadores más utilizados: • Explorer • Firefox • Opera • Safari • Google Chrome • …. • Importante tener el navegador que se utilice en su última versión.
HTML • Un editor es un programa que nos permiten redactar documentos sin la necesidad de escribir código html. • Estos editores visuales pueden generar en ocasiones código basura, es decir, código que no sirve para nada, por lo que resulta necesario saber HTML para poder depurar el código de nuestra páginas.
HTML • Dos de los editores más utilizados son: • Adobe Dreamweaver • Microsoft FrontPage • Para crear páginas web escribiendo directamente el código HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows.
HTML • Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. • Ejemplos: • <strong>hola</strong> • <font color="#993366" face="Verdana"><Disseny pàgines web</strong></font>
HTML • Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>. • Entre las etiquetas <html> y </html> estará comprendido el resto del código HTML de la página.
HTML • La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título. • Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>. • Por ejemplo: <html> <head> ... </head> ... </html>
HTML • Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y más se utilizan son: <link>, <style>, <script>, <meta>, <title> • El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él. • Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>.
HTML • El cuerpo del documento contiene la información propia del documento, es decir lo que pqueremos que se visualice, el texto de la página, las imágenes, los formularios, etc. • Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera.
HTML • Así la estructura básica de cualquier página web es la siguiente: <html> <head> <title>Disseny de pàgines web. Nivell bàsic</title> </head> <body> Hola mundo </body> </html>
¿Qué es Dreamweaver? • Es una herramienta desarrollada por diseñadores para diseñadores web. • No solamente permite diseñar los contenidos de un Web, sino que podremos publicarlos, determinar como se comportaran en Internet y realizar su mantenimiento de una forma integral. • Pertenece a una gran familia de programas de diseño producidos por la empresa Adobe, con lo cual el trabajo en paralelo con cualquiera de estos programas es asimilado perfectamente por Dreamweaver.
Pantalla de trabajo común de DMX • Barra de título: en la parte superior de la ventana de programa, se muestra el nombre del Web abierto actualmente y los botones de minimizar, restaurar y cerrar. • Barra de menús: situada bajo la bara de título, permite acceder a todas las opciones del programa a través de sus menús
Pantalla de trabajo común de DMX • Ventana del documento. Es el área principal de trabajo. Aquí es donde crearemos nuestras páginas web
Pantalla de trabajo común de DMX • Barra de herramientas documento: • Para mostrar la vista de código html DE LA PÁGINA WEB • Para mostrar una vista conjunta del código y el diseño. • Para mostrar la vista del diseño de nuestro documento • Para dar un título a nuestra página web en el cuadro de texto “Título”
Pantalla de trabajo común de DMX • Barra de herramientas estandar: • Insertar nuevo documento • Abrir documento • Guardar • Copiar • Pegar • Hacer y deshacer
Pantalla de trabajo común de DMX • Panel insertar: desde este panel y sus opciones, introduciremos los elementos utilizados para el diseño de los objetos de una página web.
Pantalla de trabajo común de DMX • Inspector de propiedades: es la herramienta principal para determinar los detalles de un objeto o texto seleccionado. El contenido de este panel varía en función del objeto seleccionado (texto, imagen, tabla, etc)
Pantalla de trabajo común de DMX • Menú de Paneles: ocupa la parte derecha de la pantalla y está diseñado para contener los paneles más utilizados por el usuario.
Barra de estado: situada debajo de la ventana del documento. A la izquierda vemos el selector de etiquetas y a la derecha vemos información sobre el documento: tamaño de la ventana, indicador de descarga…
FORMACIÓ CORPORATIVA
