Este documento proporciona instrucciones paso a paso para crear una página web básica utilizando HTML. Explica cómo abrir un archivo de texto plano, agregar la estructura básica de HTML con etiquetas como <html>, <head>, <title>, y <body>, y luego agregar contenido como encabezados, párrafos, imágenes y enlaces utilizando etiquetas adicionales. El objetivo es enseñar los conceptos básicos de HTML de una manera simple y práctica para que cualquier persona pueda crear su propia
1. Cómo hacer una página web básica
Alumno: Iván Alejandro Ramírez Juárez
Especialidad: Programación
Grupo: D Grado: 4°
Materia: Desarrollo de aplicaciones web
Maestro: Lic. Everardo Juárez Pedraza
Correo: Ivan-alex_@hotmail.com
Aula: 14
2. ¿Alguna vez te has preguntado cómo se crea una página de
internet? Si lo has hecho, de seguro habrás pensado que el proceso
de creación es muy difícil y complicado, pero no lo es, la creación
de páginas web puede ser más fácil de lo que piensas. Cualquier
persona podría crear la suya, todo depende de la determinación de
la persona.
Pero bueno, dejando eso a un lado, yo te enseñare a crear una
página web básica utilizando el lenguaje HTML.
¿Sabes cómo luce un código de HTML? Si lo sabes, muy bien, ahora
que si nunca has visto como es la estructura de un código en HTML
es algo más o menos así:
3. Si al ver el bloc de notas no entendiste nada no te asustes, al
terminar el tutorial entenderás un poco mejor su sintaxis.
Puede que te parezca un simple documento con muchos símbolos
y letras raras sin sentido, pero todo tiene un “porque” en la
programación.
En el ejemplo de más arriba utilice CSS, pero no nos
concentraremos en el (por ahora).
El código vendría siendo algo como esto:
El contenido de la pagina es sobre un videojuego(Juegazo por
cierto), solo es un mero ejemplo, ¡Pero tú puedes hacer tu pagina
de lo que quieras!
4. Paso 1
Lo primero seria abrir el bloc de notas (inicio -> bloc de notas)
Paso 2
Ya en el bloc de notas es momento de empezar a escribir el código,
empecemos con la estructura.
5. Las palabras dentro de los símbolos “<>” son llamadas etiquetas,
son los comandos de HTML, las etiquetas de la foto son esenciales
para el funcionamiento del código, así que procura siempre
ponerlas al empezar.
Daré una breve descripción de cada uno para no hacer más largo el
tutorial.
<!DOCTYPE html> = Aquí estas declarando el tipo de documento
que estas escribiendo, en este caso, HTML.
<html> </html> = Esta etiqueta es toda la estructura del código,
dentro de ella se ponen todas las demás etiquetas.
<head></head> = En pocas palabras podría definirse como la
“cabeza” de la pagina, en ella se escribe el titulo y/o cualquier otra
cosa que tenga que declarase en el encabezado.
<title></title> = como bien dice es el titulo de la pagina, esta se
muestra en la pestaña que se encuentra en la parte superior del
navegador (va dentro de las etiquetas <head>)
<body></body> = Si las etiquetas head son la “cabeza” de la pagina,
body vendría siendo el “cuerpo” de la misma, entre estas etiquetas
va todo el contenido de la pagina.
6. Paso 3
Después de que hallas escrito la estructura y haberle puesto un
titulo. Es hora de agregar el contenido de la pagina (¡YAY!)
Como puedes observar, he agregado dos etiquetas nuevas dentro
de las etiquetas body.
<h1></h1> = Las etiquetas h tienen la función de cambiar el tamaño
del texto son 6 en total, donde h1 vendría siendo la letra más
grande y h6 la letra más pequeña.
<p></p> = Las p son un simple párrafo normal, ¡puedes escribir lo
que quieras!
7. Probar código
Haré una pequeña pausa en el tutorial, siempre que estés
escribiendo un código en HTML querrás comprobar si el código que
estas escribiendo funciona ¿no?
Puedes probarlo de una manera simple:
En el bloc de notas ves a Archivo -> guardar como:
En esta ventana das en Tipo: Todos los archivos (*.*) y puedes
nombrarlo como gustes. Ojo: Asegúrate poner la extensión “.html”
al final del nombre.
8. Al guardarlo te saldrá algo así, ahora solo resta ejecutarlo dándole
doble click.
¡Perfecto! El código funciono perfectamente.
9. Paso 4
Ahora de vuelta con el tutorial, escribe en el código tu nombre y
una pequeña descripción sobre ti utilizando las etiquetas h y p.
La pagina está bien pero… ¿y si le agregamos un poco de color?
Para esto se utilizaría el comando style = “color:” dentro de la
etiqueta de inicio. Por ejemplo:
<p style = “color: Red”>Hola</p>
Aquí le estoy indicando a la computadora que quiero que todo el
contenido del párrafo este en color rojo, en este caso, hola.
¡Pruébalo en tu código! Solo recuerda que el nombre del color debe
de estar en ingles (Red, Black, Orange, Green, Blue…etc)
¡A darle color!
10. Paso 5
Está bien que ahora tenga color y todo pero… le hace falta
imágenes… ¡Vamos a ponerlas!
Para insertar una imagen en la pagina se usa una mágica etiqueta
llamada <img> su sintaxis es esta:
<img src = “url de la imagen”/>
Si observas bien te darás cuenta que img No tiene una etiqueta de
cierra, en la misma línea en que se abre la etiqueta <img se cierra al
final de las comillas />
¡Prueba poniendo fotos en tu pagina!
Si no sabes cómo obtener el url de una imagen da click derecho en
la imagen deseada y dale en la opción copiar url de la imagen.
11. Muy bien, ahora que tenemos imágenes también en nuestra
página, hace falta una cosa más, ¡insertar links!
Paso 6
En toda página web siempre hay textos que te llevan a una página
en especifico esto se programa en html utilizando el código:
<a href = “link de la pagina”></a>
A diferencia de la etiqueta <img> esta SI tiene una etiqueta de
cierre.
Para un mejor entendimiento digamos que quieres poner el link de
tu página de facebook para que los visitantes accedan:
<a href = “link de tu pagina de facebook”>¡dale like a mí
página!</a>
12. Dentro de las etiquetas <a> va el texto que quieres que abarque el
link de tu pagina, este de manera predeterminada saldrá de color
azul.
¡Inténtalo!
Este pequeño tutorial es para dar una idea de cómo
funciona el HTML, solo se mostro lo más básico de este
lenguaje de una manera breve.
Espero que esto te allápodidoayudara comprender lo
básico, no es tan complicadouna vez que empiezas, sigue
practicando,¡la practica hace al maestro!
