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.
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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>
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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>.
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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.
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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
  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>
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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>
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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>
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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>
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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>
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
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
Utilizaremos la siguiente etiqueta:
<TABLE BGCOLOR = “COLOR” >
M2: Creación de Productos multimedia a través de Software de Diseño. 29 de noviembre de 2012
Temas Parcial 1 13
IMAGEN DE FONDO EN LA TABLA
Utilizaremos la siguiente etiqueta:
<TABLE BACKGROUND = “ARCHIVO DE IMAGEN” >.