Comment faire un (simple) mise en page personnalisée Profil - Partie I, HTML

Termes importants

Voici quelques termes et concepts clés dont vous aurez besoin de comprendre pour faire votre propre mise en page:

Votre code HTML sera ci-dessous .

- . UNE

est une section (ou division) de votre profil. Une table est la subdivision d'un div. Dans votre HTML, et divs tables construiront votre mise en page; alors vous allez utiliser les CSS pour changer la façon dont ils regardent.

L'ouverture et la fermeture. Chaque fois que vous utilisez un code d'ouverture en HTML, vous devez avoir un code de fermeture lorsque vous avez terminé. Fermeture des codes commencent toujours par des barres obliques avant. Alors

définit le début d'une division dans votre code et

met fin à la division. Il y a quelques exceptions à cette règle, comme le code pour insérer des images et le code pour créer un saut de ligne.

Rendre votre mise en page - HTML

introductions assez; le temps de commencer à faire votre mise en page! Prenez une grande respiration et commençons.

Accédez à votre page d'édition de profil personnalisé en allant à Mon Mibba >> Profil >> Profil personnalisé. Si vous avez déjà un code et que vous pouvez l'utiliser à nouveau, l'enregistrer dans un fichier texte sur votre ordinateur ou dans un projet sur Mibba. Votre mise en page doit être vide. Prêt pour une étape? Il est assez simple. Coller dans votre mise en page:

Pas si mal, hein? Nous avons créé une division pour maintenir notre contenu, qui est en ce moment un seul mot. Essayez de soumettre vos modifications et regarder votre profil personnalisé. Ça devrait ressembler à ça. Assez ennuyeux jusqu'à présent, mais vous venez de prendre votre premier pas vers votre propre mise en page!

