diseño web (lenguaje html)

8/14/2019 Diseño Web (Lenguaje HTML)

http://slidepdf.com/reader/full/diseno-web-lenguaje-html 1/70



Para Comenzar El código fuente, se escribe en un procesador de texto.

Nosotros lo vamos a hacer con el Bloc de notas.

A continuación debes saber que las dos etiquetasfundamentales dentro de las cuales tiene que ir nuestro códigofuente son <html> como etiqueta de apertura y </html> como

etiqueta de cierre.

Después, todo lo que será visible al visitar la página conel navegador, debe de estar entre las etiquetas <body> cuerpo ,en inglés, como etiqueta de apertura y </body> como etiqueta decierre.

Nota : Las etiquetas también se pueden escribir con letras mayúsculas: <HTML><BODY>...Nosotros vamos a optar por las minúsculas por ser lo que se está imponiendo deacuerdo con las últimas normas.

http://www.imaginecup.com/



Ejercicio 1Vamos a escribir algo en nuestra página. Por ejemplo

Bienvenid@. Lo escribiremos entre <body> y </body>. Nuestrocódigo quedará así:




Ejercicio 1Ahora tenemos que guardar nuestro documento en alguna

parte del ordenador y ¡muy importante! con un nombre y unaextensión especial. El nombre va a ser index (ya veremos porquéeste nombre más adelante) y su extensión .html




Ejercicio 1Ahora podremos visualizar nuestra primera pagina web,

haciendo doble click en el icono del archivo que hemos guardado.

La verdad no es una página muy espectacular pero...los comienzos deben ser humildes.




Aspectos Estéticos Centrar el Texto. Aumentar el Tamaño del Texto . Poner un Color de Fondo. Cambiar el Color del Texto. Saltos de Línea.

Párrafos. Cabecera. Listas. (Listas no numeradas , Listas numeradas y

Listas anidadas , Listas de Definición ).

Sangrías . Formato de Texto . Línea de Separación. Comentarios




Centrar el Texto

Si queremos que nuestro saludo: Bienvenid@ aparezcaen el centro de la página, escribimos delante del saludo laetiqueta <center> y al final del mismo la etiqueta de cierre</center>. El código quedaría así:

Guardamos loscambios.Comprobamos estos enel Explorador, si noaparecen los cambiosdebemos actualizar la

pagina para poder visualizarlos.




Aumentar el Tamaño del Texto

Nuestro mensaje es algo pequeño. Podemos aumentar su tamaño empleando las etiquetas de encabezados. Lasetiquetas van desde el <h1> (h de head, en inglés, cabeza) parala más grande, al <h6> para la más pequeña. Vamos a poner eltamaño mayor:

Guardamos loscambios.Comprobamos estos enel Explorador, si noaparecen los cambiosdebemos actualizar la

pagina para poder visualizarlos.




Poner un Color de FondoSi deseamos poner un color de fondo a toda la página,

lo tenemos que hacer dentro de la etiqueta <body> pues afectaa todo el documento. Esto que se escribe dentro de unaetiqueta se denomina atributo. Los colores deben escribirsemediante el denominado código hexadecimal que consiste en6 cifras/letras agrupadas de dos en dos, que nos indican lacantidad de rojo, verde y azul que contiene ese color, o bien,con la palabra en ingles que corresponde al color que sedesea.

Nosotros vamos a poner el color Azul al fondo de la

página. Lo conseguimos escribiendo la etiqueta <body> con suatributo como sigue: <body bgcolor=“blue"> (bg debackground ).




Poner un Color de FondoVeamos como quedaría el código:

Guardamos los cambios y abrimos el navegador para comprobar los resultados.




Poner un Color de TextoPara cambiar el color del texto empleamos la etiqueta <font>

con su atributo color. Vamos a cambiar el color negro del texto, alcolor blanco. Podríamos emplear el nombre en inglés del color, igualque hemos hecho con el fondo. La etiqueta quedaría <fontcolor="white">. Vamos ahora, a colocar el código hexadecimal de estecolor que es el ffffff. La etiqueta quedaría así: <font color="#ffffff">. Laetiqueta se debe cerrar sin su atributo.

Guardamos los cambios,minimizamos y abrimosel navegador actualizando si esnecesario.




Saltos de LíneaPara que el salto de línea se incorpore hay que hacerlo

con la etiqueta <br> del inglés break, romper. Esta etiqueta notiene cierre.El código quedaría así:

Guardamos loscambios, minimizamosy abrimos elnavegador

actualizando si esnecesario.




PárrafosCuando queremos introducir una línea en blanco,

utilizamos la etiqueta <p> de párrafo. Esta etiqueta admite sucorrespondiente cierre </p>, aunque no es necesario.El código quedaría así: Guardamos los

cambios, minimizamosy abrimos elnavegador actualizando si esnecesario.

Si queremos separar másno es suficiente repetir laetiqueta <p>. Hay que unir las dos etiquetas y repetir ambas (<p><br>).




CabeceraNo es imprescindible pero sí muy importante. La cabecera se

coloca entre las etiquetas <head> y </head> . Va justo después de laprimera etiqueta <html> y antes del <body>. Constituye la parte novisible del documento.

De momento, lo

que más nos interesaponer dentro de lacabecera deldocumento es el títulode la página. Para estohay que introducir dos

nuevas etiquetas <title>de apertura y </title> decierre.




ListasA menudo hay que hacer listas de objetos, de

conceptos, de definiciones… Las listas pueden ser nonumeradas (el orden no importa) y numeradas.

Comienza el listado

con la etiqueta <ul>(unordered list) y sufinal con la etiquetade cierre </ul>. Cadaobjeto que forma la

lista va precedido dela etiqueta <li> (listitem) sin etiqueta decierre.

1) Listas no Numeradas




Listas

Comienza el listadocon la etiqueta <ol>(ordered list) y sufinal con la etiqueta</ol>. Cada objetoque forma la lista vaprecedido, igual queen las anteriores de laetiqueta <li> sincierre.

1) Listas Numeradas




Listas

Se pueden combinar unas listas dentro deotras: No numeradasy/o numeradas. Hayque tener,simplemente, cuidadoen la colocación delas etiquetas deapertura y cierre.

1) Listas Anidadas




Listas

Son apropiadas, comosu nombre indica, paraestablecer listados detérminos con sus

definiciones. Lasetiquetas de apertura ycierre son <dl> y </dl>(definition list). Losconceptos a definir vancon la etiqueta <dt>

(definition term) y lasdefiniciones con laetiqueta <dd> (definitiondefinition).

1) Listas de Definiciones




SangríasSe realizan con la etiqueta <blockquote> de apertura y

su correspondiente de cierre. Aumentan, también, elinterlineado, por eso se emplean para hacer una cita textual.

Se puede utilizar más

de una etiqueta sideseamos una sangríamayor.




Formato de TextoPara remarcar una cadena de caracteres empleamos

las etiquetas <b> y </b> (bold ). Para hacer que un texto semuestre en cursiva: <i> e </i> (italic). Para subrayar empleamos <u> y </u> (underlined).




Formato de Texto

El subíndice se consigue con la etiqueta <sub> y elsuperíndice con la etiqueta <sup> ambas con sucorrespondiente de cierre.




Línea de SeparaciónSe consigue con la etiqueta <hr> (horizontal rule) sin

etiqueta de cierre.


ComentariosSi queremos introducir texto que sirva de recordatorio de lo

que hicimos o dejamos de hacer o para dar explicaciones a otraspersonas que pueden acceder al código pero que no queremos que sevisualicen en pantalla empleamos la etiqueta (medio etiqueta)  para el final del comentario.



TablasUna tabla se define entre las etiquetas <table> y </table>. A

partir de este momento hay que definir las filas de la tabla que sedefinen con <tr> y </tr> (table row). Un par de etiquetas para cada unade las filas. Dentro de cada fila se definen las celdas que forman esafila con las etiquetas <td> y </td> (table data).

Tablas con borde y casillas vacías. Atributos de la Tabla . Atributos de las filas y las celdas. Tablas con celdas de distintos tamaños. Titulo de la tabla. Celdas de Cabecera . Alineación dentro de las celdas. Separación entre celdas, entre bordes y contenidos .




Tablas con bordes y casillas vacíasPor un lado vamos a indicar que queremos una tabla con borde. Esto

