Construyendo Un Sitio en Internet

8/8/2019 Construyendo Un Sitio en Internet

1/83

CONSTRUCCIN DECONSTRUCCIN DESITIOS WEBSITIOS WEB

CONSTRUYENDO UN SITIO EN INTERNET


2/83

Concepto y breve perspectiva histricadel Internet.

yBreve definicin

La Internet consiste en miles de redesconectadas alrededor del mundo. Una red

es una serie de computadoras conectadas

para compartir informacin.


3/83


4/83

yHistoria

A finales de 1960, el departamento de Defensa

de los Estados Unidos empez la Internet como

un proyecto de investigacin militar.

El gobierno cre una red que cubra una gran

rea geogrfica y poda resistir un ataque. Si

parte de la red fallaba, la informacin podra

encontrar una nueva ruta alrededor de lascomputadoras deshabilitadas.


5/83

La red crecirpidamente paraincluir cientficos einvestigadores

alrededor del pasy eventualmenteincluy escuelas,negocios,organizaciones e

individuos en todoel mundo.


6/83

yLoquela Internetofrece.

Correo Electrnico.

Informacinyentretenimiento.

Gruposdediscusin.

Comprayventadeproductos.

Intercambiodearchivos.


7/83

HTMLHTML

HTML, siglas de HyperText Markup

Language (Lenguaje deM

arcas deHipertexto), es el lenguaje de marcadopredominante para la construccin depginas web. Se escribe en forma de tags

(etiquetas) rodeadas por corchetesangulares ().


8/83

La World Wide WebEs una amplia gama de documentos de

hipertexto y/o hipermedios almacenados encomputadoras alrededor del mundo y sonaccesibles a travs de Internet.

Conceptos relacionados con la WWW.

yPgina Web.Es un documento de la WWW y puedeincluir texto, imgenes, sonido y vdeo.


9/83

PGINAS ESTTICAS PGINAS DINMICAS

y DocumentosHTML

y Pginassencillas(texto,imgenes,

sonidoyvideo,enlacesaotraspginasoparadescargar

archivos).

y ArchivosPHP,ASP,etc.

y Pginasconconexinabasede

datosy Manejode

formulariosconaccesoabasesdedatos.


10/83

ySitio Web.

Serie de pginas Web albergadas en algnservidor mantenido por alguna institucinprivada o gubernamental, universidad oindividuo.

yServidor Web.

Computadora que almacena pginas Web ylas pone a disposicin de toda persona que

acceda a Internet.


11/83

yURL.Cada pgina Web tiene una

direccin nica, llamada UniformResource Locator (LocalizadorUniforme de Recursos). Puedemostrar instantneamente

cualquier pgina si se le conoce.

yNavegador o explorador.Programa que permite explorar la

informacin de la www yvisualizar el contenido de laspginas Web.


12/83

ESTRUCTURA DE UN DOCUMENTOESTRUCTURA DE UN DOCUMENTOHTMLHTML

TITULO DE LA PGINA O SITIO

CONTENIDO DE LA PGINA


13/83

Estructura de un documento HTMLEstructura de un documento HTML

La estructura bsica HTML est formada pordiferentes tags inciales y finales:

TITULO DE LA PGINA O SITIO

CONTENIDO DE LA PGINA


14/83


Todo documento queda englobado por lostags .

Mediante estos tags, el navegador reconoce

el principio y el fin de un documento HTML.


15/83


Un documento HTML est formado,adems, por dos bloques que puedenincorporar otros comandos ( y).

El primer bloque se marca con los tags y establece elencabezado del documento HTML.

En esta parte del documento se concreta elttulo del documento y diversos datos deadministracin.


16/83


Dentro la etiqueta head se prevn lasetiquetas:

y

y y

y

y

y


17/83


El tag title es una parteimportante de un documento. Los ttulosdeben describir el contenido del documentode la forma ms precisa posible, pero sin

ser demasiado largos.


18/83


El tag base establece la URL baseque ser usada para resolver URLs relativasen todo el documento.

Usando el atributo "target" tambin sepuede definir un "target" predeterminadopara todos los vnculos en el documento.

Ejemplo


19/83


El tag link es comnmente usadopara apuntar a archivos externos de hojasde estilo en cascada (Cascading StyleSheets ).

Ejemplo


20/83


21/83


Los metatags proporcionan a losnavegadores y/o motores de bsquedaprincipalmente la siguiente informacin:

y Ttulo

de

la

pgina

(title)

y Descripcindelapgina(description)y Palabrasclavedelapgina(keywords)y Tipodedocumentoy

Juegode

caracteres

y Autordelapgina(author)y Derechosdeautordelapgina

(copyright)


22/83


Como ya se mencion los metatags formanparte del encabezado y su sintaxis es:

Ejemplo:


23/83


Para el desarrollo de las pginas web debeincluirse un metatag que contega por lo

menos el tipo de documento y el charset

(juego de caracteres) iso-8859-1 o utf-8.


24/83


Un juego de caracteres en una pgina Web, es unalista de caracteres vlidos para el idioma que seutiliza para mostrar su contenido.

Dado que se puede hacer pginas en todos losidiomas, se debe especificar un juego de caracterespara cada pgina, y en espaol los juegos decaracteres ms recomendados son el iso-8859-1,conocido tambin como Latin 1 o el UTF8.

Por ejemplo, una pgina en espaol necesita teneracceso a todas las letras del abecedario, acentos, yalgunos caracteres especiales como signos deinterrogacin y dems.


25/83


El tag style provee una formapara definir reglas de estilo en elencabezado del documento.

Estas reglas de estilo pueden ayudar a losautores a establecer atributos a loselementos.

Ejemplo


26/83


El tag script define el espaciopara insertar un cdigo de script.

Los scripts pueden estar ubicados en

cualquier lugar del encabezado o del cuerpode un documento y ser definidos dentro deltag script o en un archivo externo.

Ejemplo


27/83


Las instrucciones se colocan entre las dosetiquetas .

El marcador type contiene los valores como text/tcl, text/javascript o text/vbscript.

Siguiendo la pauta de los scripts, el tipo seindica como atributo de la etiqueta .

Las instrucciones del script se enmarcanadicionalmente en un comentario con laetiqueta para as evitar falsasinterpretaciones por parte de navegadores queno admiten scripts.


28/83


instrucciones//-->

instrucciones-->


29/83


Ms arriba se mencion que un documentoHTML est formado, adems, por dosbloques que pueden incorporar otroscomandos ( y ).

El contenido del documento propiamentedicho queda enmarcado por los dos tags .


30/83


En el body se encierra el contenido del restodel documento y dentro de l se ingresa eltexto del documento, grficos, enlaces,tablas, etc.


31/83

Manejo de texto.Manejo de texto.

El cuerpo de un documento HTML contiene eltexto que, con la presentacin y los efectos sedesea presentar en el navegador.

Dichos efectos se especifican exclusivamente atravs de directivas.

Son las directivas las encargadas de darformato al texto, es decir sin ellas los espacios,tabulaciones y retornos de carro que seintroduzcan en el archivo fuente no tienenningn efecto a la hora de la presentacin finaldel documento.


32/83


Ejemplo.

Si en el archivo fuente escribimos

Construccin desitios W

eb.

En el navegador se ver de esta forma.

Construccin de sitios Web.


33/83


Titulares

El texto de un ttulo se escribe dentro deltag , donde detrs de la letra h

siempre va un nmero que determina elnivel del ttulo (hasta seis niveles).

Puede usarse el atributo align para

establecer la alineacin del texto.

Ejemplo


34/83


Saltos de lnea y cambios de prrafo.

Las tags
y

son los comandos queprovocan que el navegador realice un salto

de lnea o un cambio de prrafo.

Si desea cortar una lnea de texto en undeterminado punto, inserte el tag
en

el cdigo fuente HTML.


35/83


Para iniciar un nuevo prrafo, en cambio, sedebe insertar el tag

en el texto fuente.

Ejemplo


36/83


Comentarios.

Son directivas definidas por las tags


37/83


Tipografa

En un documento HTML se puede indicarque un texto tenga un estilo o tipografa

especial. podemos distinguir entre dos tiposde estilos: lgicos y fsicos.


38/83


Con estilos lgicos se formatea el texto deacuerdo con su significado dentro del contextoen el que estn mientras que los estilosfsicos indican la apariencia especfica.

Los estilos lgicos, caracterizado porque en lhacemos un estudio lgico de cada parte deldocumento, viendo la importancia que tiene enel global del mismo distinguiendo entrecabeceras, citas, subndices, comienzos decaptulo, etc, por lo que formatearemos cadaparte del documento de acuerdo a suimportancia en el conjunto global.


39/83


40/83


y ...:conelcualpodemosinsertarcitasotextodiferenciado(CitadeBloque).Eltextocontenidoentreestasetiquetasaparecersangradorespectoalosmrgenesizquierdoyderecho....:(delete),esusadocontinuarmostrandotrozosdeltextoquesehancorregidoyperonointeresaporalgnmotivotenerloenpantalla,presentandoeltextotachado....:(Insert),complementariaa,indicaeltextoquesustituyealqueyanoesvlido,presentndolosubrayado....:(Acrnimo), Esusadoparapresentarabreviaturas.

