Las páginas web mantienen una estructura muy sencilla que debemos respetar, para que los navegadores sean capaces de presentarla. No podemos comenzar nuestra página con una etiqueta de párrafo, por ejemplo, sino que debemos indicar qué tipo de página estamos generando, qué información adicional llevará y dónde comienza el contenido que debe ser mostrado.
Cada página comienza con: < HTML >
A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.
La página acabará con
< /HTML>
Es decir:
Cabecera
Las etiquetas de encabezado, o comúnmente conocidas como "cabeceras HTML" (Heading Tag en inglés) son etiquetas HTML que se usan para definir la cabecera o título de una página. Las cabeceras se definen con <Hn> donde n es un número entre 1 y 6 que determina el orden de la cabecera. Cada cabecera empieza con <Hn> y debe cerrarse con </Hn> y el contenido del título se sitúa en el medio de los dos comandos.
La cabecera de un documento está delimitada por las etiquetas < HEAD > y </HEAD > Sus componentes son opcionales. El más importante es <TITLE> , que permite escribir el título del documento. El título no se muestra en la página, sino en la parte superior de la ventana del visualizador, como identificador en los bookmarks y en la history list. Se utiliza de la siguiente forma:
<HEAD>
<TITLE>Título del documento HTML</TITLE>
</HEAD>
¿Para qué sirven las cabeceras?
Las cabeceras organizan la estructura y establecen un orden jerárquico en los archivos HTML, e informan al navegador sobre qué datos mostrar. El formato de las cabeceras se realiza a través de los archivos CSS que sirven para separar el contenido de la formatación. Es obligatorio utilizar las "cabeceras" para que los textos puedan visualizarse. Se puede utilizar la herramienta "W3C Validator" para analizar la validez de un documento HTML.
Lo más importante: una estructura organizada y clara de los archivos HTML ofrece no solo ventajas para el webmaster, sino también para los usuarios y los motores de búsqueda ya que estas ofrecen información importante al usuario sobre el contenido y le facilita seleccionar aquello que de verdad le es de interés, y los motores de búsqueda reciben un código fuente válido con palabras clave relevantes que resumen el contenido.
Estructura java script
. Desde la página HTML
Se toman en cuenta los siguientes puntos:
El script se coloca dentro de las etiquetas < head > y < / head > .
Las etiquetas para ejecutar este script son < script > y < / script >
Dentro de estas etiquetas se incluye el atributo language="javascript" el cual indica que nuestro script se basa bajo este lenguaje ( Hay otros lenguajes, por ejemplo vbscript, JScript, etc.).
Una buena costumbre es colocar el código dentro de las etiquetas de comentario del lenguaje HTML, esto es en casos en que el navegador de internet no soporte scripts y evite visualizar el código del script. Las etiquetas de comentarios inician con < ! -- y terminan con // -- >
Veamos un ejemplo:
< html >
< head >
< script language= "javascript" >
< !--
alert ("Mi primer programa en Javascript"); //alert es una función para mostrar en pantalla un mensaje
//-- >
< / script >
< / head >
< body >
< / body >
< / html >
2. Desde un archivo externo
Puntos a Tomar en cuenta:
Para llamar un archivo con el código en Javascript basta con colocar las mismas etiquetas de < script > y < / script > dentro de la cabecera (head) y colocar dos atributos que son type="text/javascript" y src="ruta del archivo" .
El código se guarda en un archivo con extensión .js ;que es la extensión de los archivos Javascript y el código ya no se encierra entre los comentarios de HTML.
Veamos el siguiente ejemplo:
En un archivo llamado codigo.js usaremos la función alert("Mi Primer programa en Java" ); como en el ejemplo anterior para mostrar en pantalla un mensaje. El archivo se ubica en la misma carpeta que nuestra página web.
< html >
< head >
< script type="text/javascript" src="codigo.js" > < / script >
< / head >
< body >
< / body >
< / html >
El resultado, en cualquiera de las dos formas es:
Dependiendo de las necesidades o facilidades del programa.
Las etiquetas HTML más relevantes
<title>:
Para definir el titulo de una página. Importante para el SEO.
<link> y <style>:
Ambas van dentro del <head>, y sirven para aplicar estilos CSS a nuestro documento. Con <link> vinculamos de forma externa un archivo.css, y con <style> podemos escribir directamente código CSS dentro del head.
<h1>, <h2>, <h3>….<h6>:
Encabezados, numerados del 1 al 6 por orden de RELEVANCIA. El uso de estos encabezados es determinante para el SEO, porque es la mejor forma que tienen Google de entender la estructura de nuestro contenido y poder saber qué es lo relevante.
Un pequeño tip:
No se te ocurra, meter dos o más encabezados <h1>. Lo mejor, es poner sólo uno y que contenta tu keyword, y luego estructurar el contenido de forma coherente con <h2> y <h3>, incluyendo en ello la keyword y variantes, no siempre la misma exactamente.
<table>, <tr> y <td>:
Son las tablas, las filas y las celdas. Están un poco obsoletas aunque a veces me han sacado de un apuro.
<div>:
Es un elemento “contendedor” de otras cosas. Realmente es lo que más se usa. Sabiendo manejar un <div style=”loquenecesites”>contenido</div> puedes hacer casi todo. Podrás ver un ejemplo práctico al final del post.
<a>:
Para añadir enlaces. Dentro de ella tendremos dos atributos importantes, que son: href=”indica_la_URL_o_RUTA” y target=”self o _blank”, según quieras que el enlace se abra en la misma página o en una pestaña nueva.
<img>
Es la etiqueta con la que se insertan las imágenes. Este es uno de los pocos casos que no necesita etiqueta de cierre, sino que vale con: <img src=”rutadelaimagen” alt=”textoalternativo” />, sin poner </img>
<li>, <ol>, <ul>:
Son las etiquetas que controlan las listas ordenadas y desordenadas. Ejemplo:
❤ Estos circulos son de listas desordenadas, usando la etiqueta <ul>
✔ Este número sale porque utilizo una lista ordenada, con <ol>
✔ Cada elemento o item de una u otra lista, se controla mediante <li>
<b>:
Convierte el texto a negrita. También os podéis encontrar con el antiguo <strong> que hace lo mismo.
<i>:
Lo mismo pero para aplicar cursiva al formato de un texto. Ejemplos: esto irá en <b>negrita</b> y este otro texto en <i>cursiva</i>
<p>:
Con esta etiqueta determinamos un texto de párrafo. Se le aplican estilos como a todas, el dato relevante de esta etiqueta sería explicar el hecho de que añade un salto de línea y otro más al cerrarla con </p>, como si diéramos dos veces al “intro”, para que me entiendas.
<br />:
Esta otra etiqueta sin embargo, hace un salto de línea simple. Es decir, lo que venga después de esto irá justo en la linea siguiente, pero sin dar otro espacio más. Mira la diferencia:
“Escribo un texto normal y la siguiente linea la escribo después del cierre de un </p>
Esta es la siguiente linea cerrando con esa etiqueta <p>.”
“Ahora escribo una linea pero hago un salto de linea simple con <br />
Esta es la siguiente linea despues de usar el <br />, ¿se nota diferencia del espacio de una y otra?”
IMPORTANTE:
Todas estas etiquetas html puedes verlas al escribir un post en la pestaña de “TEXTO”, no es la de “VISUAL”. Si lo haces en visual, se escribe la etiqueta como un texto normal (tal y como estoy haciendo yo en este post), pero si quieres codificarlas debe ser en la pestaña texto, donde luego no aparecen en visual pero sí están cumpliendo su función.
Aquí te dejamos links de paginas de donde sacamos la información:
https://www.haciaelautoempleo.com/etiquetas-html-basicas/
http://fpsalmon.usc.es/genp/doc/cursos/html/estructura.html
https://www.haciaelautoempleo.com/etiquetas-html-basicas/
http://fpsalmon.usc.es/genp/doc/cursos/html/estructura.html
No hay comentarios.:
Publicar un comentario