Anuncio
Tabla de contenido
§1. Introducción
§2 – Comenzando con xHTML
§3 – Diseño con CSS
§4 – Más información
1. Introducción: ¿Qué es xHTML?
Bienvenido al mundo de XHTML - Lenguaje de marcado de hipertexto extensible - un lenguaje de marcado (similar a la programación) que permite a cualquiera construir páginas web con muchas funciones diferentes. En muchos sentidos, es el idioma principal de Internet.
¿Entonces, por qué nos preocupa?
Bueno, ¿nunca has querido tener tu propio sitio web? O hacer tu propio juego? El papel de esta guía es darle una idea de este poderoso mundo. Si tiene alguna experiencia previa en programación, entonces será más fácil, por supuesto, que si recién está comenzando su aventura de programación. De cualquier manera, espero explicar esto para que incluso un novato pueda entenderlo.
Nos preocupamos por xHTML porque es un buen punto de partida para aprender los componentes básicos de la web. Los sitios de redes sociales como Facebook, MySpace y Twitter usan otro lenguaje de programación (del lado del servidor) llamado PHP, pero es una buena idea comprender los conceptos básicos antes de sumergirse de lleno en la programación mundo. Esta guía trata sobre los conceptos básicos.
Si desea saber más sobre cómo funciona Internet o tal vez cómo funcionan las redes de computadoras con todo esto cosas técnicas o incluso cómo se pueden construir computadoras, pruebe estas excelentes guías de sus amigos en Hacer uso de:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Cómo construir tu propia PCEs muy gratificante construir su propia PC; además de intimidante. Pero el proceso en sí es bastante simple. Te guiaremos por todo lo que necesitas saber. Lee mas
//www.makeuseof.com/tag/everything-need-know-home-networking/ Todo lo que necesita saber sobre las redes domésticasConfigurar una red doméstica no es tan difícil como crees. Lee mas
//www.makeuseof.com/tag/guide-file-sharing-networks/ La guía MakeUseOf para redes de intercambio de archivos¿Alguna vez te has preguntado cuáles son las redes de intercambio de archivos más grandes que existen? ¿Cuáles son las diferencias entre BitTorrent, Gnutella, eDonkey, Usenet, etc.? Lee mas
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ La Guía de Windows 7: UltimateSi tiene miedo de actualizar desde Vista o XP porque cree que es completamente diferente a lo que está acostumbrado, debería leer esta nueva guía. Lee mas
//www.makeuseof.com/tag/download-how-the-internet-works/ Cómo funciona internetAhora podemos acceder a Internet desde las computadoras de nuestra casa, la oficina, las computadoras portátiles y nuestros teléfonos. Pero muchas personas todavía no están completamente seguras de qué es Internet y cómo funciona realmente. Lee mas
2. Comenzando con xHTML
En este capítulo aprenderá cómo crear y personalizar sitios web de muchas maneras diferentes, incluido el aprendizaje de cómo:
• Agregar imágenes a las páginas web.
• Crear y usar hipervínculos para navegar por páginas web.
• Configure listas de información utilizando puntos de puntos y demás.
• Crear tablas con filas y columnas de datos aleatorios y poder controlar el formato de dichas tablas.
• Cree y use formularios con los que realmente pueda tener alguna interacción.
• Hacer que las páginas web sean accesibles para los motores de búsqueda.
Todo esto se hará con la programación xHTML. ¿No lo crees? Sigue leyendo. Te sorprendería lo mucho que puedes aprender de una guía tan corta.
Antes de entrar en la parte de "codificación" de esta guía, necesitará algún software para poder editar, probar y, básicamente, desarrollar sus programas. Vaya a www.dreamspark.com y obtenga uno de los siguientes programas GRATIS, suponiendo que sea un estudiante:
• Microsoft Visual Studio 2010
• Expression Studio 4
Si no eres estudiante, también puedes usar Notepad ++, que puede obtener fácilmente de www.notepad-plus-plus.org
Una vez que obtenga uno de los programas y lo instale, puede comenzar su experiencia xHTML.
Es posible que esté utilizando una Mac o Linux en lugar de Windows; necesitarás encontrar un editor de texto eso te funciona en ese caso. Intente encontrar uno que le muestre el recuento de líneas y el código de colores.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - Un editor de texto ultra ligero [Linux] Lee mas
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - Un gran editor de código ligero para LinuxSorprendentemente, Linux no ofrece tantos buenos IDE (entornos de desarrollo integrado). Creo que esto se debe a que la mayoría de los programadores de Linux sacaron el viejo Bloc de notas (o gedit en este caso) y comenzaron ... Lee mas
Si prefiere no descargar ninguna herramienta dedicada, aún puede usar un editor de texto como Bloc o Wordpad. Sin embargo, los programas anteriores son herramientas mucho mejores para probar y diseñar, además de ayudarlo con su codificación, ya que le indica si comete un error o si está tratando de recordar la palabra correcta para utilizar. Simple es mejor, ¿verdad? Personalmente uso Notepad ++ y Microsoft Visual Studio, aunque he escuchado muchas cosas buenas sobre Expression Studio 4. Tendrás que decidir qué es lo que más te gusta, pero todos funcionan bien.
NOTA: Para probar un sitio web creado desde el Bloc de notas o Wordpad:
Con el archivo abierto, haga clic en Archivo >> Guardar como
Al final del nombre del archivo escriba.html y haga clic Salvar
Abra el archivo recién guardado (se abrirá en su navegador de Internet predeterminado)
2.1 Conociendo "el mundo"
Muy bien, aquí está el comienzo del viaje. Comencemos por poner algo en la pantalla de esta página web. Primero deberás saber qué son. El código XHTML usa etiquetas de inicio y fin para ordenar lo que sucede con cada elemento de la página.
Aquí hay un ejemplo de una etiqueta de inicio:
Aquí hay un ejemplo de una etiqueta final:
¿Ver la diferencia? Uno tiene el nombre del elemento encerrado entre corchetes puntiagudos y el otro es el mismo pero tiene una barra inclinada antes del nombre del elemento.
IMPORTANTE: Debe cerrar una etiqueta después de abrirla en algún punto del código. También las etiquetas deben estar anidadas, es decir, que no puede hacer lo siguiente:; debería ser. ¿Ves cómo encajan las etiquetas entre sí? Piense en ellos como cajas: no puede poner algo sólido en una caja y media.
La mejor manera de aprender a programar es hacerlo realmente, por lo que es suficiente teoría. Solo como punto de referencia, voy a etiquetar cada línea de código con un número para poder explicar línea por línea lo que está sucediendo.
En la línea 1 he indicado el código html y en la línea 5 lo he terminado. Dentro de etiqueta es el
). Si abre esto en un navegador web, verá lo siguiente en la pantalla:
Si desea cambiar el título de la página desde el punto de vista del navegador (p. Ej. firstpage.html), entonces puede agregar fácilmente la siguiente línea de código:
Esto hará que su página web se vea más profesional.
2.2 A partir de y trabajando por el
En la mayoría de los casos, dentro del etiqueta hay un
y un .los generalmente se usa para secuencias de comandos en CSS (Sección 3) y JavaScript (explicado en un próximo manual), mientras que el suele ser el contenido de la página.
Parte del contenido se puede cambiar utilizando las secuencias de comandos en
, pero el generalmente es el contenido que no se puede cambiar en la página. Un ejemplo sería una breve descripción del sitio web que está visitando.Puede realizar cambios en el formato del contenido utilizando CSS (Sección 3) en el
. Sin embargo, también puede realizar cambios en el formato en el .Un conjunto de etiquetas de uso común que se utilizan en el cuerpo son las fuentes de encabezado. Estas fuentes de encabezado varían en tamaño y fuerza / negrita. Solo vea por usted mismo a continuación:
2.3 ¿Su imagen vale más que mil palabras? - Imágenes
Hasta ahora, solo hemos hablado sobre el texto y lo que puede hacer en un sitio web, pero aún hay más. ¿Quiere que su sitio web se vea aún más atractivo que solo las fuentes elegantes? Intenta obtener algunas buenas imágenes para que tu sitio realmente brinde a la audiencia algo para mirar. Sin embargo, tenga cuidado con las leyes de derechos de autor; es mejor tomar sus propias fotos si tiene la intención de poner su sitio web en Internet.
Es posible que necesite usar Photoshop o algunas habilidades de imagen digital para crear una gran imagen o tal vez mejorar su propia imagen y hacer que se vea aún más increíble. Pruebe estas guías para obtener excelentes consejos e información:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Aprenda la edición de fotos en Photoshop: conozca los conceptos básicos en 1 horaPhotoshop es un programa intimidante, pero con solo una hora, puedes aprender todo lo básico. ¡Toma una foto que quieras editar y comencemos! Lee mas
• //www.makeuseof.com/tag/guide-to-digital-photography/ Una guía para principiantes a la fotografía digitalLa fotografía digital es un gran pasatiempo, pero también puede ser intimidante. ¡Esta guía para principiantes le dirá todo lo que necesita saber para comenzar! Lee mas
Los formatos de imagen más populares son los siguientes:
• GIF = Formato de intercambio de gráficos
• JPEG = Grupo Conjunto de Expertos en Fotografía
• PNG = Gráficos de red portátiles
Eche un vistazo al código a continuación y le explicaré a continuación qué significa; es decir, cómo agregar imágenes a su página web.
Como se enseñó en secciones anteriores, siempre comenzamos con y co etiquetas. Siguiente el
Después de abrir el párrafo en la línea 9, aquí es donde se insertan las imágenes en el sitio web. Para agregar una imagen / imagen debe usar para empezar. A continuación, debe sugerir dónde está el archivo. Por lo general, intentaría tener este archivo en la misma carpeta que los archivos del sitio web; de lo contrario, deberá ingresar la ruta de la carpeta en la que existe. En el caso anterior he usado
. Esto significa que la fuente (src) de la imagen reside en la misma carpeta y el nombre de ese archivo de imagen es Picture.jpg. Fácil verdad?
No tiene que agregar nada más que para crear una imagen con un alt propiedad, pero puede agregarle propiedades para realizar algunos cambios.
También conocido como texto alternativo, este valor de propiedad se muestra cuando coloca el mouse sobre la imagen.
Puede notar que en la línea 10 he comenzado la etiqueta con y terminó con />. Esta es otra forma de abrir y cerrar etiquetas. Esta es la forma habitual de crear imágenes porque puede elegir las diferentes propiedades de la imagen, como el ancho y la altura, como se muestra en el ejemplo anterior.
En las líneas 11 y 12 se inserta otra imagen, pero esto está usando el otro método para abrir y cerrar etiquetas. La línea 10 crea la imagen de una manera mucho más ordenada; use eso en lugar del método en las líneas 11 y 12.
2.4 Hipervínculos ¿a dónde pueden ir?
2.4.1 Moverse por "el mundo"
¿Quiere mostrar a sus amigos algunos sitios interesantes en su sitio web pero no sabe cómo? Has venido al lugar correcto, sigue leyendo ...
Eche un vistazo al código a continuación y vea si puede adivinar lo que estoy haciendo antes de explicarlo.
Así es, estoy creando hipervínculos a algunos sitios geniales y útiles. Básicamente, para hacer un hipervínculo a una determinada página web que tiene una dirección web, simplemente use la siguiente sintaxis:
[lo que quieres hacer un hipervínculo]
No parece muy difícil ¿verdad? Podría simplemente poner texto allí como el código de ejemplo anterior. Sin embargo, no hay ninguna razón por la que no pueda usar algo más como una imagen. Solo por un poco de información adicional: una URL es un Localizador Uniforme de Recursos, básicamente la dirección web.
2.4.2 Las imágenes te recuerdan dónde has estado y te llevan allí de nuevo
Aquí hay un ejemplo del uso de una imagen como hipervínculo:
Estoy seguro de que si lees las partes anteriores de esta sección, liberas que esto es simplemente mezclar la creación de imágenes e hipervínculos. La sintaxis está configurada para tener el hipervínculo en el exterior y la imagen en el interior, colocando un hipervínculo de la imagen insertada.
2.4.3 Tienes correo - Hipervínculos a una dirección de correo electrónico
Esto es simplemente una repetición de la última parte, pero si no ha estado prestando tanta atención, solo eche un vistazo al siguiente código:
En lugar de usar una URL (p. Ej. http://www.something.com) aquí estoy usando una dirección de correo electrónico que implica poner la siguiente sintaxis después del signo igual:
"Mailto: [youremailaddress]"
La línea 10 es el ejemplo básico de este concepto. Entonces, ¿a quién vas a enviar un correo electrónico? Cazafantasmas!
2.4.4 Desplazarse por su mundo: hipervínculos internos
Ahora puede ver cómo se movería por su propio sitio web. Esto se hace simplemente usando su nombre de archivo como URL. Por lo tanto, puede tener una configuración de sitios web como se muestra en el siguiente diagrama. La sintaxis que usaría sería algo así:
2.5 ¿Eres especial? Estos personajes son ...
Cuando escribe información que va a aparecer en el sitio web como contenido, es posible que deba poner algo como un símbolo como el símbolo de copyright: © o quizás un valor menor o mayor que símbolo. Pero como la sintaxis de codificación usa los símbolos normales, entonces tenía que haber otra forma de superar este pequeño obstáculo, y la solución fue usar un ampersand (&) y luego un código corto para decirle a la computadora qué símbolo meter en. A continuación se muestra una tabla con algunos ejemplos de caracteres especiales de la codificación:
Por ejemplo, podrías decir:
Hay
Hay <6 filas en la tabla anterior, pero> 2 filas
2.6 Listas, listas y más listas
Bien, ahora vamos a tener que organizar algunas cosas, como una lista de compras. Hay dos tipos de listas. Ellos son las:
• Lista ordenada (números, alfabetos, números romanos)
• Lista desordenada (viñetas)
Para una lista ordenada, usaría las siguientes etiquetas =
Para una lista desordenada, usaría las siguientes etiquetas =
Por ejemplo:
En el ejemplo anterior, incluí los tipos de lista ordenados y no ordenados. ¿Pero notaste qué más hice? También incluí una técnica llamada Listas Anidadas. Estas listas anidadas se pueden usar para representar relaciones jerárquicas, como la lista de ingredientes en Obtenga el paso de ingredientes de la receta anterior.
Puede ver que comencé la lista completa como una lista ordenada en la Línea 10 y la terminé en la Línea 23. En el medio verías el y Etiquetas que he usado. Estos denotan Artículos de la lista. Los elementos de la lista son las palabras que aparecen, como en la línea 21:
Si desea ir al siguiente nivel jerárquico de puntos o números de puntos, anide dentro de ellos de esta manera:
2.7 Tablas... no, no matemáticas
¿Es esto tan difícil como tus tablas de multiplicar? Por supuesto que no, si lo haces de la manera correcta. Si recién está comenzando con este concepto y supongo que sí, entonces generalmente es mejor dibujar la tabla que desea hacer en una hoja de papel como la que tengo a continuación:
Ahora míralo en el siguiente código:
Ahora mézclelos y la pantalla a continuación lo ayudará a comprender cómo está estructurada la tabla:
UN
y
en negrita la primera y la última fila respectivamente para llamar más la atención sobre esas partes de la tabla. La mayoría de la gente miraría primero el total en el pie de página de la tabla, ¿verdad?2.8 Formularios digitales (plumas)
Al navegar por la red, deberá interactuar con las páginas web que encuentre. Por ejemplo, en www.makeuseof.com necesitaría ingresar su dirección de correo electrónico como se indica a continuación para suscríbase al boletín y actualizaciones diarias de MakeUseOf. Después de ingresar su dirección de correo electrónico, presionaría Unirse y esto enviaría la información (su correo electrónico) en el cuadro de texto junto al botón a una base de datos o tal vez a otra dirección de correo electrónico. Formas están acostumbrados a hacer esto, que es lo que aprenderá en este capítulo.
A continuación se muestra un formulario que se utiliza para poner solo su nombre y hacer clic en Enviar o Claro:
Aquí está el código detrás de escena, que explicaré con más detalle en breve:
En primer lugar, lo más importante en el script anterior es la Línea 10. Este es el comienzo del formulario. El método generalmente es enviar o obtener. Bastante explicativo, pero enviar está enviando la información a algún lugar para hacer un registro, como una dirección de correo electrónico o una base de datos. Por ejemplo: publicar una pregunta en MakeUseOf Answers. Obtener, por otro lado, envía la información que ha proporcionado y regresa con información de comentarios, como un motor de búsqueda, envía las palabras clave de búsqueda y regresa con los resultados.
El bloque de codificación anterior es un ejemplo de un formulario de publicación mediante el cual ingresaría su dirección de correo electrónico y se enviaría a la propiedad oculta con una dirección de correo electrónico después de hacer clic en el botón Enviar. los
Las líneas 22-25 colocan los botones Enviar y Restablecer / Borrar en la página debajo del cuadro de texto. los Reiniciar el botón simplemente elimina cualquier texto ingresado en el cuadro de texto o cuadros en ese formulario. los Enviar El botón sigue las instrucciones de las partes ocultas del formulario que se crean en las líneas 14-18. El tipo oculto generalmente supondría algo automático o una parte de otra cosa que se usa en el formulario actual. En este caso, es este último el que da enviared información un destino, en este caso [email protected], con el tema establecido, en este caso "Suscribir correo electrónico", y luego lo redirige a otra página, en este caso la página principal o "Index.html".
2.9 meta qué? ¿Por qué?
¿Alguna vez se preguntó cómo los motores de búsqueda encuentran sitios web? Bueno, básicamente esto es lo que usan: meta elementos. Los motores de búsqueda suelen catalogar los sitios siguiendo enlaces a páginas en los sitios que encuentran. Estos meta elementos tienen información sobre la página en ellos. Eche un vistazo al siguiente extracto de algún código para ver un ejemplo:
Como puede ver arriba, la metainformación va en el
3. Diseñar con CSS
La mayoría de las veces a las personas que miran guías como estas les gusta jugar videojuegos. CSS, sin embargo, no es Counter Strike Source, ni tampoco es un First Person Shooter (FPS). CSS es una tecnología que funciona con xHTML y significa Cen ascenso Style Sheets xHTML es bastante aburrido por sí solo, pero si agrega una porción justa de CSS, el formato y la presentación de su creación son mucho más interesantes. Los autores pueden realizar cambios en los elementos de una página web, como fuentes, espacios, colores; esto se realiza por separado de la estructura del documento (encabezado, cuerpo, etc.; esto se explicará en capítulos posteriores). xHTML fue diseñado para especificar el contenido y la estructura de un documento. No es que xHTML no pueda hacer cambios en el formato del contenido. Sin embargo, esta configuración es mucho más beneficiosa ya que se puede controlar desde un lugar si es necesario. Por ejemplo, si el formato de un sitio web está determinado completamente por una hoja de estilo adjunta, un diseñador web simplemente puede colocar otra hoja de estilo para cambiar en gran medida la presentación del sitio web.
3.1 Estilos de baile en línea
Como se mencionó anteriormente, esta sección tiene que ver con el formato y los estilos. Dado que hay muchas maneras de cambiar el estilo de su contenido y página, pensé que sería bueno comenzar con la técnica más directa que es Estilos en línea. Esto se realiza colocando el código en la sección de propiedades de una pestaña que abarca el contenido. Me gusta esto:
¿Suena demasiado difícil? Dejame darte un ejemplo:
Nota: el color se deletrea color cuando se usa este código ya que fue creado en un lugar no tan bueno como Australia o Canadá; Espero que no te moleste demasiado.
La información en negrita en el ejemplo anterior es el formato que se está procesando en el contenido incluido en el
etiqueta. Para obtener una lista de códigos hexadecimales para diferentes colores, simplemente busque en Google o use este sitio: http://html-color- codes.com/
3.2 Hojas de estilo incrustadas (las hojas de trucos son ganadoras)
Usar los estilos en línea en la sección anterior puede ser una molestia si tiene un sitio muy grande. Pero si desea utilizar los mismos estilos una y otra vez, ¿por qué no utilizar un Hoja de estilo incrustada? Esta alternativa le permite crear sus propios estilos en el
etiqueta del código y luego se refiere a ellos en el código al insertar algún contenido en su página. ¿Demasiado complicado? Aquí hay un ejemplo:
¿Ves cómo el texto cambia de color, tamaño o formato dependiendo de la hoja de estilo en la parte superior? Esto no es muy difícil de entender, ¿verdad?
En la línea 7 donde presentamos el inicio de la
La línea 16 usa el .xtra clase que se hizo antes. La forma en que esto funciona es que agrega xtra clase a cualquier estilo en el que se abra, sobrescribiendo cualquier propiedad que el xtra usos de la clase Por ejemplo: si un estilo tiene una fuente de tamaño 20pt y es del color verde, y se coloca una clase que tiene un diferente tamaño de fuente, entonces el nuevo tamaño de fuente reemplazará al anterior, pero el viejo color verde continuará como es.
3.3 Estilos en guerra (estilos en conflicto)
Hay tres niveles de estilos y son:
• Usuario (viendo el sitio web)
• Autor (del sitio web)
• Agente de usuario (navegador)
Los estilos se fusionan de tal manera que crea la mejor configuración posible desde la posición del usuario. El siguiente cuadro muestra la jerarquía de los tres niveles:
3.4 Hojas de estilo del más allá (externas)
¿No crees que sería molesto tener que escribir siempre la misma hoja de estilo en cada nuevo archivo de codificación? Hay una solucion: Hojas de estilo externo. Puede crear otro archivo con el propósito de usarlo para formatear; es un ".css" archivo. Para usarlo en otro archivo, simplemente escriba el siguiente extracto:
Reemplazar nombre del archivo con el nombre de tu archivo CSS y ahí vamos, están vinculados. Asegúrese de que su archivo CSS esté en la misma carpeta que sus archivos vinculados.
Archivo CSS de muestra:
Antes de continuar, he olvidado mencionar lo que hace em. Arriba verás en la última línea que he puesto "ul ul {font-size: .8em; } ”Y esto significa que el tamaño de la fuente cambiará al relativo .8 u 80% del tamaño normal que el usuario quiere que use su propia hoja de estilo cargada en su navegador. La mayoría de las personas no usan una hoja de estilo definida por el usuario, así que no nos preocupemos por esto.
3.5 Elementos de posicionamiento (¿hacia dónde sigue?)
Cuando colocas una imagen en una página web, realmente no quieres que vaya a ningún lado. ¿No te gustaría poder opinar? Bueno, así es como lo haces, bueno, en realidad es un ejemplo y lo explicaré en breve:
En las líneas 9 a 13, notará que es una clase con la ID como fgpic y tiene algunas propiedades utilizadas en él. los posición la propiedad se establece en absoluto lo que significa que no importa cómo lo cambie el usuario, la imagen permanecerá donde su (el autor) la coloca con su código. los parte superior y izquierda Las propiedades designan un punto en el que el elemento (p. ej. imagen / texto) se colocará. los índice z La propiedad es una herramienta muy poderosa porque establece el nivel de apilamiento como se muestra en la siguiente captura de pantalla:
Vea cómo la imagen de fondo está en la parte posterior con un valor de índice z de 1 y el texto está en la parte delantera con un valor de índice z de 3, mientras que la imagen de primer plano está en el medio con un valor de índice z de 2. Realmente se ve bastante bien si juegas bien tus cartas
3.6 Cuida tu entorno (fondo)
Los sitios web se ven bien con fondos, ¿no? ¿No sería realmente aburrido si todos los sitios web tuvieran un fondo blanco o negro? ¿Por qué no poner una imagen allí y cambiar un poco el color? Hay algunas propiedades que puedes usar para hacer que el fondo de tu página se destaque un poco más y darle un poco de brillo a la página. Eche un vistazo al siguiente código y vea si puede averiguar qué hacen las propiedades resaltadas:
¿Resolviste lo que hace? Básicamente, la imagen de fondo es lo que vamos a utilizar en el fondo, la ruta de la imagen va entre paréntesis / paréntesis como esta> url (AQUÍ). Puede pensar que esto tiene un valor de índice z 0 ya que siempre está al final de la página. La posición de fondo de la imagen se ha establecido en la parte inferior izquierda, bastante clara ¿no? A continuación, la imagen de fondo se repitió en el eje x de la página (repetición-x) y no solo eso, sino que se fija en la parte inferior de la ventana (fondo adjunto). Finalmente, el color se ha establecido aleatoriamente para que sea principalmente rojo. Echa un vistazo a continuación para ver el resultado:
3.7 ¿Qué tan grande crees? (dimensiones de elementos / límites de texto)
Si crees que eso es todo lo que CSS tiene para ofrecer, estás muy equivocado. Las reglas CSS pueden especificar las dimensiones reales de cada elemento de la página. Tomemos el ejemplo de un cuadro de texto. ¿Desea escribir algún texto que no se extienda por toda la pantalla, o tal vez hacer un cuadro de texto que se pueda desplazar sin mover la página? Aquí es donde deberías estar entonces. Vea la captura de pantalla a continuación para lo que acabo de describir:
Ahora echemos un vistazo al código detrás de escena:
Solo una nota menor: la línea 6 agrega un borde marginal en la parte inferior de cada uno de los cuadros de texto. Muy bien, ¿verdad? Pero más sobre las fronteras en la siguiente sección.
3.8 Lo que da vueltas da vueltas (fronteras)
No creo que esto necesite una explicación, pero la daré de todos modos. Básicamente, puedes poner bordes alrededor de casi cualquier cosa, así que veamos cómo hacerlo. Así que aquí está el código:
Esto es lo que hace el código, básicamente una variedad de bordes que rodean los nombres del tipo de borde que se está utilizando. Tenga en cuenta que lo opuesto a groove es ridge y lo opuesto a inset es outset.
3.9 Elementos flotantes y fluidos
Por lo general, es bastante aburrido solo ver encabezado, luego texto, luego encabezado y luego texto. Si bien no lo hace ver un poco más agradable? Hay un método que se puede usar llamado flotante, y ahora te voy a mostrar cómo hacerlo. Flotante le permite mover un elemento a un lado de la pantalla mientras que otro contenido del documento fluye alrededor del elemento flotante. El elemento flotante podría ser una imagen o un encabezado o incluso otro bloque de texto. Ahora echemos un vistazo a cómo se ve:
Bastante bueno para bastantes situaciones, ahora este es el código que construye este diseño:
¿No es sorprendente lo que puedes hacer si solo encuentras el método correcto?
3.10 No despliegue el menú - ejemplo
Si estás pensando en crear un sitio web, lo más probable es que necesites un menú, ¿verdad? Bueno, este podría ser el lugar adecuado para que vayas si quieres algo que no sea solo estar sentado allí. Los elementos dinámicos hacen que las páginas web se vean mejor y dan una mejor sensación al sitio en general.
Uno de mis tipos favoritos de menús tiene que ser un Menú desplegable así que ahora veamos cómo hacer uno usando CSS. Mira el código a continuación:
Sé que esto parece un poco desalentador al principio, pero si eres paciente y sigues leyendo, lo entenderás pronto.
La línea 15 dice: cuando tengo un <div> etiqueta con clase = "menú"Y el mouse es flotaring sobre él monitor el bloquears dentro de ella.
Las líneas 16-21 dicen: cuando tengo un <div> etiqueta con clase = "menú"Y un <un> etiqueta y luego configure estos formatos. Tenga en cuenta que estas líneas eligen el formato de los botones de menú ocultos. Las líneas 9-14 configuran los formatos para que el botón de menú se desplace y muestre el resto del menú.
La línea 22 dice: cuando tengo un <div> etiqueta con clase = "menú"Y un <un> etiqueta y yo flotar sobre uno de estos elementos y luego establezca color de fondo a un verde diferente.
Echa un vistazo a continuación para ver el producto final:
3.11 Hojas de estilo de usuario (usted es el centro del universo)
Los usuarios pueden definir sus propios hojas de estilo de usuario para hacer que las páginas se vean como quieren. Solo para distinguir entre Hojas de estilo de usuario y Hojas de estilo de autor. Los estilos de usuario son hojas de estilo externas que los usuarios pueden crear ellos mismos que simplemente se hacen como archivos CSS sin la mayor parte de la codificación. Aquí te mostraré uno:
¿No era eso extremadamente simple?
Si desea saber cómo configurar esto en su propio navegador, simplemente vaya a Herramientas >> Opciones de Internet >> General >> Accesibilidad >> Luego defina su propio archivo La hoja de estilo del autor se define dentro del código entre .
4. Más información
4.1 ¿Por qué usar xHTML y compañía? sobre diseño y otras aplicaciones?
Antes de ver esto como un hecho o algo similar a eso, debe saber que esto es simplemente un punto de vista dependiendo de dónde se encuentre y cuán técnicamente tenga mentalidad. Disfruto usando lenguajes de programación para completar mis proyectos, ya que significa que puedes entender lo que hay detrás de los diseños, mientras que usar aplicaciones de diseño como Adobe Dreamweaver y Microsoft FrontPage le permiten crear su sitio web utilizando solo las herramientas disponibles en los menús. Por lo tanto, las aplicaciones de diseño se limitan a la opción de menú que se le proporciona. En conclusión, es completamente obvio que el uso de lenguajes de programación construiría el sitio web o el producto completo en algo mucho más atractivo ya que su funcionalidad solo está limitada por la habilidad del programador con el idioma designado (p.ej. JavaScript, CSS, xHTML). Sé que probablemente estés pensando que soy parcial, pero tendrás que probar ambos y decidir cómo mucho esfuerzo que desea poner en su trabajo, luego elija las herramientas adecuadas para llegar a su destino. Incluso puede optar por usar ambos, ya que tanto Dreamweaver como FrontPage tienen una "vista de codificación" y una "vista de diseño".
Hay otras formas de crear sitios web como usar Joomla y WordPress.
4.2 Joomla
Joomla es un gran sistema de gestión de contenido (CMS) con mucha flexibilidad y con un usuario fácil de usar. interfaz que mucha gente se intimida cuando se dan cuenta de cuántas opciones y configuraciones hay disponible. Joomla es una plataforma basada en PHP y MySQL. Este software es de código abierto que puede obtener de http://www.joomla.org/download.html
Si desea una guía detallada sobre Joomla, pruebe esta guía de MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ La guía de principiantes a JoomlaEsta guía lo guiará a través de todo, desde por qué elegir Joomla y cómo instalarlo en su servidor web hasta cómo diseñar y personalizar su sitio a su gusto. Lee mas
4.3 WordPress
WordPress es un sistema de gestión de contenido (CMS) que permite a los usuarios crear y mantener un sitio web a través de un administrador interfaz, incluida una estructura de navegación generada automáticamente, sin necesidad de conocer HTML o aprender ninguna otra herramienta. WordPress es un software de código abierto creado por miles de programadores en todo el mundo y puesto en el dominio público, por lo que no tiene que pagar para usarlo. WordPress es una aplicación basada en web, escrita en PHP y MySQL, diseñada para ejecutarse en servidores Linux: PHP es un lenguaje de programación para web aplicaciones, MySQL es una base de datos relacional (como MS Access) y Linux es un sistema operativo para servidores web; todos estos también están abiertos fuente. WordPress es, con diferencia, el CMS más popular con más de 200 millones de sitios en todo el mundo a fines de 2009.
Lectura adicional
- Las 11 etiquetas HTML principales que todo bloguero y propietario de sitios web debe conocer Las 11 etiquetas HTML principales que todo bloguero y propietario de sitios web debe conocerLa red mundial conoce muchos idiomas y está codificada en varios idiomas diferentes. Sin embargo, el único idioma que se puede encontrar por todas partes y que existe desde la invención de las páginas web es el ... Lee mas
- 5 cosas divertidas para hacer en línea con HTML5 5 cosas divertidas para hacer en línea con HTML5HTML5 continúa cada vez más fuerte, con más sitios web que cambian al nuevo estándar que trae contenido multimedia a la Web sin la necesidad de complementos como Adobe Flash. Es eso arruinado ... Lee mas
- Código para la web con estas herramientas directamente en su navegador Compilarlo: 11 extensiones de Chrome brillantes para desarrolladores webChrome es ideal para desarrolladores web debido a su conjunto de extensiones. Si alguna vez planea diseñar o codificar un sitio web, aquí hay algunas herramientas esenciales que debe instalar de inmediato. Lee mas
Guía publicada: junio de 2011