se hace dentro de la etiqueta <table> con el atributo border. Así: <tableborder>. Por otro lado, vamos a poner algo dentro de cada celda. Pero, enlugar de poner algo concreto y visible, vamos a utilizar una cadena decaracteres en blanco para añadir un espacio a la separación entre palabras:




Atributos de la TablaPodemos hacer que nuestra tabla esté centrada en la página con el

atributo align="center". O "left" o "right“. Que ocupe una determinadaproporción del espacio en horizontal con el atributo width="50%” o "30%" o"70%“, etc… Que el borde sea mayor que el establecido por defecto (que es 1):border="3“, etc… Que tenga un color de fondo con el atributo bgcolor=“x" .




Atributos de las filas y las celdasDe manera similar a los atributos de la tabla, podemos definir todos

esos parámetros a las filas o a las celdas. Por ejemplo podemos empezar asignando a las celdas de la primera fila un ancho diferente. Si a este respectono hago nada más en las otras celdas, lo que haga afectará a todas lascolumnas. Puedo definir colores diferenciados. En este caso, el color de la filao de la celda prevalecerá sobre el definido en el conjunto de la tabla.




Tablas con celdas de distintos tamaños.Es bastante habitual tener que diseñar este tipo de tablas: Unacelda puede ocupar dos columnas, tres,... o dos filas, tres,...Supongamos que tenemos que diseñar una tabla como ésta:

Para no complicarnos, loprimero que hay que tener claroes el número máximo decolumnas y filas que tiene latabla: En este caso es 4columnas y 3 filas. Pues bien,tendremos que establecer 4celdas en cada una de las 3filas. Luego, agruparemosceldas con las etiquetascorrespondientes.




Tablas con celdas de distintos tamaños.Empezamos con la primera fila. Se extiende ocupando

las 4 columnas. La etiqueta que debemos emplear es unatributo para la primera celda de la primera fila (debe"extenderse" sobre las cuatro columnas) <td colspan="4">.Lógicamente la primera fila ya se ha acabado. Pasamos a lasegunda fila. La primera celda se extiende sobre 2 filas.

Escribiremos <td rowspan="2">. Después de esta celda siguenlas otras tres que son normales.

Por último definimos la tercera fila. Como la primeracelda ya ha sido definida en la fila anterior, sólo nos queda la

segunda celda, que es normal, y la tercera que se extiendesobre dos columnas <td colspan="2“>




Tablas con celdas de distintos tamaños.Pondremos un para meter algo aunque no se vea y,

para asegurarnos de la simetría de la tabla, estableceremos el anchocon el atributo width en la tabla (30% por ejemplo) y una proporcióndel espacio total de la tabla en cada columna (25%) y lo haremos enlas celdas que nos parezca (en las "normales" de ancho). El códigoquedaria así:




Titulo de la TablaDisponemos de una etiqueta para poner el título de la tabal.

Es <caption> con su correspondiente de cierre. Se coloca después dela etiqueta de definición de la tabla y añade un texto por encima de latabla y centrado con ésta.




Celdas de CabeceraDisponemos de una etiqueta especial para aquellas celdas

que son cabecera respecto de las celdas situadas debajo de ellas.Son las etiquetas <TH> (table header). El texto situado en ellas quedacentrado y en negrita. Lo único que hay que hacer es sustituir laetiqueta normal de celda por esta otra.




Alineación de las CeldasVeamos como se pueden alinear los objetos dentro de las celdas de

una tabla: Xxx Xxx Xxx

Xxx Xxx Xxx

-Primera fila (alineación horizontal): En la primera celda el texto está alineado

a la izquierda. Es la alineación que se establece por defecto pero podríaescribirse: <td align="left“>. En la segunda celda el texto está alineado en elcentro: <td align="center">. En la tercera celda el texto está alineado a laderecha: <td align="right">.

-Segunda fila (alineación vertical): En la primera celda el texto está alineado enla parte superior: <td valign="top">. En la segunda celda el texto está alineadoen la parte central es la alineación vertical establecida por defectoper podríaescribirse, de todas formas: <td valign="middle">. En la tercera celda el textoestá alineado en la parte inferior: <td valign="bottom">.




