Apprenez à parler « Internet »: votre guide xhtml

Bienvenue dans le monde de XHTML - Extensible Hypertext Markup - un langage de balisage (similaire à la programmation) qui permet à quiconque de construire des pages web avec de nombreuses fonctions différentes. À bien des égards, il est la langue principale de l`Internet.

Alors, pourquoi en faire?

Eh bien, avez-vous jamais voulu avoir votre propre site? Ou faire votre propre jeu? Le rôle de ce guide est de vous donner un avant-goût de ce monde puissant. Si vous avez une expérience de la programmation, vous trouverez cela plus facile, bien sûr, que si vous êtes débutant l`aventure de programmation. De toute façon, je l`espère pour expliquer cette façon, même un novice peut comprendre.

Nous nous soucions xHTML, car il est un bon point de départ pour apprendre les éléments de base du web. sites de réseaux sociaux tels que Facebook, MySpace et Twitter utilisent un autre (côté serveur) langage de programmation appelé PHP, mais il est une bonne idée de comprendre les bases avant de vous plonger la tête la première dans le monde de la programmation. Ce guide est sur les bases.

Si vous voulez en savoir plus sur la façon dont l`Internet fonctionne ou peut-être la façon dont les réseaux informatiques fonctionnent avec tous ces trucs techniques ou même à quel point les ordinateurs peuvent être construits puis essayer ces grands guides de vos amis à MakeUseOf:

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

Video: Règle 3 "Pas le temps d'apprendre ? La solution" - Apprendre le français avec Français Authentique

//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. Mise en route avec xHTML

Dans ce chapitre, vous apprendrez comment créer et personnaliser des sites Web de différentes façons, notamment apprendre à:

• Ajouter des images aux pages Web.

• Créer et utiliser des hyperliens pour naviguer dans des pages Web.

• Mettre en place des listes d`informations à l`aide de points de points et autres.

• Créer des tables avec des lignes et des colonnes de données aléatoires et être en mesure de contrôler la mise en forme desdites tables.

• Créer et utiliser des formulaires que vous pouvez réellement avoir une certaine interaction avec.

• Faire des pages Web accessibles aux moteurs de recherche.

Tout cela sera fait avec la programmation xHTML. Ne croyez pas? Continuer à lire. Vous seriez surpris de voir combien vous pouvez apprendre d`un tel guide.

Avant d`entrer réellement dans la partie « codage » de ce guide, vous aurez besoin d`un logiciel à utiliser pour que vous puissiez modifier, tester et essentiellement tous se développer autour de vos programmes. Aller à dreamspark.com et obtenez l`un des programmes suivants gratuitement, en supposant que vous êtes un étudiant:

• Microsoft Visual Studio 2010

• Expression Studio 4

Si vous n`êtes pas un étudiant, vous pouvez également utiliser Notepad ++, que vous pouvez obtenir assez facilement de notepad-plus-plus.org

Une fois que vous obtenez l`un des programmes et de l`installer, vous pouvez commencer votre expérience xHTML.

Vous pourriez utiliser un Mac ou Linux au lieu de Windows- vous aurez besoin de trouver un éditeur de texte cela fonctionne pour vous dans ce cas. Essayez de trouver celui qui vous montre votre nombre de lignes et le code couleurs pour vous.

• //makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/Leafpad - Un éditeur de texte ultra-léger [Linux]Leafpad - Un éditeur de texte ultra-léger [Linux]Lire la suite

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

Si vous ne souhaitez pas télécharger des outils dédiés, vous pouvez toujours utiliser un éditeur de texte comme Bloc-notes ou Wordpad. Cependant, les programmes ci-dessus sont bien meilleurs outils pour les tests et la conception, ainsi que vous aider avec votre codage comme il vous demande si vous faites une erreur ou si vous essayez de se rappeler le mot correct à utiliser. Simple est mieux, non? Personnellement, j`utiliser Notepad ++ et Microsoft Visual Studio, mais je l`ai entendu beaucoup de grandes choses au sujet Expression Studio 4. Vous devez décider ce que vous aimez mieux, mais tous fonctionnent très bien.

REMARQUE: Pour tester un site Web créé à partir de Bloc-notes ou WordPad:

Le fichier est ouvert, cliquez sur Fichier gt; gt; Enregistrer sous
ce qui est xhtml
entrez à la fin du nom de fichier dans.html et cliquez sur sauvegarder

Ouvrez le fichier nouvellement enregistré (il sera ouvert dans votre navigateur Internet par défaut)

2.1 Apprendre à connaître « le monde »

D`accord, voici le début du voyage. Commençons par simplement mettre quelque chose sur l`écran sur cette page Web. D`abord, vous aurez besoin de savoir ce que sont. le code XHTML utilise balises de début et de fin pour trier ce qui se passe à chaque élément de la page.

