Has terminado con la parte obligatoria del Nivel 2!

Proyecto "Haz tu propio sitio web"

Introducción

HTML

CSS

JavaScript

Disqus comentarios

¡Se social!

Ahora que su servidor web está en funcionamiento, y que sabe cómo conectarse a su servidor y
manipular los archivos allí, podrá crear un sitio web completo, ¡solo con la línea de comandos!

Incluso si nunca antes ha creado un sitio web, no se preocupe, este proyecto aún está diseñado
para principiantes, por lo que le ayudaremos un poco. Sin embargo, tenga en cuenta que no todas
las explicaciones están presentes aquí; se espera que usted vaya solo a encontrar información en
línea sobre lo que no sabe o no entiende.

Si no puede encontrar explicaciones en línea (y solo si no puede), debe pedir ayuda a sus
compañeros en el Foro, mientras hace su pregunta lo más detallada y específica posible. No se
olvide de visitar el Foro con regularidad para ayudar a sus compañeros, pero no les dé soluciones
directas.

¿Hasta dónde debo ir?

Este proyecto está voluntariamente restringido, de modo que tiene la oportunidad de ir más allá
de lo que se requiere y dedicar un tiempo adicional a los aspectos del proyecto que más disfruta.
De hecho, lo que usted construya se tomará en cuenta tanto como lo que debe hacer cuando se
evalúe su aplicación final.

Tenga en cuenta que si bien esta parte del nivel 2 es opcional, le conviene realizarla hasta el final e
ir más allá de lo que se requiere; Más aún si decides terminar temprano.
¿Qué tan creativo puedo ser?

¡Muy creativo!

Simplemente le pedimos que, si decide que su proyecto haya finalizado y haga clic en "Terminé
con mi proyecto de nivel 2", su sitio web sea al menos lo que los tutoriales le piden que haga, y
posiblemente más.

Tenga en cuenta que normalmente lo apoyaremos si desea desviarse de la ruta normal; pero este
proyecto debe ser diferente, ya que está parcialmente probado sobre su capacidad para seguir un
tutorial. También queremos que este proyecto muestre su trabajo original, así que no utilice
marcos como bootstraps para hacer el trabajo por usted.

¿Listo para comenzar? Conéctese a su servidor usando SSH si aún no estaba allí, ¡y vámonos!

Enviar comentarios

Historial

Guardadas

Comunidad

HTML

es el lenguaje de marcado con el que se escriben todas las páginas web. En este proyecto, escribirá
un sitio web básico sobre un tema de su elección.

Algunos consejos sobre HTML

Verá que HTML proporciona resultados muy básicos, ya que normalmente solo permite apilar
verticalmente textos en negro inmóviles, enlaces azules e imágenes sobre un fondo blanco. Para
darle un estilo diferente a su página web, utilizará otro idioma más adelante, llamado CSS (que
descubrirá en la siguiente parte del proyecto); y para hacer que los elementos se muevan y
cambien dinámicamente, volverá a utilizar otro idioma, llamado JavaScript (que descubrirá en la
parte siguiente).

El HTML se denomina "lenguaje de marcado" en lugar de un "lenguaje de programación", porque

no permite programar la computadora y hacer que haga todo lo que desea, sino solo marcar el
texto con etiquetas para estructurarlo. El marcado que escribe dentro del texto le indica al
navegador web (por ejemplo, Google Chrome, Mozilla Firefox, Internet Explorer, Safari, ...) cómo
mostrar el texto al usuario en la página web.

Aquí hay fragmentos de código HTML y lo que muestra un navegador para ellos:

<p> Esto es un párrafo. </p>

Este es un párrafo.

Tenga en cuenta que <p> abre el párrafo (es una etiqueta de apertura) y </p> lo cierra (es una
etiqueta de cierre).

<p> Este párrafo tiene <strong> una parte más fuerte </strong> y <em> una parte destacada
</em>. </p>

