HTML: tres errores típicos
Articles,  Blog

HTML: tres errores típicos


hola soy sergio luján mora profesor de informática de la universidad de alicante y en este vídeo que forma parte del curso introducción al desarrollo web te voy a hablar de tres errores típicos que puedes cometer cuando empiezas a aprender html antes de empezar me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico sergio luján uah.es y a través de mi cuenta en twitter sergio luján mora en realidad los tres errores de los que te voy a hablar más que errores son confusiones o malas costumbres y esta gente que lleva muchos años creando páginas web comete estos errores de vez en cuando así que presta atención y evita cometer estos errores o malas prácticas que te voy a contar a continuación el primer error tiene que ver con los saltos de línea en el vídeo html conceptos básicos segunda parte te expliqué que en html podemos escribir toda una página web en una sola línea porque los saltos de línea no les no son significativos por ejemplo yo podría escribir esta pequeña página web así o de esta otra forma y mi página se visualizaría exactamente igual lo que ocurre es que normalmente el código se separa para que sea más fácil de leer pero no es obligatorio es simplemente una cuestión de estilo pero entonces como se introduce un salto de línea en un texto para ello existe una etiqueta llamada br que es una etiqueta vacía porque no puede tener contenido entre la etiqueta de inicio y de fin como es una etiqueta vacía normalmente nunca la verás escrita así yo nunca la he visto aunque se puede sino que según la versión de html la vela es escrita así por ejemplo en html 4 o de esta otra forma en x html por cierto antes de que lo preguntes te contesto en html5 puedes emplear cualquiera de las dos posibilidades pero yo te aconsejo que utilicen la segunda por compatibilidad con x html xml antes de continuar te quiero hacer una pregunta cuando estás escribiendo en un editor de textos cuando necesitas insertar un salto de línea en el texto venga te dejo unos segundos para que lo pienses ya es suficiente si consultamos la especificación oficial del lenguaje html5 y buscamos la etiqueta br podremos leer las siguientes advertencias el elemento br se debe usar únicamente para insertar saltos de línea que son realmente parte del contenido como en un poema o en una dirección el elemento br no se debe utilizar para separar contenido en un párrafo que realmente es independiente por ejemplo esto está mal y es mejor escribirlo de esta forma es decir como dos párrafos independientes lo mismo ocurre con este otro código que es un fragmento de un formulario mucha gente lo escribe así ya lo verás y tengo que reconocer que yo también lo he hecho más de una vez separando los controles del formulario de forma artificial con saltos de línea lo mejor otra vez es escribirlo de esta forma es decir como dos párrafos independientes cada control con su etiqueta en su propio párrafo y por supuesto que no se te ocurra hacer barbaridades como ésta crear listas a mano con saltos de línea como te voy a hacerlo me enfadaré mucho una lista la tienes que etiquetar correctamente con las etiquetas correspondientes de lista el segundo error son los espacios en blanco este error es para decido al anterior al de los saltos de línea al igual que los saltos de línea en html los espacios en blanco no son significativos 12 o 10 espacios en blanco al final se visualizan de la misma forma lo importante es que al menos haya un espacio en blanco para separar pero entonces como se introduce en varios espacios en blanco entre por ejemplo dos palabras en html existe una forma especial de representar un espacio en blanco que es una referencia de carácter a continuación en el último error veremos con detalle que son las referencias de caracteres nbsp significa no break space es decir espacio en blanco que no se puede romper y no se debe emplear para introducir espacios en blanco simplemente por una cuestión de presentación visual si se quiere separar las palabras en un texto por ejemplo en un título introducir espacios en blanco artificiales es una muy mala solución esto es una cuestión de presentación no de contenido y por tanto se debe emplear css lo último que te quiero comentar son las referencias de caracteres también llamadas por algunos autores entidades de caracteres las referencias de caracteres es un mecanismo que ofrece html para incluir en un texto caracteres que de otra forma no se podrían incluir por ejemplo por usar un juego de caracteres que no emite ciertos caracteres los caracteres que no se pueden incluir se tienen que escribir de una forma especial a este proceso en informática se le suele llamar escapar los caracteres palabra horrible que supongo que imaginarás que no existe en el diccionario español html permite tres tipos de referencias de caracteres y todas ellas deben emplear empezar con el carácter and personal y deben terminar con el punto y coma las primeras las referencias de caracteres con nombre y emplean unos nombres que se han definido para los caracteres especiales en la especificación de html existe un apartado con las referencias de caracteres con el nombre que son unas miles aquí podemos ver un fragmento de esta tabla en la primera columna aparece el nombre de la referencia de carácter en la segunda columna el código único de juni code y en la tercera columna el glifo la representación visual del carácter las referencias de caracteres son necesarias para representar algunos caracteres especiales como por ejemplo el ampersand las comillas dobles y simples el menor que y el mayor que que realizan una función especial en html en la referencia de caracteres numéricas decimales se emplea un número en base 10 para representar el carácter este número es el código único de del carácter la sintaxis es ampersand almohadilla y a continuación el número que puede estar formado por uno o varios dígitos por último en las referencias de caracteres numéricas hexadecimal es se emplea un número extra decimal es decir en base 16 para representar el carácter otra vez este número es el código único del carácter la sintaxis es impersonal x en minúsculas o mayúsculas y a continuación el número extra decimal es decir los dígitos del 0 al 9 y las letras de la a a la f en minúsculas o mayúsculas que puede estar formado por uno o varios dígitos hexadecimal es qué problema hay entonces con las referencias de caracteres la realidad como he dicho antes esto no es un error sino algo que se podría hacer mejor por ejemplo en esta tabla podemos ver que la a mayúscula acentuada se puede representar como a a qt y la a minúscula como a a qt esto mismo ocurre con el resto de vocales acentuadas por lo que también tenemos estas formas de escribir las vocales acentuadas en español el problema es que muchos sitios pone y mucha gente cree que esta es la única forma de escribir las vocales acentuadas en una página web por lo que se acaba con código html que es muy difícil de leer a veces este código está mal no no está mal pero si se emplea el juego de caracteres adecuado como iso 88 59 1 también llamado latino 1o efe ocho escribir el texto así es totalmente inútil porque no es necesario para terminar este vídeo te recuerdo que para aprender html y otras tecnologías web existen cientos de sitios en la web yo te recomiendo el sitio web w3c schools en este sitio puedes encontrar un apartado de tutoriales recuerda que este vídeo forma parte del curso introducción al desarrollo web que está disponible en la dirección y des web punto es muchas gracias por tu atención

