2.1 Definición de objetos y contenidos de la página...

M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012

Temas Parcial 1 1

2. Manejar los elementos básicos de un lenguaje usado en la

creación de Páginas Web.

2.1 Definición de objetos y contenidos de la página web.

INTERNET

En 1969, el Departamento de Defensa de E.U construyo Arpanet, para usos

militares y científicos, correo electrónico y transmisión de datos entre

computadores y en 1982 Arpanet se unió con Milnet, NSFNet, Usenet y otras

redes existentes para dar origen a internet.

WWW

Son las siglas de World Wide Web o telaraña mundial, llamada web. En español

significa Red Informática Mundial.

PROTOCOLO

Conjunto de reglas que rigen el intercambio de informaciones entre dos equipos o

dos sistemas conectados entre sí.

HIPERTEXTO

Es un texto en un documento que liga a este con otro para permitir el

desplazamiento entre ellos y el despliegue automático de la información vinculada.

HIPERMEDIO

Grupo de documentos en el que cada uno puede contener texto, gráficos, así

como referencias a otros documentos.


Temas Parcial 1 2

2.2 Programar en un lenguaje de hipertexto

HTML

(Hiper Text Mar Kup Languaje – Lenguaje de Marca de Hipertextos)

Utilizado en internet para presentar la información en forma de documentos de

hipertextos. Internet Explorer, Google, Mozilla leen perfectamente este lenguaje,

es un lenguaje compuesto de etiquetas que indican al navegador como mostrar la

página.

Como se ha mencionado anteriormente es un lenguaje para crear páginas web y

la estructura básica.

Estructura Básica de una página Web

Para poder dar el siguiente paso de crear una página web con el lenguaje de

HTML es necesario saber en dónde se va a trabajar y saber también cual su

estructura. Para comenzar la página web se trabajara con el programa syn este es

como un block de notas solo que es especial para HTML.

SYN


Temas Parcial 1 3

A continuación tenemos que saber nuestra estructura general de nuestra página

web esta comenzara con las etiquetas son como se puede decir las palabras clave

para ir diseñando nuestra página estas etiquetas comienzan por el símbolo de

menor (<) y terminan con el símbolo de mayor (>). Por ejemplo:

Así de esta manera se abren y cierran nuestras etiquetas; ahora mostraremos la

estructura que debe de llevar nuestra página web HTML:

Esta estructura como se puede observar ya está en el syn y así es como debe de

estructurarse.

<HTML> </HTML>

<BODY> </BODY>

<HEAD> </HEAD>


Temas Parcial 1 4

Definición de los elementos de una página web

Cada etiqueta de nuestra página tiene su significado a continuación se describe

para que nos sirve cada una de estas:

Las paginas siempre comienzan con <HTML> y terminan con la etiqueta

</HTML>.

La etiqueta <HEAD> es la cabecera de la página en donde le vamos asignar el

título a la página y esta etiqueta se cierra con </HEAD>.

La etiqueta <TITLE> es el nombre que aparecerá en la página del tema del que

hablemos y se cierra así </TITLE>.

La etiqueta <BODY> es en donde se desarrollara el contenido de la página como

su nombre lo indica es el cuerpo y se cierra con la etiqueta </BODY>.

2.3 Diseñar la estructura de una página web

Ahora es el momento de editar nuestra página HTML ya tenemos las etiquetas

ahora haremos uso de ellas tal y como se muestra:

Como ya tenemos nuestra estructura vamos editarla pondremos el título en la

cabecera en la etiqueta <TITLE> y le pondremos el título que más sea de nuestro

agrado no hay que olvidar cerrarla </TITLE>.


Temas Parcial 1 5

Ahora continuaremos con el cuerpo de la página en la etiqueta <BODY> y ahí

escribiremos por ejemplo lo primero que se nos ocurra y se cierra con la etiqueta

<BODY/>.

Al tener ya lo básico de la primera vez de usar el lenguaje HTML veremos como

se ve en internet nuestra primera práctica.


Temas Parcial 1 6

Cambiar la presentación de la página web usando objetos

(Imágenes, sonido, video, etc.)

Para poder cambiar mucho más la apariencia de nuestra página en HTML es

necesario saber más etiquetas así como las siguientes:

<BR> esta nos sirve para los saltos de línea

&nbsp nos sirve para el espacio entre palabras por ejemplo:

Primera palabra segunda palabra

Enriquecimiento del documento

Párrafos o bloques

<P> indica el inicio de párrafo

</P> indica fin de párrafo

Alineación de párrafos

CENTER centradas en la pantalla.

LEFT se alinean a la izquierda.

RIGHT se alinean a la derecha.

JUSTIFY para la justificación de nuestro texto.

Estilo del texto

Texto en negrita <B> </B>

Cursiva o itálica <I> </I>

Subrayar texto <U> </U>


Temas Parcial 1 7

Tamaño de texto

<FONT SIZE = t> </FONT>

t: es el tamaño del texto 1 es el tamaño pequeño y 7 el grande

