¡Bienvenidos a esta segunda entrega de los tutoriales html que estoy haciendo para ustedes, mientras alguien lo lea y comente seguiré haciendolos hasta terminar un sitio básico!
Elementos básicos de HTML
¿Cuáles son los elementos básicos y para qué sirven?
Bienvenidos a esta segunda entrega de HTML. Ahora que ya conocemos que son las etiquetas vamos comenzar a utilizar la estructura básica de una página web.
La estructura básica se compone de tres elementos, el primero de ellos es el elemento “html”, este elemento indica que estamos generando un archivo de marcado de hipertexto y se usa con una etiqueta <html> de apertura y una </html> de cierre. Así que sin mayor demora abramos un procesador de palabras, el que tengan a la mano. En mi caso voy a abrir el Notepad o Block de notas que viene instalado en mi versión de Windows dentro del botón inicio, carpeta todos los programas, carpeta accesorios. inicio/todos los programas/accesorios/Notepad.
Una vez abierto el programa escribamos nuestro primer elemento: <html> </html>
Con esta primera etiqueta podemos guardar nuestro archivo en alguna carpeta o en el escritorio. Es importante que al guardar el archivo escribamos un nombre y la extensión .html borrando cualquier otra extensión como .txt que nos sugiera el programa. Si decidimos llamar a nuestro archivo “pagina”, entonces deberemos escribir “pagina.html”
También es muy importante mencionar que cuando escribimos nombres de archivos no debemos utilizar signos extraños como arrobas, interrogantes, acentos, etc. De lo contrario tendremos errores al vincular los archivos. Así que si tú tienes alguna compulsión ortográfica, necesitas reprimirte para no escribir “página.html” en lugar de “pagina.html”
Tampoco tenemos permitido colocar espacios en los nombres que escribamos, así que si queremos nombrar al archivo “mi pagina.html” es mejor que escribamos “mi_pagina.html”. Como última recomendación, html no diferencia entre mayúsculas y minúsculas, aun así es recomendable no mezclarlas a menos que estemos seguros de recordar en donde escribimos la mayúscula. Esto se debe a que llegado el momento necesitaras aprender otros lenguajes que sí son “case sensitive”, es decir que reconocen entre mayúsculas y minúsculas, y no querrás tener malos hábitos de escritura porque te costará mucho en frustraciones. Una forma correcta de usar mayúsculas fácil de recordar, es usándola para separar palabras, así en lugar de “mi_pagina.html” podríamos escribir “miPagina.html”
Una vez guardado nuestro documento con la extensión correcta, el archivo debe mostrarse con el ícono de nuestro navegador instalado, en mi caso aparece con el ícono de internet explorer. Al dar doble click sobre este archivo encontraremos una página web vacía.
Las etiquetas indican en nuestro documento que lo que viene a continuación serán marcas o etiquetas de hipertexto, o podemos decir que estamos avisando que todo lo contenido dentro de estas dos marcas será lenguaje html.
El siguiente elemento básico usa las etiquetas <head></head>, todo lo contenido dentro de estos dos tags será información técnica para nuestro navegador, por ejemplo el título de la página, que aparece en la parte superior de nuestro navegador, vínculos a las hojas de estilo, que no son más que instrucción de cómo se verá nuestro contenido, palabras clave y descripciones que pueda contener la página y que ayude a su mejor indexación en los buscadores.
Estas etiquetas van dentro de las etiquetas de html del siguiente modo: <html><head></head></html>
Y el contenido para el head va dentro de sus etiquetas por ejemplo un título para la página sería usando la etiqueta “title” así: <html><head><title>Mi primer página web</title></head></html>
Podríamos guardar nuestro documento y en la parte superior del navegador y en las pestañas encontraríamos el título “Mi primer página web”, pero si miramos el código se ve un poco confuso, es por esto que siempre escribiremos nuestro código hacia abajo ayudándonos de la tecla enter, y jerarquizando hacia la derecha los elementos que estén dentro de otros con la tecla tabular, de este modo nuestro código será limpio y fácil de editar.
Como última etiqueta básica tenemos la etiqueta <body></body>
Esta se coloca dentro del html pero después de la etiqueta de cierre head. Dentro de esta etiqueta irá todo el contenido de nuestra página web, es decir, texto, imágenes, videos, etc.
Aunque el modo de insertarlos es diferente, por ejemplo el texto funciona con tal solo escribir entre las etiquetas del body, así que el texto se coloca completo y por medio de tags de texto definimos que partes son títulos y que partes son párrafos, pero en el caso de las imágenes y los videos lo que hacemos es colocar una etiqueta con la ruta del lugar en el que se encuentra el video, y al ejecutarse la página este será invocado.
Ahora pues, recordando el primer tutorial en donde vimos que es la etiqueta <p></p> insertemos nuestro primer texto: "Mi primer página web", guardemos el archivo nuevamente y abrámoslo para ver nuestro resultado final.
Para nuestro siguiente tutorial veremos algunas etiquetas de texto e imagen, también veremos cómo hacer vínculos con ellas entre dos páginas.
Recuerda que siempre podrás encontrar mis tutoriales en mi sitio web
Si leíste hasta aquí, puede ser que te gustó ¡Comenta!
Elementos básicos de HTML
¿Cuáles son los elementos básicos y para qué sirven?
Bienvenidos a esta segunda entrega de HTML. Ahora que ya conocemos que son las etiquetas vamos comenzar a utilizar la estructura básica de una página web.
La estructura básica se compone de tres elementos, el primero de ellos es el elemento “html”, este elemento indica que estamos generando un archivo de marcado de hipertexto y se usa con una etiqueta <html> de apertura y una </html> de cierre. Así que sin mayor demora abramos un procesador de palabras, el que tengan a la mano. En mi caso voy a abrir el Notepad o Block de notas que viene instalado en mi versión de Windows dentro del botón inicio, carpeta todos los programas, carpeta accesorios. inicio/todos los programas/accesorios/Notepad.
Una vez abierto el programa escribamos nuestro primer elemento: <html> </html>
Con esta primera etiqueta podemos guardar nuestro archivo en alguna carpeta o en el escritorio. Es importante que al guardar el archivo escribamos un nombre y la extensión .html borrando cualquier otra extensión como .txt que nos sugiera el programa. Si decidimos llamar a nuestro archivo “pagina”, entonces deberemos escribir “pagina.html”
También es muy importante mencionar que cuando escribimos nombres de archivos no debemos utilizar signos extraños como arrobas, interrogantes, acentos, etc. De lo contrario tendremos errores al vincular los archivos. Así que si tú tienes alguna compulsión ortográfica, necesitas reprimirte para no escribir “página.html” en lugar de “pagina.html”
Tampoco tenemos permitido colocar espacios en los nombres que escribamos, así que si queremos nombrar al archivo “mi pagina.html” es mejor que escribamos “mi_pagina.html”. Como última recomendación, html no diferencia entre mayúsculas y minúsculas, aun así es recomendable no mezclarlas a menos que estemos seguros de recordar en donde escribimos la mayúscula. Esto se debe a que llegado el momento necesitaras aprender otros lenguajes que sí son “case sensitive”, es decir que reconocen entre mayúsculas y minúsculas, y no querrás tener malos hábitos de escritura porque te costará mucho en frustraciones. Una forma correcta de usar mayúsculas fácil de recordar, es usándola para separar palabras, así en lugar de “mi_pagina.html” podríamos escribir “miPagina.html”
Una vez guardado nuestro documento con la extensión correcta, el archivo debe mostrarse con el ícono de nuestro navegador instalado, en mi caso aparece con el ícono de internet explorer. Al dar doble click sobre este archivo encontraremos una página web vacía.
Las etiquetas indican en nuestro documento que lo que viene a continuación serán marcas o etiquetas de hipertexto, o podemos decir que estamos avisando que todo lo contenido dentro de estas dos marcas será lenguaje html.
El siguiente elemento básico usa las etiquetas <head></head>, todo lo contenido dentro de estos dos tags será información técnica para nuestro navegador, por ejemplo el título de la página, que aparece en la parte superior de nuestro navegador, vínculos a las hojas de estilo, que no son más que instrucción de cómo se verá nuestro contenido, palabras clave y descripciones que pueda contener la página y que ayude a su mejor indexación en los buscadores.
Estas etiquetas van dentro de las etiquetas de html del siguiente modo: <html><head></head></html>
Y el contenido para el head va dentro de sus etiquetas por ejemplo un título para la página sería usando la etiqueta “title” así: <html><head><title>Mi primer página web</title></head></html>
Podríamos guardar nuestro documento y en la parte superior del navegador y en las pestañas encontraríamos el título “Mi primer página web”, pero si miramos el código se ve un poco confuso, es por esto que siempre escribiremos nuestro código hacia abajo ayudándonos de la tecla enter, y jerarquizando hacia la derecha los elementos que estén dentro de otros con la tecla tabular, de este modo nuestro código será limpio y fácil de editar.
Como última etiqueta básica tenemos la etiqueta <body></body>
Esta se coloca dentro del html pero después de la etiqueta de cierre head. Dentro de esta etiqueta irá todo el contenido de nuestra página web, es decir, texto, imágenes, videos, etc.
Aunque el modo de insertarlos es diferente, por ejemplo el texto funciona con tal solo escribir entre las etiquetas del body, así que el texto se coloca completo y por medio de tags de texto definimos que partes son títulos y que partes son párrafos, pero en el caso de las imágenes y los videos lo que hacemos es colocar una etiqueta con la ruta del lugar en el que se encuentra el video, y al ejecutarse la página este será invocado.
Ahora pues, recordando el primer tutorial en donde vimos que es la etiqueta <p></p> insertemos nuestro primer texto: "Mi primer página web", guardemos el archivo nuevamente y abrámoslo para ver nuestro resultado final.
Para nuestro siguiente tutorial veremos algunas etiquetas de texto e imagen, también veremos cómo hacer vínculos con ellas entre dos páginas.
Recuerda que siempre podrás encontrar mis tutoriales en mi sitio web
Si leíste hasta aquí, puede ser que te gustó ¡Comenta!