Con un portátil bajo el brazo Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Errores HTML de principiantes.

Si sigues por aquí es porque todavía tengo oportunidad de hacer que te guste el mundo del diseño web, por ello hoy vamos a dedicar la entrada a ver los errores de principiante en HTML5, el idioma que pone la estructura de nuestra web.

El lenguaje HTML fue creado por Tim Berners Lee, el padre de la web. Este lenguaje permite que los archivos que dan estructura a una web estén formados únicamente de texto, llamando a las imágenes, videos, etc. de la web a través de este, para ello se utilizan las etiquetas HTML como <img>, <video>… Que le dicen al navegador que ahí hay una imagen o un video y el traduce el código en el formato multimedia que le corresponde.

Errores HTML básicos de principiantes


A su vez el navegador tiene que hacer otra cosa: actualizarse, ya que cada x tiempo aparece una versión nueva de HTML, en la que además de eliminarse etiquetas se añaden otras, y los desarrolladores deben encargarse de que el navegador pueda traducir estas  etiquetas correctamente.

Con esta introducción al HTML podemos continuar viendo los errores básicos que podemos cometer al hablar este idioma sin que nadie se pierda.

Corrige tu escritura: al igual que en español una frase se debe comenzar con la primera en minúscula y el final marcarlo con un punto, en HTML se deben abrir y cerrar casi todas las etiquetas, a excepción de algunas como video o img, si no todo te sale en rojo.

Respeta el orden de las cosas: si abres una etiqueta, por ejemplo un <div>(contenedor), y dentro de ella anidas varias etiquetas, como una <p>(párrafo) y un <h1>(encabezado), asegúrate de cerrar la primera cosa que abres al final, de forma que el código quede así.
<div>

<h1> Encabezado</h1>

<p>Párrafo</p>

</div>

Olvida la correcta ortografía:si has leído mi guía de CSS o sabes algo del lenguaje, habrás visto que a las etiquetas HTML se las puede dar una clase o id para únicamente dar estilo exclusivo a un elemento o a unos pocos, muchas veces las clases de estos elementos las ponemos en español y no está mal, lo que está mal es ser correctos y poner las tildes a cada palabra, ya que es algo que a la larga puede traernos problemas. Además de escribir las clases/id Sin tilde, también te recomiendo hacerlo todo en minúsculas, nada de la primera en mayúsculas y las siguientes en minúsculas, más que nada porque al final se nos olvida como la escribimos y si no la escribimos tal cual está en el archivo HTML en el CSS esté no te va a mostrar los estilos que le has dado a esa clase o id y en ese momento toca remover cielo y tierra a ver como la escribimos. Por último, para terminar con el apartado clases e ids no les nombres con cosas tontas, insultos, adjetivos despectivos, frases raras Porque es como cuando estás haciendo el tonto por el  pasillo del centro comercial, miras arriba y llegó el momento cámara, ese momento en tu web es cuando el usuario le da a F12, o botón derecho del ratón > Inspeccionar, y ven todo tu archivo HTML de la página en la que se encuentran con sus respectivas clases, id’s…

Comillas y puntos y comas: Como en español y en cualquier idioma cuando se cita algo la frase va entrecomillada, es decir, tiene comillas delante de ella y al final, si no la cita se quedaría coja, lo mismo pasa en este lenguaje, si al poner <p style=color: #333> o <p class=ejemplo> ninguna de las dos cosas va a funcionar, al igual que si ponemos una imagen <img src=ejemplo> o un enlace <a href=ejemplo.com>, por lo que acuérdate de revisar bien si todo, tanto etiquetas si es necesario como comillas, está bien cerrado. Otra cosa en la que se parece nuestro idioma con este lenguaje es que nosotros también utilizamos puntos y comas para separar elementos en una oración (la casa, que está en construcción; el parque, donde los niños juegan), sin embargo en el entorno web cambia un poquitín la cosa. Si quisiéramos darle varios estilos a un párrafo, como un fondo negro y unas letras blancas, la casa se convertiría en background-color, la , en cambio serían : y el que está en  construcción sería #333, mientras que el punto y coma  se quedaría como está para separar las dos declaraciones. El código final entonces sería:
<p style=background-color: #333; color: #fff>

La verdad es que no hay nada peor que los sudores que te dan cuando ves que elementos de la web no tiran y no encuentras el error, por eso espero haberte ayudado con esta agrupación de los errores de principiante que incluso cuando dejas de serlo sigues cometiéndolos.

Fuente: este post proviene de Con un portátil bajo el brazo, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas: HTML: Nivel A1

Recomendamos

Relacionado

general desarrollo web html5 ...

Dia #3 – Estructura básica de html5

