Diseño Web Con Html5 Y Css3 - G Sanchez Cano.pdf e4z4u

  • ed by: Marcos Ramos
  • 0
  • 0
  • April 2022
  • PDF

This document was ed by and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this report form. Report 2z6p3t


Overview 5o1f4z

& View Diseño Web Con Html5 Y Css3 - G Sanchez Cano.pdf as PDF for free.

More details 6z3438

  • Words: 7,529
  • Pages: 218
indican el inicio y el f inal de una página web. Cada marca que abrimos deberemos cerrarla después. Todo lo que se encuentre entre las marcas y será el contenido de la página web. Con las marcas indicamos cómo estarán colocados los textos dentro de la página. El nav egador interpreta las marcas para luego presentar la página en la pantalla del ordenador. Allí aparecerán contenidos como textos e imágenes pero no las marcas. Por

ejemplo, las siguientes marcas hacen que aparezca el título en la barra del nav egador: Maratón de Río o1c6l

Aparece el texto Maratón de Río pero no las marcas y 5wnc

1.7. Inicio del proyecto Antes que nada debemos def inir la estructura de las carpetas en las que v amos a guardar los archiv os del sitio web del Maratón de Río. A cada carpeta le asignaremos un nombre que atenderá a su contenido o propósito. Por ejemplo, necesitaremos una carpeta para guardar nuestros archiv os html, otra para guardar las imágenes y otra más para guardar los v ideos. Ejecuta los siguientes tres pasos para crear la estructura de carpetas del proy ecto. • Abre la carpeta ‘Mis documentos’ y crea la carpeta ‘maraton’. Escribimos los nombres de las carpetas sin acentos para ev itar problemas de compatibilidad en los distintos nav egadores. En esta carpeta v amos a guardar nuestras páginas web y nuestras hojas de estilos. • Abre la carpeta ‘maraton’ y crea la carpeta ‘imagenes’. En esta carpetra v amos a guardar las imágenes de nuestro sitio. • Dentro de la misma carpeta ‘maraton’ crea la carpeta ‘v ideos’. En esta carpeta v amos a guardar los v ideos de nuestro sitio. En la siguiente f igura v emos la estructura deseada del proy ecto. La idea es simplemente el trabajar más estructuradamente separando las páginas web de las imágenes y de los v ideos. Figura 4 Estructura de las carpetas del proyecto

Los nav egadores pueden interpretar dif erentes tipos de documentos. El primer elemento de la página es , el cual def ine el tipo de documento. Con este elemento le decimos a los nav egadores que este es un documento html, o sea una página web. Una v ez que el nav egador identif ica el documento, prosigue a leer e interpretar cada elemento y a mostrar su contenido en la pantalla. Elemento En la segunda línea del ejercicio 1 v emos el elemento . Con excepción del elemento escribiremos todos los demás elementos con letras minúsculas. Algunos de estos elementos pueden contener atributos. En este caso, nuestro elemento contiene el atributo lang= " es " . A todo atributo le asignamos un v alor escrito entre comillas. En este caso al atributo lang , (lenguaje), le asignamos el v alor " es " . Con esto indicamos al nav egador que el contenido de esta página será en español.

1.10. Elementos anidados con sangrías En el ejercicio 1, lo primero que salta a la v ista es la manera en que escribimos los elementos anidados. Un elementoanidado es aquel que está contenido dentro de otro. En este caso, contiene a los elementos y , para indicarlo escribimos y precedidos de una sangría. Es decir, escribimos el elemento anidado con una sangría en relación al que lo contiene. El elemento contiene a su v ez los elementos <meta> y los que también escribiremos después de una sangría. <head 5y3z5y <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Maratón de Río

El uso de sangrías es una ay uda puramente v isual y no tiene ningún ef ecto en la presentación f inal de la página. Al usar sangrías de esta manera se v en f ácilmente en nuestro script cuales son los elementos que contienen a otros. Todos los elementos deben abrirse y cerrarse en el orden correcto. Por ejemplo, el que esté contenido debe cerrarse dentro del elemento contenedor. En la siguiente f igura v emos una ilustración de cómo cerrar correctamente un elemento contenido. Figura 6 Elementos anidados

<meta name="description" content="tus comentarios y sugerencias">

Elemento <meta name="keywords"> Para especif icar una lista de palabras clav es que describen la página usamos el atributo name="keywords": <meta name="keywords" content="Maratón de Río, inscripciones, resultados">

Elemento <meta http-equiv="refresh"> El atributo http-equiv="refresh", que no utilizamos en el ejercicio, especif ica el lapso de tiempo, medido en segundos, en que esta página será nuev amente actualizada. También indica un enlace que se ef ectuará automáticamente después de un lapso especif icado. Por ejemplo, en una página de introducción, después de diez segundos se ef ectuará un enlace con otra página: <meta http-equiv= "refresh"content="10;url=http://sitioweb.com"/>

Elemento Cada página contiene un elemento 1iv6z que identif ica la página en la parte superior del nav egador. En el ejercicio prev io hemos asignado a la página index.html el título “Maratón de Río”. Elemento <! 435f5v - para comentarios --> A v eces es necesario aclarar o comentar algunos elementos en nuestras páginas y lo hacemos por medio del elemento comentario. Estos comentarios son, por ejemplo, notas en las que explicamos un proceso o una estructura complicada a otros diseñadores web. Todo comentario debe iniciarse con la marca <!-- y cerrarse con la marca -->. Por ejemplo: <!—inicio de la página home -->

Maratón de Río 1p2k45

Maratón de Río 1p2k45

Maratón de Río 1p2k45

Maratón de Río 1p2k45
Maratón de Río 1p2k45


w

://

tp

ht ux .fi

w

w c y. om

1.15. ¿Qué es el atributo class? Para que un estilo sea aplicable a distintos elementos es necesario colocarlos a todos dentro de la misma clasif icación. En nuestro ejercicio hemos creado el elemento
para encapsular al logotipo, este estará compuesto de tres subelementos
con el atributo class= " logotipo" . Así podremos asignar atributos en común a los tres elementos
. Luego, también damos a cada
su propio id= , logorojo, logoazul y logoverde. De esta manera podremos asignarles atributos por separado. Elemento <span> El elemento <span> (extensión) se usa a niv el de textos y nos sirv e para seleccionar e identif icar una parte de un texto. Aquí lo hemos utilizado para marcar parte del nombre de la ciudad: <span class="ciudad">Río de Janeiro

En la siguiente f igura hemos abierto index.html con el nav egador Chrome y v emos el resultado del ejercicio 5: un encabezado o nombre del sitio web y un logotipo con el nombre de la ciudad que organiza el maratón. En el caso de que no consigas este resultado, revisa nuevamente y corrige tus códigos. Los errores más comunes del principiante son el no cerrar correctamente las marcas. Este tipo de errores nos dan como resultado una pantalla en blanco. Figura 7 Resultado del ejercicio 5

1.16. Práctica 1 Al f inal de cada capítulo v as a realizar algunas prácticas. En ellas, además de crear el sitio web del Maratón de Río, también elaborarás el sitio para otro maratón. Consulta con tu docente, elige una ciudad y elabora el sitio web para el maratón de esa ciudad. Por ejemplo, para el maratón de Nuev a York o de París. Al iniciar este ejercicio comienza a escribir el index.html para el maratón de tu ciudad. El resultado de la práctica 1 deberá ser algo parecido a la f igura anterior.

2.

Introducción a CSS3

CSS son las siglas de Cascading Style Sheets, que se traduce como Hojas de Estilo en Cascada. Estas hojas de estilos son archiv os en los que codif icamos los atributos v isuales que asignamos a los elementos de una página web. La idea f undamental es poder separar la parte semántica de la parte de diseño de tu página web. Así def inimos los estilos de un elemento una sola v ez y los podemos aplicar, como si estuv ieran en cascada, a otras páginas web que contengan este mismo elemento. Al f inal de este capítulo podremos v er el resultado que ahora mostramos en la siguiente f igura: Figura 8 Resultado del capítulo: diseño de la pancarta y logotipo

