• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
Pampua

Pampua

Diseño web y marketing online

  • Servicios
    • Diseño web
    • Marketing digital
    • Mantenimiento web
  • Portfolio
  • Sobre mi
  • Blog
  • Contacto

Básicos del diseño web: HTML

Hoy vamos hablar de HTML, el lenguaje con el que se “programan” las páginas web, os voy a contar lo que a mi me gustaría que me enseñaran si tuviera que encargarme de modificar una página web sin tener ningún conocimiento de HTML.

06/09/2018 Por Ramón Deja un comentario

https://roptex.com/podcast/podcast29.mp3

Apple Podcasts | Google Podcasts | Spotify | Pandora | RSS

Hoy vamos hablar de HTML, el lenguaje con el que se “programan” las páginas web (porque técnicamente no es un lenguaje de programación), os voy a contar lo que a mi me gustaría que me enseñaran si tuviera que encargarme de modificar una página web sin tener ningún conocimiento de HTML, pero antes, demos paso al patrocinador!!!!:

WebEmpresa, hosting especializado en WordPress.
Es el hosting que uso y recomiendo desde hace tiempo
En pampua.es/webempresa te dejo los 13 motivos que tienes contratarlo; échale un vistazo!
Además te doy un cupón del 20% de descuento. Entra ahora mismo en pampua.es/webempresa y guárdate tu cupón.

¿Que es el HTML?

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Los archivos con el código HTML se almacenan en el servidor y los navegadores se encargan de interpretar el código HTML, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

HTML5

Hoy en día el estándar que se utiliza es HTML5. El HTML empezó en 1991 y ha ido evolucionando y adaptándose, añadiendo nuevas funcionalidades que nos hacen el trabajo más fácil. Toda página web hecha con Html, por complicada que parezca, se divide en dos partes bien diferentes a las que llamaremos Cabecera (head) y Cuerpo (body). Además, todas las páginas web empiezan con la palabra mágica (o etiqueta) <html> y terminan con la etiqueta </html>.

Las etiquetas

Como acabáis de ver, HTML es un lenguaje de etiquetas

La mayoría de las etiquetas hay que abrirlas y cerrarlas. Se cierran con la / antes del nombre de la etiqueta. Hoy no voy a hablaros de todas las etiquetas que existen, sino únicamente de las que pienso que vais a necesitar para hacer pequeños cambios en una página que ya esté hecha (en WordPress por ejemplo)

Para escribir un párrafo, lo haremos dentro de la zona visible (el body) encerrando lo que queremos escribir entre los símbolos <p> y </p> que son las etiquetas para escribir párrafos.

Si encerramos un texto entre <b> y </b> éste aparecerá en negrita. El tag <b> representa a la propiedad «bold» que significa negrita.

Si ponemos un texto entre <i> y </i> éste aparecerá en cursiva. El tag <i> representa a la propiedad italic, cursiva.

Y si encerramos un texto entre las etiquetas <u> y </u> éste aparecerá subrayados.

Para crear un titular basta con escribir su texto y encerrarlo en este caso entre las etiquetas <h1> y </h1>. Para mejorar el posicionamiento sólo debería haber un h1 en cada pagina.

Existen otras etiquetas de títulos en Html5, h2, h3, h4, h5 y h6, aunque no creo que pasemos del h2 o h3 normalmente para ir creando subtítulos.

Las imágenes son un elemento más en las páginas web y hay que añadirlas en el Html de las páginas, salvo algunas excepciones, como es el caso de las imágenes de fondo que sí que irán en el CSS.

El código HTML5 correcto para insertar una imagen en una página web es este:

<img src="ruta/archivo.jpg” width="111px" height="222px" 
alt="Texto Alternativo">

Esta etiqueta es algo especial, pues así como las etiquetas de párrafo y de títulos (y las otras que hemos visto) necesitan obligatoriamente de su correspondiente etiqueta de cierre, la etiqueta de imagen no tiene etiqueta de cierre.

