Semana 5 html

MG. ING. ZEVALLOS VERA, ERIKA JUANA

OFIMÁTICA AVANZADA PARA INGENIEROS

ASPECTOS BASICOS DE DREAMWEAVER

ORIENTACIONES

El dreamweaver es un programa principalmente para la creación de sitios web y aplicaciones, lo cual le recomiendo estar en línea para la mejor captación y comandos de este tema; también se usa para la edición creación de código para la web.

CONTENIDOS TEMÁTICOS

1. Aspectos basicos de dreamweaver cs4

2. html

3. Lenguaje de etiquetas

4. Tipos de las fuentes

5. Colores y fondos

Aspectos basicos de Dreamweaver CS4

Dreamweaver CS4 es un software fácil de usar que permite crear páginas web profesionales, Crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo

HTML

• HTML, acrónimo inglés de HyperText Markup Language

(lenguaje de marcación de hipertexto), es un lenguaje de

marcas diseñado para estructurar textos y presentarlos en

forma de hipertexto, formato estándar de las páginas

• Web. Funcionan de la siguiente manera:

• <xxx> es el inicio• </xxx> el cierre de una etiqueta.

15/04/23 8

<HTML></HTML> Define la pág.Web.

<HEAD></HEAD> Define la cabecera de la Pág. Web.

<BODY></BODY> Define el cuerpo de la pág. Web.

<TITLE></TITLE> Define el título para la pág. Web. Se

coloca dentro de la cabecera.

Lenguaje de etiquetas.

15/04/23 9

Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente.

Lo que se encuentra entre ambas etiquetas estará influenciada por ellas.

Por ejemplo:

todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>

El documento está dividido en dos etiquetas principales:

<HEAD> y </HEAD> encabezamiento, <BODY> y </BODY>

15/04/23 10

CUERPO:Entonces la estructura básica de un documento HTML es:

<html><head></head>

<body></body>

</html>

15/04/23 11

TÍTULO:

El título es el nombre general de la página para definir el título es necesario usar las etiquetas <TITLE> </TITLE> siempre va en la sección del encabezado, por lo que el documento debe ir así:

<html>

<head>

<title>

TEXTOS:

Para escribir un texto en la página lo tenemos que hacer entre las etiquetas.

<BODY> y </BODY>.

Cuando desee poner un nuevo párrafo hay que usar las etiquetas y

15/04/23 13

<html><head><title> Pagina de principal</title></head><body> UNIVERSIDAD ALAS PERUANAS.*****CIENCIAS DE LA COMUNICACION****

</body></html>

EJEMPLO:01

15/04/23 14

Para cambiar el tamaño y la fuente del texto utilizaremos la etiqueta 

y .

Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal (o

tamaño base) es el 3 y lo podemos modificar con el atributo SIZE.

Ejemplo: 

También podemos utilizar los signos – y + para indicar los tamaños.



Texto de tamaño 2 es decir el valor base 3 1 

Texto de tamaño 4 es decir el valor base 3 +1 

TAMAÑO:

15/04/23 15

TIPOS DE LAS FUENTES

Generalmente el tipo por defecto es Times New Roman, y lo podemos cambiar con el atributo FACE="Nombre de la fuente".

Ejemplo:

para forzar a que el texto adopte la fuente Verdana, pondríamos:

Este texto se verá con la fuente Verdana

Este texto se verá con la fuente Impact, o en su defecto con Arial

15/04/23 16

COLORES Y FONDOS

Para poner colores en un texto, generalmente se utiliza el atributo color en la etiqueta, así tendremos que la etiqueta será:

 Este texto es de color rojo 

Podremos poner el atributo TEXT en la etiqueta <BODY> para cambiar el color

en la totalidad del texto de la página, ejemplo

< BODY TEXT="#XXYYZZ">

15/04/23 17

Donde:XX es un número indicativo de la cantidad de color rojoYY es un número indicativo de la cantidad de color verdeZZ es un número indicativo de la cantidad de color azulLos números siempre estarán en numeración hexadecimal. Estos dígitos son:

0123456789ABCDEFLos colores primarios son:#FFOOOO Rojo#OOFFOO Verde#OOOOFF – Azul

Otros colores son:#FFFFFF Blanco

#OOOOOO Negro#FFFFOO Amarillo

15/04/23 18

Fondos• Se puede cambiar el fondo de dos maneras distintas:•

1) Con un color uniforme Se consigue añadiendo el • comando BGCOLOR a la etiqueta <BODY> • (situada al principio del documento), de la siguiente

manera:•

• <BODY BGCOLOR="#XXYYZZ">

15/04/23 19

Fondos

2) Con una imagen El fondo de una página puede ser también una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por toda la página, de

una manera análoga al tapiz de Windows. La estructura de la etiqueta es:

<BODY BACKGROUND="imagen.gif"> o bien: <BODY BACKGROUND="imagen.jpg">

PARA USAR LA HERRAMIENTA DE DREAMWEAVER

1. Inicio, programas2. Adobe Dreamweaver CS3 y haz clic sobre él para arrancar el

programa.

INSPECTORES Y PANELES

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores

A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes

CONCLUSIONES Y/O ACTIVIDADES DE INVESTIGACIÓN SUGERIDAS

Dreamweaver es la herramienta de desarrollo Web líder del mercado y permite a sus usuarios diseñar, desarrollar y mantener de forma eficaz sitios y aplicaciones Web basados en normas.

GRACIAS

Semana 5 html

Devices & Hardware

Transcript of Semana 5 html