Aprender a hablar “internet”: su guía a xhtml

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 - Extensible Hypertext Markup Language - un lenguaje de marcas (similar a la programación) que permite que cualquiera pueda construir páginas web con muchas funciones diferentes. En muchos sentidos, es el idioma principal de Internet.

Entonces, ¿por qué nos importa?

Bueno, nunca has querido tener su propio sitio web? O hacer su propio juego? El papel de esta guía es para darle un sabor de este poderoso mundo. Si usted tiene alguna experiencia previa en programación a continuación, encontrará esto más fácil, por supuesto, que si se acaba de empezar su aventura de programación. De cualquier manera, espero explicar esto por lo que incluso un principiante puede entender.

Nos preocupamos por xHTML, ya que es un fuerte punto de partida para el aprendizaje de los elementos básicos de la web. sitios de redes sociales como Facebook, MySpace y Twitter utilizan otro (lado del servidor) lenguaje de programación llamado PHP, pero es una buena idea para comprender los conceptos básicos antes de sumergirse de cabeza en el mundo de la programación. Esta guía es sobre los fundamentos.

Si desea saber más acerca de cómo funciona Internet o tal vez cómo las redes informáticas trabajar con toda esta materia técnica o incluso sólo cómo las computadoras pueden ser construidos a continuación, tratar estos grandes guías de sus amigos en MakeUseOf:

//makeuseof.com/pages/the-guide-build-your-own-pc

//makeuseof.com/pages/easy-guide-computer-networks

//makeuseof.com/pages/guide-file-sharing-networks

//makeuseof.com/pages/download-the-ultimate-windows-7-guide

//makeuseof.com/pages/download-how-the-internet-works

2. Introducción a xHTML

En este capítulo aprenderá cómo crear y personalizar sitios web de muchas maneras diferentes, incluyendo aprender a:

• Añadir imágenes a las páginas web.

• Creación y uso de hipervínculos para navegar por páginas web.

• Configurar listas de información que utilizan puntos de punto y tal.

• Creación de tablas con filas y columnas de datos aleatorios y ser capaz de controlar el formato de dichas tablas.

• Creación y uso de formularios que en realidad se puede tener algún tipo de interacción con el.

• Hacer páginas web accesibles a los motores de búsqueda.

Todo esto se hará con la programación XHTML. No lo crea? Leyendo. Usted se sorprenderá de lo mucho que se puede aprender de una breve guía.

Antes de que tengamos en la “codificación” parte de esta guía, necesitará algún tipo de software a utilizar para que pueda editar, probar y, básicamente, todo el desarrollo de sus programas. Ir a dreamspark.com y obtener uno de los siguientes programas de forma gratuita, siempre que usted es un estudiante:

• Microsoft Visual Studio 2010

• Estudio Expresión 4

Si usted no es un estudiante, también se puede utilizar notepad ++, que se puede obtener fácilmente a partir notepad-plus-plus.org

Una vez que obtenga uno de los programas y lo instala, entonces usted puede comenzar su experiencia xHTML.

Puede que esté utilizando un Mac o Linux en lugar de Windows-que necesita para encontrar una editor de texto que funcione para usted en ese caso. Trate de encontrar uno que le muestra su número de líneas y colores código para usted.

• //makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/Leafpad - Un editor de texto ultraligero [Linux]Leafpad - Un editor de texto ultraligero [Linux]Lee mas

• //makeuseof.com/tag/geany-great-lightweight-code-editor-linux/

Si prefieres no descargar ningún herramientas dedicadas todavía se puede usar un editor de texto como Bloc o Wordpad. Sin embargo, los programas anteriores son mucho mejores herramientas para el ensayo y el diseño, así como ayudarle con su codificación, ya que le indica si se comete un error o si están tratando de recordar la palabra correcta a utilizar. Simple es mejor, ¿verdad? Yo personalmente uso Notepad ++ y Microsoft Visual Studio, aunque he oído muchas cosas acerca de Expression Studio 4. Usted tendrá que decidir lo que más le gusta, pero todos ellos trabajan muy bien.

