Curso de Fundamentos de HTML 5

pero que nos hace falta para poder trabajar con páginas web son dos piezas por una parte un navegador web y por otra parte un editor web un navegador web es un programa que generalmente tenemos ya instalado en el ordenador o que muchas veces podemos descargar y que nos ayuda a abrir una página web y navegar a través de ella en cualquier sistema operativo actual suele venir ya algún navegador como victimó instalado en el caso de windows por ejemplo viene aquí una pequeña de color azul que es internet sin embargo por razones que ahora luego os contaré vamos a intentar evitar usar internet para luego es lo cuento vemos en este caso que debemos tener todos esto al navegador que es en google chrome hay varias alternativas por ejemplo google chrome es un buen color para empezar por ejemplo mozilla firefox tan pelo es entonces voy a empezar este lugar diciendo que navegadores hay y recomendando los instalar todos los que podáis ahora veréis porque voy a abrir por tanto el navegador chrome en que lo tengo en la barra inferior de hecho podéis abrir cualquier navegador y los navegadores más famosos a día de hoy y en primer lugar porque viene integrado con windows sin explorer a continuación tengo micro lo que hago es buscar en una nueva ventana en internet el navegador chrome mientras tanto lo tengo aquí google.com internacional español barra chrome o simplemente poniendo chrome en en una cadera web o en un buscador en segundo lugar tengo otro también muy conocido que se llama firefox dries en la fundación mozilla en fila a punto o hereje estos dos a día de hoy son los más conocidos también tenemos un par de navegadores más como por ejemplo uno muy desconocido pero también muy lo encontré en la ópera puntocom y también por supuesto tenemos un navegador llamado safari que es de apple que es el navegador que viene por defecto en los sistemas relativos de mar estos son cuatro más internet explorer cinco navegadores más usados a las fuentes de internet cuál es de recomendar descargar evidentemente recomendar descargarlos todos todos los que podáis porque cuando hagamos un sitio web finalmente nos hinchar a utilizar esperar que recargar de nuevo esta página utilizar todos los navegadores web que puedan tener nuestros usuarios para en definitiva probar cómo se va a ver nuestra página entonces los navegadores web en los que van a navegar nuestros usuarios en el caso de safari os voy a contar que tenemos un pequeño problema ahora mismo y es que ya son unas cuantas versiones que safari está para windows safari ya hace unas cuantas versiones que sólo está práctica por tanto una cosa que puedo hacer es en un buscador buscar safari for windows y encontraremos alguna versión antigua por ejemplo fijaos safari 5.1 puntos 7 para windows encontraremos todavía alguna versión antigua que nos podemos cargar aunque lo ideal evidentemente es que tengamos alguna para en un momento dado poder probar en un safari actualizado como es nuestra web por tanto mi recomendación va a ser en la medida que podáis si queréis no ahora pero a lo largo del desarrollo de una web y lo que bajando e iros descargando iros instalando todos navegadores web que podáis para antes de lanzar mar ya anticiparon a los problemas que puedan existir y probar esa web en cualquier navegador que pueda existir en este caso además estoy ahora mismo en un pc estoy ahora mismo en un ordenador fijo tendríamos que tener en cuenta cada día más los navegadores móviles los navegadores de dispositivos móviles porque cada día hay más visitantes que páginas y dispositivos móviles y cada día hay menos visitantes porque los que entran por una parte no entran por la otra en ordenadores digamos pero más adelante en este curso evidentemente tendremos en cuenta no sólo ya los navegadores para móviles sino la creación de páginas web para dispositivos bien hemos dicho por tanto que la primera pieza que necesitamos es un navegador la segunda pieza es un editor la segunda pieza es algo con lo cual podemos editar código no hace falta ningún software particular ningún software específico para editar código html técnicamente podría texto mira que podría venir aquí crearme una carta voy a crear una carpeta me había carne de carpeta en el escritorio llamada jose vicente y dentro de esta carpeta voy a pinchar un nuevo documento de texto y voy a crear un documento de texto llamado index tengo un problema el problema es este problema será en sistemas operativos windows desde windows vista y no se da en otros sistemas operativos como el mac o como en linux el problema es que desde windows vista microsoft windows elige ocultarme las extensiones de archivo este archivo me está diciendo que es y text pero me está diciendo además que es un documento de texto es decir realmente es un archivo que se llama index punto txt en este curso va a ser muy importante que podamos llegar que podamos ver las extensiones de archivo por tanto tengo que hacer algo para conseguir que el sistema operativo no me engañe y me diga cuál es realmente la extensión lo que haré en cualquier sistema operativo es lo siguiente no me voy a organizar segundo me voy a opciones de carpeta y búsqueda y dentro de opciones de carpeta y búsqueda hacer es en la pestaña ver me voy a despertar a ocultar extensiones de archivo para archivos conocidos pero pronto aplicó y acepto pudo comprobar que el archivo que tenía en ese apretado aunque se parecía que estaba index realmente se llama index punto txt captó como he llegado a esa ventana pues me he ido a organizar en primer lugar he sacado un explorador de windows o un mi pc me he ido aquí a organiza medido a opciones de carpeta y búsqueda y dentro de la pestaña de espn esta opción que viene activada por defecto que es ocultar las excepciones de archivo para archivo conocido esto hay que hacerlo una vez en cada ordenador la buena noticia que una vez que lo hace será por ejemplo hago y vuelvo a encender la opción que he configurado por tanto ahora este archivo que tengo aquí ya no es un archivo index sino que es el chivo index punto tx por tanto ahora para hacer clic y cambiar la extensión txt por las letras html en algunos sistemas operativos como en windows me dice que al cambiar la extensión archivo puede quedar en utilizable así que estoy seguro de que deseo cambiar para elegir esto por tanto que acabo de hacer es no acabo de crear es una página web vacía evidentemente lo que ahora será añadirle algo de código como decía por tanto no es obligatorio trabajar un editor de código específico para nuestros proyectos por ejemplo el bloc de notas que existe dentro del propio sistema operativo windows o el editor de notas está en línea un poco también la distribución pero el micro bloc de notas podría servir para editar un archivo por tanto por ejemplo en este caso voy a sacar el bloc de notas le digo archivo abrir del escritorio me voy a la carpeta jose vicente abro en este caso el archivo index html y ya podría empezar a escribir aquí por ejemplo pondría esto es una página web y si ahora guardo archivo guardar y visualizo la atención me hago doble clic en el archivo index html y lo visualiza con un navegador web compruebo que el texto que he escrito es válido como página web por tanto no vemos de un programa concreto para evitar código podemos hacerlo con cualquier programa incluso con ningún programa con un bloc de notas que podríamos considerar que sería lo mínimo para editar código pero sin embargo aunque esto se puede hacer también recomiendo hacerlo intento un poco por regla general e intentó huir de programas que me ayudan demasiado de programas que hacen demasiadas cosas por ti porque me málaga duro a esos programas y cuando estoy en un entorno en el que no tengo ayudas a ver que dependan esas ayudas tampoco lo voy a hacer tan duro como abrir el bloc de notas y empezar a escribir código lo que suelo recomendar es un término intermedio es un editor de código que me ayude de alguna manera marc que de alguna manera el código que estoy escribiendo para comprobar si lo que estoy haciendo es más o menos correcto o no mis criterios para elegir editores de código son dos primero que el editor de código sea de software libre para que no os cueste dinero empezar a editar páginas web o bien no os cueste dinero o bien no tengáis que ir a crear ningún tipo de software y el segundo criterio que sólo elegir para elegir well es que sea multiplataforma es decir que entre el mismo editor en windows mac y linux para que si en algún momento te cambia el sistema operativo dentro de lo posible las mismas herramientas para editar de esta manera el editor que suelo recomendar es un editor llamado g entonces para encontrarlo simplemente tengo que poner edit el buscador y en primer lugar con toda probabilidad llegaré a esta página que es wiki jeje edit en segundo lugar tengo softonic sohanny que no me quiero ir al final al punto kg si dentro de esta página pincho en download pensó en descarga encontraré que por una parte me puedo bajar el que fue entrada compilarlo si sé hacerlo por otra parte me puedo bajar los archivos binarios para windows y por otra parte me puedo bajar los leds instalables para mac no pone nada de linux porque edit suele estar instalado en la gran mayoría de distribuciones de linux especialmente en aquellas que se basan en nombre por tanto dependiendo del sistema operativo en el que esté lo que haré en este caso por ejemplo si estoy en windows xp binarios windows elegí una versión en este caso voy a elegir la última a la 2 30 y dentro de la carpeta lo que voy a hacer es bajar el archivo exe que haya en este caso el eje para windows ocupa 23 hagas lo cual pues en unos pocos segundos quizás algún punto dependiendo del ancho de banda de la red en la que estemos tendremos el programa correcta más descarado en mi caso no me lo voy a descargar voy a cancelar la descarga porque ya lo tengo instalado en el sistema si vosotros no han instalado pues tenéis que bajarlo y posteriormente instalarlo una cosa que os voy a decir es que este programa es de completa confianza quiero decir sabemos lo que estamos descargando en la página como ya os digo es de confianza por tanto cuando lo tengáis descargado le puede dar a ser el siguiente siguiente siguiente tengo un miedo yo siempre recomiendo rise estos programas que no sean de confianza porque es el siguiente siguiente siguiente luego de instalar un montón de virus y cuando de cosas que nos han salido pero con este programa concretamente os podéis fiar de forma siempre recomiendo leer vale pero le puedes dar siguiente sin ningún problema aparte veréis que en ningún momento se expide licencias porque usa la licencia del software libre así que en un momento se han instalado para poder empezar a trabajar en mi caso como ya os digo ya lo tengo instalado para eso voy a buscarlo directamente en el menú inicio voy a abrirlo y para ver que este es el programa menos impresionante del mundo damos cuenta que prácticamente es un editor de textos para lo cual vale con este editor de textos vamos a estar trabajando dentro de este curso este es por tanto el programa que vamos a usar durante esa formación es edith y le vamos a dar para editar como os voy a decir de todas formas que este programa fantástico pero al principio no viene demasiado bien configurado y cosas que se podrían afinar por tanto vamos a editar la configuración de este programa para asegurar que su estado su configuración sea óptima para lo que queremos hacer me voy a ir al siguiente lugar si estoy en windows me voy a héctor y voy a encontrar que aquí abajo tengo preferencias esto es exactamente igual sostienen windows o si estoy en linux si estoy en mac voy a pinchar en el propio nombre del programa arriba a la izquierda donde ponen edit y pita edith me iré a preferencias entonces me voy a ir como os decía a editar preferencias si estáis en magno edit preferencias y me sale esta ventana así que antes de empezar a trabajar lo que me gustaría hacer es configurar edit una cosa que voy a hacer es entrar lugar dentro de esta pestaña a ver voy a mostrar números de pie porque probablemente en algún momento u otro comete un error y prueba delante cuando cometa un error el explorador me dirá tienes un error en la línea 54 defectos saber 4 línea 54 en segundo lugar me voy a ir a la segunda pestaña llamada editor donde veremos que el ancho del tabulador ahora mismo por defecto está a 88 me parece excesivo para editar código es muy incómodo con 8 vale por tanto lo que voy a hacer es cambiar el valor de tabulador de 8 artest y por último el tercer parámetro que voy a tratar es la sangría automática para que cada vez que yo haga un sangrado al pulsar enter se respetó sangrado en la línea justo inferior si ya tengo estas tres opciones marcadas voy a pulsar cerrar y ya puedo empezar a escribir código vamos a empezar por tanto nuestro proyecto de la siguiente manera corriendo el curso vamos a ir desarrollando un proyecto activo evidentemente vamos a ir desarrollando una web así que voy a hacer lo mismo que había hecho antes pues me habéis visto me voy a eliminar esta carpeta que había hecho antes porque la voy a volver a crear lo que tenemos que hacer es en el escritorio nos buscamos una zona vacía voy a pulsar un botón y voy a crear una nueva carpeta a esta carpeta voy a poner mi nombre cada uno debe poner su nombre y voy a hacer doble clic en carpeta para entrar dentro de ella ahora mismo está está vacía como hemos configurado previamente los nombres de extensión al ver las extensiones de archivo crear sin ningún problema archivos nuevos hacer esto en windows es real es sencillo no en mac no lo es tanto por tanto si estoy en un grupo simplemente voy a pulsar click en botón derecho nuevo documento de texto y voy a crear un archivo llamado index.html si estoy en mac una cosa que puedo hacer atención es darle a archivo guardar como y simplemente archivo que viene por defecto en gp me lo guardo en el escritorio en la carpeta jose ambiente y lo guardó como index.html es decir en jar de crear el archivo directamente en el explorador de windows lo puedo guardar desde edith le puedo guardar como archivo nuevo en here it y de esta manera finalmente tengo aquí un archivo index punto 7 ml cargado en el editor y tengo un archivo index.hr ml es el mismo en la carpeta web si lo habéis creado directamente en la carpeta viral si lo habéis creado directamente ahí en la carpeta y aquí tenéis documento no guardado no pasa nada porque también podemos pinchar el archivo los pasos hacia el interior de edit y nos aseguramos de que cargamos ahí dentro index html y de que definirá vamos a estar trabajando editando el archivo y ex punto html ahora voy a hacer lo siguiente vamos a ver a la hora de abrir ese archivo desde dos perspectivas en primer lugar lo quiero abrir el editor de código y en segundo lugar quiero hacer doble clic arriba con un navegador web de esta manera si lo he hecho de esta manera voy a hacer nuestras pestañas abiertas en el navegador web ahora estaré viendo este archivo desde las perspectivas no estaré viendo por una parte en la parte izquierda de la pantalla como edición de juego y por otra parte a la derecha de la pantalla lo estaré viendo como resultado en el navegador web ahora mismo el archivo está vacío y por tanto lo veo como página en blanco tanto el editor como el navegador es normal vamos a comprobar que estamos editando mismo archivo y si queréis antes de comprobarlo además de comprobarlo lo que voy a hacer simplemente es huir antanas en la pantalla cómo voy a hacer esto mirad es muy sencillo desde windows vista ocurre que se pinchó una ventana y la arrastró hasta la parte izquierda de la pantalla automáticamente pasa a ocuparme la mitad de izquierda y si una ventana y la arrastró hacia la mitad derecha prácticamente pasa a ocuparme la mitad derecha por tanto para perder el menor espacio posible lo que quiero que hagáis es simplemente hacer que el editor de códigos ocupe el 50% izquierdo del lector de códigos ocupe el 50% derecho además de la barra de tareas la barra de inicio ocupa su espacio y creedme necesitamos el mayor espacio posible para editar nuestros archivos lo que voy a hacer es propiedades y ocultar automáticamente la barra de tareas para que ese espacio sin automáticamente a nuestro espacio de trabajo ya sea edición de código o ya sea navegador web antes de continuar por tanto una primera comprobación la comprobación va a ser la siguiente mira dentro del archivo de código dentro de help algo tan sencillo como hola mundo voy a poner hola mundo y no puedo esperar que automáticamente este hola mundo apec pero del navegador web por eso lo que haré es el mundo el real disquete de guardar o bien le doy a archivo guardar o bien pulso la creación rápida de teclas que es control s una vez más sólo por haber guardado no puedo esperar que el rosado se vea en el navegador en el navegador tengo que recargar tengo que pulsar este botón de cargar página de nuevo tengo que pulsar ese botón o bien pulsar f5 o bien usar control r command r los que estéis en mac para recargar y por tanto ver ahí hola mundo señal de que estamos trabajando con el mismo archivo en dos perspectivas por parte en la perspectiva de cómo y por otra parte en la perspectiva desde el navegador web es decir una cosa es lo que estamos portando y otra cosa es cómo se como la gente va a ver la estamos programando empezamos por tanto a evitar código y lo que haremos ahora simplemente es escribir dentro de este archivo index html que he creado a por cierto una pregunta que soléis hacer es porque lo has llamado index html se podría haber llamado calabaza html longaniza html se podría haber llamado así es costumbre que cualquier navegador web o mejor dicho cualquier servidor web cuando entras en un sitio web y hay un montón de páginas la primera que te da es aquella que se llame index punto html es una convención vale por tanto dentro de un sitio web el puesto de páginas sobre mi punto l quien soy punto que ml que hago punto html todas esas se pueden llamar como queráis con algunas condiciones que luego os contaré como por ejemplo no poner espacios o no ponen acentos a la página principal de nuestro sitio web y vamos a asumir que trabajamos ahora con esa página principal debe adaptarse index.html dicho esto y teniendo en cuenta que ya estamos trabajando con esa página index.hu tml voy a borrar el texto que ha escrito hasta ese momento y voy a empezar a escribir una cosa que en html se llaman etiquetas dentro del lenguaje marcado la información está organizada en etiquetas una etiqueta es mucha cosa que esté dentro los caracteres menor que y björk una cosa que sólo yo para que lo veáis bien y lo veáis claro en vandal skin head it se puede ampliar el tamaño de la tipografía no lo hagáis vosotros son lo que sé yo entonces me voy a ir a editar me voy a ir a preferencias me voy a ir a tipografías y colores y en lugar de usar la fotografía había en su hijo normal voy a usar por ejemplo la tipografía que viene por defecto pero por ejemplo con un tamaño de 20 de esa manera obtener mejor el código que voy a escribiendo en pantalla inevitablemente a lo largo de las sesiones cree que volverá al tamaño original cuanto más vayamos avanzando más código ir escribiendo y por tanto llegado ese momento será incómodo trabajar con texto grande de volver a trabajar con texto pequeño pero hasta que ese momento llegue y para hacerlo más cómodo voy a trabajar si hemos dicho por tanto que las etiquetas son todo aquello que va entre el menor que y el mayor que vamos a empezar por una etiqueta que se escribe de la siguiente manera dentro del menor que porque voy a poner un signo de admiración aunque curiosamente las etiquetas colorean de color morado dependiendo del editor de código que estés usando si no es head y puede colorearse de otro color el color es lo de menos lo importante que se colorea y se colorea porque empieza a reconocer que eso ya es una etiqueta html así que después del símbolo de admiración cerrado voy a poner lo siguiente doc trip html esta es la primera etiqueta que vamos a usar es la etiqueta doc type y deberíais usarla al principio de cada proyecto es una etiqueta que informa al navegador de que todo lo que se va a encontrar a continuación va a estar escrito en lenguaje html y además al ser un 5 de html no hace falta poner docta http l 5 con que pongáis docta html ya es suficiente a partir de aquí los voy a decir aquí que está doctor es un poco una rareza porque es una de las pocas etiquetas en html que se abren pero no se cierran la gran mayoría de las etapas de html entre un 90 y un 95 por ciento se abren y se cierran que al fin esto os voy a hacer una demostración justo después de octay voy a poner una etiqueta que se llama hs y a continuación voy a poner una etiqueta de cierre html cuál es la diferencia entre las dos la diferencia es que la etiqueta original simplemente se nombra menor que el nombre de la etiqueta y mayor que en este caso html y la ética de cierre es exactamente igual que la etiqueta de apertura con la diferencia de que tiene una barra por tanto si esta es la etiqueta de apertura de html esta es la etiqueta de cierre de ml dentro de este lenguaje de marcado tenemos una cosa que se llama limpias y es que hay etiquetas que contienen a otras etiquetas qué quiere decir esto me voy a hacer un poco de hueco le voy a hacer un poco de espacio dentro de la etiqueta html la apertura y del cierre de espacios simplemente pulsando enter y a continuación voy a la el tabulador la tecla del color es la que está dos más a baja de escape hasta arriba de bloqueo eyeos q las puso una vez mira y me hago una sangría una sangría en este caso de tres caracteres porque antes he elegido que la quería de tres caracteres y aquí os voy a decir una cosa que os va a parecer broma no es broma y es que me voy a hacer una etiqueta llamada cabeza y otra etiqueta llamada cuerpo porque en ml existe el concepto de caixa y existe el concepto de cuerpo por supuesto evidentemente las estudios escribiendo en inglés algo que os comento más adelante es que html es un lenguaje bastante permisivo que te permite aunque te recomienda crear tus propias etiquetas pero evidentemente a menos que esto sea estrictamente necesario lo evitaremos vamos a crear vamos a escribir etiquetas estándares porque ya veremos más adelante que nos interesa os conviene cumplir todo lo que vemos los estándares la diferencia entre el head y el body todo aquello que esté en el gel va a ir directamente al navegador no va a ser en su gran mayoría visto por el ser humano sino que va a ser visto va a ser analizado por el navegador web y todo aquello que esté ex body va a estar destinado a ser visto por el ser humano por tanto jefe es para la máquina body es para el ser humano vamos a empezar a escribir algunas etiquetas una primera etiqueta impresa en el gel es la etiqueta title la etiqueta title nos permite ponerle un título a la web y como veis y como la gran mayoría de etiquetas se abren y se cierran esto quiere decir que me hago espacio dentro de head y dentro de g escribo una etiqueta apertura title y una etiqueta de cierre title las etiquetas que han aparecido hasta el momento las he escrito yo todas eso quiere decir que si manualmente escrito title manualmente he escrito menor que barra type y mayor que os voy a decir ya que estamos en este punto que edith no es el único editor con el que podéis editar código hay otros editores como por ejemplo brackets de adobe o como por ejemplo en netbeans que nos todavía más ayudas hay editores que yo escribo de tyc lo escribo el cierre automáticamente me escribe en la etiqueta de encierre decir escribiría tight y en cuanto script ya mayor que automáticamente me escribiría la etiqueta de cierre title por eso aunque yo no lo he hecho aunque yo estoy trabajando directamente con las etiquetas os voy a decir que existen editores que nos dan más ayudas que heavy no hay ningún problema por usar editores de código que hagas de hecho algunas ayudas de vez en cuando no nos vienen mal yo simplemente quiero es que os intentéis acostumbrar a este código con las menos ayudas posibles porque os voy a poner un ejemplo si tenéis carnet de conducir yo lo poner un poco el ejemplo de que las ayudas código son el profesor de la autoescuela que va a tu lado y de alguna manera tú vas tranquilo porque sabes que si cometes algún error el profesor te lo corregirá de esa manera un poco te confías pero qué pasa al día que te sacas el carnet de conducir y ya no está el profesor de autoescuela al lado pues que deseabas muy inseguro porque sabes que antes es como interior es el próximo a corregir para de repente no vale por tanto dentro de lo posible os recomiendo que tampoco os acostumbréis demasiado a la salud y que os acostumbréis a escribir tanto como podáis de los mismos bien como os decía dentro de title vamos a escribir el título de nuestra página cual es el título de nuestra página como no hemos puesto ninguno por defecto el título de nuestra página es index.html así que en mi caso voy a poner un título el título es el que queráis ahora si escribimos en el idioma que queráis entonces host vicente carratalá cada uno va a hacer su página ya con formador a un programador o y diseñador se me ha ido a la línea de abajo no pasa nada y ahora quiero que comprobéis lo siguiente si pulsó el botón de dar me voy al navegador y pulso recargar quiero que comprobéis uno que en el navegador no aparece nada en la navegadora está en blanco pero todos aquí arriba aparece el título que haya expuesto una vez más solo lo que está en bodh y es lo que verá el usuario lo que esté en title es lo que va al navegador otra cosa antes de continuar y dejadme que baje un poquito el tamaño de la letra vemos por también lo que hemos hecho hasta ahora es escribir con unas pie de sangrías vemos por tanto que para él quien está dentro de quien quien depende de quien hemos creado sangrías para comprobar que el bloque está dentro de html y que todo este bloque está dentro de la etiqueta head la cuestión es las sangrías en html son funcionales o son estéticas hay otros lenguajes de programación u otras plazas de marcado en los en las sangrías son funcionales no poner sangrías puede hacer que el programa o el código funcione p en html no ocurre así en las sangrías no son funcionales son meramente estéticas si yo hubiera escrito sin sangrías el código funcionaría exactamente igual de bien pero aún así os voy a recomendar trabajar con sangrías para que cuando le echemos un vistazo al cuerpo para que cuando leamos el código podamos ver mejor qué es cada cosa no ya en un ejemplo como éste éste de sencillito pero os aseguro que dentro de poco tiempo este ejemplo se va a complicar bastante y cuando se complique necesitaremos de un cazo saber quién está dentro de quién y quién depende de quién las reglas de html no las hago yo sino las pone un consorcio una organización que se llama w3c entonces voy a buscar lo siguiente voy a buscar w3c hallyday thor el w3c world wide web consortium es un consorcio que está formado por multitud de empresas prácticamente todas las grandes y tiene una útil que podéis encontrar en bali dator punto w 3 punto o hereje básicamente es un sitio web en el cual tú subes tu página tú subes tu código y te dices si está bien está mal y si está mal y esto es lo mejor te ayuda a corregir lo que está mal en este caso un segundo que parece que está quedando un poco en cargar aquí estamos en este caso lo que voy a hacer es subir el archivo que acaba de desarrollar para poder validar lo mirad hay tres maneras de ayudarlo por una parte puede validar mediante la upa l si tengo una url en este caso no la tengo yo tengo una url cuando tengo una página ya publicado en internet en nuestro caso ahora en este motor que ya no algún recurso los vamos publicada para lo mismo todavía no puedo ayudar mediante subir un archivo esto es lo que voy a hacer o puedo validar poniendo directamente código en la pantalla así que mira me voy a pinchar en validar por subida de archivo el programa me dice la página me dice seleccione el archivo que quiere subir así que pinchó seleccionar archivo me voy a escritorio selecciono página que he creado pulsó el botón check al pulsar el botón check lo que ha realizado es subir la página web validar la y decirme si pasa o no pasa y en este caso de en el momento en el que estoy viendo rojo es porque no la página como html5 si aprende más de los errores que de los aciertos y como he dicho esperaba que esta página a un error lo importante no es que me diga qué error stein lo importante es que me detalle cuál es y entonces tengo tipos de cosas dos tipos de notificaciones tengo advertencias y tengo errores las advertencias no son técnicamente errores son cosas que debería corregir pero tampoco se presenta en el estándar y luego abajo tengan cosas que sí que es un error mira tengo aquí error de validación un error la codificación de caracteres no ha sido década así que asumo y procedo usando windows 1252 que es eso vamos a ver los web las páginas web han sido inventadas no fueron inventadas en eeuu contra un poco de la creencia popular se inventaron en suiza por un investigador llamado tim berners-lee el cual ahora luego hablaremos un poco la cuestión es que aunque no se crean en eeuu quieras que no el mundo anglosajón pesa bastante el idioma inglés pesa bastante a la hora de definir la web por tanto la web requiere que tú le digas que aunque juego de caracteres vas a trabajar si no asume que trabajarás con el juego de caracteres inglés pero cuando pongas una ñ cuando pones un acento cuando pongan su vez ese día fallará porque el juego de caracteres inglés no está preparado para el juego de carácteres pero si el juego de carácter que podríamos encontrar en países de habla hispana creo que por ejemplo en alemania está la beta en francia está haciendo circos lejos en rusia directamente está el conjunto cirílico japón china corea y demás hablamos y necesitamos por tanto especificar con qué juego de caracteres exacto vamos a trabajar aprovecho también esto para deciros que yo no me lo sé todo de memoria yo lo pensé todas las citas evidentemente las que uso más frecuentemente se que me la sé pero os voy a decir que es imposible sabérselas todas y es posible saber si los parámetros de cada una de las etiquetas que es lo que hago cuando necesito buscar información me voy a google y busco que tengo atención html tf8 o html carácter inco ding lo que voy a hacer es localizar alguna página también dentro de mi blog de artículo específicamente para cómo resolver el tema de la acreditación y dentro de internet dentro de algún sitio web que voy a encontrar voy a poner la ética de codificación y voy a arreglar este error este error me dice no tienes una etiqueta de codificación de caracteres pues lo que voy a hacer es buscar la etiqueta de codificación de caracteres momentín que parece que me estaba dando internet y ahora en un momento aparecerá la página web ya tenemos aquí parece que empieza a cargar me voy a ir por ejemplo pues a esta primera de hecho es una fuente de referencia que suele usar bastante hay gente que se mete con esta página bueno lo hablamos de las ventajas y los inconvenientes que tiene pero en definitiva lo que quiero es algún intérprete ya sea documentación oficial o ya se ha documentado extraoficial en algún foro por el punto que me puedan decir cuál es la etiqueta que estoy buscando por eso digo que mi objetivo útil entonces no es aprenderme todo de memoria sino en cualquier momento saber dónde puedo encontrar la información que me falta por tanto he entrado dentro de esta página y observó cómo existen dos variaciones para la etiqueta de f-8 yo intento seguir la regla siempre que no me salten los estándares de ser más bajo posible es decir de escribir el menor único posible siempre por otras posiciones por tanto voy a copiar esta etiqueta mirad copio en sad y que está la bajó de title y es una etiqueta que simplemente dice meta y a continuación tiene una cosa nueva no habíamos visto hasta ahora que es charset es cual af8 es una etiqueta ml damos cuenta que tiene el color verde clarito propio de la etiqueta en él pero dentro antes de que acabe el cierre antes de poner el mayor que hay una cosa que está de color violeta llamada charset igual a otra que ya que está de color rosa o morado llamado efe jon 8 es que tenéis ahí es un atributo de la etiqueta html y todos los atributos en este caso el atributo charset son parejas por una parte charset es el nombre del atributo y por tanto tf8 en este caso es en el barco esto es una etiqueta meta que tiene un atributo llamado juego de caracteres que es igual a 13 8 lo que voy a hacer ahora simple y sencillamente va a ser guardar el código resultante me voy a ir al valor de la w3c y mirad voy a volver a seleccionar el mismo archivo y pulsar este botón que tenemos aquí abajo a la derecha en la pantalla llamado red great y con great lo que va a hacer es volver a subir el archivo html volver a examinarlo y comprobar si ahora pasamos o no pasamos fijaos que después de haber escrito esta etiqueta ahora el documento pasa como html5 seguimos teniendo un warning vamos a ver qué dice el warning y el warning nos dice que estamos usando una característica experimental que es html 5 suponía que haciendo el 5 se tenía que haber convertido en un estándar en abril este año pero todavía se considera simental de benestar yo creo a punto de lanzarlo como estándar final por tanto no es una advertencia podemos hacer nada durantes y que podríamos hacer algo podríamos bajar a html 4 pero pienso que no es una alternativa válida por tanto estando a punto de validar html5 prefiero contar con esa advertencia lo importante en este caso es que hayáis visto la filosofía de en cualquier momento desarrollar validar desarrollar crear y para poco intentar corregir todos los errores que podamos fijaos que dicho intentar no he dicho conseguir porque muchas veces no lo vamos a conseguir pero no pasa nada muchas veces en pro de que la página quede como nosotros queremos tendremos que romper alguna regla ahora bien que sean las menos reglas posibles dentro de lo que cabe lo que tenemos y por tanto en la pantalla es la estructura que debe tener un documento para crear una página web es decir esto que tengo en la pantalla podríais considerarlo algo así como una plantilla cualquier página web que crepes tiene que tener este elementos y a partir de ahí empezamos a desarrollar y empezar a desarrollar me voy a meter el link para que la recreación ha pasado y voy a poner algo tan sencillo como hola mundo el mismo hola mundo que tenía antes pero ahora escrito dentro de la etiqueta body y si ahora guardo y recargo comprobar que en el navegador aparece hola mundo algo que suele frustrar bastante a quien empieza a aprender a crear páginas web es que la gente dice ostras hemos escrito 12 líneas y no aparece ninguna de ellas en el navegador web todo aquel código que escribimos no tiene por qué verse en la pantalla tened en cuenta lo que siempre digo es que html es algo así como el esqueleto de la web y el esqueleto no tiene por qué verse pero aunque no se ve sujeta a nuestra web aprovecho también este momento para deciros que aunque todo el código no se vea mismo cuente en la pantalla sí que es tiene en cuenta que quiere decir esto mira voy a pulsar con botón derecho por allí en el medio en el navegador y voy a elegir una opción llamada el código fuente de la página se ve o el código fuente a la página de una nueva pestaña de navegación donde se ha transferido todo el código hemos espetó pero aunque ha transferido visto totalmente sólo se traduce al mundo esto es así y es deseable y veréis más adelante que aunque las etiquetas por moverse en el navegador realmente tienen mucha importancia bueno he escrito una web mínima o también a mínima que es una prueba en la que pone hola mundo pero ahora lo que quiero es escribir una web en la que pues haya contenido una además al uso y voy a empezar enseñando unas cuantas etiquetas estructurales una que proviene de html 4 y unas cuantas que son novedad en html 5 en primer lugar escribir una etiqueta ya está bieber esta etiqueta se abre y se cierra bill es la palabra breve para división dentro de un sitio web ya lo veréis voy a estar constantemente retirando divisiones esta etiqueta no es nueva proviene de html ejecuciones anteriores y antiguamente no había prácticamente manera de realizar divisiones con esta etiqueta pero sin embargo a partir de html5 aparecen nuevas etiquetas que podemos usar tres de ellas unas siguientes en primer lugar una etiqueta llamada no confundir con hair no es lo mismo head es una etiqueta que va navegador que le proporciona información al navegador heather es la que está para crear cabeceras de un sitio web una etiqueta que ya forma parte del estándar para html 5.1 es la etiqueta en la etiqueta principal la etiqueta que indica dónde vas a poner el contenido principal de un sitio web y por último tenemos otra etiqueta llamada footer el género estas tres por tanto son éticas estructurales y guardo y recargo veremos que no vemos a la talla no vemos empieza el header y donde acaba no vemos dónde empieza la etiqueta main los actos de momento pero más adelante veréis como sí que tiene mucha importancia poner estas etiquetas estas son las principales pero no son las únicas etiquetas estructurales con las que vamos a contar entonces dentro de heather me voy a hacer un poco de un poco más adelante veremos más etiquetas estructurales pero empezó a escribir algo de contrato algo que se pueda ver en pantalla ningún texto debería ir suelto señor pongo aquí ese texto está suelto es cierto que está dentro de heather pero no estoy especificando si es algún texto de párrafo si es un título o qué es ese texto así que vamos a empezar hablando de títulos hablando de titulares existe una etiqueta llamada h1h1 que abre y se cierra la h viene de jeringa titular y el 1 es el nivel de importancia hay seis niños es de importancia que van del 1 al 6 donde el 16 es el menos importante lo que os voy a recomendar es que siempre seréis con el h1 y dentro de la h1 voy a hacer algo que parece redundante que va a ser poner lo mismo que he puesto en el título si ahora guardo y el crítico podréis observar como por una parte si en el title pone su vigente carratalá aquí arriba pone josé vicente carratalá y podéis observar como si en h1 polis josé vicente carratalá aquí arriba en la página conejo subir de cara tala otra cosa puedo entender por qué la gente ha llegado a este punto me lo suele empezar a preguntar que crear es cambiar el estilo que me digáis no me gusta la letra porque no me gusta la tipografía porque no me gusta extender porque no me gusta ese tamaño o porque no me gusta ese color ese tipo de dudas no se resolverá ahora estamos en html en html pero nos preocupamos únicamente por la estructura no por el estilo y la presentación del estilo de presentación nos ocuparemos más adelante cuando os enseñe el lenguaje css el h1 por tanto es el titular de mayor importancia y os voy a recomendar que en un sitio web solo pongáis un solo h1 curiosamente esto que os acabo de decir no tiene nada que ver con el estándar según los estándares podéis poner tantos h unos como necesitéis esto tiene que ver con google google espera que nuestro sitio web haya un foulard h1 porque yo siempre digo que google es un poco pro quo’ es un poco tu ayúdame a mí y yo te ayudaré a ti entonces si pones un solo titular a h1 les indicando a google cuál es la base cual es el título más importante en tu web con lo cual cuando pase sabe cuál es la información de mayor importancia a la información de menor importancia si tú pones varias cosas con h1 google claro no sabrá exactamente cuál es la inflación de mayor importancia a que la encontrará que google siempre lo encuentra pero le costará puesto más haga sudar a google menos sólo va a curar contigo cuanto más más caro se lo des más cuidar vale por tanto podemos agrario sachero pero mi recomendación es que sólo pongamos uno ahora mira yo no puedo poner por ejemplo jose vicente que retrata como h1 y esperar que la gente conozca porque hay tan conocido entonces sólo recomendar poner un h 2 para completar el h1 donde aquí especificamos un poco de qué va por qué estáis creando si es una web auto folio personal poner un poco qué es lo que hacéis si es una web de empresa poner un poco que hace la empresa no lo sé ahora depende un poco qué página buena estáis haciendo imaginaos para la página web de madonna pues no pondría que poner madonna cantante y actriz porque todo el mundo lo sabe bastante pero no siempre pega toro pero si en este caso estoy haciendo mi página web y pienso que sólo componer josé vicente carratalá no todo el mundo me conoce pues tengo que poner una caché dos en el que ponga profesor por amador y diseñador guardo recargo observó como el segundo titular a la línea de bajo la letra es un poco más pequeña pero insisto que me da igual la letra porque abre más adelante que se puede cambiar lo que estáis viendo en la pantalla se llama una cosa que sea estilos por defecto quien decide que uno es negrita y es cursiva y esta infusión román y es así de grande y quien hace de que h 2 es un poco más pequeño lo decide el navegador web el navegador web cuando tú no especifica estos estilos te pone una cosa que se llama speed por defecto pero más adelante simplemente vamos a aceptar estos estilos por defecto y más adelante podemos crear nuestros propios estilos continuamos trabajando y en este caso vamos a seguir trabajando dentro de h2 mejor dicho dentro de heather a continuación justo de h2 y vamos a ver elementos llamados listas las listas son listas de elementos las que hacéis por ejemplo el word se extiende la sijin era en primer lugar voy a crear una etiqueta llamada l la etiqueta se abre y se cierra efe viene de un orden list un orden sin ordenar y list analista evidentemente así que él es lista o no ordenada la etiqueta huele quiere que dentro pongamos otra etiqueta llamada lee lee que se abre y se cierra es el elemento de lista así que voy a hacer lo siguiente y también voy a poner en esta lista a aquellas secciones que deberían ver el menú de navegación de mi página web por ejemplo voy a poner inicio he copiado y pegado y ahora voy a poner por ejemplo formación ahora voy a poner programación ahora voy a poner señor cambiar formación por cursos puedo poner otra actividad con tacto y por último voy a poner una descripción llamada pide tu curso muchas veces llegado a este punto la gente me pregunta porque has puesto etiquetas a veces arriba etiqueta abajo y el contenido en el medio y porque en este caso pone es etiqueta contenido y etiqueta y no has hecho ni retorno de que en sangría las dos fórmulas están perfectamente permitidas por tanto mirad si como aquí inició está tan admite esto como esto es perfectamente admisible lo único que pasa es que digo bueno si es una etiqueta light y tiene una sola palabra y luego el cierre pues parece que sí estará un poco más de espacio se ve mejor desperdició menos el espacio blanco en pantalla por tanto este caso el puesto así simplemente deciros que esto no tiene un efecto por el funcionamiento del código y ahora recargo veréis que aparece esto en pantalla el menú que he puesto aparece como una lista no ordenada la lista de bolets una lista de puntos a partir de lista no ordenada podemos hacer muy fácilmente una lista ordenada las listas por detrás son iguales las no ordenadas solo cambia que la etiqueta o el es el orden list lista por cada si guardo y recargo veréis que ahora en lugar de aparecer una vista de bits una lista de puntos aparece una lista con núcleos ordenados a veces es que nos interese utilizar listas no ordenadas habrá veces en las que nos interese usar listas ordenadas curiosamente en este caso para hacer un menú me interesa usar un l un menú de un menú de puntos yo sé que estaréis pensando porque muchas veces la gente hace que eso que tengo ahí en la pantalla no es un menú eso no se parece en nada a los menús que yo veo por ahí por internet pero creedme cuando os digo que cuando veamos css cuando el estilo web cogeremos ese menú y lo convertiremos en la botonera horizontal como las que habéis visto tantas veces en las páginas web así que ahora mismo no lo parece que ahora mismo diréis o por ejemplo círculos o efectivamente lo convertiremos en cualquier cosa gracias simplemente botones la gente llegado este gusto efe esto no es el menú que esperaba diseñar creaba algo más guay tranquilos que se convertirá en algo gráficamente igual ahora el proyecto se complica un poco inevitablemente porque yo básicamente en este menú de navegación he prometido que mi web va a tener unas cuantas secciones he prometido esto tengo que cumplir la presa y tengo que crear diferentes secciones de un sitio bus se compone de varias páginas web lo que tengo ahora es un sitio web que se compone de una única página web pero para cada uno de los enlaces de la web quiere tener una página diferente así que voy a hacer lo siguiente me voy a ir a crear nuevo archivo dentro de con el botoncito en blanco o bien con archivo nuevo o bien con combinación de teclas troll n o command en el si estamos en un pack tengo un documento no guardado así que me quería ir a archivo guardar como y en mi carpeta del escritorio me voy a guardar atención este archivo como he prometido una sección de ahora cursos me lo voy a guardar como cursos punto html pretensión aunque aquí arriba curso lo he escrito con la primera mayúsculas la página web va a ser todas en minúsculas pero esa no acaba aquí la atención que repito repito primero pinchó el botón de crear nuevo documento la contratación me voy a ir a guardar como vamos a guardar com bueno se me ha enganchado un poco voy a restaurar voy a continuación a programación así que mira pincho cuando canto nuevo lo guardo y lo a guardar el escritorio en jose vicente como canción programación sin acento todo minúsculas y sin acento por qué pues porque muchos servidores web no adaptan archivos con acento especialmente es el servidor web no está ubicado dentro de españa especialmente el web está fuera de la unión europea por tanto para evitar problemas qué problemas serían estos pues los problemas bien por ejemplo que nuestro equipo la pena web será correctamente pero cuando los hubiéramos interno no funcionará y que dijéramos pero funcionaba porque funciona cuando los de vale pues porque el ganador igual que acepta a los acentos pero en el servidor donde habían colocado igual no entonces eliminó el acento así el problema hago un archivo nuevo lo guardo estoy pensando control ese para guardarlo y tengo a continuación la palabra diseño la ñ es otra de esas cosas que nos puede causar problemas en internet por tanto usan cualquier estrategia para evitar la eñe entonces una estrategia suele ser cambiar la eñe por una u otra estrategia siguiendo digamos la rama de valenciano galán balear como queráis llamar suele ser poner en directo a solución siguiendo la rama el portugués o portugués de brasil suele poner ser poner diseño con nh lo que pongáis me da igual depende de vosotros en definitiva no podéis poner una yo lo que voy a hacer es poner diseño y y guardamos nuevo archivo guardo control ese y lo llamo contacto punto html todos deben acabar en html y por último tengo un enlace que tiene espacios tengo un pide tu uso y lleva espacios en el medio son tres patas que hacer en este caso una vez más vamos a guardar y aquí hay varias estrategias que podéis usar una de ellas exponer pide guión bajo tu curso punto html otra de ellas es pide guión curso punto html otra ellas es no pues nada es pide tu curso punto html y hay una costumbre bastante extendida en programación cuanto nombras por ejemplo variables que se ponen de varias espaldas que es usar una cosa que se llama el case camel que sería algo así una maleta de camello y es un chiste es como si es un camello dentro de una maleta pues se verían como las jorobas entonces si imagínatelo entonces existe poner varias varias para atrás pero la primera letra de cada de cada palabra ponerla en mayúscula para que visualmente localicemos mejor donde acaba cada palabra y dónde empieza la siguiente si os fijáis en este caso el pide tu curso sería como el cambio y la t y la ce son como las jorobas de camello que sobresalen del camello vale pues en definitiva podéis usar la nomenclatura que queráis las mayúsculas se aceptan dentro de que luego muchos navegadores no se extinguen en mayúsculas minúsculas pero es una buena manera de nombrar un archivo vale por tanto vamos a poner ahí pide tu curso y ya tenemos ya tenemos las páginas web sitio web creadas ojo porque aquí arriba en escribir me ha desaparecido la marca de index html tener en cuenta que cuando creó muchos archivos html mirar aparecen unas pequeñas flechitas que me permiten ir cambiando de archivo en archivo por tanto no os preocupéis porque en cualquier momento podéis localizar podéis volver a index.html ahora viene otra cosa difícil es enlazar la página principal a cada una de las páginas quiero que hagáis lo siguiente mirad de momento más adelante veremos más código pero de momento voy a entrar e incluso html y voy a decir yo soy la página de cursos lo voy a poner sin acentos yo soy en la página de programación en mi sueño yo soy la página de diseño lo voy a poner con ella aunque no se representará correctamente yo soy la página de contacto y yo soy la página de pide y pide tu curso sólo quiero que pongáis esto en cada una de las páginas y más adelante nos haremos más cuerpo como podéis imaginar lo que quiero ahora es que cada vez que yo haga clic en inicio vaya a la página de inicio cada vez que haz clic en cursos vaya a la página de cursos en definitiva lo que en internet café con un hiper enlace el enlace es una porción de texto oa veces imagen que cuando pinchas vas a otra parte bien cómo se hace esto editar luego lo vuelvo a dejar como estaba y voy a rodear inicio de una directa llamada para que lo veáis más claro lo voy a poner en varias líneas aunque desperdició espacio y voy a hacerlo sin estar allí pongo a los que peter vamos a verlo dentro del link pongo una etiqueta que se abre y una etiqueta que se cierra es la etiqueta anchor de ancla a día de hoy no tiene muchos parezca que tenga sentido pero recordáis los primeros de los de la web se seguía mucho el símil de navegar por la web o surfear por la web necesito navegas por la web cuando llegas a una página web que es el ancla de hilo de ancho veréis qué cosa más extraña pero mirad qué se va a hacer hay un parámetro muy interesante que es chávez hr este dice dónde es cuando pinchas en ese enlace entonces en el inicio voy a poner este red es igual a index.hu ml a 3 pero las semillas que muchas veces la gente está viendo hay que poner index efe ml entre comillas si ahora guardo y recargo en el sitio web comprobaréis como hola vemos como si hoy a la página principal inicio está de color azul o morado probablemente morado porque ya hemos visitado esa página y está como subrayado solo inicio porque los demás no lo están eso qué quiere decir que inicio ahora es el vínculo lo que voy a hacer a continuar es aplicar lo mismo al resto de enlaces así que mira me voy al código reestructuró un poco el código ser vagos copiado me copió esa etiqueta o la etiqueta de cierre y digo que cursos va a ir a cursos html hay que respetar totalmente el nombre del archivo que hemos creado con anterioridad fijaos como parece que no pero poco a poco la complejidad va subiendo voy a copiar esa etiqueta en cada uno de los enlaces voy a copiar la etiqueta de cierre en cada uno de los enlaces otra cosa que a la gente se le olvida es cerrar las etiquetas cuesta al principio pero os acostumbréis programación me lleva a programación con minúsculas y si es centro diseño me lleva a diseño html con n y con y contacto me lleva a contact punto no tiene tu curso lo he puesto en formato camel cave pib tu curso punto html fijaos que no hemos salido del menú no hemos salido del menú de navegación y ya estamos haciendo un archivo de texto bastante largo por tanto una vez más os recomiendo o bien trabajar así o bien trabajando todo en la misma línea esto está de moda para que podáis ver mucho mejor quién depende de quién porque esto a veces puede hacer difícil y el que tiene un link que tiene un app embargo estáis viendo que solo el menú de navegación ya casi me ocupa una pantalla entera dentro de mi pantalla entonces aunque lo he hecho así para que lo podáis ver bien para que podáis analizar cuál es la estructura final quiero ahorrar algo de espacio porque dados cuenta como me sobra un montón de página en blanco a la derecha y voy a ahorrar líneas simplemente pulsando suprimir y evitar tener altos de ley vais a ver como el menú entero únicamente en lugar de ocuparme pues que me está ocupando 15 líneas en algo para 5 líneas no os digo que lo hagáis yo os lo ofrezco a partir de aquí elegir cuando queréis trabajar pega mato como yo y cuando queréis trabajar en formato extendido en este caso quería enseñaros primero el ejemplo en formato extendido porque ahorita que lo estoy comprimiendo comprobaréis como respect ura se dificulta la lectura se dificulta porque para cada línea debéis tener en cuenta que tengo un link que luego tengo una que luego se cierra el a y luego este rallye es algo con lo que con el tiempo se acostumbrará y espero principio puede costar un poco de la costumbre continuamos por tanto voy a bajar una vez el tipo de letra voy a bajarlo para que aún así se vea bien no pasa por esto tengo aquí porque es un salto de línea y voluntad en la línea anterior esto es un inevitable si guardamos y ahora estamos en cada uno de los enlaces encontraremos que si pincho en cursos me dice yo la página de cursos pincho el botón hacia atrás es decir ir a la página anterior si pulso en programación yo soy la página de programación si pulso en diseño yo soy la página de edición si pulso en contacto yo soy la página de contacto y se impulsó en pide tu curso yo soy la página pide tu curso qué es lo que tenemos por tanto finalmente tenemos es que nuestro sitio web no está hecho de una sola página sino que está hecho en páginas web tantas páginas html como queráis vamos a abandonar un poco la cabecera y vamos a profundizar dentro de la etiqueta main dentro de la etiqueta principal dentro del principal iría el contenido puramente de la página principal de la página web podéis poner el contenido que queráis pero os voy a dar unas cuantas combinaciones de cosas que suelen quedar bien algo que suele quedar bastante bien es poner un banner inicial un banner destacado una imagen chula de qué haces y luego abajo unos cuantos de estos de texto en resumen desde que te desarrollas por tanto me voy a hacer un poco dentro de la también en la etiqueta y voy a hacer lo siguiente voy a hacer dos secciones hay una etiqueta específica dentro de html qué es sexo voy a crear varias secciones una sección para el banner principal y otra selección para él los destacados voy a crear una tercera sección para un pequeño blog y voy a crear una última etiqueta llamada a side para contenido tangencial con 3 x tangencial escondido reaccionado indirectamente con el contenido de la página web por ejemplo aunque no únicamente redes sociales claro he puesto tres secciones y las tres secciones son iguales entre sí como las voy a localizar como las voy a diferenciar más adelante es lo que voy a hacer es section me hago un espacio dentro de la apertura de sección al igual que he hecho antes dentro del mes y le pongo un y de un identificador pongo y de igual comillas comillas banner o lo mismo con los destacados e igual a destacados a blog de esta manera aunque tenga tres etiquetas iguales sección esto indica que no van a tener exactamente el mismo contenido he bajado de internet varios recursos multimedia he bajado por una parte varias imágenes en su mayoría está en formato p g que también puede haber alguna en formato jpg e incluso podría haber algunas en formato gif trias una imagen exportando además también me he bajado de internet un archivo mp3 un archivo de audio un archivo de música y también he bajado un archivo en app 4 un archivo de vídeo a continuación como podemos insertar multimedia dentro de html5 de manera nativa y sin hacer que recurrir a otros elementos sin tener que recurrir a plugins externos tal y como hacía falta hasta pues hace unos pocos años recurrir al uso de flash rebajado por tanto estos recursos tanto de imagen como de sonido a una carpeta para que ahora mismo por defecto es la carpeta de descargas lo que es incorporarlos lo que ve es añadirlos a mi carpeta de proyecto pero cuidado te das cuenta la cosa mirada en mi respetado de proyecto ya tengo seis archivos html el archivo index y las páginas que he creado creo que es conmigo en que si ahora copio y pego todos estos recursos multimedia dentro de esta etiqueta pues voy a sacar un poco la cartera y además es que estamos prácticamente al principio del curso si cada cosa que voy incluyendo en mi proyecto la web en la misma carpeta al real donde un montón de cosas en dentro de esa carpeta lo que vamos a por tanto es ordenar y para atrapar en lugar de copiar y pegar los archivos exactamente voy a crear una nueva carpeta y le vais el nombre que queráis imágenes si queréis no le pongáis afecto a la multimedia img foto como queráis llamarlo en mi caso lo último ya no lo contiene imágenes sino que también contiene el vídeo y contiene out hago doble clic y ahora sí o bien copio o bien muevo queráis voy a mover y ahora mismo todos los archivos que tenía en descargas han formado a para ser parte del proyecto para formar parte del proyecto pero lo han hecho dentro de una carpeta llamada multimedia es tocar a cada página funciona más rápido y más lento pero hará que yo traje más holgada cuando llame tanto a los recursos de imagen como los recursos de vídeo y audio lo que voy a hacer ahora por trato es insertar imágenes dentro de mi sitio web dentro index puntos mira voy a index html hemos dicho que hemos creado unas con el banner y ahora dentro de esta sección quiero incluir al menos un vale menos una imagen estas rectangulares que sirve un poco como de banner del sitio web pongo por tanto una etiqueta llamada img la ética e img es bastante curiosa porque es una de estas dos comentaba anteriormente de las que hay pocas que se abren y no se cierran por tanto pongo etiqueta img no hay etiqueta de cierre y empuje y pongo rcp guión igual igual y psc tengo que poner donde está este gen en qué lugar se encuentra esa imagen pues tenemos en cuenta qué imagen se encuentra dentro de una carpeta así como multimedia barra para decir que quiero entrar dentro de la carpeta multimedia y dentro de multimedia ya localizar el nombre de algún archivo como por ejemplo este de aquí voy a el caso piano 2 punto ng así que localizó el archivo lo que quiero importar a uno se habrán importar las imágenes y lo llamo piano 2 punto p que hay que poner exactamente el mismo nombre de carpeta que contiene los archivos y exactamente el mismo nombre de archivo con extensión png jpg gif ahora guardo y recargo comprobaréis como tengo la cabecera el subtítulo el menú de navegación y justo abajo tengo una imagen que representa al banner que he introducido dentro de la página web en principio sólo esto tenemos la imagen os voy a decir todas formas que esta página no valoraría si no pongo un atributo llamado alt alt es el texto alternativo el texto alternativo es algo que se tenía hace muchos años a la carga de una imagen fallaba de nuestros tiempos de internet a costos de descargar imágenes y se ponía un texto en lugar de la imagen a día de hoy ya no es obligatorio ya prácticamente no falla ninguna imagen pero sin embargo siguen siendo obligatorio según el estado por poner en la etiqueta al poner atributo alt así que el banner del sitio web lo que pongo dentro de las comillas ya es cosa vuestra pero hay que poner algo no lo esté en nuestro caso pero igual la imagen que ha salido ha salido de más grande o demasiado pequeña en mi caso no ha salido a un mal tamaño entonces en principio os diría que no podemos tocar el tamaño de la imagen porque eso debemos tocarlo encestó es y no estamos todavía en css pero también os digo que a veces puede resultar un poco molesto está trabajando en un proyecto con una imagen gigante que no te deja ver nada en este caso os voy a enseñar un truco es recomendable pero funciona que es estilizar con css digo estrechar con html voy a poner a continuación wef es igual a por ejemplo 200 píxeles lo que hago es especificar mediante un atributo para ese papel una trató de la imagen cuál va a ser la anchura de la imagen con la que estoy trabajando sólo es necesario que establezca la anchura la gran mayoría de navegadores hoy en día están preparados para que si tú solo estableces la anchura trabajan la altura proporcional a la anchura en este caso esta imagen si tuviera 200 píxeles de ancho tendría que decirle 100 pizzas de alto pero no es necesario porque si no específico nada efectivamente es automático también podría mirar pero no os lo recomiendo especificar otro parámetro a continuación llamado height jake por ejemplo sería igual a 200 píxeles en este caso con el escalado sendos píxeles lo que estimación es forzar la proporción de la imagen así que usarlo como queráis yo lo que voy a hacer es quitar el genk dos píxeles para dejar que el programa me escale la imagen y mal escale de manera proporcional ya tenemos por tanto una imagen ubicada dentro del banner vamos a trabajar ahora por ejemplo con destacados voy a poner dentro de destacados una zona multimedia dentro de esta zona multimedia quiero poner una parte un vídeo por otra parte una imagen así que lo primero que tenemos que hacer es comprobar que dentro de la carpeta muy media tendremos por una parte un archivo de vídeo en este caso yo tengo un archivo a dos partículas puntos de 4 y por otra parte un archivo del sonido en este caso llamado canción punto mp3 a continuación dentro de los pecados voy a crear elementos destacados una etiqueta que nos sirve también para estructurar es la etiqueta arctic el arctic el me servirá por ejemplo para crear artículos de un blog también me sirve para crear artículos destacados así que voy a crear art y que el que se abre y arctic el que se cierra negro de los destacados fijaos que creado desde dentro art y que voy a poner un título es porque hay tres puestos estado antes el h1 y el h 2 y ahora digamos que le tocaría el h 3 punto 3 programación por ejemplo y ha continuado de programación voy a insertar un vídeo cómo se inserta un vídeo dentro de html5 pues se trata de la siguiente manera en primer lugar pongo una etiqueta que se abre y se cierra llamada vídeo y ahora dentro del vídeo pongo cuál es la fuente del vídeo s er efe con ese relleno srp igual comillas comillas a dentro dentro de la carpeta multimedia y cargo el archivo partículas punto mp4 fijaos que por una parte cargo la etiqueta vídeo y por otra papel dentro de la etiqueta yo ahora le pondré a 2 metros una fuente si ahora guardo y recato comprobaré que me falta estoy cerca si ahora guardo y recargo comprobaréis como que al aparecer el vídeo pero en lugar de aparecer el vídeo solo aparece el primer fotograma del vídeo así que a continuación os voy a explicar un par de cosas más con respecto a la etiqueta en primer lugar os voy a decir que aunque parezca que no ha insertado el vídeo pero en lugar de ver el vídeo solo veo el fotograma inicial el primer fotograma si quiero reproducir el vídeo simplemente tengo que hacer lo siguiente mirad pincho con botón derecho en el vídeo y ccoo reproducir y fijaos como al reproducir se reproduce el vídeo pero no tiene controles así que si quiero parar el vídeo simplemente tengo que volver a pulsar botón derecho y pulsar pausa y con eso pausa el pib como veis es una manera bastante incómoda de trabajo el que cada vez le tenga que dar al botón derecho para ejecutar por eso os voy a decir que dentro de vídeo poner un parámetro anónimo llamado controls si como vídeo espacio controls comprobaréis como ‘la por supuesto recargar la página aparecen los clásicos y típicos controles de reproducción de vídeo y play el pausa puedo hacer scrubbing el tiempo el volumen e incluso un botón para pantalla completa hay un parámetro llamado free loud justo la contracción de control voy a poner parámetro perdón reload no hablamos de perro llamado a punto play si tú lo que quieres es que cuando se cargue la página automáticamente en el vídeo le das a otro y recargo fijaos como sin que yo le haya dicho nada me aparece el vídeo reproduciéndose un parámetro si queréis un poco contrario a auto play mirad a tensar la pantalla carlo siguiente si yo no activo pri load de hecho no hago nada yo recargo la página y el vídeo no carga hasta que yo no le dé play el vídeo no carga entonces quizás pero cuidado con esto me gustaría que mientras que yo entro en la página r voy dando a play que el vídeo vaya cargando por qué porque si le doy a play el vídeo empezará a descargar poco a poco pero quizás puede tardar un poco quizás se enganche dependiendo del ancho de banda que tengamos en este momento una opción miradme la solución es pongo aquí guardo recargo y no soy severa porque ya ha cargado entero pero compre load lo que ocurre es que cuando yo entro en la página sin que yo ejecute el vídeo el cargar bien cuidado porque esto puede ser bueno en algunas ocasiones y puede ser no tan bueno en otras si hacéis una página que esté orientada para pc para ordenador y a día de hoy creo que prácticamente todos estamos con las planas en el internet delgado no pasa nada porque les aplaudo porque que pues 3 se descarga usas un poco de ancho de banda y luego no por el vídeo pues no pasa nada porque no tienes táctica plana pero qué pasa si estás accediendo a la página web con el teléfono móvil a día de hoy yo no sé qué ocurrirá de dos tres o cinco años probablemente todos tendremos tarifa plana y tendremos una velocidad muy grande pero a día de hoy las tarifas de internet tienen límite de negage mensuales con lo cual en este caso estaría ocasionando un consumo ya pegas en el teléfono móvil que luego no se utiliza por eso yo sostengo que existe parámetro y os dejo en vuestras según nuestro criterio que tengáis cuidado el cuando convenido utilizarlo y que no no para que podemos usar además de auto que además de ese look loop me sirve para que cuando el vídeo llegue al final automáticamente en dulce por el principio yo recargo le doy a play pongo el vídeo al final y quiero que veáis que cuando el vídeo llega al final automáticamente va a empezar mismo va a empezar otra vez por el principio eso es look y por último dentro de esta etiqueta aparte de wifi que también podría utilizar tweets a leguas utilizado con la imagen pero hablaremos más adelante de eso fs ese otro parámetro del que quiero hablar es el source porque he tenido que introducir este dato de vídeo como un source y no como la imagen que lo ha introducido directamente en la etiqueta de imagen la razón de esto es porque a día de hoy tres formatos de vídeo y no uno solo que podemos insertar en internet no os lo voy a decir yo sino que voy a sacar una página de internet que ser w es schools html5 vídeo donde tiene la tabla comparativa que me parece aclara me parece práctica de que puedes y que no puedes usar mirad está esta tarta que nos presenta los tres formatos de vídeo admitidos para la web que son mp4 web m y el formato o jeje el formato mp4 es un formato que está sujeto a patentes la patente es hace de microsoft apple toshiba dell me acuerdo cuántas más y luego tenemos dos formatos abiertos que son web m y el formato og a continuación tenemos los cinco navegadores como os decía al principio más usados más famosa cría de hoy que son internet explorer chrome firefox safari y opera porque os he pasado un vídeo en formato mp4 de sencilla razón que a día de hoy todos los navegadores soportan el formato mp4 e incluso opera desde la versión 25 yo polar mente de más que sea que te diría yo por tanto web m el formato o jeje de hecho durante mucho tiempo el uso del formato g pero no me queda más remedio que aceptar que el formato que está ganando la batalla del internet es el formato mp4 antes se hacía por ejemplo que si quisieras hacer un vídeo que se viera en ópera antes del último pues se comprimía el vídeo tanto en mp4 como enoje y dentro de esa etiqueta source se ponían dos etiquetas toros por ejemplo mirad se ponía una etiqueta en formato mp4 y etiqueta el cg de tal forma que si tu navegador fallaba al la primera etiqueta iba a la segunda ojo esto y luego además tenía que el vídeo y convertirlo con un programa como éste de vídeos eso no se hace vale pero en este caso ya os digo que os he pasado un vídeo con un formato con un estándar cerrado cuando yo en principio pues suele huir siempre que puede sostenerse cerrados pero por esta razón por tanto todos los vídeos que pongáis si queréis que sean lo más compatibles posible puestos en formato mp4 ya que hablamos de esto hablamos de compatibilidad cuando hablamos de billy son mp4 estoy hablando de navegadores web que soporten correctamente el estándar de html5 porque el formato mp4 es html5 que pasa con navegadores anteriores todavía hay gente por ahí que tiene windows xp y que tiene internet explorer finger 6 perdón o intente explorer 7 con navegadores que no soportan html5 son básicamente interés de explorer 6 7 y 8 porque el 9 ya lo soportaba no hay mp4 que valga ahí sí tendríamos que recurrir a comprimir el vídeo en flash les digo que lo hagáis y que no lo hagáis lo que os digo es conocer a nuestro usuario cuando hagáis una web tener en cuenta para quien la vais a hacer si es para usuarios que corren el riesgo de tener sistemas operativos antiguos tendréis que comprimir el vídeo in flash si es para usuarios que además normal a día de hoy que tengan navegadores localizados podréis hacerlo en mp4 si hemos visto al vídeo el audio es exactamente igual sólo que cambia la etiqueta al vídeo por audio caos como en esta carpeta os he puesto un archivo llamado canción mp3 y lo que voy a hacer sencillamente es el código voy a crear la etiqueta ártica y dentro de arctic él voy a crear h 3 llamado por ejemplo música a continuación de la h 3 voy a crear una etiqueta simplemente llamada audio si antes hemos creado una estaca llamada vídeo ahora ha creado una llamada audio y dentro de esa etiqueta voy a crear una etiqueta source src donde voy a llamar a multimedia barra canción punto mp3 o exactamente como se me muestro nuestro archivo de audio cuidado mucho cuidado porque va a aparecer que he cometido algún error y sin embargo no lo he hecho mirad me guardo recargo y aunque la música no veo nada bajo de música esto es porque si ponéis una etiqueta audio y no le ponéis controls no aparece nada en la página por tanto en este caso lo que voy a hacer es poner audio controls al poner audio coptos igual que en vídeo fijaos como aparece un pequeño reproductor de música donde por supuesto tengo la tecla de play igual no se oye pero me está sonando la música por la auricular y hacer scrubbing y puedo controlar el volumen de la música por supuesto puedo aplicar los parámetros que hemos visto antes puedo aplicar autoplay y puedo aplicar loop si aplicó a play y loop aparte de control veremos como nada más entrar a la página la música empieza a sonar no sé si veis que las últimas versiones de los navegadores mirado tienen un altavoz hito aquí arriba cuando una página está emitido música a personal capacitó y además está en el loop es que cuando llegue al final volverá a empezar no tiene mucho ministerio es prácticamente que el vídeo pero en audio mi recomendación nunca pongáis música en auto play porque la gente le da mucha rabia y sobre todo mira de una cosa y es que esto que os voy a decir es lo que nunca tenéis que hacer hay una opción donde puedo poner audio y atención le quito trolls y le digo autoplay si yo hago eso tengo una paja que hay música y no puedo quitarla y por tanto efectivamente la gente odia era mi página y cuidado porque es la gente de mi página automáticamente la cerrará y para que crea de una página que la gente va a cerrar vale porque domina la atención se cargó si no lo es por lo menos mirar el altavoz hito es decir que está emitiendo música pero no encuentro ninguna parte donde pueda pararlo verdad por tanto esto en principio no lo hagáis a menos que tenga una buena razón para que se diga esto porque en internet tampoco se puede decir no hagas nunca pero sólo si existe una razón concreta y justificada para hacerlo al igual que pasa con él a tres formatos que compiten un poco por la hegemonía del audio en internet pero así como el del vídeo ha costado más años decidir quién es el ganador en audio estaba clarísimo que el ganador ibas a mp3 entonces sí pongo por aquí arriba 13 schools html5 audio veréis que al igual que pasa con el vídeo hay tres formatos peleando por el por el dominio que son el formato mp3 todo el mundo lo conoce el formato web mucha gente lo conoce pero pienso que no es nada recomendable y el formato eje al cual yo le tengo mucho cariño pero pues es compatible con algunos marcadores que tengo que niños porque es abierto en formato mp3 es cerrado pero cambió el formato mp3 primero que todo el mundo lo coge segundo que tantos cargadores y terceros no lo pone allí pero os lo digo yo al igual que el formato mp4 es un formato soportado por defecto el iphone niño s como en android global oh guau hay una cosa muy gráfica más de mucha gracia y es que el formato web creado por microsoft el único navegador que no reconoce es el navegador de microsoft que es asia bueno de todas formas nunca se me ocurriría poner un web en internet por la sencilla razón de que archivo de p3 es un archivo comprimido con pérdida de calidad es cierto que pierde algo de calidad de sonido pero es un archivo muy pequeño en cambio el archivo web es un archivo descomprimido que ocupa más o menos la 10 y 20 veces más que un archivo mp3 a veces puede ocupar más ten en cuenta que por ejemplo por decirlo rápidamente en un cd caben como unas canciones en descomprimido engrane de p3 en miles de presentaciones para que os hagáis a la idea de dónde puede llegar por tanto lo último que quiero en una página web es un archivo web que tarda muchísimo en descargarse cuando puedo tener una chapa p3 así que en definitiva sea como sea verdad el vídeo a día de hoy directamente por el formato mp4 y en audio apostado por el formato mp3 una etiqueta hemos visto hasta ahora así la etiqueta de parágrafo y la etiqueta de párrafo o parágrafo vamos a verla dentro del blog fijaos que me he dejado aquí una sección con y de blog y dentro del blog lo que voy a hacer si queréis voy a subir un poco para que se quede centrado en pantalla artificialmente pongo unos cuantos retos de carros al dentro del blog voy a poner otra vez art y que le voy a poner art dentro del blog pondré pequeños artículos que tendrán lo siguiente primero una imagen img src he dejado una imagen en este pack llamado html5 luego he dejado una y noche por aquí mirar imágenes barra html5 logo y la avería que recargar y vaya vaya no se ha cargado correctamente mira de cometido un error no lo he hecho pero me viene bien para ilustrarnos el error en el caso es que yo he llamado a la carpeta de imágenes que no existe porque yo generalmente sólo trabajar con carpetas llamadas imágenes he intentado cargar el ángel pero claro la carpeta no era imagen la carpeta era multimedia qué pasa cuando comete un error o en el nombre la carpeta o bien el nombre del archivo pues que el archivo larga y el archivo no carga fijaos cómo aparece un símbolo de imagen rota que me dice ahí no estás cargando algo simplemente viendo el error muchos errores de los que se le hizo de los que soléis tener son justo este son nombrar indirectamente la ruta de acceso archivo a iba a qué imagen más grande este han sido grande y tose en css la utilizaremos pero de momento todavía falta unas cuantas horas despegará css por eso lo que voy a hacer va a ser sin antes poner aquí por ejemplo with es igual a 100 píxeles guardo recargo y ahí la tengo otra cosa que hacer está por aquí abajo otra cosa que voy a hacer es recordar poner alt es igual a logotipo html tengo poca atención si no ponéis la etiqueta al tributo alt en alguna etiqueta imagen lo que pasará es que no validar a la página web en el validador por cierto hablando del validador hace ya rato que no validamos nuestro sitio web no os digo que cuando lo tenéis que validar eso lo digo los dejó en vuestras manos lo que os digo es que cada poco tiempo unas cuantas líneas de código mirad lo que haré es vuelvo al archivo protago el index pulsó el botón revalidar y compruebo cuando cerró de éste héctor y corrijo mira tengo dos errores vamos a leerlos a la vez no pasa cada uno podéis tener más o menos flores dependiendo de cuántas etiquetas os hayan olvidado entonces tengáis lo que tengáis simplemente tenéis que hacer es dejar aquí abajo y leer atención porque los símbolos amarillos de admiración son warnings son partencias y menos importantes pero los símbolos rojos son errores que error tengo me dice en la línea 19 volumen 39 veis por importante que nos dé línea porque me dice dónde en qué línea está el error me dice el valor de anchura tiene una p yo lo he hecho bien pero en el estándar no es correcto si yo quiero poner 200 píxeles simplemente tengo que poner 200 si yo quiero poner simplemente tengo que poner 100 revalidó revalidó y ahora fijaos como tengo 5 warnings pero ya pasa en color verde lo que ha ocurrido por tanto es que al poner la anchura me he dejado llevar por la sintaxis de css donde en css sí que te pide la unidad y no había que poner nada pero una vez más esta gracia del validador y es tú simplemente escribe de vez en cuando no te esperes demasiado válida y ccoo por los errores mucha gente evita hacer esto porque un poco le sale mal que haya algo que le diga errores es al contrario si es por tu bien y además no hay nadie que te está minando además los que dice qué errores tienes lo que dice cómo arreglar los muchas veces por tanto de vez en cuando ya veis poco a poco ir validando vamos a hablar ahora que tenemos aquí un elemento html5 me lo voy a centrar en pantalla porque no me gusta trabajar ahí abajo y así de paso os voy a enseñar un truco y el truco va a ser el siguiente mirad hay una pimienta hay una etiqueta que se llama br la cual va de abusar pero qué quiere decir retorno o retorno de carro la herramienta de ver un territorio de hecho lo voy a poner varias veces toda junta lo que hace es forzar varios retornos de carro y añadir espacios en blanco en la parte inferior de la página así que caos que estoy poniendo varias etiquetas br para forzar los saltos y aquí al final y por tanto poder trabajar cómodamente con los elementos centrados en pantalla vale simplemente aquí y aislado al final una serie una cadena de etiquetas br bar retorno retorno de carro de vuelta artículo en ese peso lo que haré poner por ejemplo h 4 porque h 4 pues porque antes he puesto a h3 en los títulos los destacados h 4 y pongo estamos en un curso d h 5 tengo por tanto el logotipo tengo por tanto el texto el título y hará falta el texto plato de gratis el blog cuando quiero crear un texto plano es decir un texto de párrafo lo que hago es usar la etiqueta precisamente de párrafo parágrafo ningún texto debe ir sin etiqueta de título o etiqueta de párrafo así que no en éste curso estamos aprendiendo a crear páginas web usando el lenguaje html5 recargo y tengo aquí ahí lo veis para empezar el logotipo para continuar un título y para acabar el texto de párrafo o parágrafo una vez más me da igual qué la tipografía times new roman me da igual que nos guste el color me da igual que nos guste que sea negrita una negrita porque es lo que más adelante cambiaremos usando css bien para acabar o por lo menos dejar esbozada esta página principal quiero que creéis pues uno o dos más artículos del blog para que el blog tenga unos pocos artículos así que me me vengo aquí a blog me voy a arctic él y voy a crear más artículos con el mismo esquema ing src al logo de php y me he dejado a la 1 según las imágenes ha bajado me he dejado por aquí un logotipo de php y digo multimedia y la imagen de ph para no fallar 18 es como habéis visto cojo todo lo copio y ahora vengo al código y lo pego ya estoy seguro que no me equivoco al poner el archivo a continuación un eje 4 a la digamos entre dos meses empieza el curso de php y a continuación con etiqueta del párrafo o parágrafo este curso de aspe ml 5 se complementa con la segunda parte donde aprendemos a programar en html5 y a usar bases de datos en mysql tengo ya por tanto dos artículos del blog el logotipo de php es demasiado grande pero ya sabéis que le puedo poner ejemplo un week de 100 píxeles para limitarlo y por último para completar la página principal tengo el fútbol pero el pie de página donde lo voy a poner un pequeño título 86 porque cree pues por ejemplo copyright 2014 josé vicente carratalá algo para que la página principal nos quede un poquito redonda nos quede una página que tenga todo lo que hemos aprendido hasta el momento y todo lo que hemos aprendido a estar junto ha sido a crear la estructura de la web que aunque parezca muy poco estética habréis delante que es correcta y es correcta para poder extender la evidente css vemos que una lista en orden la hemos creado un medio hemos aprendido a insertar imágenes hemos aprendido a desertar multimedia y hemos aprendido también a crear pues banners artículos imágenes y títulos continuaremos por tanto aprendiendo nuevos elementos de html a continuación a continuación vamos a hablar de dos pulsos más en html como son las tablas y son los formularios vamos a empezar con las tablas que es un recurso bastante controvertido en html básicamente estos ya sabéis usarlas al menos en procesadores de texto como word donde cuando quiere es crear una tabla tabla e insertar nueva tabla de tantas filas por tantas columnas la filosofía más o menos en html es la misma digo que es un elemento controvertido porque durante muchos años la manera de atención maquetar la manera de visitar páginas web usando tablas y esa manera de enseñar ya no la vamos a usar para la meta de maquetar tablas es trabajar con css pero sin embargo eso quiere decir que las tablas están desterradas del lenguaje html más bien al contrario vamos a trabajar con tablas aquello que realmente valga la pena trabajar con tablas habéis sido alguna vez algún aeropuerto ya habéis visto el panel de llegadas y salidas de los aviones esa información está marcada con columnas con tablas que es básicamente como el panel del metro del próximo metro cuando llega pero en grande es decir hay cosas que realmente merece la pena que está con filas y columnas no una web entera pero la información dentro de web así que esto es lo que vamos a hacer ahora me voy a ir a la página de cursos dentro de cursos ya lo que hacer es poner una tabla que diga nombre del próximo curso cuando empieza donde empieza cuántas horas son vale este tipo de información es el tipo de información que haríamos con tablas pero qué pasa si pincho en cursos pues que me voy a una página vacía de yo soy la página de cursos así otros que veis que yo ahora desde cero me voy a cursos html y me voy pone a escribir todo el contenido otra vez desde cero no porque yo soy vago y siempre que pueda lo voy a hacer es reutilizar nos puede hacer es copiar y pegar lo anterior la página de casos no estáis de acuerdo conmigo en que es igual el título será igual el menú será igual incluso la cabecera el título subtítulo y menú de navegación sean exactamente igual incluso el pie de página será igual que es lo único que cambiará la parte principal de la página web así que como ya os digo que soy vago y no me gusta hacer dos que es lo mismo mirad me voy a ir a index html lo voy a seleccionar todo puedo seleccionar todo bueno puedo ir por ejemplo al menú editar y puedo usar a seleccionar todo o puedo usar la tecla rápida que es control una vez que lo he seleccionado todo me voy a evitar a copiar yo lo he copiado todo me voy a cursos y le digo editar pegar pero lo mismo usando los atajos de teclado control c para copiar control para pegar si ahora guardo control ese y recargo en la página de cursos es que la página ya no está vacía sino que ahora mismo la página de cursos es un duplicado es un clon de la página principal bien es un duplicado pero ahora miran con mucho cuidado me cojo etiqueta en la etiqueta también es la etiqueta principal donde está el contenido principal de la página web y borró desde lo que hay justo a continuación de media hasta el final atención mira por un justo de spies de jane hasta justo antes del cierre y borró todo lo que hay en el medio y seguro que no he borrado ni la etiqueta de apertura de maine en la de cierre de mes y ahora si queréis un poco para hacer la gracia pongo yo soy la página de cursos así que ahora recargo y fijaos como yo soy la página de cursos pero es respetado tanto la cabecera de la página como el que página es más ahora puedo si pincho en inicio ir a la página inicial y si pinto cursos voy a la página cursos a oscar está como poco a poco vamos consiguiendo tener la navegación completa a través de las páginas de este sitio estoy por tanto dentro de la página 2 y dentro de esta página de cursos yo lo que quiero hacer es una tablita que me permite especificar qué curso os voy a dar próximamente mirad antes de hablar permite hablar de comentarios que son los comentarios los comentarios son un elemento un poco especial dentro del lenguaje de programación o dentro de cada lenguaje de marca porque no son técnicamente una parte del lenguaje sino que nos permiten poner en comento comentarios en formato humano para un ser humano en http lee los comentarios se ponen un poco diferentes de cualquier otro lenguaje de información a marcado que podáis conocer se ponen de la siguiente manera me toque admiración para arrancar el comentario un guión mayor que para cerrar el comentario y todo lo que pongáis a continuación voy a dibujar una tabla todo lo que pongáis a continuación se va a considerar comentario que es un comentario un comentario es una línea que no va a ser tenida en cuenta por el lenguaje de programación o por el lenguaje de marcado en lugar de eso es un comentario que te dejas para que lo leas tu mismo como ser humano más adelante o para que otro ser humano vea tu código cuando quiero que veáis cómo se ahora huir me he quitado lo de yo soy la página de cursos que veáis atención como yo recargo y tengo aquí yo su página de cursos pero en ningún momento estáis viendo el comentario porque el comentario está oculto ahora una cosa que suelo decir es que tener siempre mucho cuidado con los comentarios porque los comentarios aunque no se ven sí que se transmiten el coco esto quiere decir que si yo vengo a la página y botón derecho ver código fuente de la página veréis que sí así que tener cuidado de no poner insultos de poner contraseñas el material sept y blair el secreto más que más que un secreto realmente no es secreto se ponen de otras maneras de programación es un mensaje no visto pero tampoco es secreto porque ya habéis visto que botón derecho ver código fuente lo podéis ver bien estábamos diciendo que a continuación vamos a una tabla pero eso lo vamos a hacer en el vídeo siguiente las tablas yo diría que aumentan bastante el complejidad que hemos visto hasta ahora porque para crear una tabla la combinación de varias etiquetas antes de crear la tabla voy a crear un h 3 voy a poner listado o próximos cursos pongo h3 ahora una etiqueta de parra fotógrafo y digo a continuación indicó una lista de próximos cursos que voy a impartir y ahora voy a poner las siguientes etiquetas del pecho como voy a hacer yo incluso me voy a dibujar un espacio en el medio para que visualmente lo separé es mejor para empezar la tabla tiene una etiqueta apertura y una de cierre las tablas por defecto hace dos años que en html no se ven por defecto se ven así que os voy a recomendar que hagáis lo siguiente no voy a poner wifi es igual a 100% border está igual a 1 lo que voy a hacer es la tabla ya el 100 de toda la anchura de la pantalla del navegador mejor dicho y que tenga un borde de un píxel quedará muy feo pero así lo podréis ver y luego más adelante si queréis para estilizar lo quitamos una vez más estos dos parámetros a anchura y borde son parámetros más relacionados por prestige o la estructura así hasta que veamos estilo por lo menos podéis ver la tabla una tabla se basa en filas y columnas por tanto la siguiente etiqueta es tr tr se abre y se cierra r quiere decir table road o fila de tabla y ahora una vez que he dibujado una fila tengo que dibujar columnas que es la manera menos intuitiva que os podéis imaginar a dibujar filas y contras en código es aquí entonces las columnas se hacen con una etiqueta llamada be pd es table data de la tabla no sé a qué genio se le ocurrió esto podría haberle llamado table columna igual que la otra pero mira tv entonces voy a poner no perdonar tb no es tabla mejor para la segunda línea voy a poner th th es igual heavy en la tabla y ahora si empieza a diseñar mi tabla de curso pero sí p h a 0 th p h horas he estado por tanto una tabla que tiene una fila que tiene tres columnas una tabla que tiene un table row que tiene una fila que apreté tres columnas ph php h si ahora guardo el cargo podréis comprobar cómo aparece evidentemente primero ese 3 luego aparece el párrafo y luego aparece de momento el titular las cabeceras los títulos de las columnas de la tabla que voy a dibujar e insisto una vez más no me preguntéis porque el texto está centrado porque está negrito porque lo que sea porque el estilo por defecto de la tabla cuando lleguemos a css seremos capaces de modificar manualmente modificar a nuestra voluntad el estilo de esa tabla cada vez que tengo esto en pantalla una vez que tengo la primera fila que son los titulares de la tabla paso a la segunda fila cuidado aquí la cosa se complica cuando acaba el tr este ere que ha empezado aquí y ha acabado aquí me hago un estudio en blanco y pongo otro tr os voy a decir para simplificar aunque lo que os voy a decir no es del todo cierto no es al 100% cierto pero para simplificar diré que si la fila de arriba tenía tres columnas la de abajo debe tener tres columnas entonces ahora sí voy a poner una etiqueta llamada tv tve ahora si es table that y si arriba he puesto tres columnas abajo voy a poner tres conjuntos de haz que tu curso de html5 centro centro de formación número uno horas 35 horas si ahora guardo y recargo fijaos cómo aparece por ahí una primera fila de contenido en este caso ya lo veréis más conforme vaya escribiendo está clarísimo como este tipo de datos conviene escribirlos en formato de tabla miradme atención soy vago es como el guard de escribir una nueva fila voy a copiar la anterior la pegar dos o tres veces y simplemente la modificó curso de php en el centro de información número uno eso que sé ahora de 5 horas curso de java enterprise en el centro de formación número 2 pongamos 90 horas y así quiero que veáis como cursos wordpress por ejemplo en el centro de formación número 3 digamos 25 horas quiero que veáis como esta información es mucho más cómoda de maquetar y mucho más cómoda de presentar en una tabla cualquier información que sea susceptible de escribir en formato de líneas o en formato de columnas y dar bastantes cosas pero ellas una de las principales sería porque la anchura de las columnas no es igual mi respuesta sería que la anchura forma parte del estilo y eso se controla en css pero ciencia pero y si lo quiero tocar en html bueno pues igual que las imágenes se les puede asignar un with a las columnas también se les puede asignar por ejemplo imaginaros que tenga una tabla cuyo cuya anchura 100% le quiero dar a cada una de las columnas el 33 por ciento pues me voy aquí el pph y digo wifi es igual a 33 por ciento y ese wish 33 por ciento lo copió y lo pegó a una de las columnas técnicamente para ser exactos tenemos que poner 33.33 por ciento o algo así para que el margen de error no fuera demasiado grande otra cosa cuando en cualquier lenguaje de programación quiera disponer una décima sobre un punto no con coma pero bueno de momento me lo voy a dejar al 33% con número entero así que recargo y quiero que veáis ahí como al haber recargado las columnas de las tablas se me están poniendo el 33% ha disminuido un poco el zoom en la pantalla simplemente porque en las columnas se medía la siguiente línea vale porque todo lo que he hecho es hacer un poco de zoom para que crítica mente me quede mejor claro que en este caso podríamos decir que es un desperdicio en el espacio porque si las horas me den derecho a ocupar mucho menos que el centro para que tienen la misma importancia pues podría poner por ejemplo 40% al curso 40 por ciento al centro y 20 por ciento a las horas lo importante eso sí es que dentro de lo posible cada vez que hagáis una tabla os preocupéis de que la suma de las anchuras sea 100 vamos ahora con un elemento de html al que le tengo bastante cariño estos formularios que tengo bastante yo porque los formularios me permiten interactuar al usuario hasta ahora lo que hemos hecho para crear una web si os fijáis es una web donde yo hablo y la escucha yo escribo cosas y la gente los lee pero como la gente interactuar conmigo cómo puede la gente enviarme un mensaje cómo puede decir enviarme un comentario chas esto lo podemos hacer fundamentalmente fundamentalmente mediante los comentarios en los comentarios de los formularios que yo les tengo bastante cariño de los formularios pero la gente les tiene bastante odio vale por tanto cuando te enseñamos un formulario hay que diseñar con el mínimo número de elementos posibles para no agobiar a la gente para esto por tanto me he preparado un pre tácticas una de ellas es contacto y otra de ellas es otro curso vamos a hacer un formulario sencillo dentro de contacto y otro más extenso dentro de tu curso así que me voy por tanto a buscar la página web de contacto y cuidado porque la página web de contacto tiene otra vez el cartelito este sencillo de yo soy la página de contacto así que como ya sabéis que soy vago lo que voy a hacer es copiar editó selecciono todo edito copio todo el contenido de la página cursos punto html para contactos y le digo editar pegar y de evitar pegar he hecho explicar el contenido borro la tabla y modificó el h3 formulario de contacto la web ahora digo en 3 formulario de contacto y el texto si quieres en primer alguno mensaje puedes hacerlo usando el formulario a continuación guardo recargo me voy a contacto y dejaos como lo que he hecho en contacto una vez más es copiar y pegar esa plantilla y a continuación modificarla y llevarla a lo que yo ahora bajo del parágrafo crear un formulario el formulario la creación del formulario es ligeramente ácida alakrana está apta en cuanto a que debe existir una etiqueta llamada azul que abrace a todos los elementos del formulario que contenga a todos los elementos que va a un formulario la etiqueta forma solo en la apertura puede tener múltiples parámetros puede tener muchos parámetros pero los parámetros que me parte rescindibles después el método o bien o post o get a los explicó y otro es el axón que es quien va a procesar este formulario por ejemplo voy a llamar a un archivo que no existe llamado envía mail php y ahora os cuento qué son estos atributos hay dos maneras de enviar un formulario una vez con el método post y otras el método get siempre que podamos especialmente en html usaremos el método post el método post envía los elementos del formulario como cabeceras y por tanto aunque se pueden atrapar aunque se pueden piratear aunque se pueden hackear ya hablaremos de esto pero es una manera bastante más segura de enviar los datos que el método get el método get en lugar de enviarlos en crecerás lo que hace es enviarlos como parámetros de url eso quiere decir que más pirateables son más a tratables vale por tanto dentro de que nosotros tanto que con ser piratas informáticos pero dentro de tablets siempre que podamos usaremos el método post cuando se sale metro get en programación web y dura con php y con java es que se usan muchas veces parámetros de url hay veces conviene recatados nos evitaremos por último os diré este es el lenguaje correcto para diseñar formularios pero a procesar formularios a diferencia con el ct ml creamos un formulario a nivel gráfico a nivel de campos cjex radio dos desplegables y todo eso pero html que no es lenguaje de programación no es capaz de enviar correos html no es capaz de guardar nada en la de datos html no es capaz de generar un archivo con los contactos de un correo un lenguaje candidato para hacer eso por ejemplo sería la parte que es capaz de crear conceptos php que guardan cosas en bases de datos php de generar archivos pero php no diseñan formularios cuando no estoy diciendo que php sea mejor que html simplemente cada uno hace una cosa diferente vale por tanto de momento nos hacer es crear un horario que de momento no irá a ninguna parte pero más adelante incluso en una plantilla sencilla para que lo pongáis a funcionar sin reportes php como ese archivo php para que tome nosotros el formulario y haga más o menos lo que queráis con ellos como por ejemplo enviar un correo por tanto hoy de momento estoy entrando a un archivo envíame el punta php que no existe ni tiene por qué existir tampoco entonces dentro de forma de forma va a crear varios campos mira voy a empezar con martillos como son los siguientes input y poner name nombre de que no sirve para nada pero para más adelante es una costumbre que cada campo de un formulario tenga un nombre un mail mirad qué voy recargo y veo que aparece un cuadro y es un cuadro cualquiera es un cuadro en el que yo puedo empezar a escribir yo que estoy pidiendo en ese cuadro yo creo que la gente escriba su nombre pero donde eso estoy diciendo no puedo pretender que la gente se adivina activamente en html 4 lo que se hacía era dentro de campo link se escribía lo siguiente value de tu nombre mirada value jettou nombre recargo y poner tu nombre yo puedo podría borrar a tu nombre y escribir pero sabéis que está en la base de datos dime tu nombre juan me meto hambre jose dime tu nombre pero vamos a ver tanto la gorra alimento un hombre pues la gente no lo borraba por tanto os voy a recomendar ahora en el html5 el que en lugar de poner valían pongáis una cosa que se llama place holder place holder lo que hace otra vez exponer mi mente un hombre lo pone en gris esto es un poco lo de menos pero todo lo importante es que se preocupa de que cuando yo haga clic en este campo yo estoy por ejemplo jose vicente y fijaos como automáticamente estado dime tu nombre es más sí con jose vicente y ahora borro automáticamente vuelve a poner tu nombre esto antes me tocaba hacerlo con javascript el que cuando la gente empieza a ir ahora me de mente un hombre cuando alguien borre vuelven a poner dime tu nombre y era un rollo que no usamos javascript lo usaremos pero si tenemos algún html5 que nos ahorra ese código pues mejor que mejor vamos a temas campos para enviarle un correo me tendrás que decir tu nombre digo yo que también me tendrás que decir tu email así que imputó type de tipo text y le voy a decir neymar y kyle y place holder tú algo que no nos pasado hasta ahora es que fijaos que cuando escribo elementos en líneas diferentes aunque haya hecho un retorno de carro como no están separados por una etiqueta los elementos no se dibujan bajo sino que es producto a continuación pero antes hemos visto que tenemos una etiqueta específica para cuando queremos forzar un retorno de carro así que en este caso después de cada campo input quiero forzar un retorno de carro para asegurarme que los siguientes que hay bajo y no caen al lado fijémonos que pongo una etiqueta de r uy qué curioso debido al estilo por defecto micron para dibujar por el área un campo a pacheco realmente pegado a otro esto es algo que arreglaría más adelante trabajando con css pero el caso es que ahora no tengo ese s por eso un pequeño truco sucio si queréis pero eficaz al fin y al cabo es poner dos veces en lugar de entorno de carro pongo 2 bien un par de campos más para este primer formulario que estamos diseñando van a ser un campo un poco especial llamado text área text área este se abre y se cierra espirado name mensaje pero el cuidado porque así como el input se abre pero no se cierra el texto área se abre y se cierra y simplemente escribe text área ni mensaje se cierra y ya está lo que nos permite este un campo como éste no admite place holder pues os lo he puesto donde la gente me puede escribir texto multilínea escribir un mensaje más completo y por último para este ejercicio para esta página de contacto voy a poner un input type submit el input de tipo submit que quiere decir enviar este tipo de input pesic evidentemente para enviar un formulario si queréis ya que estamos no me cuesta mucho enseñaros otro troll del formulario llamado gris set es muy parecido a la p submit la ricet hacen lo siguiente atención yo escribo un formulario y si quiero enviar la información simplemente al botón enviar no os preocupéis me dice no se ha encontrado esta página web porque ya os johann que envía mail punto php realmente no existe el segundo botón el de restablecer me sirve para siguió rellenando un formulario y no me gusta lo que ha escrito y quiero volver a empezar quiero borrar los campos le doy el botón restablecer y los borra no tenéis que programar nada vosotros al mente sino que todo esto ya está pre programado dentro de html5 vemos por tanto que estos sencillos campos completamos nuestro primer formulario en html un formulario sencillo para una página de contacto un formulario de contacto pero de una página personal o empresarial a continuación vamos a esto que hemos hecho y extenderlo a ella como más completos y más complejos al texto área se le puede dar anchura y altura pero el texto área es un poco especial porque la anchura de la altura en html no se da con píxeles sino que será con caracteres de filas y caracteres de columna escribe la siguiente alta yo le pongo por ejemplo calls es igual a 10 lo cual equivale en ira a que le he dado 10 caracteres 1 2 3 4 5 6 7 8 9 y 10 y 1 más parece 11 si yo pongo 20 como era el doble de ancho si le pongo 40 es cuatro veces tanto calls son columnas y hay otro parámetro que es rose qué es el número de filas por ejemplo 10 y ahora de alto date cuenta cómo está acá 10 líneas 10 caracteres de alto por tanto en el que no se dice ya lo podemos utilizar con píxeles pero en html los campos de text área se especifican en el número de caracteres de columna y de fila que van a contener dentro vamos a trabajar con un fútbol ario algo más complejo y para eso me he dejado esta página llamada y de propuso preparada para ello así que una vez más como soy vago me voy a ir a contacto punto html voy a crear todo el código que existe dentro de contacto y lo voy a pegar dentro de epi de tu curso y de esa manera simplemente lo que voy a hacer es formulario modificar para pedir un curso nuevo formulario de contacto pues pide tu curso delante este formulario puedes hacerme llegar peticiones para próximos cursos voy a quitar el formulario anterior si queréis es cierto otro formulario pero dejadme que empieza desde cero y así volvéis a ver la estructura de un formulario desde cero pide tu curso y otra vez voy a crear una recta forma de apertura una etiqueta forma de cierre es decir que el action es de curso php y que el mejor siempre que podáis es post ahora voy a decir una serie de cosas a introducir me sentã de campos en primer lugar uno que conocíamos input type text mi nombre place holder dime tu nombre opcional como que focal todos los campos en principio son opcionales pues en html dejadme que vuelva a pesar contacto miradme en html hay una nueva cosa que es que el campo sea requerido en la que escribe un nombre escribí mail escribo un mensaje no quieres decirme tu nombre nombra picas pero si quieres que me ponga en contacto contigo me tendrás que decir tu email con lo cual el email aquí en input se puede poner un parámetro más que es rico ayer rico ayer lo que sé es que si yo intento enviar un formulario y no he puesto un email o no he puesto un campo el que sea le voy a enviar y me dice no hasta que no complete ese campo no puede ser nada vale eso es lo que hace la palabra ayer lo que os recomiendo es que podáis cuántos campos pero es mejor pero si tenéis que poner alguno que es el gator yo así lo podéis hacer aunque también veremos qué se puede hacer directamente con javascript bien sigamos pongo un par de veces y ahora otro input type text neiman email blake holder dime tu email opcional bien un par de campos que nos pueden resultar interesantes son los siguientes si te ha gustado el email que quiere suscribir al boletín noticias función p quieres suscribirte boletín de noticias hay atención cambio radio es pregunta de respuesta única neymar boletín y pongo sí br br y ahora pongo un input abajo name boletín con la respuesta no además cada uno de estos campos de tipo por radio debería tener un value se cree lo pongo así y lo veréis mejor estos campos son de tipo radio de nombre boletín valor es igual a sí o valor es igual a no qué hace esto lo que hace es que cuando ejecuto quieres el boletín o sí o no pero damos cuenta que es la pregunta de respuesta única si marcó una es porque mata otra y viceversa un par de campos más ya para acabar los formularios o es por ejemplo el siguiente auxiliares input type voy a poner en este caso así como indica el tipo de curso prefieres respuesta múltiple entonces name curso y por ejemplo voy a poner html 5 dejadme que copié y voy a poner el php por ejemplo java enterprise web 2.0 wordpress haciendo esto cuando esto en lugar de aparecer un icono circular aparece un icono rectangular y eso quiere decir que puedo marcar varios a la vez es decir este elemento de tipo box sería una pregunta de respuesta múltiple en lugar de una pregunta de respuesta única un campo muy divertido muy divertido es novedad en html5 cuando quieres recibir el curso pues hay un campo específico en html que es in type fitch fijaos como mirad pongo imputable aparece por ahí de 13 años pero lo divertido es que si pincho esta cita aparece un suscriptor de fecha completo y bueno luego podría poner qué tipo de curso prefieres y lo podría poner con check box pero para demostraros a nivel didáctico un campo de formulario más qué tipo de lo prefieres y mirad pongo un campo especial llamado select en igual tipo de curso y el sec tiene una opción tiene una etiqueta perdón llamada opción válido es igual a cero en el momento y ahora pongo online presencia esto es valor online es valor presencial fijaos que esto lo que hace selecciona un tipo de curso es que aparece en el clásico desplegable cuenta yo pincha aquí y se despliega ya sé que hemos agrega y sobre eso pone como un check box porque alguien puede marcar los dos porque no tiene por qué elegir uno u otro pero yo que sé para demostraros cómo funciona el select y por último óptimo para no enrollar los más con campos pues pongo input type submit este ya lo hemos visto antes para el momento dado enviar el formulario me falta un par de veces es que he puesto el sol emite demasiado pronto por tanto mediante este formulario lo que hemos hecho es añadir unos cuantos unos cuantos campos de control más insisto una vez que he hecho esto para mostraros unos cuantos campos los más importantes de diseño de formularios de html hay unos cuantos campos pero no se usan o no se usan tanto como estos cuando hagáis un formulario si pensáis que el que rellena el formulario puede no estar muy interesado en rellenar formularios no hay muchos campos para evitarlas de teléfono parte de una encuesta que cuanto menos pregunten mejor pues aquí básicamente es lo mismo nos queda dentro de este proyecto configurar por una parte lo que sería la galería de diseño donde voy a hacer un portafolio y nos quedaría también poner algo de contenido dentro de la parte de programación por tanto voy a empezar con diseño punto html vemos que ahora mismo lo estoy cargando tanto dentro del navegador web como dentro del editor de hecho puedo comprobar cómo nos hemos dejado previamente yo soy la página de diseño vacía así que lo que voy a hacer una vez más es abrir una de las otras páginas que ya tengo creadas como por ejemplo index.php o previamente hemos creado pide tu curso o hemos creado cursos por ejemplo cursos voy a voy a seleccionar voy a copiar todo el contenido he pulsado primero editar seleccionar todo luego editar copiar no cortar y luego me voy a diseño eliminó el texto de se demuestra de ello soy el contenido de diseño y pego el contenido de la tabla en este caso por tanto si ahora guardo y recargo vemos que en la página de diseño tenemos la tabla que hicimos anteriormente con los cursos pero recordamos que yo no quiero la tabla de lo que quiero aquí dentro de la página de diseño es maquetar una pequeña galería fotográfica poner contenido dentro de esta página de diseño voy a guardar voy a recargar va a ser realmente sencillo técnicamente no estamos haciendo esto para aprender prácticamente nada nuevo sino por una parte para poner en práctica lo que ya sabemos y por otra parte para prepararlo para futuras partes de maquetación en css así que en esta parte voy a poner en lugar de próximos cursos voy a cambiar el título h3 por galería de proyectos llamado portafolio llamado lo que quieras te digo a continuación el nuestro una en galería a folio de proyectos realizados guardamos recargamos hemos cambiado el título h3 hemos acotó a continuación te muestro una galería hemos cambiado tanto el h3 como el parágrafo he eliminado cualquier rastro del elemento anterior que hubiera anteriormente recordáis había una tabla con los cursos y ahora lo que voy a hacer sencillamente va a ser algo tan simple como poner una serie de imágenes tengo por tanto dentro de la galería de multimedia unas cuantas imágenes que me he bajado con proyectos por tanto voy a copiar su nombre y lo voy a pegar aquí imágenes barra el nombre de la imagen y no olvidemos cómo es muy importante poner un texto alternativo así que en cada una de las imágenes vamos a poner un texto alternativo con una pequeña descripción de la imagen vemos como no era imágenes era multimedia tenemos tener en cuenta debemos tener cuidado de que el nombre de la ruta sea exactamente el mismo que el que tenemos en la realidad si ya tenemos esto el resto va a ser realmente sencillo porque lo único que quiero es que repitamos este paso tantas veces como imágenes tengamos en la carpeta me voy a sacar en este caso la carpeta me la voy a poner a la derecha y voy a copiar esta etiqueta img me estoy dejando artificialmente dos espacios de separación para que simplemente veáis que cada una de estas líneas es una entrada del portafolio sencillamente lo que hago es sustituir el nombre de cada uno de los elementos de la carpeta el nombre de cada una de las imágenes de la carpeta en cada una de las líneas de html a partir de aquí me da igual cuántos elementos tengáis en el portafolio lo que os diría es que para luego ver cómo maquetar los pues no tengáis ni menos de dos ni más de veinte por ejemplo para no extender demasiado el portafolio fijaos cómo he puesto por tanto verá unas cuantas imágenes una debajo de la otra y ahora luego lo que haré es por tanto maquetar estas imágenes con css para que queden bien alineadas bien presentadas como un portafolio por columnas incluso fijaos lo que he hecho tengo seis imágenes bueno pues lo que he hecho simplemente duplicar esas líneas tengo de la 1 a la 6 pues luego he copiado y pegado otra vez para tener 12 imágenes así que tenemos 12 imágenes por aquí 11 y 12 y con estas 12 imágenes tenemos ya para trabajar un mínimo portafolio en la pantalla lo que voy a hacer en este caso va a ser actualizar un poco la estructura de la web para eso voy a explicar una complicación que nos pueden salir muchas veces con html yo por ejemplo tengo una página llamada programación si me voy a la estructura de mi proyecto comprobaré como efectivamente se llama programación pero curiosamente yo le quiero cambiar el nombre y quiero que se llame sobre mí tengo un problema la cambio y sobre mí quizás edito el documento index.html y evidentemente actualizo ya no existe la página programación html ahora se llama sobre mi html por tanto tengo que actualizar aquí llamar a la página sobre mi punto html y aquí cambiar la leyenda de programación y sobre mí pero como os decía hay un problema mirad yo voy a inicio y el inicio veo perfectamente que pone sobre mí pero si voy por ejemplo a cursos veo que pone programación si pone en diseño veo que pone programación solo cuando voy al inicio veo que pone sobre mí qué quiere decir esto pues esto lo que quiere decir es que una de las desventajas porque html no es perfecto aunque esto se puede arreglar con lenguajes de programación en el servidor con otros lenguajes que apoyan html pero si realizó un cambio y realizar cambios en la estructura de un proyecto es relativamente normal durante el diseño de una página web pues voy a tener que propagar esos cambios de momento de manera manual completamente a lo largo de las páginas eso quiere decir por tanto que si he modificado la página index.html lo que debo hacer ahora es cargar el resto de páginas voy a cargar contacto voy a cargar cursos ya la tenía cuidado con diseño porque el diseño sí que existe voy a cargar pide tu curso y voy a cargar sobre mí voy a cargar por tanto todas las páginas y voy a modificar todos los menús de navegación así que copio el de index html y lo voy pegando dentro del resto de menos me voy al curso voy pegando me voy a contacto voy pegando el nuevo menú me voy a pide tu curso voy pegando y en definitiva la actualización que he hecho la aplico sobre el resto de menús del resto de páginas del sitio web ahora lo que estoy haciendo es editar la página sobre mi punto html para editar la página de sobre mí una vez más al igual que he hecho en el resto de páginas anteriores voy a copiar el contenido de cualquier otra página por ejemplo estoy copiando el contenido de contacto punto html selecciono todo lo copio y a continuación voy a sobre mí y pego y lo único que tengo que hacer ahora una vez más es borrar el contenido específico he borrado el formulario y ahora digo sobre mí y ahora digo en esta página te cuento cosas sobre mí o te doy información sobre mí si ahora guardo y recargo ahora sí podré comprobar como en todas las páginas existe la sección sobre mí pero sí existe insisto no es porque se ha hecho automáticamente sino porque los cambios que hagamos tenemos que en primer lugar y reflejarlos desde la carpeta al código esto quiere decir que si cambiamos el nombre de un archivo o añadimos un nuevo archivo tenemos que actualizar los cambios dentro del código dentro de la lista que representa nuestro menú y luego además debemos propagar esos cambios al resto de archivos dentro del proyecto vamos ahora por tanto y vamos a verlo bien vamos ahora por tanto como os decía vamos a poner un poco de texto para poner un poco de imagen en este sobre me voy a poner tres artículos para ello estoy usando la etiqueta que he usado anteriormente llamada artículo así que dentro de arctic el lo que voy a hacer simplemente va a ser poner un poco de texto y un poco de imagen estoy recordando estoy recordando que en la página inicial otra cosa que nos falta es la etiqueta a zaira así que voy a poner contenido en sobre mí y luego acabo de poner contenido en la etiqueta asael así que mira me voy a artículo y dentro del artículo voy a poner en primer lugar una imagen y esa imagen va a ser entrar dentro de multimedia y seleccionar esta imagen la típica imagen de fotografía de mi fotografía de la empresa multimedia barra y el nombre texto alternativo igual mi nombre a continuación voy a poner algo de texto como no sé todavía qué texto poner lo que voy a hacer es poner título de la sección 1 y ahora mucha atención a la pantalla lo que quiero poner es algo de contenido de prueba un bloque de texto generalmente lo que suele hacer mucha gente creo que le muestro con anterioridad es buscarse un trozo de código un trozo de texto perdón plano de copiar y pegar y ya está yo como mucha otra gente solemos entrar en lips un puntocom y dentro del lip xoom.com solemos copiar el típico texto lorem ipsum que se pone de prueba en maquetación gráfica texto que parece latín las palabras de hecho están escritas en latín no quiere decir realmente nada tangible vale por tanto simplemente es un texto para rellenar es un texto para poner hasta que sepamos qué es lo que realmente queremos poner en esa página así que fijaos tengo una primera sección que tiene una imagen tiene un título y tiene un texto de prueba voy a copiar y pegar este artículo dos veces más en mi caso y simplemente en este caso voy a poner los logotipos de html5 y php que los tengo dentro de esa carpeta y los voy a pegar así que esto es título de la sección 2 esto es título de la sección 3 ahora si nos fijamos veremos como no me importa en este caso el tamaño de las imágenes tengo imagen título texto imagen título texto imagen título texto suficiente como para luego entrar dentro de esta página y maquetar fijaos que en cuanto a la estructura tengo una etiqueta arctic el y dentro de la etiqueta arctic el encuentro una imagen un título un texto dentro de la etiqueta arctic el encuentro una imagen un título un texto y dentro de la etiqueta arctic el encuentro una imagen un título y un texto es importante o es interesante al menos que tengan la misma estructura para luego poder maquetar los correctamente me deje dentro de la página de index html una etiqueta estructural no nueva en html 5 llamado llamada as air a said sirve para poner el contenido tangencial y que es contenido tangencial pues contenido tangencial es aquel que tiene que ver con el contenido que tenemos en nuestra página web pero no está relacionado directamente por ejemplo en este caso la etiqueta site no sólo se usa para esto que os voy a decir pero es un ejemplo dentro de la etiqueta side voy a poner los típicos enlaces a nuestras redes sociales por tanto voy a hacer lo siguiente y de paso os voy a enseñar un truco pongo a hr y ya sabéis que es una etiqueta de enlace hiperenlace a otra parte de momento no va a llevar a ninguna otra parte a ras cuento por qué y mira voy a poner lo siguiente en lugar de poner facebook que sí que vale que podría poner facebook fijaos ahí como pone en facebook y lo pone como enlazado en lugar de eso voy a poner una imagen pero eso quiere decir que me tendría que bajar el logotipo de facebook bueno podría hacerlo de hecho pero un truco que os voy a enseñar es el siguiente si ponéis www o mejor dicho http dos puntos barra barra www.facebook.com barra favicon punto y coma ya hablaremos de esto de que es el favicon punto y co lo que nos sale mirad es el logotipo de facebook aparece pequeñito pero allí está el favicon punto y co es una un icono es una imagen de icono para luego ponerla aquí arriba dentro de esa imagen de icono le puedo poner tantos fabricantes como quieran voy a poner por ejemplo el favicon de twitter twitter voy a poner el favicon de youtube voy a poner el favicon de linkedin y en definitiva cada uno de vosotros tiene que poner tantos favicon como redes sociales penséis estímase conveniente poner en vuestra web así que es facebook.com javi con punto y coma twitter.com fabri con punto y coma youtube.com javi con punto y coma y no todas las páginas del mundo tienen el favicon en la misma posición pero fijaos que la mayoría así en este caso la única que me está fallando es twitter vamos a ver si quizás sea allí parece que quería cargar parece que le está costando un poco de cargar bien en este caso lo que estoy haciendo es una técnica llamada hotline care lo que estoy haciendo es referenciar llamar a una imagen que no está haya aparecido el logotipo que no está realmente dentro de mi web qué pasa si un día por ejemplo facebook cambia el logotipo se cambia el logotipo y lo pone en la misma posición lo bueno es que mi página se actualizará automáticamente con el nuevo logotipo de twitter o de facebook o de quien sea la mala noticia es que si un día facebook decide que esa imagen en lugar de llamarse favicon punto y ccoo pase a llamarse favicon 2 punto y co pues desaparecerá desaparecerá porque ya no la está vinculando correctamente bueno otra alternativa evidentemente mirad uno digo evidentemente pero esta vez es no es tan evidente es nos vamos a google y en google imágenes porque google imágenes a veces es una fuente de información pongo social media’ icons entonces si en google ponéis socialmedia icons encontrareis que hay colecciones y colecciones y colecciones de botones de redes sociales preparados para descargar evidentemente abrir en un programa como photoshop para recortar y pegar no lo vamos a hacer de momento pero simplemente deciros que si no queréis más los logos oficiales y que los haremos personalizados y no queréis gastar demasiado tiempo diseñando los nosotros pues simplemente componer socialmedia icons tenéis ya en google imágenes un montón de ellos para descargar y para usar yo ahora mismo me he preocupado únicamente de poner los logotipos pero esto donde me lleva pues la respuesta es que ahora mismo no me lleva a ninguna parte y por qué digo que no me lleva a ninguna parte pues porque el h ref de las etiquetas a ahora mismo está vacío lo que tendremos que hacer por tanto es entrar a nuestras redes sociales para ver la dirección por ejemplo que os quiero decir con esto mi web mi página de perdón mi perfil de facebook en facebook.com barra carratalá porque me lo pide pronto entonces simplemente atención lo que hago es copiar y pegar en el hr y ya está medido a facebook he visto cuál es la url de mi perfil o de mi página copio la url y me la pego dentro de la red del código voy a hacerlo otra vez con twitter entro en twitter en twitter aunque le tengo cariño ahora mismo no me acuerdo de memoria de mi página pero no voy a abrir así que me voy a mi página de inicio bien y mi url de twitter es https dos puntos barra twitter.com jv carratalá pues me copió esa dirección me voy a twitter me voy a la etiqueta a que hace referencia a twitter y pego el enlace para que mirar para que cuando por ejemplo aquí en facebook me vaya a mi perfil de facebook o cuando en twitter me vaya a mi perfil de twitter ahora que estamos hablando de los botones de redes sociales hay una cosa que a la gente le suele interesar mirar y es que cuando por ejemplo yo pincha en el botón de facebook se me abra la ventana de facebook pero no se me abra en lugar de la que ya tenía porque pierdo mi blog sino que se me abra en una nueva pestaña o lo que antes se conocía cuando no habían pestañas en los navegadores como en una nueva ventana esto se hace atención a la pantalla poniendo un pequeño parámetro más target igual comillas comillas estoy por ahí arriba estoy en target a blanco atención que he puesto target y wal comillas comillas blank y he puesto un guión bajo antes de la palabra blanca lo vuelva a repetir me voy a la línea de twitter me hago un poco de espacio y pongo target es igual a comillas comillas black no blanco con nk target es igual a comillas comillas blank target es igual a comillas comillas blank esto que va a hacer por supuesto ahora recargo la página y al recargar la página comprobaréis como se pinchó en el botón de facebook tenía que recargar parece déjame ver sí bueno tengo que ver qué ha pasado ahí con el target blank porque parece que no lo ha pillado bien el error consistido en lo siguiente la propiedad de target blank es una propiedad del hipervínculo pero yo fíjate que he empezado a leer por aquí pero no me ha dado cuenta que he acabado el ad y me he metido en img por tanto le he puesto la propiedad a la etiqueta img y esa propiedad en la etiqueta img no hace nada de nada por tanto lo voy a quitar lo voy a cortar de img lo voy a pegar dentro de la etiqueta y ahora así sí vereis como si ahora guardo recargo para actualizar los cambios y mirad pincho en el botón de facebook comprobaréis como ahora se abre una nueva pestaña en lugar de quitarse el contenido de la pestaña anterior esto me permite en un momento dado visitar mis redes sociales sin tener que renunciar a la pestaña en la cual estaba navegando por la web por el blog o por lo que sea que estéis construyendo para cerrar esta primera parte de html dejadme a hablar una cosa que no me obsesiona particularmente es una cosa llamada meta etiquetas las meta de etiquetas se ponen dentro no de la cabecera sino de la cabeza acordémonos que al principio pusimos una etiqueta meta obligatoria para la codificación de caracteres efe 8 las metas etiquetas no son etiquetas son etiquetas que hablan de las etiquetas igual que el metalenguaje es lenguaje que habla del lenguaje las metas etiquetas son etiquetas que hablan de otras etiquetas entonces en este caso las meta de etiquetas nos permiten poner cosas como por ejemplo voy a poner tres clásicas hay un montón de media etiquetas pero voy a poner las tres más clásicas voy a poner la descripción voy a poner el autor y voy a poner las keywords mirad ahora estoy copiando de aquí no estoy copiando de la página dw 3 schools de hecho me voy a copiar las tres en bloque fijaos que ya estaba el metal char set y voy a copiar estas tres las podéis copiar de windows de 3 schools simplemente poniendo metatags o bien las podéis copiar de la página que acabo de pegar la fórmula es la siguiente meta para decir que esto es una meta de etiqueta se abre pero no se cierra no tiene etiqueta del cierre name para decir qué tipo de etiqueta es description yo siempre suelo decir que se hago está en inglés es que no se toca es que tiene que ser así no puedo poner descripción en castellano y ahora content es igual a josé vicente carro tala es un profesor programador y formador ubicado en valencia españa es decir la descripción es simplemente una pequeña frase quizás un párrafo quizás dos o tres frases seguidas nunca un texto más largo de un párrafo que describe con palabras llanas cuál es el contenido de tu web a continuación hay otra etiqueta llamada keywords que son las palabras claves por ejemplo carratalá como html5 php coma java enterprise coma valencia son una serie son un bloque de palabras clave separadas por comas a día de hoy las técnicas de posicionamiento limpias de posicionamiento natural dicen lo siguiente os digo algo que tiene validez a día de hoy puede tener dejar de poder dejar de tener validez en un futuro no vale la pena poner más de 10 etiquetas de keywords por una razón muy sencilla lo que va a hacer un buscador en este caso en principio parece que es lo que hace google es darle atención el 100% de importancia a la primera etiqueta que pongas el 50 por ciento de importancia a la segunda palabra que pongas el 25 por ciento de importancia a la tercera palabra que pongas el 12,5 por ciento a la siguiente palabra que pongas el 6 por ciento de importancia a la siguiente palabra que pongas quiere decir esto que a partir de la octava palabra no importa prácticamente apenas las palabras que pongas puedes poner palabras pero a google le va a dar igual qué es esta etiqueta realmente de keywords bueno esta etiqueta se considera un poco un reflejo de cómo se indexada hace años en la web hace años los buscadores si queréis diego google por decir el más actual y el mar el que tiene más cuota actualmente hace años los buscadores los motores de búsqueda no tenían potencia suficiente no tenían servidores suficientes como para indexar todo el código de tu página para leerse el código de tu página y procesarlo todo lo que hacían por tanto era buscar la etiqueta de keywords y confiar de buena fe en que las palabras clave que hubieras puesto realmente coincidirán con el contenido que habías puesto abajo diego de buena fe porque a veces no se cumplía la cuestión es que a día de hoy google o cualquier buscador ya tiene potencia suficiente y de sobra como para leer toda tu página web en el momento en que google ya puede leer toda tu página web deja de tener tanta importancia por eso no me obsesionan las keywords porque esto si se lo va a leer pero también se va a leer toda tu página web y para google te puedes imaginar que va a tener más importancia lo que realmente ponga en el body que lo que tú digas que va a tener vale el cuerpo una cosa que os digo es bueno tampoco nos cuesta nada poner esta etiqueta con lo cual ponerlo no me obsesiona pero bueno la pongo y hacer eso sí aseguraros eso sí que el contenido las metas etiquetas que pongáis en esa etiqueta perdón las palabras clave que pongáis en esa etiqueta realmente coinciden con lo que tengáis aquí abajo porque si no a google dirá porque en un sitio me dices una cosa y en otro sitio me dices otra lo que hará es desconfiar si son sinónimos puede ser que valide pero tenéis que tener en cuenta una cosa y es que cada vez efectivamente cada vez google es un ordenador más inteligente cada vez google cada vez piensa más como un ser humano pero a día de hoy no es un ser humano yo te diría que si por ejemplo me habláis de sinónimos de palabras inglesas porque al final hay que tener en cuenta que well es un motor de búsqueda norteamericano probablemente no habrá problemas pero sí vale nosotros me diréis bueno el español es un lenguaje muy importante es el segundo o el tercer lenguaje a nivel mundial por número de hablantes de promedio d de personas que lo usan es nuestra opinión como hispanoparlantes google puede tener otra opinión diferente por ejemplo sin ir más lejos para que os hagáis la idea en él en el texto por voz google tiene una aplicación que es texto por voz que tú hablas y te lo va convirtiendo a texto pues en el conversor de voz a texto de google en el inglés tú dices punto y coma y te ponía el punto de la coma le pone el punto de la coma en castellano hasta hace muy poco no te lo ponía ahora sí que le pone luego porque lo uso bastante pero hasta hace poco pues no consideraba o no se habían parado a programar que en castellano y fíjate que es el segundo tercer lenguaje mundial pues no lo hacía por tanto con los sinónimos puede ocurrir lo mismo que digan si el español es muy importante pero en nuestra lista de prioridades pues no hemos llegado todavía a ese punto no pasa nada es peligroso porque hay google diría porque me pones toda la página en castellano y las palabras clave en inglés en definitiva sería una concordancia entre las palabras una falta de concordancia entre el idioma y por tanto el google siempre que hay una falta de concordancia no le va a gustar por último por último voy a editar la etiqueta de autor donde en este caso pondría el nombre del autor de la página y fijaos una cosa estas etiquetas atención una vez más las haya copiado perdón a su copiado todavía las he puesto en index.html pero no están todavía en el resto de páginas web en mi sitio web no están en diseño no están en cursos no están en contacto no están en pide tu curso no están en sobre mí lo que tendría que hacer ahora es simplemente ir pegando estas etiquetas en el resto de páginas de mi sitio web no voy a discutir en este caso porque no es el momento de si debemos poner exactamente las mismas etiquetas las mismas palabras las mismas claves dentro de cada página de un sitio web o si debemos personalizar y adaptar las etiquetas para cada página del sitio web y digo que no es el momento porque eso es más una cuestión de seo de posicionamiento en buscadores que de programación html realmente y para resumirlo y para adelantarlo un poco os diré que las dos estrategias son válidas pero tienen efectos diferentes si todas las páginas les ponen exactamente las mismas etiquetas lo que hacen es que todas en conjunto empujan para posicionar unas ciertas etiquetas concretas pero si alguien te busca por ejemplo por cursos no te van a encontrar porque no tengo una etiqueta personalizada para la página de cursos creo palabras clave personalizadas para cada una de las páginas cada una de las páginas index hará más especializada mente cada una de las páginas indexadas solo por el contenido concreto que tiene con lo cual será más fácil que la gente llegue a encontrar esa página concreta en google pero una página hace menos fuerza que seis páginas a la vez con lo cual por eso digo que son dos estrategias si pones etiquetas específicas para cada página tienes que hacer más esfuerzo para que cada página se posicione si ponen las mismas etiquetas en todas las páginas hay que hacer menos esfuerzo pero posiciones el sitio web no una página concreta del sitio web así que cada estrategia tiene sentido según el tipo de página o según el sitio de otros según el tipo de sitio web que quieras posicionar vamos a empezar en una parte donde hablaremos de css css es el lenguaje hermano de html que sirve para estilizar hemos visto hasta ahora como hemos puesto el contenido de nuestras páginas en html las páginas han resultado estéticamente un poco horribles aunque el contenido y el marcaje que hemos hecho hasta ahora es perfecto es correcto css es un lenguaje que funciona sobre html que sirve para estilizar el contenido que hemos escrito en html cuando digo estilizar me estoy refiriendo a proporcionarle valores estéticos hablaremos de color hablaremos de anchuras de bordes de tamaños de todo este tipo de elementos en definitiva darle atributos visuales a la maquetación cruda que hemos hecho hasta ahora css es un lenguaje de estilizado que nos sirve para trabajar hablando en palabras llanas el diseño de la web aunque se puede hacer prácticamente lo que quieras con css no se va a hacer de la misma manera con el mismo tipo de interfaz que trabajamos programas de diseño gráfico como por ejemplo photoshop e illustrator en photoshop e illustrator tenemos una hoja en blanco y con el ratón podemos ir moviendo elementos podemos ir escalando elementos podemos cambiar los atributos visuales de una página sin tocar nada de parámetros nada de código prácticamente con css podemos hacer eso mismo pero desde el punto de vista del código quiero decir con esto que cuando yo muevo algo con el ratón en photoshop también puedo moverlo con css pero en css se mueve con parámetros y trabajar directamente con css no es la única manera de diseñar una página web es la que vamos a hacer en este caso porque nuestro objetivo ahora mismo es aprender css puro y duro’ muchas veces lo que se hace es empezar un diseño en photoshop crear el diseño en photoshop o crearlo en illustrator sacarte por ejemplo un png y a partir de ahí duplicar ese diseño ir volcando ese diseño poco a poco del gráfico acss eso lo que hace lo que te permite es que cuando empiezas a escribir css tienes una idea muy clara y una guía visual de qué es lo que quieres conseguir además de esto también hay programas con los que trabajas de una manera visual como por ejemplo el photoshop e illustrator y te permiten convertir el contenido visual que ha desarrollado en html no me fío demasiado porque tienden a meter código basura porque tienden a que el código que sacan no está demasiado limpio ahora puede ser una buena alternativa por supuesto se puede copiar y pegar el código y modificarlo para tus propios fines no es ya sólo que las últimas versiones de illustrator te permiten hacerlo es que photoshop desde hace un montón de años te permite dividir por sectores y luego guardar eso como html te lo convierte en tablas también es cierto pero es una buena manera de empezar yo de hecho voy a confesar que empecé así y luego ya poco a poco le fui derivando hacia programación pura y dura en definitiva lo que os voy a enseñar no es la única manera de trabajar con css pero es la manera que se considera digamos pura la manera que se considera trabajar con css a palo seko más adelante probablemente veremos cómo trabajar de otras maneras os voy a decir en primer lugar que hay tres maneras de incluir css en un archivo la primera manera se llama css en línea no es deseable de hecho penaliza para el posicionamiento consiste en que yo por ejemplo me voy a esta etiqueta a h1 me hago un poco de sitio dentro de la etiqueta h1 y le pongo un parámetro que en principio es html un atributo html pero que realmente se llama style es un estilo css y por ejemplo para hacer algo sencillo antes de empezar os a explicar cosas de css digo color dos puntos red no hace falta ni que lo copies porque todavía no os he explicado la sintaxis de css simplemente lo que quiero es que entendáis el ejemplo entonces si digo h 1 style es igual a color red es evidente que uno cuidado que estoy en cursos que cuando entré dentro de cursos en h uno va a estar de color rojo solo el h1 se llama un estilo en línea porque fijaos que lo he escrito en la línea particular en la que creo que afecte el estilo css en línea existe pero no se recomienda solo se recomienda para emergencias por tanto en este caso os lo acabo de enseñar pero lo voy a borrar no quiero estilo en línea me voy a ir a la página index.html y os voy a enseñar el segundo tipo de estilo que es el estilo con el que vamos a empezar trabajando que es el estilo interno el estilo interno consiste en que nos vamos dentro de la etiqueta head no dentro deje ver si no dentro de la etiqueta head y pongo una etiqueta de apertura style y una etiqueta de cierre style y ahora digo todo lo que escriba aquí dentro es css creo por tanto una etiqueta de apertura style una etiqueta del cierre style y todo lo que escriba ahí dentro lo haré con la sintaxis de css este es el segundo método de incluir css en un sitio web que consiste en almacenarlo todo en la cabecera didácticamente es el más bueno aunque a un nivel real no es el más práctico a un nivel real usaremos más adelante el tercer método de incluir css que es derivar lo a un archivo externo un archivo que sólo tendrá código css y un archivo que será compartido entre diferentes páginas web entre diferentes páginas html esa es la idea realmente del css las letras css vienen de cascading stylesheets hojas de estilo en cascada la idea de en cascada es que tú haces una hoja de estilo y luego va cayendo en cascada sobre el resto de hojas html de forma que haces un cambio y se aplica automáticamente sobre el resto de hojas html por tanto insiste una vez más en que vamos a empezar trabajando con css interno pero más adelante cambiaremos a css externo que es la tercera manera de trabajar con css dentro de la etiqueta estilo voy a escribir de la siguiente manera atención muy importante lo que voy a escribir el pseudo código no es código de verdad es un código de muestra en primer lugar escribiré un selector un selector es una pequeña línea una pequeña frase que me sirve para seleccionar qué parte quiero maquetar una vez que hemos descrito un selector de hecho me voy a volver a la página de inicio una vez que hemos escrito un selector pondré llave que se abre y llave que se cierra ojo no confundáis las llaves con los corchetes vale son llaves si me permitís voy a poner la tipografía más grande porque en este caso vamos a escribir poco código de momento las llaves están pulsando el botón al xerez que está a la derecha de la barra y luego dos o tres teclas más arriba tenéis aquí las llaves insisto no confundir con corcho y terminar estos son corchetes y esto que escrito en la pantalla son llaves a continuación todo lo que voy a hacer se va a escribir en atributo dos puntos valor punto y coma atributo dos puntos valor punto y coma atributo dos puntos valor punto y coma se tiene que escribir así css es un lenguaje de marcado permisivo como html no tan estricto como javascript o php pero aún así es un poco menos restrictivo que html si no pongo bien los dos puntos pero el punto y coma hay cosas que pueden no interpretar bien los dos puntos se puede copiar y pegar los dos puntos separan atributos de valor y el punto y coma separan parejas de llaves atributo y valor más cuestiones en css al igual que en html las sangrías son meramente estéticas las sangrías no son funcionales ahora yo os recomiendo poner sangrías para que cuando pongamos varios electores uno debajo del otro sepamos perfectamente dónde acaba uno y dónde empieza el siguiente a veces veréis escribir cssa así mirad a veces lo veréis así es código css desplegado a veces lo veréis así qué es código css comprimido cuál funciona mejor los dos funcionan perfectamente bien simplemente evidentemente este código fíjate que te pone todo en una línea y con este en el estado cinco líneas ahora bien al igual que ocurría en html este código es mucho más legible este código es bastante menos legible os voy a decir que cuando profundice jce no sólo vuestro conocimiento sino vuestra práctica en css quieras que no tendréis a esta manera de escribir pero ahora al principio por razones didácticas por claridad vamos a escribir código css desplegado será menos eficiente pero será mucho más claro a la lectura una de las cosas más fáciles que podemos hacer en css es trabajar con los colores mirad voy a borrar estas líneas que he escrito porque estas líneas que ha escrito como os he dicho son pseudo código y pseudo código quiere decir que no son código de verdad esto de arriba de hecho es un comentario escrito en css por tanto lo voy a borrar todo para empezar desde cero y ahora voy a escribir una etiqueta real voy a escribir un selector real voy a empezar escribiendo body recordad que la primera palabra que escriba se llama selector y con selector lo que quiero decir es que si aquí he puesto body mirad equivale a que todo lo que escriba a continuación se va a aplicar sobre la etiqueta body así que pongo body pongo llave de apertura llave de cierre bajo abajo para hacer un poco de sangría y voy a empezar con una de las instrucciones más sencillas de css que es color color me permite especificar el color que va a tener la fuente no el fondo ahora iremos al fondo si no la fuente hay varias maneras de escribir los colores en css la más sencilla es simplemente poniendo el nombre del color por supuesto el nombre del color en inglés así que si pongo color red comprobaréis como la gran mayoría del texto los hipervínculos por ejemplo no porque llevan su propio código de color pero la gran mayoría del texto se vuelve de color rojo si por ejemplo pongo blue el texto se convertirá a azul si por ejemplo pongo pink el texto se convertirá en el color de rosa o se ponga green el texto se hará de color verde la cuestión es cómo se yo qué colores puedo poner y qué colores no puedo poner bueno hay una lista de 127 colores creo que son que la puede obtener buscando lo siguiente efe ss 3 color names nombres de colores de css3 entonces fijaos mi equivocado por poco hay una lista de 140 colores y aquí los tenéis todos en esta lista simplemente buscáis como os he dicho css3 color names y por ejemplo la primera página que sale fijaos ahí como tenéis los nombres de colores que podéis poner dentro de esa lista el nombre de color por tanto es una de las maneras es si queréis la manera más fácil de poner colores pero no es la única manera una manera antigua que no os recomiendo porque es bastante difícil de manejar es poner el código hexadecimal el código hexadecimal funciona poniendo una almohadilla la almohadilla se pone pulsando la tecla al xerez y el número 3 del teclado y a continuación tengo que poner 6 caracteres los primeros dos para el color rojo los segundos dos para el componente verde y los terceros dos para el componente azul en este caso al haber puesto efe efe efe eso corresponde al color blanco y podéis comprobar como el texto se vuelve de color blanco si pongo 000 000 fijaos cómo se vuelve de color negro si pongo efe efe 0000 que es mucho en el componente rojo nada en el componente verde nada en el componente azul podréis comprobar como el texto se vuelve de color rojo trabajando de esta forma es realmente difícil saber a qué color corresponde cada número o mejor dicho a qué número corresponde cada color mirad cómo muestra por qué no toca ahora mismo pro tocará más adelante como muestra voy a abrir un programa de edición de imágenes en este caso voy a abrir un programa de software libre que podemos encontrar tanto en windows como en mac como en linux que se llama el gimp y voy a usar el gimp para editar un poco la paleta de color y ver cómo transformar un color a hexadecimal en este caso tanto el gimp como photoshop como prácticamente cualquier otro programa de edición de imágenes cuando tú seleccionas un color te dice cuál es su correspondiente hexadecimal esto me va a servir también para demostraros cómo funciona el color hexadecimal el código de color hexadecimal y os voy a decir por tanto que no hay un número ilimitado de combinaciones de color vale que combinamos las componentes rojo verde y azul y tenemos un número yo creo bastante denso de colores pero no ese límite mirar voy a llenar una ventana única y voy a hacer lo siguiente si yo selecciono un color el color que quiera fijaos que tengo aquí siempre una cosa que se llama anotación html si por ejemplo he cogido este verde miradme como copio esa anotación html la pego dentro del código respetando la almohadilla eso sí y cuando vuelvo a esta página el color verde es exactamente el mismo color verde que había seleccionado en este selector de color ahora atención todos a la numeración mirando la pantalla cómo funciona esa anotación voy a empezar desde negro y voy a llegar hasta blanco con lo cual parece claro que en principio diría desde cero hasta el máximo fijaos cómo era 2003 58 y en lugar de poner 9 pongo 0 b c d efe y en lugar de poner g pasó a 11 12 13 14 15 16 18 y pasó a 1a 1b ese es el código hexadecimal en lugar de trabajar con el código decimal de 0 a 10 trabaja de 0 16 de 0 a 8 con números y de 9 hasta 16 con letras tiene su explicación de hecho en alguna ocasión he visto trucos los podéis encontrar por internet para transformar fácilmente reglas nuevo técnicas para saber a cada número que hexadecimal le corresponde pero os voy a decir que menos molestéis me os molestéis porque en telecinco y con css3 existen nuevas formas de seleccionar color la forma que más pienso que os va a agradar es cambiar el hexadecimal por simplemente rgb y a continuación tres componentes rojo verde azul red green blue con los números de fuerza de cada color por ejemplo 25 500 los números van de 0 a 255 es decir cada componente de color tiene 256 niveles de color 25 500 equivale a mucha fuerza en el rojo poca fuerza en el verde poca fuerza en el azul y si compro baix lo que acabo de hacer es cambiar el texto a color rojo por eso quiero deciros que existe el código hexadecimal pero en mi opinión os va a resultar mucho más sencillo trabajar con la mezcla de color rgb y por último en respuesta a la pregunta de cuántos colores diferentes puedo hacer con html o con css la respuesta es que no es un número ilimitado de colores fijaos que si mezclo de 0 a 256 3 canales el número no va a salir infinito esto va a ser igual a multiplicar mirad 256 por 256 por 256 que os digo ya queda 16 como de 7 millones de colores así que 16,7 millones de colores son la paleta de colores diferentes que podemos tener en html no son infinitos es cierto pero pienso que es un número suficientemente amplio como para trabajar en la web por lo menos para la mayoría de profesionales si le preguntas a un fotógrafo igual te dirá que para él son pocos porque un fotógrafo trabaja con color pero para el resto de mortales digamos que 16 como 7 millones de colores es un número suficiente como para poder realizar cosas el formato de color rgb es el que mejor recepción ha tenido por los diseñadores gráficos os voy a decir que ya que estoy hay un formato alternativo que es rgb a rgb y añade un cuarto canal alfa que es un canal de transparencia por tanto una cosa que os voy a decir atención es que cuando hago rgb rg&e van desde 0 hasta 255 y no admiten decimales pero cuando pongo alfa el cuarto parámetro va de 0 a 1 y evidentemente admite decimales por tanto si pongo rgb a 25 500 255 es rojo 0 es verde 0 es azul y 0.5 ya sabéis que en programación los decimales se ponen con punto y no con coma 0.5 es la transparencia si 0 es completamente transparente y uno es opaco 0.5 es con el 50% de transparencia y podréis comprobar en la pantalla que si recargo tengo un color rojo desvanecido un color rojo semi transparente cuando crearon el estándar de css3 y ampliaron los colores para que además de esa decimal tuvieran rgb le pusieron un segundo modo de color que es hs l hs l es yoo saturation y valió entonces you es el grado de la rueda de color moment in moment in moment in color wild la rueda de colores están aquí miranda ahí esta bonita la rueda de color esta es entonces el primer valor es el ángulo de 0 a 360 que estás en la rueda el segundo valor ese es la saturación y con esto ahora luego responde a la pregunta de fem y acá él saturation se mide en porcentaje voy a poner una saturación del 100% y el light nes que es la ele que es la tercera letra se mide también de 0 a 100 donde el 0 es nada delight mes es decir negro 100 es light next a tope es decir blanco voy a poner un 50% para poder ver el color que se lo pongo 0 vélez todo negro si lo pongo siempre todo blanco que ver un punto intermedio y fíjate cómo estoy atención aquí y me aparece rojo porque me aparece rojo mirad mirad me aparece rojo porque en la rueda de color el ángulo cero es rojo y estoy a tope de saturación de color diréis que va a salir si en lugar de poner ángulo cero pongo ángulo 180 pues si pongo 180 guardo recargo y fijaos cómo sale y en calma parece que me ha ido hacia el otro lado me he ido a azul medio asia si pongo 90 guardo recargo me voy a ver me parece que está un poco desfasado vale si pongo es que igual van radiales estoy pensando si pongo 270 vale vale fijaos que lo que voy haciendo es simplemente darle vueltas a la rueda de color una cosa que os digo es que conozco a poca gente que trabaje con el sistema hs l simplemente os lo enseño para demostrarlo pero veréis que es mucho más atractivo el sistema de color rgb un sistema de color que mucha gente ha echado en falta es el sistema fm greg acá con el sistema de color sus tractivo cmr acá el color no se expresa como combinación aditiva de rojo verde y azul sino que se expresa como combinación sus tractiva de cian magenta amarillo y negro mientras que en todos los medios audiovisuales el sistema de color que se usa es el rgb en todos los medios de color impresos el sistema de color que se usa es el fm agrega que sobre todo hay que tener en cuenta que hay mucha gente que proviene del diseño gráfico que están acostumbrados a trabajar en semi agrega acá así como yo me pones un color rgb y más o menos el que es a mí me pone un color en cm y acá y yo no sé lo que es pero hay mucha gente que viene de trabajar en diseño gráfico que controla perfectamente el sistema cmb acá la mala noticia que os voy a dar es que a día de hoy no existe el sistema de medir y acá en css3 la razón es porque css3 nunca va a ser para imprenta css3 siempre va a ser para una pantalla de ordenador o por una pantalla de teléfono móvil y las pantallas siempre van por rgb os digo esta razón pero también os digo que esta razón es un poco tontería porque no hubiera costado mucho pienso yo insertar un sistema de color film y acá y luego evidentemente internamente en el navegador hacer los cálculos de conversión para pasar fem y acá a rgb y por tanto eso abriría la puerta o por lo menos haría que la transición de diseñador gráfico a diseñador web fuera más sencilla porque por lo menos el sistema de color ya te lo conocería es bastante bien pero la realidad es que no vale yo soy el primero yo no uso cm y acá pero soy el primero que comprende que para los diseñadores gráficos hubiera sido algo bastante positivo vale por tanto los voy a hacer de momento es trabajar voy a potenciar bastante el sistema de color rgb voy a continuar dejadme continuar poniendo el color del texto en negro negro sería rgb 000 o bien poner black evidentemente y vamos a continuar trabajando con el color del fondo hemos empezado con el color del frente que suena muy fácil de empezar y para trabajar con el color del fondo simplemente pongo background como ya os he dicho si sabes inglés ya sabéis medio css porque en css todo ahora veréis es bastante lógico todo es bastante razonable si lo piensas en inglés así que si quiero cambiar el fondo simplemente pondré background el sistema de color del fondo es exactamente el mismo sistema de color del frente por tanto si habéis aprendido que poniendo red cambiamos el color de fondo a decorar del frente a rojo ahora ponemos red recargo y fijaos cómo queda horrible lo sean lo cambio pero como el color de fondo cambia a rojo evidentemente también funciona con green evidentemente también funciona con cualquier color que queráis poner incluso también por supuesto funciona con rgb 200 200 200 equivaldría a poner el color de fondo con un cierto tono gris ya que actualmente en diseño web se tiende a oír un poco del fondo blanco del fondo completamente blanco y lo que se hace es poner el fondo un poquito gris tampoco muy gris porque si no se pierde un poco la legibilidad pero desde luego un poquito gris una cosa muy divertida que podemos hacer es poner imágenes de fondo así que para poner imágenes de fondo yo simplemente lo que voy a hacer es en google voy a buscar algo como atención web background simples al poner web background simples lo que estoy haciendo es buscar fondos de pantalla que se repitan por ejemplo mirad voy a poner este mismo a ver si me permite bajarlo este no este no es repetible como se nota que no es repetible fijaos esta flor a vosotros parece que esta flor vuelve a aparecer por aquí parece que no luego ése no es repetible vamos a buscar uno que realmente sea repetible vamos a ver mira este de las hojas quizás sí que parece repetible entonces atención que voy me lo voy a bajar lo seleccionó me lo voy a bajar por supuesto a la carpeta multimedia que es la carpeta donde guardo las cosas me copió el nombre grand me me copió el nombre y ahora voy a poner lo siguiente ahora en el código web en lugar del color voy a poner url paréntesis paréntesis y pongo multimedia barra el nombre de la web es decir dentro del paréntesis tengo que poner la ruta exacta la ruta precisa hasta esa imagen guardo recargo y ahora comprobaréis como en el fondo de la página ya sé que de momento no queda muy elegante para luego buscamos un fondo algo más estético pero en el fondo de la página por lo menos quiero que lo veáis demostrado aparece esa imagen he buscado específicamente mirad las palabras simples simples en castellano querría decir sin costuras o repetible para que cuando acabe la imagen y se repita porque si yo no le digo nada cuando acabe la imagen se va a repetir no se note o se note lo menos posible la repetición hay un par de modificadores para css que hacen lo siguiente atención background guión repeat y yo puedo decirle lo siguiente por ejemplo puedo decirle no repito no yo repito lo que hace es que no repite el fondo cuando se acaba si le digo repetir en horizontal o repetir en vertical lo que hará es repetir el motivo o bien solo en equis o bien sólo en y simplemente quería demostrarnos lo pero lo que voy a hacer es quitar este background repito no repeat lo voy a quitar simplemente quería demostrarlo para ya lo usaremos en alguna otra ocasión para hacer que el fondo se repita para tener un fondo continuo varias cosas que os quiero decir en primer lugar una novedad en css 3 pero que os la voy a explicar y no os la voy a recomendar porque solo os la recomendaría en casos muy específicos imaginaos que tengo esto que tengo en la pantalla tengo un fondo por ejemplo floral y ahora en background voy a añadir rojo como url qué es lo que acabo de hacer pues lo que acabo de hacer un momento vamos a poner aquí va a crear un rgb 25 500 tengo que ponerlo con imagen me poner otra imagen vamos a ver voy a poner una imagen huépac round alfa mira a la atención o simplemente voy a esto miradme que os lo perdáis esto me lo paso aguín no estoy explicando lo que estoy haciendo ya lo sé porque lo explicaré más adelante me lo voy a convertir en transparente y por tanto esa imagen que tengo ahí es transparente voy a sentir una cierta transparencia colores invierto y ya está me la voy a exportar como fondo trans punto png también hablaremos más adelante de porque en png y no en jpg pero el caso es que ahora me copió esta url y bingo y digo fondo trans punto png si os fijáis cuando vuelvo lo que tengo es que me he puesto por una parte el fondo floral si lo veis encima he puesto con transparencia el fondo semi transparente esto qué quiere decir que con un background mezclando varias urls mezclando varias imágenes con comas podemos hacer separaciones por capas que quiero decir con capas pues mira yo ahora quiero pintar todo este conjunto de rojo no quiero perder los dibujos de las flores pero quiero hacer que sea rojizo entonces me iría a un programa de edición fotográfica me haría por ejemplo una nueva imagen la pintaría de color rojo y la transparencia de la capa por ejemplo la bajaría el 50% son rojo semi transparente me guardo esa textura como rojo punto png png es para guardar la transparencia y hablaremos diferencia y ahora vengo aquí y me copió esa línea pongo rojo png y fijaos que sigo teniendo las flores por el fondo pero por encima tengo un par de capas más es decir tengo una cierta capacidad no tan amplia como programas como photoshop pero tengo una cierta capacidad para montar cosas por capas siempre que trabaje con transparencia eso sí ahora os digo que eso es que esto existe es novedad en css3 pero no os recomiendo usarlo la razón por la que no recomiendo usar lo es porque cualquier pc cualquier mac mueve sin problemas páginas con capas pero cuando intentas ver en un dispositivo móvil una página con el fondo por capas se ralentiza bastante porque los móviles por lo que parece no están tan pensados al menos los de hoy en día para este tipo de cosas vale por tanto sólo usarlo si realmente tiene algún sentido si realmente no se puede resolver de otra manera y luego a continuación la siguiente pregunta sería cómo puedo cambiar el tamaño de esas flores para hacerlas más pequeñas o más grandes os voy a decir que hay una propiedad que se llama background size que es el tamaño de la fuente van crown 6 yo puedo trabajar la atención con píxeles con porcentaje o bien con palabras como cover mirad yo pongo 100 píxeles 100 píxeles lo que le estoy diciendo es que la primera componente es la x el horizontal la segunda componente es la y lo vertical eso quiere decir que ahora estas tres imágenes mirad cada bloque me ocupa 100 píxeles 100 píxeles allí en lugar de usar píxeles puede usar porcentaje por ejemplo 50% 50% ahora quiere decir que la anchura y la altura de la imagen estará al 50% de la anchura y la altura de la ventana también le puedo decir una fórmula que es cover como ver es cúbreme la página web entera es decir tira a lo alto aunque sobre a lo ancho abría había una palabra además de cover que ahora mismo no la recuerdo pero la voy a buscar en un momento mirad es aquí está cover y con time contener hace lo mismo pero en vertical con tener lo que hace es que la horizontalidad es el 100 por ciento de la imagen y si tiene que repetir por alto pues no pasa nada pues repite vale por tanto para resumir cover contain porcentaje o píxeles y antes de cerrar este vídeo os voy a decir que otra novedad dentro de css3 es background position mirad si pongo por ejemplo background size 100 pixeles 100 pixeles atención a mi pantalla veréis como la alineación es a la esquina superior izquierda veis como la primera baldosa está alineada a la esquina superior izquierda y pueden no coincidir a la derecha background position te permite especificar dónde se pone la primera baldosa con que se alinea por donde podría poner right top ride en horizontal top en vertical eso quiere decir que se alinea a la derecha arriba por tanto recargo y fijaos como la baldosa se ha alineado a la derecha arriba en horizontal existe left center y right y en vertical existe top middle y botón en el centro en vertical no es centre sino que es nivel por tanto en horizontal que sería el parámetro podemos poner left izquierda centre centro o right derecha y en vertical podemos poner top arriba medel en el medio botón en la parte baja digamos como os decía lo que voy a hacer ahora es buscar una imagen algo más o algo menos cantarina que las flores web background simples voy a buscar imágenes y voy a buscar una que sea agradable como esta que sea suave pues una por ejemplo cómo está fijaos que tiene como una textura de papel por tanto voy a esta por ejemplo voy a poner fondo repetible para que no sea un nombre tan largo de archivo y ahora voy a sustituir el código en lugar de poner todas las urls voy a poner no sé qué puesto al fondo es repetible creo que nuestro fondo repetible punto jpg punto jpg eliminó el resto de capas antes os las he demostrado pero no las quiero usar y fijaos ahora no sé si lo veréis como tengo el fondo de color como gris pero sobre todo es que se amplió un poco veréis que el fondo es tiene un tramado como de papel como de papiro no pues esta es la textura que quiero usar voy a continuación a trabajar con una cosa que se llama elementos geométricos si quieras que no eso me llevará a trabajar con con ideas y con clases miradme en la estructura html yo he creado un body he creado un día un dip que está vacío he creado a continuación un eje ver entonces dentro del dip la cuestión está en que llegará un momento en que yo tenga muchos dips necesito nombrar a cada día de una manera diferente necesito localizar necesito identificar a cada uno de los días hay dos técnicas principalmente aunque hay muchas más en realidad pero son dos técnicas llamadas los ires y las clases cuando un elemento se va a repetir una vez y sólo una vez se le pone un nivel pero cuando un elemento se va a repetir varias veces ahora veréis como es frecuente le pones una clase así que me voy a hacer un poco de espacio en este bip y voy a poner y de igual comillas comillas contenedor porque elegí puesto y de por qué contenedor solo va a haber uno en esta página web así que como solo va a haber uno le pongo un aire a continuación voy a localizarlo voy a seleccionarlo con css me escapo de las llaves que he hecho antes y pongo atención lo siguiente almohadilla contenedor esto es una cosa que voy a repetir varias veces a lo largo del curso fijaos que yo no estoy seleccionando la etiqueta no estoy seleccionando el tipo lo que estoy haciendo es seleccionar a través del id por tanto cuando seleccionó a través del bid lo que hago es poner una almohadilla almohadilla equivale a ive cuando creé una clase lo que haré es poner un punto punto equivale a clase ahora por el momento lo que he hecho es poner un id y por tanto he puesto y de igual a contenedor equivale a almohadilla contenedor en css si hubiera sido una clase en lugar de un id hubiera sido un punto entonces voy a poner ahora lo siguiente vamos a hablar de propiedades geométricas voy a hacer que el wish de este proyecto el wef del contenedor voy a hacer una página más bien vertical voy a hacer que sea de por ejemplo 600 píxeles iguales demasiado ancho voy a hacer 500 píxeles venga with es igual a 500 píxeles para ver lo mejor para verlo mejor voy a hacer lo siguiente background esto ya lo hemos visto antes es igual a white para ver bien lo que estoy haciendo quiero que el contenedor tenga el fondo blanco y podréis ver como si el contenedor tiene el fondo blanco ahora el contenedor aparece de color blanco mientras que el fondo aparece del color característico que le he puesto a la textura vamos a hablar a continuación de dos tipos de margen en css existen dos tipos de margen un margen e interior que se llama padding y un margen exterior que se llama margin fijaos en el borde de esta página os daréis cuenta de que el texto está plenamente pegado a ese borde fijaos allí el texto está pegado a ese borde y eso queda feo para añadir un poco de margen interior lo que voy a hacer es poner una nueva línea y poner padding con dos des es igual a un número de píxeles por ejemplo pongo 10 px esto me pone 10 puntos de margen tanto arriba como abajo como a la izquierda como la derecha si ahora guardo y recargo comprobaréis atención como ahora existe un cierto margen en los bordes del objeto una vez más insisto en que es un margen interior es un margen que va desde el borde de la caja hasta el interior del contenido en el como en muchas otras cosas en css me está aplicando ese valor tanto arriba como abajo como a la izquierda como a la derecha pero yo por ejemplo podría decir quiero más margen a la izquierda de la derecha y no quiero nada de margen arriba y abajo por tanto en padding como en muchas cosas de css se puede poner par inglés por ejemplo de 20 píxeles para dean wright por ejemplo de 20 píxeles palin top por ejemplo de 0 píxeles y padding botón por ejemplo también de 0 píxeles lo que estoy haciendo de esta manera acabo de recargar y acabo de refrescar es fijaos que he puesto margen a la izquierda ya la derecha y no lo he puesto ni arriba ni abajo el problema de esto es que he tenido que cuadruplicar la línea la he tenido que multiplicar por cuatro otro truco es el siguiente mirar escribo padding una sola vez padding y en lugar de introducirle un parámetro introduzco 40 píxeles 10 píxeles 20 píxeles 30 píxeles podréis comprobar que el primer parámetro se aplica a la parte de arriba el segundo parámetro se aplica a la derecha el tercer parámetro se aplica a la parte de abajo y el cuarto parámetro se aplica a la izquierda es decir va en sentido de las agujas del reloj perdón lo he hecho al revés en sentido inverso a las agujas del reloj poniendo los márgenes ahora por el momento lo que voy a hacer después de haber explicado estas variaciones es simplificarlo poniendo un padding común a los cuatro lados de la caja de 20 píxeles como os decía existe también un margin que me pone los márgenes desde la línea exterior de la caja hacia afuera funciona exactamente igual que el padding puedes poner pixeles puedes poner margin top margin botón margin left y margin right y puedes también poner cuatro parámetros a un margen pero en este caso os voy a decir un truco que consiste en poner margin auto margin auto lo que hace es centrar la página en la pantalla fijaos que martín auto lo que hace es que el margen sea automáticamente igual tanto a la izquierda como a la derecha guardo recargo y podréis observar que el cuerpo principal el contenedor de la página está centrado con el navegador web vamos hablar un poco de propiedades de texto por ejemplo voy a estilizar el texto h1 el texto de h1 vosotros no lo sabéis pero yo os lo digo tiene por defecto bastante margin y bastante parís así que lo primero que voy a hacer es poner margin es igual a 0 pixeles padding es igual a 0 píxeles el texto h 1 está empujando vosotros no lo habéis dicho que empuje pero es un estilo por defecto que lleva el navegador que llevan todos los navegadores ahora vamos a empezar si queréis un poco cogiendo el toro por los cuernos y vamos a cambiar la font family la familia de la fuente del texto muchos navegadores ponen como familia de fuente por defecto una familia de fuentes de tipo serif a las familias de fuentes de tipo serif a tipo sheriff son fuentes con decoraciones con remates con acabados pero yo ocurre que no quiero este tipo de fuentes así que pongo sans ion sheriff sans-serif es sin decoraciones sin remates podéis comprobar que se abra guardo y recargo sólo el h1 me aparece como fuente de palo puedo cambiar también a algunas fuentes estándares entre sistemas operativos como por ejemplo arial sansal y por efecto de poner arial como por ejemplo verdad pero la buena noticia es que en css3 se admite la carga de fuentes personalizadas para haceros una demostración voy a ir a una página web como por ejemplo da font en the font podemos encontrar muchas familias de fuentes a no olvidarme demasiado me voy a bajar estas dos primeras que son bastante chulas mira tengo lemon milk y tengo cynthia editó así que me las voy a bajar las dos atención mira me las bajo las dos pulso descargar pulso descargar se me han bajado dos archivos zip donde se me han bajado estos archivos zip con toda probabilidad se me han bajado en la carpeta de descargas así que voy a descomprimir los archivos zip y voy a comprobar que en la gran mayoría de ocasiones cuando descubrimos los archivos zip me aparece un archivo ttf un archivo truetype los archivos de efe son archivos de fuentes hay otros dos formatos pero el archivo el formato ttf es con diferencia el más común tendría que leer por supuesto el m el aviso de licencia para dar crédito fijaos que en este caso la fuente de mobbing en milk que está en ot efe es otra de las fuentes que puedo localizar y lo que voy a hacer es dentro de mi proyecto esto es muy importante no voy a dejar que las fuentes se queden en la carpeta de descargas sino que voy a copiar las fuentes mirad a la carpeta multimedia voy a copiar las dos fuentes que me he bajado a la carpeta multimedia esta es la mon milk y ésta es cynthia edito me da igual las fuentes que os hayáis bajado bajamos la que queráis no hace falta que os bajéis exactamente la mire yo lo que voy a hacer ahora es decirle a css que quiero usar esas fuentes ojo que no hace falta ni siquiera que instales las fuentes en el sistema operativo no hace falta en absoluto simplemente lo único que hace falta es que las copias a la carpeta del proyecto y ahora voy a copiar un código css tres fondos qué es el siguiente mirada me voy a copiar este código de aquí lo voy a pegar en mi web y voy a hacer font-family se llamará como yo quiera por ejemplo familia 1 y ahora la url evidentemente va a estar en multimedia barra como he llamado a esa fuente no me acuerdo lemon milk voy a primero la de ciencia de vito multimedia cynthia débito así que con este fondo face fijaos que no está dentro de h1 lo he puesto aparte y antes de uno ahora digo font family es igual a familia 1 y si ahora guardo y recargo mirada la atención veréis como la fuente tipográfica que estoy usando es justo la que me he descargado lo importante en este caso son dos cosas una que el nombre de familia que ponéis aquí sea el nombre de familia que habéis puesto ahí si arriba pongo longaniza abajo pongo longaniza y lo segundo importante es que evidentemente localizase correctamente al igual que que habéis tenido que poner correctamente la url de las imágenes que también pongáis correctamente la url de la fuente que vais a usar voy a probar ahora el formato efe el formato de f tenía problemas de compatibilidad entre navegadores no sé si últimamente cualquier nador ya soporta cualquier tipo de fuente dejadme probarlo así que cambió a lemon milk y tengo ahí lemon milk efectivamente parece que por lo menos chrome acepta ambos formatos así que bueno pero qué pasa si no quieren sustituir una por otra yo quiero cargar las dos pues si quiero cargar las dos mira la atención puedo poner dos reglas son seis familia 1 y familia 2 fijaos como en familia 1 he cargado de ciencia editó y en familia 2 he cargado lemon milk por tanto ahora podría hacer que el h1 fuera la familia 1 y el h2 fuera la familia 2 para que el h1 tenga la fuente ciencia edito el h2 tenga la fuente lemon milk cuidado cuando os bajáis una fuente muchas fuentes están hechas por norteamericanos y qué pasa con la ñ pues lo mismo que comentábamos antes que la ñ no la reconoce y con toda probabilidad los acentos tampoco vale por tanto en este caso pues tendríamos que tener cuidado con eso voy a cambiarla en la ñ por una n simplemente para que estéticamente quede bien pero lo que tendría que hacer es descargar me alguna fuente que tuviera el juego de caracteres completo para el idioma español resulta que en este caso el título es sensiblemente más pequeño que el subtítulo y esto evidentemente debería estar al revés entonces para conseguir esto me voy a h1 y le digo font-size tamaño de la fuente es igual a por ejemplo 48 píxeles cuidado x pena px font-size es igual a 48 píxeles con eso lo que he conseguido es aumentar o por lo menos definir el tamaño de la fuente voy a hacer lo mismo con el h 2 el h 2 voy a decirle que en font-size es igual a por ejemplo 10 píxeles de esa manera podréis ver cómo he conseguido manejar he conseguido cambiar la altura de la letra otra cosa que quiero cambiar es la negrita tanto h1 h2 por defecto vienen en negrita y eso quiere decir que en esta letra se ve demasiado gruesa para poner o quitar negrita se pone lo siguiente font wait el peso de la fuente si quieres que esté en negrita se pone bold se pone ahí negrita pero curiosamente en este caso yo ya la tengo en negrita yo lo que quiero es quitar la negrita por tanto font weight es igual a normal daos cuenta por tanto como ahora el texto h1 ya no es tan grueso es más fino y por lo menos en mi caso es más legible voy a quitar la negrita tanto de h1 como de h2 volviendo un poco al tema de cómo se diseña una página web sobre todo cómo se diseña a nivel visual si yo estuviera en un programa como photoshop illustrator ahora mismo y quisiera seleccionar ese texto y moverlo por ejemplo hacia la derecha imagínate que quiero simular como que esta línea hace como de subrayado de la otra simplemente pincharía arrastraría y ya está pero yo no estoy en un programa de ese tipo pero que estoy haciendo es escribir código directamente así que os voy a decir que existe el mismo concepto de mover es decir se puede hacer lo mismo que en photoshop pero hay que currárselo un poco más en este caso lo que hay que hacer es decirle al objeto en primer lugar lo siguiente me voy al h2 primero tengo que tener muy claro a quien quiero mover a quien quiero mover a laxe 2 luego me voy al selector de h2 y dentro de él escribo lo siguiente en primer lugar posición relativa que quiere decir posición relativa quiere decir te voy a mover existe posición relativa y otro muy común es posición absoluta posición absoluta que esté voy a mover independientemente todos los demás ahora luego lo usaremos para alguna otra cosa posición relativa este voy a mover pero con respecto a los demás no te escapes de los demás a continuación tenemos unos parámetros que son top left bottom y right yo lo primero que quiero es ver a darle como un empuje desde la izquierda lo quiero mover hacia la izquierda por tanto pongo left 30 píxeles guardo recargo y fijaos cómo se me ha ido 30 píxeles hacia la izquierda voy a ponerle 50 50 píxeles y ahora quiero que esté un poco más arriba porque quiero que esté más pegado al texto lo que hago atención mirad mirad me si yo le pongo 50 píxeles lo que voy a hacer es empujarlo hacia abajo pero yo no quiero empujarlo hacia abajo yo quiero empujarlo hacia arriba por tanto en estas medidas se admiten píxeles negativos lo que hago es top menos 10 píxeles para que en lugar de empujarlo hacia abajo 10 píxeles lo estire hacia arriba 10 píxeles beige por tanto como finalmente puedo mover los objetos más o menos donde quiera lo único es que en lugar de moverlos a ojo o en lugar de moverlos pinchando arrastrando los tengo que mover con precisión los tengo que mover con parámetros voy a maquetar el menú de navegación el menú de navegación ahora mismo es una lista que estéticamente es bastante horrible porque la gente está más acostumbrada a ver menús de navegación basados en botoneras horizontales una etiqueta que no hemos visto y que nos sirve tanto para html como para acs ese es una etiqueta llamada nada por tanto voy a seleccionar el menú de navegación y le voy a poner lo voy a rodear de una etiqueta llamada nada nada se abre no se cierra fijaos que he cogido el menú de navegación que tenía y le he puesto antes una etiqueta nada y después una etiqueta nada nada es de navigation y quiere decir que lo que hay adentro sea lo que sea es un menú de navegación no solo me sirve para el posicionamiento para que google sepa que eso que hay en su menú de navegación sino que también me sirve para css así que dentro de fs s voy a poner las siguientes reglas creo que está claro que la etiqueta él está dentro de la etiqueta nada siguiendo la jerarquía de padres e hijos digamos que la etiqueta no es el padre la etiqueta él es el hijo o la hija pues voy a hacer lo siguiente voy a escribir nada espacio cuando pongo nave espacio y lo que estoy haciendo es seleccionar el un pero no cualquier un sino en el que está dentro del nada por tanto el espacio en css quiere decir jerarquía padre e hijo y ahora teniendo claro que he seleccionado el pool le voy a decir list guión style type el tipo de lista es no 1 qué hace tipo de lista ninguno lo que hace es quitar los bullets quitar los puntitos os voy a decir que teóricamente en css una cosa que no he usado en muchos años hay lo siguiente pss list style type yo lo que he usado es este comando para eliminar las listas fijaos que tenemos circle tenemos square tenemos también ap roman entonces por aquí hay fijaos que hay todos estos tipos de listas hay listados en hebreo en griego en georgiano en katakana en latín en romano puntos cuadrados vale por ejemplo mirad pues voy a ponerlo en hebreo lista está el type en hebreo y fijaos no sé si lo veis pues como el listado de puntos pasados en hebreo si pongo por ejemplo román lower román lower latín mirad lower román y me sale en romano vv todo eso si cojo por ejemplo y la gana me sale la gana japonés vale me sale como ah y así básicamente son las grafías de a e instructiva por ahí lo podéis ver si ponéis ir a ghana en google os sale una tabla bastante sencilla de a que corresponde cada carácter vale por tanto veréis que el primero que ha aparecido es la a que os quejáis ahí el segundo que ha aparecido es la y que se vea y el tercero que ha aparecido es la u y así o sea que aparece en caracteres raros pero realmente están contando vocales lo único es que japonesas vocales no van como en castellano que es joe sino que van ahí web pero vamos más allá teniendo en cuenta eso no hay mucha más historia bueno pues lo que quiero no exponerlo en japonés sino lo que quiero es ponerlo en no vale ponerlo en ninguno simplemente os lo enseñado pues para que lo veáis y ahora al nab le voy a decir que margen es igual a 0 padding es igual a cero una vez más porque me quiero cargar ese estilo por defecto que tienen algunos elementos dentro de fs ya he maquetado el nap un ya empaquetado la etiqueta un pero ahora lo más interesante va a ser va a ser maquetar el lee los link son los elementos cada uno de los elementos de la lista que tengo aquí así que voy a hacer lo siguiente quiero nada espacio un espacio le quiero maquetar los espacios pero meditar perdón los lee que están dentro de los pool que están dentro de los nab no cualquier lee que me pueda encontrar por ahí sino sólo besos y ahora digo lo siguiente como son hipervínculos además perdona nada un link a quiero maquetar fijaos que parece complejo pero quiero maquetar los a que están dentro de los link que están dentro de los pool que estén dentro de los na’vi así que parece que está hablando en chino pero vale pero es que es así entonces a esto le quiero decir text guión decoration es igual a none que es text decoration igualan a un quítame el subrayado ese del hiper vínculo así que aparece por defecto hay otras cosas donde me gusta mucho el subrayado pero no en el menú de navegación cuando leemos de usabilidad ya hablaremos de en qué euros mismo gusta en inclusiones no luego el color el color aparece azul o morado porque es el color por defecto en el estilo por defecto del navegador para los hipervínculos pero no me gusta así que color no voy a poner de momento como black acordaos de en cada en cada línea punto y coma para acabar la familia de fuentes no la quiero de tipo times new roman la quiero de tipo por ejemplo área así que font family sans guión sheriff sin sheriff as sin remates sin decoraciones bueno aunque yo he puesto en el menú mayúsculas y minúsculas ocurre que estoy pensando que quiero que todos los elementos ponga todo mayúsculas pero claro no quiero tener que ahora venir aquí y cambiar la letra por tanto mirad hay una modificación que es texto transforma y tengo lo siguiente tengo a pair keys para ponerlo todo en mayúscula upper case todo mayúscula lower keys para ponerlo todo en minúscula incluso las mayúsculas me las ponen minúsculas tengo capitales capital y fe que es para poner mayúsculas si la letra lo soporta o versalitas mayúscula más grande la primera mayúsculas más pequeñas las segundas parece que este caso no lo soporta y por último normal para dejarlo como estaba voy a poner a pair keys quiero que todas las letras sean mayúsculas quiero también que la fuente esté en negrita así que font weight font weight es igual a bolt y quiero que la fuente sea más pequeña así que font-size es igual por ejemplo a 10 píxeles como veréis estoy interviniendo bastante sobre el estilo css de la lista y de los elementos de la lista pero todavía siguen pareciendo una lista todavía no parecen un menú de navegación qué voy a hacer en este caso mira voy a hacer lo siguiente en primer lugar background el fondo del botón es igual rgb 200 200 200 es decir el fondo del botón mirad lo he puesto gris claro el gris está muy pegado a la letra pero ya sabemos que existe un parámetro llamado padding el padding es el borde interior el margen interior unos botones se me pegan con otros no hay mucho problema los botones se pegan unos con otros porque hay un parámetro llamado line height line height por ejemplo 20 píxeles line height es la altura del interlineado y ya el parámetro mágico el parámetro que va a obrar gran parte de la magia en este caso es cloud 2 puntos led yo no quiero que cada botón se me ponga uno arriba del otro lo que quiero es que se pongan uno a la izquierda del otro le doy flow left pulso enter y fijaos como con suerte el menú se ha quedado en forma de botones lo que voy a hacer ahora es cambiar un poquito la forma del botón miradme lo que voy a hacer le voy a decir que el color lo quiero white porque el fondo lo quiero black quiero hacer unos botones negros contexto blanco así que quede elegante quiero poner menos para bing de 5 probablemente y quiero que haya un poquito de margen margin 2 píxeles así mirad habrá un poquito de margen entre botón y botón voy a poner margin right ahora yo pienso un poco lo que quiero digo bueno me gustaría que la anchura de los botones fuera un informe porque ahora mismo fijaos que la anchura de los botones esta es dinámica con respecto a lo que ocupa el texto por eso digo por ejemplo width es igual a 80 píxeles y así fuerzo a que la anchura sea la misma wheat por ejemplo 70 píxeles allí el problema es que pide tu curso se baja abajo igual le tengo que quitar la negrita para que no se baje abajo pues voy a bajar un poquito el tamaño de la fuente mirad quiero menos para bing en la parte superior por eso voy a hacer esto para bing voy a poner un píxel y ahora me gustaría que el texto estuviera centrado en el botón así que texto alain centre alineación del texto la quiero centrada lo único que tengo que hacer ahora es simplemente cambiar la anchura de los botones para intentar que me ocupen toda la botonera veo todavía veo todavía mucha amplitud vamos a inspeccionar un momento el elemento sí bueno no demasiado alto todavía pero me vale y ahora fijaos cuidado atención qué pasa si entro dentro de cursos fijaos que desaparece todo el css porque el css de momento al menos de momento únicamente sólo está en index.html si le pulso a inicio lo recupero por tanto no os preocupéis porque luego más adelante lo que vamos a hacer es sacar lo externo para que esté vinculado a todos los archivos del sitio web a cabo este menú de navegación quitando un poquito de la en heart porque me queda demasiado alta la línea quizás no tanto digamos 15 píxeles y una cosa mirad novedad en css 3 son los bordes redondeados yo por ejemplo en este diseño igual quiero que los bordes están redondeados así que simplemente se pone border por ejemplo 5 píxeles suele pongo por 25 píxeles daos cuenta perdón border radios fijaos ahí como lo que he hecho es redondear los bordes de los botones así parecen como pastillas los bordes tienen los siguientes parámetros mirad se le pueden poner cuatro parámetros aquí dentro donde le voy a poner cero píxeles 5 píxeles 10 píxeles 15 píxeles lo que va a hacer es que este es el primer borde 0 píxeles es el segundo 5 píxeles tercero 10 píxeles cuarto 15 píxeles es decir lo que hace es bordear diferentemente si os interesa cada una de las esquinas de cada una de las cajas vamos a hablar en este caso de pseudos electores que me sirven para hacer un poco de operaciones especiales sobre los selectores mirad voy a poner nada el lic dos puntos first child first child primer hijo quiere decir primera ocurrencia solo si hay varios y en este caso hay varios botones quiero que lo que voy a aplicar sólo aplique sólo a la primera de las ocurrencias entonces voy a decir border radios 15 píxeles 0 píxeles 0 píxeles 15 píxeles fijaos atención a la pantalla como solo aplica ese redondeo y cuidado first i’ll me lo está aplicando a todos no un link mentir un segundo no un link a fer style déjame que y lo vuelva a hacer bueno ahora veremos qué ha pasado ahí voy a probar el nab el lip a las child y voy a decirle aquí lo contrario 0 píxeles 15 píxeles 15 píxeles 0 píxeles en este caso está pasando del artza el y del fairchild voy a ver porque puede haber sido he estado inspeccionando el código y claro veo que en este caso particular no lo puedo aplicar porque fijaos que en las etiquetas a no tienen hermanas fijaos que las etiquetas li sí que tienen hermanas porque están unas al lado de las otras en cambio esta etiqueta a está metida dentro de la ley y es la única hija es la primera y a la vez la última por tanto usaremos el first y el last child en alguna otra ocasión pero no en esta pero por lo menos en esta sí que podemos utilizar un pseudo selector que es el h o ver el h o ver es qué pasa cuando pones el ratón encima de ese elemento así que yo por ejemplo lo que quiero es que cuando pongo el ratón encima del elemento el fondo cambie de negro a gris oscuro y fijaos cómo mirad hago esto irá os cuenta como cuando el ratón pasa dentro del botón el botón se vuelve de color gris eso lo he conseguido con el pnv un link a dos puntos a ver a ver es como cuando el ratón está por encima y le cambió una propiedad y además ahora otra cosa que voy a hacer voy a poner el fondo aquí de color negro pero negro con parámetros voy a poner una etiqueta que se llama transition transition todo quiero que transiciones un segundo hace lo siguiente mirar como cuando pongo cuando pongo el ratón encima de la etiqueta no cambia de repente sino que tarda un segundo en cambiar eso lo he conseguido veis como hay una pequeña animación eso lo he conseguido porque he puesto transition en un segundo el transition lo puedo poner también aquí arriba y así casi que mejor mirad en lugar de ponerlo en la h über lo he puesto en el propio nada en este caso tengo un cambio de estado con el hv evidentemente estoy cambiando de normal a con botón sobre con ratón sobre lo que hace el transition es detectar que cuando haya transiciones quiero que las transiciones se realicen poco a poco gradualmente durante el tiempo que digáis ahí me voy a ver un par de novedades nuevas de hecho estas propiedades nuevas las voy a poner sobre el contenedor y no sobre elementos nuevos no quiere decir que me voy a ir al contenedor atención me voy al contenedor me hago un espacio pulso enter y continúo poniéndole propiedades al contenedor le voy a poner las siguientes propiedades en primer lugar border el border me permite especificar el borde de un dip o de una caja y tiene los siguientes parámetros primero la anchura luego el tipo de borde y por último el color he puesto en este caso un borde de 4 píxeles dust esto es línea do y negro si ahora guardo y recargo mirad fijaos que mi web parece una postal vale porque tiene la típica trama de ésta tengo otro acabado que es daughter que es el lugar delineado es punteado también tiene su gracia tengo otra que es sólida qué es una línea sólida y otra que es double que es una línea doble si buscáis css border encontrareis muchos sitios de referencia donde os dicen todas y todos los tipos de borde que existen en css aunque los cuatro que más se usan son los cuatro que os he dicho hasta ahora voy a hacer por tanto un borde b dónde estás aquí con tenedor un borde de sólido 4 pixel sólido y de un color gris y yo rgb voy a probar 200 como 200.200 iguales demasiado oscuro bueno pues me dejara ir a continuación una novedad en css 3 voy a poner los verdes estos después del separador miradme y es una propiedad llamada box shadow sombra de caja se escribe box shadow y tiene los siguientes parámetros primer parámetro el desplazamiento en horizontal donde positivo es la sombra se desplaza hacia la derecha negativo es la sombra se desplaza hacia la izquierda el segundo parámetro es desplazamiento en vertical donde en positivo la sombra se desplaza hacia abajo en negativo y la sombra se desplaza hacia arriba el tercer parámetro es la dureza de la sombra donde 0 es una sombra perfilada y más valor es una sombra difuminada y por último el color de la sombra así que si he puesto una sombra de 10 píxeles 10 píxeles 5 píxeles black tengo una sombra que se desplaza 10 píxeles a la derecha 10 píxeles hacia abajo se difumina a 5 píxeles y es de color negro como veis es una especie de sombra que arroja la caja sobre el fondo en lugar de poner una sombra tan dura como esa voy a poner 0 píxeles 10 píxeles 15 píxeles rgb 000 0.3 es decir fijaos que queda mucho mejor una sombra que no se desplaza nada en x que se va hacia abajo 10 píxeles que se difumina a 15 píxeles osea que se difumina bastante y que tiene un color negro semi transparente un color negro 0 0 0 al 30% de transparencia 0.3 de la misma manera que existe sombra de tex de sombra de caja también existe sombra de texto pero os voy a decir que tengáis cuidado con las obras de texto mirad me voy a la h1 al título principal y digo text shadow en lugar de box ado pongo text shadow voy a subir el tamaño de la fuente y con los mismos parámetros voy a poner 0 píxeles 3 píxeles 6 píxeles rgb 000 0.3 y si hago así no sé si lo veréis no sé si se inserta en la pantalla pero el texto de título está proyectando una sombra está arrojando una sombra solo os recomiendo poner sombra de título sombra de texto en los títulos desde luego no en los textos de párrafo ya sé que queda muy bonito ya sé que queda muy apetecible pero eso dificulta la lectura por tanto es apto para títulos no es apto para texto de párrafo voy a maquetar sabiendo que vamos a maquetar con las instrucciones que ya conocemos una cosa que sí que voy a hacer antes de continuar es externalizar el css a un archivo externo cómo se hace esto cómo se hace esto para hacer esto lo que voy a hacer es dentro de mi carpeta de momento a la misma altura de momento a la misma altura que los archivos html voy a crear un nuevo archivo con el nombre que queráis con la extensión css estilo punto css ahora lo que haré es abro estilo css en el head it y le voy a pasar todo el css que he hecho sin contar con las etiquetas está el todo el css que he hecho se va a ir a estilo css evidentemente sí externalizado todo el css en un archivo externo ahora tengo que llamarlo tengo que llamarlo desde el archivo index me cargo borro las etiquetas style y pongo una etiqueta llamada link link wray es igual a style sit h ref es igual a estilo css con esa etiqueta link lo que estoy diciendo es el estilo no está adentro de este archivo sino que está en un archivo externo evidentemente la ventaja de esto va a ser que ahora más adelante podremos llamar a este mismo estilo desde varias páginas fijaos que he guardado y recargado y no ha habido ninguna diferencia simplemente ahora el estilo está metido dentro de un archivo externo este es por tanto el tercer tipo de inclusión de css que os decía al principio del bloque tenía por aquí un banner cuidado con el banner miradme cuidado con el banner porque manualmente le puse una anchura de 200 pero ahora ya no voy a hacer eso así que guardo recargo me da igual que el banner se me salga porque ahora en el estilo voy a hacer lo siguiente voy a traer el estilo un poco más cerca y hago lo siguiente creo que está claro que banner es una sección a la que le puse un id llamado banner porque le puse un ide pues para ahora poder localizarla poder seleccionarla con facilidad así que digo banner va a tener un width del 100% vas a ocupar toda la anchura de la página y sobre todo tengo un problema ahora mismo miradme con la imagen del banner y es que se me sale se me sale porque es muy grande pero digo banner img o lo que es lo mismo la imagen que está adentro de lady banner quiero que tenga un wifi del 100% esto quiere decir no te salgas esto quiere decir quédate en el 100% de la anchura de tu contenedor otra cosa que no me gusta es que además el banner está pegado al menú me gustaría que respirara un poquito me gustaría que hubiera un margen si me gustaría que hubiera un margen me voy a ir a banner y voy a decir margin top solo margen superior es igual a 10 píxeles y os daréis cuenta como ahí a cuidado no tiene margen por un problema de flotación siempre que acabe un menú de navegación y al acabar el menú de navegación haya elementos que floten y fijaos como hay elementos que flotan tengo que poner este truco div style cloud un momento no no no no no clear dos puntos y ahora sí esto que veis aquí que lo vais a copiar y pegar un montón de veces en un montón de proyectos sirve para que cuando algo esté flotando le digas deja de flotar y si ahora recargo fijaos que esa era la causa de que el margen no funcionará por tanto siempre que tengáis algo que flote acordaos como los as flotan como el menú flota flota a la izquierda al acabar de flotar hay que poner un día exactamente como ese y ese día básicamente lo que está diciendo es deja de flotar porque si no el programa asume que todo lo que viene después aunque caiga abajo sigue flotando y me da problemas me da problemas porque el css como habéis visto a veces puede dejar de funcionar tengo ahora mismo un banner estático quiero decir que molaría tener un banner que fuera corriendo tener varios banners y que fueran cambiándose con una animación o molaría tener un par de botones para ir cambiando banner siguiente manera anterior eso lo haremos próximamente pero todavía no hoy voy a maquetar estos destacados mira tengo un destacado de programación y un destacado de música así que que eran los destacados los destacados os recuerdo que eran dentro de y de destacados articles así que voy a hacer lo siguiente miradme destacados tiene una anchura del 100 por ciento y ahora destacados arctic él tiene una anchura del 40% por ejemplo intentan subir pero no pueden porque el vídeo es muy grande así que destacados arte que el vídeo coma coma destacados arctic el audio wifi 100% la coma es para un selector múltiple quiero seleccionar varias cosas a la vez cloud les quiero que flote a la izquierda ahora sí mira dos puntos de una cosa mirarme un momento tengo programación tengo música cada uno flota a una parte pero se me ha llevado el logotipo de html5 el logotipo de html5 es parte del blog pero es el problema cuando algo empieza a flotar y he dicho que los artículos floten el programa no sabe cuándo cuando tiene que dejar de flotar por eso cuando acaban los artículos antes de que empiece el blog voy a volver a poner esta etiqueta div style clear voz para decirle deja de flotar ahora si simplemente lo que tengo que hacer es quizás darle a los artículos un poquito de margen quizás cinco píxeles para que se separen entre sí vamos a ver 15 píxeles hay mejor damos cuenta por tanto como hasta ahora tengo una cabecera un subtítulo un medio de navegación un banner al 100% tengo dos destacados y tengo por tanto también ahí un blog un pequeño blog fíjate que el blog no me gusta mucho porque me gustaría que el texto no se quedará mirando miradme el texto no se quedará abajo de la imagen sino que se quedará a la izquierda de la imagen como es eso como hago que algo empiece a quedarse a la izquierda flotando las fluctuaciones son igual de necesarias que molestas son necesarias tenemos que tener cuidado cuando acabamos una flotación por tanto voy a hacer lo siguiente no es cierto que esa imagen mirada en el código es blog arctic el ing pues le dijo blog arctic el ing cloud left y mirad lo que ocurre lo que ocurre es que el texto flota a la izquierda lo que haré ahora también veis que se monta el texto esto pasa muchas veces lo que hago también es al finalizar cada artículo le pegó la etiqueta de deja de flotar ya ha explotado muy bien pues deja de flotar y ahora veréis como por tanto se me alinea la imagen a la izquierda y el texto justo a la derecha lo último que voy a hacer de estilo antes de dejarlos trabajando un poco es que en el body voy a decirle que font family es igual a sans sheriff para que todo el texto de párrafo me lo ponga sin remates y le voy a decir que el text align es igual a justify para que todo el texto me lo alinee forzado fijaos ahí como esta página bueno puede no estar acabada pero desde luego ya es otra cosa desde luego ya tiene cierta apariencia y ya por último lo que vamos a hacer va a ser propagar este css al resto de archivos como lo voy a hacer seguramente no funcionará la primera porque mira via index.html el link este que he creado lo pego debajo de cada una de las etiquetas que hemos ido creando a lo largo de las páginas pero sin embargo tengo un pequeño problema que es el siguiente mira guardo todas las páginas y veo que algunas cosas funcionan y otras no cursos sobre mi diseño alguna zona funcional y otras no miradme por ejemplo la tipografía funciona por ejemplo esta tipografía funciona el fondo funciona el color funciona pero el contenedor no funciona y el contenedor no ziona simplemente porque acordamos que al principio mira a esté vivo le he puesto y de es igual al contenedor pero ese vídeo no lo he puesto en diseño no lo he puesto en cursos no lo he puesto en contacto no lo he puesto impide tu curso y no lo he puesto en sobre mí con lo cual si lo pego ahora ir a esas cosas bien tengo ya el contenedor pero daos cuenta como no funciona el menú no funciona porque antes he puesto el menú dentro de una etiqueta nada y estilizado css en base a esa etiqueta nava por eso lo que tengo que hacer ahora es encapsular el resto de menús en una etiqueta nava es decir tengo que realizar todas aquellas modificaciones que haya hecho en la página principal tanto la apertura de enap como el cierre de nava pues lo tengo que propagar al resto de archivos ya sé que esto es incómodo ya sé que esto es poco eficiente y probablemente necesitaríamos una manera de automatizar más esto de la misma manera que el css está en un archivo externo pues que la cabecera y estas cosas estuvieran en un archivo externo también se puede hacer pero no con html porque html es un lenguaje de marcado puro y duro’ si ahora recargo la página comprobaréis que en la medida en la que duplique los menús veréis que aparece sin ningún problema aparece correctamente toda la maquetación en el resto de páginas del sitio web en primer lugar en la sesión que nos ocupa lo primero de lo que quiero hablar es de una cosa que en css que se llaman animaciones no confundir las animaciones con las transiciones de hecho antes de ver animaciones vamos a ver en un mismo archivo las transformaciones y luego lo que hacemos es animar aunque se puede animar cualquier cualquier cosa un ejercicio muy didáctico suele ser animar tres transformaciones pero aunque luego lo vamos a aplicar dentro de nuestro propio proyecto como tanto las transformaciones como las animaciones son algo de una complejidad moderada más bien media lo que voy a hacer es explicarlo primero en un archivo en blanco y luego lo aplicamos sobre el proyecto por tanto dentro del propio proyecto si quieres vamos a lanzar esto para que esté en la misma carpeta vamos a configurar se hace falta en este usuario las extensiones de archivo bueno a partir de aquí a partir de aquí lo que voy a hacer es crear un archivo aparte llamado por ejemplo transformaciones punto html es un archivo específicamente para aprender lo primero que tenemos que aprender en la sesión de hoy y a continuación una vez lo tengamos pues si hace falta lo que haremos es archivarlo bien lo voy a cargar tanto en el editor como por supuesto en el navegador vamos a cerrar por aquí esta ventana y ahora la vuelva a abrir y por tanto lo que voy a hacer en este caso va a ser abrirlo en los dos lugares comprobamos por tanto que si lanzamos cada uno de los dos a cada una de las partes de la ventana veremos el editor de código preparado para trabajar vamos a ocultar automáticamente la barra y así ganamos un poco más de espacio para cada uno de los programas una vez que tengo este archivo como siempre puedo comprobar que estoy trabajando realmente con el mismo archivo si pongo hola en la pantalla y simplemente aparece hola en el navegador también voy a configurar la tipografía para que sea un poquito más grande y podamos verla al menos al principio mejor que podemos ver la más grande en la pantalla a partir de aquí voy a crear la típica estructura casi que acabó antes si la creo en un momento en lugar de copiarla y pegarla hay veces que se tarda menos en copiar y veces que es nada menos de escribir y dentro del head simplemente voy a crear la etiqueta está el para el ejemplo que nos ocupa en la primera parte de esta sesión simplemente no me interesa el título y todo eso no voy a validar esta página como estándar simplemente me interesa aprender un par de cosas bien voy a crear un dip con él y de por ejemplo bloque por ponerle un nombre y ahora dentro donde efe ss lo que voy a hacer es especificar que el elemento bloque le voy a asignar por ejemplo un wifi de 100 píxeles un height de 100 píxeles y un background red ya que es simplemente lo que quiero es tener un día de color rojo de forma cuadrada 100% con el fondo rojo bueno hasta ahora hemos visto que tenemos alguna algunas características de fs s tales como por ejemplo la posición relativa en la posición absoluta y el left right el top y el botón nos sirvió anteriormente para el subtítulo y moverlo y posicionarlo bajo del título estas propiedades no son nuevas de css3 sino que existen desde css2 ahora como novedad en css3 encontramos las transformaciones y al hablar de las transformaciones inevitablemente tenemos también que hablar de las etiquetas de compatibilidad las etiquetas de compatibilidad entre navegadores no sé ahora mismo porque hay que realizar un seguimiento prácticamente semana a semana pero sé ahora mismo si las transformaciones ya son compatibles directamente con chrome vamos a probarlo voy a hacer lo siguiente voy a decirle que el bloque le pongo un transform 2 puntos translate y voy a decirle por ejemplo 100 píxeles 100 200 píxeles por ejemplo hago 100 píxeles así que pinchó estiro bueno en este caso vemos como no ha hecho falta etiqueta de compatibilidad pero probablemente en animación sí que hará falta esa etiqueta con lo cual lo acabaremos viendo bueno lo primero que he hecho es simplemente decir que quiero transformar a continuación especificado el tipo de transformación que voy a hacer que es un translate que es un desplazamiento y digo cuánto lo quiero desplazar primero en x en horizontal y luego en y teniendo en cuenta que en la web siempre la x crece hacia la derecha y la y crece hacia abajo por tanto 100 píxeles equivale a ir hacia la derecha pero 100 píxeles en este caso no equivale a ir hacia arriba sino a ir hacia abajo hay tres tipos de transformación principalmente hay un par más también está a sesgar y también esta matriz de transformación pero las tres principales son mover son rotar y son escalar así que voy a poner lo siguiente transformó rote y en rota voy a poner algo tan sencillo como por ejemplo 45 deja ver es gris vales de es grados así que recargo y observo un par de cosas lo primero es que efectivamente es rotado esté vivo 45 grados pero también observó algo bastante curioso y es que al rotar 45 grados parece que se me ha desactivado la traslación de 100 por 100 píxeles bueno vamos a seguir y ahora veremos que efectivamente así ha sido y cómo arreglarlo por último voy a poner una transformación llamada scale donde tengo que especificar cuál es el factor de escala en x y en y si pongo 11 lo que estoy haciendo es dejar el objeto en su escala original si pongo 0.5 0.5 lo que estoy haciendo es escalarlo a mitad de pequeño si pongo 22 lo que hago se escalarlo al doble de grande por tanto escala lo que hace es intervenir en el tamaño del objeto ahora bien como estamos viendo cada vez que pongo una nueva transformación lo que hace es anular al anterior por tanto las transformaciones si quiero juntarlas si quiero colapsar las no tengo que ponerlas dentro de tres líneas diferentes sino que te ponerlas dentro de la misma línea por tanto pondría transform translate translate 100 píxeles espacio ‘rotateq’ 45 grados espacio escala 2 con 2 y de esa forma comprobamos como ahora tengo un día que está desplazado 100 como 100 píxeles que está rotado 45 grados y que está escalado al doble en x y al doble en y dentro de este mismo archivo de transformaciones vamos también a aprender a animar y una cosa que voy a decir es que probablemente vamos a empezar aprendiendo a animar con las transformaciones pero eso no es porque son las transformaciones se pueden animar sino que prácticamente cualquier propiedad numérica dentro de css va a poder ser animada así que permíteme de momento que me encargue la transformación porque ahora la voy a recuperar y voy a poner lo siguiente voy a poner animation dos puntos el nombre de la animación donde el nombre se lo asignó el nombre me lo invento yo 99 y por ejemplo voy a poner 2 segundos ahora lo que tendría que hacer es especificar cuáles la animación move mueve es decir que hace la animación mueve mueve por tanto lo que voy a hacer va a ser simplemente lo siguiente digo aquí frames 99 y los frames 99 atención que se pone una arroba al principio van a tener lo siguiente por ejemplo transforma translate pero píxeles 0 píxeles y todo esto va a estar y eso es un poco lo extraño de la etiqueta aquí frames todo esto va a estar al 0% de la animación fijémonos como aquí frames lo que hace es simplemente en este caso el 0 por ciento lo que hace simplemente poner esta condición en el 0 por ciento de la animación y ahora por ejemplo en 100% le voy a decir que se mueva 100 píxeles vamos a ver que ha pasado hasta este momento lo voy a recargar y en principio no pasa nada si no pasa nada y debería estarse moviendo esta caja hacia la derecha si no pasa nada es simplemente por la sencilla razón de que todavía se requieren algunas etiquetas de compatibilidad en ciertos elementos avanzados como por ejemplo es la animación así que simplemente lo que voy a hacer es lo siguiente ahora mismo estoy trabajando en chrome y chrome se basa en el motor de renderizado web webkit por tanto lo que voy a hacer es poner el prefijo webkit dentro de animación por tanto dado que ahora mismo estoy con el navegador web chrome y el navegador web chrome se basa en el motor de renderizado web web kit simplemente lo que tengo que hacer es poner un prefijo metido dentro de guiones llamado webkit y he llamado a la animación con webkit lo que tengo que hacer es llamar a los que frames con webkit también y por tanto ahora comprobamos como al recargar la animación la animación se ejecuta así que lo que he hecho simplemente es cargar la animación y la definición de la animación con un prefijo que se pone entre guiones llamado webkit por tanto webkit animation mueve mueve y luego he definido a los que frames de 99 con webkit tienen de momento esta animación que hemos puesto en la pantalla ahora la pregunta sería esa etiqueta de compatibilidad para que navegadores me sirve y para que navegadores por supuesto no me sirve y que etiquetas de compatibilidad otras aparte de ésta existen bueno en este caso lo que voy a decir va a ser lo siguiente en cuanto a etiquetas de compatibilidad existen varias la etiqueta webkit nos cubre el navegador chrome nos cubre el navegador safari y la versión next de ópera el navegador llamado ópera next si queremos trabajar con ópera en versión antigua tendríamos que poner una etiqueta llamada a esta etiqueta nos da compatibilidad con ópera en versión clásica ópera clásico la etiqueta move nos da compatibilidad con los navegadores mozilla firefox y derivados en definitiva aquellos navegadores web que están basados en el motor de renderizado gecko que es el motor que lleva a firefox por defecto y la etiqueta ms nos sirve para el navegador internet explorer por último lo queríamos exponer una versión sin etiqueta de compatibilidad para dejar esta etiqueta preparada para cuando los navegadores se actualicen y ya no haga falta etiqueta de compatibilidad voy a decir que esto es un poco rollo porque para cada elemento que requiere compatibilidad tendríamos que poner cinco etiquetas cada vez ojo y si hemos quintuplicado a esta línea también tendríamos que quintuplicar el código que escribiremos aquí así que esto es un poco rollo de momento pero es lo que hay bueno de momento voy a eliminar todo esto porque de momento como hoy estoy trabajando en chrome voy a asumir que solo hoy necesito la etiqueta webkit y vamos a continuar trabajando dentro de los he frames de la animación 99 para comprobar como a partir de ahí podemos crear la animación que queramos en este caso he creado una animación que va desde el 0% hasta el 100% pero lo divertido de las animaciones css es que podemos crear tantos pasos intermedios como queramos voy a hacer una demostración que siempre hago que es la siguiente voy a crear varios pasos intermedios por tanto voy a poner por ejemplo 25 por ciento cincuenta por ciento 75% en 0% voy a estar en 0 0 en 25% voy a estar en 100 0 en 50% voy a estar en 100 100 luego voy a estar en 0,100 y por último en 100% voy a estar en 0 0 lo que he hecho es introducir una serie de parámetros mirad donde en 0% estaré aquí en el 25 de estaré aquí que es 100 0 en el 50% estaré aquí que es 100 coma 100 en el 65% estaré aquí que es cero como 100 y en el 100% estaría ahí es decir que voy a hacer pues lo que voy a hacer es simplemente una animación con lo cual el objeto va a hacer un cuadrado va a hacer una animación cuadrada fijaos que recargo y el rectángulo hace exactamente la animación que había previsto que es simplemente ese rectángulo porque va tan lenta la animación al revés perdón porque va tan rápida la animación quiero que vaya más lenta pues la animación va así de rápida simplemente porque aquí arriba he dicho que la animación 99 debe durar 2 segundos si por lo que sea le digo que dure 20 segundos podréis comprobar como esa misma animación tarda bastante más en ejecutarse tarda bastante más en completarse y comprobamos como finalmente tenemos la animación en la pantalla como he dicho la transformación no es la única propiedad que se puede animar prácticamente cualquier propiedad en css se puede animar para animar más propiedades simplemente tengo que hacer lo siguiente en este caso le voy a decir que en 0% por ejemplo el background sea red en 25 el background va a ser blue el 50% el background va a ser green en el 75% el background va a ser pink y al 100% el background por ejemplo va a volver a ser red va a volver a ser rojo nos fijaremos como de esa manera ahora guardo y recargo tendremos que el objeto no solo va a ir cambiando de posición sino que también a la vez va a ir cambiando de color por tanto cualquier propiedad es perfectamente animales no realmente no todas son animales pero la gran mayoría de ellas sí que lo son la única dificultad sobre todo estriba a la hora de animar en que estamos animando mediante parámetros y esta manera de animar pues evidentemente es mucho menos visual que animar con el ratón animar de otras maneras como podríamos hacerlo directamente con animación de ratón

Deja una respuesta

Tu dirección de correo electrónico no será publicada.