Andaduras por el mundo de Social Media

Siempre mirando el lado bueno de la vida

Cómo dar un toque personal con HTML

with 4 comments

Utilidades que se le puede dar al HTML:

  1. En vuestro blog, podréis cambiar el texto: la fuente, el color, el tamaño, etc.
  2. Añadiendo el widget llamado “texto”, se podrá incluir, por ejemplo una foto, una descripción de la persona y un link para que nos sigan en Twitter.
  3. Va a servir para hacer comentarios en los foros.
  4. Para añadir mejoras a las páginas de Facebook, personalizándolas.

No es recomendable usarlo para crear una página web desde el principio, como se hacía antes,  porque se tarda mucho.

Cómo funciona HTML:

Funciona por etiquetas, se abren < > y se cierran < />. Siempre hay que cerrarlas, excepto algunas. Algunos ejemplos:

Etiqueta

Utilidad

<html>

La página siempre se empieza por ésta

<head>

Todas las páginas se componen de  cabeza. Es uno de los sitios donde está la información que le interesa a Google para luego posicionar: título de las pestañas, nombre de la web, etc.

<title>

Para poner un título

<body>

En el cuerpo va el contenido, texto, imágenes, etc.

<p>

Para escribir párrafo: es de los pocos que no hay que cerrar

<h1>

Para título grande y hasta <h6> para el título más pequeño

<img src=”url”>

Para incluir una imagen y no es necesario cerrarla pero se puede poner

<ul>

Comienzo del  listado sin orden

<li>

Para escribir el nombre del contenido de una lista

<ol>

Enumera la lista


También hay otros, llamados atributos como:

Atributo

Utilidad

width=”número Para especificar el ancho de una imagen, por ejemplo.
target=”_blank” Para que al pinchar el link se abra en una página nueva.
size=”14” Para el tamaño de la fuente, 14, por ejemplo.
face=”verdana” Para el tipo de fuente, en este caso, verdana


Tampoco es necesario saberse todas las funciones de memoria porque en internet tenemos sitios donde consultarlas, como por ejemplo, en el siguiente fichero.

Para programar en HTML vamos a crear el fichero con el bloc de notas de Windows. Es muy importante recordar que al darle un nombre al fichero tenemos que añadir la extenxión .html.

Un ejemplo práctico:

En el diseño de mi blog he agregado un nuevo Widget de texto con HTML y éstos son los resultados:

Código HTML añadido en un nuevo widget Lo que aparece después de añadirlo
 prueba Codigo HTML  Ejemplo HTML en blog


Cómo conseguir código HTML más fácil:

En esta web, vamos a poder conseguir código HTML, casi, sin conocerlo. Una vez que se entra en la web, en el espacio que hay para el texto, se escribe y se le da el formato que se necesite: color de letra, tipo de fuente, tamaño, etc. También, se pueden crear tablas, todo con la ayuda de los botones que te facilita. Os adjunto un pantallazo de un ejemplo:
 quackit online html editor

Cuando ya se tiene dado el formato, lo que hay que hacer es seleccionar el botón Fuente HTML y se copia del código fuente, sólo lo que está entre el primer <body> y el último </body>, en este ejemplo, se copiaría lo que está marcado en rojo del siguiente pantallazo:
codigo html con quackit online html editor

También os adjunto esta web que tiene un manual de HTML. En ella podéis buscar lo que necesitáis hacer con HTML y os explica, fácilmente, cómo hacerlo y con ejemplos. 

Como podéis ver, no es complicado de hacer y os puede servir para dar un toque personal a vuestro blog, por ejemplo ¿os animáis?
Anuncios

Written by Gloria Muro López

27/02/2013 a 22:15

4 comentarios

Subscribe to comments with RSS.

  1. Creo que ya leí este post tres veces… y no será la última !!! Hiciste del HTML un código muy sencillo al que perderle el miedo … me encanta !!!

    Gabriela

    28/02/2013 at 21:34

  2. Me alegro que le hayas perdido el miedo. Además, con tanta herramienta es más fácil hacerlo. Si tú supieras cuando yo programaba en Cobol… Esto es pan comido!. De todas formas, si te surge alguna duda, ya sabes que puedes contar conmigo.

    Gloria Muro López

    28/02/2013 at 22:25

  3. […] Utilidades que se le puede dar al HTML: En vuestro blog, podréis cambiar el texto: la fuente, el color, el tamaño, etc. Añadiendo el widget llamado “texto”, se podrá incluir, por ejemplo una foto, …  […]

  4. […] Utilidades que se le puede dar al HTML: En vuestro blog, podréis cambiar el texto: la fuente, el color, el tamaño, etc. Añadiendo el widget llamado “texto”, se podrá incluir, por ejemplo una foto, …  […]


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: