HTML: conceptos básicos (parte 2)
Articles,  Blog

HTML: conceptos básicos (parte 2)


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 ayudar con tus primeros pasos con el lenguaje de etiquetado 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 recuerda que con el lenguaje html solo se describe la estructura y el contenido que puede ser texto imágenes vídeos y otros componentes de las páginas web con html no se define la presentación visual de las páginas web en la primera parte de este videotutorial vimos la sintaxis del elemento el componente básico de una página web una página web está compuesta por un conjunto de elementos escritos en un orden concreto recuerda que un elemento se compone de una etiqueta inicial o de apertura y una etiqueta final o de cierre con todas las etiquetas que vimos en la primera parte de este videotutorial ya podemos hacer páginas web sencillas pero atención lo que vamos a ver a continuación es una simplificación para que sea más fácil de entender en otro vídeo veremos detalles adicionales que son necesarios para que una página web sea realmente correcta para escribir el código de una página web es decir para escribir el código html no necesitas ningún programa especial en este vídeo vamos a empezar a usar el bloc de notas vamos a hacer la primera página web con el bloc de notas recuerda que la etiqueta principal de una página web es la etiqueta html la etiqueta html debe de encerrar todo el contenido de la página web a mí me gusta cuando escribo el código html escribir cuando escribo la etiqueta de inicio escribo automáticamente la etiqueta de cierre así no se me olvida no es obligatorio pero es un consejo que te doy a continuación dentro de la etiqueta html dentro de la página web la siguiente parte de la primera parte es la cabecera la sección 7 en la sección head recuerda que se escribe información los metadatos que definen cómo se va a procesar la página web cómo se va a visualizar pero normalmente en el head no se escriben nada que deba de aparecer visualmente en la página web por ahora lo único que sabemos escribir es la etiqueta title que es el título de la página web le voy a poner de título érase una vez html y recuerda si hemos abierto la etiqueta title debemos de cerrarla después del head tenemos el apartado body el cuerpo de la página todo lo que escribamos aquí en el body sí que se va a ver se va a pintar en la página web en el body podemos emplear las etiquetas de encabezados o títulos h1 h2 h3 las de párrafo la etiqueta p y las otras dos etiquetas strong y m que vimos en el vídeo tutorial anterior en primer lugar voy a escribir un título h 1 el título principal de mi página que voy a repetir el mismo título que he escrito aquí esto es no es obligatorio el título de la h1 no tiene por qué coincidir con el título de toda la página pero sí que suele ser lo normal y a continuación después del título principal después de la h1 voy a tener el título del primer capítulo por llamarlo así de esta página y para ello voy a emplear el título de nivel 2 el h2 y vamos a tener un primer capítulo o un primer apartado que he llamado el padre en el padre dentro de este apartado tenemos un primer párrafo en el que escribimos el padre de la web tim berners-lee es también el padre de el lenguaje html y a continuación cierro el párrafo algunas indicaciones sobre el formato en html podríamos todo el documento escribirlo en una sola línea yo podría escribir mi código así y visualmente obtendría el mismo resultado no habría ningún cambio lo que ocurre es que normalmente el código se separa tal como lo estoy haciendo yo para que sea más fácil de leer pero como digo no es obligatorio otra cosa que se suele hacer es separar a veces el código del margen izquierdo con unos espacios en blanco como acabo de hacer o con el tabulador esto tampoco influye en la visualización de la página es simplemente una cuestión de estilo personal según el autor según el desarrollador web cada uno tiene su propio estilo y a continuación coloco escribo otro título la estandarización que a su vez va a tener un párrafo el lenguaje html está estandarizado por el w3c word wide web’ consortium yo esta página ya la podría almacenar la voy a almacenar aquí en esta carpeta y des web que tengo en mi escritorio guardar como busco la carpeta en el escritorio y le voy a poner un nombre esta va a ser en mi primera página por ejemplo le pongo página 1 punto html la extensión de las páginas web es html o htm y muy importante aquí en el bloc de notas debemos de cambiar el tipo por defecto nos intenta almacenar los ficheros en formato texto documentos de texto con la extensión punto txt y para que nos respete la extensión punto html debemos de cambiarlo a todos los archivos esto recuerda lo bien porque si usas el blog de notas se te olvidará más de una vez y se guardara el fichero con formato txt y luego no se verá bien y luego esta lista desplegable codificación muy importante tenemos distintos tipos de codificación es muy importante pero también complejo de entender esto te lo explicaré más adelante en otro vídeo tutorial por ahora lo puedes dejar en el valor por defecto annecy o lo puedes cambiar al valor que les recomendaré en el futuro que es etc 8 así que lo podríamos ya cambiar a utc 8 lo guardamos y ya tenemos nuestra primera página si nos vamos a la carta donde lo guardado tengo un fichero página 1 html que podemos ver que aparece con el icono de google chrome porque aparece con ese icono pues porque es el navegador que tengo configurado por defecto en mi sistema operativo le damos a abrir y ya se abre la página y aquí vemos un fallo estoy viendo un fallo porque este texto que es un párrafo debería de aparecer así sin embargo aparece con el mismo formato que este título que es un h 2 qué está pasando aquí si nos vamos a ver el código fuente veremos que he cometido un error este h 2 aquí no está cerrado ha habido un problema en algún momento y el párrafo tampoco lo ve cerrado se ve que me ha ido a la línea de arriba he cometido un error como no estaba cerrado qué ocurría el h2 empezaba aquí y continuaba continuaba y este párrafo también se le aplicaba el h2 y por eso salía con el mismo formato visual y ahora le damos a recargar la página veremos que ya se ha arreglado qué más cosas podríamos hacer aquí podríamos usar las etiquetas strong y m que hemos visto en el vídeo tutorial por ejemplo tim berners-lee lo podría etiquetar o marcar esto y el word wide web consortium lo podría etiquetar con en enfatizado lo guarda recargo y vemos que efectivamente tim berners-lee aparece destacado en negrita y worldwideweb también aparece destacado pero en este caso en cursiva estos dos estilos visuales en negrita y cursiva son los estilos por defecto que aplica el navegador pero más adelante cuando lleguemos a las hojas de estilo en cascada css veremos como esto lo podemos cambiar por ahora no nos tenemos que preocupar por el formato con el que aparece vamos a ver cómo se ve la página con otro navegador yo tengo instalados varios navegadores y podemos abrir esta página con otro navegador en windows nos vamos al menú a abrir con y yo podría seleccionar otro navegador por ejemplo voy a abrirlo con internet explorer se abre aquí lo tenemos y vemos que el aspecto es muy parecido al que lo veíamos con google chrome no nos debería de sorprender se debe de ver exactamente igual ahí está la gracia de la web y del lenguaje html que se puede averiguar en distintas plataformas en distintos sistemas operativos ahora tenemos que escribas tu primera página web por ti mismo puede ser esta que yo he hecho o puedes intentar escribir una más complicada para esta primera página he usado un editor sencillo en el bloc de notas la próxima parte de este videotutorial voy a usar un programa más potente 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