2.1. Evolución de CSS Las primeras hojas CSS aparecieron como respuesta al descontento que mostraban los diseñadores web con el uso de marcas HTML para def inir estilos v isuales. Así, a partir de la v ersión 1 CSS , que en 1996 elaboró el Grupo de Trabajo Especializado en CSS del Consorcio W3C, se f ueron separando estos dos aspectos (el semántico y el de diseño). Entonces, por primera v ez los diseñadores pudieron def inir la posición, f uente y tipo de letra de los elementos de una página web. En may o de 1998 CSS2 puso f in a las distintas interpretaciones de CSS que existían ente los nav egadores Nestscape e Internet Explorer. Hoy en día CSS3 nos of rece v arias opciones av anzadas con posibilidades gráf icas tales como sombras, esquinas redondas, múltiples f ondos, transparencias y animaciones.

2.2. Diseño de la pancarta y del logotipo En el capítulo anterior hemos completado las marcas de la pancarta y del logotipo de la página index.html. En este capítulo continuamos con el diseño de estos elementos. Para esto v amos a crear otro archiv o estilos.css que v a ser nuestra hoja de estilos CSS.

2.3. Sintaxis de CSS Cada declaración en una hoja de estilos obedece la siguiente sintaxis: selector {atributo: valor;}

como podemos v er, una declaración consiste de dos partes: selector { atributo : v alor ; } 1. El nombre del selector o elemento HTML al que deseamos otorgar atributos v isuales. 2. El par atributo : v alor que queremos asignar al elemento. En el lugar del selector escribimos el nombre del elemento html (sin sus cuñas <>) que deseamos seleccionar. Luego escribimos entre las llav es { } el par atributo:valor seguido por un punto y coma. Un selector puede contener uno o más de estos pares. Cada par termina con un punto y coma.

2.4. Selección de elementos Para crear estilos, primero hay que seleccionar uno o más elementos en una hoja de estilos. Con este f in usamos el selector , que es simplemente el nombre o nombres de los elementos a seleccionar. A continuación v emos un ejemplo de cómo elegir v arios elementos HTML para asignarles atributos y v alores v isuales: Aquí mostramos otra v ez la sintaxis: selector { atributo : v alor ; } Aquí aplicamos la sintaxis: h1 { text-color: black; text-align: center; }

Si deseamos seleccionar el elemento

existente en una página web simplemente escribimos este elemento h1 sin las cuñas en la posición del selector. En este ejemplo seleccionamos desde nuestra hoja de estilos todos los elementos 6f491z

y les otorgamos el atributo text-color (color del texto). Al atributo text-color le asignamos el v alor black(negro). El resultado será que todos los encabezados 1p2f66

serán presentados en color negro. Además declaramos el atributo textalign (alineación del texto) como center (centrado) esto causa que todos los encabezados 4d5u4h