19 Comments

  • TurninManu

    tengo una web y e coido un diseño de internet pero al cambiar palabras me sale esto � solo pasa en palabras con tilde o en la ñ. Espero tu respuesta

  • jhonny lopez

    hola me surge una duda, html tiene los styles que funcionan como css, ¿eso esta bien?
    y cuando utilizan css los e visto en el head, yo supongo que deben estar en otro archivo o ¿cual es la regla general ?

  • iDESWEB UA

    Mira los vídeos de este curso sobre CSS, te ayudarán a entender la relación que existe entre HTML y CSS.

    El atributo style te permite escribir CSS en las etiquetas, lo que se llama CSS en línea.

  • Ricardo Ortega

    Hola, yo utilizo Sublime Text en Linux, cuando guardo mi docuemtno HTML con UTF-8 Chrome no reconoce los acentos, sin embargo Firefox sí. Sí utilizo la codificación: Western ISO-8859-1 ó UTF-8 BOM ambos reconocen los acentos. ¿que tienen de diferente estas codificaciones a UTF-8?, ¿afecta en mi páginas?. De ante mano muchas gracias, tomo el curso de desde Miríada X.

  • iDESWEB UA

    Tienes en el curso tres vídeos sobre el juego de caracteres. Seguro que te ayudan a entender las diferencias entre los diferentes juegos de caracteres y encuentras tu error.

  • Maria de la Paz Pisano Pintos

    Hola estoy buscando el video de un error muy comun en el titulo. Como no lo encontre en el link del video tutorial que hacias referencia, intento buscarlo aqui pero solo encuentro el de los 3 errores tipicos. Donde puedo encontrarlo? Perdon es que trato de seguir wl orden porque me resulta muy util. Gracias y Saludos.

  • Alejandro Vazquez Gonzalez

    Una pregunta ¿Aunque se use UTF-8 y funcione bien, hay veces que en los navegadores de los ordenadores se ve bien pero en el de los móviles no se ven?

  • Noel Gozalvez

    entonces para hacer por ejemplo dos saltos de linea seria asi?
    Ejemplo:
    <p>Aqui pongo la frase</p>
    <p></p>
    <p></p>
    <p>y con estas dos etiquetas vacias hago el doble espacio vertical, no?</p>

  • Brenda Di Lauro

    3:50 jajaja mejor nunca lo hago asi el profe no se enoja!, igualmente a mi se me hace mucho mas facil hacerlo de la forma correcta ya que no forzamos nada y no es complicado hacer listas UL como OL

Leave a Reply

Your email address will not be published. Required fields are marked *