Voici un exemple d`une balise de début:

Voici un exemple d`une balise de fin:

Regarde la différence? On a le nom de l`élément enfermé dans les crochets pointus et l`autre est le même, mais a une barre oblique avant le nom de l`élément.

IMPORTANT: Vous devez fermer une balise après avoir ouvert à un moment donné dans le code. Aussi les balises doivent être imbriquées, qui est, ce qui signifie que vous ne pouvez pas faire ce qui suit:

- CA devrait etre . Voyez comment les balises dans à l`autre? Pensez à eux comme des boîtes: vous ne pouvez pas mettre quelque chose de solide dans une boîte et demie.

La meilleure façon d`apprendre à savoir comment programmer est en faisant réellement, théorie donc assez. Juste un point de référence, je vais étiqueter chaque ligne de code avec un numéro pour que je puisse expliquer ligne par ligne ce qui se passe.
ce qui est xhtml
Dans la ligne 1, je l`ai dit le code html et la ligne 5, je l`ai terminé il. À l`intérieur de tag est la , et à l`intérieur du il y a un paragraphe (ligne 3,

). Si vous ouvrez ce dans un navigateur Web, vous verrez ce qui suit venir à travers l`écran:
ce qui est xhtml
Si vous voulez changer le titre de la page à partir de là, vous pouvez facilement le point de vue (. Par exemple firstpage.html) le navigateur ajouter dans la ligne de code suivante:

Entrez le titre ici

Cela rendra votre page Web plus professionnel.

2.2 A partir de la et en descendant la

Dans la plupart des cas, à l`intérieur du il y a un tag et .
le est généralement utilisé pour les scripts en CSS (section 3) et javascript (expliqué dans un manuel à venir), alors que le est généralement le contenu de la page.

Une partie du contenu peut être modifié à l`aide du script dans le , mais le est généralement le contenu qui est inchangeable sur la page. Un exemple serait un court laïus sur le site que vous visitez.

Vous pouvez modifier la mise en forme du contenu à l`aide de CSS (section 3) dans la . Cependant, vous pouvez également apporter des modifications à la mise en forme du .
Un ensemble de balises couramment utilisés qui sont utilisés dans le corps sont les polices d`en-tête. Ces polices d`en-tête varient en taille et force / audace. Il suffit de voir par vous-même ci-dessous:
programmation xhtml

2.3 Est-ce votre image vaut mille mots? - Images

Jusqu`à présent, nous avons seulement parlé de texte et ce qu`il peut faire sur un site Web, mais il y a encore plus. Vous voulez rendre votre site look encore plus attrayante que les polices de fantaisie juste? Essayez d`obtenir quelques bonnes images pour vous faire place vraiment donner quelque chose à regarder public. Méfiez-vous des lois sur le copyright de prendre mieux si-vos propres images si vous avez l`intention de mettre votre site Web sur Internet.

Vous pourriez avoir besoin d`utiliser Photoshop ou des compétences d`imagerie numérique pour créer une grande image ou peut-être améliorer votre propre image et rendre encore plus impressionnant. Essayez ces guides pour quelques conseils et un aperçu:

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

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

Les formats d`image les plus populaires sont les suivantes:

• GIF = Graphics Interchange Format

• JPEG = Joint Photographic Experts Group

• PNG = Portable Network Graphics

Jetez un oeil sur le code ci-dessous et je vous expliquerai ensuite ce qu`il est qui s`entend, comment ajouter des images dans votre page Web.
programmation xhtml

Comme il a été enseigné dans les sections précédentes, nous commençons toujours par la et balises co. Ensuite, la tag est ouvert dans la ligne 5. Sautons juste en bas aux choses importantes ...

