Bienvenido a Tecnohackers

Tecnohackers » Programacion » Programacion Webmaster (Moderador: Zentraedi)
 » 

HTML para principiantes



Autor Tema: HTML para principiantes  (Leído 875 veces)

alma_triste

  • Visitante
HTML para principiantes
« en: Septiembre 29, 2009, 12:08:13 am »
HTML para principiantes

HTML para principiantes, aprende a hacer tus propias páginas web. Programar en un lenguaje como es HTML puede ser fácil y sencillo. Este curso está dirigido a quien no sabe absolutamente nada sobre HTML (HiperText Markup Language). El lenguaje HTML se usa para describir la estructura y el contenido en forma de texto, además se basa en etiquetas.

Capítulo 1: HTML para principiantes. Introducción

Bienvenido al curso de HTML para el que no sabe absolutamente nada, espero que este curso se haga lo más ameno posible para que aprendamos a programar el lenguaje mássencillo: HTML, Que significa HiperText Markup Language, por cierto debo mencionar que deberéis saber algo de inglés para deducir las funciones desconocidas ya que el lenguaje está 100% en inglés. Comencemos con una pequeña introducción. ¿Cómo funciona? Muy sencillo, el programa donde escribamos compila cada elemento que escribimos para traducirlo al navegador, es decir, lo podemos escribir en cualquier programa, ya que será el navegador el que interprete el texto. Para interpretarlo necesitamos escribirlo de la forma correcta: mediante etiquetas.
 El html se basa en etiquetas, estas etiquetas se llaman tag(s), un tag se escribe entre los signos de mayor y menor, por ejemplo: <negrita>, existen dos tipos de tags o indicadores (etiquetas) los de acción concreta y los de parte del documento, uno de acción concreta no hace falta nada más que escribirlo, ya que solo realiza una acción y después deja de actuar, sin embargo la mayoría de tags son de parte, quiere decir que se abren y se cierran, o dicho de otra forma, hay que indicar cuando comienzan a actuar ycuando dejan de hacerlo, para ello se repite el tag con el símbolo de cierre, que es la barra inclinada, de modo que un ejemplo sería <negrita>Este texto está en negrita</negrita>Ahora ya no. Como vemos un tag está entre los signos < y > y para cerrarlo </ y >. Por supuesto el tag negrita no es válido, ya hemos dicho que el lenguaje es inglés y además, son abreviaturas.
 Además un tag puede contener una serie de complementos que especifican la
función del tag, estos complementos se llaman atributos y poseen un valor, pongamos
un ejemplo:
 <negrita> es un tag
<negrita grosor> es un tag con atributo que al no tener valor, no funciona, ya que no es de una acción concreta como por ejemplo, invariable.
<negrita grosor=10px> Tag con atributo con valor

 Al cerrar un tag se cierra el tag aunque al abrirlo le hayamos puesto atributos, <tag ~~~~></tag>
 Ahora que ya estamos algo metidos en el tema, es hora de comenzar a crear una página.


Capítulo 2: Estructura de una página con HTML


Comencemos a crear nuestra página, abriremos un bloc de notas en windows, un Text en FS, o cualquier otra aplicación de texto simple en un sistema operativo. Existen programas que escriben el código por nosotros mientras diseñamos la Web igual que una presentación, además dan opciones a elegir de tags, atributos y valores, y lo pintan del mismo color que yo en el capítulo uno: tag morado, atributo rojo y valor azul. Pero esto no nos interesa porque lo que queremos es aprender a programar, y si lo hace él, se nos acabará olvidando realmente. Creedme, mucho. Abrimos el procesador de texto simple y escribiremos la página de la siguiente forma, no deberéis empezar hasta que terminemos el curso, por supuesto, pero podéis apuntar, subrayar etc... .todo lo que necesitéis, lo primero planificaremos cómo será la página, doy por hecho que ya lo sabéis, de modo que empezaremos con el tag: <!Doctype>, este tag no es en absoluto necesario hoy en día, pero hubo un tiempo que lo fue, indica al navegador que clase de html es, yo suelo usar el tag y los atributos <!DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "You are not allowed to view links. Register or Login"> Pero lo podemos omitir sin ninguna clase de problema, de hecho, no suelo usarlo con frecuencia. A Partir de aquí la página es como una escultura, cabeza y cuerpo, posee dos partes, cabecera (<head>) y cuerpo (<body>) En la cabecera se colocan los metatags, que ahora los veremos, los datos de la página y los códigos de activación de sub. Controles. El tag <meta> solo sirve para contener atributos como autor de la página, descripción y palabras clave para losbuscadores....etc. por tanto hemos de considerarlo importante si la vamos a publicar.
 Veamos un ejemplo
 
 
