Tabla de contenido:
- Paso 1: usar el Bloc de notas
- Paso 2: Agregar el árbol de documentos HTML básico
- Paso 3: guardar como página.html
- Paso 4: agregar un título a su página web
- Paso 5: agregar contenido a su página web
- ¡Bienvenido a mi pagina web
- Paso 6: Ver nuestros cambios hasta ahora
- Paso 7: agregar una etiqueta de párrafo
- ¡Bienvenido a mi pagina web
- Paso 8: dale un poco de color
- ¡Bienvenido a mi pagina web
- Paso 9: agregar una imagen
- ¡Bienvenido a mi pagina web
- Paso 10: Visualización del producto final
2025 Autor: John Day | [email protected]. Última modificación: 2025-01-23 14:40
Hoy vamos a crear una página web muy simple y básica desde cero. Hablaremos sobre los elementos HTML, el estilo de su página web (colores, fuentes, alineación, etc.) y, finalmente, ¡cómo insertar una imagen en su página web!
Al final de este instructivo, tendrás las habilidades básicas para crear una página web desde cero y descubrirás que la codificación no es tan difícil como parece.
Paso 1: usar el Bloc de notas
Usaremos el Bloc de notas en Windows para crear nuestra primera página web. Aunque cualquier editor de texto servirá, el bloc de notas viene preinstalado en las máquinas con Windows, por lo que es un excelente punto de partida.
Para abrir el bloc de notas, vaya a la barra de búsqueda en la esquina inferior izquierda de la pantalla y escriba "Bloc de notas". Luego, seleccione la aplicación "Bloc de notas" que aparece en los resultados de búsqueda. Debería abrirse una nueva ventana.
Paso 2: Agregar el árbol de documentos HTML básico
Todas las páginas web deben seguir una estructura básica estándar para que su navegador web (Chrome, Firefox, Edge, Internet Explorer, Safari …) procese y muestre su página web.
Esto se llama árbol de documentos html. En el Bloc de notas, escriba los "elementos" o "etiquetas" html como se muestra en la captura de pantalla. Siéntase libre de copiar y pegar también:
Paso 3: guardar como página.html
Ahora que tenemos nuestra estructura html básica en el Bloc de notas, guardémosla para no perder ningún trabajo y para que podamos ver nuestros cambios a medida que avanzamos en el Instructable.
- Seleccione 'Archivo'> 'Guardar como …' (captura de pantalla 1)
- Cambie el tipo de archivo a 'Todos los archivos' (captura de pantalla 2)
- Dé a su archivo un nombre de su elección. Asegúrese de anotar dónde está guardando el documento en su computadora para poder abrirlo más tarde. NOTA: La parte más importante de guardar este archivo es agregar ".html" al final del nombre del archivo. Esto permitirá que su computadora la reconozca como una página web. Entonces, si desea nombrar su archivo "my_webpage", asegúrese de agregar.html al final, p. Ej. "my_webpage.html"
Paso 4: agregar un título a su página web
Así que tenemos la estructura html básica necesaria para que los navegadores web interpreten y muestren nuestra página web, pero no tenemos ningún contenido. ¡Cambiemos eso!
Lo primero que debemos hacer es darle un título a nuestra página web. La mayoría de las páginas web tienen un título. Esto es lo que se muestra en la pestaña de su navegador web (vea la captura de pantalla). Voy a darle a mi página web el título "Sitio web de Taylor". Para hacer esto, necesitamos agregar un elemento 'título'.
Sitio web de Taylor
En este punto, notará que cada etiqueta tiene una etiqueta de "apertura" y una etiqueta de "cierre". Tal como
y.
Esto es para discernir dónde comienza el título y dónde termina. Casi todas las etiquetas html siguen esto, sin embargo, hay algunas excepciones.
Paso 5: agregar contenido a su página web
Bueno, tenemos un título para nuestra página web, pero todavía no tenemos ningún contenido real para ella. ¡Agreguemos un poco de estilo!
Hemos agregado un título a nuestra página web usando un elemento 'título'. Démosle a nuestra página web un encabezado grande que llame la atención usando un elemento 'h1' que es un elemento de encabezado.
Sitio web de Taylor
¡Bienvenido a mi pagina web
Paso 6: Ver nuestros cambios hasta ahora
Tenemos un título, tenemos algo de contenido, echemos un vistazo a nuestra página web para ver cómo está llegando hasta ahora.
- Guarde su archivo en el bloc de notas
- Vaya a donde guardó su archivo y haga doble clic en él. Debería abrirse automáticamente en su navegador web predeterminado. ¡Luciendo bien!
Paso 7: agregar una etiqueta de párrafo
Tenemos un título, un encabezado, ahora agreguemos un párrafo con más texto. El nombre del elemento de un párrafo es 'p'. Puedes ver su uso a continuación:
Sitio web de Taylor
¡Bienvenido a mi pagina web
¡Hoy aprenderemos a crear esta página web muy sencilla!
Nota: Puede ver los cambios en cualquier momento que desee guardando el bloc de notas y abriendo el archivo.
Paso 8: dale un poco de color
Tenemos nuestra página web en marcha, pero es bastante simple. ¡Démosle un poco de color a nuestra etiqueta de párrafo!
Podemos colorear diferentes elementos agregando un atributo de 'estilo' a la etiqueta 'p' como se detalla a continuación:
Sitio web de Taylor
¡Bienvenido a mi pagina web
¡Hoy aprenderemos a crear esta página web muy sencilla!
Paso 9: agregar una imagen
¿Qué es un sitio web sin imágenes? ¡Agreguemos una imagen a nuestro sitio web!
El primer paso es encontrar una imagen que te guste. Usé imágenes de Google para buscar un golden retriever. Tire de la imagen hacia arriba y asegúrese de que la URL termine en.jpg,.png,.gif,.jpg, etc.
Una vez que haya elegido su imagen, debemos agregarla a la página html usando una etiqueta 'img'. Mi imagen es:
Agréguelo a su página usando una etiqueta 'img' con un atributo 'src':
Sitio web de Taylor
¡Bienvenido a mi pagina web
¡Hoy aprenderemos a crear esta página web muy sencilla!
Paso 10: Visualización del producto final
Guarde el archivo del bloc de notas y abra el producto final. ¡Debería ver su página web!
Recomendado:
Controlar el brillo del LED mediante Raspberry Pi y una página web personalizada: 5 pasos
Control del brillo del LED mediante Raspberry Pi y página web personalizada: usando un servidor apache en mi pi con php, encontré una manera de controlar el brillo de un LED usando un control deslizante con una página web personalizada que es accesible en cualquier dispositivo conectado a la misma red que su pi .Hay muchas formas en las que esto se puede hacer
Ventilador ESP8266 POV con reloj y actualización de texto de página web: 8 pasos (con imágenes)
Ventilador ESP8266 POV con reloj y actualización de texto de página web: se trata de un ventilador de velocidad variable, POV (persistencia de la visión) que muestra la hora de forma intermitente y dos mensajes de texto que se pueden actualizar `` sobre la marcha ''. también es un servidor web de una sola página que te permite cambiar los dos mensajes de texto
Cómo crear una página web simple con corchetes para principiantes: 14 pasos
Cómo crear una página web simple usando corchetes para principiantes: Introducción Las siguientes instrucciones proporcionan una guía paso a paso para crear una página web usando corchetes. Brackets es un editor de código fuente con un enfoque principal en el desarrollo web. Creado por Adobe Systems, es un software gratuito y de código abierto con licencia
Página web de Node.js, parte 2: 7 pasos
Página web de Node.js Parte 2: ¡Bienvenido a la PARTE 2! Esta es la parte 2 de mi tutorial de aplicación del sitio web Node.js. Dividí este tutorial en dos partes, ya que separa a aquellos que solo necesitan una breve introducción y a aquellos que quieren un tutorial completo en una página web
Montaje del clon de Arduino de la placa Really Bare Bones (RBBB) - ACTUALIZADO: 16 pasos
Ensamblaje de la placa Really Bare Bones Board (RBBB) Arduino Clone - ACTUALIZADO: ACTUALIZACIÓN 16/8/2008: se agregaron imágenes de diferentes configuraciones de placa en el último paso. La RBBB de Modern Device Company es un pequeño clon maravilloso de Arduino. Si tiene un proyecto Arduino que requiere un espacio pequeño o una placa dedicada de bajo costo, esto