html (esta)

8/17/2019 html (ESTA)

1/26

1.INTRODUCCIÓN AL DISEÑO DEPAGINAS WEB

http://www.mes.gov.ve/PrincipioFundamentalUBV.pdf

8/17/2019 html (ESTA)

2/26

La descripción se basa en especificar en el texto la

estructura lógica del contenido (títulos, párrafos de textonormal, enumeraciones, definiciones, citas, etc.), así como

los diferentes efectos que se quieren dar (cursiva, negrita, o

un gráfico determinado) y dejar que luego la presentación

final de dicho hipertexto se realice por un navegador.

HTML (HyperText Markup Language) es un lenguajemuy sencillo que permite describir hipertexto, esdecir, texto presentado de forma estructurada yagradable, con enlaces (hyperlinks) que conducen a

otros documentos o fuentes de informaciónrelacionadas, y con inserciones hipermedia(gráficos, sonido...). Este lenguaje es el que seutiliza para presentar información en el World WideWeb.

¿Qué es?

http://cv.uoc.es/moduls/UW00_7200_00091/web/index1.htmlhttp://www.mes.gov.ve/PrincipioFundamentalUBV.pdf

8/17/2019 html (ESTA)

3/26

Una de las características de este lenguaje másimportante para el programador es que no esnecesario ningún programa especial para crearuna página Web. Gracias a ello se haconseguido que se puedan crear páginas concualquier ordenador y sistema operativo. Elcódigo HTML, como hemos adelantado en el

párrafo anterior, no es más que texto y portanto lo único necesario para escribirlo es uneditor de texto como el que acompañan a todoslos sistemas operativos: edit en MS-DOS, block de notas en Windows.

También se puede usar procesadores de texto, que son editores concapacidades añadidas, como pueden ser Microsoft Word oWordPerfect pero hay que tener cuidado porque en ocasiones hacentraducciones automáticas del código HTML que no siempre sondeseadas. En estos dos últimos casos, también hay que tener encuenta que deberemos guardar el archivo en modo texto.

¿Qué necesitas para

una página Web?


8/17/2019 html (ESTA)

4/26

Una vez hemos escrito elcódigo deberemosguardar el archivo (conformato de texto) con laextensión .html o .htmen MS-DOS, Windows o

cualquier otro sistemaque sólo acepte tresletras en la extensión.

Los siguientes son nombres válidos de archivos que contengancódigo HTML: index.html, index.htm, principal.html,

PRINCIPAL.htm, etc...


8/17/2019 html (ESTA)

5/26

Últimamente han aparecido nuevas alternativas que facilitan la

programación de páginas Web. Son los editores HTML. Podemos dividirestos editores en dos grupos:

Asistentes: ayudan a crear el código HTML e incluyen plantillas decódigo prefabricadas , por ejemplo HotDog (Win), HomeSite(Win), HTMLEditor (Mac), Quanta (Linux, KDE) o Bluefish, (Linux, GNOME).

Conversores: son programas con otra función que la de laprogramación Web pero que permiten convertir a HTML. Son ejemplosde conversores Microsoft Word ,Quark XPress y PageMaker.

Editores WYSIWYG (What You See IsWhat You Get, lo que ves es lo que

obtienes): estos editores permiten crearpáginas web sin escribir código HTML comosi se tratase de un programa de dibujo porordenador. Algunos ejemplos de este tipo deeditores son Macromedia Dreamweaver,HotMetal o Microsoft Frontpage.

http://images.google.co.ve/imgres?imgurl=http://www.kellogg.northwestern.edu/kis/clubtools/gfx/dreamweaver.jpg&imgrefurl=http://www.kellogg.northwestern.edu/kis/clubtools/&h=196&w=174&sz=19&tbnid=RCJyZ7uQ5asJ:&tbnh=98&tbnw=87&start=32&prev=/images%3Fq%3Ddreamweaver%26start%3D20%26hl%3Des%26lr%3D%26sa%3DNhttp://www.mes.gov.ve/PrincipioFundamentalUBV.pdf

8/17/2019 html (ESTA)

6/26

Por ejemplo, para indicarle al navegador que queremos que pinte una

línea horizontal debemos escribir:

Así de sencillo.

Como vemos, el nombre de la etiqueta va delimitado por los símbolosmenor que (), todas las instrucciones de HTML debenir encerradas entre estos dos símbolos.

ETIQUETAS

Las órdenes de este lenguaje estarán formadas por unos comandos llamadosetiquetas que pueden tener o bien la siguiente estructura:

O bien esta otra:

TEXTO

Como vemos, la primera estructura está formada por una única instrucción y lasegunda por dos: una que marca el inicio de la etiqueta y otra que marca el final,con texto entre ambas.


8/17/2019 html (ESTA)

7/26

Las etiquetas no se limitan a indicar ordenes tan sencillas,estas órdenes tienen en ocasiones parámetros.

Por ejemplo la etiqueta tal y como lo hemos hecho

anteriormente daría lugar a la línea,

es decir, le dice al navegador que dibuje una línea

horizontal en la pantalla. Esta línea tiene un grosor

predeterminado y un ancho variable en función del

tamaño de la ventana del navegador.


8/17/2019 html (ESTA)

8/26

Hay muchas formas de pintar una línea y sería deseable poderelegir detalles tales como la anchura y el grosor que va a tenerdicha línea. Para especificar este tipo de detalles se crearon losatributos de las etiquetas. Este nuevo elemento se introduceen una etiqueta de la siguiente manera:

