Curso HTML 5 y CSS Fundamentos

para crear páginas web nos hacen falta dos cosas únicamente por una parte un procesador de textos un editor de textos en el que poder escribir el código y por otra parte nos va a hacer falta un navegador web en el que poder comprobar el código solo estas dos cosas son necesarias para desarrollar una web dentro de edith y de la mayoría dentro de la carpeta ejercicios voy a hacer doble clic en la carpeta de ejercicios y voy a pinchar con el botón derecho en esta zona que está vacía para crear un archivo nuevo así que creó un archivo nuevo que de momento voy a llamar primera prueba el nombre del archivo es el que vosotros queráis punto html lo de html hay que ponerlo siempre ya que es la extensión del archivo y de esa manera el archivo será reconocido como una página web en html haciendo esto que se puede hacer desde el programa edit o se puede hacer directamente desde el escritorio se puede pinchar botón derecho y crear nuevo archivo lo que he hecho ahora es crear un archivo primera prueba html para empezar cargamos el archivo tanto en el editor de textos primera prueba a punto html como en él vamos a hablar de la estructura básica que debe tener cualquier documento html la estructura básica está contenida en tres etiquetas voy a eliminar lo de esto es una prueba así que lo seleccionó lo su primo lo borro entre etiquetas voy a escribir lo siguiente voy a escribir una etiqueta de apertura que es el símbolo menor qué y la primera etiqueta imprescindible es el doctor es el tipo de documento esta etiqueta aunque el archivo se llama html le dice al navegador que lo que vamos a usar es un archivo con el lenguaje html por eso abrimos la etiqueta con menor que ponemos el signo de admiración que suele estar en mayúsculas y número uno y ponemos justo y exactamente en mayúsculas lo siguiente docta se me dio una te dr doctor que en castellano sería tipo de documento y pongo html le digo que el tipo de documento es html cualquier etiqueta que se abre se tiene que cerrar por eso lo que voy a hacer ahora mirar es una vez que escrito doc type html con un espacio de separación lo que hago es mayúsculas y mayor que de esta manera la etiqueta que ha abierto con menor que queda cerrada con mayor que y tengo la primera etiqueta llamada doctor que es el tipo de documento además del doctor cualquier documento html debe contener las siguientes etiquetas por una parte escribiremos una etiqueta llamada head head siempre entre llaves de apertura y cierre gm que se traduce como cabeza en la cabeza del documento enviamos información al navegador la etiqueta head se abre con esta etiqueta y se cierra con etiqueta menor que barra que está con mayúsculas y número 7 y g esta es una etiqueta de apertura de la cabeza del documento esta es una etiqueta del cierre de la cabeza del documento y todo lo que haya entre una y otra será considerado la cabeza del documento las siguientes etiquetas más importantes son body es la cabeza bolt y es el cuerpo así que escribo body y un poco más abajo por ejemplo pulso dos veces enter pongo menor que barra morin esta etiqueta abre el cuerpo esta etiqueta cierra el cuerpo y todo lo que ocurra aquí en medio será parte del cuerpo del documento html así que estas son las tres secciones básicas e imprescindibles de cualquier documento html tenemos una definición de tipo de documento tenemos una cabeza y tenemos un cuerpo y atención porque todo aquello que vaya en la cabeza nuestro usuario no lo ve las personas no lo ven es información que se envía al navegador no a la persona por ejemplo le dice el título de la página quien ha hecho la página información que el usuario no ve mientras que todo aquello que debe haber el usuario lo pondremos dentro del cuerpo todo el contenido que se transforme en un contenido visual en la pantalla irá dentro del boli si ahora guardo este documento que tiene estas tres secciones y voy al navegador y lo ejecutó y lo actualizo con f5 o con la tecla de actualizar observaré que no tengo nada esto es perfectamente normal porque lo que estoy haciendo es definir la estructura del documento bien se ahora vuelvo al editor de textos dentro de la cabeza voy a empezar a escribir cosas a partir de ahora cualquier parte del documento html será una sub parte de una de estas tres secciones y ahora dentro de la cabeza voy a escribir una etiqueta que se llama título title como esta etiqueta título es parte de la cabeza para luego verlo correctamente y yo aclararme bien voy a usar sangrías para usar sangrías lo que hago es pulsar la tecla tabulador a que es la tecla que está más bien bajo de escape está a la izquierda del teclado bajo del número 1 si yo pulsó la tecla tabulador a la pulso una vez como veréis hago una sangría dependiendo del editor la sangría será más grande o más pequeña pero eso da igual entonces hago una sangría hago una tabulación escribe una etiqueta siempre con menor que siempre que digas la etiqueta pues voy a poner menor que y la etiqueta se llamará title título title cierro la etiqueta con mayúsculas mayor que y ahora si esta etiqueta empieza acaba con menor que barra que se consigue con mayúsculas y número 7 y escribo title si nos fijamos tiene la misma lógica que el gen el gen empieza con here y acaba con él pues el título empieza con title y acaba con barra title todo lo que yo escriba entre estas dos etiquetas se considerará el título de la página así que ahora voy a hacer título de la página y ahora atención ángulo siguiente guardo cambió al navegador y fijaos que hasta ahora pone aquí file dos puntos barra y la dirección del archivo sin embargo si yo ahora actualizo ahí pone título de la página por tanto ese documento lo que está haciendo ahora mismo es informar que el título de la página no es algo que deba aparecer en la página debe aparecer arriba en el nombre de la página si en lugar de poner título de la página pongo título de mi página o pongo oye mira voy a poner a cadena de inglés pues ahora guardo me voy al navegador y se actualizó ahora y poner academia de inglés por eso las etiquetas son tan importantes porque nos ayudan a definir ese contenido como debe ser interpretado en este caso poniendo ese título dentro de la cabeza el navegador sabe que eso no es un texto que debe aparecer en la pantalla sino que ese es el título que da nombre a la web y la etiqueta title es imprescindible en cualquier página web porque es un elemento muy importante para indexar los buscadores en las páginas por tanto especial atención la etiqueta title porque debe reflejar perfectamente ni con demasiadas ni con demasiado pocas palabras la actividad que se desarrolla dentro de esa página web las etiquetas no solo se usan para estructurar el documento sino que también se pueden usar para cosas como por ejemplo estilizar voy a poner dos rótulos llamados esto es un título pulsa enter y ahora pongo esto es un texto si ahora guardo y actualizó en el navegador pulso f 5 veo esto es un título y esto es un texto el programa de momento no tiene manera de saber qué es cada una de las cosas pues esto lo vamos a solucionar también mediante las etiquetas si volvemos al editor vamos a poner las siguientes etiquetas primero hago una sangría para indicar que esto está contenido dentro del body y los títulos se nombran con la etiqueta h del 1 al 6 donde 1 es un título de mayor categoría y por defecto con mayor tamaño que el 6 así que dentro de esto es un título antes pongo axe 1 y al final pongo barra h1 otra vez la misma lógica de etiquetas cuando el título empieza pongo h 1 cuando el título acaba pongo barra h1 los títulos se enmarcan con h y un número h es la primera letra en inglés de reding de titulación o de cabecera y el texto se marca con una etiqueta llamada p parágrafo así que esto es un texto empieza con una etiqueta pe y acaba con barra p de esta manera le decimos al navegador que esto de aquí es un título y esto de aquí es un texto pero una vez más en el navegador no vamos a ver h1ni1 y vamos a ver p ni barra p sino que el navegador va a transformar esta información en lo siguiente mirad guardo aquí me voy al navegador y si ahora actualizo f5 compruebo como el título se ha convertido en un título es grande está en negrita mientras que el texto de parágrafo sigue siendo un texto normal como comentario curioso deciros que en html una cosa es la estructura y otra cosa es el estilo no tienen nada que ver yo con h1 no he querido formatear un título lo que he querido es indicarle a la aplicación que esto es un título debe ser interpretado como un título lo que pasa es que los navegadores lo que hacen es asignar un estilo por defecto a los títulos y a los parágrafos también o se os puede dar el caso de que depende del navegador que uséis firefox chrome opera safari el que sea el el título no aparezca igual que el mío aparezca con otra tipografía aparezca con otro tamaño tal vez no sea negrita ale el estilo por defecto es una cortesía de los navegadores incluso hay navegadores que no aplican estilo por defecto y esto nos da igual porque lo importante no es ya el estilo visual de momento lo importante es que el navegador comprende y entiende que esto de aquí es un título y esto de aquí es un texto lo de los títulos es algo mucho más importante de lo que pueda parecer porque algo que tiene un título se supone que es un texto más importante que lo que tiene un parágrafo o incluso a veces el título resume lo que luego es el parágrafo luego lo que hacen los buscadores es antes de fijarse en los parágrafos se fijan en los títulos donde además los títulos h1 son los más importantes y son en los primeros que se fijan por tanto los títulos tienen que estar muy bien puestos muy bien marcados en html mirad yo ahora puedo el título y ahora hacer un título de h2 le digo esto es un título del segundo nivel y encierro importante esto es muy importante siempre acordaros siempre que habrá una etiqueta tengo que cerrarla esto es muy importante guardo actualizo y tengo un título de segundo nivel que yo creo que os fijáis como tiene negrita pero el tamaño de la letra es menor que el de h1 esto es h 1 esto es h 2 h 2 siempre es visualmente menor puedo continuar allá está h 6 h 3 esto es un tercer nivel hace cuatro cuarto nivel y así siempre fijaos qué etiqueta que abro etiqueta que cierro y si ahora lo previsualizar en el navegador comprobaréis como cada vez que pongo un estilo en oro cambia el tamaño de la letra por último deciros que es un error es un tremendo error formatear con estilos formatear con estilos quiere decir que digo mira voy a voy a subirle el tamaño de la letra posible lo cambio de lo cambio de cabecera no esa no es la manera lo de h1 h6 usarlo para identificar la importancia del título no el estilo visual el estilo visual lo maquetar hemos usado css dentro del body html5 propone nuevas etiquetas para definir el contenido de cara al navegador las nuevas etiquetas son las siguientes las webs actuales no sabemos si en 10 años esto seguirá siendo así pero desde luego hoy es una tendencia muy común tienen tres zonas tienen la cabecera de la web que suele contener el logotipo el eslogan y un menú de navegación por regla general tienen el contenido de la web y tienen un pie de página donde ponemos nuestro correo aviso legal y cosas así así que siempre que queramos hacer una cabecera pondremos una etiqueta llamada heather no confundir con head head es cabeza y se usa para enviar información al navegador heather es cabecera y se usa dentro del body mientras que xerez está fuera del body header se usa para incluir la cabecera visual que verán los usuarios de la web con el logotipo el menú y lo que sea que ver empieza con una etiqueta de género y acaba con barra de ver todo lo que yo escriba dentro del género se considerará una cabecera así que pongo esto es una cabecera hay muchas maneras de poner el contenido de la página al contenido principal una de ellas porque no es poner una etiqueta llamada section sección así que usó una etiqueta llamada section la encierro con una etiqueta llamada barra station y todo lo que esté entre estas dos etiquetas será considerado una sección una sección voy a insistir una vez más no es sólo la sección principal pero como la sección principal también es una sección no sólo se usa para el bloque principal si dentro de esa sección tengo subsecciones también puedo usar otra vez internamente animadamente la etiqueta section así que dentro de section voy a poner esto es el contenido de la página y por último bajo de la sección suele haber un pie de página en inglés llamado footer así que pongo suter encierro con footer y todo lo que ponga aquí dentro será el pie de página es importante darnos cuenta que si yo era guardo y recargo la página no hay ninguna indicación visual de que esto sea una cabecera esto sea el contenido y esto sea el pie de página insisto que una cosa es estructurar y otra cosa es maquetar visualmente no tienen nada que ver por tanto aunque hayamos puesto tres secciones diferentes header sección y footer y aquí aparezcan seguidas no pasa nada no hemos hecho nada mal porque internamente el navegador la reconocerá cada una como le corresponde ahora bien lo correcto es mezclar los estilos dentro de las secciones así que por ejemplo en la cabecera suele estar el logotipo la marca de mi empresa así que en nombre de la empresa yo creo que coincidiréis conmigo en que el nombre de la empresa es lo más importante lo primero que se debe indexar en un buscador así que al nombre de la empresa no es una obligación pero desde luego es una muy buena costumbre ponerle un título h1 h1 en la sección voy a crear un título título del contenido y al título del contenido le pondré un título h 2 a y por otra parte al contenido propio de la página al texto puro y duro’ de la página le pondré un estilo de parágrafos una vez hecho esto como ya estoy usando los estilos dentro de las etiquetas estructurales lo que voy a hacer es eliminar estos estilos de prueba que había puesto antes de las etiquetas estructurales así me queda una etiqueta así me queda una estructura mucho más clara guardo recargo y esta es actualmente la estructura de la página web que estamos haciendo puede parecer poco impresionante visualmente de hecho lo es pero lo importante es que estamos poniendo la estructura del contenido correctamente si nos fijamos en el documento html comprobaremos como dentro del body tengo un header una sección y un futuro dentro del header tengo el nombre de la empresa dentro de la sección tengo algo de contenido y dentro del future tengo el pie de página y es importante aunque insisto no es obligatorio al navegador de hecho le da igual pero para que los seres humanos puedan leer mejor el código es importante usar sangrías y que cada elemento que esté contenido dentro de otro tenga una sangría mayor fijaos que como el h1 está contenido dentro del g ver tiene una sangría mayor que el header como él genera está contenido dentro del body tiene una sangría mayor que el body de esa manera yo puedo ver de un solo vistazo qué elemento depende de qué otro elemento mediante las listas somos capaces de ordenar elementos hay dos tipos de listas las listas ordenadas y las listas no ordenadas la diferencia es que en las listas ordenadas los elementos se enumeran con números con letras con siglas o elementos parecidos mientras que en las listas no ordenadas se ordenan con puntos puntos negros puntos blancos cuadrados negros y así por tanto voy a hacer doble clic en un archivo llamado listas punto html que de momento está vacío y voy a escribir lo siguiente siempre que quiera hacer una lista no ordenada tendré que usar una etiqueta llamada un l huele que es de un order list lista no ordenada abro un l y abajo cierro l todo lo que esté entre estas dos etiquetas se considerará una lista no ordenada ahora bien entre estas dos etiquetas tengo que poner otras etiquetas llamadas li que son elementos de la lista así que entre esas dos etiquetas hago una nueva etiqueta preferentemente con sangría para verlo mejor y pongo link primer elemento de la lista y cierro la etiqueta li por tanto huele define la lista mientras que lee define los elementos individuales de la lista puedo poner tantos elementos como quiera siempre que evidentemente los abra y los cierre con etiquetas link segundo elemento de la lista y tercer elementos de la lista si ahora guardo y actualizo observaré que los elementos li que he puesto aparecen con puntos y no con números porque acabo de hacer una lista no ordenada hacer listas ordenadas es exactamente igual que hacer listas no ordenadas pero usando la etiqueta llamada o l para hacer una lista ordenada tengo que abrir una etiqueta o l que viene de órdenes list que contendrá elementos lee los elementos lee como podéis comprobar son comunes tanto a las listas ordenadas como las listas no ordenadas y así que puedo poner otra vez primer elemento de la lista segundo elemento del estado tercero y el número que quieran tercer elemento de la lista si ahora guardo y recargo en el navegador observaré que tengo otra lista pero esta estaba ordenada ordenada quiere decir que aparecen los elementos numéricos en este caso de la lista las listas se pueden anidar no es demasiado complejo de hecho no requiere elementos estructurales nuevos pero sin embargo hay que considerar lo siguiente si yo al primer elemento de la lista le quiero añadir sus elementos si este es el punto 1 quiero 1.1 1.2 y así tengo que repetir la misma estructura de lista no ordenada dentro de este elemento li por eso no es complejo pero requiere partir este elemento y hacer espacio para poner una nueva lista no ordenada yo hasta ahora no he hecho nada si yo era guardo y recargo la página me daré cuenta de que no he hecho ningún cambio darle a enter no supone hacer cambios sino que simplemente el programa dice sí aquí está lee y aquí está el cierre del y todo lo que hay aquí en medio sigue siendo un elemento de lista pero esto lo he hecho para hacerme espacio para ahora mira repetir el esquema de huele cierro huele y pongo elementos link primero es un elemento segundo su elemento puede parecer al principio un poco lioso pero si os fijáis si yo quito esto sí ignoráis lo que acabo de subrayar básicamente teníamos lo que teníamos al principio lo que he hecho simplemente es meter una nueva estructura huele lee dentro esto es lo importante dentro del iii anterior por eso sí ahora guardo y recargo podremos comprobar como ahora dentro del primer elemento tengo el primer sub elemento y el segundo su elemento voy a repetir otra vez dentro del segundo elemento voy a poner sus elementos también así que dentro de esta etiqueta llego hasta el final del texto justo antes de la etiqueta del cierre pulso enter para hacerme sitio y ahora ya sabéis que no es obligatorio pero es muy recomendable pulso tabulador para en ese espacio crear una nueva lista no ordenada así que vuelvo a repetir la estructura de l tierra o el agua elementos link y elemento 2.2 elemento verdad 2.1 y 2.2 y si ahora guardo y actualizo observaré que ahora el segundo elemento de la lista tiene también sus elementos esta manera de trabajar esta manera de anidar también se puede usar con las listas ordenadas la misma estructura la puedo seguir de la siguiente manera en la lista ordenada me hago sitio pulso un tabulador para aclarar y repito la misma estructura etiqueta o l dentro de l pongo un primero su elemento y cierro la etiqueta le segundo su elemento y cierro la etiqueta lee y si ahora guardo que por cierto la tecla rápida de guardar en la mayoría de programas es control y la s de save tanto control s y ahora vuelvo al documento html y compruebo cómo tengo primer elemento de la lista de ver su elemento segundo su elemento con la sangría automática y la numeración evidentemente se reinicia y se retoma para cada una de las secciones es posible que aparezca en lugar de 11.1 o que aparezca el primer nivel con números y el segundo nivel con letras se puede pero eso no es de html es una es una cuestión de estilo con css por tanto lo veremos en su momento simplemente quedaros con la idea de que se puede las listas se pueden ordenar a tantos niveles como queráis aunque evidentemente se recomienda no ir más allá de tres niveles por tanto dentro de estelí repito otra vez la misma estructura usando sangrías para mantener cierta claridad y ahora pongo l dentro de esa lista y pongo otra vez el elemento el tercer nivel 1 y por lynn elemento de tercer nivel 2 y pongo link si ahora guardo y visualizó tengo aquí un tercer nivel lo importante siempre es cerrar correctamente las etiquetas fijémonos que si por ejemplo se me olvida estas etiquetas de cierre el link tendré problemas porque entonces el programa no sabrá interpretar correctamente la lista y house me la pondrá todo con un nivel más del que leve por tanto debemos poner especial atención a que toda aquella etiqueta que se cierre deba estar previamente abierta y toda aquella etiqueta que se abra se cierre en el momento oportuno las listas de tercer o de cuarto o del nivel que sea también se pueden crear en listas ordenadas si en esta lista ordenada creó dentro de un elemento o link otro elemento o l ah en el tercer nivel y en el otro y ahora guardo y lo visualizo en la página web observo como tengo un tercer nivel en lista ordenada insisto que podéis poner la cantidad de niveles que queráis aunque se recomiendan 3 al igual que en los estilos los navegadores ponen automáticamente estilos para las listas en este caso firefox que es el navegador que estoy usando pone un punto negro para las listas de primer nivel punto blanco para las listas de segundo nivel cuadrado negro para el tercer nivel esto puede variar dependiendo del navegador que uséis no debemos preocuparnos porque esto al final lo podremos estilizar visualmente con css para que aparezca en la medida de lo posible igual en todos los navegadores debéis tener en cuenta que esto no es más que un estilo por defecto los comentarios nos ayudan a introducir frases que el navegador ignorará completamente pero que a nosotros nos sirven para recordar qué es lo que hacen ciertas partes del código para introducir comentarios tengo que hacer lo siguiente voy a hacerme hueco voy a pulsar enter en la primera lista en ordenada para bajar toda una línea hacia abajo y poder escribir y para crear comentarios en html tengo que hacer lo siguiente menor que admiración y un guión todo lo que vaya después de menor que admiración y un guión se considera un comentario ojo peligro como no he cerrado el comentario el programa interpreta que todo lo que ocurre después veis que está de color azul se ha convertido en un comentario para cerrar el comentario tengo que pulsar guión guión mayor qué todo lo que esté dentro de esas dos etiquetas es un comentario se pone de color azul en mi editor como otros editores se puede poner de otro color el color es lo de menos así que pongo aquí esto es un comentario o por ejemplo voy a poner esto es una lista no ordenada así se vea y me informa que lo que voy a encontrar abajo es una lista no ordenada esto es un comentario ahora como hagáis los comentarios ya depende de cada uno por regla general porque si yo pongo hay un comentario así de un primer vistazo no lo diferenció de un trozo de código por tanto lo que suelo hacer es lo siguiente para que se vea bien lo que suelo hacer es poner una tira de barras da igual lo que pongáis porque es un comentario y pongo lista ordenada y finalizó con una tira de barras así visualmente se ve bastante más rápido que eso es un comentario y ahora aquí abajo pongo lista no ordenada mira menor que admiración guión y ahora porque yo tengo esa costumbre hago barras lista ordenada la de arriba es no ordenada majorque y observó lo siguiente de esta manera lo que he hecho es comentar el código ahora he introducido una pista para el ser humano que me dice que hace cada sección y atención se ahora guardo y voy al navegador y actualizó en el navegador nunca salen los comentarios los comentarios no proporcionan información ni al navegador ni al usuario de la página los comentarios simplemente están para proporcionar información al programador para saber qué hace cada sección del código y ya que estamos con los comentarios os diré que en cualquier web se puede hacer lo siguiente en cualquier web y prácticamente en cualquier navegador web yo puedo pinchar con el botón derecho pincho con el botón derecho en el navegador y tendréis prácticamente siempre una opción que si no pone lo mismo pondrá algo parecido que podrá ver código fuente de la página en ver código fuente de la página el programa revela todo el código fuente que se ha usado en esa página web y atención los comentarios no salen ni en el navegador ni en el contenido del navegador pero sí que salen cuando visualizamos el contenido del código fuente veis ahí los comentarios por tanto cuidado lo que escribes en los comentarios no pongáis información que no deba ser sabido ya que al final sí que se envía al navegador vamos a aplicar lo que hemos aprendido de generación de listas y creación de comentarios para darle más contenido a la primera prueba que estamos haciendo que de momento constituye nuestro proyecto una vez hemos dado nombre a la empresa en el header suele ir el menú de navegación digo que suele he vuelto aquí desde listas a primera prueba punto html y diego suele porque no es obligatorio es una costumbre que el menú de navegación vaya a continuación del número de la empresa sin embargo no es obligatorio pues para esto introduzco una nueva etiqueta de html5 que es la etiqueta nava así que donde pone h 1 nombre de la empresa se cierra h 1 nombre de la empresa voy a hacerme sitio voy a pulsar enter y al hacerme sitio lo que voy a hacer es colocar una etiqueta llamada nada etiqueta nada de navigation y cierro con una etiqueta nada todo lo que vaya encerrado entre estas etiquetas no se considerará un menú de navegación y esto es muy importante porque los navegadores prestan especial atención a los menús de navegación porque los menús de navegación se suelen corresponder directamente con las secciones de nuestra web habréis visto que a veces pones una página web en google y te dice las secciones que tienen en el resultado vale pues esto lo podéis conseguir entre otras muchas cosas usando una etiqueta nave de navegación y ahora lo que voy a hacer es dentro de esta etiqueta de navegación voy a poner una lista y l a mí esto si queréis es manía personal me gustan más las listas no ordenadas que las ordenadas insisto que esto es manía personal así que mira dentro de este ue le voy a hacer un elemento de lista y digo inicio el primer elemento de mi menú de navegación es el inicio a continuación nos igual hay noticias y y a continuación igual hay servicios sección en la que enumeró los servicios que ofrece esta página web y por último contacto son cuatro elementos bastante clásicos de muchas webs por tanto si ahora guardo por supuesto y voy a la página que estoy creando acá debe inglés de momento y pulso guardar tengo el nombre de la empresa ya continuación el menú con los cuatro puntos que forman mi menú de navegación ahora mismo no parece un menú de navegación pero sin embargo lo es como el código empieza a estar un poco liado quizás sería ya un buen momento para introducir comentarios así que en los comentarios voy a hacer lo siguiente dentro de enap los comentarios se pueden introducir donde queráis en el punto que queráis que necesitéis de la página web yo por ejemplo voy a introducir aquí un comentario recordamos que era con etiqueta exclamación guión guión este es el menú de navegación y luego vi a un guión y etiqueta para cerrar de esa manera sé este es el menú de navegación o puedo poner la barra de navegación y también hay gente que hace lo siguiente hay gente que indica mediante comentarios el principio y el final de una sección sin navegación porque yo con el primer comentario sé dónde empieza la navegación pero dónde sé cómo acaba o dónde acaba los comentarios insisto yo los he puesto de esto de las barras porque yo lo suelo hacer así pero cada uno no tiene que poner de la manera que mejor se aclare y como podemos comprobar una vez más guardo actualizo los comentarios no tienen ningún efecto sobre la visualización de la página web los comentarios se ponen únicamente a modo de desarrollo aunque vuelvo a repetir que si cualquier persona en nuestra página web pincha con botón derecho en la página y elige ver código fuente de esta página verá los comentarios una vez más cuidado por tanto con que ponemos en los comentarios las etiquetas meta o meta de etiquetas son etiquetas que proporcionan meta contenido a la página el meta contenido es un contenido que se envía al navegador o que frecuentemente es indexado por los buscadores las meta de etiquetas se introducen de la siguiente manera siempre se introducen en el gp en la cabeza y es recomendable que se inserten después del título por tanto después del título voy a crear un espacio en blanco y voy a poner meta name igual y entre comillas autor autor en inglés por tanto hizo al autor con una h entre la t y la o content y entre comillas ponéis el nombre del autor de la página web de este caso y por último se raíz la etiqueta meta meta es una etiqueta un poco parecida al doc type en cuanto a que no es una etiqueta que primero se abre y luego se cierra si no es una etiqueta que ella sola contiene todo el contenido que debe contener veis ahí como dentro de la etiqueta meta han aparecido dos cosas nuevas que son parámetros y propiedades dentro de la etiqueta meta el name es el autor el contenido es josé vicente grabadora tres etiquetas meta muy muy muy comunes son las siguientes 1 el autor otra la descripción donde en descripción pondréis una sencilla descripción del contenido de vuestra web así que en descripción ponéis en esta web voy a presentar algo es una frase que generalmente aparece luego en los buscadores en la que describís con una frase corta de qué va la página web qué estáis haciendo una etiqueta de la que se ha abusado demasiado y cuando abusa es demasiado de algo pues al final eso pasa factura es la etiqueta meta keywords los keywords o palabras clave son aquellas palabras que ayudan a indexar tu página en los buscadores la fórmula es meta name igual aquí words siempre en inglés content igual a el contenido de esas palabras clave separados por comas si nos fijamos el contenido de esas palabras clave debería ir relacionado con el contenido de la página web sin embargo no tiene por qué podremos podemos tocar esas palabras clave para que nos index en por conceptos diferentes a los que corresponden a nuestra página web por tanto se puede hacer trampa con las keywords con las palabras clave y no se debe hacer trampa para conseguir una mejor indexación las palabras clave deben coincidir con el contenido real de la página si por ejemplo de alguna página relacionada con diseño web y diseño gráfico y todo tipo de diseño pues pondré diseño web graficó hombre 3 de poner también mi nombre e incluso ya que estamos con del apellido pero tal vez a mí me interesa aparecer indexado en buscadores de no sé de automóviles compongo coche si mi actividad no tiene nada que ver con la automoción yo ahí estoy introduciendo una keyword falsa y esta es una costumbre que tenéis que evitar otra costumbre de la que otra o la otra mala práctica de la que se ha abusado en muchas ocasiones y esto hace que los buscadores te eliminen si realizas esta trampa es que si estoy especialmente interesado en que mi nombre aparezca bien posicionado digo mira pues copio mi nombre y lo pegó varias veces porque de esa manera parece que tu nombre tenga más relevancia repetir claves antiguamente hacía que subiera exposiciones en el buscador a día de hoy hace que se te penaliza por intentar correr demasiado acabas corriendo bastante poco así que evitar está este truco que al final os va a ocasionar más perjuicio que beneficio si tú quieres que se te indexe mucho por un término por ejemplo quiero que se me interese mucho por diseño pues lo ideal es que en el contenido de mi web ponga varias veces la palabra diseño además diseño en un contexto válido no haga un artículo de la noticia nueva que ponga diseño diseño diseño diseño diseños diseño porque eso es hacer trampa también y el buscador al final te va a pillar pero pongo pues nuevo proyecto de diseño cuando fui a la última feria de diseño y descubrí que los diseñadores hacen esto es una manera natural de ubicar correctamente las palabras clave y de que el buscador cuando te index diga parece que ese tío está hablando de diseño vale siempre se pueden hacer trampas pero la idea es si no quieres ser penalizado coloca las palabras naturalmente pero eso sí colócalas porque lo que no puede ser es que a veces entras en blogs de diseño y no aparece la palabra diseño por ninguna parte luego cuando el buscador pase por esa página no sabrá realmente de qué está hablando esa página vamos a ver a continuación hiperenlaces o hipervínculos que son elementos que nos permiten saltar de una página a otra diferente haciendo clic en una zona de la pantalla para eso voy a crear dos archivos nuevos archivo nuevo donde el primero se llamará origen punto html y el segundo se llamará destino punto html lo que yo quiero es que en origen haya algo que me lleve al archivo de destino así que una vez que están creados los dos archivos mira voy a hacer doble clic en cada uno de ellos para cargarlos en el editor origen doble clic y lo cargo en el editor y destino doble clic y lo cargo en el editor los dos están vacíos evidentemente porque ahora procederé a darles algo de programación y ahora además no sólo tengo que cargarlos en el editor sino que tengo que ir a la carpeta de ejercicios en origen pulso botón derecho o doble clic cada uno según tenga configurado el sistema operativo y le digo que lo quiero abrir con el navegador web firefox en mi caso por tanto ahora tengo origen abierto tanto en el editor como en el navegador lo podemos ver ahí origen como de momento está vacío por tanto resumiendo creamos origen y destino los abrimos en el editor y a continuación abrimos origen en el navegador de internet los hiperenlaces o hipervínculos van encerrados entre etiquetas y etiquetas que tienen una letra ‘a’ en origen voy a escribir este es el contenido del documento de origen en destino voy a escribir este es el contenido del documento de destino guardo por supuesto guardo los dos guardas aquí guardo aquí ahora están los dos guardados y si voy al navegador y pulso f5 me dice que en origen html este es el contenido del documento de origen sin embargo el problema ahora mismo es que yo necesito saltar al documento de destino yo necesito algo que me permita haciendo clic poder ir de un documento a otro en vuestra página frontal ese algo os permitirá saltar de la página principal al contenido a la zona de contacto a las noticias y cosas así por tanto lo que haré es volver al editor de notas pulso enter para hacerlo en una línea nueva y ahora pongo etiqueta y cierro etiqueta quiero ir archivo de destino y cierro la etiqueta todo lo que esté encerrado entre etiquetas y ya sabéis como siempre tiene que tener una de principio y una de final será considerado un enlace si yo ahora guardo y vuelvo a la página web aquí tengo un uno quiero ir al archivo de destino pero que todavía no me lleva a ninguna parte porque no me lleva a ninguna parte porque yo no he especificado dónde quiero que me lleve he dicho que es un vínculo sí pero un vínculo puede ir a muchas partes puede ir a muchas páginas antes de que me lleve a ninguna página tengo que especificar a qué página quiero llegar por tanto en la app en la etiqueta voy a añadir una propiedad que tiene que ser exactamente lo que voy a escribir en la pantalla tiene que ser h red el archivo de referencia es igual entre comillas al nombre del archivo a donde quiero ir por tanto voy a ir a destino punto html tiene que ser exactamente así a espacio h rev igual y entre comillas el nombre con extensión del archivo al que quiero viajar porque si lo hago de esta manera si ahora por supuesto siempre guardo y voy al navegador y actualizo ahora fijaos como ese texto se ha quedado subrayado de color azul y cuando paso el ratón por encima el cursor marca una mano como que allí puedo pinchar y no sólo esto sino que si además le digo que pincho me dice este es el contenido del documento de destino he conseguido saltar correctamente hasta un archivo no hagáis en páginas web callejones sin salida fijaos que yo he entrado en esta página pero no puedo salir no puedo volver atrás vamos a ver los navegadores prevé en esta clase de circunstancias y suelen tener un botón de ir a la última página ir a la página anterior pero aún así es una muy buena costumbre que vuestra navegación permita ir desde cualquier punto de la página a cualquier otro punto de la página por tanto lo que voy a hacer ahora es en origen punto html me voy a destino y repito lo que acabo de explicar para hacer otro enlace desde el destino quiero poder pinchar en un sitio en el que pueda volver al origen como lo hago pues otra vez repito h red entre comillas quiero ir quiero volver al origen origen punto html y ahora pongo pulsa aquí para volver a origen y no os olvidéis esto es muy muy importante de cerrar el enlace porque si no todo el resto de la página se convertiría en un enlace siempre que delimitar dónde empieza donde acaban las cosas si ahora guardo y actualizo fijaos como pulsa aquí para volver al origen y si pulso aquí para volver al origen este es el contenido del documento de origen quiero ir al archivo de destino he hecho dos páginas que están vinculadas entre sí mediante hiperenlaces una vez más voy a volver a repetir que puede ser que no os guste esto de que lo haya puesto de color azul y que esté subrayado esto es un estilo por defecto y esto cuando lleguemos a css se podrá cambiar para quitar el subrayado para cambiarlo de tipografía para hacer lo que queramos con ese hiper enlace o con lo que sea los hiperenlaces no solo nos sirven para ir de página a página dentro de nuestro propio sitio web sino que también nos sirven para salir al exterior y salir a otras páginas web la manera de hacerlo es simplemente con una etiqueta pero dentro de hr debemos poner el formato correcto de una dirección de internet y el formato correcto es el siguiente si yo quiero ir con un enlace a google ir a google la manera correcta de entre las comillas poner la dirección de la página web es la siguiente primero el protocolo http dos puntos barra ya continuar a continuación la dirección www punto la dirección en la extensión o el dominio que es puntocom de esta manera y ahora guardo y como podemos comprobar el enlace es exactamente igual a este enlace de aquí lo único que hago es cambiar un archivo html por una dirección de una página web si ahora voy al navegador y recargo voy a ir al archivo de destino porque lo he hecho el archivo de destino y puedo pulsar aquí para volver al origen o ir a google así que si pincho ir a google como no tengo ahora mismo internet no voy a ninguna parte pero como podéis comprobar aquí arriba habría cargado correctamente la página de google.com una pequeña demostración de css y para qué se usa y para qué nos puede servir es para estilizar los enlaces por tanto css nos permite hacer lo siguiente si llegamos a esta página y quiero el archivo de destino y no nos gusta el formato por defecto que tienen los enlaces que es subrayados contexto azul y de esta manera yo puedo crear un pequeño css interno de la página así que lo que sí que es importante es que en el css nombre correctamente las etiquetas introducimos a continuación una etiqueta que se llama html que debe contener al genial body y y es importante para el css tener una estructura de head y body porque el css va en el jefe va en la cabeza así que voy a hacer una etiqueta llamada style de tipo texto css style y dentro de esta él voy a decirles que cuando tenga un a y ya ves porque efe ss usa llaves quiero que el fondo familia sea marjal el texto decoración sea young ya y quiero que cuando pase el ratón encima del enlace quiero que el background sea rgb a bueno para amplificar pero que sea rojo si hago esto y ahora colocó este contenido dentro del voy guardo ahora recargo y si ahora recargo podréis comprobar como el texto ya no está decorado ya no tiene el subrayado la letra ya no es times new roman o ya no es de tipo times sino que es de tipo arial y ahora además si muevo el ratón encima comprobaréis vamos a ver background background veis que falta una g es lo que tiene ahora recargo y cuando pongo el ratón por encima lo que hago es estilizar un enlace y si quiero que los enlaces no aparezcan de color azul quiero que porque coincide con mi imagen de marca los enlaces aparezcan de color verde por su color gris recargo si os fijáis como ahora el texto del enlace aparece de color verde así que en resumen el objetivo de esta pequeña demostración es enseñaros cómo con html no vamos a tocar o al menos en la medida de lo posible el estilo de los objetos solo vamos a tocar el contenido de los objetos cuando queramos mejorar el estilo de html usaremos css en este caso como habéis visto para quitar el subrayado para cambiar el texto el color del texto o para hacer cosas como que por ejemplo cuando pases por encima de un botón pues cambie de color o hago una animación o haga lo que os pueda interesar tanto el head como el body que son las dos grandes partes de html deben ir incluidos dentro de etiquetas html en principio esto podría ser obviado ya que el archivo al contener extensión html está dejando claro que el contenido interior va a ser html sin embargo como más adelante veremos que un archivo html puede contener otros tipos de código que no sean html es combina es conveniente hacer lo siguiente después de docta y antes de help voy a introducir una etiqueta html y abajo de body voy a introducir la etiqueta de cierre html por tanto podemos ver aquí como html se abre aquí arriba contiene el head contiene el body y se cierra aquí abajo para clarificar todavía más siempre podemos seleccionar todo el jefe y el body y apretar una vez el tabulador para dejar claro que todo este contenido depende está dentro de la etiqueta html esto no es obligatorio podemos comprobar como hasta ahora la página ha funcionado y seguiría funcionando correctamente pero sin embargo para seguir el estándar y para indicarle al navegador correctamente que el lenguaje de programación estamos usando en cada una de las partes será conveniente introducir tanto el head como el body dentro de una etiqueta html vamos a aprender las etiquetas de formateo para eso voy a crear un archivo nuevo llamado formateo punto html que cargo y voy a cargarlo también en el navegador de momento aquí las etiquetas de formateo me sirven para cambiar para realizar cambios en el formato visual de los objetos las etiquetas de formateo pese a que siguen siendo parte del estándar html5 están un poco en desuso porque para formatear se supone que debemos usar css sin embargo conviene conocerlas conviene saber usarlas en combinación para usarlas combinadas con html por tanto mira cuando quiero hacer un texto en negrita este texto tiene una palabra en negrita aquella palabra que quiera que aparezca en negrita debe ir con una etiqueta llamada be me devolví ahora guardo actualizo y veo que este texto tiene una palabra en negrita esa palabra o en definitiva aquello que esté encerrado por las etiquetas ve aparecerá en negrita si yo quiero hacer un texto en itálica en letra itálica este texto tiene una palabra itálica y para hacer una italika tengo que introducir la etiqueta y de itálica pero vamos a ver qué pasa voy a guardar voy a volver a la página y veo que me han formateado correctamente el texto esta palabra está en el modo itálica pero cuando yo no específico saltos de línea manuales en html los textos aparecen seguidos si quiero introducir saltos líneas manuales en html tengo que introducir una etiqueta atracción llamada br br barra y etiqueta tiene este formato mira tiene el formato etiqueta br barra etiqueta si ahora guardo y actualizó la página observará como introduciendo svr es forzado un salto de línea deforme reforzado un retorno de carro y otros estilos para formatear son los siguientes voy a introducir un br para un retorno de carro este texto está subrayado cuando quiero subrayar un texto y lo meto dentro de una etiqueta guardo actualizó y compruebo como cualquier texto que esté encerrado dentro de una etiqueta o aparece subrayado por tanto ve de volver para negrita y de itálica para itálica y o de underline para subrayado ahora que estamos con las rayas también os voy a decir que con la etiqueta del d del ítem de eliminado este texto está tachado guardo actualizo y comprobó como este texto está tachado no tiene la línea subrayando sino que tiene la línea tachando hay veces que en una web le pone nombre hay veces que una web ponéis algo que pusiste en la semana pasada y lo queréis corregir como esto que dije ya no vale ahora es esto lo que hayáis es un estilo de poner las cosas evidentemente no es una obligación ni mucho menos cuando quiero reforzar o disminuir las letras o las palabras pongo small de pequeño y extra de fuerte este texto es fuerte y este otro es pequeño así que el texto que sea fuerte tendrá una etiqueta strong cuidado y el texto que sea pequeño tendrá una etiqueta de small fuerte entre etiquetas strong pequeño entre etiquetas small y si ahora recargo comprobaréis no pasa nada por la ñ ya lo haremos más adelante pero comprobaréis como el texto fuerte aparece reforzado y el otro aparece más pequeño tal vez os parezca que el texto fuerte visualmente es igual al texto negrita y efectivamente es así es igual sin embargo semánticamente no es lo mismo un texto fuerte con texto negrita lo que pasa es que en el estilo por nada por defecto del navegador aparecen igual de la misma manera que también aparece igual el texto enfatizado el texto enfatizado este texto está enfatizado se introducen en una etiqueta de m m de énfasis en inglés con m guardo recargo y como veis el enfatizado es como una palabra itálica así que strong es como bold y m es como itálica hay algunos navegadores en los que enfatizado aparece como una grita en definitiva todo esto no importa mucho porque como ya sabéis más adelante podremos especificar estos estilos mediante css y ahí diremos pues si se enfatiza cuanto se enfatiza cuando nos enfatizan y así si me permitís un pequeño ejemplo ah dentro de un documento html dentro del body voy a poner el contenido pero ahora lo que voy a hacer es dentro del gel definir un estilo de tipo texto css esto es otra demostración de cosas que haremos más adelante si yo ahora guardo y recargo nada ha ocurrido pero lo que he hecho es preparar este estilo para decir mira siempre que vea una enfatizada le voy a decir que el funk family sea real que el font size sea no sé qué cierto píxeles y que el color sea gris si ahora recargo la página os quejaréis como solo el texto enfatizado estará arial a 18 píxeles y de color verde como si quiero hacer insisto esto es una demostración font weight bold y el tamaño lo quiero a mirar a 36 ahora el texto enfatizado está en negrita y a 36 para eso sirve css por tanto no os preocupéis de que el formateado por defecto de html no os guste mucho estadísticamente porque lo único que importa ahora es pre marcar los estilos para más adelante con css definir los estilos pre marcados un par de estilos más de formato html son sub y sub este texto está rebajado este texto es super índice con este texto es subíndice el texto subíndice se encierra dentro de una etiqueta sub el texto super índice se encierra dentro de una etiqueta sub sumó para subíndice sub para super índice fijaos ahí para subíndice sub sub para super índice ahora guardo actualizo y fijaos como tengo un texto subíndice y un texto super índice ya sabéis para forzar el retorno de carro hay dos etiquetas nuevas en html5 que os van a interesar mucho que son artículos y asael voy a primera prueba y dentro del contenido concretamente dentro de la sección cuando quiero indicar un artículo un ejemplo de artículo sería por ejemplo era una revista online un artículo de la revista pero no necesariamente un artículo sino que si por ejemplo tú en tu página web en la página web inicial colocas una noticia esa noticia también se considera en un artículo o colocas por ejemplo un blog y colocas entradas en el blog hoy me ha pasado esto pues eso también podría ser un artículo que no es que sólo sea para periódicos digitales y la etiqueta artículo es tan sencilla como poner arctic el artículo y cierras arctic el para cerrar el artículo así que en el artículo pones en h 3 por ejemplo título del artículo y el texto del parágrafo texto del artículo la llave texto del artículo y voy a poner varias copias del texto esto sería un artículo un artículo suele contener muchas veces el título y el texto si voy acá db en inglés tengo el título del artículo y tengo el texto que contiene el artículo otra etiqueta mucha atención muy interesante de html5 y es una etiqueta que se prevé que tenga mucha relevancia en los buscadores es la etiqueta time la etiqueta tiempo cuando queráis configurar una fecha cuando queráis que el buscador sea capaz de localizar dónde están las fechas en vuestro en vuestro contenido usaremos la etiqueta time si este artículo está publicado hoy pues pondré una etiqueta time y pondré la fecha de hoy en el formato estándar el formato estándar es año a mes barra villa así que 2011 03 barra 01 visualmente en la pantalla no pasa nada simplemente aparece la fecha pero semánticamente el navegador y los buscadores saben que eso de ahí es una fecha y por último en esta parte del curso como novedades de etiquetas deciros que existe una etiqueta llamada side donde a side se traduciría como contenido tangencial es contenido que tiene un significado tangencial indirecto con el contenido que ahora mismo en la página pero que aún así tiene algo de contenido por ejemplo que estar viendo una página de noticias a site sería una una pequeña cajita que pusiera resumen de las noticias la semana pasada no es directamente relacionado con artificiales de hoy pero si te interesa las de hoy igual te interesa las de la semana pasada y dentro de las ied puedes poner lo que quieras h4 noticias anteriores y el cómo pongáis las noticias o como pongáis los elementos ya depende de vosotros por ejemplo yo puedo hacer una lista no ordenada lee y digo día lunes la noticia para copio pero pegó y pego y se guardó tengo ahí una zona de navegación donde tengo como podéis ver aquí una zona a side con noticias anteriores así que tienes el nombre de tu empresa tienes un menú de navegación tienes un contenido inicial bienvenidos quién somos qué hacemos y a partir de ahí artículos últimas noticias de lo que hacemos últimas noticias y luego quieres ver más noticias noticias anteriores anna site esto es un ejemplo de una maquetación en html insisto visualmente parece que poco eficaz pero lo importante en esta sesión es que la estructura del contenido permite indexar perfectamente al navegador y al buscador el contenido de nuestra página web cuando lleguemos a css no trabajaremos con nada de la semántica pero trabajaremos con la presentación visual de la página web para repasar todo lo que hemos hecho y atarlo dentro de un ejercicio voy a sacar y cerrar todos estos ejemplos voy a ir a proyecto y dentro del proyecto voy a crear una pequeña estructura de proyecto voy a hacer un sitio web que tenga una página principal la página principal es una muy buena recomendación que se llame index html y aquí voy a hacer un archivo nuevo llamado sobre nosotros html otra otro archivo nuevo llamado servicios donde defino los que servicios se dan en esta página web otra otro archivo nuevo llamado noticias punto 7 ml y por último el clásico contacto punto html esta es este es el esqueleto de mi sitio web entonces los archivos que va a usar mi sitio web así que me voy a index suelo empezar por index es la página principal es la primera que tenemos que empezar a trabajar y creo un dock type html a continuación en etiquetas html creo un gel y creo un boli dentro del gel cree un título y dentro del body os lo recordáis creó un header creó una sección no es la única manera de hacerlo con sección pero es una buena manera y cree un futuro y dentro del título pues no se va a poner presente calculado aparte dentro del género pongo otra vez se suele repetir josé vicente carta la y voy a hacer un menú de navegación recordamos que el menú de navegación iva entre etiqueta snap y recordamos también que yo recomiendo poner el volumen de navegación en una lista ordenada con ordenada mira la lista de navegación yo diría que es casi obligatorio debe representar cada una de las páginas que tengan nuestro sitio web así que si mi página tiene si mi sitio web tiene estas páginas uno será el inicio otro será noticias otro será nosotros otros serán servicios y otro será contacto para que desde cualquier página se pueda ir a cualquier otra página y además no sólo esto sino que recordamos lo que hemos visto de nada con lo que hemos visto de huele con lo que hemos visto de navegación por enlaces a hr cuidado y esto que es todo h red index.html qué hago con esto lo que hago es convertir la lista hay ver vínculo noticias nosotros y servicios y contacto que no se nos olvide cerrar cada etiqueta con la etiqueta de cierre correspondiente y ahora en el futuro pongo copyright 2011 spirit no varias veces mi nombre con lo cual en lo que está haciendo es favorecer la indexación pero no de nombre en artificial sino de manera natural si ahora cojo esto lo guardo y me voy al proyecto y abro el index en el index de hinojo sección de carátula y el inicio noticias veis como son enlaces es un menú de navegación es una lista no ordenada y a la vez son enlaces y no pasa nada y ahora lo que hago es lo siguiente me copió esta estructura pues la selección todas me la copio y la pegó en cada una de las páginas porque porque esa estructura me sirve de plantilla me vaya a la página que me vaya siempre voy a querer ver la cabecera el pie de página y el contenido vacío porque ahora lo que hago es personalizar el contenido en cada una de las páginas así que me voy a index y en sección pongo h1 bienvenido educada de entrar en este es el contenido de la página inicial la de contacto aquí mira un formulario de contacto en noticias aquí miran las noticias en servicios aquí te cuento lo que hago y tenía alguna más creo sobre nosotros aquí te cuento pienso y ya está estos son los deberes si ahora guardo guardo guardar todos porque cada uno que hemos hecho hemos hecho modificaciones tengo cinco páginas lo veis al contacto no está guardado para sí tengo cinco páginas si esto lo pruebo index este es el contenido de la página principal si pincho en noticias aquí irán las noticias si pincho en nosotros nosotros no existe a ver nosotros nosotros sobre nosotros sobre sobre nosotros sobre nosotros en nosotros espera que actualice para que se dé cuenta del cambio vale atención mira esto es interesante si actualizo una cosa tengo que copiar y pegar los cambios en cada una de las páginas porque en el resto de páginas el programa así que pensando que quiero ir a nosotros quizás me hubiera sido más sencillo renombrar el archivo verdad pero bueno nosotros para hacerlo nosotros guardar noticias contacto y ahora si voy a la página web hoy al inicio con inicio noticias aquí irán las noticias cuando si se me ha escapado nosotros aquí te cuento quién soy servicios aquí te cuento lo que hago y contacto adquiera un formulario de contacto y podéis en cualquier momento saltar desde cualquier página hasta cualquier página básicamente lo único que quiero que hagáis para la siguiente sesión es crear una estructura básica de una web tal que tenga una cabecera tenga un contenido tenga un futuro y tenga un menú de navegación con el que se pueda ir pero una parte a otra de la página

Deja una respuesta

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