El HTML y el hosting no asustan tanto
20 nov. 2016

El HTML y el hosting no asustan tanto

Lenguaje HTML en ecommerce
¡Muy buenas a todos! En este post me gustaría hablaros un poco de mi primer contacto “formal” con el html y el hosting (que fue muy satisfactorio, por cierto).

Nociones básicas de HTML

Era sábado por la mañana, y aún no tenía mis neuronas del todo activas, pero estaba motivado para empezar a conocer mejor a este nuevo amigo. Empezamos por lo básico, así que abrimos un Bloc de Notas y empezamos a escribir. Lo primero que hay que saber del HTML es que tiene dos herramientas preexistentes: El concepto de Hipertexto (conocido también como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. 

Por otro lado el HTML no es propiamente un lenguaje de programación, sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará y se visualizara en la forma como éste lo entienda.

Ya metiéndonos en materia, las dos etiquetas fundamentales (dentro de las cuales tienen que ir nuestro código fuente son) <html> como etiqueta de apertura y </html> como etiqueta de cierre.

Por otro lado, debajo del primer <html> están las etiquetas <head> y </head>, que contiene toda la información sobre los metadatos. Estos no aparecerán en la web

Todo lo que será visible al visita la página con el navegador, debe de estar entre las etiquetas <body> (cuerpo en inglés), como etiqueta de apertura y </body> par el cierre. Además, las etiquetas de HTML también pueden tener concepto de atributo, los cuales permiten realizar una gran cantidad de variaciones.
 
ejemplo de atributo
Si queremos ver cómo va yendo nuestra página HTML, solamente tenemos que guardar el archivo en formato .html y luego abrirlo con el navegador. Hasta aquí lo más básico de todo, ahora empezamos a ver cosas un poco más complicadas.

Algunas etiquetas del HTML

Bien, siguiendo con la clase, Víctor Palomar nos mostró algunas etiquetas para que las fuéramos probando:

Etiquetas asociadas al tipo de letra:

etiquetas de texto

Etiquetas de enlace <a></a>

<a href="http://www.google.com">Visita www.google.com</a>
<a href="http://www.ua.es" target ="_blank">Visita ua.es</a>

Posibles valores target:

_blank: Abre el documento vinculado en una ventana nueva del navegador.
_self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.
_top: Abre el documento vinculado en la ventana completa del navegador

Imagen <img />

<img src="imagenes/logo_animales.gif">
También podemos ajustar el tamaño de las imágenes con esta etiqueta: <img src=imagen/foto.jpg”width=(número) height=”número”>


Texto Alternativo: atributo alt

Ejemplo: <img src="gatito.gif" alt="Imagen gato">

Colores

Los colores deben escribirse mediante el denominado código hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color. Para poner un color, debemos ponerlo dentro de la etiqueta body. Para que no os volváis locos, aquí está una imagen con algunos colores del HTML, aunque las posibilidades son mucho mayores: 

colores en HTML

Párrafos

Cuando queremos introducir una línea en blanco, utilizamos la etiqueta <p> de párrafo. Esta etiqueta admite su correspondiente cierre </p>, aunque no es necesario

Cabecera

Para poner el título al documento, hay que introducir dos nuevas etiquetas dentro de la cabecera. Son las etiquetas <title> de apertura y </title> de cierre. Y, entre ellas ponemos la frase que defina nuestro documento

Vínculos (hay que escribir toda la url del sitio)

Ejemplo: <a href=”htttp://www.google.ES”> Ir a Google </a>

Por otro lado, en ocasiones cuando un documento es muy extenso, es conveniente establecer alguna forma rápida para subir y bajar a una determinada parte del documento. Esto se realiza mediante anclas. Para ello, hay que establecer un ancla o marca en la/s parte/s del documento a los que queremos acceder de forma rápida.La sintaxis de la marca es:

<a name="ancla1"></a> 

Hay que ponerlo en el punto de destino. No hace falta que haya nada entre la etiqueta de apertura y cierre.

En el punto activador escribiremos 

<a href ="#ancla1"> Ir a la parte tal </a>.


Listas

Para las no numeradas, hay que empezar el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de cierre </ul>. Cada objeto que forma la lista va precedido de la etiqueta <li>
Para las numeradas, habrá que poner la etiqueta <ol> (ordered list) y su final con la etiqueta
</ol>. Cada objeto que forma la lista va precedido, igual que en las anteriores de la etiqueta <li>

CSS (hojas de estilo en cascada):

Es un lenguaje de hojas de estilo para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado

Estilos en línea (ejemplo): <P STYLE="font-size:20px; font-family:Courier; color:green";>Ejemplo de estilo</P>

También vimos otras muchas etiquetas, como las de elaboración de formularios, pero para no resultar pesado, las veremos próximamente.

Ver el código HTML de una página

Si llegados a este punto aún tenéis curiosidad por el HTML, podéis curiosear como está construida alguna que otra página web. Para hacerlo es tan fácil como darle a botón derecho en cualquier página y darle a “Ver código fuente de la página” y veréis algo como esto: 
 
código fuente de una página


Si como yo necesitáis cierto orden para ver las cosas, siempre podéis utilizar la Herramienta de desarrolladores para ver los elementos poco a poco.

Diferencias entre hosting y dominio

Estos dos términos muchas veces van juntos, pero la mayoría (entre los que me incluye) no saben muy bien en que se diferencian.

El alojamiento web (hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web.

Por otro lado, el dominio es el nombre que identifica a nuestra página web y apunta a la dirección física de nuestro alojamiento

También existe el sistema de nombres de dominio (DNS), el cual traduce los nombres de dominio para poder enviar las direcciones IP necesarias para la navegación en Internet.

VER MÁS SOBRE LA IMPORTANCIA DE LA ELECCIÓN DEL SERVIDOR

Conclusiones sobre la clase de HTML y Hosting

La verdad es que después de esta clase, el mundo del HTML no me parece tan complicado. Además, Víctor nos indicó algunas webs para contratar hostings y nos dio los pros y los contras de aquellas que había probado. Puede decirse, que ahora sí que estoy preparado para empezar mi proyecto (al menos sé lo básico, jeje).



¿Quieres saber los másters y cursos en ecommerce que impartimos?

INFÓRMATE AQUÍ

¡Por fin un curso de AdWords en Alicante!


(También en Modalidad Online)
comments powered by Disqus