Alineación de las CeldasPara observar mejor los resultados se ha forzado la altura de las celdas a 50

píxeles. Basta escribirlo en la primera celda de cada fila: <td height="50"> peropodría escribirse en todas ellas.




Separación entre celdas, bordes y contenidosLa separación por defecto entre las celdas es de 2 píxeles. Se puede

modificar esta distancia con el atributo de table cellspacing. Tabla concellspacing de 15 píxeles:




Separación entre celdas, bordes y contenidosLa separación entre el borde la tabla y el contenido de las celdas es

de 1 píxel. Se puede modificar con el atributo cellpadding de la etiqueta table.Tabla con cellpadding de 15 píxeles:




ImágenesLa etiqueta para introducir una imagen en nuestra

página es <img src="nombre.tipo archivo"> (src de source eninglés fuente u origen de la imagen) y siendo nombre elnombre que tiene la imagen y .tipo archivo su formato.

La etiqueta funcionará bien siempre y cuando la

imagen esté en la misma carpeta en la que se encuentra lapágina web desde la que la llamamos. Es habitual (yrecomendable) colocar todas las imágenes en otra carpetainterna, en ese caso, habrá que darle la ruta en la cual seencuentra nuestra imagen. Supongamos que la imagen

nombre.tipo archivo se encuentra en una carpeta denominadaimag, pues bien, la etiqueta sería <img src="imag/nombre.tipoarchivo">



ImágenesEjemplo: En este caso el formato de la imagen es .jpg (junto

con el .gif y el .png son los formatos de imágenes más habituales eninternet). La imagen se denomina shelbygt500e08.jpg



Atributos de la Imagen (width y height)Es muy importante introducir las medidas de la imagen (las

podemos averiguar desde un programa gráfico como PhotoShop o elvisor de imágenes de Windows) dentro de la etiqueta <img>. De estamanera cuando el navegador va recorriendo la página reserva elespacio justo para la imagen y, el resto de la página se va cargandosin problemas mientras se acaba de cargar la imagen. En ejemplo laimagen tiene 700 de ancho y 525 de alto. Escribiríamos:



Nota: El hecho de que aparezcael texto alternativo al acercarnoscon el cursor a la imagen, es una

desviación del Explorer. Existeotro atributo para que esto seproduzca independientementedel navegador que empleemos.Es el atributo title.

Texto AlternativoEs otro atributo que se coloca por varios motivos, el principal es que

aquellas personas que visiten nuestra página y tienen una mala conexión y nodesean eternas descargas; tengan, al menos, una orientación del contenido dela misma. Debe ser una descripción corta del tema de la imagen. Se introducecon la cadena alt="descripción de la imagen" y, al ser un atributo, se colocacomo los dos anteriores, dentro de la etiqueta <img>.

Si el visitante navega con elInternet Explorer se acercacon el cursor a la imagen,aparecerá un rectángulo conel texto alternativo.



Colocar una imagen como fondo de la páginaSimplemente tenemos que colocar dentro de la etiqueta <body> el

atributo background con el nombre y/o dirección de la imagen que queremoscolocar. Supongamos que quiero colocar una imagen denominada smoke1.jpgque está dentro de la carpeta imagen. El código será el siguiente:



Vinculos

Es una de las herramientas más interesantes de losdocumentos html. La sintaxis para establecer un enlace es: <ahref="destino">texto</a>. Donde destino es el documento conel que se enlaza y texto es la palabra o palabras que, al pulsar,nos llevan a ese destino (también puede ser una imagen).

Vínculos a otro documento del mismo sitio web . Vínculos a otro documento externo al sitio web. Vínculos a otra parte del mismo documento. Vínculos a una parte concreta de otro documento

de nuestro sitio web. Vínculos de Correo Electrónico . Imagen como Vinculo a otro documento .




Vínculos a otro documento del mismo sitio web

Nuestro sitio estará formado por varios archivos generadores

de varios documentos. Los documentos tendrán la extensión .html(o .htm). Para establecer el vínculo escribiremos sencillamente elnombre del documento en el destino y, entre las etiquetas de aperturay cierre la palabra o palabras que activarán el vínculo.