Este párrafo tiene una parte más fuerte y una parte resaltada.

¿Ves cómo las etiquetas se abren y se cierran unas con otras?

Si desea agregar un enlace a su página web, debe saber que los enlaces están representados por
etiquetas <a>, como por ejemplo: <a> texto para hacer clic en </a>. Pero cuando desea crear un
enlace, también debe indicar a qué URL se vincula cuando el usuario hace clic. Para indicar al
enlace a qué URL debe enlazar, deberá agregar la URL en un atributo href de la etiqueta de
apertura <a>, como esto:

<p> Este es un párrafo con una

<a href="https://www.holbertonschool.com"> enlace seleccionable </a>. </p>

Este es un párrafo con un enlace cliqueable.

El valor dado a un atributo, al igual que para el atributo href aquí, siempre se coloca entre los
"caracteres, justo después de un signo =. La etiqueta <a> acepta href como un atributo, porque
debe indicarse dónde debe llevarse el atributo usuario cuando hace clic. Algunas otras etiquetas
tienen atributos para sus propios fines. Por ejemplo, las etiquetas de imagen deben saber dónde
está el archivo de imagen, y usan el atributo src para eso:

<p> Aquí hay una imagen: <img src = "https://www.holbertonschool.com/holberton-logo.png">.

</p>

Aquí hay una imagen:.

Observe que hay una etiqueta de apertura <img>, pero no hay una etiqueta de cierre </img>,
porque no hay ningún texto que contener cuando se quiere insertar una imagen. La etiqueta
<img> se conoce como una "etiqueta de cierre automático". En algunas versiones de HTML, las
etiquetas de cierre automático también se escriben así: <img />.

Incluso puedes mezclar las cosas un poco:

<p>

  Aquí hay una imagen pulsable:

  <a href="https://www.holbertonschool.com">

    <img src = "https://www.holbertonschool.com/holberton-logo.png">

  </a>.

</p>

Aquí hay una imagen pulsable:.

(Tenga en cuenta que puede agregar nuevas líneas y espacios en blanco entre las etiquetas y las
palabras en HTML, y no cambiará la salida tal como la representa el navegador).

Antes de comenzar con su proyecto, probablemente le interese saber que una página web válida
contiene al menos este código:

<! DOCTYPE html>

<html>

  <head>

    <title>

      Este es el título de la página web, que se mostrará en la barra del navegador.

    </title>

    <meta charset = "UTF-8">

  </head>

  <body>

  </body>

</html>

Como puede ver, todas las páginas web siempre comienzan con una declaración DOCTYPE para
expresar que el resto del código está escrito en HTML.

Luego, el propio código HTML siempre se describe por completo entre una etiqueta de apertura
<html> y una etiqueta de cierre </html>. Esta etiqueta siempre contiene exactamente dos
subetiquetas: <head> y <body>:

<head> contiene algo de metainformación sobre la página, pero no su contenido en sí. Por
ejemplo, contiene el título que el navegador mostrará en su barra y el "conjunto de caracteres",
que ayuda a definir qué caracteres se utilizan en el documento (como: ¿Caracteres chinos?
¿Caracteres cirílicos?). "UTF-8" es el nombre de un conjunto de caracteres que funcionará bien
para nuestras necesidades.

<body> que describe lo que sus visitantes pueden ver. Sus párrafos, imágenes, enlaces, etc. deben
ir entre la etiqueta de apertura <body> y la etiqueta de cierre </body>. Aquí es donde escribirá el
código HTML en la parte "HTML" de este proyecto.

Consejos y enlaces

Solo necesitas 10 etiquetas HTML

Hoja de trucos HTML

Validador HTML oficial

Tu proyecto

En su servidor, ya ha encontrado un archivo llamado index.html en su directorio / var / www /

html. Como aprendió anteriormente, en realidad es el archivo HTML que se usa cuando su
navegador presenta la URL http://34.228.155.218.

