Contenidos

    alt

    Los genes son el lenguaje de la naturaleza, las instrucciones que dicen cómo se fabrica un ser humano. Las webs están escritas en HTML, un lenguaje de marcado. En HTML se puede definir el tipo de letra de la página web, el color de fondo, la inserción de imágenes y muchas más características. Si no estás muy familiarizado con el lenguaje web, te presento algunos códigos HTML para páginas web que te serán de mucha utilidad.

    ¿Qué es un código HTML?

    HTML es un acrónimo que hace referencia a HyperText Markup Language, es decir, lenguaje marcado de hipertexto. 

    El HTML es un lenguaje de marcado, concretamente, un lenguaje de programación capaz de generar páginas web estáticas. Si el lenguaje HTML se puede combinar con otros lenguajes equivalentes para crear webs dinámicas. 

    El estándar HTML lo marca la W3C, es decir, el World Wide Web Consortium. 

    ¿Para qué se usan los códigos HTML?

    El uso principal del lenguaje HTML es estructurar de forma estática una página web completa. Gracias a este tipo de lenguaje, podemos ver de forma esquemática todo el contenido de una web y variar cada uno de los aspectos que la componen.

    A la hora de preparar una web de cara al SEO es fundamental manejar este lenguaje de programación, gracias a las etiquetas y los códigos podemos adaptar por completo una página a las exigencias seo de los buscadores.  

    Códigos HTML para web

    Los códigos HTML se generan a base de etiquetas, estas etiquetas son fragmentos de texto ubicadas entre corchetes, para determinar el comienzo y la finalización del código. 

    Gracias a estos códigos podemos generar, a base únicamente de texto, todos los elementos gráficos de una web. 

    Existen ciertos códigos muy concretos, cuyo uso permite optimizar una web, ya sea de cara al SEO o buscando otros fines. Algunos de estos códigos específicos los repasamos a continuación. 

    Formateo de texto

    Para poner un texto en negrita:

    <b>texto en negrita</b>

    Para poner un texto en cursiva:

    <i>texto en cursiva</i>

    Para subrayar un texto:

    <span style=»text-decoration: underline;»>texto</span>

    Para poner un texto como cita:

    <blockquote>cita</blockquote>

    Para alinear párrafos:

    A la izquierda

    <p style=»text-align: left;»>parrafo</p>

    Centrado

    <p style=»text-align: center;»>parrafo</p>

    A la derecha

    <p style=»text-align: right;»>parrafo</p>

    Justificado

    <p style=»text-align: justify;»>parrafo</p>

     

    Enlaces

    Si quieres poner un enlace dentro de tu web, la línea de código es la siguiente:

    <a href=»web enlazada»>Texto del enlace</a>

    Ejemplo:

    <a href=»https://www.yoseomarketing.com/»>Agencia de Marketing Online</a>

    Y se vería así:

    Agencia de Marketing Online

     

    Imágenes

    Las imágenes se insertan en una web usando este código html:

    <img src=»dirección de la imagen» alt=»nombre de la imagen» width=»Xpx» height=»Ypx»>

    Src es la dirección en la que está alojada la imagen, alt es el nombre de la imagen (se visualizará si la imagen no carga en el navegador del internauta), width es la anchura de la imagen y height es la altura.

    Un ejemplo

    <img src=»https://www.google.es/images/srpr/logo11w.png» alt=»Logo de Google» width=»400px» height=»100px»>

     

    Comentarios

    Si te lanzas a escribir tu propio código HTML, agradecerás poder hacer anotaciones comentándolo. Para ello utiliza la etiqueta de comentario

    <!–

    –>

    <!– Este es un comentario en HTML –>

    Código para un pop up

    <script type=»text/javascript»>

    // Popup window code

    function newPopup(url) {

                 popupWindow = window.open(

                             url,’popUpWindow’,’height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes’)

    }

    </script>

    <h2><a href=»JavaScript:newPopup(‘http://www.quackit.com/javascript/examples/sample_popup.cfm’);»>Nueva Ventana</a></h2>

     

    Antiplagios

    Qué rabia cuando te esfuerzas en crear un contenido para tu web y luego descubres que alguien te lo ha copiado vilmente. Ahora puedes ponerle las cosas más difíciles a los copiotas con este código html que impide que alguien pueda seleccionar texto de tu web:

    <script>function disabletext(e){return false}function reEnable(){return true}document.onselectstart=new Function («return false»)if (window.sidebar){document.onmousedown=disabletextdocument.onclick=reEnable}</script>

     

    Códigos de colores HTML

    Para determinar los colores que forman una página web también utilizamos códigos HTML. Incluir esta serie de códigos en estructuras de programación permite determinar, de manera concreta, qué colores van a componer la web.

    En el caso de los códigos de color, están compuestos por una almohadilla #, seguido de una serie de seis números y letras combinados, de esta manera, cada tono dispone de un código específico. 

    Paleta de colores en HTML

    Algunos ejemplos de colores en la paleta de colores HTML son los siguientes:

    #FF0000 Color rojo puro

    #00FF00 Color verde intenso

    #0000FF Color azul oscuro

    #FFFF00 Color amarillo intenso

    #CCEEFF Color azul claro

    Como ves, esta combinación de colores y letras tras el signo # genera una etiqueta de color que la web reconoce, y la plasma como un color efectivo en la web, que queda visible para el usuario. 

    Los mejores códigos HTML para tu web

    Otros códigos HTML que podrás utilizar en tu página web son los siguientes:

     

    <b> negrita negrita

    <i> cursiva cursiva

    <u> subrayado subrayado

    <s> tachado tachado

    <tt> máquina de escribir máquina de escribir

    <p> párrafo

    <hr> quiebre temático

    <li> lista numerada

    <div> contenedor genérico

    <a> hiperenlace

    <br> salto de línea

    <img> imagen

    <audio> sonido

     

    Artículos Relacionados
    SEO Responsive 12/06/2019 SEO Responsive, una condición básica para posicionarse en Google

    El SEO Responsive es una de las condiciones básicas para el posicionamiento en Google. En el post anterior analizábamos...

    desactivar gutenberg 12/12/2018 Cómo desactivar Gutenberg y volver al antiguo editor de WordPress

    Poca gente sabe que fui de las primeras personas en ir al trabajo en patinete eléctrico. También me saqué...

    gutenberg wordpress 11/12/2018 Gutenberg WordPress: Así es el nuevo editor del CMS más popular

    Este fin de semana ha sido movidito, y es que de golpe y porrazo han llegado dos de los...

    poner un hipervinculo en html 24/10/2018 Cómo crear hipervínculos en HTML para poner links a otras páginas

    Llamados links o hipervínculos, los enlaces HTML son los puentes que nos permiten movernos de una página a otra....

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    1. Avatar eduardo dice:

      hola yo soy alumno de software y quiero saber como puedo acer que en el menu de mi pagina tira la informacion sea el contenido me han dicho q tengo que crear otras pagina y enlazar con el codigo que ya tengo y poner la etiqueta que ustedes dejaron en esta pagina

      1. William Penguin William Penguin dice:

        Hola, Eduardo, ¿qué quieres hacer exactamente?

    2. Avatar Rebeca dice:

      Mil gracias, el último código me va perfecto para mi blog, dado el carácter del contenido que publico en él. Imagino que se coloca bajo el de la plantilla XHMTL del sitio, ¿es así?
      Un abrazo.

      1. William Penguin William Penguin dice:

        Hola, Rebeca,

        Creo que sí, pero no estoy seguro. Gracias por comentar.

        1. Avatar jhojan dice:

          si, si es así