y ...:(Example),muestranejemplosdetextosfuente,presentandoeltextoafectadoenfuentemonoespaciada.y ...:(TextoPlano),muestraneldetextosdeuna

formanoformateada. ...:(Listado),diseadasconelobjetivodemostrarelcdigofuentedeprogramas.

y ...:(Preformatted),visualizaeltextoconlongitudfijadefuenteyconelformatoqueposeea comotexto,esdecir,losespacio,sangrasysaltosdelneaquepresenteeltextoseconservanensuvisualizacinenpantalla. Elementosquedeotraformanoseranprocesadosporelnavegadoralahoradevisualizareltexto. Eltextosemuestrapormediodeunafuentemonoespaciada....,quesirveparatransformareltextodelimitadoensuperndice....:paraobtenersubndices.


41/83


Los estilos fsicos formatean cada porcinde texto atendiendo tan slo a cmo debeaparecer finalmente en pantalla, sinpreocuparse en absoluto en qu peso o

papel desempea cada parte del documentoen el esquema total del mismo.


42/83


y Muestraeltextoennegrita.y transformaeltextoencursiva.

y textosubrayado.

y transformaeltextoenunafuentemono

espaciada.y... Muestraeltextotachado.

y... aumentaeltamaodeltexto

respectodeltamaodeltextonormaldeldocumento.

y... disminuyeeltamaodeltextorespectodeltamaonormaldeldocumento.

Ejemplo


43/83


La tag La tag da al autor la libertad de elegirlos tamaos de fuente para el documento ascomo el color de fuente y el tipo de fuentedentro de ciertos lmites. El tag se utiliza el laforma:

Texto

Los atributos ms comunes son:

yface. Establece el tipo de fuente.ycolor. Establece el color de la fuente.ysize. Establece el tamao de la fuente (enpuntos).


44/83


Listas

Para destacar visualmente fragmentos detexto a menudo se colocan delante de los

prrafos unos smbolos que pueden serpuntos, flechas, etc. (vietas); nmeros oletras.

Estos smbolos tambin se denominanenumeraciones o bullets.


45/83


El lenguaje HTML facilita un tag propio parala realizacin de listas y numeraciones.

Para marcar listas con smbolos o vietas se

dispone del tag (unordered list).

yLos prrafos que deben formar laenumeracin deben escribirse entre un tag

inicial y un tag final en la forma . De esta forma se logra el efecto desangra haca la derecha en los prrafosafectados.


46/83


yPara crear una lista desordenada alprincipio del prrafo es preciso, adems queal prrafo afectado le preceda el tag .

Ejemplo


47/83


Para marcar numeraciones en HTML sedispone del tag (ordered list).

El tag tambin logra el efecto de

sangra haca la derecha en los prrafosafectados, pero adems asigna un nmeroal prrafo afectado o precedido por el tag.

Ejemplo


48/83


Al igual que los editores de texto, en HTMLtambin es posible establecer el nmerocon el que comenzar la numeracin o eltipo de nmero (arbigo, romano o letras).

Esto se logra con los atributos del tag para el tag :

start: para indicar el nmero con el quecomenzar la numeracin de .

Ejemplo


49/83


type: Para indicar el tipo de numeracin.Valor Destacado

1Numeracinconnmerosarbigos(predeterminada,encasodequefalteelatributotype)

aNumeracin conletrasminsculasenlaformaa,b,c,etc.

ANumeracin conletrasmaysculasenlaformaA,B, C,etc.

i

Numeracinconnmerosromanosen

minscula enlaformai,ii,iii,iv,v;

INumeracinconnmerosromanosenmayscula enlaforma I, II, III, IV, V;


50/83


Caracteres especiales.

En HTML existen ciertas limitacionesrelativas al uso de ciertos smbolos que

significan algo para este lenguaje, como elde menor que (


51/83


Para solventar este conflicto, HTML ofrece laposibilidad de insertar unas entidades decarcter que podrn ser interpretados portodas las plataformas ya que dichos

smbolos tienen un significado en HTML, yes necesario diferenciar claramente cundoposeen ese significado y cundo queremosque aparezcan literalmente en el

documento final.


52/83


Por ejemplo, como ya sabemos, < indica elcomienzo de una directiva, y, por ello, si

queremos que aparezca en el texto como

tal, tendremos que dar un rodeo

escribiendo algo que no de lugar aconfusin, en este caso (Mayor que): >y& (smbolo de and, o ampersand): &y" (comillas dobles): "

Es decir, que para escribir


54/83


Otro caso especial se da cuando en un textoHTML se quiere escribir una , por ejemploo vocales acentuadas, para resolver esto elestndar de HTML, obliga a utilizar

entidades, como las que antes sepresentaron para escribir ciertos smbolos.

Las entidades comienzan siempre con el

smbolo &, y terminan con un punto y coma(;). Entre medias va un identificador delcarcter que queremos que se escriba.


55/83


y Lasentidadesnecesariasennuestroidiomason:

: : :

: : :

: : :

: : :

: :

: :


56/83


Como puede verse, las vocales acentuadasse identifican aadiendo el sufijo acute a lavocal sin acentuar (puesto que se trata deun acento agudo).

Para la u con diresis y la ee se usan umltras una u y tilde detrs una ene,respectivamente.

La equivalencia de los signos de abririnterrogacin y exclamacin se debe a unafalta de denominacin.


57/83

LINKSLINKS

Una caracterstica ms destacables dellenguaje HTML es el poder generar vnculosde hipertexto para enlazar con ellos otrosdocumentos o pginas en la Web.

Para definir un enlace es necesario marcarcon la directiva el objeto del cual va apartir dicho enlace. Dicha directiva debe

incluir el parmetro href="URL" paraespecificar el destino del enlace.


58/83


59/83

LINKSLINKS

Existenvariosdetiposdeenlaces.

1. Enlacesapginasdeotrossitios

2. Enlacesaotrapginadelmismositio

3. Enlacesootraposicindela mismapgina

4. Enlacededireccindeemail


60/83

LINKSLINKS

1. Enlaces a pginas de otros sitios

La etiqueta encargada de hacer esto es la siguiente:


61/83

LINKSLINKS

2. Enlacesaotrapginadelmismositio

Enelcasodeposeermsdeunapginaennuestrositio,laformadeconectarlas

unasaotraseslasiguiente:


62/83

LINKSLINKS

Tambin pueden utilizarse rutas relativas:

Pasara la unidad 2.


63/83

LINKSLINKS


64/83

LINKSLINKS

3. Enlaces o otra posicin de la mismapgina

Si su sitio posee pginas con un texto muyextenso, lo mas aconsejable es brindarle al

visitante la opcin de dar un salto de una

posicin a otra determinada.

LINKSLINKS


65/83

LINKSLINKS

Para conseguir el efecto ya mencionado el tag se emplea de la siguiente

forma:

E-COMMERCE

Este tag esta indicando un link a otra parte del mismo documento, y su referenciase denomina "e-commerce".

Para ubicar el lugar donde quiere que el link anterior encuentre la referencia "e-

commerce", se debe agregar esta etiqueta:

Aqu se encontrar la referencia e-commerce y ser la posicin dentro deldocumento que el visitante podr observar al hacer clic en el link " E-COMMERCE".

Podemos observar la inclusin del comando a name, el cual determina el lugardonde se encontrar el texto vinculado. No se necesita escribir nada entre los tagsde y .

Ejemplo

TABLASTABLAS


66/83

TABLASTABLAS

Las tablas nos permiten representar yordenar cualquier elemento de nuestrapresentacin en diferentes filas y columnasde modo que podamos resumir grandes

cantidades de informacin de una maneraque puede representarse rpida yfcilmente.

TABLASTABLAS


67/83

TABLASTABLAS

El contenido de una tabla lo debemosdesarrollar entre las etiquetas...

Las tablas se definen fila a fila, celda acelda, comenzando desde la celda superiorizquierda. Las columnas se calcularnautomticamente segn las celdas que hay

en cada fila.

TABLASTABLAS


68/83

TABLASTABLAS

Cada fila de la tabla se indica mediante lasetiquetas ....

Las etiquetas y con suscorrespondientes etiquetas de cierre, indicanlas filas individuales dentro de cada fila.

Las etiquetas ... indican que setrata de celdas que sirven como encabezado detabla y suelen visualizarse en negrita.

Las etiquetas ..... indican que setrata de celdas comunes.

Ejemplo

TABLASTABLAS


69/83

TABLASTABLAS

Cuando queramos titular una tabla,podemos escribirlo como texto normal ousando las etiquetas.....

Las etiquetas de ttulo van dentro de lasetiquetas de la tabla y son opcionales, elttulo no es obligatorio.

Ejemplo


70/83

TABLASTABLAS


71/83

TABLASTABLAS

yEspaciado

Podemos modificar el aspecto de la tablacambiando el ancho de los bordes, el espaciadoentre celdas y el ancho de las mismas.

width=Acompaaayespecificaelanchodelatabla,tantoennmerodepxelescomoenporcentajerespectoalanchodelapantalla.Tambinpuedeacompaaralasetiquetasoparaespecificarelanchodelascolumnas.

border= Esteatributopermiteestablecerelanchodelbordeentrelasceldasenpixeles.Border="0"indicaralaausenciadeborde.

TABLASTABLAS


72/83

TABLASTABLAS

C

ellspacing=S

uele acompaar a la etiqueta. Indica el nmero de pixeles queseparan cada celda. El valor predeterminadosuele ser 2.

Cellpadding= Tambin acompaa a la etiqueta. Indica el espacio en pixeles entre elborde de la celda y su contenido. El valorpredeterminado suele ser 1.

TABLASTABLAS


73/83

TABLASTABLAS

y

Celdas extendidasPara crear una celda que abarque variasfilas o columnas, debemos colocar en lasetiquetas o los atributos:

rowspan= ms un valor para indicar el nmerode filas que se quiere abarcar.

colspan= ms un valor para indicar el nmerode columnas que se quiere abarcar.

TABLASTABLAS


74/83

TABLASTABLAS

y

EjercicioConstruir una tabla con las siguientes caractersticas.

IMAGENESIMAGENES


75/83

IMAGENESIMAGENES

Las imgenes en lnea, se especifican a partir de la etiqueta

que no tiene una etiqueta correspondiente de cierre

pero que puede acompaarse de los siguientes atributos:

ywidth= Este atributo es opcional pero es recomendable

ponerlo para ayudar al navegador a representar la imagen,significa el ancho de la imagen que vamos a representar.

yheight= Este atributo significa el alto de la imagen y aligual que el atributo width, es opcional pero recomendable

utilizarlo.

yborder= con border especificamos el ancho de un bordeque rodea la imagen.

IMAGENESIMAGENES


76/83

IMAGENESIMAGENES

y src= Esteatributoesobligatorioeindicaelnombredelarchivodeimagen(entrecomillas)ola URL quesevaarepresentar.

y align= Permitecontrolarlaalineacindeunaimagenconrespectoaunalneadetextoadyacenteoaotrasimgenesenesalnea.Lostresvaloresposiblessonlosyaconocidosleft,right,top,middle ybottom.

y alt= Eslaalternativaqueseestablecicuandotodava

existanvisualizadores

de

solo

texto.

Entre

comillas

podremosescribiruntextoquesuplantaraaestaimagensinosecargaomientrassecargaocuando,visualizandoyalaimagen,pasamoselratnporencima.

Ejemplo

FRAMESFRAMES


77/83

FRAMESFRAMES

Los frames hacen posible subdividir el rea depresentacin del navegador en distintasventanas. En cada ventana (frame) se puedemostrar un documento diferente.

Para disear frames se necesita un navegadorcon capacidad para frames. Adems sonnecesarios los siguientes archivos:

Un archivo HTML que contenga las definiciones para

los frames.

Los archivos de documento (a ser posible en formatoHTML) que deben mostrase en los distintos frames.

FRAMESFRAMES


78/83

FRAMESFRAMES

Para disear frames se necesita los tags y . Estos tags tienen

diferentes funciones:

x se encarga de dividir la ventana del

navegador en diferentes frames.

x es el tag que establece qu debe ocurrircon el frame (es decir, ah se establecen el nombrede la ventana y el documento que debe motrarse) .

FRAMESFRAMES


79/83

FRAMESFRAMES

Ejemplo

Estas instrucciones provocan que le navegadormuestre en la priemera ventana el contenidodel archivo Ventana1.html. En la segundaventana se presenta el contenido de laVentana2.html. En funcin del tamao deldocumento el navegador muestraautomticamente barras de desplazamiento.

FRAMESFRAMES


80/83

FRAMESFRAMES

La divisin del rea de presentacin en frames selleva a cabo en el tag a travs de losdos atributos cols y rows.

Si requiere utilizar ms de dos ventanas se debe

indicar como valor de esos atributos los tamaosque se desee para los frames. Con

Crear tres frames horizontales que ocuparnrespectivamente el 25%, el 30% y el 45% deltamao de la ventana.

FRAMESFRAMES


81/83

FRAMESFRAMES

P

ara conseguir una divisin vertical se deberutilizar la instruccin:

En este caso el primer frame recibe una altura de250 pxeles. El siguiente frame debe ocupar el 30%del tamao de la ventana y el tercer frame puedeocupar el rea restante.


82/83

FRAMESFRAMES


83/83

FRAMESFRAMES

Construyendo Un Sitio en Internet

Documents

Transcript of Construyendo Un Sitio en Internet