Après le paragraphe en cours d`ouverture dans la ligne 9 est ce dont les images sont insérées sur le site. Pour ajouter une image / image vous devez utiliser commencer avec. Ensuite, vous devez indiquer où le fichier est. Habituellement, vous essayer d`avoir ce fichier dans le même dossier que le site Web des fichiers autre que vous devrez entrer le chemin du dossier qu`il existe. Dans le cas ci-dessus, je l`ai utilisé . Cela signifie que la source (Src) de l`image réside dans le même dossier et le nom de ce fichier d`image est picture.jpg. Facile à droite?

Vous ne devez pas ajouter quoi que ce soit plus à créer une image avec un alt propriété, mais vous pouvez ajouter des propriétés à pour faire quelques changements.

Aussi connu sous le nom alt texte, cette valeur de propriété est affiché lorsque vous passez la souris sur l`image.

Vous pouvez remarquer que la ligne 10, j`ai commencé avec l`étiquette et a fini avec / Gt;. Ceci est une autre façon de balises d`ouverture et de fermeture. Ceci est la façon habituelle de créer des images parce que vous pouvez choisir les différentes propriétés de l`image telles que la largeur et la hauteur comme le montre l`exemple ci-dessus.

Dans les lignes 11 et 12 une autre image est insérée mais cela est d`utiliser l`autre procédé de balises d`ouverture et de fermeture. La ligne 10 crée l`image d`une manière beaucoup plus propre FASHION- utilisation que, plutôt que la méthode des lignes 11 et 12.

2.4 Hyperliens où peuvent-ils aller?

2.4.1 Se déplacer « le monde »

Vous voulez montrer à vos amis quelques chouettes sites sur votre site Web, mais ne savent pas comment? Vous êtes au bon endroit, lisez ce qui suit ...

Jetez un oeil sur le code ci-dessous et voir si vous pouvez deviner ce que je fais avant de l`expliquer.
programmation xhtml
C`est vrai, je crée des hyperliens vers certains sites grands et utiles. Au fond de lien hypertexte vers une certaine page Web qui a une adresse Web que vous utilisez simplement la syntaxe ci-dessous:

[Ce que vous voulez lien hypertexte]

Ne semble pas très difficile fait-il? Vous pouvez facilement mettre tout texte là-dedans comme le code exemple ci-dessus. Cependant, il n`y a aucune raison pour laquelle vous ne pouviez pas utiliser autre chose comme une image. Juste un peu d`informations supplémentaires: une URL est un localisateur uniforme de ressources, essentiellement l`adresse Web.

2.4.2 Photos vous rappeler où vous avez été et vous y nouveau

Voici un exemple d`utiliser une image en tant que lien hypertexte:

Je suis sûr que si vous lisez les parties précédentes de cette section que vous relâchiez que c`est un simple mélange créer des images et des hyperliens. La syntaxe est réglée pour avoir les hyperliens sur l`extérieur et l`image à l`intérieur, de sorte à placer un lien hypertexte de l`image insérée.

2.4.3 Vous avez un message - hyperliens menant à un adresse e-mail

