HTML ¿Qué es y cómo crear tu primer código?
HTML es uno de los lenguajes más utilizados para la creación de páginas web. En educación se puede utilizar como herramienta básica para la creación de páginas web sencillas desde un bloc de notas, por ejemplo. En esta nota te contamos ¿Qué es HTML y cómo crear tu primer código? ¡Sigue leyendo para más información!
HTML qué es
En inglés, HTML significa Hypertext Markup Language y en español, significa lenguaje de marcación de hipertexto. Parece un poco complicado, pero si nos ponemos a pensar podríamos decir que, es la base de todo sitio web, es decir con este tipo de lenguaje, los navegadores pueden estructurar mejor la información: Encabezados, párrafos, enlaces, imágenes etc.
Asimismo, el lenguaje HTML, está compuesto por atributos y marcadores (tag), elementos fundamentales que definen cómo va a estar estructurado el contenido de un sitio web. html free templates
Anteriormente, mencionamos que este código, es el acrónimo de Hypertext Markup Language, es decir Hipertextos, que hace referencia a textos con bloques interconectados y que pueden incluir imágenes, textos, tablas y otros elementos como también apuntar a otros hipervínculos o enlaces externos.
Por ejemplo: este es un hipervínculo que te envía a otra nota de nuestro blog para conocer las 8 Plataformas para crear un sitio web. También, te pueden llevar a documentos, pdf, número de WhatsApp, ubicación o Email.
¿Cuáles son los elementos más usados en HTML?
Ahora que ya sabes qué es html editor, te vamos a mostrar los principales marcadores que definen las funciones de los elementos que forman la estructura de un sitio web de html desde cero.
Antes de empezar, debemos aclarar que cada marcador siempre comienza con un signo de menor que (<), seguido del nombre de la etiqueta, y finalizando con un signo mayor que (>) y la /, de esta manera (/>). ¡Ahora sí comencemos!
Encabezado (<head>) o head
El encabezado o cabecera de un sitio web, mayormente contiene datos o meta datos importantes de este, por ejemplo: el título del sitio web, script, enlaces y las hojas de estilo.
Cuerpo del sitio web (<body>)
Dentro de este elemento va toda la información o contenido que se encuentra dentro del sitio web. Dentro de un código HTML puede ir sólo un <body>.
Párrafo (<p>)
Cuando iniciamos un párrafo, debemos escribir el marcador <p> luego debe cerrarse con el tag </p>
Por ejemplo: <p> Encontrá en nuestro blog Recursos TIC para tus clases </p>
Encabezado (<h2> al <h6>) dentro de HTML
Por otro lado, están las etiquetas de encabezado, que se usan como título principal <h2> o subtítulos <h2>, <h3>, <h4>, <h5> y <h6>, dependiendo de la profundidad que tenga un texto, en cuanto a subtítulos.
Por su parte, en HTML el H1, es el más importante de todos, y no debe repetirse, ya que es único. Pero si, pueden repetirse los h2, h3, h4 y así sucesivamente. Aquí te mostramos html ejemplos, que pueden estar ordenados de diferentes maneras, pero es más que nada para que sepas la estructura y tamaño de cada uno.
Imagen (<img>)
Para el caso de las imágenes, no es necesario cerrar el tag, como el caso anterior, ya que al ser un contenido visual se define con la etiqueta con el atributo «src» (source). En caso de que la imagen no se cargue correctamente debemos insertar el atributo Alt, que es el nombre de la imagen. Mira también html templates
Por ejemplo: <img src=»(enlace de la imagen)» alt=»»>
Lee también
- JavaScript en educación: herramienta versátil y poderosa
- Historia de la robótica: desde sus inicios hasta actualidad
- Cursos de programación para niños a distancia
Ancla o Anchor (<a>) en HTML pagina web
El anchor o ancla, te permite crear un hipervínculo, que es ni más ni menos que un enlace a una página interna o externa de la actual. Por lo que necesitas utilizar el atributo «href», para especificar el destino del enlace. También, puedes enlazar archivos PDF, email o teléfonos. html generator online
Por ejemplo: <a href=» (enlace)/a>
¿Cómo crear tu primer código HTML?
Ahora que sabes cuáles son los elementos para crear el código, debes saber que editor utilizar para poder ponerlo en marcha. En este caso podrás utilizar un editor de texto simple (bloc de notas) y un navegador web (Chrome, Mozilla etc) para visualizar la página.
Es importante saber que, también existen editores profesionales con una gran variedad de códigos especializados en la creación de sitios web como: HTML, HTML5, CSS, entre otros. Pero para quienes los que recién empiezan a diseñar páginas básicas, es recomendable que utilicen este tipo de códigos. html editor online
Pasos para crear un HTML
Para crearlos, primero debes abrir un nuevo archivo en bloc de notas y guardarlo con el nombre miprimersitioweb.html y con la extensión .html.
Una vez abierto, deberás copiar y pegar el siguiente html codigos. Pero ¡cuidado! dejamos algunas anotaciones para que veas cómo lo estás haciendo.
La primera parte de un HTML code, comienza con la siguiente estructura fija.
Recuerda siempre utilizar la / para cerrar una etiqueta. Una vez que hayas terminado, deberás guardar el archivo y luego el ícono tendrá la imagen de un mundito, que significará que ya creaste tu primer código en HTML, por lo que podrás acceder y de forma automática se te abrirá el navegador web para visualizar tu página.
Como veras es muy sencillo crear una página sencilla con el código, solo debes tener en cuenta cuando abrir y cerrar la etiqueta y qué elementos utilizarás para poder organizar mejor la información. html online.
Html comentarios
También puedes incluir comentarios dentro del código para proporcionar información adicional o hacer anotaciones que no se mostrarán en la página web. Los comentarios son útiles para que otros desarrolladores o tú mismo puedan entender y mantener el código más fácilmente. Para agregar comentarios, puedes seguir estas pautas:
1-Comentario de una sola línea: Puedes utilizar <!-- para iniciar un comentario de una sola línea y --> para finalizarlo. Todo lo que esté dentro de estos marcadores no se mostrará en la página web.
Ejemplo: <!-- Este es un comentario de una sola línea -->
2-Comentario de varias líneas: Si deseas agregar un comentario que abarque varias líneas, puedes utilizar el marcador <!-- al inicio y --> al final de cada línea de comentario.
Ejemplo:
<!--
Este es un comentario
que abarca
varias líneas
-->Hasta acá llegamos con la información acerca de ¿Qué es HTML y cómo crear tu primer código? Esperamos que te haya sido útil.
Recorda que en SabDemarco vas a encontrar más recursos y herramientas para aprender todo sobre Diseño-Desarrollo web y programación. Sigue leyendo para más información.
¿Cómo harías tu sitio web con HTML? ¿Qué información le agregarías para destacarte?
- 10 Mejores editores de texto para programar
- Cursos para el desarrollo de aplicaciones web a distancia
- Tendencias en el desarrollo de software
- ¿Qué es backend y frontend en el desarrollo web?
- Plataformas de Blog más utilizadas en educación
- HTML vs XML: ¿Qué son y cuáles son sus diferencias?
- HTML ¿Qué es y cómo crear tu primer código?
- ¿Dónde estudiar carreras de informática en argentina?