Estructura básica Aunque gran parte de la atención que se tiene sobre HTML5 gira en torno a las nuevas API, y sus 30 nuevos elementos con la nueva semántica que se puede utilizar en tradicionales páginas estáticas, también en las franja de controles de formularios. Vamos a tocar un poco el tema de lo básico como veníamos tratando hasta ahora, Vamos a ver un poco la estructura básica y algunas mejo ...

css Ejercicio CSS Cajas CSS ...

Desarrollo de Plantilla Web con CSS, Formularios HTML y PHP

Plantilla Web CSS, HTML y PHP. Las lecturas previas para desarrollar esta plantilla son las siguientes: Guía de CSS para Principiantes Ejemplo de Plantilla CSS (Ejemplo1) Ejemplo de Plantilla CSS (Ejemplo2) ¿Cómo Abrir una Página HTML Dentro de un DIV? Después de revisar los ejemplos, Se propone la práctica de CSS, HTML y PHP por medio del desarrollo de una plantilla web que

general videos

Tutorial HTML5 y CSS3

Video tutorial de maquetación HTML5 y CSS3 parte 1. Comenzamos una nueva serie en el Blog, después de pedidos iniciamos con los video tutoriales. Aqui el primero: Maquetación en HTML5, CSS3 y Jquery. En esta nueva serie de videotutoriales crearemos un Website completo en HTML5, CSS3, JQuery, Javascript. En este video hablamos sobre las etiquetas semánticas de HTML5 y como darles estilos con CSS3. ...

general desarrollo web html5 ...

Dia #2 El nuevo DOCTYPE de html5

El nuevo <! DOCTYPE> Esto es lo primero que encontramos en un documento web. Te reto a que me nombre la cabeza el tipo de documento de XHTML 1.0 Strict o HTML 4.01. No es fácil ¿eh?. El <! DOCTYPE> para la version HTML 4.01: <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//ES" » "http://www.w3.org/TR/html4/strict.dtd"> Aqui el <! DOCTYPE> para la version ...

Nuevo curso de html y css

Después de mucho pedírmelo.... ¡¡¡el curso de html y css está aquí!! Siento haber tardado tanto en lanzarlo, pero preparar un curso de html no es como preparar un curso sobre promocionar un blog. Al fin y al cabo, todo aquello que os enseño en cómo promocionar o en otros de mis cursos, no deja de estar en vuestro idioma. El html es un lenguaje nuevo. Ya no vale copiar y pegar como hacíamos en los ...

general seo

Cómo debe ser la estructura de un Blog para un correcto posicionamiento: SEO ON PAGE.

La estructura de un Blog es la base sobre la que se construye y distribuye todo su contenido. En ella existen dos partes fundamentales: una visible compuesta por los componentes que conforman su presentación y otra invisible que sirve para que los sistemas que acceden al mismo sean capaces de analizar y extraer correctamente su información. La correcta estructura de un Blog asegura una correcta ex ...

general curso html5 ...

Curso de HTML5 y CSS3 para web móvil

Estás interesado en aprender a desarrollar webs móviles en HTML5 CSS3, Javascript, Jquery mobile y Frameworks? Hola, estoy preparando un curso por email y skype de desarrollo de webs moviles con HTML5.Que les parece la idea? Interesados, participarán por 5 cursos totalmente gratuitos. Curso por mail, resolución de dudas por skype (uno a uno) clases semanales. Sorteo día 30/04/2015. Início: 02/05/2 ...

informática android studio xml

Introducción al lenguaje XML

Este articulo tiene como fin abarcar las características principales sobre el lenguaje XML. Con el fin de comprender el contenido de los archivos de recurso de un proyecto de desarrollo en Android. Veremos que es el lenguaje XML, por que surge como herramienta de interoperabilidad, cuales son sus usos y cual es la sintaxis para crear un documento XML. ¿Qué es XML? Sus siglas significan eXtensible ...

Blog diseñador web diseño web ...

¿Cómo emplear un buen diseño web?

Para crear un buen diseño web, hay que saber varios aspectos, estos permiten que no solo sea un limpio y atractivo layout sino que, ayuda también para la optimización del sitio web. Un diseño de esta índole esta caracterizado por una estructura que esta construida mediante un lenguaje de etiquetas (HTML) que permite edificar la arquitectura del mismo. Por lo general cuando se maqueta una web, se u ...

general desarrollo web html5 ...

Día #10 Hablemos de los Videos en HTML5

En este tutorial o artículo, vamos a ver de pronto no todo acerca los videos en HTML5 pero si lo más relevante e importante de esta nueva etiqueta Video. HTML ha hecho cambios muy grandes en la web, que quizás la gente común no note pero a los que trabajamos en este campo se no se nos hacen grandioso, una de estas mejores es la de poder incluir directamente video y audio en el código, para depende ...