cómo hacer una página web básica
TRANSCRIPT
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: [email protected]
Aula: 14
¿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í:
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!
Paso 1Lo 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.
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.
Paso 3Despué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!
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.
Al guardarlo te saldrá algo así, ahora solo resta ejecutarlo dándole doble click.
¡Perfecto! El código funciono perfectamente.
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!
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.
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>
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á podido ayudar a comprender lo básico, no es tan complicado una vez que empiezas, sigue practicando, ¡la practica hace al maestro!