Scribd
Cargar
78 vistas

Sem 3 Diseño Web I PDF

Este documento proporciona información sobre HTML y cómo crear una página web básica utilizando etiquetas HTML. Explica etiquetas como <p>, <h1>, <img> y más para dar formato a texto, encabezados e imágenes. También cubre la creación de listas ordenadas y desordenadas.

Cargado por

Lilian Benique Ruelas
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
78 vistas

Sem 3 Diseño Web I PDF

Este documento proporciona información sobre HTML y cómo crear una página web básica utilizando etiquetas HTML. Explica etiquetas como <p>, <h1>, <img> y más para dar formato a texto, encabezados e imágenes. También cubre la creación de listas ordenadas y desordenadas.

Cargado por

Lilian Benique Ruelas
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 10

DIRECCIN REGIONAL DE EDUCACIN PUNO

INSTITUTO DE EDUCACION SUPERIOR TECNOLGICO


PBLICO - MACUSANI

COMPUTACIN E INFORMTICA
RM. N 102-90-ED de Creacin y Funcionamiento, RD N 0086-2006-ED de Revalidacin
Portal web: www.tecnomacusani.edu.pe



GESTIN DE APLICACIONES PARA
INTERNET Y PRODUCCIN MULTIMEDIA

DISEO WEB

GUA DE APRENDIZAJE




[email protected]
950-321010

MACUSANI PUNO PER

2014

||| DISEO WEB |||
Pgina: 2 / 10 Ing. Lilian M. Benique Ruelas
HTML

HTML, siglas de HyperText Markup Language (lenguaje de marcas de hipertexto), hace
referencia al lenguaje de marcado para la elaboracin de pginas web. Es un estndar que sirve
de referencia para la elaboracin de pginas web en sus diferentes versiones, define una
estructura bsica y un cdigo (denominado cdigo HTML) para la definicin de contenido de una
pgina web, como texto, imgenes, etc. Es un estndar a cargo de la W3C, organizacin dedicada
a la estandarizacin de casi todas las tecnologas ligadas a la web, sobre todo en lo referente a su
escritura e interpretacin. Es el lenguaje con el que se definen las pginas web.

http://es.wikipedia.org/wiki/.HTML

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas web. Es
un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del
documento. Un documento hipertexto no slo se compone de texto, puede contener imgenes,
sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en
los navegadores (programas que permiten visualizar las pginas web). Los navegadores se
encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las
pginas web resultantes del cdigo interpretado.
http://www.aulaclic.es/html/t_1_1.htm

ESTRUCTURA DE UNA PGINA HTML





||| DISEO WEB |||
Ing. Lilian M. Benique Ruelas Pgina: 3 / 10
Las directivas de HTML pueden ser de dos tipos, cerradas o abiertas. Las directivas
cerradas son aquellas que tienen una palabra clave que indica el principio de la directiva y
otra que indica el final. Entre la directiva inicial y la final se pueden encontrar otras
directivas.

Las directivas abiertas constan de una sola palabra clave. Para diferenciar las directivas
del resto del texto del documento se encierran entre los smbolos < y >. Las directivas
cerradas incluyen el carcter / antes de la palabra clave para indicar el final de la misma.
Una directiva puede contener "parmetros". Estos parmetros se indican a continuacin
de la palabra clave de la directiva.

Ejemplos:
Directiva cerrada
<CENTER> Mi pgina Web </CENTER>
Directiva abierta
<HR>
Directiva con parmetros
<BODY bgcolor="#FFFFFF"> </BODY>
Los ficheros que contienen documentos HTML suelen tener la extensin .html o .htm
EJEMPLO 1

En el Notepad++, ingresar el cdigo HTML y guardar el archivo con ejemplo_1.html;
luego visualizarlo con un navegador.



||| DISEO WEB |||
Pgina: 4 / 10 Ing. Lilian M. Benique Ruelas