Títulos y encabezados

<FONT SIZE = N> </FONT>

Definir o dividir títulos

<H#> TITULO </H#>

Valor de 1 a 6 1: mayor tamaño

6: menor tamaño

Tipos de letra

Tamaño del texto y nombre de fuente

<FONT FACE= “NOMBRE DE LA FUENTE” >

Color al documento

<FONT COLOR =color> TEXTO </FONT>

Color de fondo de página

<BODY BGCOLOR=color>

Color de texto

<BODY TEXT=color>


Temas Parcial 1 8

Imágenes con IMG

<IMC SRC=URI>

<IMG SRG=URI>

Si es de IMG

<IMG SRC=”Logo_HTML.JPG” >

<IMG SRC= Imágenes/Logo_HTML.JPG >

Si no se visualiza se pone toda la unidad.

Alineación de imágenes

<P ALIGN=RIGHT><IMG SRC”F=\Imágenes\nombre de imagen. Terminación”>

ALIGN=TOP parte superior alineada

ALIGN=MIDDLE queda al centro

ALIGN=BOTTOM queda a la misma altura

Sonido de fondo <bgsound>

<bgsound src=” varios/audio.mid”loop=”-1”>

Es preferible que este debajo de la etiqueta <body>

Video y audio

Atributos: src

Autostart: valores true o false

Loop: valores true o false


Temas Parcial 1 9

Width y height: especifican el tamaño de la consola de control de video.

<embed src=”varios/cotorra.avi” autostart=”false” loop=”true”>

2.4 Añadir código estructurado a la página Web

Hipervínculos

Los hipervínculos nos van a permitir llevar desde nuestra página principal a otras

páginas donde tal vez venga más información detallada para eso utilizaremos la

siguiente etiqueta:

<A HREF=URI> Descripción_Vinculo </A>

EJEMPLO: Enlaces a portales de internet

<P> <A=” http://www.gogle.com”>Google</A></P>

<a name=”Nombre_Referencia></A>


Temas Parcial 1 10

Creación de tablas en la página web

En nuestra página web de HTML también es posible insertarle tablas del número

de columnas y filas que nos gusten más, para eso utilizaremos la siguiente

etiqueta:

<TABLE> </TABLE>

<TR> </TR> Para delimitar filas

<TD> </TD> Para delimitar el principio y el final de las tablas

<BORDER> Es para indicar el borde de nuestra tabla esta etiqueta debe ir

Dentro de la etiqueta <TABLE>.

<TABLE BORDER = N>

N es el número de grosor del borde de la tabla.

Encabezados de la tabla

Estos encabezados van en la primera celda o en la primera fila de nuestra tabla.

Para eso se utiliza la siguiente etiqueta:

<TD>

Y para delimitar las celdas de la cabecera:

<TH> </TH>


Temas Parcial 1 11

Aplicar formato a las tablas

El aplicar el formato a nuestras tablas es darles el estilo de alto y ancho y así

quedara con una visión mejor presentada.

Ancho y alto de las tablas

En el alto de nuestra tabla se puede realizar con la etiqueta:

<TABLE HEIGHT = N>

HIEGHT indica el número de pixeles de nuestra tabla.

En el ancho de la tabla es la etiqueta:

<TABLE WIDTH = N>

WIDTH indica la anchura total de la tabla en pixeles.

Ancho y alto de celdas

Las etiquetas anteriores se pueden utilizar de la siguiente manera:

<TD HEIGHT= N WIDTH= N>

Alineación de las tablas

Hay varias formas de poder alinear nuestra tabla.

Se incluye la tabla dentro de un párrafo.

<P ALIGN= “CENTER”> </P>


Temas Parcial 1 12

IMÁGENES EN LAS TABLAS

Dentro de nuestras tablas se pueden insertar imágenes, textos, párrafos, enlaces.

Para una imagen:

<IMG src = “archivo” > entre <TD> y </TD>

ASPECTO DE LA TABLA

COLOR DEL BORDE

Para dar el color al borde de nuestra tabla utilizaremos:

<TABLE BORDERCOLOR = color >

También podemos dar el color a las líneas de nuestra tabla.

BORDERCOLORDARK: este es para dar color a las líneas inferiores de la

derecha.

BORDERCOLORLIGHT: este es para dar color a las líneas superiores de la

izquierda.

COLORES DE LAS CELDAS

Utilizaremos la siguiente etiqueta:

<TD BGCOLOR = “RED”> </TD>

Y la celda será roja.

COLOR DE FONDO EN LA TABLA


<TABLE BGCOLOR = “COLOR” >


Temas Parcial 1 13

IMAGEN DE FONDO EN LA TABLA


<TABLE BACKGROUND = “ARCHIVO DE IMAGEN” >.


Temas Parcial 1 14

Al haber terminado de hacer nuestra página web los resultados son:

2.1 Definición de objetos y contenidos de la página...

Documents

Transcript of 2.1 Definición de objetos y contenidos de la página...