Como ejemplo vamos a establecer un enlace a la primerapágina de este sitio (primer documento) cuyo archivo tiene comonombre index.htm




Vínculos a otro documento externo al sitio web

En este caso en destino deberemos escribir toda la dirección

URL del sitio. Vamos a establecer un enlace a la página del buscador Google cuya dirección URL es http://www.google.es




Vínculos a otra parte del mismo documento.

A veces cuando el documento es muy extensoconviene establecer formas rápidas para subir o bajar a unaparte determinada del documento. Para realizar esto, primerohay que establecer un ancla o marca en las partes deldocumento a la que queremos acceder de forma rápida. La

sintaxis del ancla es <a name=“ancla"></a> poniéndolo en elpunto de destino. No hace fata que haya nada entre la etiquetade apertura y cierre. En el punto activador escribiremos <a href ="#ancla"> Ir a la parte tal </a>.

Nota: Para poder visualizar un ejemplo de este caso debemostener una pagina web mas elaborada.




Vínculos a una parte concreta de otro documentode nuestro sitio web.

Se pueden combinar este último tipo de enlaces con elvínculo a otro documento de nuestro sitio.La sintaxis sería <a href="paginax.htm#ancla"> Ir al apartadotal de tal página </a>

Nota: Para poder visualizar un ejemplo de este caso debemostener una pagina web mas elaborada.




Vínculos de Correo Electrónico

Vamos a ver los enlaces a una dirección de correoelectrónico. Cuando el navegante pinche sobre el activador delvínculo, se abrirá el programa de correo con la dirección deldestinatario ya escrita en el mensaje.La sintaxis es <a href="mailto:[email protected]"> Mándame

un mensaje </a>




Imagen como vinculo a otro documentoEn lugar de texto podemos utilizar una imagen como vínculo.

En primer lugar deberemos escribir la etiqueta de apertura del vínculoy luego la etiqueta de inclusión de la imagen cerrando,posteriormente, la etiqueta del vínculo. Para este tipo de vínculos sesuelen emplear pequeñas imágenes, aunque, a veces, también seutilizan imágenes de gran formato (sobre todo en los portales de lossitios).




Marcos

La estructura de los marcos o frames es un poco compleja.

Empezamos definiendo una estructura de marcos: Consisteen una división de la pantalla en varias zonas de tal forma que, en unade las partes, puede haber un menú de vínculos, por ejemplo, quepermanecerá constante y, en la otra, parte principal o main frame, secargarán las páginas pinchadas desde el frame de vínculos.

Puede haber más partes, por ejemplo, una parte superior conel título del sitio que permanecerá constante según vayamosnavegando.

Vamos a empezar definiendo una estructura de dos frames:Una columna izquierda, más estrecha, y una columna derecha, másancha, como frame principal o main frame.



Marcos

Para empezar hay que saber que, de entrada, tenemos quegenerar tres documentos (tres archivos .html):

El primero, el más extraño, que definirá la estructura de losmarcos.

El segundo, que se cargará en el marco izquierdo.

El tercero que se cargará en el marco derecho.

Por otro lado, tenemos que decidir, cuánto espacio vamos aasignar a cada marco: Decidimos que el marco izquierdo ocupará el15% del espacio y el marco derecho, el resto (o el 85%).



Marcos

Veamos la Sintaxis del primer archivo, la estructura de losmarcos:

Esto lo guardamoscon el nombreindex.html porque va

a ser lo que se abra alprincipio.

Comentarios acerca de la si



Comentarios….Lo primero que observamos es que, en vez de la etiqueta <body>

hemos empleado la etiqueta <frameset> (estructura de marcos.)

El atributo cols está definiendo las columnas y el espacio reservado acada una. Si, en vez de columnas hubiéramos querido establecer filas,hubiéramos empleado el atributo rows.

A continuación decimos que la primera columna va a ocupar el 15%del espacio. Y, la segunda, el resto. Esto indica el asterisco *.

Luego viene la etiqueta <frame> (del primer frame) con el atributo srcpara indicar qué archivo se va a cargar en ese espacio. En nuestro caso, elarchivo se llama indice.html. Después viene la etiqueta del segundo marco. Enél se cargará el archivo que he llamado saludo.html .