20 Comments

  • Susana Gutiérrez

    Con la parte de la Historia he aprendido mucho ya que no tenía mucha idea y siempre nos centramos en tirarnos a la piscina sin saber cómo y quién tuvo la brillante de idea de crearla. He visto los videos 1 y 2 de esta semana y, hasta el momento, me está pareciendo muy interesante, paso a paso y sin agobios. Para quien quiera tomarlo como ejemplo, yo tenía abierto el Bloc de Notas y lo iba haciendo todo al mismo tiempo que tu lo explicabas. Estupendo, muchas gracias Sergio.

  • rafarmas ar

    Muy práctico, lo seguí como lo recomendó Susana, y lo fui construyendo con contenido distinto y fue el modo en que me percaté del error de etiquetado. Esto va excelente para quienes seguimos el curso de idesweb. ¡Adelante!

  • iDESWEB UA

    Gracias por tus comentarios. No os debéis de conformar con realizar el pequeño ejemplo que aparece en este vídeo o en otros vídeos, debéis de probar, experimentar, en definitiva, jugar con lo que estáis aprendiendo.

  • Aldo Belus

    Hola. Enhorabuena por lo bien que lo hacéis y enhorabuena a nosotros por teneros. Me ha ocurrido algo curioso. He seguido la práctica tal y como Sergio lo hace en el vídeo (incluso lo he repetido, comprobado, revisto, buff, no sé qué más) y, aunque aparentemente ambos ejercicios, tuyo y mío, son iguales, a mí me sale title ¡en la pestaña del navegador! No consigo que aparezca con el resto del texto, en la parte de arriba, donde debería y donde lo hace en el vídeo. Con varios navegadores y nada.?

  • iDESWEB UA

    Eso es que tienes seguramente alguna etiqueta anterior mal cerrada. Usado un validador de HTML para encontrar el error (tienes un vídeo posterior sobre validación de HTML).

  • Aldo Belus

    Lo pasaré por el validador pero lo diré de nuevo: el ejercicio es IGUAL que el que aparece en el video. Lo he repasado cinco veces. Pero soy buen chico y lo pasaré por el validador. Seguiremos informando…

  • Aldo Belus

    Bien, qué bueno es ser buen chico! Lo volví a hacer y me dí cuenta de que el editor de texto lo había dejado en un tipo diferente del que yo quería. Le añadí la coletilla .html al nombre del archivo pero el editor lo guardaba (pasando de la coletilla!) como texto plano. De ahí lo de la pestaña. Es que uso GNU/Linux y hay que hacer las cosas bien, aquí nada se da por supuesto! Gracias. Podemos considerar que todo el código HTML no está equivocado…(sólo yo) XD, 😉

  • iDESWEB UA

    Así se aprende, ¡de los errores se aprende mucho! Seguro que la próxima vez que te pase no tardarás ni un segundo en solucionarlo. ¡Ánimo!

  • iDESWEB UA

    Depende… eso es verdad en las últimas versiones de Windows, pero en las versiones anteriores, si no cambiabas el tipo de archivo, siempre ponía .txt, aunque pusieras una extensión.

  • Ximena Cortés

    Para los usuarios de Mac OS, que están usando TextEdit pueden cambiar la codificación en las preferencias (Cmd + ,) de TextEdit en la pestaña "Abrir y guardar" si no les resulta, pueden enviarme un mensaje para explicarles mejor. No es nada del otro mundo pero a mi me llevo más de 20 minutos dar con el chiste. Gracias por los vídeos!

  • Noel Gozalvez

    estoy pensando, que si dentro de una etiqueta <p> pongo algo mas largo, como se donde hace los saltos de linea, o los tengo que hacer yo dentro del al etiqueta.

    Ejemplo:
    <p> jsdfñajfdsñlkjaskljfa
    akdfsjañjdñaja
    jfklasjñdjsñ

    asdjfñaljsdfjafadsjlñkajñlksdjñajalñksdjklfaj
    alkjfdalkjsdñkjfas

    jadsfjajldskjajdsjañfjasjañj</p>

    asi sabria el codigo que estoy haciendo saltos de linea o no? y si no es asi como habria que hacerlo?

  • Milton Yaguache

    me percate enseguida de tu error pero pensé que así mismo era de escribir xq tu eres el experto,cuando dijiste que había un error me puse contento gracias X tus sabias enseñanzas

Leave a Reply

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