FORMA AL TEXTO Y PRRAFO
<BR>
Si queremos separar los prrafos, o cualquier otra cosa, pero sin dejar una lnea en
blanco, usamos una etiqueta parecida <BR> (break, o romper). Tampoco tiene etiqueta
de cierre.
<P>
Esta etiqueta, en un principio, se dise para saltar de prrafo por lo que puede ir sola
<P> al final de un texto indicando que a continuacin se requiere una lnea en blanco,
aunque se recomienda usarla abrindola y cerrndola <P> y </P>.

Si queremos obtener mltiples lneas en blanco no basta con repetir la etiqueta <P>, sino
que hay que combinarla con la etiqueta <BR>. As por ejemplo, si queremos obtener
cuatro lneas en blanco, pondramos:

<BR><P>
<BR><P>
<BR><P>
<BR><P>

&nbsp;
Al escribir el texto, si ponemos ms de un espacio en blanco entre dos palabras
observamos que el navegador slo reconoce uno de ellos. Si queremos forzarle a que lo
haga, debemos poner el cdigo "&nbsp;" (non-breaking space).

<B> <I> <U>
Para destacar alguna parte del texto se pueden usar:

<B> y </B> para poner algo en negrita (bold).
<I> y </I> para poner algo en cursiva (italic).
<U> y </U> para subrayar algo (underline).

Contenido de TITLE
Contenido de BODY
||| DISEO WEB |||
Ing. Lilian M. Benique Ruelas Pgina: 5 / 10
<PRE>
Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella estar
pre-formateado, es decir que aparecer como si hubiera sido escrito con una mquina de
escribir, con una fuente de espaciado fijo (tipo Courier). Adems se respetarn los
espacios en blanco y retornos del carro, tal como estaban en nuestro documento HTML
(lo cual no ocurre normalmente, como hemos visto anteriormente). Es muy apropiada
para confeccionar tablas y otros documentos similares.
<TT>
Con la etiqueta <TT> y </TT> conseguimos tambin que el texto tenga un tamao menor
y la apariencia de los caracteres de una mquina de escribir (typewriter). La diferencia
con la anterior es que no preformatea el texto, sino que nicamente cambia su
apariencia.
<BLOCKQUOTE>
La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para destacar una cita textual
dentro del texto general.
<SUP> Y <SUB>
En las frmulas matemticas puede interesar poder escribir ndices y subndices, que se
consiguen con las etiquetas <SUP> </SUP> y <SUB> </SUB> respectivamente.
<H1><H2><H3><H4><H5><H6>
Otros elementos HTML muy utilizados son para indicar los ttulos, para esto contamos con
los elementos: <h1><h2><h3><h4><h5><h6>.

El ttulo de mayor nivel es <h1>, es decir el que tiene una fuente mayor. Segn la
importancia del ttulo utilizaremos alguno de estos elementos HTML. Requiere la marca
de cerrado del ttulo con la barra invertida como hemos visto.

Cada ttulo aparece siempre en una lnea distinta, no importa si lo tipeamos seguido en el
archivo.

Recordemos que el HTML no tiene la responsabilidad de indicar el tamao de las fuentes.
El navegador definir el tamao de fuente segn el nivel de ttulo que indiquemos.

<h1> viene de heading</h1>

<EM> <STRONG>
Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una palabra o
conjunto de palabras. As como tenemos seis niveles de ttulos para enfatizar un bloque
contamos con dos elementos que son <em> y <strong>. El elemento de mayor fuerza de
nfasis es strong y le sigue em. Para recordar el nombre de estos elementos HTML:

<em> viene de empathize que significa nfasis.
<strong> viene de strong que significa fuerte.
||| DISEO WEB |||
Pgina: 6 / 10 Ing. Lilian M. Benique Ruelas
<!-- y -->
Comentarios no visibles en la pantalla. A veces es muy til escribir comentarios en el
documento HTML sobre el cdigo que escribimos, que nos pueden servir para recordar
posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. Esto se
consigue encerrando dichos comentarios entre estos dos smbolos: <!-- y -->

Ejemplo:

<!-- Esto es un comentario al cdigo que no se ver en pantalla -->

CREAR PRRAFOS CON <P>

La marca <P> sirve para definir un nuevo prrafo de texto, indicando al navegador que el
mismo debe empezar en una nueva lnea y colocarse a la derecha, a la izquierda o
centrado. Si no se especifica otra cosa, la marca <P> alinea el texto por defecto a la
izquierda. Para indicar otros tipos de alineacin, existen atributos especficos:

<P ALIGN=left> Define un prrafo y alinea el texto a la izquierda(left).
<P ALIGN=right> Define un prrafo y alinea el texto a la derecha (right).
<P ALIGN=center> Define un prrafo y centra el texto (center).

LISTAS ORDENADAS Y DESORDENADAS

Las listas representan uno de los instrumentos ms difundidos para organizar la
informacin dentro de los sitios web. Una de sus caractersticas principales es la de
proporcionar un cuadro claro y sinttico del tema tratado.
HTML pone a disposicin distintos tipos de listas. A continuacin, analizaremos cada uno
de ellos.

LISTAS ORDENADAS

Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas
marcas de lista como voces hay en el men <LI>. La sintaxis correcta para elaborar listas
ordenadas es:

<OL>
<LI> Primera voz del men
<LI> Segunda voz del men
<LI> Tercera voz del men
</OL>

En el ejemplo notamos cmo es posible omitir la marca <BR> para el salto de lnea, dado
que est automticamente incluido en <LI>. Si no se establece diversamente (como
veremos a continuacin), el tipo de lista ordenada que el navegador visualiza est
numerada (es decir, la lista consta de una serie de nmeros que parte del 1 y va
aumentando progresivamente).
||| DISEO WEB |||
Ing. Lilian M. Benique Ruelas Pgina: 7 / 10
Las ltimas versiones de HTML prevn la posibilidad de listas ordenadas que contengan
un sistema de ordenacin diverso del numrico antes citado:

Ordenacin con letras maysculas:
<OL TYPE=A>
<LI> Primera voz del men
<LI> Segunda voz del men
<LI> Tercera voz del men
</OL>
Ordenacin con letras minsculas:
<OL TYPE=a>
<LI> Primera voz del men
<LI> Segunda voz del men
<LI> Tercera voz del men
</OL>

Ordenacin con nmeros romanos en mayscula:
<OL TYPE=I>
<LI> Primera voz del men
<LI> Segunda voz del men
<LI> Tercera voz del men
</OL>

Ordenacin con nmeros romanos en minscula:
<OL TYPE=i>
<LI> Primera voz del men
<LI> Segunda voz del men
<LI> Tercera voz del men
</OL>

Para recordar el nombre de estos elementos HTML:

<OL> viene de ordened list
<LI> viene de list item

LISTAS DESORDENADAS

Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia bsica
es que en el caso de las listas desordenadas no existen relaciones jerrquicas entre los
elementos del elenco, por lo cual no se prevn ordenaciones progresivas como las
obtenidas mediante nmeros o letras.
Las listas desordenadas constan de una sola marca de apertura y cierre<UL></UL> y
tantas marcas de lista como voces hay que ordenar <LI>. La sintaxis correcta para definir
una lista desordenada es:

||| DISEO WEB |||
Pgina: 8 / 10 Ing. Lilian M. Benique Ruelas
<UL>
<LI> Primera voz del men
<LI> Segunda voz del men
<LI> Tercera voz del men
</UL>

Si no se especifica diversamente, cada voz del elenco va precedida de un smbolo
geomtrico. Al igual que para las listas ordenadas, tambin en este caso podemos indicar
diversos tipos de smbolos:

Los crculos slidos de la lista anterior se obtienen con disc:
<UL TYPE=disc>
<LI> Primera voz del men
<LI> Segunda voz del men
<LI> Tercera voz del men
</UL>

El atributo circle imposta circunferencias:
<UL TYPE=circle>
<LI> Primera voz del men
<LI> Segunda voz del men
<LI> Tercera voz del men
</UL>