En este marco principal hay otro atributo que es el nombre que le

vamos a dar. Esto es necesario porque, en este espacio, se van a cargar otrosdocumentos cuando pulsemos los enlaces y hay que ponerle un nombre paradecírselo a los enlaces. El nombre que yo le he puesto es principal.



Marcos

Luego creamos los archivos indice.html y saludo.html



Marcos

Nos queda por crear un cuarto archivo enlace.html paraque sirva de ejemplo en la sintaxis a emplear para que los enlacesse carguen en el frame principal. Para ello, primero tendremos quecrear el documento:

Por otro lado,tendremos que

modificar el documentoíndice para poner elvínculo:

<a href=“enlace.html”target=“principal”>Enlace



Formularios

El formulario es una interesante herramienta de todapágina web. Permite recabar información ordenada de losvisitantes, y almacenar esa información de alguna manera.Nosotros vamos a trabajar un formulario cuyos datos seanenviados a una dirección de correo electrónico normal ycomo datos no encriptados.

La otra forma, más compleja, es ser enviado anuestro servidor a través de un programa determinado quedeberá estar instalado en ese servidor, para almacenar lainformación y procesarla. Como esto no está a nuestro

alcance aun, vamos a centrarnos en el primer tipo deformularios.

http://www.imaginecup.us/



Formularios

Los formularios están dentro de las etiquetas<form> y </form>.

Los atributos de la etiqueta de apertura delformulario indicarán la forma de enviar la información:

action=mailto:direcciondecorreo. El formulario seráenviado a la dirección de correo que pongamos.

method="post". Los datos se enviaráninmediatamente por correo electrónico.

enctype="text/plain". Las respuestas se enviarán sincodificación.




Tipos de Formularios

Campo de Texto de una Línea

Campo de Texto de Varias Líneas

Menú de Opción

Menú de Opción Múltiple (Casillas de Verificación)

Menú desplegable

Campo de Contraseña






Colocaremos, dentro del formulario, una tabla con doscolumnas para mejorar la presentación de los datos: En la columnaizquierda, y alineado a la derecha, colocamos un texto (etiqueta) y,en la columna de la izquierda y, alineado a la derecha, el campo detexto.

De poco sirve el formulario si no tenemos la opción deenviarlo. Así que vamos a proceder a la introducción del códigonecesario. Normalmente, además del botón de enviar se sueleponer otro para borrar los datos introducidos.






Comentarios acerca de la Sintaxis





Comentarios….

input type (entrada de tipo) texto (text).

name es lo que aparecerá en el mensaje delante de lo queintroduzca el usuario.

size nos indica el tamaño de la caja de texto de una línea.En este caso 10 caracteres.

maxlenght indica la cantidad máxima de caracteres quepuede introducir el usuario.





Campo de Texto de varias LíneasSe consigue con la etiqueta <textarea> y su

correspondiente de cierre.

Comentarios acerca de la Sintaxis





Comentarios….

En este caso, la etiqueta tiene apertura y cierre.

El atributo cols indica el ancho del cuadro de texto ennúmero de caracteres.

El atributo rows indica el número de filas del cuadro detexto.

Si el ususario quiere escribir más de 5 líneas, el formulariose lo permite.





Menú de Opción

Permite elegir entre varias opciones, una única.

Se introduce de forma similar al cuadro de texto de unalínea <input> pero, ahora el type es radio el name es el nombre quele damos a ese grupo de opción, el value lo que aparecerá en elmensaje de correo delante de la opción elegida.

Hay que repetir la etiqueta tantas veces como opciones deelegir haya.

Si queremos introducir una segunda posibilidad deelección deberemos repetir el proceso pero cambiando el name del

grupo de opciones.





Menú de Opción

Veamos el código:





Menú de Opción

Es parecido al anterior cambiando el atributo radio por checkbox . Los demás atributos son similares.





Menú Desplegable

Las opciones de elección se despliegan en un menú paraque el visitante elija una.





Campo Contraseña

Para hacer que un determinado campo de texto no seavisible para las personas que estén alrededor del usuario (tipocontraseña), empleamos la misma sintaxis que en el campo detexto de una línea sustituyendo type="text" por type="password" .


diseño web (lenguaje html)

Documents