Transcription
[Música] Hola, cómo están? Mi nombre es Angel de Jesús, saludando a todos y al profesor Amadiz. En este video tutorial, les voy a explicar cómo hacer una página web utilizando el programa Notepad++ con HTML. La página que vamos a tener al final va a ser igual a esta. Les voy a enseñar cómo hacer una página web, eh, igual a esta, con imágenes, eh, links, título y el texto, y todas las cosas. Eh, pueden ver que funciona cuando le damos a segunda parte; cambia de página. Pueden darse cuenta aquí en esta parte también. Eh, tercera vez que le tengo diferentes imágenes en cada una para que se note la transición. Eh, y así entonces quedará su página web al final de este video tutorial. Lo primero que deben hacer es crear una carpeta en su escritorio para que tengan todo más organizado. En este caso, ya yo la he creado; se llama la carpeta mía HTML. En ella van a crear eh documentos de texto, dándole clic derecho, nuevo y texto documento, para así poder ponerle el nombre de esa página, por ejemplo, "ejemplo", y la extensión .txt, la sustituyen por .html, y les dan a "sí". Y de esa manera, como pudieron ver, se crea un archivo HTML. Este lo vamos a borrar. También les aconsejo que dentro de la carpeta donde vayan a tener todas sus páginas, creen otra carpeta que se llame como ustedes prefieran; yo prefiero llamarla "img", donde voy a tener todas las imágenes que utilizaré dentro de mi página web, ya creadas. Todas estas, todos estos artículos, continuamos con la edición de la página web. Le damos clic derecho; yo le puse, yo tengo, voy a hacer una, un website que tenga tres páginas; empiezo por la primera, dándole clic derecho y editar con el programa que ya les he mencionado, Notepad++.
Este programa es un editor que nos facilita la realización de páginas web. Ya antes señalándole que es un archivo HTML, la primera etiqueta que debemos poner en el archivo HTML para que reconozca que es una página web es la `<html>`. ¿Cómo se pone una etiqueta bien? Entonces, sigue poner el signo de menor que, mayor que, y dentro de ambos escribir el nombre de la etiqueta, la cual es "html". Toda, toda etiqueta que se abre debe de cerrarse. ¿Cómo se cierra? De la misma manera que se abre, únicamente agregándole, entre el menor que y el nombre de la etiqueta, este símbolo `/`. Bien, tenemos ya las dos, la etiqueta principal. Luego de esta, le sigue una que se llama "head" o "cabeza" en inglés. Esta va a ser la cabeza de la página web. Entonces, como les dije, hay que cerrarla. Bien, continuamos entonces con la próxima etiqueta, la cual es "body" o "bar". [Música] Bien, entonces, generalmente yo hago esto, le doy un, una sangría para tener el código más organizado y entenderlo sea de más fácil comprensión. Bien, entonces, una página web consiste de estas cuatro etiquetas, estas tres etiquetas que pueden ver aquí, y todo lo demás va dentro de cada una de ellas. Bien, entonces ya tenemos las tres etiquetas principales, y empecemos a agregarle eh lo que queremos que nuestra página tenga. Por ejemplo, en la etiqueta "head", podemos poner otra etiqueta que se llame "title", que sirve en… Aquí vamos a poner, por ejemplo, "Distribuidora NCO", y cerramos la etiqueta. Esta etiqueta sirve para poner el nombre en la arriba, en el navegador, en la ventana que tenemos abierta. Tenemos entonces que darle aquí a guardar todo o a Ctrl+S, y le damos a ejecutar, y aquí en Chrome, por ejemplo, a mí me gusta hacerlo en Chrome, yo lo hago en Chrome, y aquí tenemos la página web. Como pueden ver aquí que dice el título que le hemos agregado ahora mismo, está en blanco todo el resto, pero eso pronto dejará de ser así.
Bien, entonces continuamos con, con la página, eh, le seguimos agregando más contenido, y lo siguiente que debemos agregarle es el, el título, bien, de la, el contenido, el título del contenido. También puede ir dentro de la etiqueta "head". Eh, le vamos a poner esta etiqueta llamada "<h1>". Esta etiqueta sirve para darle tamaño al texto; va desde "<h1>", que es la más grande, hasta "<h6>", que es la más pequeña. Entonces, luego de escribir "<h1>", le ponemos "Distribuidora" otra vez. Vamos a copiar y a pegar, y cerramos la etiqueta. Bien, entonces, como pueden ver aquí, ahora vieron cómo salió el título, el título sí, aquí. Y continuamos eh agregándole información a nuestra página. Vamos a movernos ahora al "body" o cuerpo de la página. Aquí le introduciremos lo que es la, el contenido, el contenido de la página. Estos párrafos se agregan mediante esta etiqueta, la etiqueta llamada etiqueta "<p>". Eh, dentro de ellos, aquí yo tengo un párrafo que he editado antes; los lo vamos a copiar y lo vamos a pegar dentro de la etiqueta. Bien, observen algo aquí; pueden ver que no importa la forma que yo le dé al texto. Eh, HTML no respeta cómo yo hago mis cosas, eh, cómo yo ordeno mi texto, a menos, pueden ver ahí que está lineal, de una manera lineal, a menos que yo le diga cómo lo quiero. Más adelante le explicaré, le explicaré cómo darle la forma y algo lo más básico. Entonces, ya tenemos el título de la página, el contenido, eh, podemos continuar. Entonces, si le queremos agregar una imagen, ¿verdad?, ya sea que la queramos abajo del texto, en esta parte, o entre el título y la información; en este caso, yo la quiero entre el título y la información. Bien, entonces la etiqueta que se utiliza para insertar imágenes es esta `<img>`, y para decirle dónde está la imagen debemos utilizar este atributo que se llama "src", del inglés "source", que significa "fuente", y aquí le decimos a la etiqueta dónde está. Recuerden que yo le había dicho que crearan una imagen, una carpeta que se llamara "imagen", y dentro de la, la carpeta iban a publicar, a colocar todas las imágenes que iban a, a utilizar. Bien, entonces así se llama mi imagen; está ahí la ruta. Le damos a guardar, y como pueden ver aquí está la imagen. Es bastante grande, por lo que ahora les voy a enseñar cómo modificar su tamaño con este otro atributo que se llama "width", eh, que y el otro que se llama "height". Podemos modificar tanto el ancho de la imagen como la altura de ella. Entonces, en "width" vamos a ponerle unos, no sé, vamos a ver, 650, y en "height" vamos a ponerle 380. Bien, entonces le damos a guardar, y podemos ver que la imagen ha adaptado un nuevo tamaño, y el cual considero que es perfecto para la estructura de nuestra página. Bien, como ya pueden ver, es una manera muy rápida de crear una página web, eh, no nada complicada.
Bien, ahora empecemos a darle un poquito de belleza, eh, un poquito de belleza con demás etiquetas y elementos que vamos a introducir a continuación. Para poder saltar, para poder navegar de una página a otra, necesitamos eh links, ¿verdad? Entonces, hay una etiqueta que sirve para eso, la cual es la etiqueta `<a>`, correcto. Entonces, esta etiqueta `<a>` es la de eh redirección, ¿verdad?, la de llevarnos a otras páginas. Y utilizando un atributo de la etiqueta, se llama "href". Aquí vamos a poner dónde queremos que cuando le demos clic vaya la página. En este caso, estamos en la primera y queremos que se vaya a la segunda. Entonces, le decimos dónde, la página que queremos se llama "segunda.html", y la cerramos. Bien, entonces en este espacio cerramos la etiqueta también, y en este espacio que queda aquí debemos de poner el texto o el objeto que nosotros queremos que cuando le demos clic nos redirija. En este caso, le voy a poner un texto que se llame "Segunda parte". Bien, eh, entonces vamos a copiar y a pegar esto, ¿verdad?, para tenerlo, hacerlo más rápido, y aquí le voy a poner, en vez de "Segunda", "Tercera", que es mi tercera página, y de la misma forma aquí. Bien, les, le voy a poner aquí de nuevo esto, pero voy a poner "Primera", para qué, si estoy en la primera, bueno, porque puede el usuario darle clic a la primera, a este link, y así simplemente la página va a refrescarse, recargarse. Bien, entonces, como podemos ver, le damos a guardar y nos vamos, y tenemos los links en esta parte. Vean, HTML no respeta, no respeta la ubicación que le demos en el código; él la tira de la manera, eh, así, sin formato. Entonces, empecemos a ubicar nuestro texto. Este, para nosotros mover eso de ahí, utilizaremos una, una etiqueta. Primero, lo colocaremos en el centro, y lo queremos más grande el tamaño, ¿verdad?, porque así está muy pequeño para hacer prácticamente elementos del menú. Entonces, vamos aquí arriba y le vamos a dar, como les dije anteriormente, una etiqueta "<h3>", que es un poquito más pequeña que la "<h1>", ¿cierto? Entonces, le vamos a dar con otra etiqueta "center", que es, es la que sirve para ponerlas centrificadas. Bien, entonces esto queda en el medio, y luego de que se acabe lo que está dentro de las, de esas etiquetas, vamos a cerrar eh cada una de ellas. Entonces, está "center", esta ya está cerrada, y "<h3>", ahí está cerrada. Bien, entonces podemos ver que va tomando un poquito mejor de forma, va, ya está en el centro de la, de la, de la pantalla. Vamos a darle para que esa imagen baje. Vamos a darle una… Aquí está el problema; la imagen está dentro de esta parte. Entonces, vamos a cortar esto y vamos a ponerla arriba del texto. Bien, entonces aquí, bien, ahí está el menú que está aquí arriba, la imagen y luego la información de la página. Me parece que hay muy poco texto, entonces lo que vamos a hacer es copiar este contenido y pegarlo nuevamente, para que, simplemente para motivos de… Bien, ya se ve un poquito más de texto. Entonces, ¿qué vemos? La imagen, ¿cómo quedaría mejor en el centro, verdad? Entonces, iremos al código y le pondremos a la imagen en el centro. Vamos, vamos a donde está la imagen y abrimos entonces, entonces otra etiqueta de "center" dedicada para la imagen, y la cerremos justo después de que pase la imagen, y ahí está. Y cuando le damos a recargar, está la imagen en el centro, como le dijimos al código. Bien, entonces, eh, podemos ver que en la parte del menú donde nos redireccionará a las otras páginas está bien pegadita y casi se entiende como si fuera una sola palabra, una o la oración. Entonces, hay una… Bueno, no es una etiqueta, es prácticamente un comando que nos sirve para dar un espacio. Aquí está; nos sirve para dar un espacio; es el " ", terminado en comillas. Bien, como pueden ver, yo lo voy a copiar varias veces y lo voy a pegar para que se note la diferencia, ¿cierto? Entonces, vamos y recargamos, y pueden ver que aquí se hizo un espacio, que es justo lo que queremos. Entonces, vamos a pegarlo dos o tres veces más, y aquí también para que se vea más estético. Bien, entonces, eh, está cogiendo como forma, ¿verdad?, la, la página. Entonces, ¿qué más le falta? Este título estaría mucho mejor en el medio, por lo que, ¿qué tenemos que hacer? Agregarle la etiqueta "center", digo "center", perdón, justo aquí donde está el código que pone el, el título. Bien, entonces actualizamos, y ahí está el título en el mismo medio. Entonces, estamos casi terminando nuestra página; lo que le faltan son retoques. Bien, entonces vamos a la parte del texto. Si queremos darle un enter, así como está, un salto de línea, bien, entonces lo que tenemos que hacer es, hay una etiqueta que se llama "<br>". Esta etiqueta sirve para el salto de línea, como les he dicho ahora mismo, y pueden observar en esta página, en esta parte, por aquí arriba del texto, que cuando le doy a recargar, ahí hace el salto de línea. Entonces, así nuestro texto va cogiendo forma. Vamos a copiar y a pegarla de nuevo, eh, va cogiendo forma, eh, y no formato para que se vea más de una manera más estética. Bien, hay unos atributos de las etiquetas que son importantes, como por ejemplo, en el "body" podemos poner un atributo que se llame "bgcolor", que significa "background color", y es para darle color al fondo. Vamos a ponerle un fondo de color gris. Recuerden que todos los códigos son en inglés, ¿verdad?, y vamos a ponerle también a las imágenes un atributo que se llama "title". Dirían que es lo mismo que esta etiqueta de aquí, eh, pero no hace diferente función; lo que hace este atributo es eh que mientras la imagen tiene algún error de, de ruta, si no sale la imagen, sale un texto que no dice qué imagen es que va ahí o lo que le pongamos. Por ejemplo, aquí le voy a poner a la imagen, le voy a poner "Imagen de Distribuidora". Bien, entonces cuando yo le dé… ¿Verdad? Vimos el cambio del fondo, ¿verdad?, del etiqueta que fue esta, que, del atributo que fue el que le dije aquí, y no vimos ningún cambio en la imagen, ¿verdad? Entonces, ¿qué les dije? Que cuando tengan alguna imagen de, un error de nombre de imagen o de ruta, por ejemplo, le vamos a borrar solamente una sola letra y le vamos a recargar otra vez. Ven, sale el cuadro y ahí sale lo que hemos digitado, "Imagen de Distribuidora Anáton". De esta manera, si hay algún error, nos permite el código saber de, y organizarnos más para tener todo más, eh, mejor distribuido. Bien, entonces aquí volvió la imagen, y ya estamos casi llegando a la parte final de esta, de este video tutorial. Entonces, ¿qué sigue? Vamos a agregarle otros detallitos. ¿Qué les parece si tal vez una línea entre "Distribuidora Anáton" y el título, ¿verdad?, para darle como ese aspecto de división, de separación, de, perdón. Entonces le vamos a agregar la línea mediante la etiqueta llamada "<hr>". ¿Dónde queremos la línea? Entonces, justo del título, ¿verdad? Entonces, como aquí culmina la etiqueta del título, se supone que aquí es que va la etiqueta, se llama "<hr>", como les dije anteriormente, y miren cómo esto dibuja una pequeña línea, ¿verdad?, que es simple, pero que nos da más organización a la hora de ver la página. Entonces, vamos a agregarle otra entre el menú y la imagen. Bien, este con la misma etiqueta, el menú, la imagen, la imagen está aquí y el menú aquí, por lo que la imagen y en la etiqueta va aquí, ¿cierto? Entonces aquí, ahí está. Bien, entonces creo que hemos culminado nuestra página. Bueno, vamos a ponerle esta letra diferente, como será, como es del menú y del título, le vamos a poner subrayadas, ¿qué les parece? Y para esto vamos a utilizar una etiqueta, un sí, una etiqueta, dos etiquetas, una para el subrayado, que es esta <u>, ¿verdad?, y aquí cierra la etiqueta, y otra para eh la cursiva, ¿verdad? La voy a poner por aquí abajo, el cierre de la cursiva, para que abarque el, el menú. Por aquí es justo donde termina eh lo del menú, ¿verdad? Entonces le damos a guardar, y cuando recargamos, estamos cometiendo un error; las etiquetas no van aquí, porque en esa parte es la parte del título arriba, en la, en la ventana del navegador; las etiquetas van aquí, por aquí abajo. Lo que pasa es que me confundí al decir la misma letra. Ahora sí, y esta la vamos a quitar de aquí, la vamos a colocar aquí para que incluya, para que incluya esto de "inicio", "segunda parte" y "tercera parte". Le damos a guardar y actualizamos, y podemos ver que ya sí se quitó de aquí arriba y se aplicó a esta parte del texto de nuestra página. Entonces, ¿qué nos falta? Ya tenemos nuestra primera página hecha, nuestra primera parte. Entonces, podemos ver que cuando le damos… Aquí está mal, ¿verdad?, porque no le hemos completado la ruta, el, el redireccionamiento. Entonces, nos vamos a los códigos y queremos que donde diga "inicio", ¿verdad?, nos mande a la "primera.html", que es la nuestra. ¿Qué nos falta aquí? Como podemos ver, hay un error, y fue que edité esto mal; le puse "hmtl". Tenemos que tener mucho cuidado con esta parte; aquí es ".html", que no se le confunda; por eso era que no quería cargar nuestra página; por eso era que cuando le dábamos decía un error. Entonces, pueden ver que cuando le damos a "inicio", simplemente recarga la página, que eso es lo que queríamos hacer. Entonces, entonces cuando le damos a "segunda parte", aparece en blanco. ¿Por qué? Porque en la parte de los códigos de la segunda y la tercera parte todavía no hemos digitado ningún código. Bien, lo que podemos, lo que vamos a hacer es simplemente copiar y pegar este código de aquí, y lo vamos a pegar aquí, eh, y le vamos a modificar simplemente lo que cambie. En este caso, aquí, por ejemplo, en el, la imagen, le vamos a poner esta imagen que tenemos aquí, esta, la publicidad número dos; se la vamos a agregar aquí. En vez de decir "Distribuidores Celulares", va a decir "Publicidad 2". Tiene que asegurarse de que esté exactamente como dice el nombre de la imagen, y luego cuando recargos aquí cambia la imagen. Exactamente eso era lo que queríamos. Y vamos a hacer lo mismo en la tercera parte; copiamos y pegamos el código, copiar y pegar el código, y aquí va a cambiar; en vez de "Publicidad 2" es la "Publicidad". Solamente le damos a guardar y recargamos, y ahí está nuestra página ya con los links. Como pueden ver, ya andamos de una parte a otra parte, "segunda parte", "inicio", y la… Esta parte del título que le dije, en el atributo de cada imagen tenemos que cambiárselo, porque no todas las imágenes ahora son iguales. Ahora lo que le vamos a poner es esta, que es el "Samsung Galaxy S7 Edge", ¿verdad?, y aquí que le vamos a poner "Segunda parte", en vez de esta le vamos a poner [Música] [Música] "Publicidad". Entonces recargamos, le damos a… Tiene que asegurarse de que sea aquí, a guardar todo, que le den, porque si no solamente le va a funcionar donde estaba la página. Y vemos que aquí ponemos el mouse sobre encima y dice "Imagen de Distribuidora Anáton". Bien, "Segunda parte" nos pone el, el mouse, "Publicidad del Samsung Galaxy S7 Edge", y aquí eh "Samsung Galaxy S7 Edge". Bien, entonces, eh, ya pueden ver cómo quedó nuestra página tal y como se lo mostré al inicio. Cualquiera diría que toma mucho trabajo a simple vista, pero es realmente fácil; lo hemos hecho en pocos minutos, y ya pueden ver cómo funciona nuestra página web. Obviamente, esto no es una página completa, eh, solamente tiene los aspectos básicos de lo que es una página web, eh, y pueden seguir investigando acerca de las etiquetas HTML para poder darle más cuerpo a su página web. Y les recomiendo aprender algo que se llama CSS, Cascading Style Sheet, que sirve para darle diseño a sus páginas, ya sea para agregarle a esta imagen una sombrita por atrás, o poner de fondo, no sé, algo, un degradado o lo que sea, eh, poner el texto que empieza desde aquí hasta… Así que tenga un margen; cualquier cosa, muchas cosas son posibles con CSS. Este, les quería decir también que aparte de un color, le podemos agregar una imagen al, al fondo, simplemente quitándole esto de "bgcolor" y poniéndole "background = '…'", y le ponemos un nombre de la imagen, ¿verdad? Vamos a ponerle una que ya conozcamos; vamos a poner, por ejemplo, la de eh "Publicidad 2", ¿verdad?, ".jpg". Y pueden ver, aquí está mal, porque recuérdense la ruta. Entonces, colocamos "imagen/Publicidad 2", ¿verdad? Entonces, cuando le demos a cargar… Ahí está; se ve horrible porque el color del fondo y las letras no se ven muy bien, pero ya saben cómo agregarle un fondo a esta, a su página. Bien, entonces les, también les quiero decir que para que no se repitan las imágenes como estaban hace un momento, eh, pueden, eso se hace también con, con CSS, eh… Hasta aquí mi video tutorial de cómo hacer una página web eh con HTML utilizando el programa Notepad++ de una manera muy simple, sencilla y rápida. Espero que les haya gustado y que les haya servido de mucho, y hasta la próxima. [Música]