Maintenant, nous allons ajouter une identification à notre div afin que nous serons en mesure de changer son apparence avec CSS (qui viendra plus tard, mais il est important d'ajouter des identifications que vous allez). Une identification ressemble à ceci: id = « nom ».

Changer votre code HTML pour ressembler à ceci:

(Note: Tout le code ajouté sera en gras.)

Notre div conteneur tiendra tout le contenu de notre profil. Il sépare le contenu de notre profil de l'arrière-plan de la page. Maintenant, nous allons briser notre mise en page plus bas avec une table, ce qui nous permettra de diviser notre disposition en autant de parties que nous voulons.

Les tables ont trois parties:

. qui est la table entière; . qui est une ligne de la table; et

Notez la
à la fin de notre texte de remplissage afin que notre texte modifié commencera sur la ligne suivante. Nos quatre modificateurs de texte peuvent faire beaucoup plus que les comportements par défaut, vous verrez sur votre profil maintenant, mais c'est quelque chose que nous contrôlons avec CSS.

Votre mise en page devrait ressembler à ceci. Vous pourriez vous demander pourquoi tout a été poussé sur le côté gauche de l'écran quand il était au milieu avant - cela est arrivé parce notre texte de remplissage n'a pas de pauses. Étant donné que nous ne disons pas notre conteneur div la largeur d'être, il est automatiquement aussi large que l'écran. Nous allons corriger cela avec CSS.

Votre code HTML devrait ressembler à ceci:

Nous avons notre disposition entière, mais il ne semble pas très joli. C'est là CSS entre en jeu! Avant de commencer CSS, il faut ajouter une chose à notre code:

Entre ces deux lignes, nous allons ajouter notre code CSS. Découvrez comment créer le CSS pour aller avec cette mise en page ici!

Derniers tutoriels

Ne pas déranger

Articles Liés

Précédent ◈ Suivant

. qui est une division de la table (colonne). Une table a besoin les trois parties à travailler, même si la table a juste une ligne et une colonne.

Modifiez votre code HTML pour inclure une table.

Votre mise en page sera le même aspect, mais maintenant nous avons des divisions internes pour travailler avec.

Ensuite, nous allons ajouter des ID. Vous avez besoin d'une carte d'identité pour votre table et votre TD, mais pas pour votre TR, car TRs ne sont jamais codés pour CSS.

Maintenant que nous avons ID, il y a quelques règles dont nous avons besoin de parler pour les tables. Tout d'abord est cellspacing. Cellspacing définit à quel point la distance qui existe entre les cellules d'une table. Si vous avez mis en haut, il y aura des lacunes distinctes entre vos cellules. Le code pour définir cellspacing est la suivante: cellspacing = « 0 » (ou quel que soit le numéro que vous choisissez).

La deuxième est la frontière de la table. La frontière qui apparaît est automatiquement généralement peu attrayant. La frontière est définie avec ce code: border = « 0 » (ce nombre est l'épaisseur de la frontière - à zéro, la frontière ne sera pas affiché du tout).

Votre code HTML devrait ressembler à ceci:

Contenu

Ensuite, nous allons centrer notre disposition. Il est un code très simple:

Votre page de profil devrait ressembler à ceci.

(Note: Wordsenclosed comme en HTML ne sera pas une incidence sur votre mise en page. Ils sont juste des étiquettes pour vous aider à garder une trace de tout. Vous pouvez les enlever si vous le souhaitez, ou ajouter d'autres. )

Maintenant, votre profil ressemblera à ceci.

Nous avons un problème, cependant: nous voulons faire les passes de touché dans les lignes A et C deux fois plus large que la TDs dans la ligne B. Pour ce faire, nous avons besoin d'un code appelé colspan. Colspan raconte une division la largeur d'être. Nous allons ajouter colspan = « 2 » à TDs un et quatre afin qu'ils seront deux fois plus large que TDs deux et trois.

Votre code HTML devrait ressembler à ceci:

Contenu
Contenu	Contenu
Contenu

Tout d'abord, nous allons ajouter des en-têtes. « En-tête » est ce que les titres sont appelés dans la conception web. Nous allons ajouter des en-têtes en ajoutant

Entête

. « En-tête » est le texte qui va montrer réellement sur votre mise en page. La classe est un type d'ID qui est utilisé pour faire tout dans cette classe la même apparence. Nous pourrions utiliser une carte d'identité au lieu d'une classe, ou nous pourrions utiliser les deux, mais pour ce tutoriel nos têtes sera le même style - donc en utilisant la classe, nous ne devons dire en-têtes quoi ressemblent une fois dans notre CSS pour tous nos têtes pour regarder la même chose.

Ajoutons-têtes à chacun des TDs dans notre profil.

Entête Contenu
Entête Contenu	Entête Contenu
Entête Contenu

(Votre profil doit ressembler à ceci. Comme nous l'avons pas dit têtes quoi ressemblent encore, ils regardent toujours comme du texte normal. Ne vous inquiétez pas, nous allons corriger cela avec CSS!)

(Le reste de votre code devrait encore être là, mais pour économiser de l'espace, nous allons simplement regarder TD « un » pour voir comment ajouter une image Nous ferons la même chose pour ajouter d'autres types de contenu -. Simplement n » t supprimer quoi que ce soit autre que le mot « contenu »!)

Maintenant, votre mise en page ressemblera à ceci.

Ajoutons quelques liens à nos TDs à la ligne B, deux et trois. Les liens sont désignés en HTML et CSS avec le code . En quittant l'URL dans notre mise en page est un peu laid, bien, alors nous allons cacher l'URL dans le texte. Pour ce faire, nous utilisons ce code: Texte .

Voici à quoi devrait ressembler la ligne B:

Votre mise en page va maintenant comme ça. Vous pourriez vous demander pourquoi tous les liens sont sur une seule ligne - c'est parce que en HTML, en appuyant sur entrée ne crée pas de saut de ligne dans votre mise en page. Pour créer un saut de ligne, vous devez ajouter le code
ou
. Ajouter
après chaque dans votre code et votre mise en page ressemblera à ceci.

Maintenant, nous allons ajouter un texte. Comme vous l'avez vu lorsque votre profil vient de se tenir le mot « contenu », vous ne avez pas besoin de codes spéciaux pour insérer du texte. Vous avez besoin de codes pour rendre le texte en gras, italique, barré ou souligné. Ajoutons un texte de remplissage à quatre TD et des exemples de chacun de ces quatre modificateurs de texte:

Entête

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne tempor eiusmod incididunt ut labore et dolore magna aliqua. Enim ad minim Ut veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor à reprehenderit dans voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt dans culpa Qui officia deserunt mollit anim id est Laborum.

Audacieux | Italique | ~~biffés~~ | Souligner