NOTA: Para probar una página web creada a partir de Bloc de notas o Wordpad:

Con el archivo abierto, haga clic Archivo gt; gt; Guardar como

Al final del nombre de archivo, escriba.html y haga clic Salvar

Abra el archivo que acaba de guardar (lo hará, abierta en el navegador de Internet predeterminado)

2.1 Llegar a conocer “el mundo”

Muy bien, aquí está el comienzo del viaje. Vamos a empezar con sólo poner algo en la pantalla en esta página web. En primer lugar usted necesita saber qué son. código XHTML utiliza de inicio y fin de separar lo que está pasando con cada elemento de la página.

Aquí está un ejemplo de una etiqueta de inicio:

Aquí es un ejemplo de una etiqueta final:

¿Ver la diferencia? Uno tiene el nombre del elemento encerrado en los soportes puntiagudos y el otro es la misma, pero tiene una barra antes del nombre del elemento.

IMPORTANTE: Debe cerrar una etiqueta después de abrirlo en algún momento en el código. También las etiquetas deben estar anidadas, es decir, lo que significa que no se puede hacer lo siguiente:

- debería ser . Vea cómo las etiquetas encajan unas dentro de otras? Pensar en ellos como las cajas: no se puede poner algo sólido en una caja y media.

La mejor manera de conocer cómo programar es por hacerlo realmente, así que es bastante teoría. Sólo por un punto de referencia, voy a etiquetar cada línea de código con un número para que pueda explicar línea por línea lo que está pasando.

En la línea 1 he indicado el código html y en la línea 5 que he terminado la misma. Dentro de tag es la , y dentro del hay un párrafo (línea 3,

). Si abre esto en un navegador web, entonces usted verá la siguiente vienen a través de la pantalla:

Si desea cambiar el título de la página desde el punto de vista (. Ej firstpage.html) del navegador a continuación, puede agregar fácilmente en la siguiente línea de código:

Esto hará que su página web un aspecto más profesional.

2.2 A partir de la y trabajando por la

En la mayoría de los casos, dentro de la etiqueta hay una y una .
los por lo general se utiliza para secuencias de comandos en CSS (Sección 3) y javascript (explicado en un próximo manual), mientras que la es por lo general el contenido de la página.

Parte del contenido se puede cambiar usando las secuencias de comandos en el , pero el es por lo general el contenido que no se puede cambiar en la página. Un ejemplo sería un breve perorata sobre el sitio web que está visitando.

Puede realizar cambios en el formato del contenido usando CSS (Sección 3) en el . Sin embargo también se puede realizar cambios en el formato en el .
Un conjunto de etiquetas de uso común que se utiliza en el cuerpo son las fuentes de cabecera. Estas fuentes de cabecera varían en tamaño y fuerza / audacia. Sólo hay que ver por sí mismo a continuación:

2.3 ¿Su imagen vale más que mil palabras? - Imágenes

Hasta ahora, sólo hemos hablado de texto y lo que puede hacer en un sitio web, pero aún hay más. Quiere hacer su sitio web un aspecto aún más atractivo que las fuentes de lujo justos? Trate de conseguir algunas buenas imágenes para hacer que el sitio realmente dar al público algo que mirar. Tenga cuidado con las leyes de copyright aunque-mejor tomar sus propias imágenes si tiene intención de poner su sitio web en Internet.

Puede que tenga que utilizar 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 algunos grandes consejos y visión:

• //makeuseof.com/pages/download-idiot-guide-photoshop

• //makeuseof.com/pages/guide-to-digital-photography

Los formatos de imagen más populares son los siguientes:

• GIF Graphics Interchange Format =

• JPEG = Joint Photographic Experts Group

• PNG = Portable Network Graphics

Echar un vistazo al código abajo y voy a explicar lo que significa- próxima es decir, cómo añadir imágenes en su página web.


Como se enseña en las secciones anteriores siempre comenzamos con el y las etiquetas de los compañeros. A continuación, el etiqueta se abre en la línea 5. Vamos a saltar a las cosas importantes ...