Código: You are not allowed to view links. Register or Login
<!Doctype ~ ...>
<head>
<meta name=keywords content=curso,html.></meta>
 
Con el atributo name, y valor keywords (palabras clave) especificamos que van a ser, curso y html en "content" hemos de separarlas por comas sin espacios o el navegador interpretará cada palabra como un atributo, en caso que necesitemos un espacio en un valor, lo escribiremos entre comillas:
 
 
Código: You are not allowed to view links. Register or Login
<Meta name=descripción content=curso para gente que no conozca absolutamente nada el html"></meta>
 Hemos de usar un tag meta para cada cosa como la descripción, autor, palabras clave y demás.
 Por cierto podemos también cerrar un tag como meta (que no afecte a un texto) de lasiguiente forma
 <meta ~ /> pero no es demasiado recomendable, solo por seguridad.
 Más importante es todavía el título de la página, lo incluiremos entre los tags de
<title>,
<!Doctype ~>
<head>
<meta name=description content="Curso de html para gente que no sabe
absolutamente nada"></meta>
<meta name=keywords content=curso,html,principiantes>
<title>Curso de html para principiantes</title>
</head>
<body>
</body>
</html>
 

 Si este texto lo guardamos con la extensión html y lo abrimos con un navegador, veremos que hemos creado una página en blanco, pero con nombre en la barra de navegación, y las pestañas. Pero para eso ya esta about:blank, nosotros queremos crear nuestra página Web, y todo lo que escribamos dentro de <body> se mostrará en la Web, en los siguientes capítulos veremos los formatos y los objetos que podemos usar en body.


Capítulo 3: Body en HTML


Todo el texto que escribamos entre body, se mostrará, pero será una página
realmente sosa, antes de empezar habéis de conocer que cuando mezclas rojo y verde
sale marrón, porque es tinta, sin embargo la luz funciona de otra forma:

You are not allowed to view links. Register or Login

De hecho si colocas una gota de agua sobre el monitor o cualquier pantalla verá claramente los tres colores por píxel, ya que la gota simula una lente divergente. Por tanto la tinta se denomina Cian, Magenta, Amarillo y Negro, en inglés y abreviado CMYB aunque se le llama CMYK, y el Rojo verde y azul, RGB. En RGB se pueden lograr una infinidad de colores más, quizá porque la luz viene directa a nuestros ojos, y en los objetos impresos, la luz blanca rebota pero no en su totalidad. Para definir un color hay que decirle la cantidad de rojo verde y azul en 256 puntos, como existe el 0, de 0 a 255, sin embargo en HTML la cosa se complica ya que se escribe en hexadecimal, va de 0 a la F 0,1,2,3,4,5,6,7,8,9,A, B, C, D, E, F. Si conocemos el formato Gif, sabremos que es de Compuserve y usa 256 colores, y no los 16.7 millones aproximadamente de RGB, el consorcio de las 3 uve dobles W3C, que es el controlador del html ha decidido que los colores seguros para Web, según compuserve son solo los que contienen 0, 3, 6,9, C o F. Para definir un color en html usaremos una almohadilla y dos dígitos por color: #000000 es el negro, ni rojo, ni verde ni azul, podemos definir el naranja, mitad de verde y todo el rojo y etc...

You are not allowed to view links. Register or Login

Un ejemplo sería el color FFFFFF que sería el blanco, es un color seguro para la Web porque tiene los dígitos seguros al 100%, no pasa absolutamente nada por poner cualquier otro, el navegador lo mostrará igual, no obstante, se dice que es mejor usar uno de estos. Apliquemos algún atributo al fundamental body.
 <body bgcolor=#0000FF text=#FFFF00> bgcolor significa background color, es decir, color de fondo de la página, luego podemos escribir el atributo text con otro color.
 Recordad que un buen diseñador Web permite que su página sea legible, intentad siempre que haya mucho contraste entre la letra y el fondo para permitir que se lea sin problema.
 Podemos también usar una imagen de fondo con el tag background, y bgproperties=fixed si queremos que no se mueva la imagen mientras nos desplazamos, recordad que no le gusta al visitante desplazamiento en ambas direcciones y lo que él anda buscando debe estar en lo alto para no tener que desplazar.
 <body background=fondo.gif bgproperties=fixed>
 Para un fondo la Web sólo puede usar formato Gif o JPEG, además, si la imagen no estáen la misma carpeta que la página (llamada carpeta del SITIO Web) tendremos que especificar la carpeta en la que se encuentra, o la ruta completa si está en otra parte delequipo. No obstante si es el caso, la imagen no se publicará correctamente.
 Para escribir un titular podemos usar una letra grande mediante el tag font: <font Face=arial size=7> Con FACE especificamos la fuente y con size, el tamaño.
 No obstante existe el tag H que sirve para los titulares: <h1>Muy grande, y <h6> muy pequeño, los números H2>h5 son obviamente progresión entre ambos.
 Con todos los atributos de head. Continúa escribiendo:
<body bgcolor=#0000FF text=#FFFF00 basefont=arial>
<h1>Esto es un titular</h1><h3>Esto un Subtítulo</h3>
 Esto es una línea de texto
</body>
</html>
 Al ejecutarlo veremos una página muy simple, pero, una página, por cierto, cabe destacar que los tags que se combinan se cierran al contrario
 <1><2>~</2></1> no vamos a cerrar el html antes que body, ¿verdad?
 Para dar formato al texto hemos de aprender los siguientes tags:
 <b> bold, negrita
<i>italic, viene a ser cursiva
<u>underline, subrayado
<s>stricken, tachado
<Sup>superíndice
<sub>subíndice
 Todas estas se cierran con el cierre de tags </~>


Capítulo 4: Formato en HTML


Para alinear una parte del texto tenemos que delimitar una parte del texto, para ello usaremos el tag de división con el atributo de alineación
 <div align=right> para centrar podemos usar diréctamente <center>. Si queremos resaltar el texto usaremos el tag span y el color:
 <span style=background-color= #xxXXxx>~</span>
 Para establecer un tamaño de fuente elegiremos un número del 1 al 7, o especificaremos el número de píxeles (Xpx)
 Si queremos añadir cualquier otro efecto basta con usar otro atributo, por ejemplo , si queremos hacerlo intermitente (algo que apenas algunos navegadores soportan): <span style="text-decoration: blink"
 Si queremos que un atributo contenga varios valores, los separaremos mediante
punto y coma, si posee algún espacio.
 <span style="text-decoration: blink; background-color: #00FF00">h</span>
 Para configurar el color de los hipervínculos usaremos en el tag body los atributos <body link=#0000FF vlink=#990099 alink=#FF0000>
 Link es el hipervínculo
Vlink el visitado
Alink el activo
 Para separar párrafos usaremos los tags <p></p> que engloban un párrafo, como alternativa podemos usar
 (tag sin cierre) que significa salto de línea, y <hr> que significa línea horizontal, también sin cierre, la línea horizontal puede recibir muchos atributos, como la altura (height) anchura (width) etc...
 Muy importante es que tenemos que acostumbrarnos a hacer el código legible para todas las codificaciones, hay caracteres especiales como las tildes, agudas, graves, simples, cejillas y diéresis que no todos los alfabetos reconocen, para ello en lugar de elegir un carácter especial usaremos el código con &; la á a con tilde aguda, es á
 Ejemplo: Párrafo (párrafo) la © © la ñ &ntilde.
 Un código lo podemos escribir todo seguido pero para estructurarlo de forma que sea fácil modificar algo, lo hacemos en líneas, si queremos que el texto sea literalmente como en el código, usaremos los tags <pre></pre>


Capítulo 5: Listas en HTML


Para hacer una lista de numeración o viñetas, seguiremos los siguientes pasos
 El tag <ul> añadirá viñetas, significa lista desordenada, cada elemento de la lista quedará encerrado dentro de los tags de <li></li> dentro de una lista puede haber muchas sublistas. Por defecto, la primera lista aparece con discos (disk) la sublista con circunferencias (circle) y la tercera y sucesivas con cuadrado (square). Si queremos que esto deje de ser así haremos <ul type=square> o cualquier otro
 <ul type=square>
También podemos definir la fuente o usar una imagen personalizada:
 <ul type=font-family=Wingdings;imgsrc=bullet.gif>
 Con font family especificamos la fuente, e image source (imgsrc) significa de donde toma la imagen, o la ruta.
 Podemos hacer también una lista numerada, con lista ordenada
<ol> <li></li> </ol>
 Podemos personalizar la lista con numeros, letras (A) o números romanos (I) minúsculas o mayúsculas
 <ol type=A>
 También podemos hacer lista de definiciones
