Front Page, Dreamweaver, o Macromedia Flash MX
Quería consultarte acerca de cual programa me conviene utilizar para empezar desde cero a hacer una página web (no tengo conocimientos en lenguajes ni cosa por el estilo) es decir que soy un principiante.
4 Respuestas
Respuesta de jrosales
1
Bueno como editor de HTML te recomiendo ampliamente el dreamweaver es robusto, no te deja código basura. Para mi gusto es uno de los mejores, por otro lado puedes usar uno más sencillo que no tiene tanta funcionalidad como el dreamweaver pero que te saca de problemas y es el editplus(www.editplus.com)
Por otro lado necesitas aterrizar que tipo de programación vas a realizar, si solo son páginas que presenten contenido, o vas a manejar transacciones(conexiones a base de datos), si es así puedes utilizar java(para mi gusto uno de los mejores para web) PHP, ASP etc en la red encuentras muchos ejemplos y tips de como utilizar estas tecnologías.
Por otro lado necesitas aterrizar que tipo de programación vas a realizar, si solo son páginas que presenten contenido, o vas a manejar transacciones(conexiones a base de datos), si es así puedes utilizar java(para mi gusto uno de los mejores para web) PHP, ASP etc en la red encuentras muchos ejemplos y tips de como utilizar estas tecnologías.
Respuesta de Jorge Vila
1
Gracias, ¿pero no me podrías decir una página en castellano donde haya tutoriales?
Claro!;
Visita www.desarrolloweb.com
Ahí encontrarás lo que necesites.
Visita www.desarrolloweb.com
Ahí encontrarás lo que necesites.
Respuesta de monodrack
1
Espero tus comentarios y/o calificación. Mis comentarios son:
[Front Page] Es un programa creado para elaborar sitios web FIJOS o ESTÁTICOS. El problema de Front Page es que genera muchas librerías y scripts sobre los cuales es difícil trabajar (cuando te relacionas con el código), incluso, es difícil aprender HTML desde ese programa. Otro problema es que para poder tener un sitio trabajado en Front Page, debes contar con un servidor de alojamiento que Tenga instaladas las extensiones FRONT PAGE, ya que de otro modo, tu web no se visualizará o no se verá correctamente.
[Macromedia Dreamweaver] Es un programa creado para elaborar sitios web FIJOS o ESTÁTICOS. Es muy sencillo, te ayuda a trabajar sobre HTML y sobre el diseño, incluye un catalogo muy extenso de botones, scripts trabajados y funciones que puedes aplicar a tu web sin problema, aparte de que te puedes descargar nuevas funciones, catálogos y extensiones para TU PROGRAMA, no para tu web, de modo que puedes subir páginas de Dreamweaver a cualquier servidor. Te permite integrar elementos que darán a tu web un aspecto mucho más profesional.
[Macromedia Flash] Es un programa creado para elaborar animaciones o sitios DINÁMICOS, que pueden integrar mucho movimiento y desde el punto de vista del manejo de códigos para su uso, es mucho más sencillo de trabajar cuando no sabes JavaScript.
Dependiendo del tipo de sitio que desees generar, será el programa que se ajuste más a tus necesidades reales. No recomiendo front page.
Un ejemplo de un sitio Fijo: http://www.skynetgs.com/
Un ejemplo de un sitio Dinámico PRESIONA "VER SITIO DINÁMICO A PANTALLA COMPLETA" para ver el sitio dinámico.
Saludos!
Te envío aparte, aquí debajo un pequeño manualito de HTML que alguna vez preparé ya que soy miembro experto dentro del sitio todoexpertos.com:
(Esta información puede completar la pregunta acerca de páginas web).
-------------------------
Hola a todos, en este curso haré una pequeña introducción al HTML, (Hyper Text Markup Language), qué en una explicación bien simple: es un lenguaje de construcción web, no de programación web, porque con HTML tu construyes la estructura de tu página (tablas, columnas, etc...) para que se vea bien y para poder poner contenido en ella, pero no puedes programarla para que haga cosas, como por ejemplo insertar datos en una BD(base de datos) o en .txt o cosas por el estilo. Pero no por esto es menos importante que otros lenguajes como PHP o ASP, sino que muy funcional para trabajar en conjunto con éstos.
Resumiendo, HTML es un lenguaje de construcción web en cuanto a estructura y apariencia.
Ahora veamos como empezamos a construir nuestra web page
//////
Hay que saber que en HTML se usan tags o etiquetas, que las puedes reconocer porque van dentro de <>, como <html>, <head>, <br>, etc. Estas tags se inician y se terminan igual, con la diferencia de que se lleva un '/' al
Interior del éste último ( '<html>' --> '</html>' )
PD: sólo las tags que lleven contenido dentro se deben cerrar, más adelante te darás cuenta ;) ///// Ahora si empezemos...
Para iniciar un documento HTML debemos escribir la etiqueta '<html>' (sin las comillas), y para finalizar escribimos '</html>'. Dentro de estas etiquetas va a ir toda la 'programación' HTML de la web, osea toda la web.
Ahora veamos las distintas partes que forman un documento HTML.
*****************
Cabecera (head)
*****************
Las cabeceras son las etiquetas <head></head> y dentro de éstas van tags como el titulo <title></title> y las
Metatags <metatags> (que se utilizan para definir palabras claves de nuestra web y se utilizan para los
buscadores). Veamos un ejemplo de como se construye una cabecera.
+++++++++++++++++
<html>
<head>
<meta name="Description" content="descripción de mi web">
<title>Hola mundo</title>
</head>
</html>
+++++++++++++++++
Bueno, aquí vemos que en la primera línea iniciamos el documento HTML. En la segunda línea iniciamos la cabecera y dentro de ella, en la tercera línea, encontramos un metatags con la descripción de nuestra web. En la cuarta
Línea vemos el inicio y fin de la tag 'title', y dentro de ésta va el titulo que quieras que se vea en el explorador. Y por último en la quinta y sexta línea vemos el fin de 'head' y 'html' respectivamente.
****************
Cuerpo (body)
****************
En el cuerpo de la web van todas las cosas, las tablas, el texto, las imágenes, etc.. La etiqueta body se inicia <body> y se termina </body>. El tag <body> tiene algunas propiedades:
//bgcolor="#000000"
Esto define el color de fondo del documento HTML, en este caso negro.
** Algunos colores en hexadecimal:
#000000 <-- negro
#ff0000 <-- rojo
#00ff00 <-- verde
#0000ff <-- azul
#ffffff <-- blanco
Para lograr nuevos colores solo hay que ir cambiando la cantidad de 0-9 y a-f
ej: #0077bb <-- ese es un color nuevo
//background="ruta/imagen.gif"
Esto define si queremos usar una imagen de fondo, especificando la ruta.
** Si usa esta propiedad, no se usa 'bgcolor'
//text="#ffffff"
Esto define el color del texto de nuestro documento HTML
//link="#ffffff"
Esto define el color de los enlaces en nuestro documento HTML
//vlink="#ffffff"
Esto define el color de los enlaces vistos en nuestro documento HTML
////
Las propiedades se aplican de la siguiente manera:
<body bgcolor="#000000" text="#ffffff" link="#ffffff" vlink="#ffffff">
Éste es el estándar para utilizar las propiedades en todos los tags.
///////
Ahora, dentro de 'body', como ya dije antes, va el contenido de la web, como tablas, texto, etc...
:: Veamos las tablas ::
Al igual que los demás tags, se inicia '<table>' y se finaliza '</table>'. Tiene las siguientes propiedades:
//width="250" ó width="50%"
Width se utiliza para especificar el largo de la tabla, que puede ser en pixeles (se especifica en cantidad), o para hacer tablas elásticas se especifica en '%' (por ciento). Si especificamos en 50%, la tabla ocupará la mitad de la pantalla en cualquier resolución, así se adapta a cualquier usuario.
//height="250" ó height="50%"
Bueno, lo mismo que la propiedad anterior, pero esta vez se trata del alto.
PD:
Largo
________________
| |
| | alto
|_______________|
Para no provocar confusiones :)
//bgcolor="#ffffff"
Al igual que con 'body', esta propiedad especifíca el color de fondo.
//background="ruta/imagen.gif"
Especifíca si queremos que la tabla tenga una imagen de fondo en vez de color.
//cellspacing="10"
Indica el espacio que separa las columnas y filas dentro de una tabla
//cellpadding="10"
Indica el espacio que separa el borde y contenido de las columnas y filas dentro de una tabla
//align="left"
Indica como se alineará el contenido dentro de la tabla. Puede ser left (a la izquierda), right (a la derecha) y center (al centro)
//valign="top"
Indica como se alineará el contenido dentro de la tabla. Puede ser top (arriba), middle (en el medio) y bottom
(Abajo)
//border="1"
Indica de que tamaño será el borde de nuestra tabla, si colocamos '0' la tabla no tendrá borde
//bordercolor="#000000"
Indica el color del borde de la tabla
** Dentro de la tabla van las columnas y filas, <td> y <tr> respectivamente.
____________
| | |
|_____|______|
| | | __ Esto es una fila (van hacia abajo)
|_____|______|
|
Esto es una columna (van hacia el lado)
Veamos como podríamos hacer una tabla:
+++++++++++++++++++++++++++
<table width="100" height="100" border="1" cellspacing="0" cellpadding="0" bgcolor="#ffffff"> <tr> <td>hola <td>hola <tr> <td>chao <td>chao </table>
+++++++++++++++++++++++++++
Esto quedaría así:
________________
| | |
| hola | hola |
|_______|________|
| | |
| chao | chao |
|_______|________|
Espero no te haya quedado ninguna duda con las tablas. ;)
:: Veamos las imágenes ::
Cabe recalcar que el tag <img> se inicia pero no se termina, ya que la imagen no queda abierta si no la cerramos.
El tag <img> tiene las siguientes propiedades:
//src="ruta/imagen.gif"
Con esto especificamos la ruta de la imagen
//border="0"
Define si la imagen tiene borde o no. Esto es útil cuando la imagen es un enlace y por defecto tiene un borde, pues entonces ponemos border="0" y queda sin borde pero sigue siendo un enlace.
//width="100"
Indica el ancho de la imagen (se utiliza si queremos aumentar o disminuir el tamaño de la imagen). Si no se hace referencia a 'width', la imagen tiene su ancho por defecto.
//height="100"
Igual que la propiedad anterior, pero con el alto.
//alt="la imagen no se puede visualizar"
En 'alt' especificamos el texto que se mostrará en el navegador si es que la imagen no se puede visualizar.
//hspace="5"
Indica el espacio horizontal entre la imagen y el texto que le siga
//vspace="5"
Indica el espacio vertical entre la imagen y el texto que le siga
Veamos un ejemplo de como colocaríamos una imagen:
+++++++++++++++++
<img src="imagenes/archivo.gif" alt="Archivo" width="80" height="80" border="0">
+++++++++++++++++
Eso ;)
//////
Ahora veremos los tags modificadores de texto, como negrita, cursiva, etc...
//<b></b>
El texto que vaya dentro de estos tags estará en negrita.
//<i></i>
El texto que vaya dentro de estos tags estará en cursiva.
//<u></u>
El texto que vaya dentro de estos tags estará subrayado.
//<h1></h1> // <h2></h2> // etc....
Los tags <h1></h1> hacia adelante modifican el tamaño del texto, siendo <h1> lo más grande.
//<font></font>
Este tag modifica el texto. Sus propiedades son:
//size="1"
Tamaño en puntos.
//face="Verdana"
Fuente con la que se visualizará el texto, en este caso 'Verdana'.
//color="#ffffff"
Define el color del texto que irá dentro de <font></font>
Veamos un ejemplo de estos modificadores:
++++++++++++++++++++++++
<b>Este texto está en negrita</b>
<i>Este texto está en cursiva</i>
<u>Este texto está subrayado</u>
<h1>Este texto es grande</h1>
<font face="Verdana" color="#ffffff">Este es blanco, está ecrito con Verdana</b>
++++++++++++++++++++++++
//<br>
Este tag nos indica un salto de línea. No hay que cerrarlo.
ej:
+++++++++++++
hola<br>chao
+++++++++++++
Nos quedaría:
++++++++++++
hola
chao
+++++++++++++
//<p>
Nos indica un salto de párrafo, que es equivalente a dos <br>. Tampoco se cierra.
ej:
++++++++++++++
hola<p>chao
++++++++++++++
Nos quedaría:
++++++++++++++
Hola
Chao
++++++++++++++
/////
Enlaces...
El tag de enlace '<a></a>' convierte en un enlace al texto que esté dentro de él. Tiene las siguientes
Propiedades:
//href="documento.htm" ó href="http://www.direccion.com"
Indica a la dirección que el texto estará vinculado, que puede ser un docuento .html, .php, .zip, etc... o una dirección en internet.
//target="_blank"
Indica cuál donde se abrirá nuestro enlace. Puede ser '_blank' para abrir el enlace en una ventana nueva y '_self' para abrir el enlace en la misma ventana.
El tag enlace también tiene otra utilidad, que es la de poder construir tu web en secciones. Por ej:
+++++++++++++++++++++++++++++++
<html>
<a name="arriba">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#arriba">Ir arriba</a>
</html>
++++++++++++++++++++++++++++++++
En este código puedes observar que puse '<a name="arriba">', y con esto indico que la sección donde puse eso se llama arriba. Para acceder a esta sección tengo que hacer un enlace cuyo destino sea '#arriba'. Esto sirve cuando una página es muy larga y tiene varios documentos adentro, entonces al final de cada documento puedes colocar un 'Ir Arriba'.
/////
Otro modificadores.......
//<center></center>
Se utiliza para centrar elementos dentro del documento HTML
//<hr>
'HR' es una línea horizontal que atraviesa el documento. Sus propiedades
son:
//width="200" ó width="50%"
Nos indica el largo de la línea, puede ser en puntos o 'por ciento'
(%) (50% ocupa la mitad del documento)
//color="#ffffff"
Nos indica el color de la línea
//size="20"
Indica el grosor de la línea en pixeles
//align="left"
Indica la alineación de la línea. Puede ser left (izquierda), right
(derecha) o center (centrada)
//noshade
Indica que la línea no tendrá efecto de sombra, para que no se vea en '3D'
//<pre></pre>
Este tag nos permite modificar la escritura del texto. Todo lo que escribamos dentro de estos tags se verá tal cual en el explorador (en cuanto a posición).
Ej: si yo escribo:
++++++++++++++++++++++++
<pre>
hola
chao
que tal
</pre>
++++++++++++++++++++++++
Esto se verá:
+++++++++++++++++++++++
hola
chao
que tal
+++++++++++++++++++++++
//<ul></ul>
Estos tags nos sirven para hacer listas de elementos. Sus propiedades
son:
//start="3"
Indica en que elemento empezará la lista. Si no se indica se empezará por el primer elemento.
//type="disk"
Nos indica el tipo de lista que queremos usar. Puede ser 'disk' para usar discos, 'circle' para usar discos con puro contorno, sin relleno y 'square' para usar cuadrados
El tag <ul> inicia la lista, pero para definir cada elemento de la lista que irá dentro debemos usar el tag <li> (<li> no se cierra).
Veamos un ejemplo:
+++++++++++++++++++++++++++
Lista de elementos:<br>
<ul tpye="disk">
<li>elemento1
<li>elemento2
<li>elemento3
<li>etc
</ul>
+++++++++++++++++++++++++++
Esto nos quedaría así (los '*' simulan los discos)
++++++++++++++++++++++++++++
Lista de elementos:
* elemento1
* elemento2
* elemento3
* etc
++++++++++++++++++++++++++++
//También tenemos el tag <ol>, que también es una lista de elementos pero con diferentes tipos. Estos tipos pueden ser '1' para ordenar los elementos con números (1,2,3,4), 'a' para ordenar los elementos con letras (a, b, c, d), 'A' para ordenar los elementos con letras mayúsculas (A, B, C, D), 'i' para ordenar los elementos con números romanos en minúscula (i, ii, iii, iv), 'I' para ordenar los elementos con números romanos en mayúscula (I, II, III, IV).
Ej:
++++++++++++++++++++++++++++++
Lista de elementos:<br>
<ol tpye="1">
<li>elemento1
<li>elemento2
<li>elemento3
<li>etc
</ol>
+++++++++++++++++++++++++++++++
Esto se vería así:
+++++++++++++++++++++++++++++
Lista de elementos:
1. Elemento1
2. Elemento2
3. Elemento3
4. Etc
+++++++++++++++++++++++++++++
//////
Formularios
Ahora veremos los formularios, que nos serán de mucha utilidad junto con PHP y MySQL.
Para iniciar el formulario escribimos <form> y para finalizarlo </form>. Sus propiedades son:
//method="post"
Indica si los datos del formulario se traspasarán a través del mismo formulario (post) o a través de la URL
(Get)
//action="archivo.php"
Indica cuál será el archivo que procesará el formulario cuando demos click en el botón 'Enviar'
Ahora, dentro del formulario tenemos más elementos. Estos pueden ser:
//<input>
El tag input es un objeto y no se cierra. Son las típicas cajas de texto donde tienes que poner tu nombre o e-mail. Sus propiedades son:
//type="text"
Indica el tipo del que será la <input>. Puede ser 'text' para que en ella se introduzca texto común, 'password' para que se introduzcan contraseñas (el texto que escribas en ella se verá con asteriscos), 'radio' para que las <input> sean casillas (se puede marcar solo una) y 'checkbox' para que las <input> sean casillas pero se pueden marcar más de una.
//size="50"
Indica el tamaño de la <input>. Aplicable a 'text' y 'password'.
//maxlenght="50"
Indica el máximo de caractéres que se podrá introducir. Aplicable a 'text' y 'password'
//name="campo"
Indica el nombre de la input, para luego llamarla en el procesamiento del formulario.
//value="hola"
Es el valor por defecto que tendrá la <input> ("" para que esté vacía). Aplicable a todas.
//checked
Indica que la input estará seleccionada, Aplicable a checkbox
Veamos un ejemplo:
+++++++++++++++++++++++++
Introduce tu nombre:<p>
<input type="text" name="nombre" value="" size="50"><p> Introduce tu contraseña:<p> <input type="password" name="contrasena" value="" size="50"><p> ¿Qué te interesa?<p> <input type="checkbox" value="informatica">Informática en general<br> <input type="checkbox" value="programacion">Programación<br>
<input type="checkbox" value="webmaster" checked>Webmaster<p> ¿Qué edad tienes?<p> <input type="radio" name="edad" value="20">20 años<br> <input type="radio" name="edad" value="18">18 años<br> <input type="radio" name="edad" value="15">15 años<p>
++++++++++++++++++++++++++
Esto mostraría algo así en nuestro navegador:
+++++++++++++++++++++++++++
Introduce tu nombre:
___________________
|__________________| //campo de texto
Introduce tu contraseña:
____________________
|___________________| //campo de contraseña, aquí lo que escribas
se verá con *
¿Qué te interesa?
_
[_] Informática en general //campos de selección múltiple
[_] Programación
[o] Webmaster
¿Qué edad tienes?
O 20 años //campos de selección única
O 18 años
O 15 años
+++++++++++++++++++++++++++
En las input 'text' lo que escribas será traspado por el formulario, con el nombre de la input. Por ejemplo, si la input se llama 'nombre' y en ella escribo 'zero', pues nombre va a ser igual a zero. En las input 'passowrd' es lo mismo. En las input 'checkbox' el dato que será traspasado es el value. Por ejemplo, si la input tiene como value 'informatica', y en el formulario está seleccionada, el dato que se traspasará será 'informatica'. En el caso de la input 'radio', hay que llamarlas todas igual, ya que sólo una será marcada y recibida. Por ejemplo, tengo 3 input radio llamadas 'edad' y al momento de procesarla pongo que me muestre el valor de 'edad', y me mostrará cuál de las input radio llamadas edad fue seleccionada.
//Otro tipo de input son las 'hidden', que no se ven en la web, sólo en el código de fuente, y sirven para traspasar datos que el usuario no pueda modificar a través del formulario. Sus propiedades son:
//name="campo"
Indica el nombre de la input
//value="hola"
Indica el valor de la input
//<textarea></textarea>
Este tag nos sirve para hacer una caja de texto, como una input, pero de múltiples líneas. Sus propiedades son:
//name="campo"
Al igual que en las input, especifíca el nombre que tendrá la textarea.
//cols="50"
Aquí indicamos en número cuántas columnas tendrá (largo)
//rows="10"
Aquí indicamos en número cuántas filas tendrá (alto)
Como se puede observar, textarea no tiene 'value', ya que éste corresponde al texto que que va dentro. Por ejemplo, si en las input ponías en 'value' el texto que querías por defecto, en textarea debes hacerlo entre los tags <textarea></textarea>.
¿cómo se ve una textarea?
+++++++++++++++++++++++++++++
Comentario:<br>
<textarea name="comentario" cols="50" rows="10"></textarea>
+++++++++++++++++++++++++++++
Se vería asi:
+++++++++++++++++++++++++++++
Comentario:
_________________________________
| |
| |
| |
| |
| |
| |
| |
|_______________________________|
+++++++++++++++++++++++++++++
//<select></select>
El tag select nos permite hacer una lista de elementos, del que podemos seleccionar elementos. Sus propiedades son:
//name="campo"
Tal como antes, esta propiedad indica el nombre, para luego llamarla.
//size="1"
Indica cuántos elementos se verán en el select. Si colocamos '1', se verá como una lista desplegable. Si colocamos '2' o más se verá como una caja de selección. Por defecto es 1.
//multiple
Indica que podremos selecciona más de un elemento. Si no se coloca solo podremos seleccionar 1.
Para colocar elementos dentro debemos hacerlo con el tag <option>, seguido del texto que esta opción tendrá. Este tag no se cierra y sus propiedades son:
//selected
Con esto indicamos que la opción será la seleccionada. Si no se coloca, aparecerá seleccionada la primera opción.
Veamos como hacemos un select:
+++++++++++++++++++++++++++++++
Seleccione area de estudios:<p>
<select name="estudios">
<option>Primaria
<option>Secundaria
<option>Superior
</select>
+++++++++++++++++++++++++++++++
Esto se vería así:
+++++++++++++++++++++++++++++++
Seleccione area de estudios:
______________
|__Primaria___| <-- tendríamos que desplegar la lista para ver lo
demás elementos.
+++++++++++++++++++++++++++++++
//<input type="submit"> <input type="reset">
Este tag es una input, con la diferencia que son predeterminados. Si colocamso 'type="submit"', nos va a mostrar el típico botón de enviar de los formularios, y si colocamos 'type="reset"' nos va a mostrar un botón para resetear el formulario. Sus propiedades son:
//type="submit"
Mencionado recién
//value="Texto"
Aquí indicamos el texto que llevará el botón.
Al presionar el botón de submit, se envían los datos al archivo indicado en <form action=""> y mediante el método indicado en <form method"">.
=====================
Bien, ahora veamos un ejemplo de un formulario completo, con todo lo que hemos visto.
+++++++++++++++++++++++++++++++++++++++++++
<form name="prueba" action="procesar.php" method="post">
<input type="hidden" name="autor" value="zero"> <center><b>Formulario de Prueba</b></center><p> Nombre:<br><input type="text" value="" name="nombre" size="50"><p> Apellido:<br><input type="text" value="" name="apellido" size="50"><p> Nick:<br><input type="text" value="" name="nick" size="50"><p> Selecciona tu área de interés:<br> <input type="checkbox" value="programacion">Programación<br>
<input type="checkbox" value="webmaster" checked>Desarrollo Web<br> <input type="checkbox" value="hack">Hacking<p> Selecciona tu edad:<br> <input type="radio" value="mas" name="edad">Más...<br> <input type="radio" value="20" name="edad">20 años<br> <input type="radio" value="18" name="edad">18 años<br> <input type="radio" value="15" name="edad">15 años<p> País:<br> <select name="pais"> <option>Chile <option>Argentina <option>Perú <option>Brasil <option>Otro... </select><p> Comentarios varios:<br> <textarea name="comentarios" cols="50" rows="10"></textarea><p> <input type="submit" value=" Enviar "> <input type="reset" value=" Resetear "> </form>
+++++++++++++++++++++++++++++++++++++++++++
No explicaré el formulario, para que te pruebes a ver si lo entendiste
;)
=======================
Bueno, y ya terminando el curso de HTML, haré un ejemplo de una simple página en HTML, con todo lo que hemos visto.(Excepto el formulario porque ya puse un ejemplo)
+++++++++++++++++++++++++++++++++++++++++++++++++
<html>
<head>
<meta name="Author" content="veterinario">
<meta name="Subject" content="Clínica Veterinaria">
<meta name="Description" content="Clínica Veterinaria">
<meta name="Keywords" content="Clínica - Veterinaria - Veterinario - Animales"> <meta name="Language" content="Español"> <title>Clínica veterinaria</title> </head> <body bgcolor="#ffffff" text="#000000" link"#000000" vlink"#000000"> <br><br> <center><img src="imagenes/logo.gif" alt="Veterinaria" border="0"></center> <br><br> <center><h1>Perros</h1></center><p>
<table width="500" valign="top" border="1" bordercolor="#000000"> <tr> <td><font size="2" face="Verdana" color="#0000ff">Perro San Bernardo</font><td>US $100 <tr> <td><font size="2" face="Verdana" color="#0000ff">Perro Pastor Alemán</font><td>US $80 <tr> <td><font size="2" face="Verdana" color="#0000ff">Perro Gran Danés</font><td>US $120 <tr> <td><font size="2" face="Verdana" color="#0000ff">Perro Quiltro</font><td>US $10 </table> <br><br> <hr width="80%" color="#ff0000" align="left"> <br><br> <center><h1>Otros</h1></center><p>
<table width="500" valign="top" border="1" bordercolor="#000000"> <tr> <td><font size="2" face="Verdana" color="#00ff00">Ratón blanco</font><td>US $15 <tr> <td><font size="2" face="Verdana" color="#00ff00">Ratón negro</font><td>US $10 <tr> <td><font size="2" face="Verdana" color="#00ff00">Ratón de alcantarilla</font><td>US $3 </table> <br><br> Enlaces relacionados<br> <ul type="disk"> <li><a href="juana.htm" target="_blank">Veterinaria 'juana'</a><p> <li><a href="elperro.htm" target="_blank">Veterinaria 'el perro'</a><p> <li><a href="animal.htm" target="_blank">Veterinaria 'animal_xD'</a><p> <li><a href="hola.htm" target="_blank">Veterinaria 'hola'</a><p> </body> </html>
+++++++++++++++++++++++++++++++++++++++++++++++++
========================================================
Bueno, eso fue todo el curso de HTML, espero hayas entendido a la perfección y te haya sido de utilidad.
[Front Page] Es un programa creado para elaborar sitios web FIJOS o ESTÁTICOS. El problema de Front Page es que genera muchas librerías y scripts sobre los cuales es difícil trabajar (cuando te relacionas con el código), incluso, es difícil aprender HTML desde ese programa. Otro problema es que para poder tener un sitio trabajado en Front Page, debes contar con un servidor de alojamiento que Tenga instaladas las extensiones FRONT PAGE, ya que de otro modo, tu web no se visualizará o no se verá correctamente.
[Macromedia Dreamweaver] Es un programa creado para elaborar sitios web FIJOS o ESTÁTICOS. Es muy sencillo, te ayuda a trabajar sobre HTML y sobre el diseño, incluye un catalogo muy extenso de botones, scripts trabajados y funciones que puedes aplicar a tu web sin problema, aparte de que te puedes descargar nuevas funciones, catálogos y extensiones para TU PROGRAMA, no para tu web, de modo que puedes subir páginas de Dreamweaver a cualquier servidor. Te permite integrar elementos que darán a tu web un aspecto mucho más profesional.
[Macromedia Flash] Es un programa creado para elaborar animaciones o sitios DINÁMICOS, que pueden integrar mucho movimiento y desde el punto de vista del manejo de códigos para su uso, es mucho más sencillo de trabajar cuando no sabes JavaScript.
Dependiendo del tipo de sitio que desees generar, será el programa que se ajuste más a tus necesidades reales. No recomiendo front page.
Un ejemplo de un sitio Fijo: http://www.skynetgs.com/
Un ejemplo de un sitio Dinámico PRESIONA "VER SITIO DINÁMICO A PANTALLA COMPLETA" para ver el sitio dinámico.
Saludos!
Te envío aparte, aquí debajo un pequeño manualito de HTML que alguna vez preparé ya que soy miembro experto dentro del sitio todoexpertos.com:
(Esta información puede completar la pregunta acerca de páginas web).
-------------------------
Hola a todos, en este curso haré una pequeña introducción al HTML, (Hyper Text Markup Language), qué en una explicación bien simple: es un lenguaje de construcción web, no de programación web, porque con HTML tu construyes la estructura de tu página (tablas, columnas, etc...) para que se vea bien y para poder poner contenido en ella, pero no puedes programarla para que haga cosas, como por ejemplo insertar datos en una BD(base de datos) o en .txt o cosas por el estilo. Pero no por esto es menos importante que otros lenguajes como PHP o ASP, sino que muy funcional para trabajar en conjunto con éstos.
Resumiendo, HTML es un lenguaje de construcción web en cuanto a estructura y apariencia.
Ahora veamos como empezamos a construir nuestra web page
//////
Hay que saber que en HTML se usan tags o etiquetas, que las puedes reconocer porque van dentro de <>, como <html>, <head>, <br>, etc. Estas tags se inician y se terminan igual, con la diferencia de que se lleva un '/' al
Interior del éste último ( '<html>' --> '</html>' )
PD: sólo las tags que lleven contenido dentro se deben cerrar, más adelante te darás cuenta ;) ///// Ahora si empezemos...
Para iniciar un documento HTML debemos escribir la etiqueta '<html>' (sin las comillas), y para finalizar escribimos '</html>'. Dentro de estas etiquetas va a ir toda la 'programación' HTML de la web, osea toda la web.
Ahora veamos las distintas partes que forman un documento HTML.
*****************
Cabecera (head)
*****************
Las cabeceras son las etiquetas <head></head> y dentro de éstas van tags como el titulo <title></title> y las
Metatags <metatags> (que se utilizan para definir palabras claves de nuestra web y se utilizan para los
buscadores). Veamos un ejemplo de como se construye una cabecera.
+++++++++++++++++
<html>
<head>
<meta name="Description" content="descripción de mi web">
<title>Hola mundo</title>
</head>
</html>
+++++++++++++++++
Bueno, aquí vemos que en la primera línea iniciamos el documento HTML. En la segunda línea iniciamos la cabecera y dentro de ella, en la tercera línea, encontramos un metatags con la descripción de nuestra web. En la cuarta
Línea vemos el inicio y fin de la tag 'title', y dentro de ésta va el titulo que quieras que se vea en el explorador. Y por último en la quinta y sexta línea vemos el fin de 'head' y 'html' respectivamente.
****************
Cuerpo (body)
****************
En el cuerpo de la web van todas las cosas, las tablas, el texto, las imágenes, etc.. La etiqueta body se inicia <body> y se termina </body>. El tag <body> tiene algunas propiedades:
//bgcolor="#000000"
Esto define el color de fondo del documento HTML, en este caso negro.
** Algunos colores en hexadecimal:
#000000 <-- negro
#ff0000 <-- rojo
#00ff00 <-- verde
#0000ff <-- azul
#ffffff <-- blanco
Para lograr nuevos colores solo hay que ir cambiando la cantidad de 0-9 y a-f
ej: #0077bb <-- ese es un color nuevo
//background="ruta/imagen.gif"
Esto define si queremos usar una imagen de fondo, especificando la ruta.
** Si usa esta propiedad, no se usa 'bgcolor'
//text="#ffffff"
Esto define el color del texto de nuestro documento HTML
//link="#ffffff"
Esto define el color de los enlaces en nuestro documento HTML
//vlink="#ffffff"
Esto define el color de los enlaces vistos en nuestro documento HTML
////
Las propiedades se aplican de la siguiente manera:
<body bgcolor="#000000" text="#ffffff" link="#ffffff" vlink="#ffffff">
Éste es el estándar para utilizar las propiedades en todos los tags.
///////
Ahora, dentro de 'body', como ya dije antes, va el contenido de la web, como tablas, texto, etc...
:: Veamos las tablas ::
Al igual que los demás tags, se inicia '<table>' y se finaliza '</table>'. Tiene las siguientes propiedades:
//width="250" ó width="50%"
Width se utiliza para especificar el largo de la tabla, que puede ser en pixeles (se especifica en cantidad), o para hacer tablas elásticas se especifica en '%' (por ciento). Si especificamos en 50%, la tabla ocupará la mitad de la pantalla en cualquier resolución, así se adapta a cualquier usuario.
//height="250" ó height="50%"
Bueno, lo mismo que la propiedad anterior, pero esta vez se trata del alto.
PD:
Largo
________________
| |
| | alto
|_______________|
Para no provocar confusiones :)
//bgcolor="#ffffff"
Al igual que con 'body', esta propiedad especifíca el color de fondo.
//background="ruta/imagen.gif"
Especifíca si queremos que la tabla tenga una imagen de fondo en vez de color.
//cellspacing="10"
Indica el espacio que separa las columnas y filas dentro de una tabla
//cellpadding="10"
Indica el espacio que separa el borde y contenido de las columnas y filas dentro de una tabla
//align="left"
Indica como se alineará el contenido dentro de la tabla. Puede ser left (a la izquierda), right (a la derecha) y center (al centro)
//valign="top"
Indica como se alineará el contenido dentro de la tabla. Puede ser top (arriba), middle (en el medio) y bottom
(Abajo)
//border="1"
Indica de que tamaño será el borde de nuestra tabla, si colocamos '0' la tabla no tendrá borde
//bordercolor="#000000"
Indica el color del borde de la tabla
** Dentro de la tabla van las columnas y filas, <td> y <tr> respectivamente.
____________
| | |
|_____|______|
| | | __ Esto es una fila (van hacia abajo)
|_____|______|
|
Esto es una columna (van hacia el lado)
Veamos como podríamos hacer una tabla:
+++++++++++++++++++++++++++
<table width="100" height="100" border="1" cellspacing="0" cellpadding="0" bgcolor="#ffffff"> <tr> <td>hola <td>hola <tr> <td>chao <td>chao </table>
+++++++++++++++++++++++++++
Esto quedaría así:
________________
| | |
| hola | hola |
|_______|________|
| | |
| chao | chao |
|_______|________|
Espero no te haya quedado ninguna duda con las tablas. ;)
:: Veamos las imágenes ::
Cabe recalcar que el tag <img> se inicia pero no se termina, ya que la imagen no queda abierta si no la cerramos.
El tag <img> tiene las siguientes propiedades:
//src="ruta/imagen.gif"
Con esto especificamos la ruta de la imagen
//border="0"
Define si la imagen tiene borde o no. Esto es útil cuando la imagen es un enlace y por defecto tiene un borde, pues entonces ponemos border="0" y queda sin borde pero sigue siendo un enlace.
//width="100"
Indica el ancho de la imagen (se utiliza si queremos aumentar o disminuir el tamaño de la imagen). Si no se hace referencia a 'width', la imagen tiene su ancho por defecto.
//height="100"
Igual que la propiedad anterior, pero con el alto.
//alt="la imagen no se puede visualizar"
En 'alt' especificamos el texto que se mostrará en el navegador si es que la imagen no se puede visualizar.
//hspace="5"
Indica el espacio horizontal entre la imagen y el texto que le siga
//vspace="5"
Indica el espacio vertical entre la imagen y el texto que le siga
Veamos un ejemplo de como colocaríamos una imagen:
+++++++++++++++++
<img src="imagenes/archivo.gif" alt="Archivo" width="80" height="80" border="0">
+++++++++++++++++
Eso ;)
//////
Ahora veremos los tags modificadores de texto, como negrita, cursiva, etc...
//<b></b>
El texto que vaya dentro de estos tags estará en negrita.
//<i></i>
El texto que vaya dentro de estos tags estará en cursiva.
//<u></u>
El texto que vaya dentro de estos tags estará subrayado.
//<h1></h1> // <h2></h2> // etc....
Los tags <h1></h1> hacia adelante modifican el tamaño del texto, siendo <h1> lo más grande.
//<font></font>
Este tag modifica el texto. Sus propiedades son:
//size="1"
Tamaño en puntos.
//face="Verdana"
Fuente con la que se visualizará el texto, en este caso 'Verdana'.
//color="#ffffff"
Define el color del texto que irá dentro de <font></font>
Veamos un ejemplo de estos modificadores:
++++++++++++++++++++++++
<b>Este texto está en negrita</b>
<i>Este texto está en cursiva</i>
<u>Este texto está subrayado</u>
<h1>Este texto es grande</h1>
<font face="Verdana" color="#ffffff">Este es blanco, está ecrito con Verdana</b>
++++++++++++++++++++++++
//<br>
Este tag nos indica un salto de línea. No hay que cerrarlo.
ej:
+++++++++++++
hola<br>chao
+++++++++++++
Nos quedaría:
++++++++++++
hola
chao
+++++++++++++
//<p>
Nos indica un salto de párrafo, que es equivalente a dos <br>. Tampoco se cierra.
ej:
++++++++++++++
hola<p>chao
++++++++++++++
Nos quedaría:
++++++++++++++
Hola
Chao
++++++++++++++
/////
Enlaces...
El tag de enlace '<a></a>' convierte en un enlace al texto que esté dentro de él. Tiene las siguientes
Propiedades:
//href="documento.htm" ó href="http://www.direccion.com"
Indica a la dirección que el texto estará vinculado, que puede ser un docuento .html, .php, .zip, etc... o una dirección en internet.
//target="_blank"
Indica cuál donde se abrirá nuestro enlace. Puede ser '_blank' para abrir el enlace en una ventana nueva y '_self' para abrir el enlace en la misma ventana.
El tag enlace también tiene otra utilidad, que es la de poder construir tu web en secciones. Por ej:
+++++++++++++++++++++++++++++++
<html>
<a name="arriba">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#arriba">Ir arriba</a>
</html>
++++++++++++++++++++++++++++++++
En este código puedes observar que puse '<a name="arriba">', y con esto indico que la sección donde puse eso se llama arriba. Para acceder a esta sección tengo que hacer un enlace cuyo destino sea '#arriba'. Esto sirve cuando una página es muy larga y tiene varios documentos adentro, entonces al final de cada documento puedes colocar un 'Ir Arriba'.
/////
Otro modificadores.......
//<center></center>
Se utiliza para centrar elementos dentro del documento HTML
//<hr>
'HR' es una línea horizontal que atraviesa el documento. Sus propiedades
son:
//width="200" ó width="50%"
Nos indica el largo de la línea, puede ser en puntos o 'por ciento'
(%) (50% ocupa la mitad del documento)
//color="#ffffff"
Nos indica el color de la línea
//size="20"
Indica el grosor de la línea en pixeles
//align="left"
Indica la alineación de la línea. Puede ser left (izquierda), right
(derecha) o center (centrada)
//noshade
Indica que la línea no tendrá efecto de sombra, para que no se vea en '3D'
//<pre></pre>
Este tag nos permite modificar la escritura del texto. Todo lo que escribamos dentro de estos tags se verá tal cual en el explorador (en cuanto a posición).
Ej: si yo escribo:
++++++++++++++++++++++++
<pre>
hola
chao
que tal
</pre>
++++++++++++++++++++++++
Esto se verá:
+++++++++++++++++++++++
hola
chao
que tal
+++++++++++++++++++++++
//<ul></ul>
Estos tags nos sirven para hacer listas de elementos. Sus propiedades
son:
//start="3"
Indica en que elemento empezará la lista. Si no se indica se empezará por el primer elemento.
//type="disk"
Nos indica el tipo de lista que queremos usar. Puede ser 'disk' para usar discos, 'circle' para usar discos con puro contorno, sin relleno y 'square' para usar cuadrados
El tag <ul> inicia la lista, pero para definir cada elemento de la lista que irá dentro debemos usar el tag <li> (<li> no se cierra).
Veamos un ejemplo:
+++++++++++++++++++++++++++
Lista de elementos:<br>
<ul tpye="disk">
<li>elemento1
<li>elemento2
<li>elemento3
<li>etc
</ul>
+++++++++++++++++++++++++++
Esto nos quedaría así (los '*' simulan los discos)
++++++++++++++++++++++++++++
Lista de elementos:
* elemento1
* elemento2
* elemento3
* etc
++++++++++++++++++++++++++++
//También tenemos el tag <ol>, que también es una lista de elementos pero con diferentes tipos. Estos tipos pueden ser '1' para ordenar los elementos con números (1,2,3,4), 'a' para ordenar los elementos con letras (a, b, c, d), 'A' para ordenar los elementos con letras mayúsculas (A, B, C, D), 'i' para ordenar los elementos con números romanos en minúscula (i, ii, iii, iv), 'I' para ordenar los elementos con números romanos en mayúscula (I, II, III, IV).
Ej:
++++++++++++++++++++++++++++++
Lista de elementos:<br>
<ol tpye="1">
<li>elemento1
<li>elemento2
<li>elemento3
<li>etc
</ol>
+++++++++++++++++++++++++++++++
Esto se vería así:
+++++++++++++++++++++++++++++
Lista de elementos:
1. Elemento1
2. Elemento2
3. Elemento3
4. Etc
+++++++++++++++++++++++++++++
//////
Formularios
Ahora veremos los formularios, que nos serán de mucha utilidad junto con PHP y MySQL.
Para iniciar el formulario escribimos <form> y para finalizarlo </form>. Sus propiedades son:
//method="post"
Indica si los datos del formulario se traspasarán a través del mismo formulario (post) o a través de la URL
(Get)
//action="archivo.php"
Indica cuál será el archivo que procesará el formulario cuando demos click en el botón 'Enviar'
Ahora, dentro del formulario tenemos más elementos. Estos pueden ser:
//<input>
El tag input es un objeto y no se cierra. Son las típicas cajas de texto donde tienes que poner tu nombre o e-mail. Sus propiedades son:
//type="text"
Indica el tipo del que será la <input>. Puede ser 'text' para que en ella se introduzca texto común, 'password' para que se introduzcan contraseñas (el texto que escribas en ella se verá con asteriscos), 'radio' para que las <input> sean casillas (se puede marcar solo una) y 'checkbox' para que las <input> sean casillas pero se pueden marcar más de una.
//size="50"
Indica el tamaño de la <input>. Aplicable a 'text' y 'password'.
//maxlenght="50"
Indica el máximo de caractéres que se podrá introducir. Aplicable a 'text' y 'password'
//name="campo"
Indica el nombre de la input, para luego llamarla en el procesamiento del formulario.
//value="hola"
Es el valor por defecto que tendrá la <input> ("" para que esté vacía). Aplicable a todas.
//checked
Indica que la input estará seleccionada, Aplicable a checkbox
Veamos un ejemplo:
+++++++++++++++++++++++++
Introduce tu nombre:<p>
<input type="text" name="nombre" value="" size="50"><p> Introduce tu contraseña:<p> <input type="password" name="contrasena" value="" size="50"><p> ¿Qué te interesa?<p> <input type="checkbox" value="informatica">Informática en general<br> <input type="checkbox" value="programacion">Programación<br>
<input type="checkbox" value="webmaster" checked>Webmaster<p> ¿Qué edad tienes?<p> <input type="radio" name="edad" value="20">20 años<br> <input type="radio" name="edad" value="18">18 años<br> <input type="radio" name="edad" value="15">15 años<p>
++++++++++++++++++++++++++
Esto mostraría algo así en nuestro navegador:
+++++++++++++++++++++++++++
Introduce tu nombre:
___________________
|__________________| //campo de texto
Introduce tu contraseña:
____________________
|___________________| //campo de contraseña, aquí lo que escribas
se verá con *
¿Qué te interesa?
_
[_] Informática en general //campos de selección múltiple
[_] Programación
[o] Webmaster
¿Qué edad tienes?
O 20 años //campos de selección única
O 18 años
O 15 años
+++++++++++++++++++++++++++
En las input 'text' lo que escribas será traspado por el formulario, con el nombre de la input. Por ejemplo, si la input se llama 'nombre' y en ella escribo 'zero', pues nombre va a ser igual a zero. En las input 'passowrd' es lo mismo. En las input 'checkbox' el dato que será traspasado es el value. Por ejemplo, si la input tiene como value 'informatica', y en el formulario está seleccionada, el dato que se traspasará será 'informatica'. En el caso de la input 'radio', hay que llamarlas todas igual, ya que sólo una será marcada y recibida. Por ejemplo, tengo 3 input radio llamadas 'edad' y al momento de procesarla pongo que me muestre el valor de 'edad', y me mostrará cuál de las input radio llamadas edad fue seleccionada.
//Otro tipo de input son las 'hidden', que no se ven en la web, sólo en el código de fuente, y sirven para traspasar datos que el usuario no pueda modificar a través del formulario. Sus propiedades son:
//name="campo"
Indica el nombre de la input
//value="hola"
Indica el valor de la input
//<textarea></textarea>
Este tag nos sirve para hacer una caja de texto, como una input, pero de múltiples líneas. Sus propiedades son:
//name="campo"
Al igual que en las input, especifíca el nombre que tendrá la textarea.
//cols="50"
Aquí indicamos en número cuántas columnas tendrá (largo)
//rows="10"
Aquí indicamos en número cuántas filas tendrá (alto)
Como se puede observar, textarea no tiene 'value', ya que éste corresponde al texto que que va dentro. Por ejemplo, si en las input ponías en 'value' el texto que querías por defecto, en textarea debes hacerlo entre los tags <textarea></textarea>.
¿cómo se ve una textarea?
+++++++++++++++++++++++++++++
Comentario:<br>
<textarea name="comentario" cols="50" rows="10"></textarea>
+++++++++++++++++++++++++++++
Se vería asi:
+++++++++++++++++++++++++++++
Comentario:
_________________________________
| |
| |
| |
| |
| |
| |
| |
|_______________________________|
+++++++++++++++++++++++++++++
//<select></select>
El tag select nos permite hacer una lista de elementos, del que podemos seleccionar elementos. Sus propiedades son:
//name="campo"
Tal como antes, esta propiedad indica el nombre, para luego llamarla.
//size="1"
Indica cuántos elementos se verán en el select. Si colocamos '1', se verá como una lista desplegable. Si colocamos '2' o más se verá como una caja de selección. Por defecto es 1.
//multiple
Indica que podremos selecciona más de un elemento. Si no se coloca solo podremos seleccionar 1.
Para colocar elementos dentro debemos hacerlo con el tag <option>, seguido del texto que esta opción tendrá. Este tag no se cierra y sus propiedades son:
//selected
Con esto indicamos que la opción será la seleccionada. Si no se coloca, aparecerá seleccionada la primera opción.
Veamos como hacemos un select:
+++++++++++++++++++++++++++++++
Seleccione area de estudios:<p>
<select name="estudios">
<option>Primaria
<option>Secundaria
<option>Superior
</select>
+++++++++++++++++++++++++++++++
Esto se vería así:
+++++++++++++++++++++++++++++++
Seleccione area de estudios:
______________
|__Primaria___| <-- tendríamos que desplegar la lista para ver lo
demás elementos.
+++++++++++++++++++++++++++++++
//<input type="submit"> <input type="reset">
Este tag es una input, con la diferencia que son predeterminados. Si colocamso 'type="submit"', nos va a mostrar el típico botón de enviar de los formularios, y si colocamos 'type="reset"' nos va a mostrar un botón para resetear el formulario. Sus propiedades son:
//type="submit"
Mencionado recién
//value="Texto"
Aquí indicamos el texto que llevará el botón.
Al presionar el botón de submit, se envían los datos al archivo indicado en <form action=""> y mediante el método indicado en <form method"">.
=====================
Bien, ahora veamos un ejemplo de un formulario completo, con todo lo que hemos visto.
+++++++++++++++++++++++++++++++++++++++++++
<form name="prueba" action="procesar.php" method="post">
<input type="hidden" name="autor" value="zero"> <center><b>Formulario de Prueba</b></center><p> Nombre:<br><input type="text" value="" name="nombre" size="50"><p> Apellido:<br><input type="text" value="" name="apellido" size="50"><p> Nick:<br><input type="text" value="" name="nick" size="50"><p> Selecciona tu área de interés:<br> <input type="checkbox" value="programacion">Programación<br>
<input type="checkbox" value="webmaster" checked>Desarrollo Web<br> <input type="checkbox" value="hack">Hacking<p> Selecciona tu edad:<br> <input type="radio" value="mas" name="edad">Más...<br> <input type="radio" value="20" name="edad">20 años<br> <input type="radio" value="18" name="edad">18 años<br> <input type="radio" value="15" name="edad">15 años<p> País:<br> <select name="pais"> <option>Chile <option>Argentina <option>Perú <option>Brasil <option>Otro... </select><p> Comentarios varios:<br> <textarea name="comentarios" cols="50" rows="10"></textarea><p> <input type="submit" value=" Enviar "> <input type="reset" value=" Resetear "> </form>
+++++++++++++++++++++++++++++++++++++++++++
No explicaré el formulario, para que te pruebes a ver si lo entendiste
;)
=======================
Bueno, y ya terminando el curso de HTML, haré un ejemplo de una simple página en HTML, con todo lo que hemos visto.(Excepto el formulario porque ya puse un ejemplo)
+++++++++++++++++++++++++++++++++++++++++++++++++
<html>
<head>
<meta name="Author" content="veterinario">
<meta name="Subject" content="Clínica Veterinaria">
<meta name="Description" content="Clínica Veterinaria">
<meta name="Keywords" content="Clínica - Veterinaria - Veterinario - Animales"> <meta name="Language" content="Español"> <title>Clínica veterinaria</title> </head> <body bgcolor="#ffffff" text="#000000" link"#000000" vlink"#000000"> <br><br> <center><img src="imagenes/logo.gif" alt="Veterinaria" border="0"></center> <br><br> <center><h1>Perros</h1></center><p>
<table width="500" valign="top" border="1" bordercolor="#000000"> <tr> <td><font size="2" face="Verdana" color="#0000ff">Perro San Bernardo</font><td>US $100 <tr> <td><font size="2" face="Verdana" color="#0000ff">Perro Pastor Alemán</font><td>US $80 <tr> <td><font size="2" face="Verdana" color="#0000ff">Perro Gran Danés</font><td>US $120 <tr> <td><font size="2" face="Verdana" color="#0000ff">Perro Quiltro</font><td>US $10 </table> <br><br> <hr width="80%" color="#ff0000" align="left"> <br><br> <center><h1>Otros</h1></center><p>
<table width="500" valign="top" border="1" bordercolor="#000000"> <tr> <td><font size="2" face="Verdana" color="#00ff00">Ratón blanco</font><td>US $15 <tr> <td><font size="2" face="Verdana" color="#00ff00">Ratón negro</font><td>US $10 <tr> <td><font size="2" face="Verdana" color="#00ff00">Ratón de alcantarilla</font><td>US $3 </table> <br><br> Enlaces relacionados<br> <ul type="disk"> <li><a href="juana.htm" target="_blank">Veterinaria 'juana'</a><p> <li><a href="elperro.htm" target="_blank">Veterinaria 'el perro'</a><p> <li><a href="animal.htm" target="_blank">Veterinaria 'animal_xD'</a><p> <li><a href="hola.htm" target="_blank">Veterinaria 'hola'</a><p> </body> </html>
+++++++++++++++++++++++++++++++++++++++++++++++++
========================================================
Bueno, eso fue todo el curso de HTML, espero hayas entendido a la perfección y te haya sido de utilidad.
Respuesta de bromasaparte
1
Te diré que para empezar a hacer una web lo mejor es Dreamweaver o FrontPage. El Flash es otro programa más complicado.
De todos modos te aconsejo que vayas con paciencia, pilles un manual de internet acerca de como usar dreamweaver y seguir dicho manual con paciencia, no tardarás ni 1 semana en conocer ya el programa y empezarás ha hacer cosas curiosas, cágate de mucha paciencia, una vez aprendas para que vale cada herramienta ponte a hacer una página de tu currículo, viendo así el funcionamiento usando todas las herramientas posibles que vienen con el programa.
Después podrás empezar con tu proyecto.
Un saludo y espero haberte ayudado.
PD: La diferencia entre FrontPage y Dreamweaver es que Dreamweaver da muchas más facilidades a la hora de crear una web, al mismo tiempo que no mete tanto código basura como lo hace el FrontPage, ¿por lo tanto queda claro que programa usar no?
RESUMEN jijijji:
DREAMWEAVER -> El mejor
FRONTPAGE -> Se puede usar para hacer cosas que no consigues con dream ( INTRODUCE CÓDIGO BASURA)
FLASH -> Eso es para hacer una web animada o presentaciones para una empresa, etc etc ...
De todos modos te aconsejo que vayas con paciencia, pilles un manual de internet acerca de como usar dreamweaver y seguir dicho manual con paciencia, no tardarás ni 1 semana en conocer ya el programa y empezarás ha hacer cosas curiosas, cágate de mucha paciencia, una vez aprendas para que vale cada herramienta ponte a hacer una página de tu currículo, viendo así el funcionamiento usando todas las herramientas posibles que vienen con el programa.
Después podrás empezar con tu proyecto.
Un saludo y espero haberte ayudado.
PD: La diferencia entre FrontPage y Dreamweaver es que Dreamweaver da muchas más facilidades a la hora de crear una web, al mismo tiempo que no mete tanto código basura como lo hace el FrontPage, ¿por lo tanto queda claro que programa usar no?
RESUMEN jijijji:
DREAMWEAVER -> El mejor
FRONTPAGE -> Se puede usar para hacer cosas que no consigues con dream ( INTRODUCE CÓDIGO BASURA)
FLASH -> Eso es para hacer una web animada o presentaciones para una empresa, etc etc ...