Hola gente, ¿qué tal les va?
Muy atentos. ¡Hoy Mauro Ocampo nos trae un tutorial sobre
como crear nuestra primer página web sin necesidad de ser un experto,
utilizando el blog de notas y el lenguaje html!
Hoy vamos a dar el
primer paso en un viaje fascinante: ¡crear tu propia página web!
Sé que la idea puede sonar intimidante si no vienes del
mundo del desarrollo, pero te aseguro que, con las herramientas y el enfoque
correcto, está al alcance de cualquiera.
No necesitas ser un
mago del código para plasmar tus ideas en la web.
¿Para qué sirve mi primer página web?
En la era digital, tener una presencia online es crucial. Ya
sea para compartir tus pasiones, promocionar tu negocio, construir tu marca
personal o simplemente experimentar.
Una página web te ofrece un lienzo digital sin límites. Te
permite conectar con audiencias globales, mostrar tu trabajo, vender tus
productos o servicios, y establecer tu identidad en el vasto universo de
internet. ¡Es tu escaparate al mundo!
una página web es una forma fundamental de darte a conocer
en internet.
• Compartir información: Puedes comunicar tus ideas, ofrecer
detalles sobre tus productos o servicios, publicar contenido creativo, etc., a
una audiencia global.
• Construir tu marca personal o profesional: Una página web
bien diseñada te ayuda a proyectar una imagen profesional ya diferenciarte.
• Interactuar con tu audiencia: Puedes incluir formularios
de contacto, secciones de comentarios o enlaces a redes sociales para fomentar
la comunicación.
• Aprender los fundamentos del desarrollo web: Crear una
página web básica en HTML es el primer paso para entender cómo funciona la web
y puede abrirte las puertas a aprender otras tecnologías.
• Muestra tus habilidades: Si estás en un campo creativo o
técnico, tu página web puede ser una excelente plataforma para mostrar tu
trabajo.
¿Qué es el lenguaje html?
HTML: El Ladrillo Fundamental (¡y Amigable!)
Aunque a menudo se le llama "lenguaje de
programación", HTML (HyperText Markup Language) es técnicamente un
lenguaje de marcado.
Esto significa que se utiliza para estructurar y presentar
el contenido de una página web.
En lugar de dar instrucciones a la computadora para realizar
acciones (como lo hacen los lenguajes de programación), HTML utiliza etiquetas
(tags) para describir la función de cada parte del contenido:
• <p>: Indica un párrafo de texto.
• <h1>a<h6> : Defina encabezados de diferentes
niveles.
• <img>: Inserta una imagen.
• <a>: Crea un hipervínculo a otra página.
• <ul>y<li> : Crean listas no ordenadas (con
viñetas).
• <ol>y<li> : Crean listas ordenadas
(numeradas).
• <div>y<span> : Se utilizan para agrupar y
estilizar elementos.
Los navegadores web (como Chrome, Firefox, Safari) leen el
código HTML y lo interpretan para mostrar la página web visualmente al usuario.
Cuando hablamos de construir una web, HTML, es el lenguaje
fundamental. Piénsalo como los ladrillos y la estructura de tu casa digital.
Con HTML, defines la estructura y el contenido de tu página:
los textos, las imágenes, los videos, los enlaces... todo.
La buena noticia es que aprender los conceptos básicos de
HTML es sorprendentemente sencillo. No necesitas memorizar complejas fórmulas
ni entender algoritmos avanzados. Con unas pocas etiquetas (<p>,
<h1>, <img>, <a>, etc.), puedes comenzar a dar forma a tus
ideas.
¿Cuáles son las ventajas y la utilidad de crear tu primera página web?
Crear tu primera página web en HTML ofrece varias ventajas y
utilidades:
Ventajas:
• Es el punto de partida: HTML es fundamental para cualquier
desarrollo web. Aprenderlo te proporciona una base sólida para entender
tecnologías más avanzadas como PHP para el procesamiento y validación de datos;
CSS (para el diseño) y JavaScript (para la
interactividad).
• Es fácil de aprender: La sintaxis de HTML es relativamente
sencilla y lógica, lo que la hace accesible para principiantes.
• Es compatible universalmente: Todos los navegadores web pueden
interpretar y
mostrar código HTML.
• Es gratuito y de código abierto: No necesitas software especial ni
licencias para usar HTML.
• Te da control sobre tu contenido: Al crear tu propia
página, tienes control total sobre
cómo se presenta tu información.
• Es ligero y rápido: Las páginas HTML básicas suelen
cargarse rápidamente, lo que mejora la experiencia del usuario.
• Es la base para el SEO: Una estructura HTML bien
organizada es importante para que los motores de búsqueda entiendan el
contenido de tu página.
Utilidad:
• Presencia en línea básica: Incluso una página HTML
sencilla te permite tener una presencia en internet.
• Compartir información estática: Es ideal para mostrar
información que no cambia con frecuencia, como un currículum vitae, información
de contacto o detalles básicos de un proyecto.
• Aprender haciendo: La mejor manera de entender HTML es practicar y ver
los resultados en tu navegador.
• Personalización: Aunque limitado en cuanto a diseño sin CSS, puedes
estructurar el contenido exactamente como lo necesitas.
• Base para proyectos más complejos: Tu primera página HTML
puede ser el punto de partida para construir sitios web más dinámicos e
interactivos en el futuro.
En resumen, crear tu primera página web en HTML es un paso esencial y
valioso para cualquiera que quiera entender o participar en el mundo digital.
Te proporciona las bases para construir tu presencia en línea y para seguir
aprendiendo sobre desarrollo web.
Escribir tu primer código HTML es tan simple como crear un
archivo de texto con la extensión .html y empezar a escribir etiquetas. El
navegador se encargará de interpretar esas etiquetas y mostrar tu contenido
visualmente.
El Poder de Empezar:
El mayor obstáculo suele ser la inacción. Muchos se
paralizan pensando que necesitan un conocimiento profundo antes de siquiera
intentarlo.
¡Nada más lejos de la verdad!
La mejor manera de aprender es
haciendo.
Empieza con algo simple: una página con un título, un
párrafo de texto y quizás una imagen. Experimenta con las etiquetas, guarda los
cambios y actualiza tu navegador para ver los resultados. Te sorprenderá lo
rápido que puedes lograr algo tangible.
¡Anímate! El mundo del desarrollo web te espera con los
brazos abiertos.
¿Qué necesitamos ¡
Olvídate de entornos de desarrollo complejos al principio.
Para empezar, solo necesitas
•Una computadora con conexión a internet.
• un editor de texto plano (como el Bloc de Notas en Windows
o TextEdit en Mac)
• Un navegador web (Chrome, Firefox, Edge, Safari, etc.).
¡Eso es todo!
Tutorial: 🌎💻 ¡Tu Primera Web ¡HTML sin Ser un
Gurú informático! ¡Es Fácil!
En este tutorial Mauro nos mostrará:
• Como abrir un blog de notas y comenzar a escribir el
código.
• Como insertar etiquetas html.
• Breve descripción de la función de cada etiqueta a
utilizar.
• Como articular la sintaxis con el contenido de la
descripción dentro de cada etiqueta.
• Como dotar al documento de la versión cinco de html.
• Como decirle al navegador que el contenido debe ser leído
en lenguaje español.
• Como decirle al navegador que se encuentra habilitado el
uso de tildes y caracteres especiales.
• Como poner la descripción a los enlaces.
Como se vincula la
etiqueta “style” (de estilo) con el lenguaje CSS
• División del documento html en dos secciones, head y body.
Dimensión visible y no visible de la página.
• Como insertar meta información en la sección head.
• Como crear el nombre con el que nuestra página será
visible en internet.
• Como crear el titulo interno de nuestra página mediante un
encabezado.
• Como buscar y obtener la ruta de una imagen para colocarla
dentro de la etiqueta img.
• Como insertar una foto.
• Como colocar una
descripción de la imagen.
• Como obtener y crear
vínculos que redireccionen a enlaces externos.
• Como interactuar con el reproductor de you tuve una vez
redireccionado desde el hipervínculo.
• Como crear la fecha y horario de nuestra página.
• Como guardar el código reemplazando la extensión txt por
html.
• Como abrir el archivo que contiene el código de nuestra
página con el navegador predeterminado.
• Como conmutar entre ventanas para editar el código, y
guardar los cambios en el blog de notas.
• Como actualizar la
página del navegador mediante el atajo de teclado.
• Como ejecutar el
código en tiempo real.
La Descarga:
Les dejaré en la descarga:
• El audio tutorial (en los canales Odysse y YouTube estará en video tutorial).
Y ya sabes, Si te gusta este contenido,
Apóyanos haciendo una donación:
compártelo en: Facebook, X.
Deja un comentario sobre esta entrada.
Síguenos en X:
Abajo tienes el botón.
Ahora puedes seguirnos también en Facebook
Entra al Facebook
de Tecno Conocimiento Accesible:
Abajo tienes el botón.
Suscríbete al blog:
Para solicitar el ingreso a nuestros grupos de WhatsApp o
Telegram:
Puedes escribir al mail del blog con tus datos si deseas
ingresar a los mismos.
Escucha todos nuestros audios tutoriales, cómodamente:
Entrando desde
aquí a nuestro canal en Youtube:
Ahora también, en nuestro canal en
Odysse:
Entra
al canal de Tecnoconocimiento Accesible en Odisse:
O si prefieres escúchanos en:
Anchor:
Ponte en contacto con nosotros, déjanos tus sugerencias,
dudas, o comentarios,
abajo tienes un sencillo formulario,
o si lo prefieres,
escríbenos al correo
del blog:
tecnoconocimientoaccesible@gmail.com
Los aportes siempre serán bienvenidos.
cuando nos escribas por uno de los medios con alguna
sugerencia, se publicará con tu nombre.
además, como ya se sabe, puedes publicar esta entrada en
otro sitio, pero no te olvides citar la fuente.
Saludos, y hasta otro post.
Ingresa a
quí para visitar el nuevo canal de Mauro Ocampo:
Descarga
aquí el Audio tutorial:
