Diseño Web, Estudiar FrontPage:
(Ultima edición de este texto 28/02/08)
HTML es un lenguaje utilizado en el diseño de paginas Web
que se basa en etiquetas, se coloca contenido entre etiquetas, las cuales
marcan un inicio y un fin, por ejemplo <b> </b> para que lo escrito entre
ellas esté en negrita.
Pero Internet evolucionó, y se suelen incluir en paginas
HTML distintos códigos por ejemplo script los cuales en su comienzo se lee <script
type="text/javascript"> y su final </script>. En PHP se utiliza incluso
mucho de HTML. No obstante, no nos pondremos a analizar cada etiqueta, sino
en general como es que funciona, y se comenzará ahora con index.htm que es
la pagina principal por omisión (con esta extensión u otra según lenguaje
empleado) de un Sitio Web.
Decir htm o html es prácticamente lo mismo, pero al acceder a un urlll
(dirección Web) debe escribir tal cual el nombre de la web a la cual desea
acceder.
Index
La página
principal de un Sitio Web, es decir index.html. (o index.htm, en este
caso o con la extensión que corresponda)
Es recomendado se la debe llamar así,
de no tener este nombre el servidor
no sabrá cual es su página principal ya que todas las páginas principales se
llaman index por omisión. Se podría llegar a variar esto pero por
ahora tome que siempre debe nombrar a la principal index.html (o index.htm)
o en el caso de utilizar otra tecnología, por ejemplo PHP seria index.php.
Sino tendría que hacer una redirección.
Un poco de
etiquetas HTML, de que se trata:
Microsoft Frontpage o Macromedia Dreamweaver por mencionar los dos editores
mas comercializados,
y multitud de programas de este tipo, tienen entornos de usuario para que
uno no tenga que escribir todo en código. Pese a esto, es totalmente
necesario tener una idea de html, ya que siempre se hacen retoques o se
arreglan cosas directamente en html, en mi opinión no se puede ser Webmaster sin tener
una idea de HTML. Por ejemplo en publicidad pueden brindarle un código
para lo incluya en su Web (no necesariamente en HTML) y debe conocer algo de
como funciona el tema.
En este lenguaje se usan etiquetas (tags), por ejemplo indicando distintos formatos y
efectos que se observarán al visualizar lo escrito como pagina web, mediante
un navegador. Funcionan de la siguiente forma:
Este es el inicio de una etiqueta: <XXX>
Este es el cierre de una etiqueta: </XXX>
Nota: Note que cambia en una barra, si no la coloca se provocarán
errores por ejemplo de no cerrar <b> con </b> le quedaría todo sobresaltado
en negrita. No obstante hay algunas excepciones como ser <br> (para ir a
otra linea sin salto de parrafo.
Lo que este entre medio del inicio y cierre será lo que afectará la/s
etiqueta/s. Hay etiquetas para cada cosa, color, tamaño de letra,
hipervínculo, etc..
Tenga en cuenta que : El signo < está en alt 60; El signo > es alt 62.
Si no me equivoco, en todos los teclados.
Para empezar a realizar una página lo primero que hay que escribir es: <HTML>
(un programa ya lo hace directamente de seleccionar un documento de este
tipo);
en el final de la página se escribirá el cierre de esta, que es lo mismo
pero con una barra </HTML>. Véalo en Microsoft FrontPpage en la solapa inferior izquierda que dice HTML
o Code.
Luego, un documento HTML está dividido en dos zonas
principales
El encabezamiento,
comprendido entre las etiquetas <HEAD> y </HEAD> Irá unas
etiquetas con las correspondientes especificaciones, que no se verán
directamente la mayoría de ellas por el usuario. Estas indicarán, por ejemplo, datos para
que los buscadores en los que se incluya lo realizado encuentren fácilmente
el trabajo, o estilos.
Entre <head> y </head> por ejemplo podrá poner el titulo de la página con
las siguientes etiquetas:
<TITLE> </TITLE>
Por ejemplo esto
quedaría así (simplificado) con un titulo:
<Html> <head> <title>Curso
en estudiargratis.com.ar</title> </head>
Nota: El titulo, es algo
importante deberá poner aquí palabras clave y representativas; salvo que sea
mas representativo el nombre, por ejemplo si es un empresa, aunque
igualmente se recomiendan palabras claves. En este ultimo caso, por ejemplo
podría ser en index: "Estudiargratis.com.ar, cursos
completos e lecturas he información gratis". Es decir uso las dos cosas, el nombre mas palabras clave.
El cuerpo, o sea lo que
se verá irá comprendido entre las etiquetas <BODY> y </BODY>Es el contenido mas amplio, porqué esto es lo que se mostrará en un navegador
a un visitante de una web.
Por ejemplo entre <BODY> y <BODY>
<H1>Curso de diseño Web en
estudiargratis.com.ar por Javier R. Cnacchi</H1></P>
Donde: H1 es resalte de titulo y /p salto
de párrafo.
Un poco de optimización: Es un error dejar
la optimización para el final del diseño, esta debe acompañar a todo el
diseño del Sitio Web. Si desea, lo primero que podría colocar
en esta página son palabras clave en minúsculas o un titulo en H1. Esto es para
que la página web sea hallada bien en su temática. No siempre se busca que
una página sea “linda” o atractiva, si nadie entra en la misma por no haber
utilizado las técnicas competitivas de diseño web, de poco sirve sea linda.
En la red InterNet se
encuentran millones de millones de páginas. Hay “truquitos” para que nuestra
página figure y aparezca en los distintos motores de búsqueda y sea
visitada luego de haberse dado de alta en ellos y ser indexado. De otra forma las que poseen esos truquitos serán visitadas y no
la suya, es decir su trabajo no rendirá al máximo y antes que una persona
tenga la opción de entrar en su diseño, tendrá quizás 100, 200 o 1000
opciones y usted estará entre las ultimas, esto inevitablemente es así. Una
palabra clave por ejemplo es para una Web de cursos: educacion, aprender,
estudiar, etc. mas la temática puntual. Una frase bien armada seria en relación por ejemplo a este
curso: "Educacion en estudiargratis.com.ar, aprender con el curso
Microsoft Frontpage"
(obviamente deberá encontrar la frase correcta para su caso esta es solo a
modo de ejemplo.
El color en estas palabras clave en el contenido visible, tienen que ser si o si
de color distinto que el de fondo, no ser abusivas (repetitivas), ni quedar
mal para un usuario.