Este proyecto lo guiará para hacer su propio sitio web sobre un tema de su elección. Si aún no ha
elegido de qué tratará su sitio web, debe decidir ahora mismo.

Haz tu primera página web válida

Como puede ver, el código HTML que tiene en /var/www/html/index.html no cumple los
requisitos mínimos o

Ahora que tiene un sitio web HTML completo, puede notar que a pesar de que ya está usando el
mismo lenguaje de marcado que todas las páginas web en línea, HTML no ofrece muchas
oportunidades para hacer que su sitio web se vea como le gusta, o incluso bueno en absoluto Para
ello, utilizaremos el lenguaje CSS.

Algunos consejos sobre CSS

CSS tampoco es un "lenguaje de programación", ya que no puede programar una computadora
para hacer todo lo que quiera con él, es un "lenguaje de hojas de estilo"; Su único propósito es
aplicar estilo a los documentos HTML.

Para escribir código CSS, solo escribe "reglas CSS", cada una de las cuales contiene dos cosas:

Primero, a qué etiquetas HTML desea aplicar el estilo (por ejemplo: todos los enlaces, todas las
imágenes, todos los párrafos, etc.). Esta parte de la regla CSS se llama "el selector", porque le
permite seleccionar las etiquetas HTML que desea personalizar.

En segundo lugar, qué estilo desea aplicarles (por ejemplo: haga que el texto tenga un color
determinado, que se muestre en negrita o en cursiva, que el fondo sea una imagen, ...). Esta parte
se llama configuración de las propiedades CSS.

Por ejemplo:

una {

  color rojo;

Esta pieza de CSS selecciona todos los enlaces de la página (el selector se dirige a las etiquetas <a>)
y les asigna una propiedad: tienen que estar en rojo.

Puedes tener varias reglas en el mismo selector. Por ejemplo:

una {

  color rojo;

  font-weight: negrita;

Los enlaces ahora serán rojos y audaces.

También puede tener varios selectores por regla, por ejemplo:

a, h1 {

  color rojo;

  font-weight: negrita;

Todos los enlaces y encabezados de nivel 1 serán rojos y en negrita.

La lista de propiedades CSS existentes es bastante sencilla, pero los selectores pueden ser
bastante inteligentes. Por ejemplo:

Si desea seleccionar solo algunos enlaces de su elección, puede agregarles un atributo de "clase"
(como este: <a class="active_page">), y seleccionar solo aquellos, usando el selector a.active_page
. Esto funciona con absolutamente todas las etiquetas HTML existentes, y puede usar cualquier
nombre de clase que desee.

Si desea seleccionar solo los enlaces que apuntan a páginas web que su usuario visitó
anteriormente, puede usar el selector a: visit. ": visitado" se llama pseudo-clase. Otra buena
pseudoclase es ": hover", para las etiquetas HTML que el usuario tiene actualmente su mouse.

Consejos y enlaces

Una lista de todas las propiedades CSS

Una explicación técnica sobre CSS Flexbox.

Tu proyecto

Algunos estilos tempranos

Primero, cree un archivo styles.css vacío en su directorio / var / www / html. Luego, en cada uno
de sus archivos HTML, agregue esas dos líneas dentro de la etiqueta <head> (¡no confunda con la
etiqueta <header>!):

<link href = "https://www.holbertonschool.com/level2/holberton.css" rel = "hoja de estilo">

<link href = "styles.css" rel = "stylesheet">

Si actualizas tus páginas web en tu navegador, ¡ahora deberían verse un poco mejor! Acabamos de
decirle a sus páginas web que utilicen las reglas CSS descritas en esos dos archivos y que las
apliquen a su código HTML.

El archivo holberton.css no es necesario en su servidor, ya que está en otro servidor, por lo que no
puede modificarlo; este es el que contiene las reglas de CSS que han cambiado tanto su sitio web.
En el archivo styles.css, escribirá las reglas CSS que desee agregar; incluso puede volver a escribir
reglas que ya están en holberton.css, ya que las suyas las anularán.

Posicionamiento

A pesar de que cada elemento de sus páginas web ahora tiene un estilo diferente, puede notar
que aún están apiladas una encima de la otra, y eso probablemente no sea lo que usted quiere.
CSS ofrece algunos enfoques diferentes para el posicionamiento que uno puede usar dependiendo
de los casos.

Para este proyecto, usaremos CSS Flexbox, un conjunto reciente de propiedades CSS que
funcionan con navegadores recientes. Puede asegurarse de que funcionará con la versión de su
navegador, verificando cuál es la versión de su navegador y que esté coloreada en verde en esta
tabla

Si no es así, tendrá que cambiar a un navegador compatible con CSS Flexbox para completar este
ejercicio.

Nuestro objetivo es conseguir un diseño que se vea así:

Contenido de la etiqueta <header>

Contenido de la etiqueta <article> Contenido de la etiqueta <aside>

Contenido de la etiqueta <footer>

Como recordatorio, también hay dos etiquetas de contenedor que desempeñan funciones críticas
aquí:
<main> contiene el área que incluye <article> y <aside>.

<body> contiene todos ellos juntos.

Aquí hay algunos pasos para obtener este diseño, que tendrá que escribir como código CSS en el
archivo styles.css:

Debe decirse a ambas etiquetas de contenedor, <body> y <main> que son contenedores para cajas
flexibles: debe aplicar la visualización: propiedad flex a ambos.

Sin embargo, <body> contiene una columna de tres cuadros (<header>, <main> y <footer>), por lo
tanto, debe aplicar la propiedad flex-direction: column a <body>; mientras que <main> contiene
una fila de 2 cuadros (<article> y <aside>), por lo que debe aplicar la propiedad flex-direction: row
a <main>.

Asegúrese de que la etiqueta <main> mantiene un alto y ancho automáticos, aplicándole la

propiedad flex: auto.

Para finalizar el diseño, debe asegurarse de que su contenido (artículo) tome ⅔ del ancho de la
página, y su aparte tome ⅓; Puedes asignarles el número de casillas que deben llenar.

Su sitio web probablemente se ve muy bien ahora! Pero probablemente también podría usar un
poco de retroalimentación visual adicional para dar al usuario ...

Algunos consejos sobre JavaScript

¡Esta vez, JavaScript es de hecho un lenguaje de programación! Se puede usar para muchas cosas,
pero en el contexto en el que se ejecuta en un navegador (por lo tanto, en una página web),
generalmente cambia la página web y las reglas de CSS de la forma que desee. JavaScript en el
navegador está controlado por eventos, lo que significa que el código normalmente se ejecuta
cuando ocurre un evento (como: el usuario hace clic en algo, se desplaza por la página, cambia el
tamaño de la ventana, etc.)

¡Pero experimentemos de inmediato!

Tu proyecto: una miniatura inteligente

El objetivo de esta parte de su proyecto es mostrar una imagen grande como una miniatura más
pequeña, lo que permite al usuario hacer clic en ella para agrandarla.

Durante esta parte del proyecto, vamos a escribir código en dos ubicaciones: en un archivo .js para
que las páginas web lo ejecuten cada vez que se carguen; y también ejecutaremos el código en la
consola de JavaScript del navegador, solo para probar cosas ya que la página web está en vivo en
nuestro navegador. En primer lugar, vamos a configurar ambos.

Configurando el archivo .js

Cree un archivo vacío behavior.js en su carpeta / var / html / www; este es el archivo en el que irá
el código JavaScript cargado por su página web. Luego, para que las páginas web sepan dónde
encontrarla, agregue esto en la etiqueta <head> de todas sus páginas web: <script src =
"behavior.js"> </script>.

Antes de nada, comience copiando y pegando esto en su archivo behavior.js:

document.addEventListener ("DOMContentLoaded", function (event) {

});

Para esta parte del proyecto, todo su código JavaScript debe escribirse entre esas dos líneas.
Cualquier código fuera de estas dos líneas se ejecutaría antes de que la página HTML terminara de
cargarse, por lo que el resultado podría ser muy aleatorio.

Para probar que su página web tiene debidamente en cuenta su archivo, escriba alerta ('¡Hola!');
entre las dos lineas en comportamiento.js. Actualizar la página web; Un cuadro de diálogo debe
saludarte! ¡Piense en eliminar esta línea antes de continuar, para que sus usuarios no sean
recibidos en cada actualización!

Configurando tu consola de JavaScript en vivo en el navegador

Cada navegador moderno tiene una consola de JavaScript, que le permite ejecutar fragmentos de
código JavaScript en vivo a medida que su página web está activa. Busque en línea dónde está el
suyo en su navegador (para algunos navegadores, es posible que deba cambiar su configuración
primero).

Una vez que lo hayas encontrado, escribe alerta ('¡Hola!'); en eso. El cuadro de diálogo debería
aparecer. Asegúrese de que la consola permanezca abierta durante el resto del proyecto, ya que la
consola de JavaScript también le dirá si hay errores de código en su archivo .js.

Insertar una imagen grande en el documento.

Bueno, ya sabes cómo hacer eso! Encuentre una imagen grande en línea (por lo menos 800 píxeles
de ancho) y use su URL para insertarla dentro de su documento, donde lo desee. Notará que
incluso si es más ancho que su sitio web, no se desbordará y cambiará de tamaño muy bien,
porque establecemos una regla de CSS para usted, para restringir su tamaño.

Entonces, queremos que esta imagen sea pequeña al principio; y para esto también, ya hemos
establecido una regla CSS para usted. Simplemente agregue este atributo a su etiqueta <img>:
class = "small" en su código HTML. Actualiza, y verás que es mucho más pequeño.

El punto central de esta parte del proyecto es que utilizará JavaScript para eliminar esta clase
"pequeña" (y, por lo tanto, la imagen crecerá) o la volverá a colocar (por lo tanto, volverá a ser
pequeña) cuando el usuario haga clic.

Aislando el elemento HTML dentro de una variable

Este desafío tiene que ver con "escuchar" el evento "el usuario hizo clic en esta imagen", y luego
cambiar el tamaño de la imagen cuando sucede; por lo tanto, lo primero que debe hacer es
capturar este elemento HTML de imagen en una variable de JavaScript que podremos manipular.

La forma más inteligente de capturar un elemento HTML en particular con JavaScript es asignarle
un ID único (¡es como darle un nombre!), Y capturarlo al darle a JavaScript este ID. Es fácil de
hacer, simplemente puede agregar el atributo id = "smart_thumbnail" a su etiqueta <img>, y ahí
está, ¡ahora identificable!
Luego, después de actualizar su página, puede ejecutar esto en la consola de JavaScript de su
navegador, y verá que efectivamente devuelve un elemento, que es su elemento <img>:

document.getElementById ("smart_thumbnail");

Puede copiar y pegar esta línea en su archivo behavior.js; pero también tiene que capturar el
resultado en una variable llamada thumbnailElement, para que podamos manipularlo más
fácilmente en nuestro código JavaScript. Todos juntos, se verá así:

var thumbnailElement = document.getElementById ("smart_thumbnail");

Atrapando el evento clic

Añade estas líneas a continuación en tu archivo JavaScript:

thumbnailElement.addEventListener ("click", function () {

  // escriba aqui

});

Mencionamos antes que podría obtener código para ejecutar en eventos de usuario; Bueno, el
código que escriba en lugar de // escriba aquí se ejecutará cada vez que el usuario haga clic en su
imagen.

Como código que sucede cuando el usuario hace clic en la imagen, escribe alerta ("¡Te vi hacer
clic!") ;. Actualice la página web, luego desplácese hacia abajo en