El atributo square imposta listas definidas por cuadrados slidos:
<UL TYPE=square>
<LI> Primera voz del men
<LI> Segunda voz del men
<LI> Tercera voz del men
</UL>

Para recordar los nombres de estas marcas HTML:

<UL> viene de unordered list
<LI> viene de list item

IMGENES

Para insertar una imagen dentro de una pgina debemos utilizar el elemento HTML
<img>, la misma no tiene una marca de finalizacin (similar a la marca <br>).
Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan
nuestras pginas HTML. Los formatos clsicos son los archivos con extensiones gif, jpg y
png.
La sintaxis de esta marca es:
<img src="foto1.jpg" alt="Pintura geomtrica">
||| DISEO WEB |||
Ing. Lilian M. Benique Ruelas Pgina: 9 / 10
Como mnimo, debemos inicializar las propiedades src y alt de la marca HTML img.

<IMG SRC=" ">
Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere
cargar una imagen llamada imagen.gif (o el nombre que tenga).

La estructura de la etiqueta es:
<IMG SRC="imagen.gif">

ALT
Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT.

<IMG SRC="imagen.gif" ALT="descripcin">

Con el comando ALT se introduce una descripcin (una palabra o una frase breve)
indicativa de la imagen.

ALIGN
Nos permite escoger la posicin del titular con respecto a la imagen (si es que queremos
ponerle un titular, claro est). Se puede poner arriba, en medio o abajo del lado de la
imagen.

Para ello se aade el comando ALIGN a la etiqueta, de la siguiente manera:

<IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba
<IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio
<IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo

BORDER
Si no se desea que aparezca un rectngulo alrededor de la imagen, hay que incluir dentro
de la etiqueta de la imagen el atributo BORDER=0, es decir:
<IMG SRC="hombre.gif" BORDER=0>
WIDTH y HEIGHT
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que
el navegador se ha encargado de buscar automticamente. Es posible definir la anchura y
la altura de la imagen gracias a los atributos width y height, respectivamente:

<IMG SRC="DW.png" WIDTH=100 HEIGHT=180 ALT="Diseo Web">

Donde WIDTH=100 es la dimensin horizontal (ancho) de la imagen expresada en pxel, y
HEIGHT=180 la dimensin vertical (alto).

||| DISEO WEB |||
Pgina: 10 / 10 Ing. Lilian M. Benique Ruelas

Mediante estos atributos podemos definir dimensiones diferentes de las que realmente
tiene la imagen. En cualquier caso, es aconsejable insertar imgenes con su tamao
efectivo sobre todo si estn en formato GIF, dado que, cuando se cambian las medidas,
este formato pierde mucha calidad.

HSPACE y VSPACE

Con estos dos atributos podemos establecer la distancia en pxel de la imagen a los
objetos que se encuentran a los cuatro lados de la misma.

HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos
ms cercanos (texto, imgenes, etc.).

VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos ms
cercanos (texto, imgenes, etc.). La sintaxis correcta es:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3
ALT="Obra de K. Haring">

Estos atributos resultan tiles cuando queremos distanciar la imagen de los objetos ms
cercanos.

LNEAS HORIZONTALES CON <HR>


Las lneas horizontales constituyen un instrumento idneo para dividir partes del
documento y hacer ms legible el texto. La sintaxis necesaria para su insercin en un
documento HTML es la siguiente:

<HR align="CENTER" size="2" width="400" color="Red" noshade>

La marca HR (acrnimo de Horizontal Rule) no necesita cierre. Consta de diversos
atributos:

align="CENTER": define la alineacin de la lnea (center, right, left).
size="2": define el grosor, en pxel, de la lnea.
width="400": define la longitud horizontal, en pxel, de la lnea. Puede tambin
expresarse en tanto por cien respecto al espacio a disposicin: width=80%.
color="RED": define el color de la lnea.
noshade: si este atributo est presente, elimina el efecto 3D de la lnea. Si no est
presente, produce dicho efecto.

También podría gustarte