Página web de Bare Bones: 10 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

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.

1. Seleccione 'Archivo'> 'Guardar como …' (captura de pantalla 1)
2. Cambie el tipo de archivo a 'Todos los archivos' (captura de pantalla 2)
3. 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.

1. Guarde su archivo en el bloc de notas
2. 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!