vocabulario	https://images.cram.com/images/upload-flashcard/56/20/77/34562077_m.jpg
etiquetas para organizar contenido	1.van dentro de body.\nheader = encabezado\nmain = contenido principal\nfooter = pie de pagina
<meta charset= "utf–8">	1.va en head.\n2.le dice al navegador que estamos usando el set de caracteres latino.
validator.w3.org	1.pagina para verificar si el codigo html esta correcto semanticamente.
e.b.<section>	1.tiene etiqueta de cierre.\n2.va dentro de main,que a su ves va dentro de body.\n3.sirve para agrupar contenido relacionado.\n
e.b<article>	1.tiene su etiqueta de cierre\n2.va dentro de main o section o las dos anidadas.\n3.es un contenedor que representa contenido independiente.
e.b.<aside>	1.tiene su etiqueta de cierre.\n2.va dentro de main.\n3.representa contenido relacionado pero que no forma parte del contenido principal.es una etiqueta de estructura.
elementos de bloque y de linea	1.lo elementos de bloque son los que ocupan el %100 del ancho de una pagina.\n2.elementos de linea,solo ocupan el espacio que su contenido ocupa.\n3.e.b. significa que esa etiqueta es de bloque,e.l. significa que esa etiqueta es de linea. 
casi todos los elementos de linea 	https://images.cram.com/images/upload-flashcard/61/32/75/34613275_m.jpg
atributos	https://images.cram.com/images/upload-flashcard/62/35/08/34623508_m.jpg
atributos disponibles para la mayoria de etiquetas en html	https://images.cram.com/images/upload-flashcard/62/35/37/34623537_m.jpg
link ancla	1.se coloca en body dentro de las etiqueta ancla "a" \n2.href es el atributo que nos sirve de ruta,dentro de su valor va ubicada la direccion o carpeta donde queremos llevar al usuario.\n3.al lado del valor pero fuera de la comillas,va a ir una indicacion a donde estamos llendo para que sea mas facil de entender,eso es lo que va  a aparecer en pantalla.\n	https://images.cram.com/images/upload-flashcard/33/32/80/35333280_m.jpg	https://images.cram.com/images/upload-flashcard/33/32/81/35333281_m.jpg
<a>	e.l.\n1.van dentro de body.\n2.sirven para vincular links.
rutas relativas y absolutas	1.rutas relativas,mandan al navegador a buscar dentro de carpetas o proyectos propios.\n2.rutas absolutas,mandan al navegador a buscar en otros sitios web.el protocolo que se usa esta en la img de pista.	https://images.cram.com/images/upload-flashcard/62/37/34/34623734_m.jpg	https://images.cram.com/images/upload-flashcard/62/37/35/34623735_m.jpg
rutas relativas,como buscar dentro de varias carpetas 	1.en la img muestra que el valor de el atributo href es pagina y despues contactos,esto sucede porque contactos se encuentra dentro de la carpeta pagina,cuando esto sucede,se coloca el nombre de la primer carpeta luego "/" y despues el de la siguiente,hasta ir a donde queramos.	https://images.cram.com/images/upload-flashcard/62/37/63/34623763_m.jpg
rutas relativas como buscar fuera de la carpeta que nos encontramos 	https://images.cram.com/images/upload-flashcard/62/37/87/34623787_m.jpg	https://images.cram.com/images/upload-flashcard/62/37/88/34623788_m.jpg
rutas relativas a la raiz del proyecto 	1.usando "/" al principio del valor del atributo href ,le indicamos al navegador que se dirija a la carpeta mas alta osea a la primer carpeta del proyecto,donde se encuentran todas las demas y de ahi los guiamos a la carpeta que queramos.	https://images.cram.com/images/upload-flashcard/62/38/01/34623801_m.jpg
porque se tiene que llamar index.html nuestro archivo principal ?	porque el navegador por defecto busca este archivo para cargar al entrar en un sitio web.
atributos de los enlaces o link	1.target="blank" lo que hace es que si pones una derivación a otra pagina o documento,lo abra en una pestaña aparte,para no perder la pagina principal.\n2.se coloca despues del atributo href.\n1.dowload,no es necesario agregarle un valor o el signo igual y las comillas \ncon solo ubicarlo al lado de el valor de href ya comprende el navegador que lo tiene que descargar.\n2.solo funciona cuando el archivo que queramos descargar este en nuestro servidor.\n	https://images.cram.com/images/upload-flashcard/62/96/99/34629699_m.jpg	https://images.cram.com/images/upload-flashcard/62/97/00/34629700_m.jpg
carpeta "assets"	1.esta carpeta es donde se guardan todos los medios externos,img,videos,iconos,ect.\n2.la carpeta la creamos nosotros y el nombre por defecto que se utiliza es assets.\n3.adentro de assets se crean las carpetas de imagenes,videos ect...depende si es que las vamos a necesitar,si usamos solo img creamos una de imagenes y ya esta.\n
atributo:    id	1.el atributo id se usa como ancla para ir a un sitio especifico de la pagina.\n2.el nombre del id lo definimos nosotros.\n3.a un id se lo llama con el atributo href y donde va el valor adentro de las comillas se coloca #nombre del id	https://images.cram.com/images/upload-flashcard/63/91/29/34639129_m.jpg
semantica para las listas en html	https://images.cram.com/images/upload-flashcard/64/54/06/34645406_m.jpg
sintaxis etiquetas\n<ul> lista desordenada.\n<li> elementos de la lista.        	https://images.cram.com/images/upload-flashcard/64/58/83/34645883_m.jpg
sintaxis etiqueta\n<ol> lista ordenada.	https://images.cram.com/images/upload-flashcard/64/58/82/34645882_m.jpg
semantica \n<dl> lista de definiciones.	https://images.cram.com/images/upload-flashcard/64/54/42/34645442_m.jpg
sintaxis etiqueta \n<dl> lista de definiciones.	https://images.cram.com/images/upload-flashcard/64/58/81/34645881_m.jpg
semantica 1\ntablas en html	https://images.cram.com/images/upload-flashcard/64/56/84/34645684_m.jpg
sintaxis etiqueta e.b. \ntable:tablas en html	https://images.cram.com/images/upload-flashcard/64/58/78/34645878_m.jpg	https://images.cram.com/images/upload-flashcard/64/58/79/34645879_m.jpg
semantica 2\ntablas en html:\ntitulos,pie de tabla,body tabla,cabecera.	los titulos de la tabla se establecen con la etiqueta caption,es una etiqueta opcional,y segun la especificación se coloca despues de la etiqueta table.\n\nlas cabeceras de las tablas se establecen con la etiqueta thead.\ndentro tendremos una etiqueta tr normal,pero en el caso de las celdas,las estableceremos con una etiqueta th en ves de td.\n\nel contenido de la table debe ir dentro de una etiqueta tbody para representar el cuerpo de la tabla.\n\nde forma opcional podemos colocar un tfoot a la tabla para establecer un pie de tabla,esto es algo que algunas tablas tienen como suma de cantidades o total.
sintaxis etiqueta e.b.\ncaption:titulo de tabla 	https://images.cram.com/images/upload-flashcard/64/58/76/34645876_m.jpg
sintaxis etiqueta e.b\nthead:cabecera de table 	https://images.cram.com/images/upload-flashcard/64/58/70/34645870_m.jpg
sintaxis etiqueta e.b.\ntbody para contenido de table	tbody es opcional si no se usa una cabecera de table,en el momento que se usa una cabecera,tbody hay que agregarlo obligatoriamente para marcar el contenido de una table y se coloca justo despues de la cabecera.	https://images.cram.com/images/upload-flashcard/64/58/65/34645865_m.jpg
sintaxis etiqueta e.b.\ntfoot 	1.se coloca despues del tbody.\n2.si no hay tbody se coloca antes de la etiqueta table de cierre.	https://images.cram.com/images/upload-flashcard/64/58/56/34645856_m.jpg
semantica\nhacer que una celda ocupe mas de una fila o columna	https://images.cram.com/images/upload-flashcard/64/58/35/34645835_m.jpg
sintaxis atributo.\ncolspan: una celda ocupe mas de una columna	https://images.cram.com/images/upload-flashcard/64/58/51/34645851_m.jpg
sintaxis atributo \nrowspan:una celda ocupe mas filas	https://images.cram.com/images/upload-flashcard/64/59/27/34645927_m.jpg
semantica\nseleccionar una columna,de table	1.sirve mas que nada para dar estilos ,por si necesitas darle color solo a una columna.	https://images.cram.com/images/upload-flashcard/64/59/69/34645969_m.jpg
sintaxis etiqueta \ncolgroup:seleccionar columna\n	el atributo span,te permite seleccionar mas de una columna.	https://images.cram.com/images/upload-flashcard/64/59/75/34645975_m.jpg
semantica etiquetas importantes de bloque 	https://images.cram.com/images/upload-flashcard/64/60/08/34646008_m.jpg
sintaxis etiqueta e.b.\n<address>	https://images.cram.com/images/upload-flashcard/64/63/28/34646328_m.jpg
sintaxis etiqueta e.b.\nblokquote	https://images.cram.com/images/upload-flashcard/64/63/52/34646352_m.jpg
sintaxis etiqueta e.b.\n<pre>	cuando necesitamos que todo se vea como lo escribimos,se usa pre.	https://images.cram.com/images/upload-flashcard/64/63/60/34646360_m.jpg
sintaxis etiqueta e.b\n<div>	es un contenedor de elementos,se utiliza para después poder dar estilos. 	https://images.cram.com/images/upload-flashcard/65/09/56/34650956_m.jpg
sintaxis etiqueta e.b.\n<hr>	solo se usa hr para informarle al navegador que cambiamos de tema,no se usa para dibujar una linea horizontal en la pagina.
etiquetas importantes de linea 	https://images.cram.com/images/upload-flashcard/64/65/74/34646574_m.jpg
sintaxis etiqueta e.l.\n<code>	va dentro de pre,sirve para representar el código que escribamos tal y como lo escribimos.	https://images.cram.com/images/upload-flashcard/64/66/00/34646600_m.jpg
pagina\nascii.cl	pagina para escribir caracteres especiales en html  
estructura básica de un formulario 	es obligatorio poner el atributo name en un formulario para poder enviar la informacion.	https://images.cram.com/images/upload-flashcard/65/12/69/34651269_m.jpg
sintaxis \nformulario en html	se le coloca un atributo id a input para despues llamarlo con el atributo for en label,cosa de que si el usuario hace clic donde dice nombre sea llevado al input.\n\nes obligatorio poner el atributo name en un formulario para poder enviar la informacion.	https://images.cram.com/images/upload-flashcard/65/12/72/34651272_m.jpg
semantica etiqueta e.l.\ninput \natributo type: y todos los valores que tiene para input	https://images.cram.com/images/upload-flashcard/64/74/19/34647419_m.jpg
mas valores de type en input	https://images.cram.com/images/upload-flashcard/65/04/04/34650404_m.jpg	https://images.cram.com/images/upload-flashcard/65/04/05/34650405_m.jpg
mas valores de type en input 2	https://images.cram.com/images/upload-flashcard/65/07/37/34650737_m.jpg
mas valores type de input	https://images.cram.com/images/upload-flashcard/65/08/62/34650862_m.jpg
input type radio 	name="gender",lo que hace es generar una clase donde uno solo de los tres,en este caso,puede estar marcado,en valor gender lo podemos cambiar por el que queramos,\n\nvalue,lo que hace es guardar un valor si es que ese fue seleccionado,y el valor que se guarda es lo que se pone en valor jaja 	https://images.cram.com/images/upload-flashcard/65/08/77/34650877_m.jpg
input type checkbox	permite que se puedan seleccionar varios elementos.	https://images.cram.com/images/upload-flashcard/65/08/86/34650886_m.jpg
semantica etiqueta \nselect	https://images.cram.com/images/upload-flashcard/65/08/99/34650899_m.jpg
sintaxis etiqueta \nselect	si al lado de el valor de name ponemus un atributo booleano llamado multiple,nos permite seleccionar varios elementos de la lista.	https://images.cram.com/images/upload-flashcard/65/09/24/34650924_m.jpg	https://images.cram.com/images/upload-flashcard/65/09/25/34650925_m.jpg
sintaxis etiqueta\ndatalist	a diferencia de select,datalist tiene un buscador que nos permite escribir lo que estamos buscando para hallarlo mas rápido.	https://images.cram.com/images/upload-flashcard/65/09/45/34650945_m.jpg
mas elementos para formularios 	https://images.cram.com/images/upload-flashcard/65/10/74/34651074_m.jpg
atributos para formularios	autofocus es un atributo aparte que se olvido de poner la descripción,lo que hace es que al cargar un formulario en el input que pongamos el atributo autofocus,va a ser donde ya pueda escribir sin tener que darle un clic.	https://images.cram.com/images/upload-flashcard/65/12/11/34651211_m.jpg
envio de formulario con el atributo\nmethod="get" o "post"	1.va dentro de la etiqueta form.\n2.post envía la información escondida sin que aparezca en la url.\n3.get la envía pero aparece en la url.	https://images.cram.com/images/upload-flashcard/65/13/12/34651312_m.jpg
que es el contenido embebido ?	https://images.cram.com/images/upload-flashcard/65/13/67/34651367_m.jpg
tipos de imágenes 	jpg,png,gif,siempre que se pueda,es mejor pasarlos a webp,y si no tienen transparencia o movimiento como el gif,si se puede,es muchisimo mejor pasarlas a vectoriales,pesan menos y tienen mejor calidad.	https://images.cram.com/images/upload-flashcard/65/14/12/34651412_m.jpg
etiqueta\nimg src="" alt=""	1.va dentro de body.\n2.sirve para cargar una imagen o gif a la web.\n3.se coloca la ruta en el atributo src y en el atributo alt se coloca una descripción obligatoria para los no videntes o por si no carga la img.	https://images.cram.com/images/upload-flashcard/65/14/44/34651444_m.jpg
device pixel ratio	significa que cuando tenemos una img grande para una web,en un pc funciona bien ya que la pantalla es grande pero en un cel no hace falta tener una img tan grande comprimida en una pantalla tan chica,por que es mucho peso alpedo,es mejor decirle al ordenador que ponga otro img cuando estemos en una pantalla de cel. \n\nel dpr de una pantalla de cel por lo general es de 3x \ny el de un pc 1x	https://images.cram.com/images/upload-flashcard/65/36/30/34653630_m.jpg
atributo para etiqueta img\nsrcset=""  (internet explore no reconoce este atributo,poner src aparte para internet explore)	1.se utiliza para cargar un set de img y poner una condición para que se muestre.\n2.generalmente se usa para pasar de una img de 1x a 3x osea de tamaño ordenador a tamaño cel\n3.las rutas de las img van separadas por comas.\n4.al final de la ruta de una img se hace un espacio y se pone la condición ejem: ruta 1x,ruta2 3x	https://images.cram.com/images/upload-flashcard/65/36/40/34653640_m.jpg
semantica etiqueta \n<picture>	1.sirve para cargar img,videos,gif.\n2.a diferencia de la etiqueta img,picture te da mas opciones,como cambiar el ancho,el alto de img.\n
sintaxis de etiqueta \n<picture> 	1.adentro de picture va la etiqueta source.\n2.adentro de source se puede usar el atributo srcset y te dice que es obligatorio usar la etiqueta img con el atributo src para poner una img de emergencia por si no se pueden poner las otras img.	https://images.cram.com/images/upload-flashcard/65/37/41/34653741_m.jpg
atributo de etiqueta source\nmedia="(min–width:xcantidadpx)"	1.el atributo sirve para cargar diferentes img según la cantidad de pixeles disponibles para pintar \n2.si el min de ancho osea width es 1200px se muestra la img si es menos no se muestra.\n3.esto lo podemos modificar a nuestro gusto\n4.cambiando min por max se puede poner un max para que se despliegue la img.\n	https://images.cram.com/images/upload-flashcard/65/37/89/34653789_m.jpg
etiqueta \n<audio> y sus atributos 	1.sirve para colocar audio en una web.\n2.tiene el atributo src="ruta del audio" para colocar la ruta donde se encuentra el audio.\natributos booleanos:\n3.controls: para que aparezca un reproductor para controlar el audio.(no es obligatorio)\n4.autoplay:sirve para que se auto reproduzca el audio,no funciona en casa ninguna pagina si no se pone el atributo muted.\n5.muted para que se reproduzca en silencio.\n6.loop:sirve para que el audio se vuelva a reproducir una ves que termine.	https://images.cram.com/images/upload-flashcard/65/40/64/34654064_m.jpg
etiqueta \n<video>	1.sirve para poner video en una web\n2.src:sirve para poner la ruta del video\natributos booleanos\n3.controls:pone un reproductor de video.\n4.autoplay:se reproduce el video automaticamente.\n5.muted:pone en mudo el video.\n6.loop:se vuelve a reproducir el video una ves que termine.\n7.poster:necesita una ruta para poner una img al principio del video.	https://images.cram.com/images/upload-flashcard/65/40/93/34654093_m.jpg
etiqueta\n<iframe>	1.es un pedazo de código que se obtiene de los videos de youtube y face o inst,osea sirve para colocar videos de otras paginas en las nuestras.\n2.el único defecto es que es muy pesado y ralentiza la carga de la pagina.  
etiqueta\n<figure>	1.sirve para poner un contenido relacionado,pero que aunque no este pueda seguir entendiéndose el contenido principal.\npor ejemplo:img,video,ect.. \n2.figcaption es una etiqueta para poner texto en img. va dentro de figure.	https://images.cram.com/images/upload-flashcard/65/41/76/34654176_m.jpg
etiqueta \n<meta name="viewport" content="width=device–width,initial–scale=1.0"	1.sirve para que podamos adaptar la pagina al cel.\n2.va dentro de head.	https://images.cram.com/images/upload-flashcard/65/42/22/34654222_m.jpg
etiqueta \nmeta name="description" content="contenido principal de la pagina"	1.va dentro de head.\n2.sirve para decirle al buscador de que se trata esta web,por si la buscan en google o otros buscadores,y eso se pone adentro de content.	https://images.cram.com/images/upload-flashcard/65/42/36/34654236_m.jpg
favicon	1.favicon es una pagina donde pones una img para usar como icono de la pagina y la adapta para todos los navegadores.\n2.solo hay que copiar el codigo que te deja y pegarlo en head.\n3.si lo guardamos en otras carpetas,cambia la ruta entoses el codigo que da favicon hay que adaptarlo a la nueva ruta.	https://images.cram.com/images/upload-flashcard/65/63/63/34656363_m.jpg
iconos en html \nfont awesome 	1.es una pagina con iconos ya diseñados gratuitos.\n2.elegís el icono que deseas usar,te dan un código html lo copias y pegas en donde quieras usarlo,obviamente adentro de body.  	https://images.cram.com/images/upload-flashcard/65/63/71/34656371_m.jpg
atributo de accesibilidad\ntabindex="1" 	1.sirve para poderse mover a través de una pagina usando solo el tabulador.\n2.se usan generalmente para gente invidente.\n3.los numeros que estan puestos como valor significan el orden en el que el tabulador recorra la pagina.	https://images.cram.com/images/upload-flashcard/65/63/90/34656390_m.jpg
atributo de accesibilidad \naria–label="descripción del contenido"	1.atributo para invidentes,sirve para dar una descripción del contenido que vamos a leer.\n2.en pantalla solo aparecería "leer mas " pero la voz que le comenta al invidente le diría lo que ponemos en el valor del atributo.   	https://images.cram.com/images/upload-flashcard/65/63/98/34656398_m.jpg
https://images.cram.com/images/upload-flashcard/65/64/04/34656404_m.jpg	1.una medida de las redes sociales para que cuando compartamos un link aparesca de esta manera.\n2.si nosotros usamos correctamente este protocolo vamos a ser nosotros lo que decidamos que img y texto aparece como referencia en la publicacion.\n3.para saber como usarlo entrar en esa pagina.	https://images.cram.com/images/upload-flashcard/65/64/05/34656405_m.jpg
Descubre
Crear Tarjetas
Acerca de Nosotros