aparezcan centrados. 2.5. Selección de #id Para seleccionar un elemento único utilizamos el símbolo # seguido por la id. Por ejemplo, en la página index.html hemos marcado el elemento <section id="contenido"> En la hoja de estilos podemos seleccionar específ icamente este elemento por medio de su id="contenido". Logramos esto de la siguiente manera: Aquí mostramos nuev amente la sintaxis: selector { atributo : v alor ; } Aquí aplicamos la sintaxis: #contenido { width: 800px; } Hemos seleccionado el elemento <section> específ icamente el elemento con la id="contenido" simplemente escribiendo el símbolo # y contenido en el lugar del selector y le hemos otorgado el atributo width . A este atributo le hemos asignado el v alor de 800px. En otras palabras, le hemos dado una dimensión de 800 pixeles de ancho. 2.7. Los atributos width: y height: Con los atributos width (anchura) y height (altura) def inimos las dimensiones en pixeles de la presentación de un elemento en la página web. Por ejemplo: #contenido { width: 800px; height: 200px; } En este caso hemos otorgado dos atributos al elemento <section id="contenido">. v entana margin-right:auto margen derecho ajustable a la v entana margin-bottom margen inf erior de 20 pixeles padding-top:15px relleno superior de 15 pixeles entre el borde superior y el contenido de <section> padding-left:15px relleno izquierdo de 15 pixeles entre el borde izquierdo y el contenido de <section> box-shadow:4px sombras 2.12. Notación de colores CSS nos of rece tres maneras de declarar colores: con números decimales, con números hexadecimal y con porcentajes. La manera más común de declarar colores en una página web es usando el sistema hexadecimal. El sistema hexadecimal es un sistema numérico basado en los dieciséis dígitos (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). No v amos a abordar el tema hexadecimal ahora, lo importante es v er cómo v amos a emplear este sistema para crear combinaciones de los tres colores básicos, usando el atributo rgb. Atributo rgb: El atributo rgb nos pide v alores de los tres colores primarios para mezclarlos: rgb(rojo,verde,azul) Los v alores pueden ir desde 00 hasta FF en el sistema hexadecimal, o desde 0 hasta 255 en el sistema decimal. Por ejemplo, observ a el siguiente código para el color azul: rgb(00,00,FF) signif ica: cero rojo, cero v erde y el v alor máximo azul. Ahora bien, si mezclamos un azul con un poco de v erde de la siguiente manera: rgb(00,66,FF) nos da como resultado un azul v erde como podemos v er en la siguiente tabla con códigos hexadecimales para los colores primarios, secundarios y terciarios. 2.13. Declaración de sub elementos Hasta ahora hemos declarado estilos para los siguientes elementos: #contenido #contenido header #contenido header #pancarta El primer caso es una declaración para el elemento <section id="contenido">. En el segundo caso es un sub elemento del elemento "contenido" . El último caso es una declaración para el elemento que a su v ez es un sub elemento de . La declaración misma especif ica la posición de los elementos: #contenido header #pancarta Atributo background En el ejercicio prev io asignamos el atributo background al elemento . Este atributo puede contener las siguientes opciones: background-color color de f ondo background-position posición de f ondo background-repeat repetición de f ondo background url url de f ondo Con la opción color asignamos un color de f ondo para el elemento. Con la opción position especif icamos la posición de la imagen de f ondo. A este atributo podemos asignarle uno de los siguientes v alores: top alto center centro bottom bajo top left alto izquieredo top center alto centrado top right alto derecho bottom left bajo izquierdo bottom center bajo centrado bottom right bajo derecho En nuestro caso centramos la pancarta de la siguiente manera: background-position center; Con la opción repeat (repetir) especif icamos si deseamos repetir la imagen hasta cubrir todo el espacio del elemento. En nuestro caso tenemos una imagen suf icientemente grande para llenar el espacio y no es necesario duplicar la pancarta, por lo tanto escribimos: background-repeat:no-repeat; 2.14. Qué es URL? Existe una manera de localizar cualquier documento o recurso dentro de la Web. Para esto contamos con el URL, que son las siglas de Uniform Resource Locator, que signif ica Localizador Unif orme de Recursos. Un URL es una dirección que permite acceder a un recurso o documento dentro de la Web. La f orma general del URL es: protocolo ://dominio/directorio/documento Un protocolo es un conjunto de normas establecidas para la transf erencia de inf ormación entre dos ordenadores. En este caso usamos http, que es el protocolo para la transf erencia de páginas web. Un dominio es un nombre reserv ado que identif ica a un ordenador o serv idor dentro del Internet. Por ejemplo: http://google.com Con la opción url especif icamos entonces la carpeta y el nombre de la imagen que v amos a utilizar como f ondo del elemento . En cualquier caso v as a trabajar una imagen como pancarta o también puedes descargar cualquier imagen de la Web para usar como pancarta. En el ejercicio anterior hemos especif icado que la imagen de f ondo se localiza en la carpeta imagenes y se llama pancarta.png background: url(imagenes/pancarta.png); 2.15. Atributos de textos Para crear un may or contraste entre la pancarta y el nombre del sitio web aplicaremos algunos atributos al elemento . Comenzando con el color del texto blanco y una sombra que será negra. Ejercicio 10 Abre estilos.css y agrega los siguientes estilos al elemento . #contenido header hgroup h1 { color: rgb(255,255,255); text-shadow: 4px 4px 10px rgba(0, 0, 0, 1.0); font: cerif; font-size:40px; font-weight: bold; text-align: center; } Atributo font Utilizamos el atributo font (f uente) para def inir la f uente y el estilo de las letras que se encuentran dentro de un elemento. Las f uentes que generalmente se pueden utilizar con todos los nav egadores son las siguientes: Figura 14 Fuentes y estilos de la Web. página web usamos puntos (pt). Las medidas en porcentajes y múltiplos son medidas que se expresan en relación al tamaño del elemento paterno. Por ejemplo: body {font-size : 10px;} body h1 {font-size : 2 0em;} body h2 {font-size : 50%;} El elemento es el elemento paterno con letras de un tamaño de 10 pixeles . Las letras delelemento adquiere el doble 2 0em del tamaño de las letras del elemento paterno, o sea 20 pixeles. El elemento adquiere 50% del tamaño del elemento paterno, o sea 5 pixeles. Atributo font-weight Cuando utilizamos el atributo f ont-weight (peso de la f uente) lo hacemos para especif icar el grosor de las letras. Las opciones que tenemos son: normal normal bold negritas bolder obscuro lighter claro Figura 15 Resultado del ejercicio 10. position:relative; top:-90px; left:-50px; Si deseamos una posición relativ amente más baja que la original, entonces es necesario asignarle v alores positiv os. Position absoluta Por otro lado, si def inimos la nuev a posición de un elemento en términos absolutos, entonces decimos que ésta es absoluta con respecto al marco del elemento o sea, de la v entana del nav egador. Por ejemplo: position:absolute; top:90px; left:50px; Esta posición absoluta implica la colocación f ija de 90 pixeles desde el borde superior del nav egador y 50 pixeles desde el borde izquierdo del nav egador. izquierda a derecha y 50px de arriba hacia abajo. transform: translate(100%,50px); Desplazamos al logotipo v erde -100pxde derecha a izquierda y 0px de arriba hacia abajo. transform: translate(-100px,0px); Y por último, asignamos al logotipo azul una rotación de 360deg, o sea de 360 grados. transform: rotate(360deg); El ef ecto logrado es que al pasar el ratón sobre los logotipos se activ a la animación. #cápsula:hover #logorojo{ La acción de pasar el ratón sobre un elemento se llama hover (f lotar). Veremos este atributo detalladamente en la página # 53 donde trataremos las ‘pesudo clases’. Figura 18 Resultado de la animación del logotipo. 2.18. Práctica 2 En esta práctica v as a diseñar un logotipo personal para tu propio maratón. El logotipo debe tener por lo menos tres capas superpuestas. Juega con combinaciones de colores y experimenta con distintas animaciones. 3.1. Listas HTML nos of rece dos tipos de listas para ordenar la inf ormación en una página. Las listas pueden ser listas ordenadas o también listas de v iñetas. Listas ordenadas En algunas ocasiones tendremos la necesidad de resumir la inf ormación en una lista ordenada, por ejemplo, al enumerar los pasos a seguir para realizar una operación. Para esto contamos con el elemento . Las siguientes marcas… Diseño web Programación web Arquitectura web … generan el siguiente resultado: una lista ordenada con tres ítems : 1. Diseño web 2. Programación web 3. Arquitectura web Items Una lista ordenada se compone de ítems. Especif icamos cada ítem dentro de una lista con la marca . Los ítems adquieren automáticamente su numeración. Listas de viñetas En otras ocasiones tendremos la necesidad de resumir la inf ormación de un texto. Utilizando v iñetas podemos destacar sus puntos más importantes. Para esto contamos con el elemento . Las siguientes marcas … 3.2. Práctica 3 Para esta práctica v as a crear las marcas de tu propia nav egación. Piensa desde ahora en cuál v a a ser la inf ormación relev ante y en cómo v as a organizar esta inf ormación en las distintas páginas web. border-top: double 3px #8e8e8e; Con la opción border-radius podemos redondear las esquinas de los bordes de los elementos. Atributo float. El atributo float (f lotar) sirv e para alinear elementos a la izquierda o derecha. float-left f lotar a la izquierda float-right f lotar a la derecha En el ejercicio hemos alineado todos los elementos de la nav egación hacia la izquierda. #contenido header nav ul li{ float:left; padding-left 60px; list-style-type none; } Es como si a cada elemento le aplicáramos un imán hacia la izquierda, primero el ítem Inicio, seguido por Inscripciones, Prensa y f inalmente o. Todos estos elementos tienden a alinearse hacia la izquierda como si estuv ieran en cadena. Atributo list-style-type. Por último, en el ejercicio 17 v imos el atributo list-style-type. Este atributo sirv e para asignar estilos a nuestras listas. Al asignarle el v alor none (ninguno) logramos presentar las v iñetas sin estilo, para que los puntos de las v iñetas desaparezcan. Este atributo, además de la opción none , tiene las siguientes opciones: su totalidad. Aquí nos v olv emos a encontrar con el atributo transition. Se trata de una transición con la duración de 1 0s, o sea un segundo. transition:all 1.0s ease-in-out; Deseamos una transición que consista en intercambiar el color del texto y el color del f ondo. Queremos que la transf ormación sea activ ada con el ratón y por eso necesitamos la transición (ease-in-out). 3.5. Práctica 4 En esta práctica v as a crear los estilos de tu nav egación. Experimenta nuev amente con colores y con distintos tipos y tamaños de letras. Piensa en algún ef ecto que ay ude al a saber en cada momento en qué página web se encuentra. 4. Contenido principal Cada página del sitio web debe especializarse en un tema. No es conv eniente poner en una página todo tipo de inf ormación sin ninguna estructura, pues entonces, al se le dif icultaría encontrar alguna inf ormación específ ica y terminaría por f rustrarse. Al f inal de este capítulo obtendremos el siguiente resultado: Figura 21 Resultado de este cap tulo. 4.2. Estilos de textos en línea Contamos con algunos elementos de estilos en línea, estos los escribimos pegados al texto y actúan sobre partes indiv iduales del documento, sin inf luir en el resto de la página. La siguiente lista muestra los estilos de textos en línea: strong negrita em cursiv a mark marcación abbr abrev iarción Elemento <strong> Usamos el elemento <strong> para mostrar textos con el estilo negrita. Por ejemplo, las siguientes marcas: Las NU han decretado el <strong>Artículo XX. generan el siguiente texto: Las NU han decretado el Artículo XX. Elemento <em> El elemento <em> se utiliza para enf atizar un texto con el estilo cursiv as. Por ejemplo, las siguientes marcas: Las NU han decretado el <em><strong>Artículo XX. generan el siguiente texto: Las NU han decretado el Artículo XX. Elemento <mark> 4.3. Práctica 5 En esta práctica v as a escribir un artículo principal sobre tu propio sitio web. Asegúrate de utilizar todos los estilos en línea sobre tus textos. 4.5. Práctica 6 Busca y recopila, o en todo caso inv enta inf ormación sobre el maratón que crearás, en ella debes explicar los objetiv os de tu sitio web. Además, darás datos sobre la entidad organizadora. Con esta inf ormación v as a diseñar el artículo principal del sitio web. 5. Contenido comercial Muchos sitios web reserv an espacio para la comercialización dentro de sus páginas. Este puede ser, por ejemplo, un lugar donde otras empresas con f ines comunes puedan anunciarse. Este espacio se puede v ender por medio de Google o del mismo sitio web a entidades interesadas. Para lograrlo, HTML5 cuenta con el nuev o elemento . 5.1. Objetivo del capítulo Al f inal de este capítulo habremos logrado el siguiente resultado: Figura 25 Resultado del capítulo. 5.5. Práctica 7 En esta práctica v as a crear un espacio para contenido comercial. En primer lugar v as a colocar un objeto v ideo con sus conv ersiones. En segundo lugar v as a crear dos comerciales para completar tu espacio del elemento . 5.7. Práctica 8 En esta práctica v as a crear el diseño del contenido comercial. Trata de crear un diseño sobrio para que los comerciales no distraigan mucho del contenido principal. El resultado deberá ser algo así como la f igura # 25 de la página 60. 6. Contenido complementario A nuestra página web le podemos añadir uno o más elementos <article> con inf ormación complementaria al contenido principal. En nuestro caso deseamos agregar una galería con f otos de los mejores corredores del maratón. 6.1. Objetivo del capítulo Al f inal de este capítulo habremos logrado el resultado que podemos v er en la siguiente f igura: Figura 26 Resultado del capítulo. 6.3. Símbolos especiales en HTML HTML ha desarrollado un Character Entity Encoding para la codif icación de símbolos especiales como los de las monedas euro, libra esterlina y y en. También existen símbolos para copy right y marcas registradas. Todos ellos se pueden identif icar de dos f ormas: por sus nombres o por sus códigos numéricos. Enseguida v emos una tabla con los símbolos más comunes y sus códigos correspondientes. 6.4. Práctica 9 En esta práctica v as agregar contenido complementario a tu página web, por ejemplo, una galería de f otograf ías del maratón. No olv ides terminar tu página con el elemento y con tu f irma de diseñador en su parte inf erior. 6.6. Práctica 10 En esta práctica v as a crear estilos para tu galería. El resultado deberá ser algo así como el de la f igura # 26 en la página # 76. 7. La página Inscripciones Sin olv idar que un sitio web debe tener un diseño atractiv o con lugar para imágenes, sonido, v ideos y animaciones, proseguimos en este capítulo con la creación de la segunda página de nuestro sitio web: la página Inscripciones. En ella el podrá inscribirse para participar en el próximo maratón. 7.1. Objetivo del capítulo Al f inal de esta sección habremos logrado el siguiente resultado: Figura 28 El formulario de inscripciones. Ya que todo sitio web debe tener un diseño unif orme y consistente, la página Inscripciones adquiere elmismo layout de la página Inicio. Es decir, que tendrá la misma pancarta y logotipo, así como la misma nav egación e idéntico contenido comercial. De hecho lo único que hay que cambiar es la nav egación y el artículo o contenido principal. En esta página, el contenido principal es un f ormulario de inscripciones. En otras palabras, lo único intercambiable de las páginas es el contenido principal.15 km 8 km En el elemento <select name="inscripción"> especif icamos el nombre del menú como "inscripción". Elemento Para agregar opciones al menú utilizamos el elemento . Por ejemplo: Maratón completo aquí especif icamos que una de las opciones a elegir es Maratón completo y que el v alor de esta elección es "maratón". Elemento Un menú resulta práctico en la may oría de los casos, pero hay ocasiones en que tenemos listas muy largas de opciones para escoger. En estos casos un menú es inef icaz pues las opciones son demasiadas. Entonces es conv eniente usar el elemento (lista de datos). El elemento nos muestra solamente una sub lista de opciones. Por ejemplo, v eamos la siguiente lista de datos: País ... Si por ejemplo, escribimos la letra b, nos muestra solamente las opciones que comienzan con la letra b, por ejemplo: Belice Boliv ia Brasil Pero es perf ectamente aceptable escribir otro país que no esté en la lista, por ejemplo ‘Bélgica’. La dif erencia principal entre <select> y es que el menú de <select> tiene una lista predeterminada de opciones, mientras que el menú de acepta datos que no f orman parte de la lista de datos. Elemento Utilizamos este elemento para asegurarnos de que el escriba v alores numéricos dentro de un rango específ ico entre un mínimo y un máximo. Clasificación Elemento Un campo de entrada es suf iciente para escribir datos como por ejemplo nombre y apellidos. Pero a v eces es necesario pedir más inf ormación, como por ejemplo un comentario. En estos casos utilizamos el elemento <textarea> de la siguiente manera: <label for="comentarios">Comentarios</label> <textarea cols="35" rows="4" name="comentarios" id="comentarios" placeholder="Comentarios o información adicional."> Los atributos cols= y rows= sirv en para especif icar las dimensiones del elemento. En este caso mide cuatro líneas por 35 caracteres. Elemento Un f ormulario en línea debe tener al f inal un botón para env iar los datos al serv idor web de la organización. Por ejemplo: el atributo value="Enviar" especif ica el texto que debe aparecer en el botón. 7.4. Práctica 11 En esta práctica v as a crear un f ormulario en línea para registrar a todos los participantes de tu maratón. El resultado deberá ser algo parecido al f ormulario que creamos en los ejercicios prev ios. 7.5. Diseño de la página Inscripciones Gran parte del diseño de la página Inscripciones será aplicado en cascada, es decir, tendremos la misma distribución de elementos que tiene la página Inicio. Los únicos elementos nuev os serán todos los correspondientes a los f ormularios en línea. En la siguiente f igura v emos el resultado que ha de lograrse al terminar esta sección. Figura 30 Diseño del formulario de inscripciones. 7.6. Práctica 12 Para esta práctica v as a crear estilos de tu propio f ormulario en línea. El resultado f inal deberá ser algo parecido al que v emos en la f igura # 30, que se encuentra en la página # 94. 8. La página Prensa Nuestro sitio web debe contener una página de Prensa en la que v amos a mostrar artículos que y a ha publicado la prensa o los distintos medios de comunicación. 8.1. Objetivo del capítulo La siguiente f igura muestra el resultado que nos proponemos crear en este capítulo. Figura 34 Resultado del capítulo.Record Personal País . . . . . . Elemento Con el elemento (renglón de tabla) creamos un renglón de la tabla. En el ejemplo anterior lo hicimos con las cinco columnas. Elemento Con el elemento (nombre de columna) nombramos a las columnas que deseamos tener en la tabla. Elemento Con el elemento (pie de tabla) describimos inf ormación adicional sobre los datos de la tabla. Por ejemplo: Lugar Nombre Tiempo Record Personal País Los mejores diez corredores . . . Atributo colspan Con el atributo colspan (abarcar) podemos indicar que una celda abarca más de una columna a lo ancho. En el ejemplo prev io hemos indicado que el elemento ocupa cinco columnas a lo ancho. Los mejores diez corredores Elemento Dentro del elemento (cuerpo de tabla) agrupamos todos los renglones de la tabla. Por ejemplo: Lugar Nombre Tiempo Record País Los mejores diez corredores 1 Gebre Gebrmariam 02:08:14 <span class="check"> Etiopía Elemento 8.4. Práctica 13 En esta práctica v as a crear una página Prensa con distintos reportajes que f inalizarás con una tabla similar a la del ejercicio prev io. 8.5. Diseño de la página Prensa Ya que en la página prensa tenemos reportajes de distintos medios de comunicación, con f uentes que v an desde YouTube hasta reportajes locales, es importante que la página adquiera un diseño lo más unif orme posible. En la siguiente f igura v emos el resultado del diseño de la página Prensa: Figura 37 Resultado del diseño de la página Prensa. 8.6. Práctica 14 En esta práctica v as a crear el diseño de la página Prensa. Sobre todo v as a experimentar con los elementos de diseño de tablas. 9. La página o Todo sitio web debe contener una página de o. Aunque pueda parecer que esta página no es importante, sirv e una f unción básica: es la única v ía de o directo del web master o encargado del sitio web con los s, cuy as opiniones o sugerencias son muy importantes para el sitio. 9.1. Objetivo del capítulo En la siguiente f igura v emos el resultado f inal de esta sección: Figura 39 Resultado del diseño de la página o. 9.4. Diseño de la página o. Al aplicar los diseños en cascada que y a hemos creado para el f ormulario de la página Inscripciones, obtenemos como resultado el diseño de la página o. 9.5. Práctica 15 En esta práctica v as a desarrollar una página de o para tu propio maratón. ACERCA DEL AUTOR Gabriel Sánchez Cano es maestro de diseño web en la ciudad de Ámsterdam. Esta experiencia lo ha llev ado a escribir v arios libros sobre programación y diseño web. Este libro es el primero de una serie sobre diseño y programación en español. Anteriormente f ue programador y diseñó parsers y compiladores. Actualmente reside en Holanda con su esposa y dos hijas. Related Documents Html5 Y Css3 June 2020 4 Html5 Css3 (!!!)y Javascript August 2020 0 Html5 Y Css3 May 2020 4 Html5 Y Css3 June 2022 0 Html5 Y Css3 Toc February 2023 0 Html5 + Css3 August 2021 0 More Documents from "Marcos Ramos" April 2022 0 Pcopy - Qb64 Wiki May 2023 0 Romanos - Joao Calvino.pdf July 2019 171 December 2020 0 Estudio De Socavacion Rio Palca.xls May 2021 0 Tren De Rodamiento February 2021 0 1z1251