Tecnología

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 ...

Programación Web Crear webs Html ...

Crear web en HTML con Notepad++

Empezar desde cero la programación web puede ser un proceso complejo. Requiere conocimientos de HTML y de otros lenguajes para crear webs, pero si tienes tiempo y deseos de aprender, analizaremos los mejores tutoriales para ir creando paso a paso la web que deseamos. La primera pregunta que surge es: ¿qué es HTML? Se trata del lenguaje básico para crear páginas web. Se utiliza para definir la estr ...

general html5 programación ...

Día #7 Hablemos de los Microdatos en Html5 (Microdata)

Existe una nueva forma de marcar una frontera semántica en HTML5, se trata de las nuevas posibilidades que tenemos de definir una estructura semántica más fuerte y más personalizada utilizando los microdatos (microdata) que nos van a permitir desarrollar mejor las estructura web dándole una gran prioridad al trabajo del SEO y la indexación a los diferentes buscadores. Los microdatos van a permiten ...

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 html5 tutoriales ...

INTRODUCCIÓN A HTML5

Bueno antes que todo estan las preguntas basicas, ¿que es?, ¿para que es?, ¿En que me beneficio?, y no pueden hacer falta en este mundo del diseño y la estructura web y especificamente en este tema de HTML5¿Que es html 5? ? Simplemente Como su nombre indica, HTML 5 es el sucesor de HTML4. Este trabajo o proyecto de HTML5 se inicio a finales de 2003 con un grupo de trabajo que se propuso a hacer un ...

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 ...

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 ...

Php Diseño web Páginas php ...

Cómo agregar un programa PHP en una página HTML

Seguimos analizando los lenguajes más populares para la edición y creación de sitios web. En esta oportunidad analizaremos parte del PHP, acrónimo que se utiliza para referirse al Hypertext Preprocessor. Se trata de un lenguaje interpretado con alto nivel de presencia en sitios HTML y ejecución en servidor. Utilizaremos WampServer, un software con todo lo necesario para probar de manera local en n ...

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 ...

Código CSS Fondo de página Tutoriales CSS

Cambiar fondo de página en CSS

El fondo de una página web es algo que tenemos que aprender siempre a personalizar. Hay diferentes formas, pero si lo que deseamos es poder hacerlo utilizando código CSS, entonces hay que dedicarle un poco de tiempo a esta línea de código y cómo crearla. En el pasado esto se podía hacer en HTML, pero desde que se separó para darle estructura al HTML y el CSS para elementos de diseño, la tarea es s ...