Ceci est simplement une répétition de la dernière partie, mais si vous ne l`avez pas fait attention que beaucoup alors juste un regard sur le code ci-dessous:

Au lieu d`utiliser une URL (par exemple http://something.com.) J`utilise ici une adresse e-mail qui consiste à mettre la syntaxe suivante après le signe égal:

« Mailto: [youremailaddress] »

La ligne 10 est l`exemple de base de ce concept. Alors, qui allez-vous envoyer un courriel? Chasseurs de fantômes!

2.4.4 Se déplacer votre monde - interne Hyperliens

Maintenant, vous pouvez voir comment vous obtiendriez autour de votre propre site web. Cela se fait simplement en utilisant votre nom de fichier comme l`URL. Par conséquent, vous pouvez avoir une mise en place de sites comme est indiqué sur le schéma ci-dessous. La syntaxe que vous utilisez irait quelque chose comme ceci:

Page suivante

2.5 Êtes-vous spécial? Ces personnages sont ...

Lorsque vous tapez l`information qui va apparaître sur le site comme contenu, vous pourriez avoir besoin de mettre quelque chose comme un symbole tel que le symbole du droit d`auteur: © ou peut-être inférieur ou supérieur symbole. Mais étant donné que les symboles normaux sont utilisés par la syntaxe de codage, alors il devait y avoir un autre moyen de franchir ce petit obstacle, et la solution utilisait une esperluette (&.), Puis un code court après pour indiquer à l`ordinateur ce symbole de mettre en tableau ci-dessous quelques exemples de caractères spéciaux de codage:

Par exemple, vous pourriez dire:

Il y a &six LT- lignes dans le tableau ci-dessus, mais >- 2 rangs

Il y a lt; 6 lignes dans le tableau ci-dessus, mais gt; 2 rangs

Si vous voulez une plus grande liste des caractères spéciaux, alors s`il vous plaît visitez le site suivant: w3.org/TR/REC-html40/shml/entities.html

2.6 Listes, listes et plus listes

Bon maintenant, nous allons devoir organiser quelques choses, comme une liste de courses. Il existe deux types de listes. Ils sont les:

• Liste ordonnée (nombres, alphabets, chiffres romains)

• Liste non ordonnée (points de balle)

Pour une liste ordonnée vous utilisez les balises suivantes =

Pour une liste non-ordonnée, utilisez les balises suivantes =

Par exemple:

Dans l`exemple ci-dessus, j`inclus les deux types de listes ordonnées ou non. Mais avez-vous remarqué ce que je l`ai fait? J`ai aussi inclus une technique appelée Listes emboîtés. Ces listes imbriquées peuvent être utilisées pour représenter les relations hiérarchiques, comme la liste des ingrédients dans la Obtenez étape Ingrédients de la recette ci-dessus.

Vous pouvez voir que j`ai commencé toute la liste comme une liste ordonnée en ligne 10 et terminé en ligne 23. Entre vous verriez la

et Je l`ai utilisé des tags. Ceux-ci représentent Articles de la liste. Les éléments de liste sont les mots qui apparaissent comme dans la ligne 21: sauce cuisinier
. Les mots sauce cuisinier apparaîtrait à côté du numéro 5 comme il est le cinquième élément de la liste dans une liste ordonnée.

Si vous voulez aller au prochain niveau hiérarchique de points de points ou des chiffres alors nid à l`intérieur se présente comme suit:

2.7 Tableaux ... non pas les maths

Est-ce aussi difficile que vos tables de multiplication? Bien sûr que non, si vous allez sur la bonne façon. Si vous êtes débutant avec ce concept et je suppose que vous êtes, il est généralement préférable de tirer la table que vous voulez faire sur un morceau de papier comme je l`ai ci-dessous:

Maintenant, regardez dans le code ci-dessous:

Maintenant, les mélanger et l`écran ci-dessous devrait vous aider à comprendre comment le tableau est structuré:

UNE

ou plusieurs tables peuvent également être utiles en tant que cadres dans les pages web, un pour le menu, un pour le contenu et un pour l`en-tête.

et gras de la première et dernière ligne, respectivement, à attirer l`attention sur les parties de la table. La plupart des gens regarder le total dans le pied de la table première à droite?

sont les données de table dans les lignes de la table.

est les lignes de la table qui commencent et se terminent sur chaque ligne de code pour la propreté. est bon pour vous assurer que votre table est non seulement un paquet d`informations sans raison de l`existant.

2.8 formes numériques (stylos loin)

En surfant sur le net, vous devrez interagir avec les pages Web que vous rencontrez. Par exemple, à makeuseof.com vous devez entrer votre adresse e-mail ci-dessous cerclé pour vous abonner à la newsletter et des mises à jour quotidiennes de MakeUseOf. Après avoir entré votre adresse e-mail que vous appuyez sur Joindre et cela enverrait l`information (votre e-mail) dans la zone de texte à côté du bouton soit une base de données ou peut-être une autre adresse e-mail. Formes sont utilisés pour ce faire, qui est ce que vous apprendrez dans ce chapitre.

Ci-dessous un formulaire qui est utilisé pour mettre juste votre nom et cliquez sur Soumettre ou Clair:

Voici le code dans les coulisses, que je vais vous expliquer cela peu plus en détail:

Tout d`abord la chose la plus importante dans le script ci-dessus est la ligne 10. Ceci est le début de la forme. La méthode est généralement soit poster ou obtenir. Tout à fait explicite, mais poster envoie les informations quelque part pour faire un disque, comme une adresse e-mail ou la base de données. Par exemple: envoyer une question à réponses MakeUseOf. Obtenir, d`autre part, envoie les informations que vous avez fournies et renvoie des informations de rétroaction, comme un moteur de recherche, d`envoyer les mots-clés de recherche et revenir avec les résultats.

Le bloc de codage ci-dessus est un exemple d`une forme de poste dans lequel vous devez entrer votre adresse e-mail et il serait envoyé à la propriété avec une adresse cachée e-mail après avoir cliqué sur le bouton Soumettre. le tag dans les lignes 19-21 crée la zone de texte sur la page et donne les caractères max disponibles pour être utilisés dans ce domaine.

Lignes 22-25 lieu le Envoyer et Réinitialiser / boutons clairs sur la page, sous la zone de texte. le Réinitialiser bouton supprime simplement le texte saisi dans la zone de texte ou des boîtes sous cette forme. le Soumettre bouton suit les instructions des parties cachées de la forme qui sont créés dans les lignes 14 - 18. Le type caché supposerait habituellement quelque chose automatique ou une partie de quelque chose d`autre utilisé sous la forme actuelle. Dans ce cas, il est celui-ci donnant la postered informations d`une destination, dans ce cas [email protected], avec l`ensemble du sujet, dans ce cas « Email Abonnez-vous », et vous redirige vers une autre page, dans ce cas, la page principale ou « index.html ».

2.9 méta quoi? Pourquoi?

Jamais demandé comment les moteurs de recherche trouver des sites Web? Eh bien en fait c`est ce qu`ils utilisent: éléments méta. Les moteurs de recherche catalogue généralement des sites en suivant les liens vers des pages sur les sites qu`ils trouvent. Ces éléments meta ont des informations sur la page sur eux. Jetez un oeil à l`extrait suivant du code pour un exemple:

Comme vous pouvez le voir ci-dessus, les méta-informations va dans le tag et a les types: mots clés et la description. Le contenu est l`autre partie des informations méta qui est soit les mots-clés ou la description, comme indiqué dans l`exemple.

3. Conception avec CSS

La plupart des gens de temps qui regardent des guides comme ceux-ci arrive tout simplement à aimer jouer à des jeux vidéo. CSS est cependant pas à l`encontre Strike Source, ni un First Person Shooter (FPS) du tout. CSS est une technologie qui fonctionne avec xHTML, et représente Cascading Style Seuilles. xHTML est assez ennuyeux sur lui-même, mais si vous ajoutez une portion équitable de la mise en forme CSS et la présentation de votre création est beaucoup plus intéressant. Les auteurs peuvent apporter des modifications aux éléments sur une page Web telles que les polices, l`espacement, couleurs- cela se fait indépendamment de la structure du document (tête, corps, etc.- ce dans les chapitres suivants seront expliqués). xHTML a effectivement été conçu pour préciser le contenu et la structure d`un document. Il est ne pouvait pas comme xHTML modifications à la mise en forme du contenu. Cependant, cette mise en place est beaucoup plus bénéfique, car elle peut être contrôlée d`un endroit si nécessaire. Par exemple, si le format d`un site Web est entièrement déterminée par une feuille de style ci-joint, un web designer peut simplement mettre en place une autre feuille de style pour changer fortement la présentation du site.

3.1 Inline Styles de danse

Comme mentionné ci-dessus, cette section est tout au sujet de la mise en forme et de styles. Comme il y a plusieurs façons de changer le style de votre contenu et la page, je pensais que ce serait bon de commencer par la plus droite technique avant qui est Styles en ligne. Ceci est réalisé en plaçant le code dans la section de la propriété d`un onglet qui englobe le contenu. Comme ça:

Son trop difficile? Laisse moi te donner un exemple:

Note: La couleur est orthographié Couleur lorsque vous utilisez ce code car il a été créé un endroit pas aussi cool que l`Australie ou Canada- J`espère que cela ne vous dérange pas trop.

Les informations en caractères gras dans l`exemple ci-dessus est la mise en forme qui est en cours de traitement sur le contenu compris dans la

marque. Pour une liste des codes hexadécimaux pour différentes couleurs tout simplement une recherche Google ou utiliser ce site: http: // html-couleur- codes.com/

3.2 Feuilles de style intégrés (Cheat Sheets sont gagnant)

En utilisant les styles en ligne dans la section précédente peut être une douleur si vous avez un site très grand. Mais si vous voulez utiliser les mêmes styles maintes et maintes fois alors pourquoi ne pas utiliser une Feuille de style intégré? Cette option vous permet de créer vos propres styles dans la étiquette du code et vous faire référence dans le code lors de l`insertion un contenu sur votre page. Trop compliqué? Voici un exemple:

Voyez comment le texte change de couleur, la taille ou le format en fonction de la feuille de style en haut? Ce n`est pas très difficile à comprendre non?

Dans la ligne 7 où nous introduisons le début de la tag avec le type: text / css cela est appelé MIME (Multipurpose Internet Mail Extensions) Type qui décrit le contenu existant dans cette balise / fichier. documents CSS utilisent toujours le texte MIME text / css. javascript, qui sera couvert dans un autre volume de ce manuel, utilise le text / javascript un type MIME. Il y a beaucoup de différents types MIME, mais les principaux sont javascript et CSS.

Ligne 16 utilise la .Xtra classe qui a été faite plus tôt. La façon dont cela fonctionne est qu`il ajoute sur la Xtra classe quel que soit le style, il est ouvert sur, par lequel toutes les propriétés d`écraser la Xtra utilise la classe. Par exemple: si un style a la taille de police 20pt et est la couleur verte, et une classe est mis sur sur ce qui a une taille différente de la police, la nouvelle taille de la police remplacera l`ancien, mais le vieux couleur verte continuera comme si.

3.3 Styles en guerre (styles contradictoires)

Il existe trois niveaux de styles et ils sont les suivants:

• L`utilisateur (visualiser le site)

• Auteur (du site)

• User Agent (navigateur)

Les styles se confondent de telle façon à créer la meilleure configuration possible de la position de l`utilisateur. Le tableau suivant montre la hiérarchie des trois niveaux:

Video: Règle 5 "Apprenez en écoutant des histoires" - Apprendre le français avec Français Authentique

3.4 à partir de feuilles de style au-delà (externe)

Ne pensez-vous pas qu`il serait ennuyeux d`avoir à écrire toujours la même feuille de style dans chaque nouveau fichier de codage? Il existe une solution: Les feuilles de style externes. Vous pouvez créer un autre fichier dans le but de l`utiliser pour formatting- c`est un «.css" fichier. Pour l`utiliser dans un autre fichier, tapez simplement dans l`extrait suivant:

Remplacer nom de fichier avec le nom de votre fichier CSS et là, nous allons, ils sont liés. Assurez-vous que votre fichier CSS est dans le même dossier que votre fichier lié (s).
fichier CSS Exemple:

Avant de continuer, je l`ai oublié de mentionner ce que em fait. Au-dessus, vous verrez dans la dernière ligne que j`ai mis « ul ul {-taille des caractères: .8em-} » et cela signifie que la taille de la police sera modifiée à la .8 relative ou 80% de la taille normale que l`utilisateur qu`il veut être en utilisant leur propre feuille de style chargé dans leur navigateur. La plupart des gens ne pas utiliser une feuille de style défini par l`utilisateur si nous inquiétons pas à ce sujet.

3.5 Eléments de positionnement (où ensuite?)

Lorsque vous mettez une image sur une page Web que vous ne voulez pas vraiment juste aller nulle part. Ne vous voulez avoir un mot à dire? Eh bien, c`est comment vous le faites, eh bien il est en fait un exemple et je vais vous expliquer sous peu:

Dans les lignes 9 à 13, vous remarquerez qu`il est une classe avec l`ID comme fgpic et a quelques propriétés utilisées en elle. le position propriété est définie sur absolu ce qui signifie que peu importe la façon dont l`utilisateur change il, l`image reste où votre (l`auteur), il place avec leur code. le Haut et la gauche propriétés désignent un point où sera placé l`élément (image / texte par exemple.). le z-index la propriété est un outil très puissant, car il définit le niveau d`empilement comme indiqué sur la capture d`écran ci-dessous:

Voyez comment l`image de fond est à l`arrière avec la valeur z-index de 1 et le texte est à l`avant avec une valeur z-index de 3, alors que l`image de premier plan est au milieu d`une valeur z-index de 2. Rend regarder assez bien en fait, si vous jouez vos cartes

