Anuncio publicitario
Tabla de contenido
§1. Introducción
§2 – Introducción a 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 crear tu propio juego? La función de esta guía es darle una idea de este poderoso mundo. Si tiene alguna experiencia previa en programación, entonces le resultará 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 utilizan 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 quieres saber más sobre cómo funciona Internet o quizás cómo funcionan las redes informáticas con todo esto aspectos técnicos o incluso cómo se pueden construir las 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 tu propia PC; además de intimidante. Pero el proceso en sí es bastante simple. Lo guiaremos a través de todo lo que necesita 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 cree. 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 definitiva de Windows 7Si tiene miedo de actualizar desde Vista o XP porque cree que es completamente diferente a lo que está acostumbrado, debe leer esta nueva guía. Lee mas
//www.makeuseof.com/tag/download-how-the-internet-works/ ¿Cómo funciona Internet?Ahora podemos acceder a Internet desde nuestras computadoras domésticas, oficinas, computadoras portátiles y nuestros teléfonos. Pero mucha gente todavía no está completamente segura de qué es Internet y cómo funciona realmente. Lee mas
2. Introducción a xHTML
En este capítulo, aprenderá a crear y personalizar sitios web de muchas formas diferentes, incluido el aprendizaje de cómo:
• Agregue imágenes a páginas web.
• Crear y utilizar hipervínculos para navegar por páginas web.
• Configure listas de información utilizando puntos y demás.
• Crear tablas con filas y columnas de datos aleatorios y poder controlar el formato de dichas tablas.
• Cree y utilice formularios con los que pueda interactuar.
• Hacer que las páginas web sean accesibles para los motores de búsqueda.
Todo esto se hará con programación xHTML. ¿No lo cree? Sigue leyendo. Le sorprendería lo mucho que puede aprender de una guía tan breve.
Antes de entrar realmente en la parte de "codificación" de esta guía, necesitará algún software para poder editar, probar y básicamente desarrollar sus programas. Ve a www.dreamspark.com y obtén uno de los siguientes programas GRATIS, asumiendo que eres un estudiante:
• Microsoft Visual Studio 2010
• Expression Studio 4
Si no eres estudiante, también puedes usar Bloc de notas ++, que puede obtener fácilmente de www.notepad-plus-plus.org
Una vez que obtenga uno de los programas y lo instale, podrá comenzar su experiencia xHTML.
Es posible que esté utilizando una Mac o Linux en lugar de Windows; necesitarás encontrar un editor de texto que funcione para usted en ese caso. Intente encontrar uno que le muestre el número de líneas y el código de colores.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad: un editor de texto ultraligero [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 integrados). Creo que esto se debe a que en el pasado, 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, puede utilizar 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 usar. Lo simple es mejor, ¿verdad? Yo personalmente uso Notepad ++ y Microsoft Visual Studio, aunque he escuchado muchas cosas buenas sobre Expression Studio 4. Tendrás que decidir qué te gusta más, 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 en Ahorrar
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 simplemente poniendo algo en la pantalla de esta página web. Primero, necesitará saber qué están. El código XHTML usa etiquetas de inicio y finalización para clasificar lo que está sucediendo con cada elemento de la página.
A continuación, se muestra un ejemplo de una etiqueta de inicio:
A continuación, se muestra un ejemplo de una etiqueta final:
¿Ver la diferencia? Uno tiene el nombre del elemento entre corchetes puntiagudos y el otro es el mismo pero tiene una barra 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, lo que significa 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 realmente haciéndolo, así que basta de 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 la etiqueta es la
). 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), luego 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 Partiendo del y trabajando por el
En la mayoría de los casos, dentro del etiqueta hay una
y un .los se utiliza generalmente para scripts 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 el
, pero el suele ser el contenido que no se puede modificar en la página. Un ejemplo sería una breve perorata sobre el 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 / audacia. Compruébelo usted mismo a continuación:
2.3 ¿Tu imagen vale más que mil palabras? - Imágenes
Hasta ahora, solo hemos hablado de 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 fuentes elegantes? Intente obtener algunas buenas imágenes para que su sitio realmente le dé a la audiencia algo que mirar. Sin embargo, tenga cuidado con las leyes de derechos de autor; Lo mejor es tomar sus propias fotografías si tiene la intención de publicar 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 impresionante. Pruebe estas guías para obtener excelentes consejos y conocimientos:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Aprenda a editar fotos en Photoshop: aprenda lo básico en 1 horaPhotoshop es un programa intimidante, pero con solo una hora, puede aprender todos los conceptos básicos. ¡Toma una foto que quieras editar y comencemos! Lee mas
• //www.makeuseof.com/tag/guide-to-digital-photography/ Una guía para principiantes de fotografía digitalLa fotografía digital es un gran pasatiempo, pero también puede resultar 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 lo que significa; es decir, cómo agregar imágenes a su página web.
Como se enseñó en secciones anteriores, siempre comenzamos con el y etiquetas co. 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, tendrá que 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 pasa el mouse sobre la imagen.
Puede notar que en la línea 10 comencé 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 el alto, como se muestra en el ejemplo anterior.
En las líneas 11 y 12 se inserta otra imagen, pero se usa 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 de las líneas 11 y 12.
2.4 Hipervínculos, ¿a dónde pueden ir?
2.4.1 Moverse por "el mundo"
¿Quieres mostrarles a tus amigos algunos sitios interesantes en tu sitio web pero no sabes 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 excelentes 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 desea incluir en el hipervínculo]
No parece muy difícil, ¿verdad? Fácilmente podría 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 para 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
A continuación, se muestra un ejemplo del uso de una imagen como hipervínculo:
Estoy seguro de que si ha leído las partes anteriores de esta sección que publica, se trata simplemente de 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 Tiene correo: hipervínculo a una dirección de correo electrónico
Esto es simplemente una repetición de la última parte, pero si no ha prestado mucha atención, simplemente eche un vistazo al código a continuación:
En lugar de utilizar 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: [tu dirección de correo]"
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 Moverse por su mundo: hipervínculos internos
Ahora puede ver cómo se desplazarí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 diagrama a continuación. La sintaxis que usaría sería algo como esto:
2.5 ¿Eres especial? Estos personajes son ...
Cuando escriba información que 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 menor o mayor que símbolo. Pero dado que los símbolos normales son usados por la sintaxis de codificación, 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 después 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ía decir:
Hay
Hay <6 filas en la tabla anterior, pero> 2 filas
2.6 Listas, listas y más listas
Muy bien, ahora tendremos 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í tipos de lista ordenados y desordenados. Pero, ¿te diste cuenta de qué más hice? También incluí una técnica llamada Listas anidadas. Estas listas anidadas pueden usarse para representar relaciones jerárquicas, como la lista de ingredientes en el 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 Elementos 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, anímelos dentro de sí mismos 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 código a continuación:
Ahora mézclelos y la pantalla a continuación debería ayudarlo a comprender cómo está estructurada la tabla:
A
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 (bolígrafos de distancia)
Al navegar por la red, deberá interactuar con las páginas web que encuentre. Por ejemplo, en www.makeuseof.com, deberá ingresar su dirección de correo electrónico como se indica en un círculo a continuación para suscríbase al boletín y las actualizaciones diarias de MakeUseOf. Después de ingresar su dirección de correo electrónico, presionaría Entrar 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 quizás a otra dirección de correo electrónico. Formularios se utilizan para 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é esto 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 suele ser correo o obtener. Bastante autoexplicativo, pero correo 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 retroalimentación, como un motor de búsqueda, enviando las palabras clave de búsqueda y regresando con los resultados.
El bloque de codificación anterior es un ejemplo de un formulario de publicación en el que 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 a 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 a 18. El tipo oculto normalmente se supondría para algo automático o una parte de otra cosa que se utiliza en la forma actual. En este caso es el último el que da la correoed información un destino, en este caso [email protected], con el asunto 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 los enlaces a las páginas de los sitios que encuentran. Estos meta elementos tienen información sobre la página. 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ño con CSS
La mayoría de las veces a las personas que miran guías como estas les gusta jugar videojuegos. Sin embargo, CSS no es Counter Strike Source, ni es un First Person Shooter (FPS) en absoluto. CSS es una tecnología que funciona con xHTML y significa Cascading 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 es mucho más interesante. Los autores pueden realizar cambios en los elementos de una página web, como fuentes, espaciado, colores; esto se hace por separado de la estructura del documento (encabezado, cuerpo, etc.; esto se explicará en capítulos posteriores). En realidad, xHTML fue diseñado para especificar el contenido y la estructura de un documento. No es que xHTML no pudiera realizar cambios en el formato del contenido. Sin embargo, esta configuración es mucho más beneficiosa, ya que se puede controlar desde un solo lugar si es necesario. Por ejemplo, si el formato de un sitio web está determinado por completo por una hoja de estilo adjunta, un diseñador web puede simplemente poner en su lugar 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 trata sobre formato y estilos. Dado que hay muchas formas de cambiar el estilo de su contenido y página, pensé que sería bueno comenzar con la técnica más sencilla, 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. Como esto:
¿Suena demasiado difícil? Dejame darte un ejemplo:
Nota: el color está escrito color al usar este código, ya que se creó en un lugar no tan atractivo 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 de la sección anterior puede ser complicado 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 cuando inserta algún contenido en su página. ¿Demasiado complicado? Aquí tienes un ejemplo:
¿Ves cómo el texto cambia de color, tamaño o formato según la hoja de estilo en la parte superior? Esto no es muy difícil de entender, ¿verdad?
En la línea 7 donde introducimos 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 en el xtra clase a cualquier estilo en el que se abre, por lo que se sobrescribe cualquier propiedad que el xtra usos de clase. Por ejemplo: si un estilo tiene un tamaño de fuente de 20 puntos y es de color verde, y se le asigna una clase que tiene un diferente tamaño de fuente, entonces el nuevo tamaño de fuente reemplazará al anterior, pero el antiguo color verde continuará como es.
3.3 Estilos en guerra (estilos en conflicto)
Hay tres niveles de estilos y son:
• Usuario (visitando el sitio web)
• Autor (del sitio web)
• Agente de usuario (navegador)
Los estilos se fusionan de tal manera que crean la mejor configuración posible desde la posición del usuario. El siguiente gráfico muestra la jerarquía de los tres niveles:
3.4 Hojas de estilo del más allá (externo)
¿No cree 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 externas. Puede crear otro archivo con el fin de utilizarlo para formatear; es un ".css" expediente. Para usarlo en otro archivo, simplemente escriba el siguiente extracto:
Reemplazar nombre del archivo con el nombre de su archivo CSS y ahí vamos, están vinculados. Asegúrese de que su archivo CSS esté en la misma carpeta que sus archivos vinculados.
Ejemplo de archivo CSS:
Antes de continuar, he olvidado mencionar lo que hace. Arriba verá en la última línea que he puesto “ul ul {font-size: .8em; } ”Y esto significa que el tamaño de la fuente se cambiará al .8 relativo o al 80% del tamaño normal que el usuario desea que tenga usando su propia hoja de estilo cargada en su navegador. La mayoría de la gente no usa una hoja de estilo definida por el usuario, así que no nos preocupemos por esto.
3.5 Elementos de posicionamiento (¿hacia dónde vamos a continuación?)
Cuando pones una imagen en una página web, realmente no quieres que vaya a ninguna parte. ¿No querrías tener algo que decir? 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 el ID como fgpic y tiene algunas propiedades utilizadas en él. los posición la propiedad está establecida en absoluto lo que significa que no importa cómo la cambie el usuario, la imagen permanecerá donde su (el autor) la coloca con su código. los cima y izquierda Las propiedades designan un punto en el que el elemento (p. ej. imagen / texto). los índice z La propiedad es una herramienta muy poderosa porque establece el nivel de apilamiento como se muestra en la captura de pantalla a continuación:
Vea cómo la imagen de fondo está en la parte posterior con un valor de índice Z de 1 y el texto está al frente 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. Hace que se vea bastante bien si juegas bien tus cartas
3.6 Cuida tu entorno (fondo)
Los sitios web se ven bien con fondos, ¿no es así? ¿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 puede utilizar para hacer que el fondo de su página se destaque un poco más y darle un toque de brillo a la página. Eche un vistazo al siguiente código y vea si puede averiguar qué hacen las propiedades resaltadas:
¿Descubriste lo que hace? Básicamente, la imagen de fondo es lo que vamos a usar en el fondo, la ruta de la imagen va entre corchetes / paréntesis así> 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 autoexplicativa, ¿verdad? A continuación, la imagen de fondo se ha repetido en el eje x de la página (repeat-x) y no solo eso, sino que se fija en la parte inferior de la ventana (background-adjunto). Finalmente, el color se ha establecido aleatoriamente para que sea principalmente rojo. Eche un vistazo a continuación para ver el resultado:
3.7 ¿Qué tan grande crees? (dimensiones de elementos / límites de texto)
Si cree que eso es todo lo que CSS tiene para ofrecer, está 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 recorra toda la pantalla, o tal vez crear 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 ver 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. Bastante bien, ¿verdad? Pero más sobre fronteras en la siguiente sección.
3.8 Lo que va, vuelve (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 el nombre del tipo de borde que se está utilizando. Tenga en cuenta que lo opuesto a la ranura es una cresta y lo opuesto a la inserción es hacia afuera.
3.9 Elementos flotantes y fluidos
Por lo general, es bastante aburrido solo ver el encabezado, luego el texto, luego el encabezado y luego el texto. ¿Aunque no lo hace lucir un poco mejor? Hay un método que se puede usar llamado flotante, y ahora voy a mostrarte cómo hacerlo. Flotar 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 puede hacer si encuentra el método correcto?
3.10 No despliegue el menú - ejemplo
Si está pensando en crear un sitio web, lo más probable es que necesite un menú, ¿verdad? Bueno, este podría ser el lugar adecuado para que vayas si quieres algo que no esté simplemente sentado allí. Los elementos dinámicos hacen que las páginas web se vean mejor y den una mejor sensación al sitio en general.
Uno de mis tipos de menús favoritos tiene que ser un Menú desplegable así que ahora echemos un vistazo a cómo hacer uno usando CSS. Consulte el código a continuación:
Sé que esto parece un poco abrumador al principio, pero si tienes paciencia y sigues leyendo, pronto lo entenderás.
La línea 15 dice: cuando tengo un <div> etiqueta con class = "menú"Y el mouse es flotarsobre eso monitor los cuadras dentro de él.
Las líneas 16-21 dicen: cuando tengo un <div> etiqueta con class = "menú”Y un <a> etiqueta 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 class = "menú”Y un <a> etiqueta y yo flotar sobre uno de estos elementos, establezca el color de fondo a un verde diferente.
Eche 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 que las páginas se vean como ellos 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 y que simplemente se hacen como archivos CSS sin la mayor parte de la codificación. Aquí les mostraré uno:
¿No fue 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é utilizar xHTML y co. sobre el 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 pueda ser. Disfruto usando lenguajes de programación para completar mis proyectos, ya que significa que puedes entender qué hay detrás de los diseños, mientras que utilizo 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 convertirí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 lenguaje 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 utilizar 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 intimida a mucha gente cuando se da 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 para principiantes de 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, que incluye una estructura de navegación generada automáticamente, sin necesidad de conocer HTML ni 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 mucho, el CMS más popular con más de 200 millones de sitios en todo el mundo a finales de 2009.
Lectura adicional
- Las 11 etiquetas HTML principales que todo bloguero y propietario de un sitio web debe conocer Las 11 etiquetas HTML principales que todo bloguero y propietario de un sitio web debe conocerLa World Wide Web conoce muchos idiomas y está codificada en varios diferentes. Sin embargo, el único idioma que se puede encontrar en todas partes y que ha existido 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 mejorando, con más sitios web cambiando al nuevo estándar que trae contenido multimedia a la Web sin la necesidad de complementos como Adobe Flash. Eso es maldito ... Lee mas
- Codifique para la Web con estas herramientas directamente en su navegador Constrúyalo: 11 brillantes extensiones de Chrome 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
Publicación de la guía: junio de 2011
