HTML Principiantes Completo

mailxmail - Cursos para compartir lo que sabes
HTML para principiantes

Autor: Javier Garralaga Garca
Presentacin del curso

HTML para principiantes, aprende a hacer tus propias pginas web. Programar en un lenguaje como es HTML puede ser fcil 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, adems se basa en etiquetas.
1. HTML para principiantes. Introduccin

Bienvenido al curso de HTML para el que no sabe absolutamente nada, espero que este curso se haga lo ms ameno posible para que aprendamos a programar el lenguaje mssencillo: HTML, Que significa HiperText Markup Language, por cierto debo mencionar que deberis saber algo de ingls para deducir las funciones desconocidas ya que el lenguaje est 100% en ingls. Comencemos con una pequea introduccin. Cmo 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 accin concreta y los de parte del documento, uno de accin concreta no hace falta nada ms que escribirlo, ya que solo realiza una accin y despus deja de actuar, sin embargo la mayora 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 smbolo de cierre, que es la barra inclinada, de modo que un ejemplo sera <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 vlido, ya hemos dicho que el lenguaje es ingls y adems, son abreviaturas. Adems un tag puede contener una serie de complementos que especifican la funcin 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 accin 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 pgina.
2. Estructura de una pgina con HTML

Comencemos a crear nuestra pgina, abriremos un bloc de notas en windows, un Text en FS, o cualquier otra aplicacin de texto simple en un sistema operativo. Existen programas que escriben el cdigo por nosotros mientras diseamos la Web igual que una presentacin, adems dan opciones a elegir de tags, atributos y valores, y lo pintan del mismo color que yo en el captulo 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 pgina de la siguiente forma, no deberis empezar hasta que terminemos el curso, por supuesto, pero podis apuntar, subrayar etc... .todo lo que necesitis, lo primero planificaremos cmo ser la pgina, doy por hecho que ya lo sabis, de modo que empezaremos con el tag: <!Doctype>, este tag no es en absoluto necesario hoy en da, 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" "http://www.w3.org/TR/html4/loose.dtd"> Pero lo podemos omitir sin ninguna clase de problema, de hecho, no suelo usarlo con frecuencia. A Partir de aqu la pgina 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 pgina y los cdigos de activacin de sub. Controles. El tag <meta> solo sirve para contener atributos como autor de la pgina, descripcin y palabras clave para losbuscadores....etc. por tanto hemos de considerarlo importante si la vamos a publicar. Veamos un ejemplo <!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: <Meta name=descripcin content="curso para gente que no conozca absolutamente nada el html"></meta> Hemos de usar un tag meta para cada cosa como la descripcin, autor, palabras clave y dems. Por cierto podemos tambin cerrar un tag como meta (que no afecte a un texto) de lasiguiente forma <meta ~ /> pero no es demasiado recomendable, solo por seguridad. Ms importante es todava el ttulo de la pgina, 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 extensin html y lo abrimos con un navegador, veremos que hemos creado una pgina en blanco, pero con nombre en la barra de navegacin, y las pestaas. Pero para eso ya esta about:blank, nosotros queremos crear nuestra pgina Web, y todo lo que escribamos dentro de <body> se mostrar en la Web, en los siguientes captulos veremos los formatos y los objetos que podemos usar en body.
3. Body en HTML
Todo el texto que escribamos entre body, se mostrar, pero ser una pgina realmente sosa, antes de empezar habis de conocer que cuando mezclas rojo y verde sale marrn, porque es tinta, sin embargo la luz funciona de otra forma:
De hecho si colocas una gota de agua sobre el monitor o cualquier pantalla ver claramente los tres colores por pxel, ya que la gota simula una lente divergente. Por tanto la tinta se denomina Cian, Magenta, Amarillo y Negro, en ingls y abreviado CMYB aunque se le llama CMYK, y el Rojo verde y azul, RGB. En RGB se pueden lograr una infinidad de colores ms, 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, segn compuserve son solo los que contienen 0, 3, 6,9, C o F. Para definir un color en html usaremos una almohadilla y dos dgitos 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...
Un ejemplo sera el color FFFFFF que sera el blanco, es un color seguro para la Web porque tiene los dgitos 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 algn atributo al fundamental body. <body bgcolor=#0000FF text=#FFFF00> bgcolor significa background color, es decir, color de fondo de la pgina, luego podemos escribir el atributo text con otro color. Recordad que un buen diseador Web permite que su pgina sea legible, intentad siempre que haya mucho contraste entre la letra y el fondo para permitir que se lea sin problema. Podemos tambin 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 slo puede usar formato Gif o JPEG, adems, si la imagen no esten la misma carpeta que la pgina (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 tamao. No obstante existe el tag H que sirve para los titulares: <h1>Muy grande, y <h6> muy pequeo, los nmeros H2>h5 son obviamente progresin entre ambos. Con todos los atributos de head. Contina escribiendo: <body bgcolor=#0000FF text=#FFFF00 basefont=arial> <h1>Esto es un titular</h1><h3>Esto un Subttulo</h3> Esto es una lnea de texto </body> </html> Al ejecutarlo veremos una pgina muy simple, pero, una pgina, 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>superndice <sub>subndice Todas estas se cierran con el cierre de tags </~>
4. Formato en HTML
Para alinear una parte del texto tenemos que delimitar una parte del texto, para ello usaremos el tag de divisin con el atributo de alineacin <div align=right> para centrar podemos usar dirctamente <center>. Si queremos resaltar el texto usaremos el tag span y el color: <span style="background-color= #xxXXxx>~</span> Para establecer un tamao de fuente elegiremos un nmero del 1 al 7, o especificaremos el nmero de pxeles (Xpx) Si queremos aadir 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 algn espacio. <span style="text-decoration: blink; background-color: #00FF00">h</span> Para configurar el color de los hipervnculos usaremos en el tag body los atributos <body link=#0000FF vlink=#990099 alink=#FF0000> Link es el hipervnculo Vlink el visitado Alink el activo Para separar prrafos usaremos los tags <p></p> que engloban un prrafo, como alternativa podemos usar <br> (tag sin cierre) que significa salto de lnea, y <hr> que significa lnea horizontal, tambin sin cierre, la lnea horizontal puede recibir muchos atributos, como la altura (height) anchura (width) etc... Muy importante es que tenemos que acostumbrarnos a hacer el cdigo legible para todas las codificaciones, hay caracteres especiales como las tildes, agudas, graves, simples, cejillas y diresis que no todos los alfabetos reconocen, para ello en lugar de elegir un carcter especial usaremos el cdigo con &; la a con tilde aguda, es á Ejemplo: Párrafo (prrafo) la &copy la &ntilde. Un cdigo lo podemos escribir todo seguido pero para estructurarlo de forma que sea fcil modificar algo, lo hacemos en lneas, si queremos que el texto sea literalmente como en el cdigo, usaremos los tags <pre></pre>
5. Listas en HTML
Para hacer una lista de numeracin o vietas, seguiremos los siguientes pasos El tag <ul> aadir vietas, 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> Tambin 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 tambin una lista numerada, con lista ordenada <ol> <li></li> </ol> Podemos personalizar la lista con numeros, letras (A) o nmeros romanos (I) minsculas o maysculas <ol type=A> Tambin podemos hacer lista de definiciones <dl> Mens <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 tambin especificar el color (bordercolor=#...) o los bordes con sombras, usaremos un color de luz y otro de sombra (bordercolorlight=#... y bordercolordark...) adems podemos aadir un fondo (bgcolor=#) o una imagen(background=x.jpg) Con tr especificamos que a continuacin 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 dems en cuanto a altura, y la anchura de la fila que contina es la misma que la de arriba. &nbsp significa espacio, ya que una celda no puede estar vaca. Si queremos combinar dos celdas usaremos el atributo rowspan=2 (si son dos casillas) y colspan si se trata de columnas. Para dividir slo hace falta aadir ms td.

A una celda la podemos tratar por igual, podemos darle color de bordes, fondo etc... En una tabla podemos aadir no solo texto, sino tambin cualquier objeto. Adems podemos especificar los mrgenes 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>
10
6. Hipervnculos en HTML
Una Web hurfana es una mala Web, una pgina Web debe contener vnculos que lleven a otras pginas Web. Veamos como. Crear enlaces externos-externos Usaremos el tag a, de anchor, que es un vnculo con los atributos href (Ruta) y alguno ms que podemos aadir. Ejemplo: <a href=http://mailxmail.com>mailxmail</a> Crear enlaces externos-internos Si queremos vincular a una pgina de nuestro sitio Web no har falta especificar la ruta, sino tan slo el archivo, pero recuerda que si es renombrado, habr que modificar el vnculo. Enlaces internos-internos Si queremos vincular a una parte de la pgina como por ejemplo, el principio, definiremos un marcador: <a name=principio> y a continuacin el hipervnculo <a href=#Principio></a> Enlaces Internos-externos Podemos hacer que vaya el hipervnculo a una pgina 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 hipervnculo permita descargar un archivo simplemente lo haremos vincular a un fichero que no abra el navegador. Para hacer un efecto de conversin de un hipervnculo al posar el ratn (rollover) usaremos el codigo en head: <style fprolloverstyle>A:hover {color: #FF0000; text-decoration: line-through; font-weight: bold} Que es una funcin de javaScript
11
mailxmail - Cursos para compartir lo que sabes 7. Imgenes 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 ratn y cuando no se pueda cargar. Podemos aadir tambin vspace, hspace, los mrgenes etc... Si queremos que esta imagen sea adems, animada, podemos usar dynsrc para especificar un vdeo 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 aadiremos los mismos tags que a img. Veamos un ejemplo completo: A continuacin muestro el vdeo</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:
Para insertar algn tipo de subprograma, adems de escribir el propio cdigo con <script> podemos insertarlo dirctamente mediante: <applet src=prog1.vbe> Esto no es todo, podemos crear una imagen que pueda contener un hipervnculo <img href=~> Y tambin 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 crculo, el radio, y las coordenadas del centro, as mismo, el rectngulo slo necesita las de la esquina superior izquierda e inferior derecha, y un polgono las de cada vrtice, para ello se indican los pxeles en horizontal y en vertical. Podemos agregar tambin 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 estructuracin del texto, y para poder trabajar ms cmodamente al buscar un tag, es recomendable, sobre todo si eres principiante, llenar hasta rebosar todo de comentarios, un comentario es una gua que no tiene repercusin alguna en la pgina pero nos sirve para orientarnos en el cdigo, ejemplo: ...</h1>  <img border="0" id="img1" src="file:///C:/Documents%20and%20Settings/F/Configuracin%20local/Archivos%20t emporales%20de%20Internet/FrontPageTempDir/button4.jpg" height="20" width="100" alt="Texto de botn"
12

onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'file:///C:/Documents%20and%20S ettings/F/Configuracin%20local/Archivos%20temporales%20de%20Internet/FrontPageTempDir/button5.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'file:///C:/Documents%20and%20Set tings/F/Configuracin%20local/Archivos%20temporales%20de%20Internet/FrontPage TempDir/button4.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'file:///C:/Documents%20and%20 Settings/F/Configuracin%20local/Archivos%20temporales%20de%20Internet/FrontPageTempDir/button6.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'file:///C:/Documents%20and%20Sett ings/F/Configuracin%20local/Archivos%20temporales%20de%20Internet/FrontPageT empDir/button5.jpg')" fp-style="fp-btn: Simple Block 1" fp-title="Texto de botn"> Es til realmente sin embargo abusar de ellos conlleva muchas lneas de cdigo y todo afecta al tamao de la pgina, no solo nos interesa una buena Web sino que haya u entorno sencillo y agradable y que adems tarde realmente poco en cargarse. Para escribir un comentario abriremos
13
8. Formularios en HTML
Si tu pgina es buena, es obligatorio que tenga ms de un formulario: Crear un formulario de bsqueda: Para buscar entre pginas Web, conviene tener un buscador, de artculos por ejemplo. Usaremos el tag form para crear un formulario e input para los diferentes controles, para un formulario de bsqueda usaremos el siguiente cdigo.  De esta forma tenemos nuestro formulario de bsqueda, 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 verificacin, 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 (mximo numero de caracteres, readonly, solo lectura, tambin 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 continuacin de la imagen muestro el cdigo para crear el Formulario
14
<form method="POST" enctype="multipart/form-data" action="--WEBBOTSELF--">  <fieldset style="padding: 2"> <legend>Datos personales</legend> Nombre<input type="text" name="T1" size="20"><br> Contrasea<input type="text" name="T2" size="20"><br> Envenos un archivo<input type="file" name="F1" size="20"><br> Mayor de 18 aos<input type="checkbox" name="C1" value="ON"><br> Hombre<input type="radio" value="V1" checked name="R1"><br> Mujer<input type="radio" name="R1" value="V2"><br> <select size="1" name="D1"> <option>1</option> <option>2</option> </select><br> Comentario<textarea rows="2" name="S1" cols="20"></textarea></fieldset><br> <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 ms lejos, podemos por ejemplo, crear una pgina con licencia, que al no aceptarla, no la podamos ver, para ello usaremos un script que ocultar el formulario mientras que la casilla de verificacin est inactiva. En primer lugar antes de head configuraremos el script, despus,, en el formulario configuraremos el"interruptor" y los datos que se ocultan o muestran: <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>
15

<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><br> <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 ms.
16
9. Marcos en HTML
Si queremos dividir una pgina 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 vnculos. Veamos como crear marcos horizontales y verticales. Como se trata de dos o ms pginas que directamente mostramos, la pgina actual posee datos, pero nada ms, de modo que no tiene contenido, solo pginas, as que no necesitaremos el tag body, a no ser de que queramos decir que esta pgina 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="Artculo"> <FRAME SRC="disc2_welc.htm" NAME="articulo"> </FRAMESET> Con rows creamos uno horizontal, y cols, vertical. Podemos usar atributos como width y height (en sustitucin de los porcentajes de tamao en el rea de navegacin. Podemos usar el atributo sin valor, noresize, para que el marco sea inamovible es decir, que no se pueda redimensionar por el usuario. Tambin podemos usar marginheight y marginwidth, as como border color y todos los atributos que lgicamente, tienen que servir. Para texto alternativo usaremos: <NOFRAMES> <BODY> <P>Esta pgina 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 hipervnculo se abra en el marco de la derecha, adaptarlo a vuestras necesidades.
17
10. Lenguajes de programacin. 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 ms importante, es que puede contener Hojas de estilo en cascada. Esto se llama DHTML, HTML dinmico, esto quiere decir que una pgina Web puede contener capas y formatos prediseados. 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> Adems 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 pginas y adquirirn 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 confusin, lo explicaremos en el siguiente captulo. Para disear 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 sera Bgcolor {color:blue;} h1 {color: red;} h2 {color: red;} h3 {color: red;} p {text-align:center;color:red} En efecto, podemos definir tambin los colores mediante nombres, 00 00 FF es el azul (blue), pero siempre es mejor definir el color para ms seguridad. Recordad que si o guardamos en el formato correcto, no funcionar absolutamente nada.
18
11. Creacin de la pgina. Consejos

Es realmente importante lo que viene a continuacin. - Guarde la pgina principal con el nombre index.htm, si no, el servidor no podr publicar la Web, si lo que desea es que se abra otra pgina, puede usar el truco de redireccionar a otra pgina Web: <meta http-equiv="REFRESH" content="5; URL=http://xyz.com" > En 5 segundos la pgina ir a xyz.com - Cree siempre un diseo 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 tamao de la pgina 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 pgina. - 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 tambin actualizar los hipervnculos rotos al cambiar el nombre/ruta del archivo. - Muestre siempre lo que en teora, anda buscando el visitante en la parte superior de la pgina, y la informacin adicional debajo, jams permita el desplazamiento en ambas direcciones. - Indique siempre la pgina en que el visitante se encuentra, puede desactivar el hipervnculo de la pgina actual para que el visitante lo vea - Jams confunda al visitante usando un formato distinto para cada pgina, de esta forma el visitante prensar que contina en el sitio Web Use siempre vnculos de texto alternativos a las imgenes. - Use acceskey en los formularios para que al pulsar una letra se acceda a escribir al formulario, subraye la letra en el nombre.
19
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 da, no obstante, si la pgina no recibe suficientes visitas, ser borrada, de modo que asegrese de ofrecer contenido de inters (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 slo estn 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 nmero 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 queasegrese de que usa el dinero tan slo para el servidor. Final, Una pgina Web completa Voy a mostrar a continuacin una gran pgina Web completa con todo lo que hemos visto. <!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 Bsico</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 bsico</h3><h4>Hecho por</h4><h5>Fernando Garca</h5><h6>Publicado en MailXmail</h6> <b>Negrita</b>&nbsp<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> <br>2<sup>2</sup>Hemos usado superndice C<sub>2</sub>Hemos
20

usado subndice <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> <br>Ahora viene una lnea horizontal grande <pre> Este cdigo se muestra igual por el tag pre </pre> <p>esto es un párrafo</p> esto son caracteres especiales á > ñ à &copy. <br> 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><br> Esto es una tabla <br> <br> <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><br> 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><br> Cunteme que le parece mi curso  <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"><br> <label for=sx>Hombre</label><input type=radio selected> <label for=sx>Mujer</label><input type=radio><br> <label for=mail>mail</label><input type=text><br> <label for=com>Comentario</label><textarea cols=20 rows=3></textarea> <p><input type="submit" value="Enviar" name="B3"></p> </fieldset>
21

</form> <hr width=80% height=10 color=#CCCCCC noshade> <a href=mailxmail.com>Enlace externo-externo</a>&nbsp&nbsp&nbsp <a href=2.htm>Enlace externo-interno</a>&nbsp&nbsp&nbsp <a href=#start>Enlace interno-interno</a>&nbsp&nbsp&nbsp <a href=mailxmail.com#fin>Enlace interno externo</a>&nbsp&nbsp&nbsp <a href=mailto:me@1.com?subject=5>Enlace de correo</a>&nbsp&nbsp&nbsp <a href=program.rar>Enlace de descarga</a> </body> </html>
22

HTML Principiantes Completo

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Principiantes Completo

Enviado por

Direitos autorais:

Formatos disponíveis

mailxmail - Cursos para compartir lo que sabes

HTML para principiantes

mailxmail - Cursos para compartir lo que sabes

Presentacin del curso

mailxmail - Cursos para compartir lo que sabes

1. HTML para principiantes. Introduccin

mailxmail - Cursos para compartir lo que sabes

2. Estructura de una pgina con HTML

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

10. Lenguajes de programacin. Otros formatos

mailxmail - Cursos para compartir lo que sabes

11. Creacin de la pgina. Consejos

mailxmail - Cursos para compartir lo que sabes

12. Publicar una web en HTML

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

Você também pode gostar