Otra cosa a tener en cuenta es que el servidor ha de encontrar la imagen, por lo que es muy recomendable poner nombres a las imágenes en minúsculas, sin espacios, tildes ni caracteres especiales.

Las dimensiones de la imagen vienen definidas por width y height (ancho y alto) y debería ser exactamente las mismas que las que tenga la imagen. Por lo que es importante preparar la imagen al tamaño que la vamos a necesitar antes de subirla al servidor. En el episodio 28 os dejé algunas herramientas para modificar el tamaño de una imagen.

El texto alternativo es aquella frase que aparecerá en la web cuando por el motivo que sea el navegador no consigue mostrar la imagen. Normalmente esto no ocurre, pero es importante poner este texto para describir la imagen (y de paso podemos aprovechar para insertar palabras clave que nos ayuden en el posicionamiento)

Para poner un enlace en nuestra web usaremos el siguiente código:

<a href="https://www.ejemplo.com” target="_blank" 
title=“Diseño de páginas web">Diseño de Paginas Web</a>

href es la propiedad que indica la ruta del enlace y tras ella y entre comillas dobles es donde colocamos la ruta y el nombre del archivo de la página de destino.

target nos sirve para indicar si queremos que se abra en una pestaña nueva (si no indicamos nada se abrirá en la misma pestaña del navegador)

title es similar al Alt de las imágenes. Se utiliza para dar un poco mas de información a las visitas sobre qué van a encontrar si pulsan el enlace (y ayuda a posicionar en Google)

Los saltos de línea se definen con la etiqueta <br />. Esta etiqueta, al igual que la de imagen, no tiene etiqueta de cierre y por eso se le coloca la barra al final, como puedes ver. Se usa si deseas insertar saltos de línea dentro de un párrafo.

Otro elemento que suele usarse bastante en la construcción de páginas web son las listas o listados de elementos.

Normalmente se usan las listas “desordenadas” y su sintaxis es esta:

<ul>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ul>

Y esto ha sido todo por hoy, si hay alguna herramienta que uses habitualmente y te gustaría compartir, mándame un mail a [email protected] o pásate por Pampua.es/contacto y déjame un mensaje; estaré encantado de comentarlo contigo.

Y si quieres que en próximos episodios hable de algún tema en concreto o tienes cualquier duda o comentario que quieras hacerme, déjamelo en Pampua.es/contacto, en los comentarios de iVoox, en twitter @pampua, o en nuestra página de Facebook: facebook.com/pampua

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spreaker, Youtube y desde la web de Pampua.es/podcast.

Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena

El jueves que viene hablaremos sobre un tema que está muy de actualidad y muy relacionado con el tema de hoy, se trata nada más y nada menos de Guttenberg, el editor visual de WordPress.

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la semana que viene llueva, nieve o truene!

Quizá te interese:

Entrevista a Laura Lofer autora de Imperio Freelance
hostings seguridad
Preguntas y respuestas de hostings y seguridad
Cómo eliminar RogueAds y evitar infectarte

Publicado en: Podcast Etiquetado como: basico, diseñoweb, html, web

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Contacta conmigo

De L a V de 9:00 – 21:00
Av. Maisonnave, 5, 8D, 03003 Alicante
Aviso legal - Privacidad
© 2002–2023 Ramón Prats

Podcast

En los 122 episodios del podcast "Diseño Web" he ido compartiendo un montón de consejos para que puedas optimizar tu web fácilmente.

Newsletter

Apúntate y accede a contenido exclusivo gratis con el que quincenalmente te ayudaré a mejorar tu presencia online.

Blog

Lee las últimas publicaciones del blog o mejor aún, suscríbete por RSS. Dicen que de vez en cuando publico algo interesante ;-)

Uso las dichosas cookies para darte una mejor experiencia en esta web.

Puedes informarte más sobre qué cookies uso o desactivarlas en los AJUSTES.

Powered by  GDPR Cookie Compliance
Resumen de privacidad

Utilizo las cookies en mi web para poder ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a visitar la web o ayudarme a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!