<dl>
Menús
<Menú>
Etc
  Tablas
 Para crear una tabla la crearemos mediante filas usando el tag <tr> para cada fila y
 <td> para cada celda: <table border=1 width=90%> <tr><td> </td><td> </td><td> </td></tr>
 Con border especificamos el grosor del borde de la tabla, 0 significa sin borde. Podemos también especificar el color (bordercolor=#...) o los bordes con sombras, usaremos un color de luz y otro de sombra (bordercolorlight=#... y bordercolordark...) además podemos añadir un fondo (bgcolor=#) o una imagen(background=x.jpg)
 Con tr especificamos que a continuación se definirá una fila
 Con td que eso es una celda y puede recibir los atributos de width y height, por supuesto ha de coincidir con las demás en cuanto a altura, y la anchura de la fila que continúa es la misma que la de arriba.
   significa espacio, ya que una celda no puede estar vacía.
 Si queremos combinar dos celdas usaremos el atributo rowspan=2 (si son dos casillas) y colspan si se trata de columnas. Para dividir sólo hace falta añadir más td.
 A una celda la podemos tratar por igual, podemos darle color de bordes, fondo etc...
 En una tabla podemos añadir no solo texto, sino también cualquier objeto. Además podemos especificar los márgenes de la taba mediante los tags hspace y vspace (h y v se refieren a vertical y horizontal respectivamente) si los queremos desproporcionados los configuraremos individualmente mediante topmargin leftmargin rightmargin etc....
 Si lo que deseamos es recuadrar un texto, una imagen o cualquier otra cosa usaremos de nuevo el tag div, esta vez de la siguiente forma:
 <div style="border-style: solid; border-width: 1px; padding-left: 4px; paddingright: 4px; padding-top: 1px; padding-bottom: 1px"> ~ </div>


Capítulo 6: Hipervínculos en HTML


Una Web huérfana es una mala Web, una página Web debe contener vínculos que lleven a otras páginas Web. Veamos como.
 Crear enlaces externos-externos
 Usaremos el tag a, de anchor, que es un vínculo con los atributos href (Ruta) y alguno más que podemos añadir.
 Ejemplo: <a href=http://mailxmail.com>mailxmail</a>
 Crear enlaces externos-internos
 Si queremos vincular a una página de nuestro sitio Web no hará falta especificar la ruta, sino tan sólo el archivo, pero recuerda que si es renombrado, habrá que modificar el vínculo.
 Enlaces internos-internos
 Si queremos vincular a una parte de la página como por ejemplo, el principio, definiremos un marcador:
<a name=principio> y a continuación el hipervínculo <a href=#Principio></a>
 Enlaces Internos-externos
 Podemos hacer que vaya el hipervínculo a una página Web mediante la mezcla de ambos:
 <a href=mailxmail.com#Final></a>
 Podemos hacer enlaces a mandar un correo:
Mail to significa correo a, subject, asunto.
 <a href=mailto:fernandogarcia@hotmail.com?subject=visitante del curso</a>
Especifico que no es mi correo
  Enlaces de Descarga
 Si queremos que un hipervínculo permita descargar un archivo simplemente lo haremos vincular a un fichero que no abra el navegador.
 Para hacer un efecto de conversión de un hipervínculo al posar el ratón (rollover) usaremos el codigo en head:
 
Código: You are not allowed to view links. Register or Login
<style fprolloverstyle>A:hover {color: #FF0000; text-decoration: line-through; font-weight: bold}
 
  Que es una función de javaScript

Capítulo 7: Imágenes videos, sonido y complementos


Para insertar una imagen, utilizaremos su tag:
 <img src=bola.gif border=0 width=16 height=16 alt="esta imagen es una bola pero
no se puede visualizar>
 Img inserta la imagen y src, la ruta, border indica el borde, width y height indican las dimensiones alt representa el texto alternativo, que es el que se mostrará sobre la imagen al posar el ratón y cuando no se pueda cargar. Podemos añadir también vspace, hspace, los márgenes etc...
 Si queremos que esta imagen sea además, animada, podemos usar dynsrc para especificar un vídeo que empiece sobre la imagen con Start=fileopen (al abrir el archivo, loop=infinite (reproucir continuamente, y loopdelay=1 (tiempo)
 No obstante, es mucho mejor para archivos de video y sonido usar el tag de videos y
sonidos: embed, al cual le añadiremos los mismos tags que a img. Veamos un ejemplo completo:
 A continuación muestro el vídeo</p>
<embed scr=video1.avi height=300 width=400 hspace=0 vspace=3 align=center>
 Un archivo de audio se inserta de la misma manera ya que ambos son mostrados por un reproductor multimedia. Generalmente los formatos admitidos son:


You are not allowed to view links. Register or Login



Para insertar algún tipo de subprograma, además de escribir el propio código con <script> podemos insertarlo diréctamente mediante:
 <applet src=prog1.vbe>
 Esto no es todo, podemos crear una imagen que pueda contener un hipervínculo
 <img href=~>
 Y también que una parte de la imagen se convierta en uno de ellos, esto se llama mapa de imagen:
 Para usaremos antes del tag img el tag map con los siguientes atributos, sabiendo que la forma puede ser poligonal, circular o rectangular. De esta forma distintas partes de la imagen vinculan a diferentes sitios
 <map>
<area href=x.htm" shape="circle" coords="x, x, x">
<area href="x" shape="polygon" coords="x, x, x, x, x, x, x, x, x, x, x, x">
</map>
 Shape indica la forma y las coordenadas de un círculo, el radio, y las coordenadas del centro, así mismo, el rectángulo sólo necesita las de la esquina superior izquierda e inferior derecha, y un polígono las de cada vértice, para ello se indican los píxeles en horizontal y en vertical.
 Podemos agregar también un texto que se desplace, una marquesina.
<marquee bgcolor=0000FF width=660 height=20 direction=right vspace=10>Texto que se mueeeeeveeee</marquee>
 Para tener una buena estructuración del texto, y para poder trabajar más cómodamente al buscar un tag, es recomendable, sobre todo si eres principiante, llenar hasta rebosar todo de comentarios, un comentario es una guía que no tiene repercusión alguna en la página pero nos sirve para orientarnos en el código, ejemplo:
 ...</h1>
 
Código: You are not allowed to view links. Register or Login
<!--Aquí empieza el botón interactivo-->
<img border="0" id="img1"
src="file:///C:/Documents%20and%20Settings/F/Configuración%20local/Archivos%20t
emporales%20de%20Internet/FrontPageTempDir/button4.jpg" height="20"
width="100" alt="Texto de botón"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'file:///C:/Documents%20and%20S
ettings/F/Configuración%20local/Archivos%20temporales%20de%20Internet/FrontPageTempDir/button5.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'file:///C:/Documents%20and%20Set
tings/F/Configuración%20local/Archivos%20temporales%20de%20Internet/FrontPage TempDir/button4.jpg')"
 onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'file:///C:/Documents%20and%20
Settings/F/Configuración%20local/Archivos%20temporales%20de%20Internet/FrontPageTempDir/button6.jpg')"
 onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'file:///C:/Documents%20and%20Sett ings/F/Configuración%20local/Archivos%20temporales%20de%20Internet/FrontPageT empDir/button5.jpg')" fp-style="fp-btn: Simple Block 1" fp-title="Texto de botón">
 
 
Es útil realmente sin embargo abusar de ellos conlleva muchas líneas de código y todo afecta al tamaño de la página, no solo nos interesa una buena Web sino que haya u entorno sencillo y agradable y que además tarde realmente poco en cargarse. Para escribir un comentario abriremos<!--y cerraremos -->


Capítulo 8: Formularios en HTML


Si tu página es buena, es obligatorio que tenga más de un formulario:
 Crear un formulario de búsqueda:
 Para buscar entre páginas Web, conviene tener un buscador, de artículos por ejemplo.
Usaremos el tag form para crear un formulario e input para los diferentes controles, para un formulario de búsqueda usaremos el siguiente código.
 
Código: You are not allowed to view links. Register or Login
<!--webbot bot="Search" s-index="Web " s-dsn="default"
s-fields="DocumentK,TimeStamp,Weight"
TAG="BODY"
S-Text="Buscar:"
I-Size="20"
S-Submit="Iniciar búsqueda"
S-Clear="Restablecer" b-useindexserver="0"
-->
 
De esta forma tenemos nuestro formulario de búsqueda, recordad adaptarlo a vuestrasnecesidades cambiando la ruta y lo que sea necesario
 Crear un formulario de registro
 Aquí intervienen esos tags, vamos a nombrarlos todos:

 <form>
<input type=text maxlenght=50 label=Nombre></input>
<input type=password maxlengh=9></input>

 Para crear botones accionables usaremos como tipo radio, para casillas de verificación, checkbox, para área de texto, directamente <textarea>, para listas usaremos <select><option></option> para formularios de carga de un archivo, usaremos file. Y Si queremos agrupar unos cuantos campos usaremos <fieldset><legend>registro:Acceder</legend>y cerraremos fieldset> agrupando los necesarios. A los formularios les podemos dar atributos como maxlenght (máximo numero de caracteres, readonly, solo lectura, también podemos usar type=hidden, la diferencia con solo lectura es que el usuario ignora que existe. No sé si he sidodemasiado claro así que voy a poner un ejemplo:
 A continuación de la imagen muestro el código para crear el Formulario


You are not allowed to view links. Register or Login

 
Código: You are not allowed to view links. Register or Login

<form method="POST" enctype="multipart/form-data" action="--WEBBOTSELF--">
<!--webbot bot="FileUpload" U-File="fpweb:///_private/form_results.csv"
S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
<fieldset style="padding: 2">
<legend>Datos personales</legend>
Nombre<input type="text" name="T1" size="20">

Contraseña<input type="text" name="T2" size="20">

Envíenos un archivo<input type="file" name="F1" size="20">

Mayor de 18 años<input type="checkbox" name="C1" value="ON">

Hombre<input type="radio" value="V1" checked name="R1">

Mujer<input type="radio" name="R1" value="V2">

<select size="1" name="D1">
<option>1</option>
<option>2</option>
</select>

Comentario<textarea rows="2" name="S1"
cols="20"></textarea></fieldset>

<input type="submit" value="Enviar" name="B1"><input type="reset"
value="Restablecer" name="B2">
</form>

 

 Podemos usar label para colocar la etiqueta al formulario, como por ejemplo, nombre
 Podemos ir más lejos, podemos por ejemplo, crear una página con licencia, que al no aceptarla, no la podamos ver, para ello usaremos un script que ocultará el formulario mientras que la casilla de verificación esté inactiva. En primer lugar antes de head configuraremos el script, después,, en el formulario configuraremos el"interruptor" y los datos que se ocultan o muestran:
 
 
Código: You are not allowed to view links. Register or Login
<script type="text/javascript"
src="http://lineadecodigo.com/js/wforms/wforms.js"></script>
<style type="text/css">
.onstate-datos { display: block; }
.offstate-datos { display: none; }
</style>
</head>
<body>
 <h1>Condicionar secciones</h1>
 <form action="#" method="post">

<input id="activar" type="checkbox" class="switch-datos"/><label for="activar">Quiere dejarnos sus datos de la tarjeta</label>

 <div class="offstate-datos">
<label for="Sí"><input type="button" value="Continuar" name="Continuar"></div>
 <input type="submit" value="Enviar los datos"/>
</form>

 
De esta forma lo que esta contenido en offstate se activará al accionar switch.
 No obstante si queremos ofrecer un contrato o advertencia decente, necesitamos conocer
una cosa más.


Capítulo 9: Marcos en HTML


Si queremos dividir una página en dos, usaremos marcos, esto quiere decir que el navegador se dividirá en varias secciones y cada una mostrará un archivo diferente, puede sernos útil para aislar contenido fijo como una barra de vínculos. Veamos como crear marcos horizontales y verticales. Como se trata de dos o más páginas que directamente mostramos, la página actual posee datos, pero nada más, de modo que no tiene contenido, solo páginas, así que no necesitaremos el tag body, a no ser de que queramos decir que esta página usa marcos, en caso de que no se muestren:

 <FRAMESET ROWS="11%,89%">
<FRAME SRC="disc2_nav.htm" NAME="titulo">
<FRAMESET COLS="45%,55%">
<FRAME SRC="disc2_tocf.htm" NAME="contenido" target="Artículo">
<FRAME SRC="disc2_welc.htm" NAME="articulo">

</FRAMESET>
 Con rows creamos uno horizontal, y cols, vertical. Podemos usar atributos como width y height (en sustitución de los porcentajes de tamaño en el área de navegación. Podemos usar el atributo sin valor, noresize, para que el marco sea inamovible es decir, que no se pueda redimensionar por el usuario. También podemos usar marginheight y marginwidth, así como border color y todos los atributos que lógicamente, tienen que servir. Para texto alternativo usaremos:
 <NOFRAMES>
<BODY>
<P>Esta página Web utiliza marcos, pero su explorador no los admite.</P>
</BODY>
</NOFRAMES>

 Finalmente, si queremos un marco cuadrado en el medio de la pantalla, necesitamos un marco flotante, que es el que normalmente vemos con un cuadrado en medio de una pantalla que podemos desplazar hacia abajo con un scroll (la barra azul de la derecha para desplazar) y leer la licencia.
 <iframe src=licencia.htm>
 Importante, usaremos el atributo target=right, si queremos que un hipervínculo se abra en el marco de la derecha, adaptarlo a vuestras necesidades.


Capítulo 10: Lenguajes de programación. Otros formatos


Existen otros formatos como xml, que permite usar tags inventados, o XSLT, todos lenguajes Legs de marcado, un HTML puede contener subprogramas java y/o c++, pero lo más importante, es que puede contener Hojas de estilo en cascada. Esto se llama DHTML, HTML dinámico, esto quiere decir que una página Web puede contener capas y formatos prediseñados.
 Podemos aislar cada elemento en capas, por ejemplo, el fondo, el titular, el texto, la imagen, cada capa puede contener cualquier cosa que hayamos mencionado
excepto, obviamente, marcos. Se muestran superpuestas pero son capas distintas
 <div style="position: absolute; width: 100px; height: 100px; z-index: 1"
id="capa1">
CAPA 1</div>
 Además podemos ahorrarnos escribir los mismos formatos de fondo y color de letra, y todos los formatos, gracias a hojas de estilo en cascada, o CSS Cascade Shell Styles, o Cascading Style sheets. Podemos usar un bloc de notas y configurar unos formatos, a partir de ahí podemos importar la misma CSS a todas las páginas y adquirirán el formato establecido en la CSS sin tener que especificar en todas el mismo formato. <link rel="stylesheet" type="text/css"
href="file:///C:/Documents%20and%20Settings/ıx.css">
 Todo lo que podamos hacer con una CSS lo haremos para evitarnos trabajo en HTML, ya que normalmente, en todo el sitio web se usa el mismo formato para evitar confusión, lo explicaremos en el siguiente capítulo. Para diseñar una CSS abriremos un segundo bloc de notas o text, o cualquier herramienta de texto simple, pero realmente simple, no vale Writting, Writter, ni Word, bueno claro que vale, pero no no interesa usar esos sino bloc de notas.
 Un ejemplo sería
 Bgcolor {color:blue;}
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
p {text-align:center;color:red}
 En efecto, podemos definir también los colores mediante nombres, 00 00 FF es el azul (blue), pero siempre es mejor definir el color para más seguridad.
 Recordad que si o guardamos en el formato correcto, no funcionará absolutamente nada.


Capítulo 11: Creación de la página. Consejos

Es realmente importante lo que viene a continuación.
 - Guarde la página principal con el nombre index.htm, si no, el servidor no podrá publicar la Web, si lo que desea es que se abra otra página, puede usar el truco de redireccionar a otra página Web:
 <meta http-equiv="REFRESH" content="5; URL=http://xyz.com" >
 En 5 segundos la página irá a xyz.com
 - Cree siempre un diseño sencillo pero profesional, haga uso del contraste entre botones y fondo, por ejemplo, utilice las CSS para definir color de scroll, formularios y botones.
 - Reduzca el tamaño de la página para evitar que tarde.
 - Si una imagen ocupa demasiado, guarde una similar y de las mismas dimensiones que ocupe menos (por ejemplo en blanco y negro) y especifique <img lowsrc=blancoynegro.gif src=color.gif> de esta forma se cargará primero la blanco y negro mientras se carga la otra, así el visitante tendrá menos razones para abandonar la página.
 - Guarde todos los archivos para publicar en la carpeta o sub carpetas del sitio Web, lo que usted publicará será el sitio Web. Para lo cual deberá también actualizar los hipervínculos rotos al cambiar el nombre/ruta del archivo.
 - Muestre siempre lo que en teoría, anda buscando el visitante en la parte superior de la página, y la información adicional debajo, jamás permita el desplazamiento en ambas direcciones.
 - Indique siempre la página en que el visitante se encuentra, puede desactivar el hipervínculo de la página actual para que el visitante lo vea
 - Jamás confunda al visitante usando un formato distinto para cada página, de esta forma el visitante prensará que continúa en el sitio Web Use siempre vínculos de texto alternativos a las imágenes.
 - Use acceskey en los formularios para que al pulsar una letra se acceda a escribir al formulario, subraye la letra en el nombre.

Capítulo 12: Publicar una web en HTML


Para publicar un sitio, debe cargar todos los archivos de su sitio Web en un servidor, éste servidor mantendrá la Web online las 24horas del día, no obstante, si la página no recibe suficientes visitas, será borrada, de modo que asegúrese de ofrecer contenido de interés (como trucos de un videojuego) o noticias actuales, puede actualizar su sitio Web tantas veces como desee.
 El inconveniente llega si no está dispuesto a pagar al servidor, bien porque es usted menor o porque no se lo puede permitir o lo que sea... De modo que debe optar por un servidor gratuito, no obstante carece de muchas ventajas que sólo están en de pago, pero no debemos quejarnos, al menos es gratis. Si elegimos uno de pago, al menos que esté en nuestro idioma, sobre todo nos aseguraremos de abrir una cuenta bancaria con el dinero justo para dar el número de la cuenta, porque en Internet, mucha gente está viendo lo que haces en este mismo momento, millones de hackers pueden colarse en cualquier comunidad virtual, Messenger, nada es privado, así queasegúrese de que usa el dinero tan sólo para el servidor.
  Final, Una página Web completa
 Voy a mostrar a continuación una gran página Web completa con todo lo que hemos visto.
 
 
Código: You are not allowed to view links. Register or Login
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv=Refresh content=4 url=indexnew.htm>
<meta name=description content="Curso de html para quien no sabe nada en
absoluto">
<meta name=author content=Fer>
<meta name=keywords content="html,curso">
<title>Curso de HTML Básico</title>
<script type="text/javascript"
src="http://lineadecodigo.com/js/wforms/wforms.js"></script>
<style type="text/css">
.onstate-datos { display: block; }
.offstate-datos { display: none; }
</style>
</head>
<body background=leaves.jpg bgproperties=fixed text=#000000 link=#0000FF
vlink=#FF00FF alink=#FF0000>
<center>
<h1>Curso de HTML</h1><h2>Para principiantes</h2><h3>Muy
básico</h3><h4>Hecho por</h4><h5>Fernando García</h5><h6>Publicado en
MailXmail</h6>
<b>Negrita</b> <i>  cursiva</i><u>  Subrayado
</u><s>Tachado</s><b><i><u>  Negrita cursiva y
subrayado</u></i></b></center>Texto a la
izquierda <div align=right>Texto a la derecha</div>

2<sup>2</sup>Hemos usado superíndice   C<sub>2</sub>Hemos
usado subíndice
<font face=arial size=4>Esto es fuente arial grande</font>
<div style="position: absolute; width: 849px; height: 100px; z-index: 1; left: 10px;
top: 363px; background-color:#FFFFFF" id="capa1" >
 Este texto esta en una capa blanca</div>
<span style=background-color= #FFFF00>Este es un texto resaltado en
amarillo</span>

Ahora viene una línea horizontal grande
<pre>
 Este código se muestra igual por el tag pre
</pre>
<p>esto es un párrafo</p>
esto son caracteres especiales á > ñ à &copy.

 Esto son listas
<ul><li>Lista1</li><ul><li>Sublista</li><ul><li>subsublista</li></ul></ul></ul>
<ol type=A><li>lista numerada</li></ol>

 Esto es una tabla



 <table border="1" width="100%" id="table1" bgcolor=#FFFF99>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

 Esto es una imagen
<img lowsrc=arbol.gif src=ArbolHD.gif width=65 height=65 border=0 alt=arbol>
 Esto es un sonido <embed src=sound1.wma>

 Cuénteme que le parece mi curso
<!--formulario-->
<form method=post action=mailto:me@1.com?subject=5>
<fieldset><legend>Datos</legend>
<label for=name>Nombre</label><input type=text maxlength=50 size="28">

<label for=sx>Hombre</label><input type=radio selected>
<label for=sx>Mujer</label><input type=radio>

<label for=mail>mail</label><input type=text>

<label for=com>Comentario</label><textarea cols=20 rows=3></textarea>
<p><input type="submit" value="Enviar" name="B3"></p>
</fieldset>
</form>
<hr width=80% height=10 color=#CCCCCC noshade>
<a href=mailxmail.com>Enlace externo-externo</a>   
<a href=2.htm>Enlace externo-interno</a>   
<a href=#start>Enlace interno-interno</a>   
<a href=mailxmail.com#fin>Enlace interno externo</a>   
<a href=mailto:me@1.com?subject=5>Enlace de correo</a>   
<a href=program.rar>Enlace de descarga</a>
</body>
</html>

 
« Última modificación: Abril 27, 2010, 01:08:46 am por dyb »

Tags:
Tags:

 


SMF 2.0.11 | SMF © 2015, Simple Machines
Paginas Afiliadas
Twitter - FaceBook - Daraxblog
Designed by Smf Personal