Por qu aprender HTML?Cada pgina web que mirs est escrita en un lenguaje llamado HTML. HTML es como un esqueleto que le da estructura a cada pgina web. En este curso, usaremos HTML para aadir prrafos, encabezados, imgenes y enlaces a una pgina web.En el editor que pods ver a la derecha hay una pestaa llamadatest.html. Este es el archivo en el cual vamos a escribir nuestro HTML. Ves el cdigo con los smbolos? Eso es HTML. Como cualquier otro lenguaje, tiene su propiasintaxis(reglas para la comunicacin) especial.Cuando hacemos clic en Guardar y enviar, la ventana de resultados acta como unnavegadorde Internet (como por ej. Chrome, Firefox, Internet Explorer). La funcin de un navegador es transformar el cdigo que est entest.htmlen una pgina web reconocible. El navegador sabe cmo distribuir la pgina siguiendo la sintaxis HTML.HTML y CSSHTML significaHyper Text Markup Language(Lenguaje de marcado de hipertexto).Hipertextoquiere decir "texto que contiene enlaces". Cada vez que hacs clic en una palabra que te lleva a otra pgina web, ests haciendo clic en un hipertexto.Unlenguaje de marcadoes un lenguaje de programacin usado para que el texto haga algo ms que aparecer en una pgina: puede convertir texto en imgenes, enlaces, cuadros, listas, y mucho ms. El lenguaje de marcado que aprenderemos es HTML.Qu es lo que hace que una pgina web sea linda? Las CSS Cascading Style Sheets (Hojas de estilo en cascada). Imaginate que es la piel y el maquillaje que cubre los huesos del HTML. Primero vamos a aprender HTML y despus, en otros cursos, nos vamos a ocupar de las CSS.Lo primero que debemos hacer es configurar el esqueleto de la pgina.a. Escrib siempreen la primera lnea. Esto le dice al navegador qu lenguaje est leyendo (en este caso, HTML).b. Escrib siempreen la lnea siguiente. Esto comienza el documento de HTML.c. Escrib siempreen la ltima lnea. Esto finaliza el documento de HTML.Terminologa bsicaPara aprender ms HTML, debemos aprender cmo hablar sobre HTML. Ya viste que usamos mucho los smbolos.1. El texto dentro dese llamaetiqueta.2. Las etiquetas casi siempre vienen de a pares: una etiqueta de inicio y una etiqueta de cierre.3. Un ejemplo de una etiqueta de inicio es:4. Un ejemplo de una etiqueta de cierre es:Imagin que las etiquetas son como parntesis; cuando abrs uno, despus tens que cerrarlo. Las etiquetas tambin puedenanidarse, as que tens que cerrarlas en el orden correcto: la ltima etiqueta que abriste debe ser la primera que cierres, como se muestra en este ejemplo:Algn textoEl ltimo ejercicio nos ense cmo configurar el archivo HTML. Todo lo que agreguemos ahora ir en medio dey.Hac el encabezadoTodo dentro de nuestro archivo HTML ir en medio de las etiquetas de inicioy de cierre.El archivo siempre consiste de dos partes: el encabezado y el cuerpo. Vamos a empezar con el encabezado.El encabezado tiene informacin sobre el archivo HTML, como por ejemplo su ttulo. El ttulo es lo que vemos en la barra de ttulos del buscador o pestaa de la pgina. Por ejemplo, el ttulo de esta pgina es "Conceptos bsicos de HTML | Codecademy".Prrafos del cuerpo del archivoMuy bien! Para repasar, recordemos que un archivo HTML tiene un encabezado y un cuerpo. El encabezado es donde se ingresa la informacin sobre tu archivo HTML, como, por ejemplo, el ttulo.El cuerpo es donde ingress el contenido, como textos, imgenes y enlaces. El contenido del cuerpo es lo que se ver en la pgina real.El cuerpo va dentro de las etiquetas , inmediatamente despus de las etiquetas de ttulo, as:

Mi pgina web

1. Dentro del cuerpo cre dos prrafos. Cada prrafo empieza con una etiquetade inicio y termina con una etiquetade cierre. Podemos ingresar contenido entre las etiquetas, as:2. 3. Hola mundo! Prrafos y encabezadosDefinitivamente estamos avanzando mucho! Aprendimos cundo y por qu usamos HTML. Tambin aprendimos cmo:a. Configurar un archivo HTML con etiquetasb. Ponerle un ttulo a la pgina web (en el encabezado o)c. Crear prrafos (en el cuerpo ocon etiquetas)En el siguiente paso pondremos encabezados a nuestros prrafos usando las etiquetas de encabezado. Vamos a comenzar con la etiqueta . Lo que aparece entre estas etiquetas tendr la letra ms grande.Instrucciones1. En la seccin del cuerpo escrib un encabezado. Para esto, cre una etiqueta.2. Agreg contenido.3. Cerr ese elemento con una etiqueta de cierre de encabezado. El contenido que agregaste debe quedar entrey.)4. Debajo de las etiquetas de encabezado agreg dos prrafos, con cualquier contenido, usando las etiquetas.5. Ms sobre encabezadosEn realidad, HTML nos permite tener ms de un tamao de encabezados. Hay seis tamaos de encabezados:es el ms grande, de mayor jerarqua yes el ms chiquito, de menor jerarqua.- El Presidente- El Vicepresidente- El Director- El Vicedirector- El Empleado- El CadeteRepaso de mitad de leccinHiciste un trabajo impresionante. Este es un resumen de lo aprendido:01. HTML se usa para darle estructura a los sitios web.02. Abrimos los archivos HTML usando un navegador, y el navegador reproduce el archivo (nos lo muestra).03. Los archivos HTML tienen un encabezadoy un cuerpo(Igual que nosotros, que tenemos cabeza y cuerpo).04. En el encabezado tenemos las etiquetas de ttuloy las usamos para especificar el nombre de la pgina web.05. Cmo hacer encabezados y prrafos.Visitar otros lugaresQu pasara si quisieras mandar al usuario a otra parte de tu sitio web o directamente a otro sitio web? Tens que usar hipervnculos. Tambin los podemos llamar vnculos, para abreviar.Mi sitio web favorito1. Primero hay una etiqueta de aperturay esa etiqueta tiene un atributo que se llamahref. El valorhrefle dice a tu enlace adnde quers que vaya, en este casohttp://www.codecademy.com.2. Despus hay una descripcin de tu enlace entre tu etiquetade apertura y tu etiquetade cierre. Ah es donde pods hacer clic.3. Finalmente aparece la etiquetade cierre.4. Agregar imgenes5. Pods agregar imgenes a tus sitios web para que queden ms atractivos.6. Usamos una etiqueta de imagen, como:. Esta etiqueta es un poco diferente de las dems. En vez de colocar el contenido en medio de las etiquetas, le indics a la etiqueta dnde buscar la imagen, usandosrc. Tambin es diferente porque no hay etiqueta de cierre. Tiene una barra/en la etiqueta para cerrarla:.7. Mir la etiqueta que est a la derecha: le agrega una imagen de un pato de goma a la pgina. (Pods verlo haciendo clic en el botn de Vista previa).8. Ves la direccin web (oURL, por localizador de recursos uniforme) despus desrc=? Es"http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg ". Le dice a la etiquetadnde obtener la imagen.9. Cada imagen en la web tiene su propio URL de imagen. Simplemente hac clic con el botn derecho sobre una imagen y eleg "Copiar el URL de la imagen". Peg ese URL entre comillas despus desrc=para insertarlo con tu etiqueta de imagen.Hac clic en esa imagenMuy bien! Ahora ya sabs cmo agregar enlaces e imgenes a tu sitio web. Pero, qu tal si quisieras convertir esa imagen en un enlace? Por ejemplo:

1. Primero abrimos nuestra etiquetae dirigimoshrefahttp://www.codecademy.com/otra vez.2. Pero esta vez, en lugar de usar texto dentro de la etiqueta, usamos una etiqueta de imagen.3. Finalmente colocamos la etiqueta de cierre.Ahora, cuando hagas clic en el pato amarillo irs a http://www.codecademy.comcolocar una etiqueta HTML dentro de otra se denomina anidado.Acordate de la indentacinAhora es un buen momento para hablar de laindentacin, es decir, el espaciado que hay desde el margen en cada lnea. Vas a ver que cuando ponemos etiquetas dentro de otras etiquetas, las indentamos todava ms. Esto ayuda a que tu cdigo se pueda leer mejor!Mir a la derecha las indentaciones que pusimos en el editor. Trat de copiar este estilo de indentaciones cuando ests escribiendo HTML, para no confundirte.

Listas ordenadasBien! Ahora vamos a aprender cmo hacerlistas ordenadas. Una lista ordenada es simplemente una lista que est numerada, como la que aparece ac abajo.1. En la lnea 8, comenzamos la lista ordenada con la etiqueta de inicio

1. .2. En las lneas 9 - 12,encerramos(es decir, rodeamos) cada elemento con etiquetas
2. y.3. Como cada tem de la lista solo est en una lnea, ponemos todo elelementoen una lnea.4. En la lnea 13, finalizamos la lista ordenada con la etiqueta de cierre

.Qu te parece esto? Ahora podemos agregar listas ordenadas a los encabezados y a los prrafos como cosas que podemos usar en el cuerpo de HTMLListas no ordenadasAprendimos a hacer listas ordenadas. Pero si el orden no importa? Si solamente queremos usar vietas?Ingredientes para empanadas de carne

Carne picada

Cebollas

Esto te hace acordar a algo?1. Primero abrimos una lista con una etiqueta

de listas no ordenadas2. Para cada tem que queremos agregar a la lista usamos una etiqueta de tem de lista

con texto en el medio.3. Luego le decimos al explorador que terminamos de hacer la lista con la etiqueta de cierre

4. Listas dentro de una listaHiciste listas ordenadas y no ordenadas. Excelente trabajo!Qu pasa si tens una lista ordenada, pero cada tem de esa lista tambin tiene anidada una lista no ordenada? Anidado significa 'dentro' de la lista. En el editor hay un ejemplo. Hac clic en Guardar y enviar para ver cmo queda.Acordate: ya has anidado etiquetas. Cuando anids etiquetas la ltima etiqueta que abrs es la primera que tens que cerrar. Mir este ejemplo:5. `

Empanadas

`

Hacer comentariosVimos mucho sobre listas. Vamos a cambiar de tema y a hacer un poco de estilo. Si te acords, dijimos que HTML es el esqueleto de la pgina web y que CSS te permite darle al esqueleto algo de piel y de maquillaje.Pero es posible hacer algo deCSSinline(en lnea). Esto simplemente quiere decir que podemos darle algo de estilo a nuestro archivo HTML sin preocuparnos por un archivo CSS aparte. Vamos a aprender esto primero, as aprender CSS despus te resulta ms fcil.Antes de meternos de lleno en las fuentes, es importante aprender cmo hacer comentarios. Pods incluir algunas notas cortas en tu cdigo HTML, que el navegador no mostrar. Pero estarn en el cdigo para ayudarte a recordar porqu hiciste ciertas cosas.Instrucciones1. Los comentarios comienzan con, as:

Tamao de fuenteAcordate de queysonetiquetasde inicio y de cierre.Les podemos dar a las etiquetas ms instrucciones incluyendoatributosen la etiqueta de inicio. Un atributo es simplemente una caracterstica o una descripcin del contenido que aparece en el elemento. Ya viste los atributos consrcen la etiquetayhrefen la etiqueta.Vamos a cambiar el tamao del texto. Cmo? Usamos el atributostyle. Lo escribimos igual al tamao de letra (font-size), seguido de dos puntos, del tamao que deseamos, y finalizamos conpx(abreviatura de "pxeles"). Por ejemplo:

Color de fuenteLo mejor del atributo style es que lo usamos un montn. Adems podemos usarlo con muchas etiquetas diferentes, no solamente con. Ahora vamos a cambiar los colores del texto en un encabezado.Para cambiar el color del texto, simplemente agreg el atributo style en la etiqueta de inicio y despus hac que el estilo sea igual a "color:blue" (color azul) o cualquier color que quieras. Por ejemplo:

Y qu tal si quers cambiar el coloryel tamao del texto? Fcil. Solo tens que agregar un punto y coma entre medio. Por ejemplo:

Nota:No escribasalgo as:

Pero, los comentarios de CSS se ven as:/*Soy un comentario!*/Acordate: la computadora ignora los comentarios cuando intenta resolver lo que deben hacer tus cdigos HTML y CSS, pero escribir buenos comentarios es un buen hbito que deberas adquirir.Hexaquecosa?Ya tens las ideas principales; ahora es momento de llegar al fondo del asunto.Viste que cuando te pedimos que establecieras las propiedades de color usando CSS, te pedimos que escribieras cosas comocolor:red? Quizs te preguntaste: y qu pasa si quiero elegir rojo oscuro? O el rojo de los camiones de bomberos? O mejor un rojo-anaranjado? CSS conoce todas estas palabras?La respuesta es no. Sin embargo, CSS puede entender millones de colores en forma devalores hexadecimales.Ya conocs muy bien los valoresdecimales: es la manera en que contamos todos los das. Cuando ves un nmero (p. ej.,1.432) sabs que cada dgito solamente puede ser un valor entre 0 y 9. Solamente hay diez posibilidades porque el sistema habitual de numeracin esde base 10.En cambio, el sistema de numeracin hexadecimal esde base 16. Cada dgito puede ser un nmero del 0 al 9o las letras de la a a la f!Una flor y otra flor celesteHay muchas herramientas disponibles en Internet para buscar los valores de los colores hexadecimales (o simplemente coloreshex).Pods buscar "paleta de colores hex" o "selector de colores hex" en tu navegador web favorito para encontrar un montn de opciones!Los valores hex siempre comienzan con un signo numeral (#), tienen hasta seis "dgitos" de largo yno distinguen entre maysculas y minsculas. Por ejemplo, #FFC125 y #ffc125 representan el mismo color.Pxeles y emBuen trabajo! Haremos ms cosas con los colores a medida que aprendas ms CSS.Cuando te pedimos que ajustaras el tamao de la fuente, especificamos que la unidad que tenas que usar erapx(por "pxeles"), as:p { font-size: 10px;}Un pxel es un punto en la pantalla de tu computadora. Especificar los tamaos de la fuente en pxeles es genial cuando quers que el usuario vea en su pantalla exactamente lo que diseaste en la tuya, pero se supone que ambas pantallas tienen el mismo tamao.Pero, si el tamao de la pantalla del usuario es muy diferente del de la tuya (como la pantalla de un smartphone)? Ac aparecen losem. (No los confundas con las etiquetasque usamos para nfasis).La unidad de tamao de fuentefont-sizeemes una medidarelativa: un em es igual al tamao de fuente predeterminado en cualquier pantalla que el usuario est usando. Esto los convierte en algo genial para las pantallas de los smartphones, ya que no tratan de decirle al smartphoneexactamentecul debe ser el tamao de la fuente: sencillamente le indican, "Mir: 1em es el tamao de fuente que uss casi siempre, as que 2em es el doble de grande y 0,5em es la mitad de ese tamao".Ten en cuenta que incluimos tres prrafos diferentes con font-size 1em, 0,5em, y 2em. Por ahora, us la unidad con la que te sientas ms cmodo (px o em) ; nosotros solo queramos que conocieras los em ahora, para que no te sorprendas cuando los veas ms adelante.Una fuente de conocimientoTambin te pedimos que cambiaras el tipo de letra (font-family) de ciertos elementos usando CSS. Nos viste usar las fuentes Verdana, Courier y Garamond. Pero cuntas fuentes conoce CSS?La respuesta es: depende. La mayora de las computadoras van a entender las fuentes ms comunes, como Verdana, Courier y Garamond, pero cada computadora tiene instaladas diferentes fuentes. Lo bueno es que CSS tiene algunas fuentes predeterminadas incorporadas para que tus usuarios vean lo que vos quers. Son:serif: una fuente con pequeos remates decorativos en los finales de los trazos que componen las letras. Busca "serif" para ver a qu nos referimos.sans-serif: una fuente sin adornos, como esta. No tiene las cositas de los extremos de las letras que tiene la fuente serif.cursive: es una fuente que parece hecha a mano alzada. Se ve como escritura cursiva.Valores de respaldoNo tienes que usar obligatoriamente un valor predeterminado comocursiveosans-serif: puedes indicarle a CSS que pruebe varias fuentes, yendo de una a la siguiente si la que ests buscando no est disponible.Por ejemplo, si escribs: p { font-family: Tahoma, Verdana, sans-serif; }

CSS intentar primero aplicar Tahoma a tus prrafos. Si el computador del usuario no tiene esa fuente, a continuacin probar con Verdana, y si esa no funciona, mostrar una fuente sans-serif predeterminada.Color de fondo, altura y anchoTe acords dely cmo lo usamos para hacer esos bloques multicolores? Es hora de que construyas tus propios bloques! (Bueno, no nos adelantemos.)Hay tres propiedades para las cuales debers determinar valores:1. Color de fondo (background-color), que se determina con un color o valor hexa2. Altura (height), que se determina con un valor en pxeles3. Ancho (width), que tambin se mide en pxelesEstos ejercicios te van a mostrar un breve resumen de los diferentes elementos de HTML que pods seleccionar y cules son algunos de sus pares propiedad-valor (como los nuevos pares que mencionamos arriba). Vamos a aprender ms sobre la seleccin de elementos de HTML en el siguiente curso.Al borde de la locuraMuchos elementos de HTML admiten la propiedad borde (border). Esta puede ser especialmente til con las tablas.La propiedadbordera su vez admite varios valores. Por ejemplo, para hacer un borde de 2 pxeles de ancho, slido, y de color rojo, tens que escribirselector { border: 2px solid red;}Los bordes quedan elegantes.Enlaces y "text-decoration" (decoracin de texto)Los enlaces tienen muchas de las propiedades que tiene el texto normal: pods cambiarles la fuente, el color, el tamao, etc.Pero los enlaces tambin tienen la propiedadtext-decoration, que pods modificar para darles un toque un poco ms personalizado. Probablemente ests acostumbrado a ver enlaces que son de color azul y estn subrayados, no? Bueno, no tiene que ser s o s de esa manera.Dise un botnVamos a empezar. Lo primero es lo primero: necesitamos crear nuestro botn. Esto lo hacemos con las etiquetas.Dar forma al botnEste ejercicio incluye una nueva propiedad llamadaborder-radius(radio del borde). (Aprenderemos ms de esta propiedad en cursos y proyectos posteriores.) Esta propiedad modifica las esquinas de los objetos de HTML; es as como se consigue hacer esos geniales botones redondos.Posicin del botnPerfecto! Ahora, a trabajar para centrar el botn en la pgina.Vamos a revisar el posicionamiento en el siguiente curso o en el siguiente, pero creemos que adelantarte algo es una buena idea. As es como funciona:1. margin:auto;es el estilo que uss para decirle al navegador: "Asegurate de dejar mrgenes iguales a ambos lados de este elemento de HTML". Cuando los mrgenes son iguales, el objeto queda centrado.2. text-align:center;se usa para centrar elementos de texto.Agregar el enlaceBuensimo! Ahora queremos agregar al botn un enlace con texto.En nuestro ejemplo del primer ejercicio, tal vez te diste cuenta de que usamos etiquetaspara crear un color de fuente diferente para"Facebook!", as:Hacete amigo de nosotros en Facebook!

Todos los elementos de HTML son selectoresYa usamos varios elementos de HTML como selectores de CSS: le dimos estilo a las etiquetas de HTMLcon el selector de CSSh1, aconp, y as sucesivamente.Quizs ya adivinaste esta parte, pero si no, vamos a decirla de una vez: cualquier elemento de HTML puede ser un selector de CSS! Pods modificar las

,, e incluso la etiquetacompleta, seleccionandoul,table, ybody, respectivamente.Selectores mltiplesComo ya viste, es posible anidar elementos HTML dentro de otros, as:

Me gustan las empanadas!Y si quers enfocarte en lasque estn dentro de dos, y no en todas las?Pods seleccionarlas en la pestaa CSS de esta forma:div div p { /*Lo de CSS!*/}Un selector para gobernarlos a todosTambin existe un selector muy especial que pods usar para aplicar el estilo de CSS acada elementode la pgina: el selector*. Por ejemplo, si escribs* { border: 2px solid black;}Vas a crear un borde continuo de dos pxeles de ancho alrededor decadaelemento en la pgina de HTML.RamificacinImagin que un documento de HTML es como un rbol: los elementos se "ramifican" desde el tronco principal (las etiquetas). Las dos primeras ramas ms grandes sony, y las ramas se multiplican y se hacen ms delgadas a medida que introducs elementos como las,, y el texto (encabezados y prrafos).Padres, hijos y hermanosSi imagins que la etiquetaes el tronco del rbol, pods imaginarte que sus ramas principalesyson sushijos. Ambas etiquetas son hijos de, yes su elementopadre. Como ambos son hijos directos de(es decir que tienen solamente un elemento de distancia), sonhermanos.Como en una familia de verdad, los elementos tienen hijos, nietos, bisnietos, y as sucesivamente (aunque nosotros no hacemos esta distincin con HTML; un hijo de un elemento, y todos los hijos de ese hijo, son hijos del primer padre).InstruccionesPara aquellos de ustedes que piensan de manera ms visual, en la pestaaindex.html, que est a la derecha, hay un pequeo diagrama.Acordate: un elemento es hijo de CADA elemento que lo encierra, incluso si ese elemento est a algunas "ramas" de distancia.Pods hacerlo?Muy bien! Vamos a intentar algo un poco ms complejo.Acordate, pods referirte a un elemento que es hijo de otro elemento as:div div p { /* Cdigo de CSS */ }en este caso, vamos a tomar cualquierque est anidada enalgn lugardentro de unaque est anidada en algn lugar dentro de otra. Si quers tomarhijos directos(es decir, los elementos que estn directamente anidados dentro de otro elemento, sin elementos intermedios) pods usar el smbolo>, as:div > p { /* Cdigo de CSS */ }Esto se refiere nicamente en lasque estn anidadasdirectamentedentro de las; no tomar los prrafos que estn anidados dentro de listas que, a su vez, estn anidadas dentro de las.Ver para creerExcelente! Ya ests dominando el tema y comenzando a aprender ms sobre la cascada.Como ya dijimos, ciertos selectores "sobreescribirn" otros si tienen unvalor de especificidadmayor.ul li p {es CSS ms especfico que simplementep {, as que, cuando CSS ve etiquetas que sonyestn dentro de listas no ordenadas, aplicar el estilo ms especfico (ul li p {) al texto dentro de las listas.Existen dos selectores que son an ms especficos que los selectores anidados como los que aparecen arriba: selectores declase(class) y deidentificadores(id). Miralos en el editor de la derecha.Mantener el estiloLas clases son tiles cuando tienes un montn de elementos que deberan tener el mismo estilo. En vez de aplicar las mismas reglas a varios selectores, simplemente pods aplicar la misma clase a todos esos elementos de HTML y luego definir el estilo para esa clase en la pestaa de CSS.Las clases son asignadas a los elementos de HTML usando la palabraclassy un signo de igual (=), as:

En CSS, las clases se identifican con un punto (.), as:.cuadrado { height: 100px; width: 100px;}Esto te permite tomar elementos de diferentes tipos y darles el mismo estilo.Identificacin, por favor!Por otra parte, los identificadores son geniales cuando tens exactamenteunelemento que tiene que tener cierto estilo.Los identificadores son asignados a los elementos de HTML usando la palabraidy un signo de igual (=):

Los identificadores se reconocen en CSS con un signo de numeral (#):#primero { height: 50px;}

#segundo { height: 100px;}

#intro { color: #FF0000;}Esto te permite aplicarle estilo a una sola instancia de un selector, en vez de atodaslas instancias.Un control an ms precisoYa aprendiste sobre los selectores de clase. Ahora vamos a aprender sobre losselectores de pseudoclase.Unselector de pseudoclasees una forma de acceder a los elementos de HTML que no son parte del rbol del documento (te acords de la estructura de rbol sobre la que hablamos anteriormente?). Por ejemplo, es muy fcil ver en qu lugar del rbol va un enlace. Pero, en qu lugar encontraras la informacin que dice si se ha hecho clic o no sobre un enlace? Eso no est ah!Los selectores de pseudoclase nos permiten darle un estilo a este tipo de cambios en nuestro documento de HTML. Por ejemplo, vimos que podemos cambiar la propiedad decoracin de texto de un enlace para que no se vea siempre azul y subrayado. Usando los pseudo-selectores pods controlar la apariencia de enlaces que han sido y que no han sido visitados; e incluso de aquellos sobre los que el usuario pasa el cursor pero en los que an no ha hecho clic.La sintaxis de CSS para los pseudoselectores esselector:selector_de_pseudoclase { propiedad: valor;}Simplemente es un signo adicional de dos puntos (:).Primer hijoOtro selector de pseudoclase til esfirst-child. Se usa para aplicar el estilonicamentea los elementos que son los primeros hijos de sus padres. Por ejemplo:p:first-child { color: red;}Har que todos los prrafos que sean los primeros hijos de sus padres tengan color rojo.N hijoMuy bien! En realidad pods seleccionar cualquier hijo de un elemento despus del primer hijo, con el selector de pseudoclasenth-child; simplemente tens que agregar el nmero de hijo entre parntesis despus del selector de pseudoclase. Por ejemplo,p:nth-child(2) { color: red;}Pondr en color rojo a todos los prrafos que sean lossegundoshijos de su elemento padre.El elemento quees el hijova antes de:nth-child; su elemento padre es el elemento que lo contiene.Java script:Para descubrir el largo de tu nombre escribilo entre comillas. Despus pon un punto final y la palabralargo(length en ingls), as:tuNombre.length(Hac esto de ahora en adelante cada vez que termines un ejercicio).En mi caso, como mi nombre es Mercedes, sera"Mercedes".lengthEditor y comentariosHasta ahora, estuvimos escribiendo lneas de cdigo en el editor. Ahora vemos dos lneas que empiezan con//.El signo//es para comentarios. Un comentario es una lnea de texto que JavaScript no va a tratar de ejecutar como cdigo. Solamente es para que las personas lo lean.Los comentarios hacen que tu programa sea ms fcil de entender. Cuando volvs a mirar tu cdigo u otros quieren colaborar con vos, pueden leer tu comentario y entender fcilmente lo que hace tu cdigo.InstruccionesLa computadora ignorar el cdigo de las lneas 1 y 2, porque aparece como comentario.En la lnea 3, encontr cuntas letras tiene la palabra "torta".Qu estoy aprendiendo?Esto es JavaScript (JS), un lenguaje de programacin. Existen muchos lenguajes, pero JS tiene muchos usos y es fcil de aprender.Para qu podemos usar JavaScript? para crear sitios web que respondan a la interaccin del usuario para crear aplicaciones y juegos (por ejemplo, el blackjack) para acceder a informacin en Internet (por ejemplo, encontrar las palabras ms populares en Twitter segn el tema) para organizar y presentar datos (por ejemplo, automatizar el trabajo de las hojas de clculo o para visualizacin de datos)JavaScript interactivoLo que acabamos de ver es un ejemplo de cmo JavaScript puede ser interactivo. Ahora intentalo vos!Ejemplos:confirm("Me siento re bien!");confirm("Estoy listo para continuar.");Estas cajas de dilogos pueden usarse en los sitios web para que los usuarios confirmen acciones. Probablemente las viste aparecer cuando intents borrar cosas importantes o cuando sals de un sitio web sin guardar los cambios.Qu es programar?Programar es como escribirle a la computadora una lista de instrucciones, de forma tal que pueda hacer cosas geniales con la informacin que le das.Los programas no pueden hacerte la cama pero s pueden hacer operaciones matemticas, llevar un registro de tu cuenta bancaria o enviarle un mensaje a alguno de tus amigos.Para realizar cualquiera de estas acciones, el programa necesita que se le ingresen datos. Pods pedirle al usuario que ingrese datos mediante unprompt.Ejemplos:1. prompt("Cul es tu nombre?");2. prompt("Qu es Ubuntu?");Tipos de datos I & II: Nmeros y cadenasExisten variostiposde datos. Y ya usaste dos!a. numbers(nmeros) son cantidades, tal como los que conocs. Pods hacer operaciones matemticas con ellos.b. strings(cadenas) son secuencias de caracteres, como las letrasa-z, los espacios, e incluso los nmeros. Todos estos son cadenas:"Juan","4","Cmo te llams?"Las cadenas son muy tiles como etiquetas, nombres y contenido para tus programas.Para generar unnmeroen tu cdigo, simplemente escribilo como un numeralsin comillas: 42, 190.12334.Para escribir una cadena, tens que ponerloentre comillas:"Cmo te llams?"Tipos de datos III: booleanosEl tercer tipo de dato es un booleano (que se pronuncia "bu-lea-no"; se nombr as en honor a George Boole). Un booleano puede tener dos valores,true(verdadero) ofalse(falso).Pods usarlos en tu cdigo haciendo sentencias que sean iguales atrueo afalse.Por ejemplo, el comparar dos nmeros nos da un resultado true o false:1. 23 > 10estrue2. 5 < 4esfalseLosbooleanosson bastante tiles porque ms adelante nos permitirn ejecutar ciertas partes de nuestro cdigo solamente si ciertas condiciones son verdaderas. Por ejemplo, los cajeros automticos calculan si[la cantidad de dinero de tu cuenta bancaria]> 0y solamente te darn dinero si la respuesta estrue.Usemos "console.log"Posiblemente te hayas dado cuenta de que el intrprete no muestra mensajes de todas las acciones que ejecuta. As que si queremos saber qu est pensando, a veces tenemos que preguntrselo.El comandoconsole.log()toma lo que est entre parntesis y loregistraen lapantalladebajo de tu cdigo; por eso es que se llamaconsole.log()(registro de pantalla)!A esta accin se le conoce comnmente comoprinting out(mostrar en pantalla).ComparacionesHasta ahora, aprendimos acerca de tres tipos de datos: Strings (cadenas) (por ej."los perros hacen guau") numbers (nmeros) (por ej.4,10) booleans (booleanos) (por ej.false,5 > 4)Vamos a aprender ms sobre los operadores de comparacinLista de operadores de comparacin:>Mayor que