En la clase del Máster Online que impartió Víctor Palomar vimos los conocimientos básicos que nos nombrarán en las distintas clases de SEO, cómo escribir para un blog, su edición…
Nos introdujo en el código HTML, las etiquetas más importantes, cómo introducir un vídeo en un WordPress; y el lenguaje JavaScript.
Por otro lado nos enseñó cómo descargarnos las Landings, modificarla en introducirla en nuestra tienda online.
El HTML es un lenguaje que se utiliza para escribir las páginas web, es decir, es la estructura.
Y el CSS, hojas de estilo, es la forma que tiene la estructura: colores, tipo de letra, etc.
El código fuente del HTML se puede escribir en cualquier bloc de notas, a continuación vamos a ver las etiquetas más importantes: •
html; etiqueta de apertura, indica al navegador lo que tiene que leer.
•/html;etiqueta de cierre.
•body; etiqueta de apertura del cuerpo.
•/body; etiqueta de cierre del cuerpo.
•p; etiqueta de apertura, indica que va a empezar un párrafo.
•/p; etiqueta de cierre, indica el final del párrafo.
•a; etiqueta de apertura, se usa para poner un enlace.
•/a; etiqueta de cierre, se pone al final del enlace. Estas etiquetas tienen atributos como “_blank”, abre el documento vinculado en una ventana nueva del navegador.
Como podemos observar en las etiquetas anteriores, la mayoría de las etiquetas tienen una de apertura y otra de cierre, cada una tiene unos atributos específicos de lo que es la etiqueta. Aunque hay excepciones. Existen determinadas etiquetas del código HTML que no es necesario poner una de apertura y otra de cierre, como el salto de línea que es “br/”.
También disponemos de los caracteres especiales como el € que sería “amp;euro”.
Unas de las etiquetas más importantes con las del encabezado, se usan para poner los títulos, conforme va aumentando el número el tipo de letra se va haciendo más pequeño, el H1 siempre será el más grande:
•H1; título principal.
•H2; título secundario.
•H3; título intermedio. Las etiquetas asociadas al tipo de letra no las hace falta poner hojas de estilo.
Si queremos poner un color de fondo a una página web hay que meterlo dentro de las etiqueta body.
Etiqueta de cabecera: head; y /head entre estas etiqueta del código HTML se pone lo que se verá en la parte de arribe del navegador. Otra de las etiquetas más importantes es donde pones el título, sería así: tittle y /tittle.
Los textos o enlaces “ancla” son los que se usan cuando hay un enlace, lo pulso y me baja a otra zona de la misma web donde estoy. Las etiquetas que usamos para esto son: a name=“ancla1” y /a.
Si estamos navegando por internet, cuando estamos en una página web pulsando el botón derecho y a continuación, ver código fuente, se te abrirá otra página con el código HTML.
Otra forma de ver el HTML de una web es pulsando el botón derecho e inspeccionar elemento, entonces el código HTML te aparecerá en la parte inferior o en la parte derecha de la pantalla.
Si lo haces de esta última forma y pones el cursor encima de una etiqueta HTML, se sombrea en la página web lo que pertenece a esa etiqueta.
En la segunda parte de la clase vimos como descargarnos una Landing page y modificar su apariencia.
Hay diferentes webs para descargarnos una Landing, una de ellas es http://www.mejoresplantillasgratis.es, ahí encontraremos plantillas para descargarnos y poder hacer una Landing.
Una vez descargada nos saldrán varios archivos, entre ellos tendremos; una home, un services o un about.html, en el que pincharás y se te abrirá una página web.
Aquí podrás ver las mejores herramientas gratuitas para crear una landing page.
¿Cómo la modifico? Por ejemplo si estás en la home.html, lo puedes abrir con un editor de texto. Una vez abierto, dentro de las etiquetas, sin borrar ni las aperturas ni los cierres, podrás cambiar lo que hay dentro, incluso podrás cambiar las imágenes.
Para poder hacer una Landing dentro de tu página web debes pasar los archivos al servidor y para ello debes usar un gestor de FTP, por ejemplo puedes usar el Filezilla.
Con este programa subes la Landing que te has descargado a tu servidor, creando una carpeta nueva. Al archivo principal hay que llamarlo “índex.html”, para que lo reconozca.
De esta manera estará introducido en tu página web.
¿Cómo insertamos un vídeo de Youtube en un WordPress?
Si lo que tenemos en un WordPress, podemos observar que hay dos opciones la visual o la de texto, que es la parte donde se ve el código HTML. Pa
ra insertar un vídeo de Youtube mediante el código HTML debemos seguir estos pasos:
1. Ir a la web y buscar el vídeo que nos interesa.
2. Una vez estamos en el vídeo, le damos al botón compartir, en insertar nos dará un código HTML.
3. Copiamos el código HTML y lo copiamos en la parte de texto de nuestro WordPress.
4. Lo publicamos y ya se verá el vídeo en la parte visual.
Por último vamos a ver el lenguaje JavaScript.
El lenguaje JavaScript es un código de programación en el servido y va a estar mezclado con las etiquetas HTML.
Tiene disponibles variables, métodos y objetos predefinidos, pero se tiene un menor control sobre los tipos de variables, gracias a esto podemos asignar distintos tipos de valores a una misma variable. Esto conlleva a auge se pueden producir errores.
Hoy en día el lenguaje JavaScript es el más utilizado. En este post,¿Qué es Java Script? puedes saber más sobre el lenguaje JavaScript. La etiquetas de JavaScript son: lt;scriptgt; y lt;/scriptgt;. Entre estas etiquetas insertaremos las funciones JavaScript. Con atributo onClick definiremos la función que será llamada al pulsarse sobre el objeto. Algunos de ellos pueden ser: •OnDbClick al hacer doble click. •onMouseOver mientras el cursor está encima. •onMouseOut cuando el cursor deje de estar encima.
Así concluyo la clase de introducción al HTML. Fue bastante práctica ya que si nunca has visto el código HTML, te servirá para entender un poco como están compuestas las páginas web.
- Sobre el Autor
- Últimos artículos
Este artículo está escrito por el equipo de Ecommaster, primera escuela de comercio electrónico, creada en 2010.
