Introducción al desarrollo web: crea tu propio sitio web con HTML, CSS, Javascript y WordPress

1. Avance: Hola. Mi nombre es Brenton Strain, y soy el instructor de este curso. ¿ Qué? Haciendo uno? 01 ¿Qué? Hacer want One te llevará de cero a tener un sitio web que puedes compartir con tus amigos. Es que es un curso técnico, pero no es un curso que se enfoca, como el código y los lenguajes de programación. Aprenderás eso. Pero soy una especie de profesor de historia que no le importa si no memoriza las fechas de los lugares, los nombres y las fechas. Solo quiero que entiendas los conceptos, así que te estaré enseñando conceptos técnicos de todo lo que necesitas saber para poner en marcha tu sitio web, asumiendo que solo estás tomando este curso sin sitio web en absoluto. Esto para empezar, así aprenderás cosas como cómo obtener un dominio, cómo obtener hosting, cómo conectar tu servidor, cómo subir. Aprenderás un poco H dos metal y CSS. Aprenderás algo de programación de back end como PHP. Um, y luego, uh, la última lección. Incluso aprenderás sistema de gestión de contactos. Ese tipo de cosas como hace mucho del código por ti, y solo puedes ejecutar el sitio web a través de este sistema de gestión de contenidos aprenderá WordPress Um, y estarás listo para ir al final de este curso y compartir tus enlaces. 2. Comprensión del Internet 1: Esto es lo que se llama disco duro o son unidad. Literalmente es un disco que es difícil de ver. Tiene una cabecita aquí que se pelea a través del disco y la lee. Y, uh, el disco Spence. Y aquí están unos y ceros que forman datos de vigilia o archivos. Entonces si quiero tu transferencia un archivo de este disco a este disco duro, este es otro disco duro. Son mis amigos, manejando duro. No voy a desarmar éste porque no es mío, y quiero romperlo. Pero la forma más sencilla para mí de hacer eso aquí sería enchufar ambos discos duros a mi computadora. Y entonces todo lo que tengo que hacer es usar el sistema operativo, abrir ambas unidades y dragon drop para transferir el archivo de un disco duro al otro. A esto se le llama traslado. ¿ Y si el disco duro de mis amigos no está aquí en mi casa, pero en realidad está en otro lugar? ¿ Y si está en Atlanta, Georgia? Es un poco más complicado para mí transferir el archivo de un disco duro al otro, ¿ verdad? Bueno, tal vez no tanto porque una descarga es en realidad un tipo de transferencia. Es una forma de transferir un archivo de un disco duro a otro. Por lo que obviamente eso estaría haciendo uso de Internet para transferir disco duro. Pero para entender Internet, vale la pena tomarse un poco de tiempo para pensar cómo transferiríamos archivo a este disco duro sin Internet. Entonces sin Internet, probablemente lo más probable sería que tuviera que mover físicamente este disco duro a Atlanta, y luego mi amigo podría conectarlos a su computadora y transferir los archivos para que pudiera simplemente conducir allí. O podría usar la oficina de correos y traigo la oficina de Correos porque el sistema de correo es en realidad más o menos análogo a cómo funciona Internet. Entonces entendiendo, uh, el sistema de correo un poco. Ayudará con una comprensión de Internet en cierta medida. Entonces, ya sabes, no sé mucho de cómo funciona el sistema de correo, en realidad, pero sí sé, por ejemplo, que cuando empaque que este disco duro arriba y lo pongo y pongo una dirección en ella, empiezo con lo más general empiezo con como Estados Unidos. Si se va a salir de Estados Unidos, y pongo el estado que puse la ciudad que puso la calle, nombra eso con número de calle. Entonces pongo el nombre de la persona y luego puedes modificarlo a partir de ahí con cosas aún más específicas para que puedas hacer un número de departamento o puedes hacer cuidado. Y también sé que el cartero no o Post Woman no viene a mi puerta a recoger mi paquete y luego conducir directo a Atlanta y dejarlo caer. No, en realidad hay algo así como una red de oficinas de correos que entran en juego. Entonces primero va a mi oficina postal local y miran la dirección. Lo leen de abajo hacia arriba y deciden, OK, ¿esto necesita ir a otra oficina de correos que esté más arriba? O ¿Tenemos jurisdicción sobre esta dirección y podemos enviarla desde donde estamos ? Entonces porque se va a Atlanta, por ejemplo, subiría a otra cosa regional más amplia. A lo mejor hay una oficina nacional más en alguna parte. Iremos a como una montaña este o una oficina de correos sureña. Y a. algún punto, llegará a una oficina de correos que tenga jurisdicción de esa dirección, y luego se fijará empezar a enviarla aguas abajo más específicamente. Y bajará a tal vez en la oficina de correos de Atlanta y, ya sabes, Michael una ruta en particular. Y luego de ahí se entregará a la calle y a la dirección, y luego la persona lo abrirá y mirarán a Thea el nombre, y si es su nombre, entonces en realidad, uh, tomando una despedida y consigue el paquete. 3. Comprensión del Internet 2: Llevemos esto de vuelta a nuestro escenario y cómo todo se vincula con el teatro. El sistema de correo es una red de oficinas de correos conectadas, e Internet es una red interconectada de computadoras. Um, ahora en su red más básica son sólo dos computadoras que están conectadas. Podrías simplemente conseguir cualquier cable infinito y se conecta a computadoras, y tendrías una red de muy bajo nivel. Ah, más en red útil sería donde tienes múltiples computadoras conectadas entre sí Y ahora, . obviamente, no quieres tener una cancha por computadora en la red y cables conectando cada computadora, cada otra computadora, porque eso sería un enorme lío de camellos. Es mucho más sencillo tener una computadora ser el hub dedicado de la red y todas las computadoras conectadas en una computadora, el hub y luego esa computadora puede enrutar información desde cualquiera de las computadoras a cualquier otra computadora. Simplemente pasa justo por ese hub. Ahora los hubs son puedes todavía puedes sentarte configurando estos hoy, y mucha gente los ha montado en el pasado. Uh, pero lo que es un poco más fácil ahora es tener una computadora dedicada que esté construida con el propósito específico de ser uno de estos hubs. En ese camino, no tienes que configurarlo. No tienes que preocuparte por que alguien apague tu hub o, ya sabes, haga una actualización de software o algo así. Toda tu red baja mientras el hub está abajo. Ahora la mayoría de ustedes probablemente tengan lo que se llama enrutador. Este es un escritor más bien es inalámbrico, y también tiene algunas inundaciones Ethernet en la parte trasera, así que puedo conectar un montón a través del WiFi, y luego puedo conectar hasta cuatro computadoras a través de los enchufes Ethernet. Y esta es en realidad una computadora pequeña que se parece a una computadora. Pero dentro hay una tabla madre. Ahí hay memoria, hay almacenamiento. Y, um, esto vive para servir a todo lo que hace. ¿ Es que rata el tráfico de red de una computadora a otra. Por eso lo llamamos router. También podrías llamarlo servidor si quisieras causar este tipo de lo que es. Y así, en nuestro escenario, di que quiero que mi amigo pueda acceder a este archivo, y le digo, Ve a Brenton string dot com slash archivado en txt. Esa es mi dirección Web. Entonces eso es, ya sabes, es algo así como en el sistema de correo se tiene que tener una dirección, y tiene una sintaxis a ella que no se puede justo justo en cualquier orden. Tienes que hacerlo en cierto orden. Tienes que poner primero el dominio. Tienes que poner dot com, tienes que poner listones y todo eso. Pero, um, ya sabes, entonces tiene su Ratter, y pone en esa petición, y el router mirará eso y dirá, no tengo jurisdicción sobre esa dirección porque no está en su red local y Atlanta, ¿verdad? Entonces lo que hará el escritor es enviarlo aguas arriba a otro servidor, una computadora que está construida a propósito solo para manejar este tipo de tráfico de red en cerveza llamado servidores. Y lo que hará esa computadora es entonces revisar su base de datos para ver, ¿no? No, uh, no tiene jurisdicción sobre. Y esa cosa quiero decir, no es mirar los archivos en este punto. Simplemente va a empezar a mirar su dominio, Realmente, Realmente, porque eso es lo de nivel más bajo que es como el equivalente de como el país o el código ZIP o algo así. Y si no tiene jurisdicción, entonces enviará esa solicitud hasta a un servidor aún más amplio, más general. Y ese servidor mirará el nombre de dominio y revisará su base de datos para ver si así lo sabe . Es interesante. Básicamente, todo lo que hacen estas computadoras es mirar el nombre de dominio y averiguan si tienen jurisdicción y qué computadora no jurisdicción. Entonces llamamos a estos servidores servidores servidores de nombres , en realidad, porque todo lo que están haciendo es mirar los nombres de dominio y temer dónde está ese nombre de dominio en el mundo, como, literalmente como donde en realidad lo es. Y así eventualmente un servidor de nombres dirá, conozco ese dominio. Sé dónde está, y luego te enviará al servidor real así enviado, por lo que enviará la solicitud a mi computadora. Tengo laptop que tiene algún software instalado que le permite Teoh interfaz con los servidores, y de esta manera se llama software de servidor. Tú. Si tienes un Mac, está instalado por defecto. En realidad, solo tienes que configurar, y puedes ponerlo en cualquier computadora. Este software de servicio. Entonces conseguí este software de servidor y obtiene esa solicitud y que envía el archivo de vuelta a través de Internet. Entonces ahí vamos. Trabajo hecho, ¿verdad? Bueno, es un poco más complicado que eso, porque no quiero tener mi laptop siempre encendida y, uh, uh, nunca tener es el mismo tipo de problema con el hub, ¿ verdad? Si mi laptop se apaga los cinco para reiniciarla, entonces mi sitio web se va abajo. Entonces lo que quiero hacer es tener una computadora especial construida, construida con propósito que sea un servidor, no solo no una laptop de propósito general, sino que viva para servir a sitios web. ¿ Verdad? Entonces es un servidor, y tiene que tener realmente increíblemente buena conexión a Internet realmente rápida. Tiene que ser realmente alta memoria para que pueda, uh, sostener todas las cosas y tener múltiples conexiones. A veces dependiendo de lo grande que estés molesto. Millones de conexiones al mismo tiempo ha sucedido realmente rápido, disco duro, por lo que puedes sacar esa información del disco duro en dso realmente construyendo configurando tu propio servidor. Ya sabes, podrías hacerlo, pero tener un buen servidor va a costar mucho dinero en. Y es por eso que la mayoría de las personas que la mayoría de las organizaciones ni siquiera se molestan fue configurar su propio servidor. Lo que hacen es pagar a otra organización que se especializa en configurar servicio para hacerlo por ellos. Um, y esto se llama host Web. Para que sepas que el término host aplica aquí. Ah, anfitriona es alguien que te invita a usar su espacio como el anfitrión de una fiesta te invita a usar su hogar. Ya sabes, si la ciudad es sede de las Olimpiadas de Invierno allí, invitando a Espectadores y atletas a venir y estar en su ciudad y un anfitrión Web invita a su sitio web a venir en vivo en su servidor. Por lo que esto es mucho más sencillo que configurar tu propio servidor, obviamente, y como parte de este curso, shot Leaf está proporcionando seis meses de publicación gratuita en la Web. Eso significa que tendrás un lugar para que tu sitio web exista en Internet. Ese es el trabajo de artículo se ha hecho por ti, y en lugar de tener que pagar por lo general pagas como una cuota anual o mensual. Tienes seis meses gratis para, como pasar por este curso. Esa es una introducción básica a la infraestructura de Internet. Las únicas cosas reales que necesitas quitarle de esto son que a Necesitas una dirección Web . También se conoce un nombre de dominio y B. Necesitas un servidor Web también conocido como Web Posting, así que adelante y mira el siguiente video para obtener ayuda para hacer eso. 4. Obtén tu dominio gratuito y alojamiento web y y: vamos a estar haciendo todos nuestros experimentos y en proyectos de conferencias y todo eso, realidad en una página web en vivo, tu dominio dot com y en la hoja de tiro real Web hosting seis meses de publicación gratuita en la Web que obtienes para este curso. Entonces es como un patio de recreo de aprendizaje en el que tendrás que, uh, trabajar y seguir. Y así es necesario configurar eso. Entonces lo primero es lo primero, necesitas obtener un dominio dominios cuestan dinero. Están registrados año, año a año base por, um, um, lo que se llaman registradores y están configurados por I. Puedo ver un y es este órgano rector de Internet que elige quién podría ser un registrador, y establecen los precios Los nombres de dominio normalmente cuestan unos 12 dólares al año, dependiendo de si estás recibiendo un dot com y dot org o qué no. Algunos registradores cobraron más, por lo que obtienen un beneficio. Algunos registradores cobran menos como promoción. Configurar tu dominio y hosting con hoja de tiro es súper fácil en absoluto es a través de esta sola página te vas a disparar hoja dot com slash Regístrate y llegarás a esta página y podrás obtener tu web hosting gratis y eres dominio libre aquí todo en un solo lugar, Um, todo a la vez. Entonces para conseguir la libertad y hay que elegir uno de estos dominios, aquí abajo se anota. T K, g A. CFP y ML son los que están disponibles en este momento, y estarán aquí abajo en la parte inferior. Entonces este es el punto de dominio de nivel superior com es obviamente el más famoso y conocido, así que escogerás un dominio y simplemente lo tecleas aquí y luego checas la disponibilidad para ver si está disponible. Si estás dispuesto a pagar algo así como un punto com, también vas a tener que trabajar un poco más duro para escoger un hallazgo un dominio que, Ah, no ya tomado. Si quieres comprar un dominio o si ya tienes una demanda que quieres transferir a la toma, deja los servidores de nombres a la toma de dejar publicación. Hablaré de eso al final del video, pero por ahora solo hablaremos muy rápido de cómo pasa el dedo del pie, usando el dominio libre y el hosting gratuito así que tienes que seguir revisando hasta encontrar algo que esté disponible una vez que encuentres algo disponible. Pero te lo diré así te diré que es gratis si elegiste uno gratis y continúas. Por lo que lo principal que debes hacer es activar esta casilla. Asegúrate de que esto es mes a mes ahora mismo porque, uh, uh, solo estás recibiendo seis meses gratis a través de la publicación en la Web. Al final de los seis meses, te convertirás a cliente ah pagado o tu cuenta será eliminada. Dependiendo de lo que quieras hacer. Te ayudaré a transferir para a otro host si encontraste otro host que prefieras también . Entonces, ¿qué? Postear dominio todo en un solo lugar. Simplemente configurarás tu código promocional. Se puede ver que ya he aplicado este código promocional A B C D E F G es falso. Pondrás en el código promocional que obtienes de los videos. Y luego es solo un simple proceso de chequeo y llenado de la información de registro . Y luego, si haces esto donde tu dominio y estás hospedando o ambos desde hoja de tiro, entonces estás listo y bueno para ir todo es realmente simple. Um, ahora, si quieres, um, si quieres usar un dominio más único que no es uno de los libres. Hay un par de opciones, así que obviamente podrías comprar de hoja de tiro. Otro truco es que puedes hacer una búsqueda de nombre de dominio y muchas veces otros registradores tendrán ofertas y promociones pasando. Entonces ahora mismo se ve como uno y uno. GoDaddy tiene dominios por un dólar para el primer año. Entonces lo que esto significa es que consigues que ese dominio se registre por el primer año por un dólar. Después de eso, tienes que pagar su precio completo tienes que pagar su precio completopor ese dominio. Sea lo que sea ahora, puedes transferir dominio de un paseo de registro a otro. A veces hay tarifas de traslado, a veces no transferencia. Si pudieras estar sobre el precio del registro y dominio por un año, que suele ser como, ya sabes, alrededor de $12.10 a $12. Entonces esta es una buena manera de conseguir un dominio si quieres, como un nivel superior como dot com o algo así. Um, y otra cosa a saber es, no dejes que tus dominios caduquen a fin de año. si dejas que caduque tu demanda, lo que sucede es que los spammers los compren en cuestión de segundos después de que venzan. Y puede ser imposible recuperar tu dominio ahora, en cuanto a elegir un buen nombre de dominio, ¿quieres algunos límites? Corto, Fácil. Recuerda, Memorable tipo A ble. Um, quieres una especie de encontrar un equilibrio entre todo eso Y otra cosa que puedes hacer es que puedes hacer hackeo de dominio es si has oído hablar de la deliciosa Delle Donne ASIO i ceo dot us. Eso es ah, un nombre interesante. Esto es así de delicioso Y no, cuando lo escribo, en realidad sólo va a delicioso punto com. Pero lo que están haciendo ahí es que han elegido el punto nos dominio de nivel superior. Hay dominio real es el CEO y luego ahí Ah, hay sub dominio es Dell y puedes tener tantos sub dominios como quieras. Se puede configurar esto Así que realmente, lo que están haciendo es que nos han emitido y luego se han llevado algunas libertades creativas para hacer un hechizo. Delicioso. Entonces eso se llama hackeo de dominios. No es hackeo real es solo hackear solo significa jugar con él. Entonces goto deal en May I don y nuestro dominio er y note de nuevo puede cambiar a demeanor dot com porque en realidad es difícil escribir estos hacks de dominio. Pero, um, esto te ayudará a escoger algo. Entonces di que quieres dio plátano fresco, um, te da todas las opciones, y luego te da como trucos. Al igual que está el punto n a, um, dominio de nivel superior que puedes usar, y es consciente de todos los diferentes dominios de nivel superior. Um, así que hay ah nombre de punto. Ahí hay un punto Me, um, ahí está podrías hacer dot am slash e o usar un directorio. Entonces esto es, ah, útil porque te dice qué dominios ya están disponibles. Entonces si tiene este círculo verde, entonces ese dominio está realmente disponible y puedes registrarlo. Um, estas cosas probablemente vas a tener que ir a registrarte en otro lugar porque Shut Leaf no ofrece una tonelada de dominios de nivel superior. Otro que puedes usar se llama para significar Hack consiguió a Emmy, y éste no está conectado. Pero, um , te dirá un poco más rápido qué tipo de opciones similares hay. Simplemente está disponible. Eso eat dot es es el dominio de nivel superior de España para que veas que es bastante rápido y recogiendo diferentes opciones. Y sólo para notar, si terminas con un extraño dominios de nivel superior como el DOT N A, que es Nambia, puede que tengas que ir al registrador de Nambia, y podrían cobrarte como $100 al año o algo ridículo. Así que ten eso en cuenta que los nombres realmente extraños son a veces controlados por el país que posee ese dominio de nivel superior, y pueden hacer lo que quieran. Entonces eso es un inconveniente. Um, pero, um, si sí escoges tu propio dominio que no está disponible a través de Shot Lee para que encuentres un buen trato. Um, entonces solo irás aquí, pondrás tu dominio, y así shot leaf es capaz de enganchar tu hosting a tu dominio, y luego tendrás que ir a tu registrador, quienquiera que sea, si es go papi o nombrado barato o algunos que ya conoces, registrador de Nambia, tendrás que iniciar sesión en su interfaz y encontrar la opción. Teoh establecer los servidores de nombres para ese dominio y poner en Ennis un punto shot leave dot com y tiene hasta la fecha shot leave dot com como los servidores de nombres. Por lo que quieres hacer eso lo antes posible porque puede tardar un tiempo para que los servidores de nombres propaguen al hosting a través de Internet, Así que lo configurarás. Te inscribirás aquí para el hosting. Cuéntanos qué dominio es y luego en tu registrador. Si no lo es, muestra si tienes que configurar manualmente los servidores de nombres y luego darle hasta dos días para que se propague en Internet. Cuando se propaga. Cuando escribas tu dominio, deberías ver el mensaje de Shelby diciéndote que estás listo para salir. 5. Interoperabilidad: Entonces, empecemos con la interoperabilidad. Digamos que tengo a programas bloc de notas y trabajo Oficina. Es algo así como Microsoft Word. Ahora voy a crear e interactuar en documento de texto de documento no interoperable. Ahora vamos a subir, y vamos a guardarlo como el nombre que haya ahí. Pero el tipo es palabra, Doc. Por lo que las oficinas laborales operables con Microsoft Word. Podría salvarlo en todos estos cuatro meses. Voy a elegir dot doc y seguir adelante y guardar y ya ves que ha salido aquí. Ahora lo vamos a poner en el bloc de notas, que no puede abrir archivos de palabra. Esto es no interoperabilidad. Si queremos que entren operen, tenemos que guardarlo en un tipo de archivo que ambos puedan manejar. No hay almohadilla encendida. Lee hace texto plano. Entonces si quiero que esto funcione en el bloc de notas, eliminemos el archivo y empecemos de nuevo. Ahora, esta vez, cuando lo guardemos, lo vamos a guardar en un formato que sea operable con bloc de notas porque no, Pat solo hace guardar texto. Ahora aquí está el expediente. Arrástralo hacia adentro. Ahora funciona. Y solía ser eso si tenías un archivo que estás enviando de una Mac a una PC, o viceversa. No se garantizaba que tuvieran instalado el software adecuado para que funcionara, por lo que la solución que se les ocurrió para Internet cuando lo están diseñando era HTML. Es un formato de documento común en el que todo el mundo podría estar de acuerdo. Harían que su sistema informático pudiera leer este formato de documento. HTML significa lenguaje de marcado de hipertexto. Y entonces también estuvieron de acuerdo en algo llamado http http ¿es el camino para que todas las computadoras hablen entre sí? Tienen que hablar el mismo idioma. Si estoy aquí en Pasadena y estoy hablando con una computadora en Nueva York y estoy enviando esto por las ondas aéreas a través de Internet y no saben cómo hablar entre sí, no voy a conseguir el archivo que necesito. Por lo que tienen que hablar el mismo idioma. Ese lenguaje que crearon es protocolo de transferencia de hipertexto http. Por lo que nota html http. Estas dos cosas principales que crearon para hacer funcionar Internet que son claves de interoperabilidad. Ambos tienen hipertexto H t al principio, por lo que son los protocolos de transferencia los, el lenguaje de marcado o el o el formato de documento, pero ambos son hipertexto. ¿ Qué es el hipertexto? Bueno, eso es lo segundo clave en Internet. 6. Hiperenlaces: hipertexto significa más allá del texto. Es más que solo texto regular que tiene hipervínculos y otra interactividad. Antes había terminales antiguas donde en realidad se podía tocar el monitor para seguir un hiperenlace, y te llevaría a otras partes del documento o a otros documentos. Ah, el hipervínculo es algo que conecta una parte de Internet con otra. Por lo que el Internet en el que puedes pensar como una gran web con todos estos diferentes pequeños puntos de anclaje . Y cada punto de anclaje tiene enlaces hipervínculos, hipertexto que salen a otra parte pequeños anclas, pequeñas partes de Internet. Entonces tienes un punto aquí. Apunte aquí, punto aquí. Aquí, aquí, aquí, aquí, aquí. Y estos puntos están todos conectados entre sí. Y lo que hace grande a Internet es que no sólo este punto está conectado todos estos otros puntos, sino que tienes otros puntos dentro de aquí que están todos conectados entre sí, y así empieza a parecer una Web. Pero en realidad, realidad se parece más a una gran red neuronal. En realidad es sólo un poco caótico, y la razón es que ningún punto es más importante que cualquier otro punto, cada punto de anclaje en la Web es igualmente capaz de acceder a cualquier otra parte de la Web. Por lo que tienes hipervínculos que conectan todos sus hilos de conexión y esta Web o esta red, y están conectados en cualquier lugar. Bueno, esto en realidad no fue muy intuitivo. Fue un invento de Tim Berners Lee que fue, bien pensado para asegurarse de que Internet fuera interoperable. Y eso facilitaría la hipervinculación de todas estas, uh, de todas estas diferentes anclas. Por lo que la antigua forma de hacerlo podría ser algo así como Conectarse a su servidor. Ese es tu alcance que está en otra parte del mundo. Y ya sabes, escribes el número de lo que sea, entonces tienes que iniciar sesión. Entonces hay que navegar por esa estructura de directorios de computadoras. Después tienes que encontrar el archivo y solicitarlo, y luego se te envía a través de Internet, y luego puedes abrirlo. Esperemos que sea en un formato que tu computadora pueda leer. Entonces hoy en día, contigo o de lo contrario se simplifica. Entonces pones un enlace para una U L. Y es así. Ahí está el nombre de dominio que te dice con qué computadora empezar a hablar. Y luego tienes cualquier carpeta o estructura de directorios y tienes el nombre del archivo justo aquí , y es todo solo grupo justo ahí, y lo hace todo por ti. 7. Texto plano vs. texto rico: Entonces si vamos a hacer una página Web, no podemos simplemente abrir Microsoft Word y escribir algo en ella y guardarla y esperar que funcione en la Web porque tiene que ser interoperable. Entonces si alguna vez has intentado realmente hacer eso, um, no te das cuenta. Pero Microsoft Word usa lenguaje de marcado ah. Tiene formato propio. No es lenguaje de marcado de hipertexto. Es Microsoft, cualquiera que sea mi lenguaje de marcado. Entonces si intentas escribir en Microsoft Word, por ejemplo, con un nuevo lenguaje de marcado, entonces tienes el bling de mercado de joyriding siendo codificado en el lenguaje de marcado de Microsoft . Y luego cuando lo sirves como un navegador o algo a través de Internet, va primero que nada, lo hará. Http le dirá que se trata de un documento de Word de Microsoft, y así el navegador probablemente ni siquiera intentará leerlo. Pero si lo hace, va a estar realmente confundido porque no hace ningún documento de palabra. Sólo conoce HTML. Entonces lo que tenemos que hacer es asegurarnos de que aunque escribamos buen html, no se pueda codificar en otro. El lenguaje tiene que ser codificado a medida que lo escribimos, así que tienes que encontrar lo que se llama editor de texto plano 8. Editor avanzado con plaintext - bracket: Brackets: así que si Si estás en Windows esto es fácil. Basta con abrir el bloc de notas. Si no puedes encontrarlo, pulsa Tecla de Windows son tipo Nota. Golpe de almohadilla. Entrar. Si estás en Mac, puedes abrir texto en él ahora. En Mac, es un poco algo. Es un poco más difícil porque tienes que asegurarte de que estás guardando como texto sin formato y no texto enriquecido. Esto es una interrupción del futuro. Ahora estoy sugiriendo solo editor de texto inteligente tuvo desde sexo resaltando, y se llama corchetes. Entonces esto va a ser mucho mejor de lo que había sugerido anteriormente. Y por eso estoy regresando y revisando este curso. Entonces si estás en Windows o Mac, deberías poder. Teoh, descarga este goto corchetes el i O y ven a este sitio web y baja el botón. Y esto es Así se veía en OS X. Una vez descargada, haz doble clic en él para abrir. Pasé por este proceso y luego, como siempre con las cosas de Max, lo arrastras a tu carpeta Aplicaciones en Windows. El proceso es muy similar. Haz corchetes, no los míos, y haces clic abajo mi botón esperar a que se descargue, y seguirás adelante y haz doble clic en él. Haga clic, ejecute y deje enfriar la ubicación de falla de entrega. ¿ Quieres instalarlo? Adelante y ábrela. Se ve así tanto en Windows como en Mac, cuando lo grandioso de los corchetes es que, medida que lo usas, hará algunas características realmente avanzadas. Por lo que definitivamente recomiendo esto para ti sobre cualquier otro centro tecnológico. En este punto, está diseñado para desarrolladores Web en la parte inferior. Aquí mismo, puedes seleccionar qué tipo de código usando. Entonces si dices eso dentro de ocho extensión de correo electrónico, entonces lo será. Ya sabes, si estás haciendo CSS para texto plano o algo más, automáticamente detectará eso. Y si escribo etiquetas HTML aquí, hace algo auto completo para mí y algunas otras cosas geniales como esa. Todos tus faltas de trabajo aire aquí a la izquierda. El completo do que tienes abierto estará aquí, y luego podrás instalar enchufes y otras cosas usando este botón. Entonces esta es una herramienta realmente genial que es realmente poderosa. Y sin embargo es simple en bastante fácil de entender cuando apenas estás empezando. Por lo que definitivamente instala los corchetes antes de continuar. Esta sería una herramienta realmente útil para ti, pero lo importante es que eres capaz de componer un documento y guardarlo en formato de texto plano . Por lo que tendrá la extensión dot txt por defecto o usted o lo que haremos es por qué debería darle HTML. Entonces consigue que te pongas positivo, positivo. No nos levantes eso y luego regresa una vez que puedas verificar que estás guardando en texto plano. 9. Carga de texto en un navegador: De acuerdo, Tienes tu editor de texto instalado, y descubriste cómo hacerlo funcionar y modo texto plano. Entonces esto es lo que quiero que hagas. Um, correcto. Hola. Mundo en tu documento. Um, y podrías expandirte en esto más adelante. No intentes introducir ningún código ahora mismo. Es justo justo. Texto plano, derecho. Hola, mundo. ¿ Y cómo ahorras como si ya lo hubieras guardado? Guárdalo en un lugar diferente. Así que guárdalo como, um tu archivo y cójalo. Nombre encontrado. Esto es importante. Tienes que estar al tanto de dónde lo estás guardando porque tienes que poder mover este archivo más adelante. Por lo que te recomiendo guardarlo directamente en tu escritorio o crear. En realidad aún mejor crear una carpeta en tu escritorio llamada ¿Qué? Haciendo de 101 unidad una y guárdela en esa carpeta. Dale un encontrado anual Recuerda y dale el punto de extensión html. Ahora asegúrate de que no sea un nombre de archivo oculto pendiente. Extensiones sobre ella así. Txt al final. Ya que estás ahorrando en texto plano, una vez que lo descubra, vas a salvar esto. Se guardará es tu archivo. Asigne el nombre al HTML No habrá ningún archivo oculto. Las extensiones no se guardarán en ninguna otra forma de elegancia con texto plano muerto html. De acuerdo, Ahora mantén, uh, ten en cuenta dónde lo pusiste. Abre tu abridor, navegador, Cualquier navegador, safari, chrome, Firefox, Internet explorer. Y ya sea utilizar el diálogo abierto como control abierto de archivos. Sea cual sea tu atajo para tu sistema operativo o si tienes la carpeta abierta, solo puedes arrastrar, haz clic en arrastrar el archivo que acabas de crear. Te dije, recuerda dónde waas en tu navegador justo en una nueva página vacía y el navegador debería , si lo hiciste bien, abrir sólo el archivo de texto sin formato. Tienes este archivo de texto del plan. Ahora está abierto mostrando exactamente lo que escribiste. No debería parecer diferente a menos que escribieras algún código loco. Debería ser solo texto plano simple. Y si miras en la barra de direcciones del navegador, deberías ver tu nombre de archivo 0.80 mil. Y luego antes de eso, en la URL, tienes toda la información de ubicación y es te darás cuenta de que empieza con algo como archivo o no empieza con como las cosas normales. No se ve como una Web normal que mundo. No hay dominio, por ejemplo, es un archivo local. Um, entonces pero haremos algo con eso en un minuto. Entonces espero que no te hayas vestido. No cierres tu centro tecnológico. Al hacer esto, puedes guardarlo y mantenerlo abierto. Entonces aquí está A Aquí está el truco que siempre debes hacer cuando estás componiendo y editando es tener una ventana que es tu ventana de resultados y una que es tu ventana de edición . Entonces si tienes tu editor de texto plano abierto quieto, pon eso en la mitad de tu pantalla y pon tu navegador y la otra mitad de la pantalla. Puedes mirarlo a ambos al mismo tiempo. Y si no has cambiado las cosas, ahora ve a tu editor de texto plano y haz un cambio. Escribe algo nuevo, y luego guardas, no dices eso Guárdalo en el mismo lugar porque ya lo tienes abierto. No cierres nada ahora Tab over o pasar al navegador y encuentra el botón de actualización. Ah, atajo en Windows es cinco. Es un poco como reciclar icono de buscar hit refresh y verás que la página se actualiza con lo que acabas de escribir en tu centro de texto. Entonces esta es la esencia de una página Web. En realidad acabas de crear una página Web. Um, no es toda una página Web porque no está en Internet. Si yo Si quisieras compartir esto conmigo, no podías sólo darme una U R L. Y entonces lo pude ver. Tendrías que, como, enviarme una copia completa del expediente. Entonces eso no es del todo Internet, pero es una página Web. Es una página que está siendo abierta por el navegador, y es texto plano que vamos a hacer con Cold más tarde. Pero es, um, está um, siendo abierto por el navegador en formato HTML, en realidad, realidad, Así que haz esto. Haz algo como hit return un par de veces, intenta hacer una lista y luego refrescarla y ver qué pasa. Te das cuenta de que no es exactamente lo que esperas. No hay formato que se permita o trate de poner seis espacios entre una palabra eso. Algo interesante está pasando. Tenemos que formatearlo nosotros mismos. Vamos a hacer eso a mano, pero por ahora, lo que es importante saber es que acabas de crear una página Web 10. Frontend vs. Backend: lo pensamos como estamos buscando conectándonos al servidor, que está en Internet, que es Internet. Se podría incluso pensar en ello como en la nube en algún lugar del cielo. Y el servidor simplemente está siempre ahí, esperando servir. Entonces si el servidor es Internet y estamos aquí abajo en la Tierra, somos el cliente. El cliente es el que recibe los servicios del servidor. Por lo que el cliente es el lado frontal de la ecuación. El servidor es la parte trasera o el lado de Internet. Ahora que el cliente eres tú con tu computadora o cualquier otra persona que use su computadora para conectarse al mismo servidor. Ese es el lado del cliente. Y estarán usando cosas como navegadores en lugar de software de servidor. Y llamamos al lado frontal del cliente tipo de porque es la parte que vemos y llamamos al lado del servidor lado trasero porque la parte que no vemos también es como pensamos ello está en el cielo. Las metáforas se airean un poco confusas, pero el lado frontal es lo que está justo delante de ti backside o backend es lo que hay en Internet por lo general así que las cosas pasan en el servidor arriba en la nube arriba en el cielo. Eso es cosas de back-end que sucede justo en tu computadora, en tu disco duro en la memoria y el ram de tu computadora y en tu monitor eso es front-end. Por lo que cuando un cliente se conecta a un servidor, se comunican con http, el cliente le pide al servidor un archivo HTML, y el servidor lo envía por la línea al cliente Llamamos a esta descarga. Subir sería con el reverso si el cliente enviara a archivar al servidor, que la mayoría de la gente no hace a menos que seas desarrollador Web y todos sois desarrolladores Web . partir del final de esta lección, vamos a aprender a subir. 11. Subir FTP: tienes una página web. ¿ Cómo lo vas a conseguir en la web? Necesitamos, ah, otro protocolo no para hipertexto sino para transferir archivos a la nube para subir archivos . A esto se le llama Protocolo de transferencia de archivos. Es muy similar a http de muchas maneras en que se trata de instalaciones interoperables, comunicación entre dispositivos entre software y computadoras. Pero su propósito, como dice, es transferir un archivo hasta Internet a un servidor o descargar Ah, buen cliente FTP. Su pato cibernético. Ve al punto de pato cibernético c. h Ten cuidado. No escribes cyber duck dot com. Es ciberpato dot ch. Desplázate hacia la derecha y verás las longitudes de descarga. Esto funciona también para Windows. Adelante y haga clic en el archivo ZIP y espere a que se descargue. Ahora bien, esto es un poco interesante. El descarga es un archivo zip, y lo puedes ver descargando en tu, uh, carpeta de descargas aquí mismo. Y si haces click en él aquí o haz doble clic en él en tu carpeta de descargas, lo descomprimirá primero. Ahora no te da automáticamente la pequeña ah poco utilidad para arrastrarla aplicaciones. Por lo que tienes que encontrar tu carpeta de aplicaciones y arrastrarla de aquí a las aplicaciones. Tengo un atajo aquí mismo. Se me ha caído. Ahora, la primera vez que lo abras, puede haber algunas dependencias que se instalen. Voy a seguir adelante y arrastrar esto a mi escritorio, o tal vez quieras arrastrarlo a tu doc para hacer un atajo. También hay un par de marcadores aquí al principio para darte algunos ejemplos. Pero estos son solo confusos, y no los vas a usar de todos modos, así que adelante y elimínalos. Ahora tienes ciberpato instalado. Esto será similar en PC. Hay un par de formas de hacer una conexión. Inicialmente, podrías hacer una conexión rápida aquí arriba. Puedes hacer conexión abierta aquí, pero te sugiero que lo primero que haces es crear un marcador. Será muy similar a hacer conexión abierta usando esto. Así que adelante y haga clic en este pequeño botón hacia abajo en la parte inferior. Dejó el plus para agregar una conexión. Mira, yo sólo hice eso y lo creó. Voy a eliminar eso y empezar de nuevo consigue un click este pequeño plus y aquí tienes un nuevo marcador de conexión. Así que adelante y dale un apodo. Voy a llamar a esto Lauren y Brenton porque la página web que estoy haciendo para este curso es Lauren Brenton dot com. Ahora tu servidor, ese es el nombre de tu dominio. Ahora hay un truco aquí que puedes en realidad, ya que tu hospedado en gritos servidores Leaf, podrías hacer gritar leaf dot com pone shot Leif dot com, pero será más divertido y fácil de recordar si escribes tu nombre tu nombre de dominio, por lo que escribe tu nombre de dominio. Aquí la mía es Lauren y Brenton dot com. Así que ten en cuenta que no puse www al frente y sobre todo no puse http al frente. Esto no es protocolo de transferencia de hipertexto. Es FTP. Si realmente quisieras podías ver aparecer la URL, dice el FTP allá arriba. Podrías hacer eso, pero solo déjalo así. Apenas el dominio y y dejar el puerto en 21 luego poner el nombre de usuario. Entonces, ¿cómo sabes tu nombre de usuario? Acude a la información de correo electrónico que te fue dada por lo que Aquí está la información que me hicieron enviarme un correo electrónico. Por lo que ya puse en el dominio. Ahora usa el nombre aquí, es iss l y B. Así que voy a ritmo esa pasta final. Ahora, espero ampliar esto más opciones aquí porque va a hacer las cosas mucho más sencillas para ti si comienzas con un camino predeterminado de www y te mostraré por qué en un segundo. Pero adelante y poner el camino por defecto de www. El resto de la misma. Se puede salir en paz. De acuerdo, así que adelante ahora y cierra que la contraseña que obtendrás en un minuto. Entonces ahora tengo este año. Ahora puedes abrir la marca de libro, y te pedirá la contraseña. Entonces voy a copiar la contraseña y pegarla, y la voy a dejar para agregarla al llavero. Um, en realidad, no me va a dejar hacer eso, pero si eres es una trampa, puede que puedas tener esto sea recordado. No hagas login anónimo. Entonces usa el nombre es esta contraseña que acabo de pegar. De esto notarás que el servidor de nombres en el correo electrónico de contacto no entra en juego para esto. Entonces no voy a decir, No vuelva a mostrar esto y continúe porque no necesito que esto sea una conexión FTP segura . Está bien, está conectado. Entonces recuerda que te dije que escribieras www para el camino de partida. Eso se debe a que si no hubieras hecho eso, realidad habrías empezado en el directorio raíz para poder navegar dentro de tus directorios, ya sea usando esto o con esto. Por lo que acabo de subir a mi directorio raíz ahora haciendo clic en este botón. Y entonces esto es con lo que te habrían presentado si no hubieras escrito esa pequeña www. Entonces te has metido en esto. Has cargado en esta carpeta www, que es igual que la carpeta donde está todo el material público de la Web. En realidad es un alias o atajo al subrayado público. HTML. Es lo mismo que notaste. Ambos tienen este c g. Yo estuve ahí dentro. Si abro HTML público, voy al mismo lugar es si abro Www. Estas otras son tipo de cosas de las que no necesitas preocuparte. Se cuidan en su mayor parte, así que voy a volver a entrar en realidad, voy a ir a Www. Y el asedio que he estado es algo que es una especie de retroceso. Es un poco arcaico. No lo necesitamos, así que lo voy a borrar. Entonces, ¿así es como borras un archivo? Un FTP. Ahora bien, ¿cómo subes? Vamos a sacar esto del camino y abrir ese archivo html hello dot que tengo aquí. Entonces este es el archivo que quiero subir. Está en esta carpeta de creación de Web en mi escritorio, y es bastante simple. Esta es la ubicación en la que lo estoy arrastrando, que se va a correlacionar con Lauren y Brenton dot com slash Y entonces lo que sea que ponga aquí estará directamente ahí. Esta es básicamente la raíz del dominio, así que eso es un poco confuso. Aquí es cuando subo aquí. Esta es la ruta en el back end. Pero esta es realmente la raíz Www. Entonces para poner esto ahí dentro y ahora se va a subir. Me está mostrando toda la información que se tardó en subir, y dice currículum, detén todos estos controles diferentes que tengo. Y luego cuando esté hecho, me dice, sube completa. Y ahora puedo ver que el expediente está ahí. Entonces esto está en mi disco duro local en esta carpeta aquí. Hola dot html. Ahora esto es el infierno oda html en mi página web mi página web Lauren y Brenton dot com. Entonces vamos realmente a abrir un navegador y comprobar y ver si confinamos hello dot html. De acuerdo, aquí está miga. Voy a seguir adelante y teclear mi nombre de dominio Lauren y Brenton dot com. Entonces si solo voy aquí sin escribir ese hello dot html , te llevará a un índice. Este siempre será visible. Pero ahora mismo se iss para que pudiera simplemente dar click en eso para llegar a mi hueco un html. Pero voy a seguir en tipo todo el asunto. Lauren Brenton dot com forward slash hola dot html Hit. Entra y ahí está mi documento. Este de aquí es este documento. Ahora quieres ver algo interesante aquí está en Internet. Abramos otra pestaña y abramos en Miss Tab, el mismo archivo. Pero de mi disco duro me para arrastrarlo. Entonces, ¿ves el camino aquí? Este es el camino a mi disco duro en mi mac, tus usuarios de archivos Brenton escritorio Web, haciendo uno a uno hola a HTML. Es el mismo archivo que el de aquí en Internet. A miss tab. Lauren Brenton dot com slash Vologda html Así que son diferentes. Eres más, pero el mismo expediente se encuentra ahora en dos lugares. ¿ Dónde realmente sería más apropiado decir que esto es una copia de este expediente? Entonces aquí hay algo Es importante, ¿ entiendes? Si edito este archivo en mi disco duro, no se actualizará en Internet hasta que vuelva a subir. Entonces sigamos adelante y hagamos eso abierto con texto en ello. Ahora, aquí está mi expediente. Puse un poco de HTM Oh, pero voy a saludar. Este es un cambio local y guardar. Por lo que acabo de hacer un cambio a este expediente. Ahora, si voy a mi navegador después de tener todo lo que tengo que hacer para guardar esto, ve a mi navegador y ve a la pestaña local y recarga y ves hola. Este es un cambio local ahora sobre hacer cualquier otra cosa. Lauren Brenton dot com Refrescar. No se hizo ningún cambio. ¿ Por qué? Porque sólo lo cambié en mi disco duro. Si quiero ver el cambio aquí en Internet. Voy a tener que arrastrar este archivo para reemplazar ese archivo en Internet a través de FTP otra vez iba a subir de nuevo. Me va a preguntar, ¿Quieres sobrescribir? ¿ Y hago click? Sí, sí quiero sobrescribir. Y ahora se sube de nuevo y se hace otra copia. Eso ha anulado la copia antigua. Por lo que ahora esta actualizada. Entonces volvamos a la ventana y actualicemos. Lauren Brenton dot com hola dot html Y ahora el cambio local ha aparecido en la mía. 12. Enseñanza de navegadores para comprender: el mundo que nos rodea está lleno de contenido, y cuando lo miramos, nuestros cerebros son capaces de procesarlo en cosas significativas fueron capaces de darle sentido a una olla. Cuando lo vemos, nuestro cerebro le da el significado de olla. Cuando miramos un documento y leemos un par de palabras fueron capaces de leer el encabezamiento y darle sentido y darle el significado. Ese es el rubro. Desafortunadamente, las computadoras no tienen esta habilidad innata que tenemos. Por lo que tenemos que usar un lenguaje especial al que llamamos HTML para darle sentido al contenido con el que trabajan los navegadores y las computadoras. Entonces, ¿qué? Una computadora mira una página web y la carga. Necesita saber que el encabezado es ah, cabecera. Necesita saber que un enlace es un enlace para que al hacer clic en él, pueda llevarte a donde debe ir la longitud. Por lo que utilizamos un lenguaje especial para darle este significado al contenido de una página Web, y la forma en que lo hacemos es muy similar a cómo podrías ayudar a alguien que no conocía inglés que está viviendo en tu casa a entender el mundo que les rodea. Entonces si tuvieras un estudiante de divisas que no hablara inglés, lo que podrías hacer es conseguir estas pequeñas etiquetas e ir por tu casa y marcar todas las diferentes partes de tu salón en tu cocina y etiquetar todo con palabra en inglés para que tu estudiante de divisas no pueda cuando pidas un hervidor de agua. Ah, recuerdo que es la que tenía esa etiqueta en ella que decía Kettle similar a un HTML. Vamos a escribir en esta nota pegajosa, el nombre de lo que es que estamos etiquetando para que cuando lo pongamos en el hervidor ahora cualquiera que pueda leer esta etiqueta sepa que esto es un hervidor. HTML es similar en que el navegador puede entender cualquier cosa que le ponemos una etiqueta porque puede leer esa pequeña etiqueta. Entonces tenemos que seguir adelante y etiquetar cada cosa en la cocina, el Gabinete y todo lo que hay en él, cada estante individual, todas las cosas que hay en nuestra encimera, y luego cada olla de uno a la vez, 13. Anatomía de una página web: Hasta el momento, hemos estado dibujando una imagen de Internet que incluye un cliente y un servidor y un idioma. Pero realmente no hemos hablado mucho de qué es lo que en realidad se está transfiriendo de ida y vuelta . Ahora mismo, lo que has creado es contenido puro o es solo un archivo de texto sin formato, Correcto, Así que has subido este archivo de texto sin formato sin ningún código, pero acabas de tener este texto sin formato cayó y solo tiene palabras. Y si vas al conde de tu dominio, lo viejo descargado y lo muestras en un navegador, y lo hemos visto. Entonces esto es solo contenido. Esto es lo que buscamos cuando estamos usando Internet. Normalmente no nos importan mucho todas las cosas extra superfluas. Realmente no nos importa lo que luchó se esté utilizando. No nos importa cómo se vea el código. No nos importa si, como, como, se ve realmente bonito. El contenido es el núcleo. Cualquier otra cosa es capa adicional que se suma a la experiencia pero no necesariamente esencial para usar la Web. Tus páginas son en realidad lo suficientemente buenas como para comunicar contenido a la gente en este momento, pesar de que son solo texto plano. Pero si quisiéramos añadir otra capa. Podríamos usar código HTML para darle algún significado. Por lo que HTML le dará alguna estructura y significado al contenido. Se ocupa del sustantivo de su página Web. Simplemente define cuáles son las diferentes cosas, Lo que ahora son. Dice. Este es un enlace. Este es Ah, cabecera. No trata de hacer nada más que sólo tener ese vocabulario sustantivo básico para ayudar a darle un poco más de significado a tu comunicación del contenido. CSS trata con aditivos de la página. Se ocupa de la forma en que se ve y se siente. Describe no el contenido, no el contenido. Ahora nada lo posee describe el estilo o, como lo llamamos, en la cuña sobre el mundo del desarrollo Web. A la presentación entra y en realidad no se engancha directamente al contenido. Pero se engancha en el HTML, y utiliza esas diferentes etiquetas HTML que han definido diferentes partes de la página. Y luego le da a esas partes diferentes y significativas de la página formas específicas de mirar para que pueda establecer el fondo. Se puede establecer el color. Puede establecer este tamaño en la forma puede establecer cualquier cosa que hayas visto en una página Web que se vea de cierta manera. El modo en que se ve se establece con CSS. CSS tiene completo poder sobre él. CSS sólo se preocupa por estos aditivos. Tenemos que usar verbos eventualmente, ¿verdad? Entonces cuando ves páginas Web que son interactivas con las que puedes hacer cosas, ahí es donde entra Javascript. Por lo que entra JavaScript y hace que una página Web sea interactiva. Hacemos una distinción entre páginas Web estáticas y dinámicas. Una página Web estática sería sólo una sin ningún script en ella que no interactúe ni cambie. Lo cargas, y no importa lo que hagas, no puedes cambiar la página. Que lo más que podrías hacer es resaltar algún texto. Y, um, si sigues recargando, siempre será exactamente la misma página a menos que el propietario actualice la página derecha, Así que una página dinámica es aquella con la que puedes interactuar. Las cosas se mueven, puedes hacer clic en las cosas. Los juegos se pueden escribir en script Java. Se pueden tener aplicaciones que están escritas en JavaScript, y la mayoría de las páginas Web hoy en día son muy interactivas, y se hace un uso pesado de JavaScript. JavaScript sólo se ocupa de los verbos de ese contenido. La última parte son imágenes y otros medios, por lo que las imágenes y otros medios pueden ser el contenido en y de sí mismo. Pero la mayoría de las veces es texto se ajusta al contenido y cositas en imágenes, audio, video y otros medios en la página en medio del contenido como una mejora al contacto. El medio incluido es en realidad un archivo autónomo, y tienes dedo del pie descarga eso del servidor también y luego coserlo en el contenido. 14. Edición en vivo con ShiftEdit: para esto en proyecto de sesión. Vamos a editar algún código una y otra vez. Vamos a usar un editor de texto, pero a partir de este momento en el curso, realidad vamos a usar un programa diferente. Era importante para ti entender la edición de texto y para una edición realmente potente, querrás seguir usando los editores de texto que instalaste o usaste en tu computadora. Pero vamos a hacer un editor de texto en la nube a partir de ahora para una especie de simplificar el proceso para estos sitios web más simples. Por lo que esto se llama Shift at it shift edit dot net Ir a shift at it dot net Ahora notarás Shift at dot com está disponible para subir si lo escribes, pero ese no es el mismo sitio web. No vayas a cambiar en ella dot com lo desplazó dot net. Puedes instalar el chrome y la sanción, pero, um, tal vez quieras hacerlo más tarde, así que adelante y empieza haciendo clic en el enlace de inicio. Esta es una cuenta gratuita, aunque obviamente hay opciones para pagarla. Pero no necesitas las cuentas pagadas. Solo necesitas una cuenta gratuita por ahora. Ahora en el proceso de registro. En realidad puedes crear una cuenta usando ah, cuenta de terceros. Entonces, por ejemplo, si te asignan a Google, puedes crear una cuenta usando Google click allow, y luego te inicia sesión. Entonces, una vez que hayas creado tu cuenta, sigue adelante e inicia sesión y accede a esta pantalla. Si te gusta primero una pantalla de bienvenida, dirá que el acceso la cambió. Entonces esta es una pantalla en la que debes estar. Por lo que este es un cliente FTP combo editor de texto en línea. De acuerdo, esto va a hacer todo lo que hicimos en la última sesión todos juntos a la vez. Simplificará las cosas. Es un poco menos potente, y no es tan útil para hacerte entender. El concepto es por qué no lideró con esto. Entonces quería que entendieran cómo hacer esto manualmente primero, pero esta es una forma simplificada de hacerlo. Por lo que lo primero que quieres dio es configurar tu conexión a tu página web con FTP para que seas la forma en que haces eso está dando click en este ícono de añito. Entonces podrás elegir un sitio después de haberlo configurado así que en este momento, no hay sitio aquí, pero ahora mismo para configurarlo por primera vez hizo clic en el icono de engranaje y luego seleccionar nuevo sitio. ¿ Ahora qué? Esto es esta es esa misma información de cuenta que pusiste en tu cliente FTP antes. Así que adelante y consigue tu correo electrónico que tenga la información de tu cuenta de hoja de tiro y pon la información aquí. Es muy similar. De acuerdo, así que voy a pasar esto. Y luego aquí está ese correo electrónico que me envié a mí mismo. Entonces por supuesto que en realidad puedo hacer esto más pequeño. Podemos ver ambos al mismo tiempo. Voy a darle cualquier, uh, cualquier apodo que quiera para la cuenta. Entonces voy a llamar a Lauren Brenton, dejar el servidor, escribirlo FTP deja eso solo y luego seguir adelante al dominio. Ahora, ese es tu dominio completo aquí. Y recuerda, puedes usar grito leave dot com ya que lo estás señalando a tu sitio web en realidad es apuntado a los servidores de nombre de hoja de disparo. Por lo que eso te conectará al mismo servidor shot deje dot com o tu nombre. Basta con usar tu nombre. Tan menos Lauren Brenton dot com, incluyendo la parte de dominio de nivel superior del nombre de dominio, así que dot com dot net dot o lo que sea, y luego adelante y ponga su nombre de usuario. Ese nombre de usuario es el mismo usándolo que tienes aquí y luego paalmacenado Copia y pega tu contraseña y sigue adelante y guarda eso por defecto. Um, ahora, el directorio esto te permitirá elegir con qué directorio empezar por defecto. Entonces, um, en realidad probablemente no puedas cambiar eso hasta que iniciaste sesión al menos una vez. Pero querrás volver atrás y establecer esto en www o guión bajo público html para que no tengas que navegar hasta el guión bajo público html cada vez. Y entonces esta es la web que eres. Deja eso en paz. Así que adelante y hacer prueba de conexión antes de seguir adelante. Si consigues un aire como este, es porque ingresaste algo mal en uno de estos campos. Entonces dije que intencionalmente puse la contraseña equivocada en, Así que déjame corregir eso, y entonces podemos seguir adelante. Por lo que ahora que te has conectado, puedes entrar y cambiar el directorio de inicio. Um, vas a buscar www o guión bajo público html. En realidad hay una peculiaridad con la forma en que funciona esto, se puede ver cómo el director www ha sido renombrado a este nombre más largo. Entonces esto en realidad tipo de lo rompe. Está indicando que se trata de un atajo. En su lugar, escoge el guión bajo público html. Se puede ver cómo funciona esto en esto no así elige el guión bajo público html como predeterminado Directorio de inicio. Entonces no lo haces cuando inicias sesión, no te presentan todo esto y tienes que encontrarlo cada vez y el navegar hasta él. Subrayado público html No entres en ello. Apenas la carpeta ahí y elige esa carpeta ahí. Ahora estás conectado ahí y puedes guardar tu conexión. Genial. Para que veas que he ingresado. Déjenme cerrar esto. Ahora estoy conectado a mi servidor con FTP justo aquí a la izquierda. Aquí, tengo un montón de estas pestañas que siguen abriéndose. Ahora bien, esta es una forma de crear un nuevo archivo. Um, y vas a empezar con HTML. Pero primero nota que ya tienes tu expediente por aquí. Sea lo que sea que lo llamaste, está justo aquí. Y ojalá le hayas dado la extensión de punto html Así que esta es una forma de editar los archivos en la nube directamente para que no tengas que hacer todo eso cargando entre cada edición. Entonces si solo le das click una vez, no va a pasar nada. En realidad, Soto lo edita. Tienes que hacer doble clic en él o hacer clic derecho. Si quieres. Haga clic derecho para editar, hay que ir con el dedo del pie abierto. Es un poco un intuitivo, y ninguno de estos abre este abierto, sino que en su lugar solo haga doble clic en él. Esto lo trae abierto y se puede ver el archivo que subiste previamente. Entonces aquí está. Hola, mundo. Vayamos a mi página web a ver qué es lo que tengo aquí sólo para recordarnos. Entonces aquí está Lauren Brenton dot com y ahí está ese expediente. Y recuerda, Aiken tipos barra hacia delante Hola ese html y yo puedo ver mi documento allí. De acuerdo, así que ahora tengo esta ventana abierta esta pestaña y esta pestaña con Thea con el archivo en la nube siendo editado, no necesito que esto tenga más, así que en realidad voy a tirar de estos, tirar de esto fuera para que lo tenga en una ventana separada, no sólo una pestaña separada. Y entonces lo voy a hacer para que pueda ver las dos de la misma vez porque voy a ir y venir. Entonces, adelante y haz eso también. Haz que tus ventanas se abran uno al lado del otro y yo lo voy a hacer. Está bien. Entonces sigamos adelante y hagamos un cambio. Entonces acabo de hacer un cambio aquí, y no, no lo guardé. Y aparece aquí un poco de asterisco que indica que se ha hecho un cambio en el documento y no se ha guardado. Entonces sin guardar lo que pasa si refresco en Lauren y Brenton dot com Nada. De acuerdo, Pero si lo guardo, aquí está el icono de guardar. Ahorra ahorro. Hola. Y ahora ese asteroide desaparece. Ahora bien, si refresco en mi sitio web en internet en vivo, ves mi cambio. Entonces esto es genial, porque al salvarlo hizo más de una cosa. Lo guardó y en hizo el ftp todo para mí y lo hizo todo conectar. Y se simplifica mucho el proceso. Por lo que se puede pensar en esto como un editor en vivo, editor de sitio web en vivo, haciendo cambios 15. Lección de sintaxis 1 - etiquetas: antes de continuar, vamos a tener que dar un paso atrás y ver cómo dedo del pie realmente etiquetan las cosas con notas pegajosas en HTML de la manera que lo hicimos en mi cocina. Entonces lo que he hecho aquí es que me he metido en un editor de texto y he escrito todo el contenido de mi cocina. Entonces arriba con la parte superior aquí tengo cocina y luego dentro de la cocina está todas las cosas en mi mostrador, las copas de vino en el mostrador. El bloque de cuchillos está en el mostrador. Dentro de bloque de cuchillos hay un montón de cuchillos y luego todo lo demás los estantes en mi gabinete y el estante para macetas y las ollas. Entonces digamos, por ejemplo, necesito decirle al navegador cómo entender que esto es flor. Entonces no podemos solo en un editor de texto tomar una nota pegajosa y, como, pegarla encima de la flor porque este es un editor de texto, esto simplemente no funcionará. Entonces tenemos que encontrar una manera de realmente poner la etiqueta en realidad en el texto. Entonces, ¿cómo seguirías adelante y hacer eso? Bueno, una cosa que puedes probar es crear una pequeña etiqueta a mano. Ya sabes, que tienes estos corchetes y puedes usarlos para hacer algo que se parezca una etiqueta. Y ahora tal vez el navegador lo sepa. De acuerdo, esta es la etiqueta de la flor, y está indicando que esto es flor. Pero el problema con esto es que si los navegadores leyendo a través, ¿cómo va a saber que esta etiqueta de flor va a esto y no a esto? Es un poco complicado en un editor de texto indicar una cosa, mientras que en la vida real solo puedes pegarle la nota pegajosa encima En un editor de texto, necesitas averiguar formas de delinear a qué cosa estás apuntando en realidad. Entonces esto no va a funcionar porque en realidad no indica hacia dónde estoy señalando. Podría ir a cualquier parte. Entonces otra forma de hacer esto podría ser hacer algo como Ok, quiero indicar que es esto aquí mismo. Entonces si miras en tu teclado las teclas coma y punto, verás flechas pequeñas. Yo le llamo zanahorias. Y si pulsas la tecla Mayús, podrías hacer un pequeño puntero aquí, y yo puedo apuntar a flor y quizá también necesite indicar cuándo dejar de mirar flor para que el navegador no solo siga leyendo a frijoles también. Entonces voy a hacer otra era de señalar al otro lado de la harina. Entonces ahora con esta pequeña sintaxis, las zanahorias o las flechas señalando, sé que todo entre estas dos flechas es flor. Uh, oops. Excepto no porque tenga que escribir la etiqueta en el año dos. Entonces esto tampoco va a funcionar del todo, porque el navegador necesita saber que esta es la etiqueta y no sólo otra palabra como azúcar . Por lo que necesito una forma de marcar el inicio de la etiqueta, además de escribir el nombre de la etiqueta y apuntar a dónde está la etiqueta. Indicando inicia y dónde termina. Entonces la forma en que hacemos esto en html es con otra de estas flechas pequeñas. Entonces ahora esto parece una especie de etiqueta, cierto. Está empezando a dar forma. Parece que es una cosita cohesiva como esta, excepto que es puntiagudo en los bordes. Entonces esta es, ah, buena estrategia hasta ahora, pero no va a funcionar del todo. El defecto con esto es que va a tener problemas para entender que este pequeño ender puntero es el final de la harina y no algo que empezó aquí. Digamos, por ejemplo, quería indicar que esto era todo el contador podría hacer algo como este contador y luego aquí abajo y el contador. Correcto. Pero entonces lo que tenemos es a los navegadores como, OK, esto es todo contador. Y luego cuando llega a escuchar lo que está terminando es el contador terminando flor Orosz terminando el navegador no lo sabe. Entonces lo que tenemos que hacer es, siempre que tengamos una de estas flechas apuntando finales, necesitamos indicar qué está terminando. Y la forma en que hacemos eso es escribiendo el nombre de la etiqueta otra vez flor y lo mismo aquí con frijoles. Ahora, esto una vez más no es suficiente, porque ¿cómo sabe el navegador que no estoy empezando una nueva flor aquí y luego todo entre aquí y luego la siguiente flor de cierre es flor. Por lo que necesitamos una manera de diferenciar un ataque de flor inicial de terminar etiqueta de flor y lo que podemos usar esta pequeña barra hacia adelante Es como una barra que dice no, detente esto no lo es. Entonces harina y luego cortar no más harina. Entonces esto es flor de inicio. Esto está terminando flor. Entonces esta es la etiqueta, y tiene estas flechas pequeñas que apuntan a lo que hay entre la etiqueta inicial y final y todo lo que hay entre esas dos flechas siempre es flor. Entonces recuerda que es una barra inclinada hacia adelante y no una barra inclinada hacia atrás. El delantero corta como inclinarse hacia adelante como un chiquito inclinado hacia adelante, y está justo al lado de las pequeñas etiquetas de zanahoria. Entonces eso es fácil de recordar. Sólo siempre ve a su lado. Entonces esta es la sintaxis de cómo marcar una, um, una página con HTML para decirle al navegador lo que significa. Ahora, por supuesto, en html real, no hay etiqueta como la harina y los frijoles. Esta es mi cocina, pero esta sería la forma de hacerlo. Ahora vamos a tener que bajar aquí. Recuerda, pongo esta pequeña etiqueta de cierre de contador necesito bajar aquí y asegurarme de que tengo contador de parada. Vale, Ahora, ¿ puedes ver como me marcaría al resto de nosotros? 16. Ejercicio de HTML: realidad vamos a escribir algo de HTML. Entonces hazlo junto conmigo mientras hablo. Pausas, vas tú. Entonces, um ahorita esta página tiene una palabra enfatizar. Este es un cambio en la nube. Ahora bien, esto no está semánticamente marcado. Y como sabemos, HTML es sobre semántica. Entonces ahora mismo, si alguien que está ciego está usando un lector de pantalla, lo que hará el lector de pantalla cuando cargue estas páginas, dirá, Hola, mundo. Este es un cambio en la nube y en realidad no enfatizará la palabra nube. Entonces lo que tenemos que hacer es usar HTML para marcar esto para que un lector de pantalla sepa que es texto enfatizado. Y diré que esto es un cambio de nube. En realidad enfatizará que cambiará la forma en que dice la palabra nube. De acuerdo, entonces la forma de hacerlo en HTML es con etiqueta enfatizar, que es e. M. Así que adelante y ponle e m alrededor ahora. Además, es grosero gritar en Internet, y todas las capitales indican gritos en Internet. Simplemente se ve pegajoso. Entonces hagámoslo en minúsculas también. Ahora, esta manera, no estamos cambiando nuestro contenido con cosas presentacionales y con cosas semánticas. Estamos poniendo la semántica en el HTML donde pertenece en lugar de en nuestro contenido. Y luego podemos hacer que se vea como queremos más adelante con CSS. Entraremos en eso más tarde, sin embargo, así que haz este cambio y guárdalo. Así que pausa a medida que vas y haz esto junto a mí. Entonces, después de haberlo guardado aquí, deberías ver cuando recargas esta página. Misma misma página exacta hola dot html parecen cuando estábamos trabajando en un cambio de esto, ahora es html enfatizado, así que verás que ahora es cursiva. E. M no es exactamente lo mismo que un talico. GM tiene un significado semántico, un significado significativo de enfatizado. También hay una etiqueta para los ojos, que significa metálica. Ahora la etiqueta I tiene un significado semántico de algo así como algún texto que separa por lo que usarías una etiqueta de ojo semánticamente para situaciones en las que tienes, por ejemplo, el nombre de un barco o una palabra extranjera, algo que tipográfico Lee usualmente italicizamos por una razón de que es que se desprendió lee tipográfico. OK, entonces eso es diferente a E. M. Así que sólo porque quieres que algo se ponga en cursiva. Entonces estás usando el nombre de un barco. No usarías la etiqueta M. Por eso. Usarías la etiqueta I que lo haría cursiva. Y sólo porque se enfatice algo, no se quiere necesariamente ser siempre un Talic. Podría usted. Podrías estar tentado a usar la etiqueta I para algo que esto enfatiza, pero no es lo mismo. El tag I indica algo más. Además, no siempre tienes tu texto que se enfatiza en cursiva. ¿ Alguna vez has visto un sitio web donde enfatizar Texas subrayado fueron negrita id o hicieron un color diferente o hicieron un tamaño peleado diferente? Hay diferentes formas de hacer esto, así que no te confundas sobre el defecto. Mira, el HTML lo da. Piensa en la semántica. Por lo que hemos escrito algo de HTML y ya ves cómo funciona esto. El E M da la vuelta a la parte que se enfatiza. Entonces lo que esto está haciendo es enfatizar esta palabra Nube y no se enfatiza todo lo demás . Si quisiera que se enfatizaran las palabras, podría arrastrar este corte basado y ahorrar, y ahora se enfatizan ambas palabras. Esto es un cambio en la nube, por lo que se enfatizan ambos, y déjame seguir adelante y mostrarte otra etiqueta. Esto ahora mismo es en realidad un párrafo. Entonces, vamos a marcarlo como un párrafo. Esta es la etiqueta p y saber que cuando cuando escribes en algunos contextos cambias a ella automáticamente te dará la tachuela de cierre. Entonces cualquier cosa que esté aquí es un párrafo. Ahora, queríamos que siguiera en esto. Entonces voy a cortar esta segunda parte de cierre e ir al final de línea hit return para ir abajo y luego pegarlo. Entonces ahora ves que desde aquí, arrastrado hacia abajo para escuchar todo lo que se destaca es un párrafo ahora, según HTML. Por lo que lo guardas y te refrescas. No hay cambio que veas. Pero la página semánticamente ahora tiene este significado y bute en ella. Le has dado el significado de esto es un párrafo. Esto va a mejorar tu ranking de búsqueda de Google. Es que va a hacerlo más accesible para personas que tienen diferentes discapacidades. Va a hacer que esté más conectado con el resto de la web. Entonces quieres tener este significado semántico Incluso cuando no se vea de cierta manera más adelante, podemos entrar con CSS, y podemos apuntar a párrafos para que se vea de cierta manera si queremos. Lo que voy a hacer es realmente crear en esta misma cosa exacta aquí el mismo hello dot html o cualquier nombre de archivo que le diste. No crees una nueva página justo dentro de esto. Lo que quiero que hagas es ampliar un poco esta página. Yo quiero que le des un título, el encabezamiento otro párrafo y una lista de enlaces a algunos de tus dominios de compañero de clase y no me tropezan. Ahí está esta asignación es un poco de truco. La asignación es una especie de pregunta truco. Te estoy dando una asignación, y hay una parte de esto que no sabrás hacer a menos que ya sepas hacerlo desde otro lugar. No te he dicho cómo hacer cómo completar esto por completo todavía, Así que cuando llegues al punto donde no tienes idea de cómo hacer lo que te acabo de asignar, no te preocupes por ello. Simplemente sigue adelante. Tendrá más sentido si ya lo has probado por tu cuenta y viste la necesidad de por qué esto es entonces si solo lo escuchas directamente desde el principio desde el principio. Entonces esta es una herramienta de enseñanza que estoy usando para ayudarte a recordar y entender la razón por la que hacemos las cosas de cierta manera. Entonces, no te tropezes cuando llegues a ese punto en el que no puedes averiguarlo. Entonces otra vez, lo que vas a hacer es que vamos a ampliar un poco esta página. Vas a darle un título, que es el título de toda la página. Entonces le vas a dar un encabezamiento y luego abajo aquí, vas a poner otro par de gráfica y luego lista de enlaces a las páginas de classmate. Entonces obviamente vas a encontrar los enlaces de tus páginas de compañero de clase en la sección de proyectos, y además, después de escribir el contenido para esto, también vas a comercializar semánticamente. Entonces la forma en que vas a hacer eso es que vas a usar estos elementos, así que no te voy a mostrar cómo hacer esto. Voy a dejar que descubras cómo usar la etiqueta H one para un encabezado de página. Ya viste la etiqueta de párrafo para el párrafo y luego vas a tener la etiqueta de elemento de lista , que marcará, que lo hará, dino, que algo es un elemento de lista. De acuerdo, así que adelante y pausa el video ahora y completa este pequeño proyecto de sesión de clase yendo . No te tropezen. Cuando no sabes hacer algo, solo haz todo lo que puedas Y luego una vez que hayas hecho todo puedes un NPAs el video y continuar. 17. Revisión de ejercicios de HTML: De acuerdo, así que ojalá no tuvieras demasiados problemas con eso. Por lo que aquí también he hecho la tarea. La primera parte. Acabo de armar el contenido. Entonces aquí he hecho el título aquí. Látigos Deshacer eso. Control o comando Z deshacer. De acuerdo, este es el título. Este es mi rumbo. Este es ese párrafo que escribimos juntos. Y entonces este es mi párrafo. Ahora mismo saben cómo se acaba de continuar por Fuera de pantalla va todo el camino por aquí. Eso está bien. Simplemente lo voy a dejar así. Y luego aquí está mi lista de enlaces a las páginas de mis compañeros de clase. Estas son las páginas que más me gusta tuvieron en la sección de proyectos. Entonces si guardamos esto ahora sin marcarlo con HTML, veamos qué pasa. Una especie de desastre. Solo hay un montón de ah encordado aquí, y se pone peor a medida que cambio el tamaño de la página, ¿ verdad? Es que todo está colgado juntos. En realidad, lo único que no está encordado es la parte donde hicimos este pequeño párrafo. Esto está muy bien segmentado, pero la página de Brendan, el título y luego mi encabezado están todos encortados y esto está todo colgado juntos. Entonces esto no es bueno. Escribamos un HTML para limpiarlo. Entonces la página de Brendan, yo quiero ser el título. Esto fue parte del truco. No te di el html por escribir ese título. Es un poco confuso, así que vamos a volver a ello a continuación. Tienes el rumbo, así que hay una diferencia, ¿verdad? El encabezado el HTML cuatro es H uno. Entonces deberías tener tu Esperanza, si no escribiste, tu código debería verse como este h uno, el contenido de la H y parar cada uno. Entonces todo desde esto hasta esto esa es la edad uno. Si guardamos esto y lo miramos ahora, podemos decir que el HTML ha imbuido el significado de encabezado de primer nivel. Si adivinaras, ¿qué adivinarías? Que el código para cabecera de segundo nivel es así que ya escribimos esto. Dejemos eso en paz Ahora. Se trata de un párrafo. Entonces voy a escribir de nuevo p y luego al final. O en realidad, lo que será más fácil es si lo pongo justo aquí. Detener P cerrar p Así que este es el elemento P. Y ahora, si lo guardo y voy aquí y refresco, deberíamos ver alguna distinción entre este párrafo y lo que sigue después. Bien. De acuerdo, Ahora te di la etiqueta l I para indicar que algo es un ítem de lista. Entonces lo que he hecho aquí mismo Um se puede ver esto simplemente no va a funcionar porque todo está en una línea. Entonces si le doy un l, alrededor de cada uno de uso lo que hice, como que traté de ponerle formato ya que estaba escribiendo esto porque puse cada uno de estos en una nueva línea y le di este pequeño guión y se puede ver que no funcionó. Funciona cuando es pequeño porque envuelve las palabras largas. Pero no lo funciona de ningún otro tamaño porque realmente no hay formateo aquí. Entonces este pequeño guión de aquí, lo escribí no porque en realidad sea parte de mi contenido, sino porque estaba tratando de formatear. Pero formatear formalmente es trabajo de CSS y que HTML le dé el significado para el CSS. Entonces vamos a eliminar estos pequeños guiones que pongo ahí porque no están adecuadamente contenidos. Entonces voy adelante. Yo las estoy haciendo todas. Y ahora voy a poner aquí los elementos l I. Ahora, claro, es muy importante que siempre lo escribas exactamente de la manera correcta. Entonces si yo Si quiero ahorrar tiempo, lo que voy a hacer es copiar este aliado abierto y hacer todos ellos una vez y éste éste pegue, pegue , pegue y luego recordando mantener todo limpio. El cercano aliado pegar, pegar, pegar, pegar, pegar. Ahora el HTML debe saber que todos estos son elementos de lista. Guardar y refrescar. Perfecto. Entonces esto se ve mucho mejor. Entonces aquí está la parte complicada. Te dije que pusieras enlaces, pero lo que es esto es que tú eres más. Entonces en realidad no te dije cómo poner enlaces. Ahora te di el un elemento para una etiqueta, y así podrías probar la longitud del dedo del pie, facilidad con una y luego parar una.Pero cuando lo guardas y lo miras, puedes decir que en realidad no está funcionando, ¿de acuerdo? Y además, quieres poder decir el nombre de esta persona en lugar de mostrar siempre el tú Earl será realmente agradable es si solo pudieras poner el nombre, la O cualquier palabra que quieras y luego anclar el tu mientras en ella. 18. Lección de sintaxis 2 - Atributos: Para conseguir enlaces al trabajo, correcto, vamos a tener que aprender algo nuevo. Echemos un vistazo a nuestro pequeño ejemplo de cocina falsa otra vez. Entonces ahora está marcado en una sintaxis de estilo HTML falsa, y se puede ver que tengo etiquetas para todas las cosas diferentes en mi mostrador. Todas las copas de vino individuales, cada cuchillo en mi bloque de cuchillos y luego Meziane en el mostrador. Ahora aquí viene el Gabinete, con diferentes estantes, platos, cuencos y cosas así. Ahora el fondo es el estante para macetas, así que en el estante para macetas hay un problema porque todas las ollas se ven iguales, pero en realidad son de diferentes tamaños. Se puede ver un núcleo de tres A a la corte. Entonces, ¿cómo vamos a decir con la etiqueta que esta olla es de un tamaño diferente en la otra olla ? Bueno, lo que dio es escribir un atributo en el bote, por lo que necesitamos especificar el tamaño. Los lados de esta olla son tres canchas, por lo que tamaño correcto las tres canchas de Eagle. Se trata de un poco de atributos que va en la propia etiqueta, y luego volvemos a poner toda la etiqueta en la olla, y ahora sabemos que este bote es de tres canchas. Entonces lo que queremos dio es ir adelante y marcar cada uno de estos individualmente ya que son diferentes tamaños. Entonces, obviamente, si vamos a escribir información sobre este bote, necesitamos poner la información dentro de esta etiqueta. Ahora bien, esta es sólo la etiqueta de cierre. Nunca entra nada aquí, tiene que entrar aquí Ahora queremos ponerlo después del nombre de la etiqueta que dice que es una olla, así que lo pondremos justo aquí. Nunca lo pongas antes porque entonces el navegador se confundirá. Ahora vamos a escribir el atributo, nombre, tamaño, y luego tenemos que establecer lo que es igual a tres tribunales. Adelante y hagamos eso con todos los demás. De acuerdo, Ahora he dado la mayoría de estos tamaños. Puede ser que algunas de las macetas en realidad no necesiten tener los atributos de tamaño porque realmente no aplica. Por ejemplo, algunas de mis cacerolas del tamaño no importa tanto, así que voy a dejar eso fuera 19. Enlaces de HTML: Ahora debemos saber poner la URL en la etiqueta de anclaje para que podamos ver el texto. Pero el ancla tiene la URL como atributo Eso le dirá al navegador a dónde llevarnos cuando pinchemos en ese texto. Entonces hay por razones arcaicas Llamamos a esto un ancla y ah, hiper referencia. Por lo que la etiqueta de anclaje irá por ahí no la hiper referencia ni la URL. Voy a cortar esto, poner alrededor de la palabra que quieres. Entonces este es el proyecto Abuela. Entonces si guardo esto, esto se está acercando a cómo se supone que lo hagamos. Proyecto Abuela. Ahora, así es como quiero que se vea el link excepto quiero poder dar click en él y tenerlo Llévame a eso Tú eres l que acabo de cortar de aquí. Entonces, ¿cómo hacemos que este ancla tenga la hiper referencia o la URL vinculada a ella? El modo de hacerlo es con un atributo este elemento puede tener un atributo on attribute siempre va justo aquí y el nombre del atributo para las referencias hiper H ref, hiper reference. Y ahora tenga en cuenta que porque estoy en esta sintaxis destacando cambio de programa en ello. Cuando llego al espacio, obtengo una pequeña lista de posibles atributos. Ahora quiero que recuerden que la ACTU es ir en la primera, la apertura, no en los elementos de cierre. Entonces si trato de ponerlo aquí, no consigo esa pequeña lista porque nunca va ahí. Nada va nunca aquí excepto el er demarcado de cierre y el nombre del elemento que su cierre. Va justo aquí después del nombre del Elemento. Pero antes de que la etiqueta se cierre realmente para poner un espacio y se ve oh, hay algunos atributos sugeridos y los atributos que queremos para nuestra hiper referencia es H Ref significa hiper reference. Entonces la h ref va a ser y voy a pegar en el enlace. El hiper referencia es ese enlace, Así que vamos a guardarlo y actualizarlo. Se ha convertido en lince, y ahora es un ancla que tiene la hiper referencia vinculada ahí, uh, uh, enfurecida ahí dentro y se puede ver en la parte inferior que sale el pequeño texto de vista previa. Si hago click en esto, me llevará a proyectar a la abuela. Volvamos atrás. ¿ Y si hay una cosa más que tenemos que hacer con este Atributo. Si este atributo que, que el nombre real es un vestido, hiper referencia es igual y entonces lo que es igual es el earl el hiper referencia real? Por lo que este es atributo, nombre, valor de atributo. Allí los valores pueden ser realmente diferentes. En realidad es dedo del pie válido. Tener un nombre de archivo que tenga un espacio en él pero decir que había nombrado en Hola, Space World. Esto nos va a causar problemas por la forma en que el HTML lee esto. Eso es mar refrescante. Lo que hizo es que lo hizo. Trató de llevarme a proyecto abuela dot com slash Hola? Nada. Porque vio este espacio y pensé que ya había terminado. Entonces lo que tenemos que hacer siempre es poner comillas alrededor, valores de atributo cada vez. Cada valor de atributo de valor real único siempre tendrá comillas alrededor, y esto solucionará muchos problemas, y mantendrá limpia tu sintaxis. Así que vuelve atrás. Refrescar. Ahora si hago clic en él, me da todo el u R L aparecer. Hola y luego se pone este código que significa espacio en su mundo ahora, ella en realidad no creó la página. Hola, mundo. Eso me lo invento. Ella creó una página. Hola. Entonces por eso no se encuentra. Pero se puede ver eso aquí arriba. El verdadero lleno en el que Earl se abrió paso. Entonces volvamos atrás y arreglemos esto a qué? Sus páginas reales. Así que adelante y poner un treff igual para todos estos enlaces. Y la forma en que lo voy a hacer es que en realidad voy a hacerlo de una manera rápida. Ya que thes ya tienen la URL aquí, voy a copiar sólo un viaje igual a copia y ponerlo ante estos Usted es más. Ve lo complicado que es esto. Pero ahorra mucho tiempo, y luego voy a copiar esta parte. El presupuesto de cierre en la zanahoria de cierre. Lo voy a pegar en el entrar el otro final de este año, Earl. Verás la sintaxis resaltando, cambiando a medida que hago esto porque estaba creando errores al hacerlo de la manera equivocada. Pero ahora cuando lo termine, está todo limpio. Y ahora necesito Así que aquí está el inicio del ancla. También necesito cerrarlo. Entonces para cada uno. Voy a seguir adelante y copiar. Esta pasta de aquí tiene que estar exactamente ahí. Y ahora puedo llenar el ancla para cada uno de estos. Entonces si guardo esto, ¿qué va a pasar? Cuando refresco esto, deberías poder tener una idea que. De acuerdo, así que escribí el Proyecto Abuela aquí. Pero aquí no hay nada entre nada en la etiqueta de ancla. Ahí está el valor de los atributos, la hiper referencia. Entonces el hiper hace referencia ahí, pero el ancla real no tiene contenido en ella. Entonces látigos, creo que sí salvé todo eso. Pero sólo hay un documento abierto para guardar. Entonces si refresco lo que va a pasar con estos, tú eres más. He movido estas URL a los atributos y ahora el anclaje real no tiene contenido. Desaparecerán, y aquí no hay nada. Eso se debe a que el extra no tiene El ancla no tiene contenido. Entonces voy a seguir adelante y darle palabras a cada uno de estos ahora ve a guardar y luego refrescar. Ahora todos se presentan y deberían trabajar. Puedo hacer click en cada uno de estos y volver y mirar, esta persona en realidad ya escribió algún html porque hay alguna textura enfatizada o cursiva . No estoy seguro si usaron la etiqueta de énfasis o la etiqueta cursiva porque no puedo ver su código. Y mira, esta persona escribió algún tipo de HTML también porque tienen algún formato aquí. Me pregunto qué código usaron, pero podemos ver la fuente de nuestra página Web, pero no podemos ver la fuente de sus páginas Web. Bueno, puedes, pero te diré cómo hacer eso más tarde. Una pregunta que tengo es. ¿ Alguno de ustedes cuando estaban creando esta lista la primera vez, en lugar de usar guiones como yo, usaron números? ¿ Hiciste 12345? En lugar de guión o punta de bala? Hay una diferencia en tipos de listas. Ahí hay una lista ordenada, que sería 12345 Y hay un A nordeste. Entonces en realidad hay una manera de marcar toda esta lista como una u otra, y en realidad se requiere. Un elemento de lista siempre debe ser ordenado o un Nord errado, y la forma en que lo hacemos es poner la etiqueta de inicio aquí en la etiqueta de cierre y el elemento para lista ordenada es ol el elemento para una nueva lista ordenada. ¿ Está bien? Entonces hice la mía con guiones porque no quería que se ordenara. No hay medio que no haya significado en el orden. Son sólo Es sólo una orden aleatoria. Entonces te voy a hacer l una lista no ordenada y ves que automáticamente me dio la etiqueta de cierre . No lo necesito. Están cortadas. Lo necesito aquí abajo. Pegar. Entonces ahora lo que esto dice es que aquí hay una lista de órdenes de aquí a aquí. Esa es una lista de órdenes. Y este es un elemento de lista. Ahí están todos estos elementos de lista, por lo que lo único que entra directamente dentro de una lista de pedidos es el elemento de lista. Entonces, no te confundas cuando veas comenzar esta UL y no se detiene, pesar de que ha comenzado otra. Lo que esto significa es que este ítem de la lista está dentro de esta lista inaudita. No quiere decir que esto de nuestra lista sea primero y éste sea el siguiente. Esto en realidad está debajo del interior de la U. L. 20. Lección de sintaxis 3 de HTML: volviendo a nuestro ejemplo de cocina. Esto es como cómo puedes localizar las macetas ya que dentro del estante para macetas, el estante para macetas arrancando flechas justo aquí. Y baja a esta otra flecha aquí, y se puede ver que todas las macetas están anidadas debajo del elemento de estante de macetas ahí dentro de ella. Y eso tiene sentido porque todos están en el estante de la olla. Y, por supuesto, medida que nos desplazamos hacia arriba, confinamos eso mientras termina el mostrador y hay una cosa nueva llamada el gabinete. El Gabinete está compuesto por estantes. Hay un par de estantes, y luego las estanterías contienen cosas como platos. Entonces esto tiene sentido perfecto. Tienes que ir al Gabinete y abrirlo y luego sus estantes. Miras dentro de la cabina que encuentras varios estantes hasta encontrar el estante que tiene lo que buscas en ella. Y luego dentro de ese estante, puedes confinar tus platos y cuencos y las cosas que realmente estás buscando Ahora, claro, todo esto está dentro de la cocina, que también está indicado en nuestro pequeño ejemplo de código falso. La cocina está en la parte superior. Y luego si nos desplazamos hasta el fondo, aquí está la etiqueta de la cocina de cierre. Por lo que todo entre esta flecha apuntando hacia arriba y esta era apuntando hacia abajo está dentro de la cocina. Otra forma en que el programa es hablar de ello es esto un padre y este es un niño o este aliado. Tiene un antepasado que es la UL. Y este ul tiene un descendiente que es el aliado. Y tenemos algo similar pasando aquí con el aliado y la etiqueta de ancla. El tag de anclaje está en realidad dentro del elemento de la lista. No es el siguiente después de que no podemos poner cerca a Ally porque queremos rodear el ancla . Por lo que la etiqueta de anclaje, el elemento de anclaje, es hijo del elemento aliado, que es hijo de la UL. Entonces está bien, contesta estos ojos. Estás viendo este video ahora mismo. Este l yo aquí mismo que estoy destacando. ¿ Cuál es su relación con esto? ¿ Tú? Bueno, dilo. Es un niño. Este es un hijo de esto. Ahora, ¿cuál es esta relación de aliados con este aliado? Si dijiste niño, en realidad no tienes razón, pero estás pensando en ello lo cual es bueno, en realidad son hermanos, y ese es el término técnico real. Estos hermanos del aire, todos son Niños de este ul. Entonces todos son hermanos el uno del otro. Y aquí hay otra pregunta. Este A. ¿Qué dirías? Es relación es con este aliado. No es hermano porque no son ambos Hijos del mismo padre. Tú. Esto no es que en realidad no tenemos un nombre técnico para ello, pero es algo así como Tío escribir. Esto es Este es el hijo de este aliado y este es un hermano. Entonces tu hermano de padres es tu tío o tía. En realidad no hay un término técnico para eso. Pero lo importante es que no pienses que este ancla sea un sit chistes. ¿ No crees que este ancla es un hermano de este aliado o descendiente de este aliado ? Este ancla es sólo descendiente de este aliado. Ahora, ¿qué es esto Anchors? Esta ancla, um, relación con este elemento en lista de órdenes. No un padre de familia, porque es un paso arriba. Es un gran padre, o el término técnico más general es sólo antepasado bueno. Entonces ojalá esto no sea demasiado confuso para ti. Si apenas estás empezando con HTML 21. Estructura de documentos HTML: ahora. Otra cosa a la que llegamos es que hemos definido mucho con esta página para guardar y simplemente refrescar. Aquí hemos definido mucha información. Ahora, ya ves, cuando yo cuando hice ese cambio, porque puse la UL y simplemente saltó esto un poco y se separó como una lista de A otra. Entonces ahora en realidad sabrá que está en lista de pedidos, pero en realidad no hemos indicado que todo esto sea un documento HTML. Eso es algo que realmente necesitamos hacer. Y hay un elemento para ello llamado HTML que indica que la página se está escribiendo en código HTML. Por lo que tenemos que poner siempre esto en nuestros documentos HTML, látigos y ello. Eso lo llenó para mí, lo cual es un poco útil y tipo de no. Entonces todo el asunto, todo es html. De acuerdo, cada pedacito de esto es HTML. Por lo que la primera línea de todos tus documentos HTML debe ser siempre html. De acuerdo, hay una salvedad a eso en el futuro, pero la dejaré por ahora. Por lo que sabes, todo es la primera línea será h Timo y se cerrará la última línea. Html. Todo aquí es HTML. Guarda lo que va a pasar cuando no refresque nada. Fue un cambio semántico, y permitió al navegador entender lo que está leyendo Now. Aquí hay otro tema. Este título. Yo quiero meterme en el título de la página aparecer ahora mismo. Dice la U R L. Porque no le di título. Pero, ¿cómo lo consigo arriba? Porque esto está en la página. Simplemente lo pone aquí abajo en la página. Entonces lo que necesito es como una forma de dar algo, como, meta información sobre la página. En realidad no quiero poner este título en el cuerpo principal como de la página. Yo quiero ponerlo como arriba, arriba aquí, como en necesito, como, tener como, una sección la información especial de Gibbs sobre la página. Pero en realidad no es parte del cuerpo del documento todavía, Así que como estás pensando en esto, si eres realmente, realmente inteligente, probablemente estés imaginando cuál es el nombre de esa etiqueta. Probablemente te estás imaginando algo así como que hay una etiqueta llamada documento que pones alrededor todo el documento. Documento abierto, documento cerrado. Y luego tienes otra etiqueta a la que llamarías algo así como, si te estás inventando esto, ¿a qué se te ocurriría? A lo mejor te estás imaginando que se llama algo así como meta. Si tuviste algún pensamiento en esa línea, eres absolutamente brillante. Si no lo hiciste, está bien. Podrías seguir siendo brillante, pero no sabrías cuáles son los nombres reales de los elementos. Pero si adivinaste eso, eso es bastante bueno. Entonces, ¿qué? El nombre real los elementos son No es documento y meta. De lo que se trata es indicar que este es el cuerpo documentario. El nombre del elemento es cuerpo y pones este elemento cuerpo Se pone este comando body tag, cut command paste o control control pegar alrededor de todo el cuerpo del documento. Entonces no va No lo pongas detrás de este HTML porque el cuerpo yo soy el cuerpo del documento es parte de la ciudad derecha HTML. Y además no sería que no encajara juntos, ¿verdad? Debido a que este elemento corporal comienza después de esto, necesitan ser anidados por dentro. Este cuerpo es hijo de esta etiqueta HTML. Entonces esto ahora le dice a la computadora que todo esto desde el final de la etiqueta body hasta el inicio de la etiqueta close body es el cuerpo del documento. Ahora lo guardamos y aún no hace un cambio del todo porque en realidad hay Syntex Air esto esta fuera del cuerpo. Um, ahí está el segundo elemento que ponemos o segunda etiqueta y llamamos a esta cabeza. Esta es información de cabeza. Es como la información de encabezado que va, no en realidad no está en el documento. Es como arriba, como como escondido. Es Aquí es donde pones toda la información en la página que está oculta que se relaciona con toda la página. De acuerdo, entonces es como como en una persona la cabeza contiene todo el conocimiento y todo. Este es el conocimiento que aplica a toda la página. Ahora bien, si guardamos esto y nos refrescamos, sigue sin funcionar, ¿por qué no funciona? Porque tenemos que indicar qué tipo de información de cabeza es ésta ahora. La forma correcta de hacerlo es con si vamos a darle un título, y por cierto, siempre se puede hacer esto y ver para qué está disponible el html. Hice la llave de Zanahoria abierta y me detuve. Y ahora este cambio en ello porque es una sintaxis destacando y es un editor HTML. Me ha dado algunas sugerencias que son un poco apropiadas a este rubro. Entonces, ¿cuál es? Yo quería que fuera el título. Ahí está. Es como, en realidad haga clic en eso y ahora se siente derecho para mí. Necesito terminar de escribir al cierre y luego dejar de título Now. Ahora funcionará la página. Ahora va a funcionar. Guarda esto para que desaparezca y vigile aquí cuando refresque ahí la página de ISS Brendan. Entonces ahora si has estado siguiendo esto y arreglando tus páginas, vas, Está bien. Si no lo conseguiste todo antes de tiempo, no fue como una prueba. Pero si lo tienes, si lo tienes ahora consigue tu página para hacer todas estas cosas. Ya completaste el proyecto. Esto es Este es un paso enorme, monumental. Te has ido de alguien que no sabía qué era HTML. Cómo guardar una página Web, cómo hacer una página Web a alguien que esté escribiendo HTML y creando una página Web en Internet. Esta es una página realmente Web en todos los sentidos, y como HTML está encendido. Está en dominio. Se está sirviendo a través de Internet. Disponible públicamente a través de http, Está recubierto su semántica. Eres creador de Web, y si solo dejaras de tomar el curso ahora, tendrías los conocimientos fundacionales que te pondrían 10 pasos por encima de la mayoría de las personas que ya no conocen nada de esto. 22. Consejos y secretos de HTML: cuando escribimos código, es muy importante mantener las cosas organizadas. Este es un sitio realmente sencillo hasta ahora, y ya está empezando a parecer complicado. Entonces lo que solemos hacer cuando tenemos cosas que están anidadas, como aquí, por ejemplo, tenemos un tú bien, en un aliado, solemos en deuda los elementos hijos. Ahora estoy en la dentadura al golpear el botón de tabulación una pestaña por nido o por capa de profundidad. Ya lo es. Otro truco es que no solemos endeudarnos este tipo de cosas. Entonces esto es, como dentro de la línea ah. Entonces si volvieras a mirar nuestra página, la u L Cuando la agregamos, algo así como hizo un salto de línea aquí en un salto de línea que lo hizo como un bloque su propio bloque. Entonces, um, normalmente lo haremos en deuda esos. Pero este elemento de lista y el ancla están como en esta misma línea, y no solemos en Dent eso así que no iría. Yo no haría esto típicamente, aunque podrías si realmente estuvieras confundido y necesitabas que fuera claro. Y he hecho esto a veces. Entonces esta es una forma de hacerlo. Y si realmente quisieras ponerte excesivo, podrías incluso en deuda y hacer esto y saber cómo la idea saber cómo el tener este editor de texto me está ayudando por tipo de ayudar a donde van mis indentaciones cuando golpeo retorno. Entonces si quisieras, podrías inventar así sólo para dejar muy claro que el proyecto La abuela está dentro de esta etiqueta de ira que está dentro de este ítem de lista que está dentro de este un bloque de lista ni lo hizo. Pero eso es un poco redundante. Por lo general es más fácil poner artículos que son como en la misma línea todos en la misma línea, igual manera aquí arriba. No trataríamos de poner esto en una nueva línea y sangró porque esto es como que rompe el flujo de la sentencia. Esto es un cambio en la nube, Así que voy a volver atrás y deshacer eso porque es algo así como una cosa en línea. No obstante, este párrafo lo bloquea sobre, como, su propio cuadrito. Entonces vamos a dejar eso y voy a inventar esto y esto. Por lo que notarás que si, como pasamos por un en dental de esto y limpiamos cualquier espacio en blanco que a veces quieras inventar un montón de cosas. Entonces quiero abollar todo lo que hay dentro de este cuerpo desde aquí hasta aquí. Entonces puedo ir de uno a la vez o hay un par de trucos que puedes usar, así que solo podría resaltar todo lo que quiero. En deuda es larga, hay múltiples líneas y hit tab, y hace todas ellas por ti. Tap, tap, tap. Seguirá haciéndolo ahora ¿Qué pasa si quieres llevarlos todos de vuelta al sangrar, puedes usar una combinación de caracteres especial llamada shift tab. Ahora bien, esto no es universal. Algunos buenos editores de texto tendrán algunos de estos atajos, y otros no. Entonces tienes que familiarizarte con el editor de texto que estás usando. Pero la mayoría de los avanzados tienen tab cuando tienes múltiples líneas seleccionadas para en deuda todas ellas, y luego toe unindented hit shift, sosténgalo y luego escribe tab toe un en deuda, y así solo mantienes turno, y cuando estás sosteniendo la pestaña de golpe cambiante, retrocede una sangría cuando no estás sosteniendo, cambiando golpeas a Tab, va hacia adelante. Entonces voy a seguir limpiando todo esto. HTM en cuerpo son ambos dentro de los elementos HTML. Perdón, quise decir H Conocí Cuerpo y cuerpo y cabeza están ambos dentro del elemento HTML. Entonces ahora nuestro texto es un poco más limpio y más fácil de ver. Puede parecer más confuso para ti ahora, pero cuando llegues a una página grande y confusa muy llena , va a poder. Va a ser útil para ti poder obtener un poco de rumbo de lo anidado que tan profundo es algo mirando la sangría ahora. También trae a la luz algunos temas como, por ejemplo, este texto aquí mismo. línea 13 es en realidad un hijo directo del elemento corporal. No está anidado bajo otra cosa. Ahora eso es una especie de señal de advertencia, porque lo que eso significa es que el único significado semántico que tiene este texto es que es html en el cuerpo del documento. Por lo que en realidad no tiene un significado semántico más allá de eso. Es una página Web. Es parte de una página Web, así que normalmente eso es una indicación de que algo está mal. Y lo que realmente necesitamos hacer es darle a esto una etiqueta de párrafo a su alrededor, porque es un párrafo. Whoops. Yo, uh, doble tipo eso, y me ayudó ahí fuera. De acuerdo, así que esto es, uh, uh, un párrafo a nivel de bloque. Esta esposa la puso en su propia nueva línea. Y ahora tal vez sepan que soy un poco como ser inconsistente en mi sangría. Con estos párrafos. He creado una nueva línea y sangrada. Y con éste, sólo lo pongo directamente aquí. Um, eso no es malo ser inconsistente, pero en su mayor parte, probablemente sea bueno si intentas consistencia, sobre todo cuando estás empezando, hasta que desarrolles ciertos hábitos que ayudan usted en su recubrimiento. Entonces ahora si guardo esto y refresco, en realidad no verás cambios porque todo lo que he hecho es cambiar la forma en que lo formateé para que lo vea, no la forma en que lo formateé para que nadie más lo vea. No está cambiando el formato html, y sí cambié la semántica de este párrafo, pero en realidad no cambió la forma en que se veía. Entonces aquí está la fuente de la página aquí mismo esto es Este es el código que está detrás de esto. Ahora bien, no lo sé ¿Qué pasa si quiero mirar el código de esta página sin tener todo este turno en él abierto en encontrar el archivo? ¿ Y si solo quiero comprobar realmente rápido cómo se ve esto? Está bien. Al igual que por ejemplo, quiero ir a Sam Gold. Página de AEA. Perdón. Si estoy pronunciando mal tu nombre y quiero ver cómo hizo esto, no puedo iniciar sesión en su cuenta. No tengo su cuenta. No dio su contraseña fuera. Ojalá no lo hiciera. Pero lo que puedo dio es que realmente puedo conseguir en el código de su trasero. Podría conseguir la fuente de cómo se construyó esto. Y la forma en que lo haces es desde el navegador va a hacer esto un poco más grande? O en realidad, lo que voy a hacer es simplemente arrastrarlo a este lado de la pantalla porque lo que voy a mostrarles es en este pequeño menú. Ahora, cada sistema operativo y cada navegador tiene un lugar diferente que tienes el elemento de menú , pero en chrome entras aquí y luego vas a herramientas. Y se puede ver este artículo. Este elemento del menú justo aquí, ver fuente. Y el atajo para eso es el comando de opción. Tú en casi todas las computadoras windows. El atajo para ello es controlarte. Entonces si estás en Windows, ni siquiera intentes encontrar el ícono del menú. Simplemente siempre escribe control te para hacer esto para encontrar fuente de vista en un montón de otras computadoras necesitarán ir ver y encontrar fuente y cromo en Mac. No es así, pero así que ve a herramientas y ve fuente. De acuerdo, así que déjame abrir esto de nuevo. ¿ Viste lo que hacía ahí y abriste una nueva pestaña? Entonces esta es la página en la que estaba. Esta era la página de Sam y que abrió esta pestaña con la fuente. ¿ Ves eso? Dice ver fuente aquí, y tiene el mismo tú Earl o la misma ubicación. Y muestra la fuente real. Tienes números de línea y puedo ver los elementos que usó para que pueda ver lo enorme la etiqueta I cual es bueno , , porque si utilizaras la etiqueta e m, eso significaría semánticamente que esta frases enteras enfatizó, lo cual sería un poco raro. No obstante, no es realmente un Esto no es realmente una, um, um, una palabra extranjera o un término especial, por lo que todavía no es del todo semánticamente correcto. Entonces, um, en el futuro usaremos CSS, y lo que haremos es usaremos una etiqueta semánticamente correcta y luego tú CSS para hacerla cursiva para que se vea como él quiere sin ser semánticamente incorrecto. Pero te enseñaré a hacer eso más tarde. Por lo que también podemos ver cosas como él ha puesto saltos de línea aquí uno antes y uno después de esta parte en cursiva que no aparece por lo que podemos ver muchas de estas cosas solo para que cualquiera vea en cualquier sitio web. Por lo que puedes hacer esto en cualquier sitio web, acudir a cualquier sitio web que quieras y consultar la fuente. Vayamos a compartir habilidades y revisemos la fuente. Tengo un atajo aquí mismo. Está bien. Para mí, es control. Lo siento. Es comando de opción. A ti encontraron ventanas, su control. You Ok, asi que habilidad share dot com estoy durante la fuente. Aquí está la fuente. Echa un vistazo. Esto se puede ver en cualquier página, y se puede mirar a través y se puede averiguar, averiguar, su mayor parte cómo hicieron las cosas. Esta es en realidad una de las herramientas de aprendizaje más grandes que tienes es el comando view source . Basta con seguir adelante y ver la fuente de cualquier página. Cuando tienes curiosidad por cómo hicieron algo. ¿ Cómo consiguieron esta imagen de participación de habilidad? Ahí puedes ver la fuente, y como esta es una página muy complicada, hay mucho código por recorrer, pero eventualmente podrás encontrarlo. Ahora soy capaz de encontrar un poco más rápido porque sí. No he hecho esto para ganarme la vida, así que te puedo decir en este momento este es el código para esta imagen aquí mismo. Eso lo veo enseguida. Ahora, te tomaré un tiempo para llegar a ese punto, pero llegarás al final porque podrás leer todas estas pequeñas cosas extra tendrán sentido al igual que Parson. Entonces estás en la parte donde estás como aprender letras individuales y estás pensando, ¿Cómo puede alguien leer todas esas letras de forma individual y formar palabras para después leer esas palabras juntas? Tan rápido que pueden leerlo tan rápido como hablan. Recuerdo pensar que cuando estaba aprendiendo a leer, estaba averiguando sólo las letras de una a la vez. Esa es una K que decía I. Y entonces aquí está alguien que sabe leer. Just group está leyendo oraciones enteras casi tan pronto como lo ven. Entonces aquí es donde estás ahora mismo es una letra a la vez. Pero vas a tomarlo muy rápido. Ya que he destacado esto para ustedes, podemos ver. Mira esta imagen es slash logo bash, limb dot PNG y en realidad puedo dar click en ella en algunos hermanos. La mayoría de los hermanos, si tienes un navegador más nuevo, te permitirán hacer click en ti. RL's dentro del, um, dentro de la página y entiende el contexto. Pero voy a dar click derecho sobre él y hacer nueva pestaña y ya veremos que esta es la imagen. Es la misma imagen que estaba ahí mismo. Para que puedas conseguir mucho hecho. Esto es muy poderoso y no aquí. No pusieron el completo u R l. Entonces, ¿cómo hicieron eso? Esta diagonal hacia adelante al principio de donde debería estar la U. R L indica que es relativa. Es un camino relativo que comienza justo al final del dominio justo ahí. Entonces si alguna vez ves esto, o si alguna vez pones un enlace que no tiene el dominio completo, solo su relativo a los dos, empezando por la barra entonces así es Así funciona. Hablaremos de ello más tarde, pero hay como un montón de cosas que, como estás mirando a través, te vas a encontrar toneladas de diferentes cosas cool que quieres aprender a dio y ver la fuente es te va a mostrar cómo hacerlo. Hay un par de cosas que siempre se necesita escribir cuando se crea una página Web, um, um, siempre se necesita escribir cabeza y cuerpo HTML, por lo que siempre tiene ocho correos electrónicos con mensaje de cabeza y cuerpo dentro de ella. Además, siempre querrás un título, y hay algunas otras cosas. Entonces lo que llamamos cuando tienes ah, montón de código repetitivo que siempre se requiere y no quieres seguir escribiéndolo, así que te gusta crearlo y en un lugar donde puedes copiar y pegar bien o copiar y pegar el archivos, a eso lo llamamos “calderilla”. Es como una pequeña plantilla que utilizas para recolectar para empezar, como, cómo vas a construir tu página. Entonces si siempre tienes este h email, cabeza, cuerpo, etcétera cosas cuando estás haciendo tu página, tal vez quieras, como, seguir adelante y hacer eso Y quizás incluso quieras hacer algo así como si sois títulos, siempre empiezas con cierta frase y luego añades un poco más después. Incluya eso en su calderilla también. Y luego cuando empieces con tu boilerplate, no tendrás que hacer esa cosa redundante, repetitiva. Ya tendrás un buen comienzo listo para ti. Ahora, este cambio en él en realidad tiene una especie de un pequeño caldercito incorporado. Te dije que no hicieras esto antes porque quería mostrártelo ahora. Pero si vas a la nueva pestaña y si haces clic en una pestaña nueva aquí, es lo mismo. Voy a cerrar que conoces una nueva pestaña y creas usando uno de estos pequeños chicos va a arrastrar esto de nuevo porque podemos mirarlo ahora si creas una de estas páginas y ni siquiera te preocupes por todas estas cosas, no vamos a conseguir en eso en absoluto. Pero te meterás en HTML CSS y JavaScript. Y si te interesa, tal vez incluso PHP pero creó la página html y mira lo que surge. Hay un poquito de calderilla que hace todas estas cosas por ti. Recuerda cómo teníamos que escribir html cerrar cabeza html cerrar título de cabeza, título cerrado, cuerpo, cuerpo cerrado. E incluso pone un espacio entre las etiquetas del cuerpo para que puedas empezar a escribir el cuerpo del documento , el contenido de tu página. Y si no tuviste título, te da el título. Sin título. Ahora hay un par de cosas especiales aquí. Te está dando un meta personaje dicho Esta es una etiqueta muy especial que va en la cabeza que le dice al navegador qué juego de caracteres estás usando la mayor parte del tiempo ahora UTF es el mejor conjunto de caracteres para usar. Este programa sabe que está usando el juego de ocho caracteres UTF, así que no te preocupes por esto. Sólo deja esto en paz. Recuerda en conferencia anterior cuando te mostré cómo guardar en texto plano. Pudiste haber visto que había opción para cambiar el juego de caracteres y dije: Sólo déjalo. Eso es porque si lo habías cambiado y después lo has guardado sin restablecerlo al juego de caracteres correcto , obtendrás cosas raras como si tuvieras un montón de signos de interrogación o bloques o cosas si el juego de caracteres no es correcto, así que solo deja esto solo la mayor parte del tiempo. You TF a es lo que será su conjunto de personajes. La otra cosa que es nueva en este pequeño boilerplate que no te mostré es ésta. ¿ Recuerdas esa pequeña salvedad cuando dije que HTML es siempre la primera línea de un documento? No fue realmente una salvedad. Fue sólo una mentira recta. El primer renglón de cada documento es en realidad el tipo doc. El tipo doc es una forma especial de definir en qué tipo de 80 Mel estás codificando. En realidad hay múltiples versiones de HTML. Bueno, solía haber. Hoy en día, nos hemos dado cuenta de que tener varias versiones de tipo HTML causa problemas, y sí causó muchos problemas en el pasado. Ahí hay html tres. Ahí hay html cuatro y 4.1. Ahí estaban los estándares transitorios y las versiones no estándar. Agregamos una versión de HTML que comenzó a ser Kolok realmente conocido como sopa de etiqueta. Html porque no tenía un tipo doc y no seguía la sintaxis correctamente. No siguió los estándares. Y así fueron solo etiquetas, algo así como tirar juntos en una sopa, y el navegador tuvo que averiguar qué hacer con ella y, su mayor parte, browses. Somos bastante buenos para averiguarlo. Entonces así es como solían verse los viejos tipos de doc. Solía ser que tendrías que hacer todo esto. Tenías desafiando tu elemento raíz. Y luego están todas estas otras, como pequeñas partes de ella. Entonces veamos un ejemplo. Aquí está el tipo de doc para X html. Un vistazo a lo ridículamente largo que es. Ni siquiera cabe en la página. Incluye cosas como un enlace a las especificaciones, el lenguaje. Aquí tienes html cuatro, apenas nieve de vejez regular. 4.1 Mira este lío y hay múltiples tipos de versión de edad a antes esto es estándares . Se trata de un transitorio, que es un poco más flojo. Podrías ver la palabra suelta. Y luego hay otra versión para si estabas usando marcos. Um, así que todos estos diferentes tipos de doc. Qué lío. Ya no hacemos eso. H, Lo que hemos hecho ahora es que lo hemos simplificado, y básicamente es solo un HTML. Solo estás usando HTML. No es del todo lo mismo que la sopa Tags, porque tu navegador sabrá que están siguiendo estándares. Pero es similar en el sentido de que no vamos a seguir tratando de, como especificar exactamente a qué versión de HTML estaban cubriendo y en el navegador lo renderizará de manera diferente, dependiendo de si realmente se olvida quién en h pequeño 4.1 transitorio. Tienes que hacer esto muy específico en un HTML cuatro puntos. 01 estricto. Tienes que hacer esto. Y así ahora toda mi página se rompió porque me desvié un poco. Ya no va a hacer eso. Esto es Esto no es nuevo en html cinco, y esto es interesante. Este es en realidad el tipo HTML cinco doc, Pero no, no tiene un cinco ahí. Es porque ya no estamos haciendo versiones. Es solo Esto es solo HTML. A partir de ahora, es un nivel de vida. Siempre ponga esto en la parte superior de su página y sepa que es más sencillo ahora que ha sido alguna vez. 23. CSS y en un sitio de: ha llegado el momento de hablar de CSS. CSS es esa tercera capa que tercera cáscara de realzar hombres añadió funcionalidad que pasa al núcleo del contenido. Entonces en el núcleo mismo, solo tienes claro tu contenido lo que estás comunicando, el siguiente shell alrededor de eso es HTML, que proporciona el significado y la estructura para el documento. Y luego encima de eso está el CSS, que proporciona este estilo, el look y el tacto. Entonces el CSS se engancha en los diferentes elementos que has puesto ahí con HTML. Por lo que HTML y CSS. Su relación era algo así como la relación entre un tipo nerdy que es sólo toda funcionalidad. Siempre es como hablar de cosas realmente nerdy y discutir semántica y preocupado por detalles de como técnicamente significan las cosas. Utiliza palabras como, técnicamente, mucho, mucho, y CSS es como esta mujer de moda a la que siempre le preocupa el estilo y los colores y la forma en que se ven las cosas de porquería y la forma en que se sienten las cosas. Y así estas dos personas por su propia clase de, ah, no funcionan el tipo realmente nerdy, funcional HTML por su cuenta, su lugar se ve horrible. Es sólo todo material funcional. No tiene nada que se vea bien. No hay decoración, hay nada en la pared. Es solo puro lo que sea necesario para hacer las cosas. No sabe vestirse. Se viste. Pero dice, vestirse es sólo para gustarte mantenerte caliente técnicamente tiene sólo una mentalidad puramente funcional. El significado de la ropa es mantenerte caliente. Ahora entra CSS y sin HTML ella es toda pelusa. Es Es solo que es solo estilo y no hay contenido real. Es solo todo esto, como colores y mejoras y Y cuando se juntan, sin embargo, hacen de esta cosa poderosa porque tienen función y estilo. Tienen el lado presentacional de la misma y tienen el lado significativo de ella. Y cuando tú cuando realzas la reunión con una mirada y sensación, obtienes esta hermosa combinación que simplemente realmente funciona. Tienes el poder detrás del estilo y tienes la apariencia y el buen aspecto CSS detrás del HTML. Y juntos hacen esto como un dúo dinámico increíble. Entonces es importante que aprendiste CSS justo al principio, ¿ verdad? Ya que todavía estás aprendiendo HTML. Por lo que probablemente en este punto no tengas mucho HTML técnicamente, pero eso está bien. Tienes que empezar a aprender CSS porque vas a estar tentado a intentar que las cosas se vean bien usando HTML. Y eso no va a funcionar. Eso es como confiar en el sentido de la moda de los chicos nerdy. Hace cosas como usa camisas marrones con cinturón marrón pantalones marrones y zapatos marrones todos igual Marrón, porque piensa que coincide. Pero CSS entra y tiene sentido de la moda y sentido del color, y hace que se vea mejor. Por lo tanto, no intentes peinar con HTML. Es como si fuera como vestirse nerdy. Uh, sí, quieres vestirte bien, Quieres vestir tu página web con CSS, Usa su sentido de la moda. En eso es en lo que es buena. Pero usar HTML está bien, no abandones el olor de la edad. Usa html comprensión de lo que las cosas realmente significan técnicamente, su nerdy comprensión técnica de las cosas porque es lo que va a hacer que tu sitio web accesible a un montón de personas diferentes con diferentes tipos de discapacidades, diferentes tipos de navegadores, diferentes tipos de computadoras e incluso no personas, computadoras que están rastreando Internet, tratando de obtener información sobre su sitio web. Va a hacer que tu sitio web se conecte a diferentes partes de Internet, a Google para, uh, la Web semántica y todo eso 24. Syntax de CSS 1: Propiedades y valores: Sigamos adelante y escribamos algo de CSS. Entonces hablamos de atributos en la última sesión, por lo que tiene sentido que CSS sea un atributo de un diferente de un determinado elemento. Entonces di que vuelves a tu página y tienes tu encabezado tu índice dot html de tu tarea y le diste un encabezamiento. Esperemos que en h un encabezado de primer nivel, y quieres que se vea un poco mejor que solo el estilo de formato HTML llano viejo que se puso ahí. Entonces lo que vas a hacer es que vamos a añadir un atributo. Ahora, esto es un poco complicado porque vas a agregar un atributo. En primer lugar, para decirle que esto es CSS lo estás haciendo. El nombre del atributo es estilo. Ahora recuerdas cómo escribes un atributo? Se entra en el h un elemento y después del nombre del elemento después del nombre de la etiqueta. Entonces después de la h uno, pones un espacio y ahí es donde escribes los atributos, nombre y luego es igual y en el valor del atributo. Entonces el nombre real es estilo porque este es estilo. El real que estaban agregando es CSS y el nombre para el para la dirección es estilo. De acuerdo, Así que el estilo es igual y luego poner cotizaciones. Y aquí dentro, ahí es donde vamos a poner nuestro CSS. Pero aquí está el trabajo. Es realmente complicado porque estamos como duplicar lo del par de nombre valor. De acuerdo, entonces eres como, tienes múltiples capas aquí. Tienes el que tienes el nombre del elemento. Tienes el nombre de los atributos, y luego tienes los nombres de atributos CSS que tienes. Tienes el nombre de la propiedad CSS. Esto es en realidad lo que llamamos porque hay apoyos diferentes que no queremos sólo tener . Al igual, ¿qué ibas a poner aquí? ¿ En qué estás pensando? CSS Reino Unido. Entonces tienes estilo igual y pones tu CSS si qué vas a poner 10 pixeles Si quieres que el tamaño de la fuente sea de 10 pixeles? ¿ Cómo sabe que quieres que sea talla y no la altura o el ancho? Um, también tienes que especificar dentro de estos atributos un par de valor de nombre del CSS en el que estás trabajando. Entonces te daré un par de cosas que puedes hacer. Entonces, antes que nada, hagámoslo de un tamaño diferente. Entonces vas a poner, um, vamos a hacer del tamaño de fuente B 12 píxeles. Lo vamos a hacer pequeño solo para ver que puedes hacer pequeños encabezamientos si quieres. Ahora no se puede poner sólo 12 píxeles, obviamente. Entonces lo que pones es fuente dash size colon 12 p. X. X. Así que míralo. Mira esto. Esto se está volviendo confuso, ¿verdad? Pero tienes un par de valor de nombre dentro del CSS, y no podemos usar igual de nuevo porque entonces sería estilo igual a fuente. Tamaño igual que habría demasiados iguales en el navegador. No sabría cuáles van a dónde. Entonces en lugar de signo desigual, usamos un colon tan luchado tamaño dash. Ahora solo usas esa pequeña tecla menos guión, solo la que está correcta en tu teclado. Al lado de la clave más. Es la misma clave es la clave subyacente. Si viejo turno y así fuente Dash tamaño colon 12 p x, el PX de las unidades. Y siempre que tengas algo que sea un número, siempre tienes que tener las unidades. Entonces si haces esto, guárdalo, te refrescarás y verás que el tamaño pensado ha bajado. Ahora sigamos adelante y cambiemos el color. Añadamos otra propiedad y otra propiedad CSS en nuestro H un elemento en nuestra H una etiqueta en los atributos de estilo de nuestra H one tag. OK, así que no te preocupes demasiado por la sintaxis en la semántica de lo que estoy diciendo. No importa si sabes cuando digo estilo, atributo y un elemento y etiquetar todo esto no importa si sigues exactamente todo lo que estoy diciendo. Lo importante es que cuando lo veas presentado así, entiendes que se trata de un 18 atributos HTML, y aquí es donde pones todo tu CSS y que esta es la propiedad y este es un valor . No tienes que saber los nombres de estas cosas. Usaré los nombres, los nombres técnicos, pero sólo hay que saber usarlo. Sólo tienes que estar seguro de que no lo pones. Intenta poner un signo igual aquí o ah, colon aquí solo tienes que conocer la sintaxis 25. Syntax de CSS 2: múltiples declaraciones: Entonces para cambiar el color, tenemos que poner en otros atributos CSS y tenemos que ponerlo justo después de esa otra propiedad CSS que ponemos. Entonces tenemos el tamaño de fuente Ahora vamos a poner dentro de esos mismos atributos dentro de ese estilo . En realidad, dentro de esas cotizaciones, también tenemos que poner el color. De acuerdo, entonces todo esto está dentro del mismo HTML, en realidad. Todo dentro del mismo estilo. Por lo que el estilo es igual tanto a tamaño de fuente como a color. Entonces ambos van entre estas cotizaciones, acuerdo? Y necesitamos una forma de distinguir la propiedad CSS de la otra, el tamaño de fuente del color y la forma en que vamos a hacer eso. Está bien. Ah, coma tendría sentido, pero no vamos a usar Comma Commons son una forma común de separar cosas diferentes como esta, ¿ verdad? Vamos a usar un punto y coma. Lo siento. No sé exactamente por qué eligieron usar un semi colon. Um, en muchos lenguajes de programación usa un semi colon para algo así como terminar una declaración que te gustaría terminar como una frase semi coma funcionan. A diferencia de los periodos en mucha programación, el mundo es como en javascript Siempre que tengas como una declaración, pones un punto y coma al final así. Por lo que poner un punto punto y coma después de este 12 p x punto y coma. Um, Matt dice que ese es el final de esta propiedad CSS. Y entonces el navegador sabe algo después de eso es uno nuevo. Así que adelante y poner color colon K recuerde, no es igual y luego se puede poner un color. Ahora hay muchas formas de poner colores, y hay diferentes valores, por lo que puedes usar códigos hex. Se pueden utilizar valores RGB donde se pueden utilizar códigos de color HTML. Ahora será más fácil para este ejemplo simplemente usar el código de color HTML. No sé cuántos hay tal vez como, 60 o más nombres puedes escribir como verde, rojo, rojo, azul, muchos de los comunes e incluso cosas como Schar twos. Um, así que adelante y poner verde. Vamos a cambiarlo a G R E. verde Y porque está deletreado así, no necesitamos poner una unidad. Así que adelante y pon eso y luego ponernos cerrando de nuevo el punto y coma. A pesar de que esto es no nos va a gustar separarnos no necesitamos. Técnicamente no lo necesitamos para separar entre. Al igual que no pondrías una coma al final, ¿ verdad? Pero solo tiene sentido poner siempre este punto y coma de cierre después de cada propiedad, para que si alguna vez mezclas cosas alrededor cambie el orden, no te jodas y es solo una buena práctica. Es una especie de técnicamente correcto. Así que adelante y pon ese semi de cierre Now. Ahora guarda y refresca, y verás que se han aplicado las propiedades. Por lo que atributos y propiedades Propiedades CSS la propiedad, um, es el nombre real del del estilo que se está aplicando ahora y a usted podría llamarlo un atributo para todo lo que ya usa la palabra atributo para describir atributos HTML. Entonces es por eso que este vocabulario es algo así como que se estrellaron entre sí. Entonces recuerda, los atributos son atributos que van en el HTML, y las propiedades están todas bien CSS, y es que no se confunden estos porque cuando estás en los contactos CSS, nunca se tiene esta sintaxis de signo igual. Cuando estás en la sintaxis html seuin, siempre tienes el signo igual y no tienes este colon o punto y coma ahí 26. Sintesis de CSS 3: selector: acabas de escribir algo de CSS. Aquí se puede enloquecer, pero nos encontramos con un problema. Y vamos a arreglar esto con el director llamado D R Y. No te repitas. Entonces el principio de seco dice que no debes repetirte si es posible. Entonces digamos que tienes múltiples párrafos y quieres poner un poco de estilo en cada uno de esos párrafos. Aunque quisiera, todos los párrafos tienen el mismo estilo. El modo en que tendrías que hacer esto es que tienes que poner en cada elemento P el estilo es igual, y luego las propiedades CSS, y luego copiar eso pega, pega , pega en cada uno. Entonces si quieres hacer un cambio más adelante, tienes que entrar y encontrar cada uno manualmente. Sustitúyala, cámbiala, reemplázala de una a la vez. Entonces esto es por eso que tenemos este principio, d r I. Porque hace muy difícil modificar cualquier cosa y actualizar cualquier cosa, y simplemente dificulta hacerlo la primera vez solo para configurarlo la primera vez. Por lo que CSS tiene su poderosa habilidad toe realmente crear el CSS en un solo lugar y hacer que se aplique a toda la página y no solo indiscriminadamente a toda la página, sino solo a las partes de la página que querías. Esto es realmente genial. Entonces la forma de hacer esto es que en realidad vamos a dejar de jugar con atributos HTML . Vamos a subir a la parte superior de la página en el encabezado así que dentro de eso Así que tienes html y luego encabezado dentro del encabezado antes de la etiqueta body dentro del ataque de cabecera dentro de ahí, vamos a crear un elemento llamado estilo. De acuerdo, entonces va a tener el estilo de zanahoria abierta cuidado de cerca en esa etiqueta de estilo. Y luego la etiqueta de estilo de cierre. Así que estilo, estilo cercano. Y luego dentro se iban a escribir c asistido se aplicará a toda la página por lo que le da sentido a su en la cabeza. Está bien, entonces, um, adelante y a la derecha. Algunos CSS que queremos aplicar a todos los párrafos. Entonces tendrás, Di, Di, haz algo como esto. Dale margen Di, Colón. 10 p. x Esto dará un poco de margen alrededor de todos tus párrafos. Un margen de 10 píxeles. Ahora, los márgenes y el relleno son un poco similares. Y un poco diferente, pero hablaremos de eso más adelante. Entonces le vamos a dar un margen de 10 píxeles. Adelante y haz eso. Ahora bien, ¿cómo se aplica esto a toda la página? Pero sólo los párrafos. ¿ Cómo lo hacemos? Bueno, vamos a escribir un corchecito alrededor del principio y alrededor del final para separar esto de otras cosas. Y luego antes de eso, vamos a escribir el selector. Ahora el selector es la forma en que seleccionamos la parte de la página a la que queremos apuntar. Entonces si solo queremos seleccionar todos los elementos P, todos los párrafos, usamos el selector que apunta sólo a todos esos. Y hay una manera de apuntar a un momento HTML usando el nombre de la etiqueta y CSS. Por lo que pones el nombre de la etiqueta HTML del elemento que quieres seleccionar, y los seleccionará todos. Así que pon P p rizado y luego tu propiedad y valor de propiedad, y luego cierra ese corsé rizado. Y así ahora sabe que todo entre estos dos tirantes rizados, ese es el estilo que se va a aplicar, y luego el selector, apuntará a todos los elementos P, para que puedas Onley. Obviamente solo puedes poner los nombres de los elementos HTML aquí y puedes Onley poner elementos html que realmente aparecen en tu documento. Entonces si no tienes ninguna etiqueta P, esta P no va a hacer nada. No va a aplicar esto Este patrones me refiero a este margen a nada. Pero si lo haces, apuntará sólo a esos elementos p. Entonces si sigues adelante y guardas esto y refrescas tu navegador, deberías ver un poco de cambio en tus párrafos, cómo son como se presentan. 27. Sintesis de CSS 4: clases: Si has estado codificando como vamos, eso es genial. Si no, no te preocupes. Pero empieza ahora mismo. Código a lo largo para nuestro proyecto en sesión. Lo que vamos a hacer es que vamos a limpiar un poco nuestro código. Por lo que ahora mismo nuestro CSS está en dos lugares. Está en el elemento de estilo html tag element en el encabezado, y está en los atributos de estilo atributos HTML en el H one element. OK, entonces necesitamos limpiar esto y ponerlo todo en un solo lugar. Y generalmente es mala práctica usar realmente el estilo. Atributos, Um, porque viola d r. ¿Por qué no te repites? Entonces vamos a secar un poco nuestra página. Y pongamos estas dos reglas la regla sobre los párrafos y la regla sobre el primer nivel encabezando hacia arriba en nuestro elemento de estilo en nuestra etiqueta de estilo. Lo que quiero que hagas es copiar solo el CSS del atributo style. Eso está en la etiqueta H one. Entonces recuerda que el nombre del atributo es estilo. Después hay un signo igual, y luego entre comillas, tienes el valor del atributo, así que copia todo el valor de los atributos, sin incluir las comillas, solo el valor. Por lo que lo primero será F para el estilo de fuente. El último será ese punto y coma final. Así que copia todo eso y luego sube a tu elemento de estilo arriba en el encabezado y encuentra el que te la regla que escribiste sobre los párrafos y abajo pone un par de hit enter un par de veces y pon el CSS que acabas de copiar justo ahí debajo de ella. Entonces ahora tendrás la regla de párrafo que selecciona los párrafos y luego las llaves para los selectores, más bien para las propiedades de esa regla y luego debajo de eso, tendrás estas propiedades CSS aleatorias que no están dirigidas en cualquier lugar. Entonces quiero ver si puedes averiguar cómo hacer que apunte a este este CSS CSC aleatorio en el que solo lo pegas, Ve si puedes averiguar por tu cuenta cómo hacerlo blanco. Sólo ese h un elemento. OK, así que pausa ahora y prueba eso. Y no te preocupes si no lo entendiste, pero déjame explicarte cómo hacerlo. De lo que vas a dio es usar ese p Eso estaba arriba para párrafos como modelo, y vas a escribir otro selector sólo para ese H uno. Entonces lo que escribes es H uno que selecciona H uno elementos o H uno elementos fiscales y etiquetas Yo uso indistintamente. Seleccionas el H con eso, y luego pones las llaves alrededor de todas las reglas que van a usar ese selector. Entonces tienes toda la regla. Y luego dentro de esa regla, los componentes son el selector, y luego las propiedades y y los valores de propiedad y las propiedades están dentro de esta tornapunta rizada . Entonces, adelante. Y si no lo conseguiste del todo bien, arregla tu código y guárdalo y refresca y ve qué tienes. Entonces ahora tenemos dos reglas. Una regla sobre etiquetas de párrafo o elementos de párrafo, y una regla sobre el H un elemento por lo que podríamos encontrarnos con un problema aquí, particularmente si quieres darle estilo a tu H un elemento dedo del pie mirar de cierta manera solo cuando está en la parte superior de tu página, pero querías dedo del pie. También quieres usar encabezados de primer nivel en otras partes de tu página, pero no quieres que tengan el mismo aspecto que ese top. Entonces ahora mismo, así como el selector P selecciona todos los elementos P, si pones en una iglesia una más baja en tu página y no cambias esta regla, vas a conseguir que todos tengan el mismo aspecto. Entonces, ¿cómo apuntamos solo al que queremos arriba? Sólo ese top one. Entonces el método que utilizamos es que tenemos que asignar una clase. Ya lo estoy. Perdón si este vocabulario se está saliendo de control confuso. Pero si lo piensas, como que tiene sentido que tengamos dos clases de H uno elementos. Tenemos el nivel superior que queremos lucir de una manera y luego tenemos una segunda clase de todas estas otras clases o tipo o categoría. Por lo que tenemos dos categorías dos clases de H uno elementos y la forma en que necesitamos usar CSS . Usar HTML para decirle a CSS La distinción entre estas categorías es asignando una clase HTML tiene otros atributos nombrados La clase atribuye el nombre de lo real su clase y el valor es cualquier clase que le demos. Por lo que en realidad deberíamos agregar estos atributos de clase a ese primer H un elemento. Entonces ve a tu H un elemento. Y por cierto, eliminar el estilo es igual a atributos que ya no necesitamos. Entonces, solo sigue adelante y borra eso. Y en cambio, vamos a escribir un atributo en la clase H un elemento igual y luego poner comillas y luego dentro de esas cotizaciones, iban a conformar un nombre de clase. Puedes conformar cualquier nombre de clase que quieras. Podríamos llamar a esto top para primero porque es el top o el primer rumbo. Y entonces el resto de los H, si los escribimos más tarde, van a estar en una clase diferente. Así que adelante y dale el top de clase, por ejemplo. T o p. Dentro de las cotizaciones. Ahora, lo que vamos a hacer es subir, y vamos a especificar que sólo queremos que los h one elementos que tienen este dedo del pie de clase alta tengan la codificación que ponemos. Entonces encontramos que esa regla desplácese hasta su elemento de estilo y encontramos esa regla que escribimos para la H. Y ahora cómo vamos a modificar esto para que en arrendamiento elija. Solo apunta a los H que tienen el top de clase. Entonces vamos a ir en este selector porque estamos cambiando a lo que selecciona, lo que apunta. Y no podemos justo arriba porque con nuestra sintaxis, si solo escribes una palabra aquí, pensará que es un momento HTML, ¿ verdad? Por lo que necesitamos una manera de distinguir que Esto no es sólo un elemento HTML no está buscando top. Está buscando una clase llamada top en la forma en que lo hacemos. Esto es con un punto o un punto, así que pones un punto y luego la palabra top. Por lo que no hay espacio entre el periodo y el nombre de la clase para poner punto y en el nombre de la clase en este caso top. Y eso le dirá al navegador que estamos buscando algo que tenga un nombre de clase de top, y en realidad podemos adjuntarlo al H one element también. Entonces, por ahora, simplifiquemos las cosas para comer el H un elemento. Te mostraré cómo conectarlos más tarde, pero ahora mismo, justo punto derecho t O P. En lugar de donde estaba el H por lo que no hay espacio entre el punto y el nombre de la clase. Ahora, si guardas esto y lo refrescas, no verás un cambio porque la clase tiene está en el mismo elemento que solía ser la segmentación estaba apuntando a los mismos elementos exactos apuntando al mismo lugar. Está seleccionando el mismo lugar, pero lo está seleccionando de una manera diferente. En lugar de seleccionar en usar el nombre del elemento o el nombre de la etiqueta, es seleccionarlo usando el nombre de la clase. Entonces ahora, sin embargo, si queremos escribir otros H uno elementos más bajos en la página, no serán dirigidos por este selector a menos que se lo demos. Esta clase está bien, así que adelante y escribe un par de los elementos H one. Si tienes curiosidad por esto y verás que al escribir estos otros y guardar y luego refrescar tu navegador, se ven diferentes. No tienen ese mismo CSS aplicado a ellos 28. Introducción al DOM: Quiero enseñarte una estrategia usando una herramienta realmente genial que probablemente ya esté incorporada en tu navegador. Por lo que se llama la herramienta Inspeccionar navegador, y lo que hace es que te permite ver el origen de la página de una manera realmente particularmente útil. Entonces en la última lección, aprendimos sobre cómo ver la fuente. Por lo que la mayoría de las computadoras con Windows, te controla. Podría ser algo así como opción de comando tú Si estás en un Mac o si eres como en Internet Explorer o en algún otro navegador, es posible que tengas que entrar en el menú de vista y encontrar tiendas. Entonces, adelante y hazlo de nuevo. Ahora unos pocos son capaces. Ahora lo que verás está en tu página. Ves que el código que se muestra en la fuente es casi idéntico al código que está en tu editor de texto, cual tiene sentido porque te está mostrando la fuente. Y por supuesto, se puede ver la fuente de cualquier página en Internet. Um, pero en realidad no es lo más útil porque, sobre todo en páginas más grandes, se sale de control muy rápidamente. Es difícil desplazarse por todas estas cosas y encontrar exactamente lo que buscas. Entonces hay una mejor manera. Y esto también es particularmente útil para escribir CSS porque te permite, um, hacer cambios sobre la marcha al código, solo cambios temporales que quieran. No puedes salvarlos, pero te mostraré cómo hacerlo. El navegador inspect Tool tiene diferentes nombres en diferentes navegadores. Um, muchos navegadores lo llamarán el Dom Inspector el perro y la razón por la que lo llamamos así es porque en realidad está mirando al dom. Ahora. ¿ Qué es el perro? No. Um so Dom Suena miedo, pero no da miedo. No te asustes Don. Oye, Don Sands para documento modelo de objeto. No te preocupes por ello. No te preocupes por recordar lo que representa, pero lo que es es básicamente el código fuente. ¿ Recuerdas cómo en la última sesión vimos la fuente y somos capaces de mirar el código fuente , todo el HTML y todas esas cosas que había ahí dentro? El dom también es la fuente podría, pero no es exactamente el código fuente. El código fuente es sólo el código fuente. El código como lo has escrito. El dom es la comprensión de las computadoras de ese código fuente. Es como un mapa mental teórico del código fuente que el navegador tiene en su mente. Entonces es como si mi esposa me escribiera una lista de compras, um, y en realidad podría escribir como instrucciones. Haz esto, esto, este y este orden. Y, um, leeré esa lista. Pero mientras estoy caminando por la tienda, puede que en realidad no solo siempre esté leyendo esta lista. Ah, palabra por palabra. A medida que voy, como que he construido una lista mental en mi cabeza. Entonces esa lista mental es Debería ser Si yo si no estoy siendo tonta, si no estoy olvidando cosas, debería ser. mismo es lo que está en la lista física real. Pero la lista mental es como abstracta y teórica y hecha, así que tipo de tal vez la organizo un poco diferente. No tal vez no lo piense exactamente de la misma manera que está escrita la lista , y tal vez incluso hago algunos cambios menores, como si hubiera un error ortográfico o si ella hizo algo raro en la lista. A mí me gustaría arreglarlo para que tenga sentido en mi cerebro. Y los navegadores hacen cosa muy similar con el código. En realidad, leen el código, y luego lo analizan. Cuando cuando un navegador lee, el código se llama análisis, por lo que analizan el código, y luego crean este dom, este entendimiento mental que esa es la estructura de la página. No siempre es exactamente lo mismo que el código fuente que escribiste. Por ejemplo, quita el espacio en blanco si pones espacios y golpeas, ingresa hit return. El navegador en realidad no necesita ese espacio en blanco para entender cómo, como, construir la página. Entonces eso no es parte del Dom. Y si tú, por ejemplo, tienes mala sintaxis y cometes algunos errores en tu código, y si es capaz de corregir eso si es capaz de averiguar lo que querías decir, um digamos, por ejemplo, tú, um, escribes un elemento de elemento de lista y pones la etiqueta de inicio y luego la lista, pero luego no pones la etiqueta de elemento de lista de cierre y luego comienzas un nuevo elemento de lista, así que el navegador ahora es lo suficientemente inteligente como para decir, OK, las listas son siempre una tras otra. No hay otros elementos que se interpongan entre ellos. Y así si veo otra lista Adam empezando, entonces voy a asumir que este último terminó Así que el navegador lo hará en su dom pondrá esa etiqueta de ítem de lista de cierre en su dom para ti. Entonces vamos a llegar a buscar en la mente del navegador con el inspector Dom. En realidad vamos a ver este código como se analizó en este árbol. Entonces normalmente lo que vemos es la versión renderizada de ese código. Pero ahora vamos a ver el código fuente real como está en la mente del navegador. Por lo que aquí te presentamos videos de THIEVE para cómo conseguir que el navegador inspeccione la herramienta configurada y ejecutándose para el navegador que estás usando 29. Inspecto de Chrome DOM: chrome es quizás el navegador más simple para usar la herramienta de inspector del navegador. A la derecha, haga clic y vaya a inspeccionar Elemento. Esto trae a la altura la herramienta inspects con tu árbol dom a la izquierda y tus celdas a la derecha por defecto. Y puedes,por supuesto, por supuesto, escoger tus diferentes opciones aquí y luego a lo largo de la parte superior. Aquí están las cosas que se meterán un poco más adelante en el curso. Ahora, si quieres desprender esto en su propia ventana separada, usa eso y luego para bajarlo y volver a colocarlo en el dolor ahí abajo. Usas eso, y luego si quieres cerrarlo por completo, puedes usar este botón aquí. 30. Inspecto y Firebug de Firefox y de Firefox: en Firefox para llegar a tu Dom, Inspector, puedes seguir adelante y hacer click derecho y bajar para inspeccionar elemento. Ahora, esto traerá arriba esta pequeña ubicación del dom miga de pan en la parte inferior y hay que hacer un poco más para conseguir el dom completo inspect. Por lo que este pequeño ícono aquí mismo traerá el árbol dom completo, que luego podrás desplazarte. Y al hacer clic en los diferentes elementos, ves, ya ves,resalta las diferentes partes de la página. Ahora, si quieres ver el CSS, baja al estilo y haz click en esto, y eso te mostrará los diferentes estilos para los diferentes elementos. Entonces digamos, quería ver el estilo de este rubro aquí. Puedo hacer click derecho, ir inspeccionar elemento, y ves que me ha dado los estilos para esto. Este elemento aquí mismo. Ahora puedes hacer clic en este pequeño ícono, y luego te permitirá ver el elemento dinámicamente ya que solo pasas el mouse sobre la cosa en la página en lugar de tener que hacer clic derecho de forma individual. Entonces esa es una pequeña característica genial. Y entonces también se puede hacer este alto esto y y ocultar esto. Puedes hacer esta vista de tres D y esto te mostrará como que tus páginas construyeron y estratificaron. Por lo que esto muestra los diferentes elementos aire tipo de apilados, y puedes hacerte una idea de cómo tus páginas Bill, puedes ver mis enlaces. Se ponen, um, un poco Ahí, ahí, un elemento adicional dentro del elemento párrafo. Entonces eso es un pequeño futuro fresco. Entonces este es un Firefox Dom Inspector predeterminado, y no puedes sacarlo a su propia ventana por lo que puedo decir. Um, pero puedes cerrarlo con esto, pero puedes. Quizás quieras conseguir firebug para Firefox. Firebug es una especie de ah, uno de los originales, um, inspectores Dom. Era un anuncio en originalmente, Así que ve a conseguir firebug dot com e instálalo. En realidad puedes instalarlo para muchos navegadores diferentes, pero fue originalmente para Firefox es por eso que se llama firebug. Entonces haga clic en eso y pase por todo el proceso de instalación. Me toma agregar en stop Mozilla dot org, que es el lugar más confiable para que Firefox agregue. Entonces definitivamente quieres venir aquí a descargarlo? Podrías simplemente ir directo a agregar en Detener Mozilla, morir o ir y hacer una búsqueda de firebug si quieres acortar el proceso. Por lo que ahora firebug ha sido instalado. Puedo cerrar estas ventanas. Y ahora si hago click derecho aquí, verás inspeccionar elementos Así que esto podría ser confuso si tienes instalado firebug. Este es el inspector predeterminado de Firefox y este elemento inspeccionar con firebug. Este es el Firebug Inspect, Inspector. Entonces si haces clic en eso, se ve un poco diferente Ahora esto se verá más parecido al cromo. Esto es similar a la delincuencia. Tienes aquí el inspector Dom y el ah CSS aquí a la derecha, y puedes escoger las diferentes opciones dentro de tu CSS y el Dom. El árbol tonto es plegable. Todo eso Y entonces aquí está la misma opción donde puedes especie de resaltar Si quieres sacarlo a su propia ventana, puedes usar este ícono up que lo abrirá en su ventana y luego para traerlo de vuelta, puedes usar el botón arriba el botón abajo. Algo así minimiza. Y entonces este botón X lo cierra por completo. Entonces volveremos a subir más rápido si usas la minimización en lugar de la X Creo que es la diferencia ahí. Entonces otra vez, no te pongas Ah, no te confundas. Puedes desactivarlo. Um, si tú si estuvieras en confundirte. Pero no se confundan por la diferencia entre esta Inspect. Ese es el Firefox. Inspeccionar y luego inspeccionar con firebug. Este es el firebug. Inspeccionar. Entonces, um, como que recomiendo usar firebug. De verdad me gusta. El predeterminado Firefox uno no está tan mal. Si puedes acostumbrarte a este diseño. Um, es un poco diferente a lo que uso en cromo. Y es que es diferente a lo que estoy acostumbrado de firebug. Entonces sugiero firebug otra vez. A las chicas les dan firebug dot com 31. Inspecto de Internet Explorer DOM: puedes usar un navegador en espectral en Internet Explorer, aunque no lo recomiendo. Empezando en yo siete y subiendo hasta nueve. Se trata de Internet Explorer nueve. Puedes hacer un F 12 para obtener el navegador y espectral para que no puedas hacer clic derecho y encontrar el menú de elementos inspeccionar. Pero lo que haces es golpear F 12. Um, y verás que esto en realidad es muy útil para probar Internet Explorer. Por lo que no sugiero que desarrolles en Internet Explorer usando esta herramienta inspeccionar, pero sí necesita probar. Y así te sugiero que obtengas la versión más reciente de Internet Explorer 10 cuando salga. Y luego puedes usar esto para cambiar tu modo para que puedas probar para ver si se ve igual en un Explorer ocho o explorar Internet. Siete. Adelante y, um, cambia aquí las ah diferentes versiones, y te dará una imagen muy precisa de lo que renderiza como Internet Explorer ocho. Cómo renderizar en tu unidad, explora siete. Um, pero en términos del Dom gateando, puedes hacer clic en estos, y te va a mostrar, um, el CSS de la derecha Y entonces, si quieres ver cómo se ve en la página, puedes hacer clic en esta flecha, y luego si haces clic en un elemento diferente, se perforará hacia abajo y lo encontrará. No obstante, realmente no se puede editar esto de la misma manera que se puede en otros inspectores Dom. Tienes que agregar nuevos elementos aquí, y tiene un montón de peculiares que te van a meter la cabeza. Por lo que definitivamente deberías familiarizarte un poco con esto porque necesitarás probar un Internet Explorer. Pero en su mayor parte, solo vas a usar esto para que me guste hacer un seguimiento de lo que estás mirando. Por lo que todos estos son muy, muy diferentes de las opciones de inspección estándar en los otros navegadores. Entonces, realidad, esto merece su propio video separado, simplemente entrando en los detalles de todas estas. Pero para esta lección, solo voy a decir, No uses Internet Explorer porque es solo te va a hacer la vida difícil 32. Inspecto de Safari Mac DOM: para Safari en Mac. No puedes entrar directamente al navegador. Inspeccionar herramienta inmediatamente haciendo clic derecho y encontrando el elemento inspeccionar. Um, elemento de menú. En primer lugar, tendrás que ir a las preferencias y pasar a esta última pestaña. Sección aquí avanzada. Por lo que empezará. General Goto avanzó y haz clic en este show Desarrollar menú en Barra de menús. Noto aquí arriba que habilita ese pequeño menú extra. Ahora, una vez que ese menú esté habilitado, tendrás la capacidad de seguir adelante y hacer clic en Mostrar inspector Web y algunas otras cosas geniales aquí. Pero lo que es aún más importante, ahora que has habilitado ese menú, puedes hacer clic derecho y ahí está el elemento de menú Inspeccionar Elemento. Por lo que la Web inspecciona un poco diferente en safari en el centro. Aquí tienes el Dom, y luego a la derecha está donde estará tu CSS. Pero tienes un par de opciones de lo que va a aparecer a la derecha. Estas llaves rizadas significan el CSS, así que adelante y haz clic en eso, porque eso es lo que vas a necesitar la mayor parte del tiempo. Entonces estas llaves y luego mucho de esto son reglas de estilo muy similares, Um, Um, atributos de estilo te mostrarán los atributos HTML. Y luego están estos aires similares a qué? Están en otros navegadores de la izquierda. Aquí, tienes, um, un montón de cosas diferentes pasando en este aire. Las diferentes pestañas que harás clic a través de que en la mayoría de navegadores inspeccionan como en Chrome, por ejemplo están justo a lo largo de la parte superior aquí, Así que esto es un poco diferente. Pero cuando me ves a mí y a cromo haciendo clic para ir a, como la línea de tiempo y todas las demás cositas, aquí es donde están en esta. Y para volver al dom, hay que dar click en esto e ir aquí. Entonces, en su mayor parte, solo escondo este panel. Tienes esta habilidad cool y safari para ocultar este panel izquierdo u ocultar este panel derecho. Si quieres correr, escóndelo y ah, y así eso te da algo de flexibilidad. Ahora bien, si quieres separar esta ventana para que sea su propia ventana flotante libre, puedes hacer clic en ese botón. Si quieres leer docket, click atrás y luego si quieres cerrarlo de nuevo, haz click aquí mismo. 33. Inspecto de Windows de Safari de Windows DOM: safari en Windows es un poco diferente para entrar en el dom, inspeccionar herramienta por defecto. Probablemente estará aquí si hace clic, haga clic y vaya a inspeccionar Elemento. Pero existe la posibilidad de que necesites entrar en preferencias y dar click en esta última pestaña la pestaña avanzada, y comprueba este botón Así que este show show develop menu en la barra de menús puede estar deshabilitado en la tuya como está en Mac por defecto. Entonces no ves nada cambió realmente, pero ahora no consigo esa barra de inspección. Entonces si de verdad quieres ver de qué se trata, puedes mostrar la barra de menús aquí Ahora. Aquí arriba, verás que no hay una herramienta desarrollada. Pero si entro en este engranaje y voy a Preferencias y luego compruebo esto, verás que aparece la barra de menús desarrollada y desaparece cuando está ahí. Después obtienes el elemento inspect, y también puedes usar este material aquí. Así que adelante y consigue el elemento inspect, y luego tienes el árbol dom a la izquierda, el CSS a la derecha, y luego el rastro dom miga de pan justo aquí en la parte inferior y todos estos diferentes elementos aquí arriba . Esto es muy similar a cómo está en cromo. El safari de ventanas es muy similar a las migas. Inspeccionar elemento. Entonces si estás en ventanas, esto es bastante similar a solo usar cromo. Puedes desconectarlo haciendo clic en ese botón, y luego si quieres volver a adjuntarlo, puedes usar este botón aquí y luego para cerrarlo usó este botón aquí arriba. 34. Uso de la herramienta DOM Inspect: generalmente, lo que vas a hacer es encontrar que inspeccionar y en la parte inferior de tu navegador, va a aparecer todo este mágico país de las maravillas del desarrollador web de todas estas cosas. Entonces lo primero que verás es a la izquierda el dom otra vez, justo esta comprensión mental del código fuente. Pero está estructurado perfectamente y algo así como arreglado. Entonces verás a veces que el aire de los elementos se colapsó entre sí, así que hablamos de anidar la última vez. Entonces si tienes un elemento que está dentro de otro elemento que está dentro de otro elemento. El navegador puede mostrar estos se ha derrumbado, por lo que sólo se ve ese elemento superior y los elementos Children. En realidad los elementos descendientes están dentro de ahí, pero no lo puedes ver a menos que hagas clic un poco más pero botón o icono, y luego vas a especie de, como, verlo expandirse. Entonces esta es en realidad una forma muy eficiente de, como, correr a través del código y obtener una idea por ti mismo. Así que adelante y mira el Dom y explora un poco y ve si puedes darle sentido tu página y entenderla. Entonces digamos que quieres cambiar el tamaño de nuestro encabezado porque están encabezando es demasiado pequeño, pero no queremos tener que ir a nuestro código, cambiar el tamaño de la fuente, volver atrás y refrescar, ver y comprobar y ver si es del tamaño que querido. Y luego, si no es del tamaño correcto, vuelve a nuestro código. Vuelva a cambiar el tamaño de la fuente. Conjeturar Check ir a nuestro navegador comprobar para ver. Todavía no es del tamaño correcto, ida y vuelta. Esto podría llevar mucho tiempo. Por lo que una de las cosas geniales de esta herramienta es que te permite modificar tu página dentro del navegador sin afectar el código. Donde estás modificando es el amanecer. Estás modificando los navegadores comprensión mental de esta página. Ahora no podrás guardar estos cambios, pero te ayudará, como jugar un poco con él y verlo como estás jugando con él para conseguir el para conseguir lo que estás buscando. Entonces así en tu en tu dom. Inspector, adelante y traiga el cursor del ratón sobre uno de los elementos, y lo tiene. Hay una distinción entre poner tu cursor sobre el elemento. Nombra el nombre real de la etiqueta y luego los valores y atributos similares que airen dentro de ella. Entonces si lo pones sobre el tributo AK, por ejemplo, no es del todo lo mismo es ponerlo sobre los elementos. Entonces cuando digo ponerlo sobre un elemento para ponerlo sobre ataque, me refiero al nombre de la etiqueta. Y si lo haces a medida que lo mueves sobre diferentes elementos, verás que está resaltado en el navegador de la página. Se puede ver en realidad mostrándote qué elemento se está resaltando. Te dará los contornos de la misma, y te mostrará los márgenes y el relleno en diferentes colores. Ahora esto es diferente en diferentes navegadores, pero a menudo el margen es morado y el relleno es amarillo y el tamaño de eso hacia atrás. En fin, te acostumbrarás a entender esto en el futuro, pero te mostraré la altura. El ancho te mostrará dónde está, Y si haces click en eso, vuelve a dar click en el nombre del Elemento. No haga clic en como el actuado. Haga clic en el nombre del elemento el nombre de la etiqueta y luego en ese dolor derecho. Lo que verás es el CSS que le aplica, por lo que esto, en páginas complicadas, será muy grande. Tienes que desplazarte mucho, pero en una página más simple, es un poco más simple. Entonces de nuevo en diferentes navegadores, hay diferentes formas en que muestran esto. Pero una de las pequeñas ventanas que tienen es, um, las reglas CSS que se están aplicando a ese elemento. Eso en la parte superior, verás a veces una regla vacía para ti dedo mete cosas nuevas, y luego verás normalmente categorizada desde el chile más específico. Y no te preocupes por lo que eso significa bastante todavía. Hablaremos de ello más tarde, pero básicamente significa las cosas que el aire aplicando eso que son más altas. Prioridad a menor prioridad. Ah, lista de todas las reglas e incluso verás el navegador predeterminado. Reglas CSS para que realmente puedas ver. De verdad, se pueden ver las agallas de todo esto. Se puede ver el CSSD que no escribiste. Es solo parte del navegador. Los impagos lo alcanzaron. Enfriar. Um, ahora da click en tu H un elemento, el para el que escribimos la clase y recuerda dar click en el nombre de la etiqueta para que veas si puedes encontrarlo en esa zona correcta. Deberías poder encontrar esa clase el selector, que contiene la clase y luego toda la regla. Las diferentes propiedades que escribiste, um y dices que quieres cambiar el tamaño doble click en el valor del tamaño peleado y lo verás cambiar de tipo como ser sin editar ble a ser un estado comestible. Ahora esto es un poco complicado porque diferentes navegadores tipo de hacen esto de una manera diferente. Y también a veces cambian la forma en que esto funciona entre versiones de navegadores. Por lo que podría ser un poco diferente en tu sistema. Pero generalmente es DoubleClick dentro del con dentro del valor de la propiedad para conseguir que entre en su estado herbal de edición. Y si eso no funciona, es posible que tengas que simplemente como, dar click y probar cosas diferentes hasta que lo hagas funcionar para tu inspector Dom. Pero eventualmente, si averiguas cómo gustarte cuál es la técnica para llevarla a este estado acreditable , y luego puedes editarla para que puedas hacer un par de cosas, puedes escribir un nuevo valor y luego verlo bien ahí, cambia justo ante tus ojos. O puedes, si es algo así como un cierto número de píxeles, como unidades numéricas numéricas. Y luego está la unidad. Después, puedes usar la tecla de flecha arriba y abajo, y eso en realidad se desplazará por tipo de, y lo verás actualizando a medida que usas el Cherokee arriba y abajo para aumentar o disminuir el valor por lo que estarás capaz de verlo realmente cambiando de lados y confinaste justo el tamaño que quieras, Ben, puedes. Esto se puede editar. Perdón. Se puede modificar esto la cantidad que sube y baja al usar los Cherokees mediante el turno y, uh, uh, Ault y el control a veces para algo así hacerlo saltos más grandes o saltos más pequeños. Pero adelante y juega un poco con eso hasta que obtienes el tamaño que quieras. Ahora, una vez que lo tengas del tamaño que quieras, recuerda, cuando recargues esta página, vas a perder este cambio porque esto es sólo un cambio al dom. Es sólo la comprensión de la página por parte del navegador. No has cambiado el código, así que tienes que cambiar realmente el código para así lo que haces es, una vez que lo llegues al tamaño que quieres, mira el valor real que así tienes que, por supuesto, saber dónde estás. Te mostraré toda la regla. Te mostraré el selector y luego la propiedad y el valor de la propiedad. Entonces con eso en mente, recuerda el valor de la propiedad y luego ve a tu código. Encuentra ese mismo lugar. Encuentra esa misma regla que con el mismo selector en la misma propiedad. Y luego cuando veas el valor, reemplaza el valor antiguo por el nuevo valor solo de memoria. O incluso puedes copiar y pegar ese valor en tu código, guardarlo y luego actualizarlo. Y si no escribiste, tu página no cambiará. Entonces este eres tú usando el dom estás navegando por el punto El dom es como si fuera este árbol de herencia. Es como,ya sabes, ya sabes, esas muñecas rusas donde ponen una dentro de otra, excepto que es mucho más complicado. Nosotros lo llamamos el árbol Te puede gustar, colapsarlo todo el camino hasta la raíz, y solo puedes ver el elemento raíz, y luego puedes empezar desde ahí o puedes hacer clic derecho en la página en el elemento real que quieren ver bien. Da click en el que quieras ver e ir a inspeccionar, y eso te llevará allí en el Dom. Se desplazará a través. Se un colapso y se expandirá y resaltará solo el elemento en el que hiciste clic. Y a veces es un poco confuso porque los elementos están algo frente al otro, y él y en otro, el que hiciste clic no es en el que pensabas que hacía clic pero normalmente te llevan a un lugar muy cercano. Y puedes tipo de, como navegar por el Dom para encontrar el elemento exacto que estás buscando. Se pueden hacer muchos cambios. En realidad puedes codificar totalmente una página entera solo en este Dom Inspector, podrías escribir todo el CSS y todo y luego perderla cuando te refresques. Probablemente no es una buena idea para hacer eso. Hay un montón de características realmente geniales en este Dom explore. En realidad es más que una espora Domine Explorer. Es más que un navegador. Inspector tiene un hoyo maravilla de herramientas 35. Introducción a la Scripting: hasta el momento, una imagen de Internet consiste en un lado del servidor, un lado del cliente y lo que están comunicando de ida y vuelta, que es el contenido que se envuelve inextricablemente con el HTML y el CSS. Entonces entendemos que el contenido es el punto de lo que estamos comunicando, y el HTML es lo que da ese contenido Meeting lo marca para significar una cosa u otra. Hablamos de HTML como sustantivo del lenguaje de los idiomas de Internet, y, ah, el CSS es lo que hace que parezca como queremos que hablemos de CSS son los adjetivos en términos de idiomas de Internet. Entonces cuando quieres hacer cosas interactivas, cuando quieres que tu sitio web haga cosas para responder al usuario de una manera que es más solo seguir Ah, hipervínculo. Lo que necesitas es JavaScript que necesitas mientras necesitas un script de algún tipo. JavaScript es el script del lado del cliente, así que en realidad, puedes tener un script en la nube en Internet en el servidor, Um, y puede hacer un montón de cosas geniales, pero también puedes ejecutar scripts justo en tu en los ordenadores domésticos de tu usuario en sus computadoras , como, como en el sitio web mientras lo están usando sin ninguna comunicación de vuelta al servidor. Entonces el lenguaje que solemos usar para eso es JavaScript y el script Java es muy poderoso por esa razón, porque no requiere esta comunicación constante de ida y vuelta. Si tienes scripts en tu servidor que para que el usuario interactúe con él, tiene que haber esa conexión http, y tienes que decir lo que ha hecho el usuario. Y entonces el guión tiene la oportunidad de responder, y luego tienen que hacer otra conexión http para dar la respuesta del script de ida y vuelta , por lo que no es del todo tan eficiente. Lo que es más eficiente es que si usas la computadora de tu visitante, ellos usan su procesador, el script se ejecuta en su computadora y la memoria de sus computadoras, y puedes hacer muchas cosas. Inter activamente, ahí mismo 36. Variables de Javascript: abre tu página Web y cambia en ella de la manera que hemos estado haciendo. Y ah, inicia sesión y ve a, um, en realidad crea 1/3 página. Entonces crea una nueva página y la llamaremos Script HTML. Y luego, um, querrás probablemente vinculado a ella con todo tu sitio y todo. Entonces yo soy tú puedes hacer eso ahora o volver a él más tarde. Eso deposita ahora mismo si quieres seguir adelante y crear ese script dot archivo html así que te daré la oportunidad de hacer una pausa ahora. De acuerdo, Así que creaste un nuevo guiones vacíos que HTML te mete en la cabeza. Este es el elemento principal. Entonces recuerda, el primer elemento es este tipo de doc, Entonces tienes el HTML y luego tienes cabeza y dentro de la cabeza, tienes un par de cosas, incluido el título eso. Por lo general lo pondré después del título, pondré este tipo de cosas y vamos a escribir un nuevo elemento. Y este html, vamos a escribir se llama guión. Y lo que hace este elemento es que nos da un espacio para escribir nuestro guión, nuestro lenguaje de scripting, que será javascript, así que escribe el guión como C. R I P T. Esa etiqueta l de apertura y luego la etiqueta de cierre . Usé elemento y etiqueta indistintamente y luego puse un poco de espacio entre la apertura y las etiquetas de cierre y dentro ahí, ahí es donde vas a escribir tu guión? Va a ser javascript. No va a ser HTML. Entonces ningún html va entre este script y stop script. Es todo lo que sabe javascript. HTML De acuerdo, así que aquí, el scripting se parece mucho a, um, matemáticas. Si recuerdas volver al álgebra, hay Hay este concepto de una variable. Por lo que tienes algo como X y X puede contener un número. No sabemos qué número puede. El número que contiene varía Vale, así que podrías tener una ecuación simple como una más una es igual a X. Eso es un Ehlinger romper una ecuación de colección, y puedes resolver por X. ¿Llegas a escribir? Um, así que tú de la izquierda, agregarás uno más uno para llegar y luego llegarás a igual a X y ah, y puedes hacer cosas más complicadas donde la variable está en diferentes lugares con múltiples variables. Will scripting también utiliza variables y, ah así que adelante y escribe tu primera variable a. Para empezar, vas a escribir. Tienes que declararlo como una variable usando script Java. El modo de hacerlo es tu Hvar derecho, que significa variable y simplemente siempre hacer todo en minúsculas. A menos que te digan que hagas algo. Mayúscula, um, var espacio VR. Y por cierto, estás escribiendo esto dentro del elemento script entre esas etiquetas de script start y close scripts , derecha, Bar space X. Así que estamos nombrando a esta variable X y luego pones símbolo desigual y luego uno, um así que esto define la variable X y establece igual dedo del pie uno. Ahora podemos usar este s O, por ejemplo, Puedes, um, haciendo alerta. ¿ Alguna vez has visto esos molestos pop ups que hacen ruido en una página Web? Es un poco molesto, pero para las pruebas, funciona bastante bien. Entonces vamos a escribir un comando de script Java para crear una de esas alertas, y luego podemos poner lo que queramos en ese pequeño pop up. Entonces el guión de trabajo para esto es, por cierto, poner esto en una nueva alerta de línea y luego abrir paréntesis cerrar paréntesis, por lo que no hay espacio tras alerta, paréntesis abiertas y cerradas justo después de eso. Ahora retrocede y dentro de esos paréntesis. Correcto, La letra X. Así que este es el mismo nombre es la variable, ¿ verdad? Entonces lo que va a hacer es que va a alertar a esa variable. Por lo que cuando alertes la variable que se creará JavaScript, esto se abrirá. Pero no sólo alerta el nombre de la variable. En realidad alerta cuál es la variable. Entonces, um, guarda esto y te daré la oportunidad de ejecutarlo y ver qué pasa. 37. Strings de Javascript: De acuerdo, Así que esperemos que si lo estás siguiendo Cuando lo guardaste y ejecutaste esta pequeña función javascript cargando la página, tienes un pop up. Ese era sólo el contenido de esa variable. Tan muy sencillo. Ahora, quiero mostrarles algo fresco aquí. Um, en lugar de poner dentro de los paréntesis alrededor de esa X en lugar de simplemente poner el nombre de la variable entre paréntesis, quiero que pongas comillas alrededor de ella. Entonces pon una cotización alrededor de la izquierda y una cita alrededor de la derecha, y ahora lee alerta, abre paréntesis, cita tu nombre de variable, que es X y luego otra cita y luego los paréntesis de cierre. Entonces, ¿qué crees que va a pasar ahora? Ya no estamos alertando el nombre de la variable solo en llanamente en sus propios scripts Java. En texto, las citas hacen algo en JavaScript. Cuando pones citas alrededor de algo, JavaScript ya no lo evalúa como un script, sino que lo evalúa como algo que es tomarse literalmente. Entonces es algo así como si te estoy hablando y estoy describiendo cosas usando palabras. Y entonces de repente uso símbolos de citas alrededor de una palabra en particular. Bueno, mucha gente usará eso para enfatizar una palabra. Pero técnicamente, cuando pones una cita alrededor de una palabra, especialmente cuando escribes las citas alrededor de esa palabra o alrededor de esa frase significan que realmente estás citando algo, es una cita, así que no es ya que lo dices. Pero eres tú. En realidad es algo que se está citando. Entonces es, ya sabes, cuando estás escuchando una frase como esta o leyendo una frase, no entiendes la parte que está entre comillas como parte de la frase. Lo entiendes como un tipo de cosas aparte, y esto es similar con JavaScript. Entonces cuando cuando se encuentre con esta X ahora porque está entre comillas, ya no lo va a ver como una variable. Se va a ver como la letra X entre comillas. Es justo lo que llamamos una cuerda. Lo es. Nosotros lo llamamos una cadena, porque por lo general una cadena consiste en múltiples letras ensartadas juntas. Entonces si fue como X y z, sabes que es como palomitas de maíz. ¿ Alguna vez has hecho esas cadenas de palomitas? ¿ Eras donde pusiste cuerda a través de las palomitas de maíz y tienes una cadena de, um bueno, las palomitas son como letras en cadenas de JavaScript. Y esta cadena de JavaScript es en realidad solo una palomitas de maíz. El letra X. Pero el punto es, es entenderlo como una pequeña cadena de letras, no como algo para leer y entender y analizar como una variable. Entonces pon las cotizaciones a su alrededor y guárdelo y positividad, y te daré la oportunidad de ejecutarlo y ver qué pasa tan positivo. 38. El "que los" de la Condición de Javascript "if": De acuerdo, entonces si estás haciendo esto de la manera correcta, deberías haber conseguido esa alerta ahora. Pero en lugar de alertar al número uno, alertó a la letra X, que es sólo una cadena. Así que adelante y, ah, puedes jugar un poco con esto y poner ahí lo que quieras y puedes escribir una frase. Se puede escribir una novela. En realidad, creo que hay un límite en cuanto puedes caber ahí. Pero si lo pones entre comillas, lo que sea que pongas ahí, simplemente te volverá a cotizar directamente. Pero si no pones citas, entonces el programa JavaScript, cuando esté pasando por esto asumirá que lo que está alertando no es solo algún texto, sino que es JavaScript para ser entendido. Entonces si es variable, alertará el valor de esa variable. Entonces hagamos esto un poco más interactivo. La capacidad más poderosa de JavaScript no es solo tener estas variables, sino la capacidad de probar los valores de estas variables y hacer cosas diferentes, dependiendo de la condición o el estado de esa variable. Entonces, para probar esto, utilizamos este lenguaje lógico de si entonces lo demás. Entonces si esto es cierto, haz esto más. Si esto es cierto, haz esto. Y y la forma en que lo hará en JavaScript suele ser con variables que comparan una variable contra otra o comparando una variable contra una cadena. Entonces, um, sigamos adelante y escribamos esto en nuestro código. Entonces vamos a escribir esto entre donde declaramos esa variable X y dónde ocurre la alerta porque vamos a tener esta alerta de alerta condicionalmente basada en lo que contiene la variable . Entonces después de VAR igual a X, esa línea puso una nueva línea y escribe la palabra si ahora otra vez, vamos a poner paréntesis si y terminó su más simple. Si simplemente no pones un espacio si no hay espacio y luego abren y cierran paréntesis y luego dentro de estos paréntesis, vamos a escribir la condición de prueba. Entonces lo que vamos a probar es correr y probar si X es uno o no. Entonces cuando X sea uno, vamos a alertar una cosa. Y cuando X no es una, vamos a aprender otra cosa. Entonces dedo del pie para probar este derecho, X es igual a uno. Entonces esperarías simplemente escribir X es igual a uno, pero, um, hay que pensar en términos de computadoras. Las computadoras no son muy buenas para tener una cosa significada a cosas diferentes. Por lo que ya estamos usando el signo igual una línea arriba. Para asignar el valor X es igual a uno. Eso es como en matemáticas. Si decimos que X iguale a uno y luego si estamos probando tu inclinación natural va a ser como, digamos, como, digamos, si x un signo igual uno si X es igual a uno. Pero tenemos que tener una diferencia firmada para poner a prueba la igualdad. Entonces usamos para igualar signos y vas a cometer muchos errores si estás escribiendo mucho JavaScript o cualquier código donde accidentalmente vas a poner un signo igual cuando estés probando y asignará XTO uno. Si haces eso, siempre será cierto. Entonces, no importa lo que pongas entre X y el otro lado, si solo pones un signo igual, será cierto porque también lo estás configurando. Cierto. Entonces no hagas eso. Poner a signos iguales y poner X igual a uno. Entonces estamos probando si X es igual o no dedo del pie uno. Ahora puedes poner citas alrededor de esa, pero JavaScript es en realidad muy complicado porque es ableto es capaz de mirar esa. Si no le pones cotizaciones a su alrededor, lo entiende. Como dije antes, es javascript para ser entendido. No es solo una ah, no es solo una cadena, sino que entiende que como número el número uno, um, Y así cuando das una variable cuando la asignas a un número, el motor JavaScript entiende que la variable contiene un número. Ahora la variable también puede contener cadenas. Por lo que notas hasta ahora hemos dado esa variable. Lo hemos hecho igual a uno sin cotizaciones. Entonces porque no tiene cotizaciones, eso es un número. Y así a continuación podemos compararlo con. Si X es igual a uno el número que probará. Prueba de escrúpulos de Java hace X, que ahora contiene el número uno igual al número uno. Y aquí hay algo realmente complicado. Si pones cotizaciones alrededor de la de esta prueba , estará comparando. ¿ X el número uno es igual a la cadena uno. El personaje uno. Es un poco de palomitas en el en la cuerda. guión correcto y del trabajo es bastante inteligente. De hecho va a decir en realidad que estas son lo mismo. El String uno y el número uno son iguales, pero es como si esto no siempre fuera confiable. No se puede confiar en JavaScript, siempre averiguar el tipo de variable que es. Entonces a veces te toparás con cosas donde está evaluando cosas que crees que son iguales. Pero JavaScript no tiene no es lo suficientemente avanzado porque son diferentes tipos de variables . Entonces vamos por el bien del futuro. Pasemos por esto y prestemos atención al tipo de variable que es y tratemos de ser consistentes. Entonces, no pongamos citas alrededor de esa. Tratemos de mantenerlo como un número. El número que hemos establecido es a es una ah, variable es el número. Ahora vamos a probar un número también, así que no pongas cotizaciones a su alrededor. De acuerdo, Entonces si X es igual a uno, ¿qué vamos a hacer? Tenemos que poner lo que pasa si esa condición es cierta y la forma en que hacemos eso así son. No podemos simplemente ah asumir que el resto de la página es como tenemos que decirle a Java script donde parecido es donde lo que hay que hacer, tenemos que darle algunos límites. De lo contrario, sólo va a pensar si es verdad. Como de ahora en adelante para siempre. Siempre voy a hacer esto, pero queremos establecer igual que un cierto número de cosas. Entonces es un poco como en CSS usamos las llaves de nuevo. Entonces justo después de eso, paréntesis de cierre ponen un corsé rizado abierto y luego ponen un par de saltos de línea, ya sabes, golpean, ingresan un par de veces y ponen un corsé rizado de cierre. Ahora, todo entre ese corsé rizado abierto y ese corsé rizado de cierre será lo que vamos a hacer Si X es verdad. Disculpa si X es igual a uno, lo que significa si esa condición se evalúa como verdadera Así JavaScript evaluará la condición, la parte entre paréntesis, y si se evalúa como verdadero, ejecutará que se desempeñará. Hará lo que hay dentro de esos tirantes rizados. Entonces vamos a copiar y pegar la alerta que antes escribimos en esa zona de corsé rizado. Para si X es uno. Y cambiémoslo para decir, hagamos una cadena así que entre comillas, así es. X es uno, y puedes escribir Escribe eso. OK, entonces te voy a dar una oportunidad para ponerte al día y, uh, y hacer esto un video positivo 39. La condición de Javascript "otra": Ahora, si lo refrescas, verás que dependiendo exactamente cómo copiaste, verás que porque X es uno, te dará tu sentencia. Y si eliminaste esa segunda alerta, no verás nada más. Pero si no lo hiciste, también verás esa segunda alerta porque después de que pasó por eso a través de condición, si sigue avanzando por el guión que sigue ejecutando esto el guión y se encontrará con esa siguiente alerta. Por lo que queremos hacer una alerta de que sólo sucede si X no es uno. Entonces la forma de hacerlo es justo después de ese corsé rizado de cierre, vamos a escribir la palabra más. Entonces si esto es cierto, si esto es cierto, haz esto más haz esta otra cosa. Entonces cuando Derecha otra cosa y vamos a abrir otro corsé rizado porque ahora estamos estableciendo la condición de qué hacer Si no es cierto. De lo contrario Abrir, Curly Blake Brace. Poner un par de saltos de línea cerrados. Corsé rizado. Ahora aquí dentro, vamos a poner lo que pasa si X no es verdad. Perdón si X no es uno que evalúa como verdadero. Entonces no verás esto mientras sea verdad. Pero pongamos ahí arriba esa alerta y escribamos X no es una. De acuerdo, entonces ahora solo debes tener que alertar. El que dice X es uno en el en la primera condición y luego el que dice X no es uno en el 2do 1 así que deja posicionarlo y ejecutarlo y luego salir. Continúa cuando hayas hecho eso. De acuerdo, entonces ahora tú, si lo hiciste bien, verás que la alerta dice X es una, y entonces no ves la segunda alerta. No ves la otra alerta porque esa condición no es cierta. Ahora adelante y cambia tu variable en tu JavaScript. En esa primera línea, ponemos var X igual a uno. Cambia ese por cualquier otro número. Puedes cambiarlo a a lo puedes cambiarlo a 100. Podrías poner una palabra. No obstante, si pones una palabra, tiene que estar entre comillas. Tiene que ser una cuerda. De lo contrario, JavaScript pensará que es otro nombre de variable o algo así, y se confundirá. Entonces si vas a poner una palabra, tienes que asegurarte de que ese guión de trabajo sepa que es una cadena. Es como estos personajes ensartados en las palomitas de maíz y en la cuerda. Um, lo contrario, JavaScript va a decir Así que pones la palabra mono. JavaScript va a pensar, Oh, se trata de hablar de la variable nombre mono y va a buscar donde se ha establecido variable llamada mono. Dijiste una variable llamada X. No estableciste una llamada Monkey y también que no hay trabajos, script, funciones o métodos o cosas predefinidas que sean que sean mono. Entonces, como ves cómo está la barra de palabras ahí dentro. No está entre comillas. Eso es algo que utiliza el script Java. Hay si ahí dentro, esa es una palabra, y no está entre comillas. Eso es como una de estas cosas de guión de trabajo. Entonces no está entre comillas. El guión de trabajo va a pensar que solía hacer algo con él, y si en realidad no les ha mandado que puede hacer cualquier cosa con, se va a estrangular para que puedas poner X igual a una palabra que inventas o a una frase. Pero asegúrate de ponerlo entre comillas para que sepa que es una cuerda. Así que adelante y hazlo y corralo y te pondré y te daré la oportunidad de probarlo. Por lo que debiste haber visto la otra alerta. Entonces esto es muy guay. Estás empezando a ver los fundamentos de cómo funciona Javascript. Um, esto es lo básico de la programación. 40. Scripts de Backend: Lo que has hecho hasta ahora hasta esta lección de scripting es el marcado y el estilo. Entonces has hecho HTML, que es lenguaje de marcado. Es un lenguaje de marcado, y has sido CSS, que significa hojas de estilo en cascada. No es realmente importante lo que representa, pero es un lenguaje de estilo, y ahí tienen más en común entre sí que con los lenguajes de scripting. Ahora un guión está en todo otro reino. Está más cerca de gustar, en realidad lo que pensamos cuando hablamos de programación. Por lo que realmente acabas de escribir tu primer guión, y obviamente puedes hacer mucho más con el script Java. Pero esto fue más de la introducción de Justin al scripting del lado del cliente frontal. Por lo que JavaScript es el lenguaje de elección. Por cierto, si vas a estar aprendiendo a hacer desarrollo Web en cuanto a hacer páginas Web, eso suele significar un desarrollador Web front-end. Backend Los desarrolladores web tienden a venir de más de una formación en ciencias de la computación como programación y, como si obtienes un título de programación o un título de ciencias de la computación, los desarrolladores front-end son algo más de lo que probablemente eres interesado en. Así es el frente de desarrollador que las tres cosas clave que quieres aprender nuestro HTML, CSS y JavaScript. No puedes escapar usando estos tres idiomas. Entonces, a partir de ahora, tienes tu introducción a los tres, y a medida que vayas, te toparás con ellos y sabrás cómo usarlos. Y probablemente puedas recogerlo bastante rápido a medida que vayas. Simplemente como que lo averigúas a medida que vas y te haces mucho. Entonces el otro lado del scripting es el back-end o el lado del servidor, por lo que el scripting front end es JavaScript. El reclutamiento de bolsa es mucho más complicado porque tiende a haber ah, muchos idiomas diferentes. De hecho, probablemente puedas enganchar tu servidor, también, para ejecutar casi cualquier idioma que quieras. Y esto se debe a que tienes control completo sobre tu propio servidor, y en realidad no tiene que ser interoperable. En cierto sentido, en el sentido de que todo lo que estés haciendo en tu servidor, el scripting y todo esto que sucede ocurre ocurre solo en tu computadora. Y luego, una vez hecho, el resultado que manda a través de Internet que tiene que ser interoperable pero la programación y elección y como el batido del programa en realidad no tiene que interoperar el Inter . Es solo la comunicación que tiene que romperse Internet para que puedas volver a escribir y guiones en cualquier idioma que quieras, siempre y cuando puedan comunicarse con el método estándar. Al igual que http, Um, pero hay algunos estándares que se acostumbran mucho, y umm estoy en nosotros te presento a PHP. 41. PHP: PHP es de código abierto y gratuito. Y así tiende a acostumbrarse mucho en una gran cantidad de software que es gratuito en Internet y de código abierto en Internet. Entonces, por ejemplo, WordPress usa PHP y PHP es una espalda y lenguaje. Eso es, ya sabes, tiene muchos defectos, pero en cierto sentido es muy fácil empezar con cosas simples. Entonces vamos a escribir sólo un script PHP muy simple en el back end, y luego lo vamos a ejecutar y especie de ver cómo funciona esto. Entonces lo que vamos a hacer en realidad es que vamos a corregir exactamente el mismo código que hicimos en el script Java . Pero lo vamos a escribir en PHP. Entonces para hacer esto, entra de nuevo en tu turno y crea un nuevo archivo. Y aquí está lo diferente es que no vas a crear un archivo HTML esta vez. Vas a crear un archivo llamado script dot PHP. De acuerdo, esto es muy importante que le des la extensión PHP. Ahora, si estás usando shift en ello, hay un poco de um, hay una pequeña opción para crear un archivo PHP para empezar como PHP ya. Así que adelante y haz eso si quieres, o simplemente crearlo y guardarlo tiene punto PHP. Lo importante es que tienes este archivo en tu página web llamado Script Stop PHP. Ahora, dentro de esto, vamos a escribir ese mismo guión. Entonces la forma de crear una variable en PHP no es exactamente la misma porque es un lenguaje diferente , no lo mismo que en JavaScript. El modo de hacerlo en PHP es escribir un signo de dólar y luego el nombre de su variable sin un espacio intermedio. Por lo que en realidad no tenemos que tener esa var declarativa. Simplemente puedes escribir dólar X y eso creará la variable X. Así que adelante y escribir Dólar X es igual a uno. Y entonces, um, en realidad, gran parte del código es el mismo. Por lo que la siguiente línea se puede escribir si X es igual a uno. Ahora, ¿qué tienes que cambiar en eso? Tienes que asegurarte de que PHP sepa que la X es una variable. Y la forma en que haces eso es con ese dólar tan derecho dólar X, Si dólar X es igual a uno y entonces ya sabes, misma sintaxis con los paréntesis y todo. Y luego estás abierto y cierran los tirantes rizados. Yo estoy dentro de su en lugar de escribir alerta. Lo que vamos a hacer es, um PHP no es un script front-end, ¿ verdad? Por lo que no tiene control en el navegador de la misma manera. Pero lo que hará es PHP creará un, um escupirá algún contenido. Entonces, um, lo que vamos a hacer es que vamos a definir qué contenido escupe con esto. Y así básicamente, es como si estuviéramos escribiendo un documento que se va a transmitir a través de Internet. Así que adelante y escribe la palabra echo space, y luego puedes escribir tu cadena. Entonces en lugar de la alerta justo espacio eco y luego entre comillas abrir cerrar, cerrar cotización cerrar cita. Correcto. Tu fuerza. Por lo que X es igual a X es igual a uno. Lo que quieras escribir, um, um, y luego seguir esto en impuestos otra vez. El tirante rizado cerrado lo contrario abre el corsé rizado y luego cambia el de las alertas a eco eco espacio Cotización. Entonces no, no hay paréntesis. Otra vez, ¿verdad? X no es una. Y luego cerrar cotización sin paréntesis en PHP. Y luego la ropa rizada ortopédica. Entonces te voy a dar la oportunidad de ponerte al día y ahorrar eso. Pero antes de que hagas eso, solo quiero hablarte de lo que está a punto de pasar. Por lo que has escrito el guión. Es exactamente lo mismo que el JavaScript de muchas maneras. Pero el JavaScript, cómo funciona el JavaScript es, um, se descarga el archivo del script HTML de Internet. Y dentro de ese archivo, has incrustado el script Java Para que JavaScript en el en el equipo del cliente en el lado del cliente en el en el equipo de tu usuario que trabajos podrían ejecutarse en su computadora y ejecute este código ok y will crear esos pequeños pop ups. Por lo que tienen este código en su computadora que con PHP, su back end y todo de vuelta en Escritura así, es diferente. Entonces en lugar de descargar el script, lo que realmente sucede es que te recompides haces la solicitud para ese documento scripts dot PHP y en lugar de descargarlo como lo hizo con el script study HTML, , en lugar de descargar en lo que hace es ejecutarlo en el servidor sin descargarlo. Entonces lo que pasa es que el script se ejecuta en la computadora de servidores en su memoria en su procesador Up, up en la nube se ejecuta ahí, y luego el script crea un producto. Se ejecuta, y crea un archivo. Crea algo, y eso es lo que manda. Entonces el resultado de su de ejecutar el script lo que se envía es el resultado, no el script, sino el resultado del script. Entonces lo que hace este guión es que tiene esa declaración de eco. Eso es lo que está enviando. Por lo que se podría pensar en ecos, imprimir, eco e imprimir ser una especie de lo mismo. Lo que está haciendo es lo que es. Es crear este pequeño archivo, que es cual, cuyo contenido es todo lo que haces eco ahora. Obviamente, estoy simplificando mucho, pero lo que este guión está haciendo en realidad, eso es todo lo que está haciendo. Entonces cuando guardes esto, quiero que sigas adelante y lo copies, lo guardas y luego lo ejecutas en tu navegador. Ya sabes, tus nombres de dominio, script slash PHP, y quiero que sepas que lo que está pasando es que no estás descargando el script. Estás descargando la salida del script, Ok, Ok, así que adelante y hazlo y ejecútalo. Por lo que espero que esta haya sido una experiencia bastante fluida para ti. Pasas a tu dominio y en lugar de script ese HTML le das el nombre de archivo que tenías aquí. Yo lo nombré guión. PHP. Se puede, si no lo hizo probablemente tiene derecho a ese PHP. Pero adelante y pon ese dominio en eso. Tu Alan. Es decir, y se ve la salida del guión ahora sabe que este no es el guión en sí. Entonces si ves la fuente, um, la fuente es que no ves ningún script aquí. En realidad no se ve la fuente porque no se está descargando la fuente. Simplemente te está mostrando la salida. Entonces esto es Ah, este es el fin del proyecto en clase. Ya has completado tanto un script front end como el back end. Por lo que eres un maestro de guiones front-end y back end y, ah, para el proyecto. Seguiremos adelante y escribiremos algunos guiones con un poco más de interactividad y ah, interactuaremos con el usuario y haremos algo más útil 42. Sistemas de gestión de contenido: en lo que va de este curso, has aprendido todas las habilidades básicas esenciales para el desarrollo Web. Ya has aprendido sobre Internet. Te han introducido html, CSS, CSS, JavaScript e incluso scripting de back-end. Y si hiciste el último proyecto, pudiste trabajar en un widget de correo electrónico que combinaba todas estas habilidades y conocimientos. Andi mostró cómo trabajan juntos para crear, ah, ah, widget que permitiría a la gente enviarte un correo electrónico en todas las diferentes páginas de tu sitio. Por lo que puede que hayas notado que tardó mucho tiempo y esfuerzo en desarrollar cada página individual y tienes dedo del pie. Aunque implementemos el principio de D. R, ¿por qué no te repitas? Todavía hay mucho recubrimiento extra que tienes que hacer para cada página, y solo va a llevar mucho esfuerzo, y probablemente no quieras estar gastando tanto tiempo desarrollando tu sitio web. Quieres estar pasando tanto tiempo desarrollando tu contenido. Como mencionamos al principio, el contenido es lo más importante. De eso se trata todo. Entonces lo que utilizamos es un sistema de gestión de contenidos que tipo de hace todo esto por ti. y en específico. Vamos a ver WordPress. Entonces como has estado yendo, probablemente estés tomando una de dos rutas. Probablemente estés o yendo en profundidad en cada uno de estos conceptos, aprendiendo más sobre HTML, CSS y JavaScript. Probablemente estés haciendo toda la tarea opcional y realmente poniendo mucho esfuerzo en tu proyecto. Poniendo mucho esfuerzo en los proyectos, um, um, o estás tomando la otra ruta donde solo estás tratando de conseguir el mínimo desnudo para que un sitio web se ponga en marcha y en funcionamiento. Y no necesariamente te importa aprender todos estos detalles y aprender a programar y codificar y aprender a meterte en la arena de todo esto. Simplemente quieres poder administrar y ejecutar un sitio web, y no necesariamente tienes tiempo para personalizar las cosas y conseguir realmente en profundidad y en el conocimiento. Por lo que cualquiera de esos caminos está totalmente bien, y WordPress sí. posible que lo pienses como algo que, porque lo gestiona para ti, es algo así como esa segunda ruta que le gusta ruta mínima desnuda más fácil. Pero en realidad no es cierto WordPress se puede hacer lo mismo. Puedes tomar cualquiera de las rutas. Puedes o simplemente conseguir la puesta en marcha y tener tu sitio web en funcionamiento. Y sin mucha pericia o conocimiento o ir en profundidad o aprender codificación. Simplemente empieza a hacerlo, o realmente puedes ir en profundidad y puedes personalizar. Podrás entrar en todos los diferentes aspectos que enchufa temas. Puedes empezar a desarrollar tus propios temas, y puedes hacer que WordPress haga casi cualquier cosa que quieras. De hecho, probablemente haya una gran cantidad de sitios web que has estado usando que ni siquiera te diste cuenta realidad estaban basados en WordPress como núcleo. Y se han personalizado hasta el punto de que ni siquiera son reconocibles como WordPress . Entonces, antes de entrar en la introducción real a WordPress, veamos un poco de cómo todas estas habilidades que estaban usando funcionan juntas en un entorno real donde estás descargando y viendo una página desde Internet, y verá algo de la motivación por qué necesitas un sistema de gestión de contenidos 43. Cómo manipular múltiples peticiones de HTTP: Entonces cuando descargas una página que pones en la URL y que estabas todo dirige al servidor y le dice al servidor que archivó un enviarte y normalmente el proceso va algo así , el servidor te estará enviando en archivo html porque eso es lo que has solicitado. Y el navegador comenzará a leer ese archivo html de arriba a abajo. Se lee todo el asunto, empezando una muy arriba justo de la misma manera que leemos, izquierda a derecha, arriba a abajo. Y a medida que pasa, eventualmente se encontrará con algo como su elemento de enlace CSS, que es una referencia a su archivo CSS externo. Soy así que tu archivo CSS no está en realidad en ese octavo TML. Está separado. Entonces cuando llegue a esa línea en tu documento va a enviar otra solicitud http al servidor y pedir ese archivo CSS. Entonces seguiremos leyendo y encontrará tal vez una referencia JavaScript, y enviará una solicitud http al servidor pidiéndole eso, y seguirá adelante y encontrará todas estas referencias. Es mucho más rápido para el navegador leer a través de toda la página Web de lo que es para que estas solicitudes http pasen. Entonces mientras todo esto está sucediendo, el servidor obtiene estas solicitudes comenzando con que CSS uno encuentra el archivo CSS y luego envía eso por la línea, Entonces también está recibiendo la solicitud para el archivo de script, encuentra ese archivo y lo envía al navegador. Esto se puede ver en acción en su propia página Web utilizando las herramientas de desarrollador. Por ejemplo, en Mac Option Command I four Chrome trae las herramientas de desarrollador, y normalmente tienes estas Dom inspeccionar cosas en la pestaña Elementos. Pero puedes pasar a la pestaña de red, y esto te mostrará información sobre las solicitudes http y todas las demás actividades de red que está pasando. Entonces lo primero que tenemos que hacer es recargar la página para que pueda capturar eso. Acude a tu propia página Web y prueba esto una vez que actualices la lista de cosas que surgen comienza con el archivo HTML principal de tu página. Obviamente, eso es lo primero que se solicita, y se puede ver aquí hay un gráfico de cuándo se hicieron esas solicitudes. Este es un tiempo cero y luego cuánto tiempo tardó el, uh para que el navegador se conectara al servidor para enviar lo que sea que esté enviando en este caso una solicitud http pidiendo el archivo HTML y luego esperando a que el servidor siga adelante y encuentre que htp encuentre la ubicación que está buscando la solicitud http. Y luego, si hay algún scripting en él, por ejemplo, ejecuta ese script y entonces el receptor es la descarga. Entonces en este caso, porque es un archivo HTML y muy pequeño, sólo tardó un milisegundo en bajar. A pesar de que el archivo HTML, sin embargo , tardó ah, 142 milisegundos, todavía una corta cantidad de tiempo, pero un poco más de lo que tardó en descargar para que el servidor encontrara el archivo y comenzara enviándolo para que veas que hay un par incluidos otros archivos en esta página en el archivo HTML, tienes la hoja de estilos, el script Java y luego una imagen. Ahora mira este estilo. Ella y luego JavaScript Vape comenzaron las solicitudes http en Lee después de que el HTML se hizo de ser descargado y cargado. Eso se debe a que el navegador encontró las referencias a ambos de estos y en paralelo comienzan en http. Http. Solicitar pedir al servidor estos dos archivos. Ahora notarás por aquí el estado. Estos números son el código de respuesta http. Por lo que 200 significa que lo consiguió. De acuerdo, 304 es un código de respuesta. Eso significa que el navegador ya lo tiene en el efectivo, y el del servidor no es diferente. Es la misma versión que tienes en los navegadores cash, por lo que no la descarga. Entonces si pasas el cursor sobre, estos verán que si bien hay algún tiempo tal vez para conectarse y esperar al servidor, en realidad no los estará descargando de nuevo porque ya existen. Entonces en este caso, fue a milisegundos para recibir el código de respuesta http y este caso cero milisegundos para recibir el javascript. Código de respuesta Http. Ahora bien, si queremos conseguir una pizarra limpia para ver cómo se vería descargar todo esto la primera vez que visites la página, tienes que mantener el turno cuando golpeas. Refresca, y eso le dirá que consiga nuevas copias de todo. No importa qué. Básicamente es como limpiar el dedo del pie del caché. Mantenga pulsado, cambie y haga clic. Refresca, y verás que tardó un poco más. Los tiempos cambiaron, por lo que aún tardaron unos 350 milisegundos de principio a fin en obtener el archivo HTML. Una vez que me había conseguido el archivo html, consiguió el CSS y JavaScript en paralelo iniciaron ambas solicitudes http Al mismo tiempo, sin embargo, sin embargo, se puede ver que la hoja de estilo era mucho más pequeña. Eran 655 picaduras frente a 90 kilobytes el kilobytes mucho más grande que una mordida. Por lo que la hoja de estilo se descarga en 88 milisegundos, mientras que el JavaScript archivado, descargado en 222 milisegundos. En realidad, el estilo que descargó en un milisegundo mi tardó 88 milisegundos en que el servidor lo enviara . Por lo que mientras estas dos solicitudes http las solicitudes se enviaron en paralelo, los scripts de Java continuaron descargándose por mucho más tiempo. Y luego se puede ver que tardó un tiempo en que la imagen incluso se cargara. Por lo que el navegador no pudo hacer esa solicitud http para la imagen hasta que se aclaró esta línea . Y se puede ver esto. Esta pequeña línea aquí indica cuando el dom está terminado de cargar y esto indica cuando las páginas terminaron de cargarse por completo, y no tienes que preocuparte por esas ahora. Pero esta línea Purple significa que el navegador ha terminado de leer todo el camino a través de la portada HTML para cubrir, y ha analizado y creado su imagen mental de la página. El Dom. Y ahí es cuando empiezas a ver que algunas de estas cosas se cargan. 44. La herramienta de TIMeline de red: Otra gran herramienta en el paquete de herramientas de desarrollador chrome es la línea de tiempo Tap. Ve aquí y enciende este pequeño botón de grabación para comenzar a grabar y luego refresca tu página manteniendo el turno de nuevo si quieres. Ahora esto te dará una idea, y podrás apagar la grabación tras segundo. Esto te dará una idea de cuánto tiempo está tomando muchas de las sub acciones más pequeñas, y te mostrará algunas de las dependencias para que puedas ver la primera solicitud es la solicitud envío para el archivo HTML y que se expande aquí mismo. Hay un montón de cosas diferentes que el navegador hace como va. El siguiente pedido es para el archivo CSS, que activó un par de estas otras cosas recibiendo datos, terminando la carga y luego el script Java, y puedes decir estos aire en paralelo y luego justo aquí. Este es un interesante one re calcular el estilo. Esto muestra cómo el navegador utiliza la información de la hoja de estilo después de cargarla para volver a calcular la forma en que se veía la página. Por lo que esto se llama re dibujo o pintura, y esto es parte de donde eso fo se ve sucede el contenido estilizado del horno flash. Y luego aquí se puede ver dónde se está evaluando el script de script Java real. Voy a desplazarse por aquí mismo. Aquí es donde se evalúa el guión. Entonces el script se carga aquí, y luego en realidad se ejecuta aquí, y se puede ver como su análisis a través de la lectura de cosas diferentes. Por lo que esta herramienta de línea de tiempo es muy poderosa en que te muestra todos los detalles de exactamente lo que está pasando, y puedes colapsar y expandir las diferentes partes. Y a medida que te desplazas hacia abajo, empezarás a ver cosas como la pintura y las capas compuestas. Y esta es una gran manera de depurar si las cosas tardaban mucho tiempo. Pero en general mirando la herramienta de red, se ven las cosas que tienen este un área más grande aquí, mayor tamaño de descarga. Eso es un problema. Y luego cuando ves cosas que dependen de otras cosas, ese es otro problema. Dependencias. Pero en su mayor parte, lo que te va a ayudar es reducir el número de solicitudes http. Entonces eso significa combinar todos tus estilos todos tus javascript en un solo archivo cada uno y reducir el número de imágenes que aún no están cargadas y reducir el tamaño general 45. WordPress en el servidor: mirando a la herramienta de red. Se ven las cosas que tienen este un área más grande aquí, mayor tamaño de descarga. Eso es un problema. Y luego cuando ves cosas que dependen de otras cosas, ese es otro problema. Dependencias. Pero en su mayor parte, lo que te va a ayudar es reducir el número de solicitudes http. Por lo que eso significa combinar todos tus estilos todos tus scripts Java en un solo archivo cada uno y reducir el número de imágenes que aún no están cargadas y reducir el tamaño general. puedas ver que en una situación ideal, lo único que es diferente en cada página es el contenido y luego tal vez un poco de información que va en el encabezado como el título, Um, para que puedas tipo de idealizar una estructura de sitio web donde existe este diseño común. Ellos donde cada página tiene un pie de página de la barra lateral de encabezado compartido, CSS compartido comparten JavaScript, y eso nunca cambia. Y lo único que sí cambia entre páginas es justo ese contenido. Y luego a medida que cambias entre páginas, todo lo que estás obteniendo es el contenido único para esa página. Y, por supuesto, eso es exactamente lo que Wordpress duds. El modo en que funciona Wordpress es un poco diferente a nuestras páginas estáticas. En lo que va de momento. WordPress es un script del lado del servidor, un programa muy complicado que vive en este servidor. Y hace muchas cosas, incluyendo Manager Algunas bases de datos. Las bases de datos son como te puedes imaginar, como si alguna vez has trabajado con Microsoft Excel o una hoja de cálculo. Las bases de datos de software guardan todo el contenido de tu sitio web en estas hojas de cálculo o bases de datos, y luego WordPress es capaz de acceder, por ejemplo, al contenido de ciertas páginas sacadas de la base de datos y luego construir una página que te envía. Entonces lo primero que debes saber sobre WordPress es que en realidad se hace cargo de la U. estructura U. R L de tu sitio para el directorio en el que está. Entonces si WordPress está en el directorio principal, puedes escribir tu dominio dot com y luego cualquier otra cosa. Y no importa lo que escriba, no importa qué carpeta o nombre de archivo escriba. Aunque no exista, se redirigirá a WordPress, y WordPress tendrá el control de ello. Entonces lo que realmente está sucediendo cuando escribes en un U. L. Dos un sitio de WordPress es que estás cargando el script de WordPress cada vez. Es sólo ese mismo script de WordPress, y lo que hace WordPress es ver qué archivos solicitaste, y obtiene esa información de la base de datos, y construye esa salida HTML. Por lo que recuerdas que los guiones en realidad no se descargan. Solo envían la salida para ser descargada. Entonces lo que hace WordPress es que construye el archivo HTML para la página solicitada. Y luego descargas que descargues la salida del script PHP que es WordPress que ha compilado y armado la página HTML basada en la UL que solicitaste. Eso no es todo lo que hace WordPress, sin embargo. Este es un beneficio de mantener tu sitio organizado, pero lo llamamos un sistema de gestión de contenidos porque administra tu contenido y porque facilita la creación de tu contenido. Si vas a crear tu contenido manualmente, tienes que crear todo este marco y estructura para cada página de forma individual. Pero cuando usas un sistema de administración de contenidos, puedes iniciar sesión en ese sistema de administración de contenidos. En realidad se puede iniciar sesión en los scripts en el servidor, y es algo así como cuando estábamos usando shift en él. Estábamos en línea, creando nuestro contenido en línea. Y luego lo guardamos. Nuestra página fue cargada. Esto es un poco diferente en que no estás iniciando sesión en un sitio web que se está conectando a tu sitio web a través de FTP como Shifted. Era tu anhelo directamente en tu servidor directamente en scripts en tu servidor. Y así cuando creas una página en WordPress, realmente la estás creando directamente en tu servidor, y WordPress tomará el contenido de lo que estás escribiendo y lo pondrás en la base de datos, toma el título y cualquier otra información al respecto y lo puso en una base de datos. Y luego cuando eso se solicite más tarde, sacará esa información de la base de datos, construirá el archivo HTML y lo enviará a quien lo solicite. Por lo que lo bueno de la creación de contenido de WordPress es que en realidad puedes crearlo sin trabajar con código directamente. No tienes que enfocarte en desarrollar tu sitio web. Podrás enfocarte en desarrollar tu contenido 46. Copia de tu sitio actual: Por lo que antes de instalar WordPress, es realmente importante que realices una copia de seguridad de tu sitio existente porque hay una gran probabilidad de que lo pierdas. Aunque no pienses que te importa tanto tu sitio, es bonito dedo del pie. Ten una copia de seguridad de ella para que si quieres recordar cómo hiciste algo puedas mirar tus viejas páginas que hiciste y recordar tipo de como es una referencia cómo lo hiciste. Así que adelante y abre tu editor FTP. Tu eres tu cliente FTP. Ahora, esto va a ser archivos L a o pato cibernético o algo así. No intentes usar turno en él. O algún otro editor en línea. Eso es un poco diferente. Entonces voy a usar el pato cibernético. Ya que estoy en un Mac, puedes usar lo que sea. Ahora, ya tengo guardado este marcador. Si no tienes tus marcadores guardados, sigue adelante y recibe ese correo electrónico con la información de tu cuenta y usa eso para crear un marcador . Pero voy a conectarme. Entonces aquí está mi sitio web y puedes ver que estoy en el directorio w w w o, um, podrías tener el directorio html de subrayado público. En realidad son lo mismo. Y esta es toda tu información. Cada archivo y hasta se puede modelar. Incluso puedes ordenarlo por cuando se modificaron por última vez. Por lo que se puede ver tipo de archivos en los que se han estado trabajando recientemente. Y el proceso de copia de seguridad es bastante simple. Adelante y crea una nueva carpeta en tu escritorio y dale un nombre y una fecha. Voy a llamarlo l y b dot com volver arriba, y luego voy a poner la fecha de hoy, y luego resalta cada uno de los artículos. Voy a hacer clic en el turno de retención inferior y luego hacer clic en la parte superior y resaltará todo lo que entre sí. Y sólo lo voy a arrastrar a esa carpeta con ah, con zilla archivada. Es muy similar. Um, simplemente lo arrastras fuera del lado del servidor a la carpeta de tu escritorio, o puedes usar ese panel izquierdo que, uh, que tiene, dependiendo de cómo funcione eso. Para que veas que lo he puesto en mi carpeta aquí, y esa es tu copia de seguridad. Por lo que ahora puedes hacer tienes un par de opciones al instalar WordPress. Si quieres que WordPress sea tu sitio principal. Quizás quieras mover todas estas cosas a un poco nuevas. Voy a hacer clic arriba tu secuencia e en una carpeta nueva. Entonces podrías llamar a esto, um, aprender y luego hacer lo mismo. Haga clic en la retención inferior, mueva, haga clic en la parte superior. Yo estoy ignorando. Ver jibing porque no hay nada en él. Y luego lo necesito y luego lo arrástrelo ahí. Entonces si haces esto, entonces todo tu sitio está ahora en aprendizaje. Y probablemente algunos de tus enlaces y referencias fuente se romperán porque has cambiado la ubicación. Pero se conserva en este subdirectorio, y la forma de llegar a él sería tu dominio dot com forward slash learning, y luego te llevan a tu índice. Pero mira esto. Este enlace, um, funcionará porque hice un enlace relativo. Pero puede que encuentres que algunas de tus cosas se rompen así. Ah, el CSS está roto, así que esto ya no es de estilo correcto porque te voy a mostrar la fuente. Mi CSS busca, um en los estilos de directorio raíz, estilos que CSS pero, um, el directorio raíz. Este es el directorio raíz No hay carpeta Estilos, las carpetas de estilos dentro de esta boulder de aprendizaje. Tu otra opción es, um, es dejar todo en el directorio principal e instalar WordPress en un directorio separado , así que depende de ti. 47. Instalación de WordPress: Sigamos adelante y empecemos a crear nuestra primera instalación de WordPress en sus servidores. Ahora, la forma en que vas a hacer esto es a través del panel de control de tu servidor. Tu servidor tiene instalado algún software que se llama panel C, y es un panel de control que te permite administrar tu dominio de muchas maneras. El panel de control para su sitio web se encuentra en un subdominio de su dominio, por lo que el nombre del subdominio es el panel C para panel de control. Entonces escribe y ve panel dot y luego tu nombre de dominio golpea enter y llegarás a este largo en pantalla. Ahora esta información de inicio de sesión que te está pidiendo es la información de la cuenta de la hoja de grito que te dieron al inicio del curso. Así que adelante y copia tu nombre de usuario y contraseña e inicia sesión. Ahora estás conectado al panel de control para tu servidor, así que ten mucho cuidado cuando estés aquí, porque puedes romper muchas cosas. Pero también puedes hacer algunas cosas realmente geniales, y es bastante fácil de usar. Para ser honesto, te muestra alguna información sobre tu sitio de la izquierda aquí y luego estos aires, todos los ajustes que puedes cambiar cosas que puedes configurar. Incluso puedes configurar copias de seguridad. Se puede. Se pueden crear nuevas cuentas FTP y cambiar contraseñas de clientes de cuentas FTP. Se pueden crear otros nuevos. Um, aquí está pasando mucho. Lo que vamos a hacer en este momento es que vamos a instalar WordPress usando el suave y delicioso instalador APS. Entonces encuentra eso todo el camino en la parte inferior y haz click en WordPress. Ahora, este wordpress instalado te da un montón de información. Pero aquí mismo, solo vamos a seguir adelante y dar click en instalar y tipo de ignorar con resto de esto, así que deja en paz este protocolo. Tienes un par de opciones. Simplemente déjalo en http. No pongas el www. De lo contrario, requerirá www cada vez. Y entonces solo deberías tener un dominio aquí. A medida que amplías tus opciones de hosting, podrías tener múltiples dominios. Ahora, esto es ah aparte. Eso es importante. Este directorio, esto dice dónde estará la instalación de WordPress. Entonces si wordpress va a ser tu sitio web principal, que recomiendo, hago esto en la mía. No pongas nada aquí. Simplemente déjalo en blanco, y estará directamente en tu sitio principal. Entonces si vas a tu dominio dot com, te llevará al sitio de WordPress. No obstante, si quieres que WordPress sea o como una demo o una instalación de prueba, o quieres que seamos nosotros un espía, un sub componente de tu sitio y no lo principal, y quieres que lo principal sea alguna otra cosa puedes escribir cualquier cosa que quieras, como directorio de WordPress. Y lo que esto dio es que va a instalar WordPress en ese directorio, y luego si quieres ir a tu instalación de WordPress, tendrás que ir a tu dominio dot com slash cualquier director que pongas así. Y entonces esto te llevará a WordPress. Y si no pones el directorio de WordPress, entonces esto te llevará a lo que tengas en tu carpeta que hayas subido con FTP o lo que sea. Por lo que tienes opción aquí, dependiendo de si quieres sobrescribir tus cosas viejas. Entonces voy a instalar esto en. Um ah, director especial. Yo lo iba a llamar WP por este ejemplo. Asumo que la mayoría de ustedes, si respaldaron. Probablemente tu contenido solo querrá borrar tu contenido antiguo y ponerlo aquí. Um, por cierto, este realmente lo borra. Simplemente lo hará inaccesible. Seguirá en tu servidor, así que deja la base de datos en paz. Um, quieres suave, Delicioso y WordPress para gestionar todas estas cosas de base de datos para usado para simplemente dejarlo paz. Puedes darle un nombre si realmente quieres, pero digo que lo dejes en paz. Deja en paz a los prefectos de mesa. Ahora, aquí es donde puedes configurar algunos ajustes iniciales para tu blogger. Se puede cambiar esto más tarde, pero le voy a dar un nombre. Ese es el nombre de mi página web. Y luego hay, como, un pequeño subtítulo y luego dejar esto en paz. Ahora, aquí es donde se crea una cuenta de admisión. Por lo que esta cuenta y hombres no es la misma que esta cuenta de hoja de grito. Lo que estás creando aquí es tu cuenta de WordPress. Por lo que cuando inicies sesión en tu sitio de WordPress, vas a usar esta información y está totalmente ajena a tu cuenta de hoja de tiro. Esta es la información de su cuenta de servidor. Esta es la información de tu cuenta de WordPress, así que no te confundas con eso. Y si realmente lo deseas, puedes usar el mismo nombre de usuario y contraseña. obstante, Noobstante, no recomiendo hacer esa causa solo va a reforzar la idea de que lo mismo cuando no lo están y cuándo, Si algo cambia alguna vez en el futuro, vas a estar súper confundido. Entonces digo, cree un nuevo nombre de usuario y contraseña, y este nombre de usuario en realidad será visible a veces en WordPress, dependiendo de cómo lo configure. Por lo que te recomendaría usar un nombre de aspecto profesional porque a veces serán cosas como publicadas por en hombres o lo que sea que esté aquí. Entonces voy a poner a Brenton sólo para que parezca que es por mí. Y luego aquí vas a poner una contraseña y tu email de administrador. Es importante que esta sea tu dirección de correo electrónico real. Elige un idioma, no entres en lo avanzado. Y luego también puedes enviar por correo electrónico los detalles de instalación a ti mismo e instalado. Deberías recibir un mensaje de confirmación que te diga que se instaló correctamente para que veas que hay dos lugares a los que puedes ir el principal aquí. Va si pones el subdirectorio, será ford slash WP o Lo que sea que pongas, pongo WP si no lo tenías instalado en un directorio en particular, solo será un nombre de dominio. El administrativo. Te Earless cómo vuelves a legislar y eso siempre será WP guión de hombres dentro de cualquier director que sea . Entonces porque tengo WP está dentro de esa sub carpeta. Pero si no lo pusiste, solo lo pusiste en tu sitio principal. Será solo tu dominio dot com slash WP admin para que en realidad no tengas que recordar esto, pero sigamos adelante y echemos un vistazo a mi sitio web y veamos cómo se ve ahora. Ahora, recuerda que lo instalé en este directorio WP. Entonces aquí está la instalación predeterminada de WordPress. Tiene un pequeño post falso aquí y un par de enlaces a la derecha que están bastante vacíos. Uniformidad una página de muestra 48. Administración de WordPress: Por lo tanto, iniciemos sesión en el área de ad men para que o bien pueda desplazarse hacia abajo, encontrar el inicio de sesión. En meta si lo miras aquí abajo en la parte inferior Cuando me inclino sobre él, es su guión WP. Inicie sesión dot PHP. Puedes hacer clic en esto para ir allí, o simplemente puedes escribir eso directamente en WP dash, iniciar sesión dot PHP O puedes hacer todo lo de WP admin. Bill , te llevará al mismo lugar. Ahora, aquí, vas a poner en la información que configuraste durante la instalación. Por lo que este es el área de administración de tu sitio WordPress. Uh, también, gente lo llama WordPress Blawg. Por lo que estás conectado ahora a un área que solo tú puedes ver como administrador, y aquí es donde puedes hacer todo el contenido administrando y cambiar toda la configuración y hacer básicamente lo que quieras. Por lo que en la parte superior aquí hay una especie de barra de navegación principal. Eso va a quedar en esta zona superior siempre y cuando estés conectado. Um, puedes ver que este es un enlace aquí mismo a tu sitio principal. Puedes abrirlo todo abierto en una nueva pestaña. Y así este es tu sitio otra vez. Pero ahora que estás conectado, tienes esta barra de administración aparece Eso es solo para ti. Cuando estás conectado y puedes hacer cosas como editar la página en la que estás. Si hago clic en una página, verás que tengo editado post cosas como esa. Entonces, um y luego tienes enlaces de vuelta a todas estas diferentes áreas. Entonces de vuelta al área de administración conseguiste inicialmente un dashboard que solo tiene alguna información sobre tu sitio y algunas, ah, instantáneas rápidas de diferentes áreas y luego a la izquierda aquí está el panel de navegación principal, que tiene todas las, uh, cosas estarán usando para personalizar y construir tu sitio justo fuera del bate. Las cosas más importantes son las publicaciones y las páginas, por lo que estas son muy similares sus formas de crear contenido, crear páginas. Pero las publicaciones son como publicaciones blawg y las páginas son como páginas Web. Entonces la diferencia es que un post irá en tu blawg y está un poco empatado a una fecha específica . Por lo que inicialmente, al crear un post lo el título del Post probablemente será algo así como la fecha actual la U R L que crea ahora. Una página, por otro lado, está destinada a estar siempre disponible. Y no le gusta y envejece con el tiempo. Es algo que siempre está ahí. Entonces en la mayoría de los blogs de WordPress que tienes, como una sección blawg. Esto es en realidad una publicación, y luego tienes páginas que son como parte de la navegación principal. Entonces sigamos adelante y creemos un post y una página para especie de ilustrar la diferencia ahí. Por lo que puedes hacer clic directamente en agregar nuevo o entrar en esta área de páginas, y luego ves una lista de todas tus páginas. Ahora mismo, es sólo una página de muestra. Se puede ver esa página de muestra ahí. Una página de muestra es diferente a hola mundo. Entonces la página de muestra voy a crear una nueva. Las únicas dos cosas que realmente necesitas darle son un título y algún contenido. Este es el área de contenido aquí. Hay dos lengüetas. Estoy usando la pestaña visual, lo que significa que no tengo que escribir en el HTML. Si quiero hacer algo audaz o un Talic, aquí puedo usar este botón, y lo va a cursiva sin que tenga que escribir el código. Ahora bien, si en realidad quiero tener un poco más de control en el poder, podrías ir al editor de texto aquí y verás que en realidad es el editor HTML. Puedo entrar y editar el HTML específicamente, pero aún así WordPress te da, Ah, un poco de ayuda, lo que podría ser molesto a veces. Por ejemplo, si pongo un salto de línea y comienzo un nuevo párrafo, WordPress entrará automáticamente en tu código, y envolverá una etiqueta de párrafo alrededor de Miss y una etiqueta de párrafo alrededor de esto porque pones las dos líneas rompe por lo que es realmente fácil de usar. Pero puede ser a fácil de usar si no estás esperando que entre y se meta con tu código . Por lo que hay que tener en cuenta que WordPress realmente va a cambiar este texto HTML, pesar de que no parece que lo sea. Por lo que para publicaciones realmente rápidas y contenido rápido, esto puede ser súper fácil. Pero si estás tratando de hacer las cosas un poco más complicadas, um, puede ser frustrante y hay un par de remediaciones que te puedo mostrar más tarde. Pero De todos modos, sigamos adelante y publiquemos esto y luego una vez que lo publiques, este botón cambiará para actualizarse. Entonces cuando haces ediciones, tienes que dar clic en actualizar y puedes ver aquí este es el enlace a la página creada automáticamente una u R l a ella. Pero también, si voy a mi sitio y refresco debería aparecer en el área de navegación. Entonces esta es mi primera página de WordPress. Y aquí está la página que creé. Ahora de nuevo, la página es diferente a las publicaciones de bloque de este Hola mundo. Se trata de un poste de bloque. Ahora por defecto y WordPress, tu página principal es tu blawg, y tu blogged mostrará solo una lista de todas tus publicaciones en bloque. Entonces ahora mismo, sólo tengo uno. Este que fue creado por defecto por WordPress. Hola, mundo. Entonces vamos a entrar y crear una nueva publicación de blawg. Voy a dar clic en posts y puedes ver mi único post blawg existente que fue creado por WordPress es una demo. Voy a crear un nuevo post Post es diferente a una página y mismo formato. Aquí. Es casi exactamente lo mismo. Tienes edición de texto o edición visual. Um, y luego publicas aquí mismo, y se convertirá en actualización una vez que publiques, si quieres editarlo. Entonces ahora si refresco en mi página principal, la navegación no cambia porque no es una página. Acabo de agregar, Es una publicación, y empujó hola mundo hacia abajo y se movió hacia arriba para publicar así puedo hacer clic en una publicación en particular haciendo clic en una de estas. Y entonces puedo ver justo ese post. Y ya ves, ya no tengo hola mundo allá abajo, y luego tengo las páginas de navegación aquí arriba. 49. Permalinks: Volvamos al tablero. Entonces enseguida. Lo primero que tendré que hacer normalmente cuando instalé es ahí yendo a ajustes y voy a ir a, um iré a permitir enlaces abajo en la parte inferior aquí. Entonces esta es toda esa información con la que me senté para empezar. Ese es el general Donat perm links. Así es como se crean tus páginas. Entonces sepan que la U R L para el primer post que hice es pregunta Mark P igual a seis y la UL para mi página que creé aquí es Paige. D igual a cuatro. Ahora, si quieres tener enlaces más bonitos, más bonitos, la forma de hacerlo está justo aquí. Para que puedas escoger una de estas opciones. Um, algo así como el nombre del post es una buena manera de hacerlo. Pero post post name por sí solo puede no ser suficiente porque, um, puede que tengas un montón de posts que a veces tendrán el mismo nombre, el mismo título, y luego WordPress tendrá que diferenciar entre ellos haciendo get confuso. Entonces otra forma de hacerlo es hacer día y nombre o mes y nombre. Tiendo a pensar que sólo teniendo el mes, el año y el mes. Y entonces el nombre es suficiente, aunque incluso tal vez, al igual que el año en el nombre. Pero puedes ver como hago click en estas diferentes cosas actualiza la estructura personalizada aquí. Entonces está esta sintaxis. Esto significa año. Esto significa número de mes. Esto significa nombre de la publicación, así que puedo como meterme con esto si quiero, Pero tiendo a mí me gusta tener nombre de la publicación al final. Hay algunas razones de rendimiento por las que no quieres que la publicación sea al principio, así que es buen dedo del pie. Este es probablemente el mejor es solo un mes y nombre, así que obtienes enlaces algo bonitos. Pero también está dividido por mes. Ahora cuando guardes los cambios, ahí vamos, por lo que las páginas no tendrán ese mes y año nombre en ellas. Pero los posts lo harán, lo cual, lo cual está totalmente bien para mí, porque tu póster atado a un día de todos modos, así que estás bloqueando posts siempre empezará con 2013 sea el mes que sea. Y luego el nombre ¿dónde están tus páginas? Tendrá sólo el nombre de la página recta arriba. Entonces este es nuestro primer paso para pasarlo de más de un blawg a una página 50. Mover la página del blog de la página de inicio: Entonces el siguiente paso es ¿Qué pasa si no quieres que tu lista de publicaciones esté en tu página principal, querías tener una página real. Ahora están fijando para eso para que te metes en la lectura. Y en este momento la portada muestra tus últimas publicaciones. Podemos cambiar eso haciendo que la portada sea una página estática. Ahora probablemente querrá crear una página específica para ser nuestra página principal. A lo mejor llámalo casa ahora mismo. Podría ponerlo a esto, y luego tienes que poner un post page toe, hacerse cargo de tu sección blawg. Entonces antes de hacer esto, voy a seguir adelante y crear dos nuevas páginas para eso. Por lo tanto, agrega nuevo. Voy a hacer una página de inicio, y voy a actualizar esto más tarde. Y luego voy a crear una página blawg, y sólo voy a dejar esto vacío. Entonces ahora que tengo echemos un vistazo a nuestra lista de páginas. Entonces tengo la página de muestra que WordPress hizo para mí, la que hicimos juntos justo de vez en cuando, Ah, página de inicio, que ampliaré más tarde, y una página bloqueada, que está vacía. Y la razón por la que queremos esas páginas de bloque vacías porque vamos a entrar en configuración y lectura. Y ahora vamos a poner la portada para que esté en casa y ampliaremos esto más adelante. Y entonces la página de The Post sólo será blawg. Y ahora cuando decimos esto y podemos tener algunos ajustes aquí, así que esto muestra como los 10 posts más recientes. Si tienes 1000 puestos de bloque, no quieres mostrar todos los 1000. Entonces es el número que muestras en la página de bloque, y luego puedes o bien mostrar el texto completo o si tienes publicaciones largas, probablemente solo quieras poner un breve resumen. Pondrá como los primeros párrafos ahora que hemos guardado el ajuste. Si volvemos aquí y nos refrescamos veremos un par de cambios. Entonces nuestra página principal ahora es justo lo que pongamos en esa página. Podemos ampliar en esto más adelante, mi página principal, y luego si queremos ver nuestros posts blawg, podríamos ir a Blawg. Y luego aquí vemos la lista de nuestros dos posts que se han actualizado aquí y luego cualquier otra página 51. Instalación de temas: todo en esta apariencia tienen. Aquí es donde tienes el control para cambiar realmente las cosas. Entonces ahora mismo, si voy a la aparición, me llevará primero a los temas, y veremos que estoy usando el tema del 2012. También podría cambiar al tema de 2011. Um, bastante pronto habrá el tema del 2013, supongo, ya que hacen uno cada año. Por lo que hay opciones dentro de tu tema para cambiar los menús por delante del fondo o para cambiar a un tema completamente diferente. O puedes encontrar un nuevo tema. Entonces pasemos al tema de 2011. que ya está instalado por defecto, todo lo que tienes que hacer es hacer clic en activar y está activado, nuevo tema activado, y ahora puedes ver que 2011 es el tema actual, y aquí abajo, 2012 sigue siendo disponible. Entonces ahora cuando vengo aquí y refresque toda la forma en que se ve esto, el tema cambiará. Ahora es un sitio totalmente diferente, cierto, pero es exactamente el mismo contenido. Todas las mismas publicaciones home sigue aquí, y esa página que puedo esta es mi primera página de WordPress sigue aquí, por lo que puedes ver cómo conseguiste mucho poder aquí y separaste el contenido en la presentación. Ahora vamos a instalar nuestro propio tema. Un nuevo tema que podemos o bien buscar basado en palabra clave se basan en algunos de estos, um, um, me gusta el dedo del pie. A lo mejor encontrar un tema de árbol, un tema que tenga un árbol en él. Sólo dos resultados. A lo mejor encontrar un tema que tenga el color Azul 32 resultados. Yo como que puedo ver pequeñas demos aquí. Este es bonito y fondo. Ahora puedes simplemente instalar o previsualizar. En primer lugar, la vista previa te dará una pequeña vista previa de cómo se verá realmente la página. Entonces me gusta este. Voy a instalarlo Ahora que lo he instalado, puedo activarlo o volver a nuestro instalador de tema, así que activarlo realmente lo encenderá. O si no lo activas, entonces en tus temas de gestión, seguirás teniendo éste. Ese es el actual, que es éste. Pero ahora, abajo en la parte inferior, tendrás este al que has instalado, y aquí puedes activarlo. Tan nuevo bit nuevo tema activado y luego solo refresca Ahora tengo este tema cielo arcoíris azul muy fresco pasando con hojas planas y todo. Por lo que es realmente fácil encontrar temas, y te voy a dar un pequeño indicio es que esta búsqueda de vigas instaladas. Lo que en realidad está haciendo es buscar wordpress dot org la sección temática aquí mismo . Por lo que actualmente hay 1732 temas en el Directorio de Temas de WordPress, y puedes mirar a través de los más populares, Um, o simplemente encontrar los tuyos propios. Entonces aquí hay uno genial. Si estás instalando desde wordpress dot org, sin embargo, están asumiendo que vas a descargarlo y luego subirlo y luego instalarlo. Entonces aunque lo encuentres aquí, la mejor manera de hacer la instalación es probablemente obtener el nombre del mismo y luego pasar a tu apariencia y luego instalar temas y en la búsqueda y luego pegar el nombre y buscarlo, y luego lo puedes encontrar aquí, y luego cuando lo instales y lo activas desde aquí, no tienes que hacer ninguna descarga manual. Entonces aquí está mi otro tema que acabo de instalar quien me gusta este mes. Se puede ver que si cambio los lados de esto, como que cambia un poco. Ese parece ser un tema algo receptivo. El menú se derrumbó aquí cuando lo hice pequeño. Y luego a medida que me expandía, se expande aquí. Por lo que este es un tema receptivo. Quieres asegurarte de que tienes un tema que responde así porque el tamaño del ah teléfono va a ser más así y te va a romper la página si está tratando mostrar así. 52. Personalizar el borde y el menú y el menú: continuando con nuestra encuesta. Vamos a reactivar este enchufe en este tema porque tiene una barra lateral más obvia y puedes ver que está un poco desordenado. Aquí hay muchas cosas, así que queremos deshacernos de algunas de estas cositas. Lugar para eso es el siguiente pequeño artículo. Apariencia interior son los widgets. Ahora aquí están todos estos widgets diferentes. Se ha levantado reciente post comentarios recientes que corresponde a buscar reciente post comentarios recientes , etcétera. Entonces, vamos a deshacernos de los archivos y categorías porque no los queremos ahora mismo. Sácalo del camino y luego puedes refrescarte y puedes ver esto se simplifica un poco. Y ahora vamos a añadir un par de widgets. Añadamos un calendario y luego aquí abajo, busquemos el texto arbitrario y sumémoslo abajo en la parte inferior, y en realidad puedes poner todo lo que quieras aquí, incluyendo HTM out. Entonces ya ves, el calendario ha entrado aquí, y luego si nos desplazamos hacia abajo, aquí está el texto arbitrario que puse con HTML que puse justo ahí. El siguiente genial son los menús, por lo que quizá quieras personalizar un poco tu menú si solo vas por defecto. Cualquier página que crees, a diferencia de una publicación cualquier página que crees, se mostrará aquí en este menú. Entonces eso significa que creamos una página bloqueada. Creamos una página de inicio. ¿ Y qué pasa si queremos o cambiar el orden o queremos que alguien no aparezca? Digamos, por ejemplo, queremos quedarnos con esto. Esta es mi primera página de WordPress, pero no queremos aparecer siempre en el menú, y queremos que la página principal sea la primera. Ahí es donde entras aquí con la sección de menú bajo apariencias. Entonces lo primero que harás es crear un menú. Tienes que darle un nombre, y luego puedes crearlo. Después de haberlo creado en estas ubicaciones temáticas, tienes que seleccionarlo y guardarlo. Entonces ahora está activo en tu tema, y aquí es donde puedes ingresar enlaces personalizados en tu menú. La mayoría de las veces, sin embargo, sólo vas a querer dibujar de tus páginas existentes tan bien de todos ustedes. Y esta es todas tus páginas. Eso o si solo quieres si tienes una cantidad masiva, puedes buscarlo, pero esto debería ser suficiente. Ahora, al revisar estos de uno a la vez, los agregará al menú. Ahora importa este orden. Entonces si lo guardara ahora mismo, verás Blawg Home Sample page y esta es mi primera página de WordPress que es orden blogueado Página de muestra Inicio. Esta es mi primera página wordpress. Entonces cambiemos el orden como lo queremos y luego digamos que quería deshacerme de esta es mi primera página wordpress. Pude haberlo agregado o no. O ahora que lo he agregado, quiero quitarlo. Haga clic aquí. Por lo que acabo de tener estos tres en la página de muestra de mi menu home blog y decir, quiero poner blogged last para que realmente puedas personalizar tu menú exactamente como quieras. También puedes jugar con categorías, pero te dejo que lo descubra por tu cuenta 53. Edición de temas: El último es el editor dentro de la sección de apariencia, y éste es el más avanzado. Entonces cuando vayas al editor inicialmente, te va a mostrar todos los archivos de tu tema. Entonces estoy usando el tema cielo azul nublado, y todos estos archivos son todos archivos de tema. Ahora me va a dar el estilo de hoja de estilo que CSS primero, porque eso es probablemente lo que vas a estar editando. Entonces si quisiera cambiar las cosas aquí dentro, la forma en que lo haría es yendo al editor y editando este estilo que CSS Este es el CSS cayó justo aquí. Y como has aprendido algo de CSS, no deberías tener miedo de hacer cambios aquí. A pesar de que se trata de un enorme muro de texto, se puede averiguarlo lentamente, sobre todo utilizando las técnicas que aprendiste. Digamos, quería cambiar el tamaño de este subtítulo. Aquí, puedo usar mi herramienta de elemento inspect y luego encontrar el subtítulo, y puedo ver que está usando este encabezado de punto DOT DSC probablemente significa descripción, y puedo probar aquí de qué tamaño quiero ser. Eso parece un buen tamaño Así que ahora puedo ver aquí mismo que este es estilo que CSS Ese es el mismo. Yo sólo estaba editando. Por lo que tengo que recordar dot header dot dsc Voy a entrar en mi hoja de estilo y buscar eso. Puedo ver que aparece una vez, una de una. Entonces sé que este es el lugar correcto, y aquí puedo agregar en el CSS que quiero y puedo guardarlo. Y ahora, aunque deshaga esto, si me refresco, verás que el decir que se actualiza el tamaño. Ahí está. Entonces así es como personalices tu página y puedes meterte en cosas realmente avanzadas como este es el encabezado que será sobre esta área aquí. Aquí es donde se puede entrar en el html en el PHP para modificar ese 54. Plugins: te confinaron enchufes para extender tu sitio para hacer casi cualquier cosa con la que quieras empezar. Añadamos uno sencillo que rastreará a tus visitantes. Ve a agregar nuevo y luego escribe el nombre del enchufe y estás buscando, en este caso, Google analytic ator. Ahora necesitarás configurar una cuenta de Google Analytics para que esto funcione. Pero te guiaré por ese proceso porque vale la pena. Google Analytic ater Instalar ahora, Sí, instalar Y luego una vez que haya pasado, activa el plug in. Ahora lo ves aquí abajo, ve a la configuración. Tendremos que estar conectado a tu cuenta de Google. Adelante y da click en el enlace que te dan y permiten el acceso. Copia el código que te dan en la caja y continúa ahora. En un principio, se desactivará y habrá un aire de cuatro o tres. Entonces lo que necesitas hacer es entrar en realidad. Si esto es lo que recibes el mensaje, lo que probablemente sea, necesitas entrar a Google y configurar una cuenta de Google Analytics. Así que ve a google dot com slash analytics y asegúrate de que has iniciado sesión. Y aquí está el proceso de registro. Vas a estar haciendo esto para un sitio web. Adelante y escoge uno de estos. Voy a ir con Universal y a la información de tu página web. Tienes que aceptar las condiciones de servicio, y entonces tu cuenta debe estar configurada. Vuelve a tu página y refresca. Esta vez ese aire desaparece para que puedas hacer clic en Habilitado. Ahora sólo tienes que seguir adelante y desplázate hacia abajo. Puedes meterte con estos más tarde, aunque probablemente no necesites cambiar nada. Desplácese hasta la parte inferior y guarde ahora. Se debe configurar para ver el rastreo. Acude a tu panel de control y encuentra aquí la página de Google Analytics. mí me gusta ponerlo a la derecha porque muchas veces la derecha es un poco más grande, y me gusta arrastrarla hasta arriba. Mucho de estos aire no realmente tan útil. Entonces ahora mismo no tendrás nada. Pero con el tiempo verás un gráfico del número de visitantes, vistas de página, visitas, visitas, tasa de rebote y otros datos útiles 55. Concluir pensamientos de WordPress: Entonces ese es el final de la encuesta de alto nivel de WordPress. Debería ser suficiente para que empieces. A pesar de que puedes pasar muchos años aprendiendo todo lo que hay que saber sobre WordPress simplemente skimming la superficie, podrás meterte en un montón de cosas realmente poderosas mirando a través, sobre todo los enchufes, porque puedes extenderlo a todo tipo de cosas. Galerías de imágenes, formularios de contacto. Hay una lista interminable de miles de enchufes de personas que han creado. Probablemente la forma más fácil de encontrar los enchufes no es a través del enchufe y buscador aquí, sino que en realidad vaya a wordpress dot warg y luego haga clic en el enlace de los enchufes. Y esto te mostrará tanto los enlaces más populares como los enchufes destacados destacados enchufes o los que WordPress se presenta porque piensan que son especialmente útiles. Y los enchufes más populares son utilizados por millones de personas a veces y tienen una buena calificación y en su mayor parte, van a ser una buena apuesta a que mucha gente los ha encontrado muy, muy útiles. Así que ve a wordpress dot o ve y echa un vistazo a los populares enchufes, y luego también puedes buscar por la categoría de plug in también. Otra cosa que quieres hacer de inmediato es escoger un tema y luego empezar a personalizarlo. Entonces encuentra un tema que sea similar a la forma en que quieres que se vea. Empieza a usar las habilidades que aprendiste en este curso, usando el Dom Inspector y tus habilidades de edición CSS para editar tu tema y hacer que se vea más precisamente como quieras. El primer paso para personalizar un tema son las opciones en el tema aquí mismo. Por lo que algunos temas tienen más opciones y otros. Y luego si no puedes escaparte, mira bien como quieras con estas opciones. Después entras al editor y empiezas a personalizar las cosas a mano. Ese es el final de esta lección. Adelante y empieza con el proyecto. Y, uh, hazme saber cómo van las cosas