3f:null 40:["$","title",null,{"children":"Documentos HTML | Guillermo | Observable"}] 46:[] 44:{"id":"d6d968642e6a0252","slug":"documentos-html","title":"Documentos HTML","thumbnail":"dc6b99978c06e55fe30189fbca32b9853ca7e2baa67e12c3c3f49d0dee79cf18","access_level":"public","create_time":"$D2018-10-16T03:56:08.892Z","update_time":"$D2018-10-16T22:36:49.886Z","view_time":null,"first_public_time":"$D2018-10-16T04:45:46.749Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c3dfac74cf0246fd","login":"guitlle","name":"Guillermo","avatar_url":"https://avatars-next.observableusercontent.com/87f6bcd504e40e00b88e5a66f20e0ab288848c457ae3f2acf24342cfbf35803c","tier":"starter_2024","bio":"My steemit user is \"elguille\"","following":false},"version":80,"publish_version":80,"role":null,"authored":false,"authors":[{"type":"individual","id":"2b34604f4644b67b","login":"guitlle","name":"Guillermo","avatar_url":"https://avatars-next.observableusercontent.com/87f6bcd504e40e00b88e5a66f20e0ab288848c457ae3f2acf24342cfbf35803c","tier":null,"bio":"My steemit user is \"elguille\"","following":false}],"members":[{"type":"individual","id":"2b34604f4644b67b","login":"guitlle","name":"Guillermo","avatar_url":"https://avatars-next.observableusercontent.com/87f6bcd504e40e00b88e5a66f20e0ab288848c457ae3f2acf24342cfbf35803c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Documentos HTML","cells":[{"id":0,"value":"md`# Documentos HTML\n\nEl HTML es un formato para almacenar documentos. Este cuaderno interactivo es un documento HTML que incluye código Javascript y CSS. \n\nLos documentos HTML se componen de elementos. \n\nObservablehq te permite crear fragmentos HTML de una manera muy sencilla y es algo que ya hemos hecho antes. Por ejemplo, para hacer un texto grande se puede usar un elementos de tipo \"h1\". Así:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`

Blabla

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`\n<h1> es un **tag** de tipo \"h1\". Estos tags se utilizan para poner títulos. Así como este tag hay muchisimos más.\n\nPodés aprender más sobre el HTML en esta guía de desarrollo de Mozilla: \n### https://developer.mozilla.org/es/docs/Web/HTML\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof color1 = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md` Esta variable es de tipo \"viewof\", lo que significa que está asociada a un elemento html. En el código de arriba podés ver que a la variable **color1** se le asigna un elemento html de tag input y que tiene otras palabras adicionales, como **type=\"color\"** y también **value=\"#ffffff\"**. Estos se llaman atributos y son parte del HTML. Estos definen cómo se va a ver y cómo se va a comportar el elemento. En este caso, se está creando un botón que permite seleccionar un *color* (type=\"color\") y además se le está dando un color inicial (value=\"#ffffff\") que va a usar en cuanto esta página se cargue. Al seleccionar un color con ese botón, la variable **color1** va a cambiar y va a almacenar ese nuevo color. Todo el código que use la variable **color1** va a volver a ser ejecutado gracias al funcionamiento interno de *Observablehq*.\n\nTambién hay elementos que te permiten construir tablas y hay elementos que pueden insertar imágenes:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"tablaPokemon = html`\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Pokemon	Tipo de pokemon	Imagen
Pikachú	Eléctrico
Psyduck	Psíquico
Charmander	Fuego
Staryu	Acuático

\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`Analizá el código de arriba y modificalo para entender cómo se construyen las tablas.\n\nTambién podés ver cómo se insertaron las imágenes que por cierto han sido sacadas de esta página: https://www.pokemon.com/us/pokedex/ .\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"