Después de que el párrafo que se abrió en la línea 9 es aquí donde se insertan las imágenes en el sitio web. Para añadir una foto / imagen que debe utilizar para empezar. A continuación, tiene que sugiera donde está el archivo. Por lo general, usted tratar de tener este archivo en la misma carpeta que los archivos de la página web de lo contrario tendrá que introducir la ruta de la carpeta que existe en. En el caso anterior he utilizado . Esto significa que la fuente (Src) de la imagen reside en la misma carpeta y el nombre del archivo de imagen que es picture.jpg. Fácil ¿verdad?

Usted no tiene que añadir algo más de para crear una imagen con una alt propiedad, pero se pueden añadir propiedades a él para hacer algunos cambios a la misma.

También conocido como texto alternativo, este valor de la propiedad se muestra cuando se pasa el ratón sobre la imagen.

Usted puede notar que en la línea 10 He comenzado con la etiqueta y terminó con / Gt;. Esta es otra forma de etiquetas de apertura y cierre. Esta es la forma habitual de crear imágenes porque se puede elegir las diferentes propiedades de la imagen como la anchura y la altura, como se muestra en el ejemplo anterior.

En las líneas 11 y 12 se inserta otra imagen pero esto está utilizando el otro método para las etiquetas de apertura y cierre. La línea 10 crea la imagen de un uso mucho más ordenado moda- que en lugar del método en las líneas 11 y 12.

2.4 Los hipervínculos donde pueden ir?

2.4.1 Desplazamientos “el mundo”

¿Quieres mostrar a sus amigos algunos sitios frescos en su sitio web pero no sabe cómo? Usted ha venido al lugar correcto, siga leyendo ...

Echar un vistazo al código abajo y ver si se puede adivinar lo que estoy haciendo antes de explicar ella.

Así es, estoy creando hipervínculos a algunos sitios grandes y útiles. Básicamente hipervínculo a una determinada página web que tiene una dirección web sólo tiene que utilizar la siguiente sintaxis:

[Lo que quiere hipervínculo]

No parece muy difícil ¿verdad? Usted puede fácilmente simplemente poner el texto allí como el código de ejemplo anterior. Sin embargo, no hay ninguna razón por la que no podría utilizar algo más como una imagen. Sólo por un poco de información extra: una URL es un Localizador Uniforme de Recursos, básicamente, la dirección web.

2.4.2 Imágenes recordarle dónde ha estado y lo llevará allí de nuevo

He aquí un ejemplo del uso de una imagen como un hipervínculo:

Estoy seguro de que si estás leer las partes anteriores de esta sección que se suelta que esto es simplemente mezclando la creación de imágenes e hipervínculos. La sintaxis se fija para tener la hiperenlaces en el exterior y la imagen en el interior, con lo que la colocación de un hipervínculo de la imagen insertada.

2.4.3 Usted tiene correo - Hiperenlaces a una dirección de correo electrónico

Esto es simplemente una repetición de la última parte, pero si usted no ha estado prestando atención tanto a continuación, sólo echar un vistazo al siguiente código:

En lugar de utilizar una dirección URL (por ejemplo https://something.com.) Aquí estoy usando una dirección de correo electrónico, que consiste en colocar la siguiente sintaxis después del signo igual:

“Mailto: [youremailaddress]”

La línea 10 es el ejemplo básico de este concepto. Entonces, ¿quién se va a enviar por correo electrónico? Ghostbusters!

2.4.4 Moverse por el mundo - Hiperenlaces internos

Ahora se puede ver cómo se podrían obtener alrededor de su propio sitio web. Esto se hace simplemente mediante el uso de su nombre de archivo que la URL. Por lo tanto usted puede tener un conjunto de sitios web como se muestra en el siguiente diagrama. La sintaxis que estaría utilizando sería algo como esto:

Siguiente página

2.5 ¿Está especial? Estos personajes son ...

Cuando se escribe en la información que se va a aparecer en el sitio web como el contenido, entonces puede que tenga que poner en algo así como un símbolo como el símbolo de derechos de autor: © o tal vez una menor o mayor que símbolo. Pero puesto que los símbolos normales son utilizados por la sintaxis de codificación, entonces tenía que haber otra manera de superar este pequeño obstáculo, y la solución estaba utilizando un ampersand (&.) Y luego un código corto después para decirle a la computadora qué símbolo para poner en A continuación se muestra una tabla con algunos ejemplos de caracteres especiales de codificación:

Por ejemplo, usted podría decir:

Existen < seis filas de la tabla anterior, pero >- 2 filas

Existen lt; 6 filas de la tabla anterior, pero gt; 2 filas

Si desea una lista más amplia de los caracteres especiales, por favor, visite el siguiente sitio: w3.org/TR/REC-html40/shml/entities.html

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 los:

• Lista ordenada (números, alfabetos, números romanos)

• Lista sin ordenar (viñetas)

Para una lista ordenada que utilizaría las siguientes etiquetas =

Para una lista desordenada que utilizaría las siguientes etiquetas =

Por ejemplo:

En el ejemplo anterior que incluía tanto a tipos de listas desordenadas y ordenadas. Pero ¿se fijaron qué otra cosa que 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 el Obtener Ingredientes paso de la receta anterior.

Usted puede ver que empecé a toda la lista como una lista ordenada de la línea 10 y terminé en la línea 23. En el medio se podría ver la

y etiquetas que he utilizado. estos denotan Elementos de la Lista. Los elementos de la lista son las palabras que se muestran por ejemplo en Línea 21:

Cocine la salsa

. Las palabras Cocine la salsa aparecería junto al número 5, ya que es el quinto elemento de lista en una lista ordenada.

Si quieres ir al siguiente nivel jerárquico de puntos de puntos o números a continuación nido dentro de sí mismos como esto:

2.7 Tablas ... no no las matemáticas

Es esto tan difícil como las tablas de multiplicar? Por supuesto que no, si usted va sobre él de la manera correcta. Si usted está empezando a cabo con este concepto y supongo que es así, entonces por lo general es mejor para dibujar la tabla que desea hacer en un pedazo de papel que tengo a continuación:

Ahora mira en el código a continuación:

Ahora mezclarlos juntos y la pantalla a continuación le ayudará a entender cómo se estructura la tabla:

UN

o muchas tablas también pueden ser útiles como marcos en páginas web, una para el menú, uno para el contenido y otro para la cabecera.

y negrita la primera y la última fila, respectivamente, para dibujar más atención a aquellas partes de la tabla. La mayoría de la gente diría que el total en el pie de página de la tabla primera a la derecha?

es la tabla de datos en las filas de la tabla.

es las filas de la tabla que empiezan y terminan en cada línea de código para la pulcritud. es bueno para asegurarse de que la tabla no es sólo un paquete de información sin una razón para ello existente.

2.8 Formas digitales (Plumas de distancia)

Al navegar por la red tendrá que interactuar con las páginas web que te encuentres. Por ejemplo, en makeuseof.com que tendría que introducir su dirección de correo electrónico como un círculo de abajo para suscribirse al boletín de noticias y actualizaciones diarias de MakeUseOf. Después de introducir su dirección de correo electrónico debe pulsar Unirse y esto enviaría la información (email) en el cuadro de texto junto al botón ya sea a una base de datos o tal vez otra dirección de correo electrónico. formas 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 sólo su nombre y haga clic en cualquiera de los dos Enviar o Claro:

Aquí está el código de detrás de las escenas, que voy a explicar esto con más detalle en breve:

En primer lugar lo más importante en el guión anterior es la línea 10. Este es el comienzo de la forma. El método es general ya sea enviar o obtener. Bastante explica por sí mismo, pero enviar es el envío de la información de un lugar para hacer un disco, tal como una dirección de correo electrónico o base de datos. Por ejemplo: enviar una pregunta a MakeUseOf Respuestas. Obtener, por el contrario, envía la información que ha proporcionado y devuelve la información de retroalimentación, tales como un motor de búsqueda, el envío de las palabras clave de búsqueda y devolver los resultados.

El bloque de codificación anterior es un ejemplo de un formulario de envío mediante el cual debería introducir su dirección de correo electrónico y sería enviado a la propiedad oculta con una dirección de correo electrónico después de hacer clic en el botón Enviar. los etiqueta en las líneas 19-21 crea el cuadro de texto en la página y le da los caracteres como máximo disponible para ser utilizado en ese campo.

Líneas 22 - 25 lugar del envío y de reinicialización / botones claros en la página en el cuadro de texto. los Reiniciar botón simplemente elimina cualquier texto introducido en el cuadro de texto o cajas en esa forma. los Enviar Botón sigue las instrucciones de las partes ocultas de la forma que se crean en las líneas 14 - 18. El tipo oculto que normalmente asumir algo automático o una parte de algo más que se utilizan en la forma actual. En este caso, es este último dando la enviarinformación ed un destino, en este caso [email protected], con el conjunto de sujetos, en este caso “Subscribe Enviar”, y luego se vuelve a dirigir 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 encontrar sitios web? Bueno, básicamente, esto es lo que utilizan: metaelementos. Los motores de búsqueda suelen catalogar sitios siguiendo enlaces a páginas de sitios que encuentren. Estos elementos meta tienen información sobre la página en ellos. Echar un vistazo al siguiente extracto de un código para un ejemplo:

Como se puede ver arriba, la meta-información va en el etiqueta y tiene los tipos: palabras clave y descripción. El contenido es la otra parte de la información de metadatos que es o bien las palabras clave o la descripción, como se muestra en el ejemplo.

3. Diseño con CSS

La mayoría de las veces las personas que miran a los guías como estos sólo resulta que como juegos de video. CSS sin embargo, no se Counter Strike Source, ni es un Shooter en primera persona (FPS) en absoluto. CSS es una tecnología que funciona con xHTML, y significa doascading STyle Sheets. xHTML es bastante aburrido por sí solo, pero si se 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 hacer cambios en los elementos de una página web, tales como fuentes, espaciado, colores- esto se realiza por separado de la estructura del documento (cabeza, cuerpo, etc.- Esto se explicará en capítulos posteriores). xHTML fue diseñado realmente para especificar el contenido y la estructura de un documento. No es como xHTML no podía realizar cambios en el formato del contenido. Sin embargo, esta configuración es mucho más beneficioso, ya que se puede controlar desde un solo lugar, si es necesario. Por ejemplo, si el formato de un sitio web está totalmente determinado por una hoja de estilos adjunta, un diseñador de páginas web puede simplemente poner en su lugar otra hoja de estilo para cambiar en gran medida la presentación de la página web.

3.1 Inline estilos de baile

Como se mencionó anteriormente, esta sección tiene que ver con el formato y estilos. Puesto que hay muchas maneras de cambiar el estilo de su contenido y la 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 propiedad de una ficha que abarca el contenido. Me gusta esto:

Suena demasiado difícil? Dejame darte un ejemplo:


Nota: El color se escribe color cuando se utiliza este código desde que fue creado en algún lugar no tan fresco como Australia o Canadá y espero que no te moleste demasiado.

La información se escribe en negrita en el ejemplo anterior es el formato que se está procesando en el contenido comprendido en el

etiqueta. Para obtener una lista de los códigos hexadecimales de diferentes colores, simplemente buscar en Google o utilizar este sitio: // codes.com/ html-color-: http

3.2 Hojas de estilos incrustada (Cheat Sheets son ganar)

El uso de los estilos en línea en la sección anterior puede ser un problema si usted tiene un sitio muy grande. Pero si desea utilizar los mismos estilos una y otra vez por qué no usar una Hoja de estilo incrustada? Esta alternativa le permite crear sus propios estilos en el etiqueta del código y luego se hace referencia a ellas en el código cuando se inserta algún contenido en su página. ¿Demasiado complicado? He aquí un ejemplo:


Ver cómo el texto cambia de color, el tamaño o el formato en función de la hoja de estilo en la parte superior? Esto no es muy difícil de entender ¿verdad?

En la línea 7, donde se introduce el principio de la etiquetar con el tipo: text / css esto se llama un MIME (Multipurpose Internet Mail Extensions) de tipo que describe el contenido existente en esa etiqueta / archivo. documentos CSS siempre utilizan el texto MIME text / css. javascript, que se tratarán en otro volumen de este manual, utiliza el text / javascript Tipo MIME. Hay muchos diferentes tipos MIME, sin embargo, los principales son el javascript y CSS.

La línea 16 utiliza la .Xtra clase que se hizo anteriormente. La forma en que esto funciona es que añade en el Xtra clase para cualquier estilo que se abre en, por lo cual sobrescribir propiedades que la Xtra clase utiliza. Por ejemplo: si un estilo tiene el tamaño de fuente 20 puntos y es el color verde, y una clase se pone sobre en él que tiene un tamaño diferente de la fuente, entonces el nuevo tamaño de la fuente reemplazará a la antigua, pero el viejo verde continuará como es.

3.3 Estilos en guerra (conflicto estilos)

Hay tres niveles de estilos y son:

• Usuario (ver la página web)

• Autor (del sitio web)

• Agente de usuario (navegador)

Los estilos se funden de tal manera que crea la mejor configuración posible de la posición del usuario. El siguiente gráfico muestra la jerarquía de los tres niveles:

3.4 hojas de estilo de más allá (externo)

¿No te parece que sería molesto tener que escribir siempre la misma hoja de estilo en cada archivo de codificación de nuevo? Hay una solución: Hojas de estilo externas. Se puede crear otro archivo con el fin de utilizarlo para formatting- que es un “.css" archivo. Para usarlo en otro archivo simplemente escriba en el siguiente extracto:

Reemplazar nombre del archivo con el nombre de su archivo CSS y allí vamos, que están vinculados. Asegúrese de que su archivo CSS se encuentra en la misma carpeta que el archivo (s) vinculado.
Muestra archivo CSS:

Antes de continuar me he olvidado mencionar lo que hace em. Por encima se 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á a la relación 0,8 o el 80% del tamaño normal que el usuario quiere que sea utilizando su propia hoja de estilo cargado en su navegador. La mayoría de la gente no utiliza una hoja de estilo definida por el usuario por lo que no hay que preocuparse por esto.

3.5 Elementos de posicionamiento (dónde viene?)

Cuando se pone una imagen en una página web que realmente no quiere que sólo tiene que ir a ninguna parte. ¿No le gustaría tener algo que decir en ella? Pues esta es la forma de hacerlo, así que en realidad es un ejemplo y lo explicaré en breve:

En líneas 9 a 13 se dará cuenta de que es una clase con el ID como fgpic y tiene algunas propiedades que se utilizan en ella. los posición propiedad se establece en absoluto lo que significa que no importa lo que el usuario cambia, la imagen permanecerá en su (el autor) lo sitúa con su código. los parte superior y izquierda propiedades designan un punto en el que se colocará el elemento (por ejemplo. imagen / texto). los z-index la propiedad es una herramienta muy poderosa, ya que establece el nivel de apilamiento, como se muestra en la siguiente imagen:

Ver cómo la imagen de fondo se encuentra en la parte posterior con el valor del índice Z de 1 y el texto está en la parte delantera con el valor del índice Z de 3, mientras que la imagen en primer plano está en el medio con un valor del índice Z de 2. Hace que sea un aspecto bastante bueno en realidad si juega bien sus cartas

3.6 Importe de su entorno (fondo)

Sitios web se ven bien con los fondos no es así? ¿No sería muy aburrido si todos los sitios web acaba de tener un fondo blanco o negro? ¿Por qué no poner una foto en ese país y cambiar el color un poco? Hay algunas propiedades que se pueden utilizar para hacer el fondo de la página se destacan un poco más y dar a la página de alguna llamarada. Echar un vistazo al siguiente código y ver si se puede trabajar en lo que los inmuebles destacados hacen:

¿Trabajó a cabo lo que hace? Básicamente la imagen de fondo es lo que vamos a utilizar en el fondo, la ruta de la imagen va en los soportes / paréntesis como éste gt; url (AQUÍ). Se podría pensar en esto como tener valor del índice Z 0, ya que está siempre en la parte trasera de la página. La posición de fondo de la imagen se ha ajustado en la parte inferior izquierda, bastante explica por sí mismo ¿verdad? A continuación, la imagen de fondo se ha repetido a través del eje X de la página (repeat-x) y no sólo eso, sino que se fija a la parte inferior de la ventana (background-attachment). Por último el color se ha establecido al azar que es principalmente de color rojo. Echar un vistazo a continuación para el resultado:

3.7 ¿Qué tan grande es lo que parece? (Dimensiones de los elementos / límites de texto)

Si usted piensa que es todo lo CSS tiene que ofrecer, estás muy equivocado. reglas CSS pueden especificar las dimensiones reales de cada elemento de la página. Tomemos el ejemplo de un cuadro de texto. ¿Quieres escribir un texto que no se va todo el camino a través de la pantalla, o tal vez hacer un cuadro de texto que se puede desplazar sin mover la página? Aquí es donde usted debe ser a continuación. Ver la siguiente captura de pantalla de lo que acabo de describir:

Ahora vamos a echar un vistazo al código detrás de las escenas:

Sólo una pequeña nota: la línea 6 añade un borde marginal sobre la parte inferior de cada uno de los cuadros de texto. Muy bueno, ¿verdad? Pero más en las fronteras de la siguiente sección.

3.8 Lo que se siembra se cosecha (fronteras)

No creo que esto necesita una explicación, pero voy a dar uno de todos modos. Básicamente se puede poner bordes alrededor de casi cualquier cosa así que vamos a echar un vistazo a cómo hacerlo. Así que aquí está el código:

Esto es lo que hace el código, básicamente, un surtido de fronteras en torno a los nombre / s del tipo de borde que se utiliza. Hay que tener en cuenta que lo opuesto a la ranura es cresta y lo contrario de inserción es un principio.

3.9 flotantes y elementos sueltos

Por lo general es bastante aburrido sólo para ver partidas, a continuación, el texto, a continuación, en dirección a continuación el texto. Aunque no hacer que se vea un poco más agradable? Hay un método que puede ser utilizado llama flotante, y ahora voy a mostrar cómo hacerlo. Flotante permite mover un elemento a un lado de la pantalla, mientras que otros contenidos en el documento a continuación, fluye alrededor del elemento flotante. El elemento flotante podría ser una imagen o una partida o incluso otro bloque de texto. Ahora vamos a echar un vistazo a lo que se parece a:

Bastante bueno para algunas situaciones bastante, ahora este es el código que construye este diseño:

No es asombroso lo que puede hacer si usted acaba de encontrar el método adecuado?

3.10 No deje caer hacia abajo el menú - ejemplo

Si usted está pensando en la creación de un sitio web, usted va a necesitar más probable es un menú, ¿verdad? Bueno, esto podría ser el lugar adecuado para que pueda ir si quieres algo que no está allí sentado. Los elementos dinámicos hacen que las páginas web se vean mejor y dan una mejor sensación al sitio global.

Uno de mis favoritos tipos de menús tiene que haber una Menú desplegable por lo que ahora vamos a echar un vistazo a cómo hacer uno mediante el uso de CSS. Echa un vistazo al siguiente código:

Sé que esto parece un poco intimidante al principio, pero si usted sea paciente y simplemente leyendo, voy a entender muy pronto.

La línea 15 dice: cuando tengo una lt;divgt; etiqueta con class = “menú”Y el ratón está flotaring sobre ella monitor el bloquears dentro de él.

Líneas 16-21 decir: cuando tengo una lt;divgt; etiqueta con class = “menú" y un lt;ungt; etiqueta a continuación, establecer estos formatos. Tenga en cuenta que estas líneas de elegir el formato de los botones de menú ocultos. Líneas 9-14 establecieron los formatos para el botón de menú para desplazarse a mostrar el resto del menú.

La línea 22 dice: cuando tengo una lt;divgt; etiqueta con class = “menú" y un lt;ungt; etiqueta y yo flotar más de uno de estos elementos a continuación, establezca la color de fondo a un verde diferente.

Echar un vistazo a continuación para el producto final:

Hojas de estilos de usuario (3.11 eres el centro del universo)

Los usuarios pueden definir sus propias las hojas de estilo de usuario para que las páginas se ven como ellos quieren. Sólo para distinguir entre Hojas de estilos de usuario y Hojas de Estilo autor. 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í voy a mostrar uno:

No era eso extremadamente simple?

Si usted quiere saber cómo configurar esto en su propio navegador sólo tendría que ir a Herramientas gt; gt; opciones de Internet gt; gt; General gt; gt; Accesibilidad gt; gt; A continuación, defina su propio archivo La hoja de estilo del autor se define en el código en el medio .

4. Más información

4.1 ¿Por qué usar xHTML y co. sobre el diseño y otras aplicaciones?

Antes de ver esto como hecho o algo similar a eso, usted debe saber que esto es simplemente un punto de vista dependiendo de dónde se encuentra y cómo técnicamente bien puede ser. Me gusta el uso de lenguajes de programación para completar mis proyectos, ya que significa que usted puede entender lo que está detrás de los diseños, mientras que utilizando aplicaciones de diseño como Adobe Dreamweaver y Microsoft FrontPage le permiten crear su sitio web utilizando únicamente las herramientas disponibles en los menús. Por lo tanto, las aplicaciones de diseño se limitan a la opción de menú le proporciona. En conclusión, es completamente obvio que el uso de lenguajes de programación sería construir el sitio web o producto terminado en algo mucho más atractivo como su funcionalidad sólo está limitado por la habilidad del programador con el idioma designado (por ejemplo. javascript, CSS, XHTML). Sé que probablemente está pensando que soy parcial, pero usted tendrá que acaba de probar ambos y decidir la cantidad de esfuerzo que desea poner en su trabajo luego elegir los instrumentos adecuados para llegar a su destino. Puede ser que incluso optar por utilizar tanto desde Dreamweaver y FrontPage tienen una “visión de codificación” y una “vista de diseño”.

Hay otras maneras de crear sitios web como el uso de Joomla y WordPress.

4.2 Joomla

Joomla es un gran gestor de contenidos (CMS) con una gran cantidad de flexibilidad y con una interfaz de usuario fácil de usar que una gran cantidad de gente se intimida acerca de cuándo se dan cuenta de cómo se dispone de muchas opciones y configuraciones. Joomla es una plataforma basada en PHP y MySQL. Este software es de código abierto que se puede obtener de https://joomla.org/download.html

Si desea en profundo guía sobre Joomla tratar esta guía de MakeUseOf: //makeuseof.com/pages/download-the-complete-beginners-guide-to-joomla

4.3 WordPress

WordPress es un sistema de gestión de contenidos (CMS) que permite a los usuarios crear y mantener un sitio web a través de una interfaz de administración, incluyendo una estructura de navegación automáticamente- generado, sin necesidad de saber HTML o aprender cualquier otra herramienta. WordPress es una pieza de software de código abierto creado por miles de programadores alrededor del mundo y poner en el dominio público, por lo que no tiene que pagar para usarlo. WordPress es una aplicación basada en la web, escrito en PHP y MySQL, diseñado para ejecutarse en servidores Linux: PHP es un lenguaje de programación para aplicaciones web, MySQL es una base de datos relacional (como MS Access), y Linux es un sistema operativo para la web servidores - todos estos son también de código abierto. WordPress es, con mucho, el más popular CMS con más de 200 millones de sitios en todo el mundo a finales de 2009.

lectura adicional

• CSSFrameGenerator: Generar código marco CSS para XHTML
• Top 11 de las etiquetas HTML que cada blogger & Propietario del sitio web debe saber
• Instantánea HTML: Código instantánea Editor HTML en línea
• 5 cosas divertidas que hacer en línea con HTML5
• Código para la web con estas herramientas directamente en el navegador

Guía Publicado: Junio ​​2011