Conceptos básicos de HTML
(42 votos, promedio: 4,07 de 5)
Cargando...No te pierdas nuestra guía sobre los fundamentos de HTML, aprendiendo a utilizar las etiquetas y elementos de este lenguaje de creación de páginas web.
HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las diferentes partes de una página web.
Para toda persona interesada en crear páginas web es importante conocer al menos nociones básicas de este lenguaje, de esta forma podemos comprender como están hechas las web, desarrollar sitios con más flexibilidad y mejor construidos.
Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea importante para hacer páginas web, mejor dicho imprescindible.
Etiquetas básicas de HTML
- <html>: indica el comienzo del documento HTML.
- <head>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la web, una descripción y otras informaciones relacionadas con el contenido de la página.
- <body>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.
- <h1>, <h2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.
- <a>: define los enlaces.
- <table>: es una tabla, y dentro de esta tenemos filas <tr> y celdas <td>.
- <p>: el texto dentro de esta etiqueta forma un párrafo.
- <img>: imágenes.
- <ul>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <li> definimos cada guión dentro de la lista, y usando <ol> en lugar de <ul> tendremos listas ordenadas.
- <b> y <strong>: se utilizan para resaltar el texto.
- <u>: texto subrayado.
- <i> y <em>: texto en cursiva.
Ejemplo de página básica
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Encabezado de la página</h1>
<h2>Encabezado de menor tamaño</h2>
<p>Este es el texto de un párrafo.</p>
<p>Este es el texto de otro párrafo. Dentro de este párrafo,
pueden ir palabras <strong>en negrita</strong>, <em>en cursiva</em> o lo
que quieras.</p>
<p>También podemos poner listas como la siguiente:</p>
<ul>
<li>Guión número uno.</li>
<li>Guión número dos.</li>
<li>Guión número tres.</li>
</ul>
</body>
</html>
Y para que lo entiendas mejor, una página básica con su correspondiente código HTML:
En la parte superior del código siempre debemos tener una declaración para definir el tipo de documento que estamos por desplegar, el doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Es muy común olvidar dar un Doctype a nuestros sitios, ya que al ser un factor técnico es fácil de omitir, además sin un Doctype definido nuestra web sigue funcionando.
Entonces, ¿por qué ponerlo? porque si no lo haces el navegador no va a saber qué lenguaje estás utilizado y es muy probable que interprete mal algunos usos, lo que va a provocar errores en tu página y que no se visualice de manera correcta.
Aquí mostramos ciertos tipos de Doctype:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Después de definir el tipo de documento empieza la codificación del contenido.
En primer lugar utilizamos el elemento “html” para indicar el inicio de nuestra página web. Es considerado el elemento raíz.
Es necesario especificar el idioma principal en el que escribiremos. Para eso usamos el atributo “xml:lang” en elemento “html”. Su valor estará representado por la abreviación del idioma que escogimos, si por ejemplo el idioma principal de nuestra página es el Español, entonces el valor que recibirá el atributo será “es”, mientras que si es el inglés utilizaremos “en”.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
...
</html>Después, dentro del elemento “html”, habrá otros dos que llevarán por nombre “head” y “body”.
- El primer elemento contenido dentro de la etiqueta “html” es la llamada cabecera, identificada por la etiqueta “head” y que se encarga de contener información relativa al documento, tal es el caso de la etiqueta “title” que se coloca dentro de la cabecera para mostrar el título de la página que se mostrará en la barra superior de la ventana del navegador.
- Después de tener bien definida la estructura de “head”, pasamos a declarar al elemento “body” el cual tendrá como función mostrar todo el contenido que es visible por el usuario. Por ello dentro de él se pueden usar la mayoría de las etiquetas con las que cuenta XHTML.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
...
</head>
<body>
<!-- Contenido -->
</body>
</html>Normas elementales en HTML
Siempre que sea posible, incluye las etiquetas de cierre, incluso si no son obligatorias, ya que esto hace que sea más fácil seguir tu propio marcado y que sea más rápido de leer. Además, en XHTML todas las etiquetas deben cerrarse, por lo que te será más fácil si cambias de uno a otro.
Ejemplo:
<html>
...
</html>
Con frecuencia verás diseños HTML con código indentado como el que se muestra a continuación, es decir, código tabulado con sangrías, de forma que los bloque de texto se mueven hacia la derecha insertando espacios para separarlos del texto adyacente que forme otras estructuras diferentes.
Esto hace que sea más fácil leerlo y comprobar qué etiquetas de cierre se refieren a qué etiquetas. Por ejemplo, esto es claramente erróneo:
<p>
<strong>
texto en negrita
<em>texto en negrita y cursiva
texto sólo en cursiva
</em>
</p>
Sin embargo, esto es válido:
<p>
<strong>
texto en negrita
<em>
texto en negrita y cursiva
</em>
</strong>
<em>
texto solo en cursiva
</em>
</p>
Etiquetas, elementos y atributos HTML
Ya hemos visto lo que es una etiqueta en HTML, y que hay etiquetas de apertura y (en la mayoría de los casos) etiquetas de cierre. El navegador lee estas etiquetas y crea una representación interna de lo que leyó.
Esta representación interna se conoce como un elemento. Entonces, el navegador “decide” cómo mostrar el elemento en la pantalla. Además, no todos los elementos se muestran en pantalla (como el HEAD),y por el contrario algunos elementos siempre existen, incluso si no los creaste en tu código fuente (como el HTML, HEAD o BODY).
Algunos elementos aceptan parámetros adicionales. Por ejemplo, el elemento A puede aceptar el parámetro HREF, que lo convierte en un enlace. Estos parámetros son conocidos como atributos, y se crean así:
<a href="nombre-de-archivo.html">Texto del enlace</a>
Ten en cuenta que en HTML, las etiquetas y nombres de atributos se puede escribir en cualquier circunstancia.
Algunos diseñadores web tienden a utilizar mayúsculas para destacarlos en el código fuente, otros escriben todo en minúsculas para hacerlos más fáciles de traducir a XHTML más tarde si es necesario.
Mi consejo es que adoptes esta segunda opción, lo lógico es con el tiempo acabar creando páginas en XHTML. De todas maneras, cualquiera de las dos formas es correcta en HTML.
Sintaxis de XHTML
HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado en elementos, los cuales son declarados mediante el uso de etiquetas que proporcionan información adicional através de atributos.
Por su parte XHTML es una versión mejorada de HTML, por lo que busca tener una sintaxis más estricta que las versiones anteriores de este lenguaje de marcado y tiene menos tolerancia ante errores de mal uso de etiquetas.
Si seguimos una correcta codificación no tendremos ningún problema y obtendremos todos los beneficios del lenguaje.
La regla básica para la estructuración de xHTML es saber utilizar de manera correcta cada parte de un elemento, tener conocimiento de la función que cumple cada pedazo de código y qué clase de contenido albergará.
Tomemos la siguiente línea para explicar esto:
<a href="https://www.lawebera.es">La Webera</a>
Lo que tenemos aquí es un elemento de anclaje que se encarga de definir un enlace hacia una dirección. Esta línea de código está compuesta por varias partes, una etiqueta de apertura definida por:
<a href="https://www.lawebera.es">
La cual tiene la función de iniciar el elemento, una etiqueta de clausura:
</a>
Cuya función es terminar dicho elemento, un atributo “href” que se encarga de establecer una propiedad que en este caso es un link hacia la dirección que especificamos con la cadena “https://www.lawebera.es”, que se convierte en el valor del atributo, y finalmente tenemos “La Webera” que es a lo que llamaremos el contenido del elemento.
Reglas para manejar etiquetas
Existen reglas simples de seguir diseñadas para tener un manejo correcto de etiquetas con XHTML.
Debemos recordar que xHTML no es muy distinto a su predecesor, por lo que no tenemos que olvidarnos de lo que ya sabemos, simplemente tenemos que omitir las malas prácticas a las que el HTML no estricto nos acostumbró.
En primer lugar tenemos que definir que XHTML requiere que todas las etiquetas y atributos sean escritos en minúsculas, por ejemplo si queremos declarar un elemento de tipo párrafo tenemos que escribir su etiqueta de la siguiente manera:
<p>
Ya que si escribimos:
<P>
No cumple con esta regla y por lo tanto no puede ser considerado un correcto código XHTML.
El segundo aspecto a considerar es que todas las etiquetas deben cerrarse, es decir deben tener una contraparte compuesta por una diagonal antepuesta al nombre de la etiqueta, siguiendo con el ejemplo del párrafo, una vez que introducimos el contenido debemos cerrar la etiqueta de la siguiente manera:
</p>
Existen excepciones donde un elemento no tiene contenido, tal es el caso de los saltos de línea “br” o algunos elementos de formulario como los “input”.
En estas situaciones no hay que incluir una etiqueta de cierra explícita, pero si se debe de agregar la diagonal al final de la etiqueta de apertura de la siguiente manera:
<br />
La tercera regla nos indica que todos los atributos que agreguemos a un elemento deben de tener siempre un valor y estos deben de ir entre comillas, por lo que quedaría una línea como esta:
<a href="https://www.lawebera.es">La Webera</a>
En cuarto lugar tenemos que los elementos deben estar correctamente anidados, es decir que los elementos incluidos dentro de otros se cierren correctamente antes de cerrar el elemento padre. Podemos tener líneas como esta:
<p><a href="https://www.lawebera.es">La webera es un sitio genial</a></p>
En este caso tenemos que cerrar primero el anclaje y después el párrafo pues de esta manera respetamos la anidación y la jerarquía de elementos.
Atributos XHTML de uso común
Existe un grupo de atributos que se pueden utilizar en la gran mayoría de las etiquetas, éstos son catalogados como de uso común y se pueden especificar aún más en base a su función, por lo que encontraremos atributos básicos, de internacionalización y de eventos.
Atributos XHTML básicos
Los atributos básicos son aquellos que usamos prácticamente en todos lados para rastrear y reconocer elementos, nos referimos a “class”, “id” y “title”, incluso “style” puede caer dentro de esta categoría aunque preferimos mantener al margen dicho atributo ya que las hojas de estilo cumplen mejor con esa función.
Los identificadores están relacionados con el atributo “id” y se utilizan para dar una asociación única al elemento, lo que permitirá manipularlo ya sea con JavaScript o CSS.
Como ya se dijo, es único, por lo que no se debe repetir en otro elemento, en caso de que queramos agrupar distintos elementos con una misma asociación entonces tendremos que usar una clase.
Aquí tenemos un ejemplo de como utilizar identificadores para cada elemento de una lista:
<ul id="ciudades">
<li id="vlc">Valencia</li>
<li id="gdl">Guadalajara</li>
<li id="blb">Bilbao</li>
</ul>
Gracias a estos identificadores podemos en un futuro localizar cada elemento de la lista sin necesidad de recorrerla.
Las clases por su parte están relacionadas con el atributo “class”, y nos sirven para cuando hay más de un elemento que necesita una asociación.
Si usamos el ejemplo de la lista, podemos agregar una clase que sirva para asociar todos los elementos a los que les agregamos un identificador.
<ul id="ciudades">
<li class="spain" id="vlc">Valencia</li>
<li class="spain" id="gdl">Guadalajara</li>
<li class="spain" id="blb">Bilbao</li>
</ul>
Lo que hicimos en el ejemplo es abarcar todos los componentes de la lista con una sola clase a la que llamamos “spain”, ya que todas las ciudades listadas pertenecen a este país.
Por su parte, “title” se encarga de añadir un título a un elemento, es quizás menos utilizado que los dos anteriores atributos pero aún así es importante ya que nos da una idea muy general de lo que contiene el elemento.
Este atributo tiene la ventaja de ser identificado por los lectores de pantalla y motores de búsqueda por lo que ayuda a mejorar la accesibilidad a la información.
Atributos XHTML de internacionalización
También existen atributos que son utilizados para atender asuntos de internacionalización, es decir el lenguaje que estamos utilizando en la página y la manera en que se encuentra el contenido.
Dentro de esta categoría encontramos a “dir” que se encarga de decirnos la dirección que tendrá el contenido, es decir de izquierda a derecha para textos occidentales o de derecha a izquierda para escritura árabe.
También encontramos a “xml:lang” que especifica el idioma del contenido, los valores que puede tomar son la abreviación del idioma, como por ejemplo “es” para español o “en” para inglés.
Atributos XHTML de eventos
Existe una clase de atributos utilizados para invocar funciones de JavaScript mediante el manejo de eventos, durante mucho tiempo fueron la mejor alternativa para llevar a cabo esto, pero actualmente su uso no se recomienda pues no cumplen con los estándares.
Entre dichos atributos encontramos a onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, etc.
El mal uso de etiquetas HTML
Al ver el código fuente de varias páginas podemos apreciar a menudo los mismos errores que aparecen una y otra vez, estos errores suelen ser producidos por los hábitos que arrastramos denuestros primeros días en el mundo de la maquetación web, o por desconocimiento sobre la verdadera función de cada etiqueta.
Vamos a ver las etiquetas que comúnmente son utilizadas de manera incorrecta, tratando de especificar en que fallamos y de que manera podemos usarlas correctamente.
Etiqueta “br”
Hasta la aparición de CSS, utilizar br era una de las alternativas para todo lo referente a espacios entre dos bloques de elementos.
Esta etiqueta no se debe de utilizar para crear espacios vacíos en tus documentos o contenido, su función es únicamente dar un salto de línea en una oración.
Si lo que deseas es tener espacio entre un elemento y otro entonces es recomendable añadir esos espacios mediante CSS, lo que nos permitirá determinar la distancia entre los elementos.
Etiqueta “div”
Esta etiqueta se ha convertido en una de las más utilizadas en los últimos años.
La etiqueta “div” vino a cambiar la manera en que diseñábamos la estructura de nuestras páginas, permitiendo establecer capas y niveles con los cuales, mediante el apoyo de CSS, podíamos adaptar nuestro sitio.
Pero su implementación se fue haciendo más común y para situaciones donde realmente no debería de usarse.
Hay sitios que basan prácticamente toda su estructura de elementos en “divs”, incluso para mostrar elementos de texto o imagen, esto está totalmente mal.
No tenemos que rodear todos los elementos de un sitio con un “div”, ni mucho menos utilizarlos en lugar de etiquetas cuya función especifica es la que estamos haciendo, como mostrar una imagen.
Es perfectamente aceptable utilizar la etiqueta “div” para definir la estructura de la página, pero siempre tratando de hacer uso de etiquetas más adecuadas y especializadas para los elementos de tu página, etiquetas como el párrafo y las listas pueden ser una opción mucho más semánticamente correcta.
Etiqueta “title”
Una etiqueta fundamental en cualquier estructura de código HTML es “title”, su función es básica para el sitio ya que sin ella nuestra página no tendría un título que indique de que trata el contenido que estamos por ver.
El problema es que su uso se ha venido degradando para convertirla en una etiqueta más de “meta-data” y hoy en día el título se usa para mejorar el SEO. Esto no es un problema, el problema es abusar.
Es común caer en extremos al momento de utilizar esta etiqueta, o simplemente no ponemos nada importante en ella o la llenamos de información que realmente no tiene cabida.
Debemos evitar estos dos extremos y utilizar las etiquetas “meta description” para esta clase de información más extensa.
Etiqueta “img”
No uses imágenes para casos donde realmente no se requiera, no tienes que convertir todo en imágenes.
Recuerda que esto es malo para que la página pueda ser analizada por motores de búsqueda, todo lo que sea contenido de texto, no debe ir en una imagen.
A veces incluso se cometen errores al utilizar algunos de sus atributos, como el caso de “alt”, cuya función es contener una descripción precisa de la imagen, sin embargo la mayor parte del tiempo tiene texto irrelevante.
Consejos útiles para realizar un mejor código
Simplificar
Cuando se trata de diseñar una página web, debemos tener muy en cuenta al usuario de la misma. Una página web debería tener solo aquello que es necesario.
Puede verse en muchas ocasiones, que los diseñadores terminan generando códigos extremadamente confusos y largos, para diseños que pueden conseguirse de forma más sencilla.
Un elemento clave para la generación de un código ordenado es la planificación del diseño.
Todo diseño debe ser elaborado de afuera hacia adentro, es decir, de los elementos contenedores principales hacia los menores.
Esto quiere decir que cuando se inicia una página web, los primeros elementos que deben ser determinados mediante el uso de HTML son los contenedores, como “body”.
A partir de allí, se debe generar las capas de cada sección de la estructura de la página (cabecera, columnas, pie) para luego seguir con los detalles necesarios dentro de cada una de ellas.
Tratar de no utilizar “hacks”
Los hacks son trucos mediante los cuales se pueden sortear algunos de los problemas generados por las diferencias existentes en la interpretación del código por parte de los navegadores.
En la mayoría de los casos no son necesarios. Si aprendemos a aceptar las diferencias normales entre navegadores, en lugar de exigir que tu diseño se vea exactamente igual en todos, produciremos un código más limpio y fácil de mantener.
Evitar el abuso de los posicionamientos absolutos
Una tendencia natural en los diseñadores recién iniciados, es al abuso de los elementos posicionados de forma absoluta (position: absolute), debido a que con ello se suele tener un mayor control de donde se pintan los elementos.
Las páginas generadas en forma exclusiva o casi exclusiva con posicionamiento absoluto, tienen entre otros inconvenientes, la rigidez e inflexibilidad.
Esto hace prácticamente imposible pensar en una página con contenidos dinámicos, como un blog, ya que la extensión de los contenidos será variable y originará diferentes errores, como desbordamientos de capas y superposición de contenidos.
Evitar el abuso de los ‘div’
Otro de los errores frecuentes entre principiantes es el pretender resolver todo mediante la utilización de capas.
No siempre es necesaria la utilización de capas para generar elementos, ya que en muchos casos existen los elementos semánticamente correctos dentro de HTML.
Muchos div’s pueden ser reemplazados por la utilización correcta de listas, párrafos, títulos, etc.
Diseño flexible
En los últimos años se ha producido una explosión en la variedad de resoluciones de pantalla existentes y dispositivos.
También se ha producido un incremento enorme en el acceso a internet con otros tipos de dispositivos diferentes a los clásicos ordenadores.
Todo esto hace necesario que los diseños sean cada vez más flexibles, lo que se llama responsive, de forma que puedan visualizarse de forma correcta independientemente del dispositivo que se utilice para acceder a las páginas web.
Tenemos un artículo concreto que habla de esto, no dejes de leer como hacer un diseño responsive.
Comprobaciones en diferentes navegadores
Las conocidas diferencias existentes entre navegadores hace necesario que se utilice alguna forma de comprobar la visualización de las páginas que se están diseñando en ellos.
Consulta nuestra guía para saber comprobar la compatibilidad de tu web con distintos navegadores.
Escribir las etiquetas en minúsculas
A pesar de que en HTML se pueden escribir las etiquetas tanto en minúsculas como en mayúsculas, debemos tener en cuenta que en XHTML esto no es correcto al igual que en XML, por lo que si quieres evitar problemas futuros, es recomendable escribir siempre las etiquetas con minúsculas.
Esto estaría mal:
<DIV><P>Hola Mundo</P></DIV>
Y esto bien:
<div><p>Hola Mundo</p></div>
No olvidar el cierre de las etiquetas
Algo que ya hemos explicado más arriba y representa un error, es olvidar el cierre de las etiquetas.
Cuando se trata de etiquetas que pueden contener elementos del mismo tipo anidados, los navegadores simplemente entienden que dicha etiqueta continúa abierta.
Además de producir dificultades y errores en la maquetación de la página, se trata de errores en el uso del lenguaje, por lo que el código no pasará la validación.
Separar el código CSS del código HTML
La utilización de etiquetas como <font> o <u>, son cosa del pasado. En la actualidad está casi desterrada la inclusión de etiquetas HTML pertenecientes a la presentación dentro del código.
Se recomienda manejar los estilos CSS en un archivo por separado para mantener una mejor organización del sitio. Usar archivos únicos y exclusivos para las hojas de estilo hace que se facilite su edición y administración.
Entre los principales beneficios de utilizar un archivo externo para guardar nuestro código CSS, se encuentra el hecho de que este archivo se puede utilizar para varios sitios y páginas de manera simultánea, sin necesidad de repetir el código de un lado a otro.
De igual manera, el manejar un archivo CSS representa un ahorro de tiempo al momento de la ejecución y despliegue de las páginas HTML. Al utilizar únicamente un archivo para todo el sitio, este se guarda en el caché del navegador lo que conlleva a un tiempo menor de respuesta y una carga más rápida.
Es importante recalcar el hecho de que las hojas de estilo deben incluirse dentro de las etiquetas “head”, de la siguiente forma:
<head>
...
<link rel="stylesheet" type="text/css" href="mi_estilo.css" />
</head>
Coloca los scripts al final del HTML
Antes se acostumbraba cargar los archivos relacionado a JavaScript entre las etiquetas “head” del código.
Esto provocaba una demora en el tiempo de respuesta del sitio, ya que el navegador debe cargar primero todos los scripts con sus funciones antes de empezar a pintar los elementos en pantalla.
Es por esta razón que en la actualidad se recomienda agregar los scripts al final de nuestro código HTML, justo antes del cierre de la etiqueta “body”:
<body>
...
<script type="text/javascript" src="mi_script.js" />
</body>
Con esto lograremos que la página se cargue más rápido ya que el navegador no tiene que esperar a cargar los scripts y puede ir pintando elementos en pantalla, lo cual hace que el usuario obtenga una respuesta casi inmediata.
16 respuestas
Muchas gracias, aclaró varias dudas y dio inicio a otras nuevas, mil gracias.
Gracias a ti!! :)
Hay almenos dos errores de sintaxis y semantica en el ejemplo
Abre un h1 y cierra un h2
Encabezado de la página
Suponiendo que la etiqueta es h1, por semantica debe existir un h2 antes del h3, esta MAL usar un h3 si no aparecio antes su h2.
Toda la razón. Corregido, gracias por avisar :)
Gracias, Verónica por todo el aporte brindado en su página web. Son un ratoncito muy nuevo en esto de la web. Seguiré aprendiendo con sus enseñanzas. Otra vez, ¡gracias!
Muy buena la pagina, yo ahora estoy en todo este tema de la informática y de html.
En mi pagina tengo un formulario para comentar pero no me funciona muy bien, ¿podrías decirme como haces para que cuando comentan se modifique el html y aparezca el comentario?, si me lo dices me ayudarías un montón, por que quisiera que cuando los usuarios entren a mi web puedan comentar la pagina y que aparezca en la pagina el comentario, y tambien me gustó eso de que a te llegue el correo electrónico pero que no aparezca.
Ojalá puedas responder a mis preguntas, gracias.
Hola federico, para esto que pides necesitas hacer uso de un lenguaje de lado servidor como PHP, JSP, ASP.NET, etc.
Los comentarios que el usuario escriba necesitan ser almacenados en algún lugar, comúnmente se utiliza una tabla de base de datos para ello, el formulario debe apuntar a una pagina, función o controlador donde tú establezcas la funcionalidad para guardar esa información en la base de datos.
Una vez teniendo la información en la base de datos, deberás hacer una consulta a esta para desplegar los comentarios en tu página.
Saludos
Yo aconsejo CMS Joomla, para aquellos que no seais programadores ni diseñadores. Es un CMS muy potente que se aprende en tan solo unas horas. Su versatilidad y la gran comunidad que hay detrás nos permite crear excelentes páginas en poco tiempo, Además aplicar SEO en el desarrollo es fácil gracias a la multitud de extensiones para ello y la implementación de etiquetas para todas las urls.
sus comentarios son muy buenos y he hecho muchas tareas grasias a esta pagina
yo lo uso el htlm s genial
hola no se exactamente donde puedo postear esto pero me gustaria saber si por medio de un codio HTML podria resolver mi problema que es el siguiente: yo he creado una pagina con dreamweaver y la e subido a un servidor gratuito, la cuestion es que yo me meto en mi pagina por medio de internet y se me ve perfecta, entro desde cualquier otro pc y las letras no se ven en color y algunas cosas de estilo que tiene la pagina tampoco se ven como por ejemplo el orden en los textos. agradeceria mucho vuestra ayuda
gracias por contestarme
intentare estudiar algo sobre los CMS,conosco paginas que usan wordpress y son muy buenas,(aunque no se mucho como se intala o usa el CMS de forma detallada o experiencia propia),igual creo que resultara;pero no quiero adelantarme mucho,apenas empiezo y veo de a poco lo que hay que hacer;creo q esto me servira enormemente,te lo agradesco mucho.
Hola Nicolás. Saber HTML es necesario si quieres hacer páginas web, es como lo básico así que mi consejo es que no dejes de estudiar este lenguaje.
En cuanto a lo que dije de aprender lenguajes dinámicos si tu página tiene un ritmo de actualización muy alto lo dije porque actualizar webs hechas en HTML puro es más costoso, por el tema de tener que estar tocando código fuente continuamente.
Para webs muy actualizadas puedes optar por utilizar un cms (si no sabes lo que es mira aquí http://es.wikipedia.org/wiki/CMS) que te facilitan todo el trabajo de actualización enormemente y no requieren que domines PHP, ASP o similares, aunque tener un conocimiento básico sobre ellos no te venga mal.
Algunos CMS interesantes son wordpress o joomla.
Un saludo.
tengo un objetibo para mi web,principalmente queria crear un fansite de TV con distintos videos de series que tengo y colocarlos en linea en lo que podria ser mi futura web;el articulo tenia como referencia que para paginas muy actualizadas y con contenido dinamico nesesitaria aprender “PHP” o “ASP” antes que HTML que es lo que estudio aqui por el momento,aun no se subir videos o imagenes,mi nivel de aprendizaje es casi inicial y recien leo esta leccion;¿tendria que estudiar PHP o ASP como podria ser otro tipo de sistemas para crear el tipo de webs que quiero tener o nesesito estudiar todo esto en forma completa?,es decir q seria como aprender HTML,CSS,ASP o PHP y etc. de forma total en lugar de solo estudiar alguno de ellos
Raquel prueba con alguno de estos manuales:
El HTML hecho realmente facil: http://www.jmarshall.com/easy/html/spanish/
HTML con clase: http://html.conclase.net/tutorial/html/
HTML correcto: http://www.danielclemente.com/html/
Manual práctico de HTML: http://www.etsit.upm.es/~alvaro/manual/manual.html
Todos son de buena calidad y de fácil comprensión, espero que te ayuden.
Un saludo.
Disculpe pero el manual de HTML no logro entenderlo, tengo menos de 20 años y es bastante básico mi conocimiento sobre el tema.
¿Alguna sugerencia de un manual que empieze de cero?
personalmente HTML me resulta enormemente complicado