Aprende a crear un sitio: una introducción al desarrollo web de front-end.

1. ¡Hola!: lo y bienvenidos a mi clase de escultura. Si eres como yo y tienes curiosidad por cómo funciona la tecnología que usas cada día , entonces déjame mostrarte lo sencillo que es construir realmente la tuya propia. Pero primero, un poco sobre mí mismo. Aprendí a construir los 13 años y sigue siendo una gran pasión mía. Me encanta codificar premio construido y compartir lo que aprendí con los demás. También convertí el desarrollo en una carrera porque eso funcionó con diferentes startups, una grandes corporaciones y también construí algunos proyectos míos a un lado. Mi forma preferida de aprender es haciéndolo, estructuré mis videos de una manera que puedes seguir construyendo tu propio proyecto. Te recomiendo que construyas un sitio personal, pero puedes construir lo que quieras. Espero que también compartas tus sitios en la galería de proyectos, y estaré publicando más clases en el futuro, así que asegúrate de seguir mi programa. Está bien, sigamos adelante y construyamos una caja fuerte 2. ¿Cómo funcionan los sitios web?: todo bien. Bienvenido y un muy contento de que decidieras unirte a la clase en este primer video. ¿ Quieres hacer la pregunta? ¿ Cómo funcionan los sitios web? Creo que es importante antes de escribir nuestra primera línea de código para entender cómo todas las diferentes piezas se unen para construir un sitio web que funcione plenamente. En primer lugar, hablemos de servidores. Si intentas visualizar el concepto de un servidor en tu cabeza, probablemente pienses en estas máquinas complejas con un montón de cables y luces. Probablemente no sea un hámster tratando de alimentarlos como se ve aquí. Pero se te ocurre la idea. Piensas en algo muy complicado, algo que realmente no puedes envolver la cabeza, lo que quiero hacer. Es simplificar ese proceso de pensamiento de cómo los sitios web y los servidores funcionan juntos. Entonces lo más importante a entender es que los sitios web son solo archivos en una computadora. El modo en que accede a esos archivos o a ese servidor es por una dirección I P. Una dirección I P parece un montón de números separados por periodos. Ten un ejemplo cuando aquí 172.217 punto 9.78 realmente no importa. Y la mayoría de la gente realmente no memorizaría las direcciones I p. De hecho, probablemente ya sepas que escribes en un dominio o eres l para acceder a un sitio web, no una dirección I P. Entonces hablaré de eso en la siguiente diapositiva. Entonces sí, si tuviéramos que memorizar todas estas direcciones i p para acceder a sitios web, probablemente nos volvamos locos. Por suerte, tenemos dominios como una especie de atajos para acceder a esos sitios web I p direcciones son difíciles memorizar, y así los dominios sirven como atajos a esas direcciones I p. Tengo un ejemplo. Uno aquí que mostré antes, y en realidad es una dirección i p a un servidor de Google. En realidad podemos intentar entrar esto en un navegador y ver qué pasa. Voy a copiar esto p y simplemente entrarlo en la barra de direcciones tenía entrar y un ir directo a Google. Entonces esto es realmente genial. Puedes probar esto por ti mismo. Se puede ver cómo tenemos I p direcciones que en realidad sí funcionan. Ellos van a diferentes servidores Web, pero la mayoría de las veces simplemente usarías el dominio. Entonces si abro una nueva pestaña y entro google dot com y va a la página principal de Google. Los navegadores son la última pieza del rompecabezas y nos ayudan a entender cómo funcionan los sitios web ahí , qué usó para acceder a los sitios web y se comunican con los servidores Web. Te explicaré qué significa esa comunicación en un segundo. Lo bueno de los navegadores es que evolucionaron constantemente para dar soporte a sitios web complejos . Esto básicamente significa que solo obtienen nuevas características de vez en cuando y lo que permite a los sitios web aprovechar esas características. Esto lo hace donde los sitios web ahora pueden volverse más como APS totalmente en toda regla similar Tuapse en su teléfono o en su computadora. Navegadores y servidores se comunican entre sí, lo que significa que aquí suceden un par de cosas. Entonces primero que tipo de dominio, diga google dot com en su navegador. Entonces el dominio encuentra la dirección I P del servidor Web en la que se encuentran los archivos del sitio web . El servidor responderá de nuevo con el contenido del archivo y otros datos. En este caso, termina siendo código y otra cualquier otra información necesaria para renderizar esa qué página correctamente. lo que el navegador finalmente interpreta esta respuesta desde el servidor y es capaz de mostrar el sitio web. El código que el navegador interpreta en ese contenido de archivo es en realidad lo que estará escribiendo . Eso es html, CSS y JavaScript, y hablaré de eso en el siguiente video. Lo último que quiero mencionar sobre los navegadores aquí es que en realidad son realmente grandes herramientas para desarrolladores. Incluyen la capacidad de ver fuente o inspeccionar elemento en cualquier sitio web. Esto se puede hacer en Google, Chrome o Firefox y otros navegadores. Es posible que tenga que habilitar una opción de desarrollador. En realidad probemos esto en su navegador ahora mismo. Así que elige cualquier sitio web en este caso. Estoy en skill share dot com, y estoy en Google Chrome segundo clic derecho y haga clic en ver página fuente. Ahora bien, no dejes que esto te intimide, pero este es el código que es necesario para mostrar este sitio web. Y si bien mucho de esto no te parecerá mucho, echemos un vistazo a uno de estos. impuesto aquí puede ver que es como título y dice home dash skill share. Entonces este es en realidad el título de la página web aquí. Se puede ver en esta pestaña dice home skill share. Y así estos son algunos de los datos con los que responde el servidor. Y a medida que aprendas más de este código, en realidad podrás entender a medida que navegas por esto y ves, ves y ves todos estos diferentes dibs y diferentes enlaces aquí. Ah, podrás tener una comprensión mucho mejor de esto. También puede hacer clic derecho y hacer clic en inspeccionar o inspeccionar elemento, dependiendo de qué navegador esté utilizando. Esto abrirá este pequeño panel de herramientas de desarrollador aquí. Esto se parece a la fuente de la vista, pero está organizado un poco mejor. En realidad puedes hacer click en algunos de estos para expandirlos, y aquí hay muchos grifos diferentes, que realmente no me meteré. Pero estas son realmente grandes herramientas para desarrolladores que están integradas en navegadores que te ayudan a desarrollar sitios web. De acuerdo, así que eso es todo para este video. Espero que puedas entender mejor cómo funcionan los sitios web, y si quieres aprender un poco más, tengo un Lincoln aquí que va a la red de desarrolladores de Mozilla. Ah, es un artículo aquí, y hace un gran trabajo de explicar más a fondo algunas de las cosas de las que hablé . Entonces echa un vistazo a este artículo si quieres aprender un poco más y te veré en el siguiente video. 3. Idiomas de extremo de delantero: html. CSS y JavaScript son los tres frontales y lenguajes que estarán aprendiendo. Cada uno tiene un propósito diferente en la construcción de un sitio web. HTML, que significa lenguaje de marcado de hipertexto, se utiliza para crear contenido, el texto, imágenes y enlaces que tal vez desee en su sitio. Utilizarás diferentes etiquetas HTML dentro de un archivo html de puntos para que puedas ver un ejemplo aquí para Ah página de inicio. , Podría crear un archivo html de punto índice, y dentro de eso podría tener algún texto que esté rodeado con una etiqueta B. Esta es una etiqueta HTML que básicamente hará que el texto sea negrita. A continuación se muestra CSS, que significa hojas de estilo en cascada. Se utiliza para el contenido de estilo, que incluye cambiar colores, aplicar de manera diferente, cambiar el posicionamiento, diferentes textos y fuentes y cosas por el estilo. Ten un ejemplo aquí donde estoy seleccionando una etiqueta HTML en mi página con un yo d de mi texto y luego puedo proporcionar diferentes propiedades que hacen cosas diferentes. Yo solo quiero hacer azul el texto. Y así digo que quiero que el color sea azul. Por último, tenemos Js, que significa JavaScript. Me referiré a ella por su nombre completo. Pero sí quiero dar un pequeño para advertir aquí que si estás tratando de buscar información sobre JavaScript en línea, asegúrate de no confundirlo con Java, que es un lenguaje de programación completamente diferente. lo que estamos hablando aquí es script Java o J s para abreviar. JavaScript se utiliza para agregar funcionalidad, como al hacer clic en un botón, quieres que suceda algo como que una imagen se muestre en pantalla completa u otras características interactivas . Ten un ejemplo aquí, que simplemente muestra un mensaje de alerta que dice Hola. Hay una tonelada de cosas diferentes que puedes hacer con JavaScript haciendo el lenguaje más poderoso fuera de los tres Front y los idiomas no iban a sumergirse demasiado en él. Pero sigue siendo un aspecto muy fundamental de la construcción de sitios web. HTML, CSS y JavaScript son los tres lenguajes que son entendidos por los navegadores, razón por la cual también se les conoce como lenguajes front-end o del lado del cliente. Puede hacer clic derecho en cualquier sitio web y ver fuente, que le muestra todo el código HTML que se envía desde el servidor al navegador. Tenga en cuenta que los archivos HTML son páginas Web, que luego hacen referencia a CSS y JavaScript para agregar estilo y funcionalidad. Ten aquí otro artículo de la red Mozilla Developer que puedes comprobar si quieres aprender más a fondo sobre estos tres idiomas y otros temas en qué desarrollo En el siguiente video, nos prepararemos para escribir algunos código y hablar de los diferentes editores que puedes usar para escribir html, CSS y JavaScript, así que te veré en el siguiente video. 4. Instalación de un editor de código: De acuerdo, hablemos de editores de texto o editores de código que usarán para escribir HTML, CSS y JavaScript. En primer lugar, en realidad puedes usar el editor de texto que ya está en tu computadora. Si estás en un Mac, puedes usar texto en él. Si estás en Windows, puedes usar ningún pad. Esto funciona perfectamente bien para escribir código. Lo único que tendrás que asegurarte es que guardes el archivo como un archivo html de punto índice o lo que sea que se esté creando en ese momento. El único que realmente no consigues con los editores nativos en tu computadora es el resaltado de sintaxis , lo que te ayudará a obtener una mejor visual de tu código con diferentes colores y una estructura diferente que otros editores de texto harán mostrarte. Existen muchas opciones diferentes para editores que puedes descargar. El 1er 1 aquí se llama Código Visual Studio, o Código V S. Es lo que estaré usando en mis videos, así que te recomiendo encarecidamente que descargues este. No obstante, hay otras opciones. Aquí está Adam, que es un editor muy sencillo y otro llamado texto sublime. Todos estos puedes usar de forma gratuita pero texto sublime te obsesionará sobre la compra de la licencia. Otra opción de la que quiero hablar rápidamente se llama Coat Pen. En realidad es un sitio web que te permite escribir código justo dentro de tu navegador. Si creo una pluma nueva aquí, me dejará escribir código HTML y me dará una bonita vista previa. Aquí abajo. También puedes escribir un CSS y JavaScript. Esto es genial si quieres levantarte y correr muy rápido. Pero si quieres que los archivos de tu sitio web sean locales en tu computadora, te recomiendo instalar un editor y editar esos archivos localmente. Como dije, estaré usando el código V s algunos. Una vez que lo descargues o lo escojas, un editor diferente podrá meterte en el código, así que te veré en el siguiente video. 5. Crear contenido: HTML: Muy bien, ahora estamos listos para crear nuestro sitio web. Lo primero que quieres hacer es crear una carpeta nueva. Esto podría estar en tu escritorio, Tus documentos? Realmente no importa. Pero todos nombraron a este mi sitio web. Y aquí es donde estará almacenando nuestros archivos HTML CSS y JavaScript. Ahora vamos a entrar en nuestro editor de código en este caso, divertido código V s. Seguiremos adelante y abriremos la carpeta que acabamos de crear. Eso es abrir mi sitio web, y aquí es donde empezará a crear nuevos archivos para un sitio web. Hagamos clic en nuevo archivo y y guardemos este archivo de inmediato. Vamos a nombrar a este índice punto html. Ahora pongamos algo de texto dentro de este archivo. Es típico decir hola mundo puede para el primer programa de cualquiera que les acerten. Pero puedes poner cualquier cosa aquí mi primer sitio web. ¿ Qué pasa? Ya sabes algo, asegúrate de guardar este archivo y ahora lo que haremos es volver a la carpeta en la que se encuentra este archivo y haremos click derecho y lo abriremos en Google Chrome o lo que sea tu navegador predeterminado. Ya puedes ver ahora que dice Hola mundo. Ese es un texto con poner dentro de ese archivo. Y si bien esto es muy sencillo, este es tu primer sitio web. Hagamos algo un poco más interesante aquí en HTML. Podemos usar diferentes etiquetas, y mostré algunos ejemplos de esto en las diapositivas donde puedes usar algo como la etiqueta B para hacer negrita este texto. Entonces la forma en que tienes derecho estas etiquetas es que comienzas con la etiqueta de apertura. Ese es este de aquí con un menos que símbolo, el nombre de la etiqueta y luego un mayor que símbolo. Y luego del otro lado tenemos la etiqueta de cierre que dice que básicamente, ya sabes, empezamos a construir texto aquí, y luego al final de este texto, dejamos de sostener el texto. Por lo que tenemos primero menos que firmar una slash para mostrar que se trata de una etiqueta de cierre, el nombre de la etiqueta y un símbolo mayor que. Guardemos este archivo, volvamos a nuestro navegador y volvamos a cargar la página. Boom. Se puede ver que es una pequeña diferencia, pero definitivamente se puede ver que el texto ahora está en negrita. Déjame mostrarte algunas otras etiquetas que puedes usar. Hay una forma de un texto de tamaño tele con la etiqueta I. Digamos este navegador de fotos de archivos y recargar la página, pero se puede ver el teletexto junto al texto completo. Ups. También hay una forma de crear diferentes encabezamientos. Entonces si lo hago en cada uno, esto significa encabezar uno y cerrar la etiqueta. Se puede ver que hay, ah, forma consistente de abrir y cerrar etiquetas. Lo único que está cambiando aquí es el nombre de la etiqueta. Guarda este archivo. Vuelve de nuevo y recarga. Ahora tenemos texto muy grande. Esto se usa comúnmente para crear diferentes encabezados dentro de la página. Imagínate como un documento de palabra. Podría tener un formato muy similar ahí, y el tipo de lista continúa. Esto es como textos más pequeños. Está bien, se dirige el nivel dos. puede ver que es un poco más pequeño. De acuerdo, hagamos una etiqueta un poco más complicada, así que hay una forma de enlazar a otras páginas u otros sitios web. En general, el nombre de la etiqueta es un que significa Angkor. Es de la misma forma que harás una etiqueta de apertura. El texto dentro de éste será el texto en el que se podrá hacer clic. En realidad se le llama a eso algo un poco más largo, Slink. Y luego, por supuesto, una etiqueta de cierre. Ahora, si solo guardas esto ahora mismo, vuelve atrás y refresca. puede ver que en realidad sólo se ve como texto regular. Aquí no pasó nada realmente, por lo que las etiquetas de anclaje requieren de un atributo para que realmente funcionen. Lo que haces es en un atributo aquí llamado Patrón, y así después de la A aquí hacer un espacio tipo H R G F que significa signo igual de referencia de hipertexto y luego dos comillas dentro. Estas cotizaciones aquí ingresarán a la U. R L a una página Web. Simplemente lo escribiré aquí. Se trata de google dot com, pero probablemente solo querrás copiar y pegar desde tu navegador. Entonces vamos a guardar esto y a ver qué pasa. De acuerdo, ahora puedes ver este enlace ahora es morado. Normalmente, los enlaces son azules, pero es morado porque visité esta página antes y también está subrayada. Este es el estilo predeterminado. Y una vez que lleguemos a ver evaluar, podrás ver cómo puedes personalizar el estilo, pero por ahora obtendría el estilo predeterminado aquí. Si hago clic en este enlace boom. puede ver que va a google dot com. Entonces ahora conocemos el concepto de estos atributos, y los estaremos usando bastante. Sigamos adelante y agreguemos otros atributos a esta etiqueta ancla porque digamos que queremos abrir este enlace en una nueva pestaña. Ves esto muy común en ciertos sitios web, y esto también mostrará que puedes agregar múltiples atributos Teoh a una etiqueta HTML. Por lo que hay otros atributos que puedes agregar llamados Target. Se puede ver que estos atributos están todos separados por un espacio aquí, y todos existen después del nombre de la etiqueta pero antes del corchete angular. Por lo que fijamos el objetivo para subrayar Blank. Esto le dice a un explorador que abra esta página Web en una nueva pestaña. Veamos esto las espaldas del navegador. Y ahora si hago clic en este enlace, notarás que sí se abre en una nueva pestaña. Todavía tenemos nuestro sitio web esperando aquí e ir a abrir en otra pestaña. Ya conoces los fundamentos del HTML, y en el siguiente video me sumergiré en la estructura de página correcta que debes usar para tus páginas HTML. así como los ataques más complejos que puedes usar para agregar cosas como imágenes. Este es un buen momento para practicar la escritura de etiquetas para que se vuelva muy natural y puedas escribir impuestos muy rápidamente. 6. Crear páginas de HTML: en el video anterior aprendería a escribir etiquetas HTML básicas para que pudiéramos obtener contenido en su página. Ahora hablemos de la estructura de páginas porque el navegador espera que dos cosas diferentes vengan de tu página. Una es el contenido visual que puedes ver en tu navegador y luego metadatos que ella no sería capaz de ver pero es muy importante para los navegadores. Aquí es donde incluirías cierta información sobre tu sitio, el CSS y JavaScript que se desasociaron así como cosas como el título y la descripción . De acuerdo, agreguemos una estructura de página a nuestro HTML actual. Vamos a la parte superior del archivo aquí y agreguemos algo llamado médico. Esto le dirá al navegador que use el último motor de renderizado para mostrar el sitio. Ha habido diferentes en el pasado. Esto básicamente significa que queremos HTML cinco, la última versión debajo de eso. Vamos a crear en la etiqueta HTML, y esto realmente envolverá toda su página. Vayamos al fondo aquí y en una etiqueta HTML de cierre. También es una buena idea agregar un atributo de lenguaje en este oops atributos del lenguaje en realidad solo colocando y hacer que sea igual a E n Esto, por supuesto, significa inglés. De acuerdo, ahora agreguemos una etiqueta de cuerpo, y esto envolverá el contenido que teníamos antes. Esta es la parte visual de la página. Después de que en el cuerpo, ¿qué hay de añadir una etiqueta alimentada? Puedes verlo espaciando esto para que pueda visualizarlo un poco mejor, pero estaremos agregando ciertos metadatos aquí en la cabeza. ¿ Qué hay press tab aquí? Y añadir una etiqueta de título y el título podría ser cualquier cosa. Voy a poner mi sitio web, y así vamos a hacer una pausa por un segundo aquí. El modo en que me gusta pensar en esta estructura es que la cabeza es como el cerebro de tu página web. Incluye datos como la descripción del título Cosas CSS que en realidad no verás pero es importante, y son solo datos. Entonces tenemos el cuerpo, y este es el contenido real que real lo que ves en tu navegador. Y así estas dos etiquetas diferentes, tienen diferentes etiquetas dentro de la cabeza y el cuerpo. Echemos un vistazo a este archivo en nuestro navegador de nuevo para ver qué cambió. Entonces si vuelves a cargar y obtienes la última versión de este archivo, vemos que el contenido sigue siendo el mismo. Pero algo sí realmente cambió y esa es la ficha están aquí. En realidad lo puedes ver, dice mi sitio web. Y este es el título ahora. ¿ De dónde viene eso? Bueno, agregamos este dato aquí en la cabeza. Por lo que viene de esta etiqueta de título, pesar de que en realidad no la ves en ninguna parte de la página misma, se está mostrando en la pestaña mientras tememos en el navegador. Adelante y veamos las herramientas def. Esto es algo que está incluido en Google. Chrome y Firefox y otros navegadores también podrían incluirlos, aunque es posible que tengas que editar la configuración para habilitar las opciones de desarrollador. Entonces todo lo que hice aquí fue hacer clic derecho y estabas en la página y clicaste. Inspeccionar o inspeccionar elemento. Lo que verás aquí es la estructura de tu HTML. Este es el código que agregaste a tu página puede ver. Aquí tenemos el doc tipo HTML. Etiquetar la cabeza con el título y puedes ver esto está en el código fuente aquí. No es algo que se pueda ver en la página, pero está haciendo algo en el cuerpo con todas las etiquetas aquí. Esta es una gran manera de ver si algo no está funcionando. Puedes inspeccionarlo y ver qué es lo que realmente está mostrando en el navegador en el código aquí. Otro beneficio de esta herramienta aquí es que puedes pasar el cursor sobre cada tacked para ver el diseño y el estilo también, por lo que puedes ver ahí algún espaciado en esta etiqueta H one aquí. Y una vez que lleguemos a la porción CSS veremos que el aire del, las diferentes propiedades que se aplican por defecto estarán agregando las nuestras propias para agregar nuestros propios estilos personalizados. Algunas de estas etiquetas aire también en línea, lo que significa que colocarlas una junto a la otra las mostrará en la misma línea. Podemos ver este H uno y H a etiquetar están en líneas separadas nosotros porque thes elementos de nivel de bloque de aire , el ancla es una en línea, pero porque el anterior era un elemento de bloque o una etiqueta, esos aire sinónimo por cierto html tag un elemento son lo mismo. Pero debido a que esto era una etiqueta de bloque, en realidad termina tomando el todo con. Por lo que puedes pasar por encima de eso para ver que ocupa el 100% de la con. No obstante, estas etiquetas B y I no lo hacen. Entonces si fuera a poner esa etiqueta de anclaje junto a la etiqueta I, simplemente aparecería en la misma línea justo al lado. Quiero mencionar rápidamente una gran guía de referencia para todos los diferentes elementos HTML o etiquetas que puedes usar. Este es otro recurso de la red Mozilla Developer, y va y enlista aquí todos los diferentes impuestos. También los categoriza, por ejemplo. Aquí están todos los elementos de contenido de texto. Aquí puedes tener cosas diferentes. Podrás tener cotizaciones, puedes tener listas y usarás los's en nuestra propia página web. También puedes hacer clic en el propio impuesto, así que dar click en uno de estos, bueno despojar los diferentes atributos para mantener que puedes usar así como ejemplos. Lo que quiero hacer ahora es limpiar este contenido que agregamos antes y hacer algo que se asemeje más a un sitio web. Entonces primero, agreguemos una etiqueta H one. Este será tipo del título de la página actual. Es todo. Simplemente nombra mi página web. Puedes poner tu propio nombre aquí o algo así como lo personal de Sonny. Di algo así. Ahora agreguemos una etiqueta de imagen. Esto podría ser algo así como, Ah, logotipo o tal vez una foto de ti mismo. Entonces digamos que no sabíamos hacer esto. Podemos buscar cuál sería la etiqueta de imagen desde el Mitzel, una red de desarrolladores. Por lo que el elemento de inserción de imagen ver le permite incrustar una imagen en el documento. Y yo podría simplemente desplazarme hacia el ejemplo que tienen. Se puede ver usando algo como esto mostrará esta imagen aquí. Vamos a seguir adelante y copiar en paz que para que puedas ver hay, um soy I m g tag y tiene dos atributos diferentes. Por lo que hay un son atributos SRC o atributos de origen y un apunta a un archivo de imagen. En realidad voy a meter una de mis propias imágenes en nuestra carpeta de sitio web, y luego la haremos referencia aquí. Entonces también está este Atributos A lt significa texto alternativo. Esto es útil por muchas razones diferentes. Digamos que la imagen no se carga ni un motor de búsqueda. Está buscando a través de esta página para mostrar algo para resultados de búsqueda. O quizás el usuario sea un usuario ciego. Y así son incapaces de ver visualmente qué es esta imagen. Y así pudimos proporcionar texto alterno. Ese tipo de describe lo que es esta imagen. Puedo decir que esta es una foto mía, y así en realidad no necesitas ver la imagen para saber qué es. Algo interesante aquí es que esta etiqueta en realidad no tiene una etiqueta de cierre. Ya sabes, normalmente harías algo como esto, pero como realmente no estamos mostrando ningún texto entre aquí, en realidad no necesitas esa etiqueta de cierre por sake de cordura en realidad les gusta incluir una slash en el final aquí para mostrar que se trata de una etiqueta de auto cierre. Pero esto es completamente opcional. Por lo que dos imagen incrustada en nuestro sitio web. Necesitamos tener una imagen dentro de nuestra carpeta de sitio web. Por lo que incluí una imagen de mí mismo aquí, justo al lado del archivo html index dot. Viven en la misma carpeta, y así podemos hacer esto. El origen de esto será sólo el nombre del archivo. Esa es una clavija J. Sí, Sonny. Dodgy Peg. Uh, podemos proporcionar pase diferente aquí ya que la misma carpeta pero podemos hacer esto. Pero si existió en otra carpeta, digamos que tengo una carpeta Imágenes arrastrar esa imagen a su ahora para referir la imagen esta manera. Esto es bueno para organizar. Guardemos esto y ábrelo en tu navegador. Recarga y puedes ver que tienes una imagen de mí mismo aquí y del título por aquí. Creo que esta imagen es en realidad un poco demasiado grande, así que en realidad podemos redimensionar esto. Adelante y sumamos un con un homenaje aquí. Ahora podemos por ahora lo que puede pasar en un valor de píxel. Digamos que hago 100. Ahorra eso ahora. Se podría decir que es mucho más pequeño. A lo mejor quería ser un poco más grande. Simplemente hazlo 200. De acuerdo, creo que ese es un buen tamaño ahí. Podemos agregar un par de cosas más aquí. Quiero incluir algún texto. Lo que hay en la etiqueta de párrafo es solo un pitak aquí con algún texto dentro. Digamos que esto es sólo para jugar mi Hay algo así, ¿ verdad? Um, y ahora podemos agregar una navegación para que podamos enlazar a otras páginas para nuestro sitio. Vamos a seguir adelante y acabo de incluir en la parte inferior aquí. Ahora aquí. Todos incluyen una lista de longitudes. Entonces hagamos una lista en orden. Esta es una etiqueta U L y podría buscar información sobre estas etiquetas para aprender un poco más dentro tendrá ítems de lista. Es una buena idea solo tener estos en nuevas líneas y tabular todo lo que hay dentro cuando solo tienes estas etiquetas anidadas como esta, su curso para hacer enlaces, agregamos etiquetas de anclaje. Siéntase libre a la positividad de Esto va demasiado rápido por lo que podemos enlazar a diferentes páginas que quieran agregar una página sobre a la que está vinculada sobre eso. HTML. Esto no existe todavía, pero lo hará en un momento y tener ese enlace de leer sobre. Y tal vez tengamos otras páginas también. Fue sólo una copia que Tal vez vamos a incluir un discurso de copia aquí. De acuerdo, entonces tenemos nuestra lista de navegación aquí. Guardemos esto. Entra a un navegador en nuestro navegador. Recargar. Ahora puedes ver tenemos un pequeño párrafo de descripción aquí en diferentes enlaces, pero da click en esto ahora mismo dice que tu archivo no fue encontrado. Entonces arreglemos este código envidioso. En realidad puedes crear archivos directamente aquí. Haga clic en este ícono aquí mismo. O haga esto clic derecho y haga clic en nuevo archivo. Vamos a escribir sobre dot html. Se cerró de nuevo este árbol y estos aire sólo archivos manuales. Entonces ten en cuenta, ya sabes, ahora tenemos sobre eso cada pequeño archivo aquí. Carpeta Insider. Adelante y solo copiemos todo esto. Entonces copia eso en sobre dot html. Y cambiemos esto tengo que decir sobre con un poco sobre Sonny. Mantendremos ahí la imagen. Eso está bien. Yo, um y esa es una buena idea mantener aquí la navegación. No obstante, como ya estamos en la página sobre en este punto, es en una página Dos están enlazados para volver a la página principal, por lo que volverá a indexar ese html y dirán casa. De acuerdo, entonces ahora tenemos en la página sobre, ve a nuestro navegador, y si recargo, este boom ahora tendrá una página sobre. Ver, el título aquí también nos cambió. Es la descripción de nivel de título, texto y ahora conflicto entre esta página de inicio y sobre. Haremos lo mismo por pasatiempos muy rápido. Vamos a seguir adelante y sólo copiar la página sobre y hacer de tu padre. Es obvio que HTML es que pasatiempos. Estos son para un vigilante o algo así. Y cambiemos este enlace aficiones a sobre playa. Está bien, esto se ve bien. Se re fresco. Una página de pasatiempos. Ahora tenemos este melocotón aquí. Por lo que ahora aprendimos a crear enlaces aquí que van a nuestras diferentes páginas de nuestro sitio web. puede ver que sólo va a esos archivos. Amapola, inicio html índice punto html. También rápidamente quiero mencionar que podría haberse estado preguntando sobre esto. Simplemente estamos mostrando estos archivos en nuestro navegador. Estos aire apenas local. Si compartes esto con alguien más, no van a poder acceder a esto. Pero al final de esta clase, podrá subir tu sitio web para que realmente puedas compartir esto con otras personas. Creo que eso es todo por esta parte. En el siguiente video, te mostraré cómo utilizar CSS para darle estilo a tu sitio web 7. Contenido de estilo de CSS: Esperemos que te hayas vuelto más cómodo en el uso de HTML. Ahora pasemos a peinar nuestro sitio web con CSS. Esto esperemos que esto se vea un poco más bonito. Vamos a seguir adelante y hacer un nuevo archivo. Este se llamará style dot CSS puede ver tenemos un archivo CSS de estilo dot dentro de nuestra carpeta al lado o carpeta Imágenes y nuestros archivos HTML dentro. Aquí. Aquí es donde estará escribiendo nuestro CSS y estará apuntando a nuestras etiquetas HTML insider y agregando diferentes propiedades para cambiar un color, fonds espaciado y cosas diferentes como esa. Lo que tenemos que hacer primero es enlazar nuestro archivo con nuestro cada equipo fuera. Entonces recuerda que hicimos esta etiqueta de cabeza antes. Aquí podemos agregar datos que le dirán al navegador que use sus nuevos estilos. Entonces es en una etiqueta de enlace dentro de aquí dirá que la relación s estilo ella y apuntar a nuestro nuevo archivo CSS de estilo similar a la etiqueta de imagen. Esta es otra de esas etiquetas de autocierre. Guardemos nuestro archivo HTML y volvamos a nuestro archivo CSS de punto de estilo. ¿ Qué es eso? Algún estilo básico para demostrar que esto realmente está funcionando. En primer lugar, comenzaremos con un selector. Aquí es donde apuntas a una de tus etiquetas HTML. Empezaré con el cuerpo y luego con el espacio y luego le añadiré tirantes rizados. El código tan obvio es lo suficientemente bonito como para agregar la gracia de cierre automáticamente. Asegúrate de tener una abrazadera de apertura en el medio. Tendremos nuestras diferentes propiedades y luego una abrazadera de cierre. Por lo que dentro de aquí, voy a hacer una ficha para que esto se vea un poco más bonito. Visualmente, por lo que se puede ver la diferencia entre los selectores y las propiedades. De acuerdo, cambiemos el color del texto, espacio de color del tipo de celda y luego un nombre de un color básico como el verde azul. También puedes usar colores hexagonales aquí lo hará en un momento. Guardemos este archivo. Navegador Insider. Vamos a recargar la página. Se puede ver el color del texto cambiado, y en realidad afectó a toda nuestra página. Si recuerdas, CSS significa hojas de estilo en cascada, y este es el aspecto en cascada de eso. A pesar de que apuntamos a la etiqueta del cuerpo, el estilo del color del texto, se cae en cascada. Se puede ver que los colores de enlace siguen siendo un color diferente porque establecen sus propios colores y así podemos anular el color que se estableció previamente. Digamos que queremos que la etiqueta de párrafo sea de un color diferente. Entonces vamos a apuntar a esas etiquetas ahora mismo debajo del cuerpo. Digamos espacio P, llaves. Yo quiero que el color de estos sea verde. De acuerdo, vamos a guardar esa recarga. Y puedo ver que los párrafos son ahora verdes. Algo interesante a tener en cuenta aquí es que ambos de los párrafos o verde y eso se debe a que ambos están usando su etiqueta de párrafo. Si lo hace, haga clic e inspeccione, use herramientas para sordos aquí para ver eso. De acuerdo, con seleccionada esa etiqueta de párrafo y en este panel derecho aquí está mostrando los diferentes estilos. En segundo lugar, véase en la etiqueta de párrafo. Tenemos el color verde, sin embargo, en encabezamiento que cada uno aquí pude ver que no hay color en el H, pero dice aquí heredado del cuerpo. Así que elegimos aquí que en realidad el color azul se está heredando de la etiqueta body que declaramos en nuestro CSS. ¿ Y si quisiéramos ser un poco más creativos con los colores que utilizamos? Podemos usar algo llamado código de color hexadecimal, que comienza con un signo numérico seguido de seis letras o dígitos. Simplemente voy a utilizar el sitio web llamado selector de color dot com. Esto nos permite escoger un color específico arrastrando dentro de este selector de color y luego dándonos este código hexadecimal. Ahora, en lugar de usar un nombre de color podría simplemente acelerar ese código hexadecimal. Pero asegúrate de mantener ese signo numérico al principio ahí. Guarda el archivo, vuelve a cargar la página y ahora tenemos un tono de azul ligeramente diferente aquí. Echemos un vistazo a algunas otras formas que debilitan el texto de Styler. Puede agregar un tamaño de fuente diferente proporcionando un valle de píxeles aquí. PX De pie por píxeles puede cambiar la familia de fuentes. Vamos con Ariel puede. También puedes hacer que el texto se ponga en negrita. Hay muchos diferentes, pero dejémoslo en eso. En un navegador podemos recargar y ver que ahora tenemos este texto de aspecto diferente aquí. Es audaz, es un poco más grande y está en el fondo aéreo. Déjame mostrarte cómo puedes agregar espaciado con margen. Quiero que esta imagen sea un poco a la derecha. Vamos a seleccionar imagen dentro de nuestro CSS en agregar margen dash left propiedad. Digamos que 50 píxeles recargan la página y se puede ver que se movió un poco a la derecha. Eso es todo por esto. El video, por supuesto, siempre es un enlace. Otro recurso que puedes usar para aprender un poco más sobre CSS que las diferentes formas que puedes darle estilo a los cuadros de texto crean un diseño y cosas así. 8. Agregar diseño de sitio: Está bien, las cosas se ven bastante bien ahora. Hemos usado HTML y CSS para hacer lo que parece una página web de aspecto decente, pero creo que podemos hacerlo aún mejor. Vamos a convertir esto en un diseño de sitio de aspecto más tradicional con un encabezado en la parte superior, un menú de navegación y luego tal vez algunas columnas aquí también. Empecemos creando las diferentes secciones de su página y moviendo nuestras etiquetas por ahí . En HTML cinco, hay una etiqueta de encabezado que podemos usar. Este será el encabezado sobre un sitio web. Vamos a copiar esto cada una etiqueta ahí dentro. Está bien, Genial. También dentro del encabezado, probablemente queramos un menú de navegación. Podemos copiar esto, UL aquí. Esa es la lista de enlaces dentro de aquí. Arregla el tabbing aquí y en realidad hay una etiqueta de duende que podemos usar aquí. Y es una buena idea mostrar que esta es nuestra principal navegación de nuestra página con esta etiqueta. Ahora vamos a añadir también un pie de página. Y por supuesto, esa es la ventaja. Nuestra navegación iba a tenerla aquí, así que es sobre al fondo. Podemos tener una etiqueta de pie de página y solo diremos copyright como poner tu nombre aquí. Por lo que 2018 puede nuestro contenido irá aquí. Está bien, Genial. Entonces ahora vamos a ir a nuestro archivo CSS y empezar a peinar esos impuestos para un Feder realmente quería tener una especie de bar. Mira donde parece un bar en la parte superior de la página. Entonces hagamos que el color aquí sea blanco en el color de fondo sea gris. Vamos a ver esto hasta ahora, cómo se ve esto, vale, probablemente podamos arreglarlo un poco. Ahora inspeccionemos y veamos por qué. Hay mucho espacio aquí en la parte superior. Por lo que parece que el cuerpo tiene un par de márgenes en la parte superior de la izquierda aquí, y cada uno de aquí tiene márgenes. Bueno, arreglemos eso. Se puede decir el margen. Yo quiero que todos los márgenes en el cuerpo sean cero. Y para el H, está quitado. El margen aquí está bien, vale, es mucho mejor, pero realmente no me gusta este gran color on color picker dot com Vamos con mi azul favorito para hacer esto un poco. A lo mejor uno oscuro como éste. El signo numérica con el color hexadecimal. Puedo relacionar la página luciendo un poco mejor, y también podríamos centrarnos. Esto está bien, así que vamos a entrar el texto dentro de nuestro cada momento. ¿ De acuerdo? Dulce. Probablemente podría usar algún espaciado en la parte superior. Un oleaje. También puedes usar algo llamado relleno. Y esto simplemente agregará espaciado dentro de, um, el texto esencialmente en lugar de en el exterior del mismo. Digamos que quizá 20 píxeles. Está bien, dulce. También cambiemos el fondo en el rubro aquí. Entonces lo que haré es agregar una familia de fuentes en el cuerpo. Está bien, se ve un poco mejor si no te gustan estos fondos. Por cierto, puedes utilizar el sitio llamado Google Fonts que proporcionan un montón de diferentes fuentes aquí que puedes importar y usar dentro de tu sitio web. A mí me gusta mucho este, así que voy a dar clic en el signo más. Puedes copiar este código aquí, archivo html fronterizo dentro de tu etiqueta de cabeza. Simplemente copia y pega eso ahí. A continuación se puede ver la familia de fuentes podría copiar eso. Salva a esos tres lascivos. Y ahora la fuente en todo su sitio ha cambiado. A continuación, sigamos adelante y arreglemos este menú de navegación. Añadamos un selector en la etiqueta UL y centremos el texto dentro de aquí, que centrará los enlaces. Y probablemente también deberíamos agregar algo de espaciado en la parte inferior de la misma también. Es la recarga que ve el aire de los enlaces ahora centrado. Pero también quiero hacer estos elementos de lista en Beacon. Mira el diferente taxi que tiene aquí en cualquier momento. Por lo que el ítem de lista. En realidad quiero esos a una línea al lado del otro. No estoy seguro si recuerdas cuando hablé de un bloque y en etiquetas de línea y cómo se muestran un poco diferente. Entonces si hago estos en fila puedo ver, aparecen justo al lado del otro. Ahora vamos a personalizar el color de esos enlaces. Selecciona todas las etiquetas de anclaje, haz que esos enlaces jueguen. Está bien, Sweet. Un problema a este enfoque es que si agregas un enlace dentro de tu contenido aquí, esos enlaces también serán blancos. Entonces lo que quieres hacer es antes del selector de anclaje que quieres en otra etiqueta aquí. Por lo que esto dirá que solo quieres seleccionar enlaces dentro de la navegación. Esto funcionará igual. Pero ahora los enlaces dentro de contenido, no serán Espera. De acuerdo, también centremos el texto del pie de página aquí. Entonces es como el texto de la etiqueta de pie de página el centro de línea. De acuerdo, ahora el pie de página también está forrado en el centro. Ahora por el contenido aquí. Probablemente podamos simplemente centrar esto, pero mencioné cómo se pueden agregar columnas. Entonces tratemos de hacer eso. Dentro de tu HTML tendrá que hacer nuevo impuesto aquí para mantener nuestro contenido de barra lateral y nuestro contenido principal . Esas serán nuestras dos columnas. Entonces vamos a usar ataque llamado div, y luego tendremos dos dibs más dentro de ahí. Copia y paz. Ahora estas etiquetas de aire solo genéricas que puedes usar y así tenemos que darles nombres. Podría hacer esto dando una clase en la clase Nombre dirá contenedor. Esta será una barra lateral. Y por último, el contenido que puede nombrar a estos como quieras. Depende de ti. Y así vamos a seguir adelante y cortar y pegar estas etiquetas aquí. La imagen irá a la barra lateral en el párrafo, etiquetas fuera de curso, yendo al contenido dentro de nuestro CSS. Tenemos que seleccionar ahora nuestro nuevo elemento contenedor, que es este día aquí mismo. Clases que podemos seleccionar con un punto y luego el nombre, el contenedor de puntos. Y para crear columnas, usamos algo llamado diseño flex. Entonces diremos display flex, recargar la página y boom. Tenemos dos columnas diferentes aquí. El imagen de la izquierda y el texto en la redada. Arreglemos algo del espaciado. Ya sé que las etiquetas de párrafo tienen un margen máximo. Pongamos eso a cero. Está bien, eso se ve un poco mejor. Y para el contenido, vamos a añadir algo de relleno a la izquierda y tener eso igual. Digamos 20 píxeles. De acuerdo, ahora tenemos algo de espaciado a la izquierda aquí y finalmente, tal vez algún relleno en la parte superior del contenedor. Está bien, eso se ve realmente bien. Ahora, tal vez algo de bateo en la parte inferior. Está bien para el pie de página ahí. Y así, sí, esto se ve bastante bien Ahora. También es receptivo. Se podría decir que puedo cambiar el tamaño y todo tipo de solo tamaño está abajo también. Está bien. Este sitio ha llegado muy lejos. Ahora tenemos un bonito diseño de aspecto aquí con un encabezado. Tenemos el encabezado y la Nap Bar, un área de contenido de dos columnas y un pie de página en la parte inferior. Y el siguiente video, llegaremos a JavaScript para agregar un poco de interacción a nuestro sitio. 9. Agregar funcionalidad de la calidad: JavaScript: hasta este punto, usamos HTML para agregar contenido y CSS para agregar algo de estilo. Ahora agreguemos un poco de interacción agregando un botón en el que alguien puede hacer clic para mostrar un mensaje secreto. Tendremos que volver a hacer un nuevo archivo. Se llama a este guión dot Js Inside. Aquí escribiremos algún código para seleccionar un botón en la página, así que diremos documento dot get element by I. D. Código envidioso ofrecerá sugerencias aquí. No te preocupes demasiado por el código aquí. JavaScript es un lenguaje de programación completo, por lo que no es tan sencillo como HTML o CSS Cento X. Así que diremos botón. A continuación, agregue un oyente de eventos. Por lo que cuando hagan clic en el botón se ejecutará una función. Y debería tener este abrigo en las notas si solo quieres copiar y pegar en caso de que no puedas conseguir esto exactamente igual. Y ahora mostraremos un mensaje secreto con el uso de la función de alerta aquí. Mi mensaje secreto. De acuerdo, esto debería funcionar, pero primero necesitamos agregar ese script en donde cada equipo L Page pueda ver ya tenerlo aquí, usando la etiqueta de script con la fuente señalando al script. Archivo RGs. En realidad sí tenemos que tener una etiqueta de cierre para la etiqueta de script. A continuación, necesitamos agregar este botón en algún lugar para que usemos la etiqueta de botón show secret message. Esto será lo que diga el botón. Y porque seleccionamos un comprado y con un i d de botón lo necesitas a eso d. aquí. Probablemente podamos darle a esto un mejor nombre. Ese es un mensaje de show. Una actualización, nuestro script de trabajo aquí para decir show message. Está bien, tan rápido. Poco recapitulación. Hicimos un nuevo archivo aquí. Script dot Js Agregamos eso en nuestra página con la etiqueta de script. Por cierto, asegúrate de que esto esté al final de la página. De esta manera, todo el html estará listo antes del guión, Terance. Y finalmente agregamos un botón inter html para que cuando hagan clic en él, muestren ese mensaje secreto. Recarguemos nuestra página web. Se podía ver el botón está aquí Ahora. Si hago clic en este boom, dice el mensaje secreto en este pequeño cuadro de alerta aquí. Esa fue una rápida introducción a JavaScript. Como dije antes, es un lenguaje de programación que puede hacer muchas cosas y así vincular este recurso aquí. Si quieres aprender el script Java más en profundidad y hacer muchas cosas geniales con él, construye algunas pequeñas aplicaciones geniales. 10. Subir tu sitio web: Ahora vamos a conseguir que nuestro sitio suba en línea para que podamos compartirlo con otros. Hay muchos servicios diferentes para esto. A éste se le llama ortiga. Si yo También hay otro llamado obtener páginas de ayuda y oleaje. Personalmente, pienso metal, si voy a estar en la más fácil para ti. Um, ingresó aquí. Entonces, una vez que hagas una cuenta, tú y tú inicias sesión, aterrizarás en esta página aquí, adelante y abrirás la carpeta en la que almacenamos todos nuestros archivos y nos arrastramos hasta la ortiga Si te tab Ok, entonces después de unos segundos, dependiendo de lo rápido que sea que consigas esto. Estás bien aquí. Si haces clic en eso y boom puedes ver nuestro sitio ahora está en línea y funcionando. Y aquí está la slash de dominio Están todos aquí. En realidad puedes empezar a compartir con la gente. Alguien más podrá ir a esto y ver todo lo que agregaste aquí. Si alguna vez quieres actualizar tu sitio web, puedes seguir adelante con el tap de despliegues aquí y luego arrastraste nuevamente tu carpeta con archivos actualizados . Muy bien, enorme. Enhorabuena por conseguir tu primer sitio web arriba en línea. Espero que lo compartas en la galería Proyecto en mi clase de habilidad compartida. Asegúrate de que también es seguir mi perfil de escultura y mirar hacia fuera otras clases en las que posé . ¿ Qué desarrollo? Pero por ahora, asegúrate de seguir mejorando en tus habilidades HTML y CSS y en tus habilidades de escritura de trabajo. De esta forma puedes seguir agregando más cosas a tu página web, que creo que es donde realmente radica la diversión en esto. Ya mencioné la Red de Desarrolladores de Mozilla. Tienen realmente gran documentación sobre estas tres tecnologías diferentes en la Web así como muchas otras cosas diferentes. Así que definitivamente echa un vistazo a eso. Sigue aprendiendo y te veré en el video final. 11. Reflexiones finales: De acuerdo, así concluye la clase. Pero antes de irte, definitivamente avísame con la revisión en cuanto a lo que aprendiste cómo te ha ayudado esta clase . O tal vez definitivamente no ha preferido nada constructivo. Y si construyes algo realmente cool poder sitio personal, ya sabes, algo súper simple o lo llevó más lejos. Definitivamente me encanta verlo. Me vuelvo a poner los pies en él así como cualquier otra persona que esté en esta clase. Y así asegurate de proyecto de cartel en la galería de proyectos y publicaré más clases en desarrollos futuros. Si quieres cintas más lejos, definitivamente te mostraré cómo hacer eso. Así que asegúrate de seguir mi perfil de esa manera. Ya sabes algo. Y de nuevo, muchas gracias por ver los videos de ser parte de la clase.