Es decir, en primer lugar ponemos el nombre de la etiqueta,después el nombre del atributo seguido por un signo igual yposteriormente el valor que queramos darle a ese atributoencerrado entre comillas una etiqueta puede tener tantos

atributos como se deseen y en ocasiones son necesarios paraque la etiqueta tenga algún significado.


8/17/2019 html (ESTA)

9/26

En nuestro ejemplo de la línea horizontal existe un atributollamado SIZE, que significa tamaño en inglés, que permitecontrolar el grosor de la línea que será dibujada en pantalla. Veamos un ejemplo en donde podemos ver la línea horizontalcon diferentes grosores.

El valor numérico que le damos al atributo size no vaentrecomillado, por ejemplo en .


8/17/2019 html (ESTA)

10/26

En HTML no es necesario entrecomillar los valores de los atributos cuando están formados únicamente por números [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluir las comillas siempre. De esta forma no tenemos que preocuparnos de cuando

ponerlas y cuando no y a la vez cumplimos el nuevo estánda.

NOTA


8/17/2019 html (ESTA)

11/26

FORMATOS DE PARRAFOS

Deberemos especificar que el archivo de texto que estamosescribiendo es un documento HTML, para ello usamos lasinstrucciones de inicio y fin de la etiqueta al principio y

al final de la página respectivamente:

Código de la página

El código de la página esta formado a su vez por dos grandesbloques, la cabecera y el cuerpo.


8/17/2019 html (ESTA)

12/26

La cabecera de la página está delimitada por lasinstrucciones de inicio y fin de la etiqueta head. Estasinstrucciones deben estar dentro de la etiqueta HTML dela siguiente manera:

Elementos de la cabecera

... Resto de código de la página ...

En la cabecera de la página se introduce toda aquellainformación que afectará a toda la página. En un principioesta información se limitará al título.


8/17/2019 html (ESTA)

13/26

Usando el WordPad El título se indicará con la etiqueta title usando la siguiente sintaxis:


8/17/2019 html (ESTA)

14/26

Se debe guardarel archivo con: “nombre.html” y

con un tipo dearchivo de texto.


8/17/2019 html (ESTA)

15/26

Si nos fijamos en la cabecera de la ventana del navegador

vemos que el título ha pasado de ser Microsoft Internet Explorer a "Mi primera página WEB - Microsoft Internet Explorer". Es decir el título que le demos a nuestra página con la etiqueta pasará a ser el título de la ventana del navegador

Abrimos el

Navegador y

se busca el

archivo

guardado


8/17/2019 html (ESTA)

16/26

El cuerpo es el siguiente gran bloque de nuestrodocumento HTML, éste quedará delimitado por la etiquetabody. En su interior introduciremos todos aquelloselementos de los que queremos que conste nuestra páginacomo pueden ser texto, imágenes, tablas, etc. Conociendola etiqueta body podemos ampliar el ejemplo anterior paraque incluya texto.

Usando el WordPadEl cuerpo se indicarácon la etiqueta body

usando la siguientesintaxis:


8/17/2019 html (ESTA)

17/26

La etiqueta y atributo de font face, nos permite editar el tipo dela letra que se desee utilizar, y para cambiar el tamaño de la letradebemos utilizar la etiqueta y atributo de font size. Si queremosagregar el estilo itálico se agrega después de las etiquetas de font

la etiqueta i, la cual nos dara el estilo italico de letra, y paraobtener el estilo bold utilizamos la etiqueta b, por ultimo debemostener en cuenta que no puede quedar todo junto así que usamos laetiqueta p, para separar párrafos.

OTRAS ETIQUETAS

Para el cambio de color de las letras de nuestro página Web,podemos utilizar la etiqueta text, y para darle color a nuestro

fondo de página Web utilizamos bgcolor. Ahoraentenderemos mejor lo anterior con el siguiente ejemplo :


8/17/2019 html (ESTA)

18/26

Ejemplo:

Usando el WordPad se escribirán la etiqueta mencionadas en la

página anterior usando la siguiente sintaxis:


8/17/2019 html (ESTA)

19/26

Abrimos el

Navegador y

se busca el

archivo

guardado


8/17/2019 html (ESTA)

20/26

Usando el WordPad procedemos a elaborar una tabla dentro de la

página utilizando la etiqueta “table” , “tr” y “td” usando lasiguiente sintaxis:


8/17/2019 html (ESTA)

21/26

Abrimos el

Navegador y

se busca el

archivoguardado


8/17/2019 html (ESTA)

22/26

Usando el WordPad procedemos a insertar una imagen dentrode la página utilizando la etiqueta “img src” (colocando luegode =“la dirección del objeto) usando la sintaxis anterior:


8/17/2019 html (ESTA)

23/26

Abrimos el

Navegador y

se busca el

archivoguardado


8/17/2019 html (ESTA)

24/26

Usando el WordPad procedemos a insertar un hipervínculodentro de la página utilizando la etiqueta “a href” (colocandoluego de =“la dirección a hipervincular) usando la sintaxisanterior:


8/17/2019 html (ESTA)

25/26

Abrimos el

Navegador y

se busca el

archivoguardado

Luego haz

Click en el

hipervínculo de

“Yahoo.es”


8/17/2019 html (ESTA)

26/26

El hipervínculo

nos lleva a su

destino. En este

caso es:Yahoo.es

html (esta)

Documents