3.6 Attention à l`environnement (arrière-plan)

Sites Web semblent bonnes avec des fonds non? Ne serait-il vraiment ennuyeux si tous les sites Web avaient juste un fond blanc ou noir? Pourquoi ne pas mettre une photo là-bas et changer la couleur un peu? Il y a quelques propriétés que vous pouvez utiliser pour faire l`arrière-plan de votre page se démarquer un peu plus et donner à la page une fusée éclairante. Jetez un oeil sur le code suivant et voir si vous pouvez travailler à ce que les propriétés mises en évidence font:

Avez-vous travaillé ce qu`il fait? Fondamentalement, l`image de fond est ce que nous allons utiliser en arrière-plan, le chemin de l`image va dans les supports / parenthéses gt; url (ICI). Vous pourriez penser à cela comme ayant une valeur z-index 0, car il est toujours à l`arrière de la page. La position d`arrière-plan de l`image a été mis en bas à gauche, assez explicite non? Ensuite, l`image d`arrière-plan a été répétée à travers l`axe des x de la page (repeat-x) et non seulement cela, mais il est fixé au fond de la fenêtre (background-attachment). Enfin, la couleur a été défini de façon aléatoire pour être principalement rouge. Regardez ci-dessous pour le résultat:

3.7 Quelle ne pensez-vous? (Dimensions des limites des éléments / texte)

Si vous pensez que tout est CSS a à offrir, vous êtes cruellement trompé. règles CSS peuvent spécifier les dimensions réelles de chaque élément de la page. Prenons l`exemple d`une zone de texte. Voulez-vous taper un texte qui ne va pas tout le chemin à travers l`écran, ou peut-être faire une zone de texte qui peut être défilée sans bouger la page? C`est là que vous devriez être là. Voir la capture d`écran ci-dessous pour ce que je viens de décrire:

Maintenant, nous allons jeter un oeil sur le code dans les coulisses:

Juste une petite remarque: la ligne 6 ajoute une bordure marginale sur le fond de chacune des zones de texte. Plutôt cool, non? Mais plus sur les frontières dans la section suivante.

3.8 Qu`est-ce qui se passe autour (frontières)

Je ne pense pas que cela a besoin d`une explication, mais je vais vous donner un de toute façon. Fondamentalement, vous pouvez mettre des bordures autour de quoi que ce soit à peu près si nous allons jeter un oeil à la façon de le faire. Alors, voici le code:

Voici ce que le code fait, essentiellement un assortiment de frontières entourant le nom / s du type de bordure utilisé. Gardez à l`esprit que l`opposé de la rainure est faîte et à l`opposé de encart est d`abord.

3.9 Éléments flottants et Flowing

Il est généralement assez ennuyeux juste pour voir rubrique, puis le texte, puis cap puis texte. Sans faire paraître un peu plus agréable? Il y a une méthode qui peut être utilisé appelé flottant, et maintenant je vais vous montrer comment faire. Flottante vous permet de déplacer un élément d`un côté de l`écran tandis que d`autres contenus dans le document circule alors autour de l`élément flottant. L`élément flottant pourrait être une image ou un en-tête ou même un autre bloc de texte. Maintenant, nous allons jeter un oeil à ce qui ressemble à:

Assez bon pour, maintenant c`est le code assez peu de situations qui construit cette conception:

Est-il pas étonnant que vous pouvez faire si vous trouvez juste la bonne méthode?

3.10 Ne laissez pas tomber le menu déroulant - exemple

Si vous envisagez de créer un site Web, vous allez très probablement besoin d`un menu, à droite? Eh bien, ce pourrait être le bon endroit pour vous d`aller si vous voulez quelque chose qui est non seulement assis là. Les éléments dynamiques font des pages Web semblent mieux et donner une meilleure idée de l`ensemble du site.

L`un de mes types de menus préférés doit être menu déroulant alors maintenant nous allons jeter un oeil à la façon de faire à l`aide d`un CSS. Consultez le code ci-dessous:

Je sais que cela semble un peu intimidant au début, mais si vous être patient et juste à lire, vous comprendrez assez vite.

Ligne 15 dit: quand j`ai lt;divgt; tag class = «menu» Et que la souris flottering dessus afficher la blocs à l`intérieur.

Les lignes 16-21 dire: quand j`ai lt;divgt; tag class = «menu" Et un lt;unegt; tag puis définissez ces formats. Gardez à l`esprit que ces lignes choisissent le format pour les boutons de menu cachés. Les lignes 9-14 mis en place les formats pour le bouton de menu pour faire défiler plus pour montrer au reste du menu.

Ligne 22 dit: quand j`ai lt;divgt; tag class = «menu" Et un lt;unegt; tag et je flotter sur un de ces éléments puis définir le Couleur de fond à un vert différent.

Regardez ci-dessous pour le produit final:

3.11 feuilles de style de l`utilisateur (vous êtes au centre de l`univers)

Les utilisateurs peuvent définir leur propre feuilles de style utilisateur pour faire des pages ressemblent ils les veulent. Il suffit de faire la distinction entre Feuilles de style utilisateur et Auteur Style Sheets. Styles de l`utilisateur sont des feuilles de style externes que les utilisateurs peuvent se créer qui sont tout simplement fait comme les fichiers CSS sans la plupart du codage. Ici, je vais vous montrer un:

Était-ce pas extrêmement simple?

Si vous voulez savoir comment configurer cela dans votre navigateur vous allez simplement Outils gt; gt; options Internet gt; gt; Général gt; gt; Accessibilité gt; gt; Ensuite, définir votre propre fichier La feuille de style Auteur est défini dans le code entre .

4. Plus d`informations

4.1 Pourquoi utiliser xHTML et co. sur la conception et d`autres applications?

Avant de considérer cela comme fait ou quelque chose de semblable à cela, vous devez savoir que cela est simplement un point de vue selon l`endroit où vous vous situez et comment vous pouvez techniquement être d`esprit. J`aime utiliser des langages de programmation pour compléter mes projets, car cela signifie que vous pouvez comprendre ce qui se cache derrière les dessins, alors que l`utilisation des applications de conception comme Adobe Dreamweaver et Microsoft FrontPage vous permettent de créer votre site Web en utilisant uniquement les outils disponibles dans les menus. Par conséquent, les applications de conception sont limitées à l`option de menu qui vous est fourni. En conclusion, il est tout à fait évident que l`utilisation des langages de programmation construirait le site Web ou d`un produit achevé dans quelque chose de beaucoup plus attrayante que sa fonctionnalité est uniquement limitée par la compétence du programmeur avec la langue désignée (par exemple. javascript, CSS, xHTML). Je sais que vous pensez probablement que je suis partial, mais il vous faudra juste essayer à la fois et de décider combien d`effort vous voulez mettre dans votre travail puis choisissez vos outils appropriés pour vous rendre à votre destination. Vous pouvez même choisir d`utiliser les deux à la fois depuis Dreamweaver et FrontPage ont une « vue codage » et une « vue de la conception ».

Il existe d`autres façons de créer des sites Web comme utilisant Joomla et WordPress.

4.2 Joomla

Joomla est un système de gestion de contenu (CMS) avec beaucoup de flexibilité et d`une interface utilisateur facile à utiliser que beaucoup de gens intimidés quand ils se rendent compte combien d`options et de configurations sont disponibles. Joomla est une plate-forme basée sur PHP et MySQL. Ce logiciel est open-source que vous pouvez obtenir à partir http://joomla.org/download.html

Si vous voulez en guide détaillé sur Joomla essayer ce guide de MakeUseOf: //makeuseof.com/pages/download-the-complete-beginners-guide-to-joomla

4.3 WordPress

WordPress est un système de gestion de contenu (CMS) qui permet aux utilisateurs de créer et maintenir un site Web par le biais d`une interface d`administration, y compris une structure de navigation générée par automatically-, sans avoir besoin de connaître le langage HTML ou d`apprendre tout autre outil. WordPress est un logiciel open source créé par des milliers de programmeurs à travers le monde et de mettre dans le domaine public, de sorte que vous ne devez pas payer pour l`utiliser. WordPress est une application basée sur le Web, écrit en PHP et MySQL, conçu pour fonctionner sur des serveurs Linux: PHP est un langage de programmation pour les applications Web, MySQL est une base de données relationnelle (comme MS Access) et Linux est un système d`exploitation pour le Web serveurs - tous ces éléments sont également open source. WordPress est, de loin, le CMS le plus populaire avec plus de 200 millions de sites dans le monde entier à partir de fin 2009.