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 ramon@pampua.es 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!
Deja un comentario