"La frase más excitante que se puede oír en ciencia, la que anuncia nuevos descubrimientos, no es "¡Eureka!" (¡Lo encontré!) sino 'Es extraño...' ." Isaac Asimov Frases y reseña Isaac Asimov

Cursos Diseño Web HTML4 y HTML5, Pagina principal.

Escribe Javier R. Cinacchi
https://www.estudiargratis.com.ar/webmaster/web-en-HTML-frontpage.html
Actualizado el 21/01/2014
HTML es un lenguaje muy utilizado en el diseño de paginas Web, se ha emigrado siendo vigente en el 2014 al HTML5, se basa en "etiquetas". Se coloca contenido entre marcadores llamados "etiquetas", las cuales marcan un inicio y un fin en la mayoría de los casos. Las que tienen principio y fin afectan lo que esta entre ellas; por ejemplo <div> </div> es para indicar que lo que esté dentro se verá afectado por lo que se especifique que posea tal DIV (contenedor), por ejemplo <div style="text-align: center;">Esto queda centrado</div>. En algunos casos es algo específico, por ejemplo <br /> es salto de renglón, no va contenido en el medio, ni hay inicio y cierre, sólo una etiqueta.

Nota informativa extra: Se suelen incluir en páginas 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 o código, sino en general como es que funciona, centrandonos en HTML, y se dará a continuación la explicación de cual es la primera página que se diseña.

¿Qué es index.html? Es la primer página que se realiza

Index.html es la página principal por omisión de un Sitio Web o página principal de una sección específica (con esta extensión u otra según el lenguaje empleado por ejemplo index.php en php). Estando esta en la raíz es la principal. Por ejemplo, si el dominio es www.estudiargratis.net la pagina principal en HTML sería www.estudiargratis.net/index.html y a un usuario le aclanza con escribir www.estudiargratis.net para acceder a la index. Siempre en una carpeta, se accede por omisión al index.html, o con la extensión que se utilice (ejemplo index.php)

Decir htm o html es prácticamente lo mismo, pero al acceder a una urll (dirección Web), debe escribir tal cual el nombre de la web a la cual desea acceder. Y actualmente mejor utilizar HTML, en lugar de HTM como terminación de cada página web en HTML5.

¿Quedó bien claro? Para indicar la página principal en una categoría, también podría utilizar el mismo criterio, por ejemplo:
https://www.estudiargratis.com.ar/tecnologias-informatica/
Si realiza un clic en tal link de arriba, notará está dirigiéndose dentro de la sección "tecnologías informática" a su index.thml, el hosting le muestra en realidad: https://www.estudiargratis.com.ar/tecnologias-informatica/index.html (por más que no le esté mostrando: index.html).

Comenzando el curso básico de HTML:

Microsoft Expression Web o Adobe Dreamweaver -por mencionar los dos editores más comercializados para la edición de páginas web-, y multitud de programas de este tipo, tienen entornos de usuario para que uno no tenga que escribir en código HTML. Pese a esto, es totalmente necesario tener una idea, ya que siempre se hacen retoques o se arreglan cosas directamente en html -y personalmente prefiero no utilizar ningún programa y directamente escribir en HTML-, en mi opinión no se puede ser Webmaster desconociendo este tema. Por ejemplo en publicidad pueden brindarle un código para que lo incluya en su Web y debe conocer algo de como funciona, o si quiere optimizar el código.

En este lenguaje se usan etiquetas (también se les suele decir: marcadores o 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 informativa: Preste atención que cambia en una barra, si no la coloca se provocarán errores por ejemplo de no cerrar <b> con </b> (HTML4) le quedará todo sobresaltado en negrita -Está leyendo algo del autor: Javier R. Cinacchi de Estudiargratis.net-. No obstante, hay algunas excepciones que no llevan cierre como ser <br /> (HTML5). Lo conveniente es utilizar hrml5 + estilos, entonces ya allí no se utiliza directamente en el HTML los formatos como ser <B> que es negrita, se indica el reemplazo en CSS ( lo básico en css ) que es el atributo (propiedad): font-weight:bold;, en CSS se puede indica de tal modo la vieja <B>.

¿Dónde están los < >?

Tenga en cuenta que : El signo < está en Micrsoft Windows en alt 60; El signo > es alt 62. Asimismo está directamente y en general estos dos signos también al lado de la letra "Z".

Comenzar a hacer un Sitio web en HTML5

En HTML4 alcanzaba con especificar <HTML> y luego el cierre que quedaría al final de todo de la página </HTML> en HTML5 con estilos CSS se hace como ya se ha visto en estudiar Expression web . Pero el cierre se mantiene: </HTML>

Así se hacia por ejemplo con Microsoft Frontpage:


Así se hace con el programa Expression Web 4:


Luego, un documento HTML está dividido en dos zonas principales; head y body

El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> Irá unas etiquetas con las correspondientes especificaciones, que no se verán directamente por el usuario, son principalmente de programación incluyendo estilos CSS o la llamada a un CSS externo, y posicionamiento web. Por ejemplo:

<META NAME="Description" CONTENT="Aquí, entre las comillas se escribe ">

En este caso de arriba indica la descripción. Esto es datos para que los buscadores encuentren fácilmente el trabajo realizado de diseño.

Entre <head> y </head> por ejemplo podrá poner también el titulo de la página con las siguientes etiquetas:

<TITLE>  </TITLE>

Por ejemplo esto quedaría la primer parte así (simplificado) con un titulo:

<Html>
<head>
<title>Cursos en estudiargratis.com.ar </title>
</head>

Nota: El titulo, es algo importante deberá colocar aquí palabras clave y representativas. Por ejemplo un título para esta página podría ser:  "Curso de diseño web programas y HTML5". La descripción aproximadamente tres veces más larga que este título.

El cuerpo, o sea lo que se verá irá comprendido entre las etiquetas <BODY> y </BODY> Es el contenido más amplio, porque esto es lo que se mostrará en un navegador a un visitante de una web; es decir el contenido.

Por ejemplo entre <BODY> y <BODY> podría ir

<H1>Curso de diseño Web en Estudiargratis.com.ar por Javier R. Cinacchi </H1></P>

Donde: H1 es resalte de título (se sigue usando en HTML5).


En relación a la 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 un titulo en H1, pero cuidado de no pasarse en la optimización, todo tiene que ser bastante natural, nada exagerado pero sí resaltado lo más importante. Esto es para que la página web sea posicionada bien en su temática, y no llegue a considerarse por Google, sobreoptimizada.

En la red Internet se encuentran millones de millones de páginas. Hay “trucos” para que nuestra página figure y aparezca en Google en una buena pocisión. De otra forma las que poseen esos trucos 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 últimas, mejor tratar de estar primero. Unas palabras claves por ejemplo es para una Web de cursos: educación, aprender, estudiar, etc. más la temática puntual.

Una frase bien armada sería en relación por ejemplo a este curso: "Diseño web desde Frontpage a Expression Web 4. Aprender diseño web con programas y HTML5, optimización y sin obviar HTML4." (obviamente deberá encontrar la frase correcta para su caso esta es sólo a modo de ejemplo.