Comment créer des documents HTML
HTML signifie h ypertext m arkup l anguage. Fondamentalement, il est un simple fichier texte avec des commandes intégrées en elle. Les commandes indiquent le navigateur Web (Netscape) pour effectuer certaines tâches, par exemple pour afficher un mot en italique, ou présenter une image. Les commandes sont intégrées dans le fichier, par exemple, pour faire un mot en gras, vous tapez
Les fichiers HTML sont des fichiers texte ASCII simples. ASCII est un ensemble de normes informatiques, et un fichier texte ASCII est l'un des types de fichiers les plus simples. En soi, ASCII ne supporte pas mise en gras, en italique, les onglets, et la plupart des autres options de formatage que nous sommes devenus habitués. Ce type de mise en forme nécessite un type de fichier différent, plus élaboré. De nombreux traitements de texte ont leurs propres types de fichiers propriétaires (propriété de la société) pour soutenir la mise en forme. Cela a conduit à une tour de Babel en matière de traitement de texte; parfois une version du logiciel d'une entreprise ne sera même pas capable de lire un fichier créé par une version antérieure du même logiciel! À peu près tout traitement de texte, cependant, peut lire un fichier ASCII, et est donc capable de lire et de créer un fichier HTML (bien qu'il pourrait ne pas être en mesure d'interpréter et montrer le formatage correctement).
Les fichiers HTML diffèrent de, disent les documents Word que vous créez avec Microsoft Word. Les fichiers Word sont un exemple de l'un de ces formats propriétaires de fichiers de traitement de texte; normalement, ils se terminent par le DOC d'extension. Word peut, cependant, lire et écrire des fichiers HTML directement, et les afficher dans la configuration appropriée sur l'écran. Vous devez savoir, cependant, qu'il est possible d'utiliser Word pour convertir des documents Word existants en fichiers HTML et préserver la plupart de leur mise en forme (Word fait certaines choses qui ne peuvent pas être reproduits en HTML, par exemple en bas de page). Et, bien sûr, vous pouvez convertir un document HTML dans Word; ce qui vous permet de reformater le document HTML pour l'impression.
D'autres fichiers qui sont importants en HTML sont les fichiers d'image. Pour nos besoins, ceux-ci comprennent des fichiers GIF et JPG. Ces images peuvent être insérées dans un document HTML. Si vous avez des images dans un autre format que vous souhaitez inclure dans un fichier HTML, vous devez d'abord les convertir en fichiers GIF ou JPG à l'aide d'un programme tel que LviewPro ou Paint Shop Pro. Les fichiers BMP utilisés dans Windows ne peuvent pas être utilisés dans un fichier HTML sans être converti. Les deux fichiers GIF et JPG ont l'avantage d'être fortement comprimé. Les fichiers GIF peuvent avoir un format entrelacé et / ou un fond transparent. La fonction entrelacée permet à l'utilisateur de voir une image floue qui devient plus clair que les charges d'image. Le fond transparent permet d'attribuer une couleur à l'image d'être « transparent » et donc l'arrière-plan « à travers ». fichiers JPG sont souvent plus fortement compressés et donc prennent moins de place sur l'ordinateur hôte.
Vous remplacer le nom de votre e-mail juste après la
S'il n'y a pas de fichier index.html dans le répertoire, une liste de tous les fichiers du répertoire est affiché.
Pour placer un fichier sur Mcnet pour le monde à voir, vous devez disposer d'un programme de transfert de fichiers tel que WS_FTP (qui est disponible sur l'un des ordinateurs de laboratoire sur le campus) et le mot de passe pour le répertoire que vous voulez placer les fichiers dans .
Comme mentionné ci-dessus, il est possible de créer un fichier HTML en utilisant un simple éditeur, comme le Bloc-notes Windows propre. L'utilisation d'un traitement de texte (sans capacités HTML direct) est maladroit, cependant, que vous devez connaître le code et le saisir. De plus, vous ne serez pas en mesure de voir où les graphiques vont finir, ou ce que le texte la mise en forme ressemblera.
Pour cette classe, nous allons utiliser Frontpage Express, pour plusieurs raisons. Tout d'abord, il fonctionne comme un traitement de texte basé sur Windows classique. Pour un mot gras, vous mettez en surbrillance le mot et sélectionnez gras dans un menu; tout en utilisant la souris. Vous ne devez pas savoir ou tapez la commande. En second lieu, dans une certaine mesure, avec Frontpage Express, what-you-see-is-close-à-ce que quelqu'un d'autre-sera-get-avec-Netscape (WYSICTWSEWGWN). Les différences surgiront en raison des différences matérielles telles que la taille de l'écran; mais il est proche. La principale raison pour Frontpage Express, cependant, est qu'il est gratuit. Les bonnes gens de Microsoft veulent que vous puissiez utiliser leur navigateur Web, et de fournir ce logiciel en retour. récompense Alors leur générosité en les essayant.
Pour exécuter FrontPage Express, allez dans le menu Démarrer: Programmes: menu d'Internet Explorer et sélectionnez FrontPage Express.
D'autres logiciels que vous utiliserez comprend LView Pro (pour manipuler des graphiques) et NetScape (pour tester vos pages).
Cette section décrit quelques-unes des choses que vous pouvez faire sur une page Web. Pour chaque élément, la séquence de menu pour arriver à cet élément sera donné.
Titre (barre d'outils sous la case URL): Vous pouvez taper le titre de votre page ici; Netscape affiche le titre de la page dans la barre de titre en haut de l'écran. S'il vous plaît choisir un titre descriptif (et sort bien!)
Couleur de fond (Format-page Attributs): Vous pouvez sélectionner une couleur pour l'arrière-plan; tous nos fichiers utiliseront blanc simple pour les rendre lisibles sur autant d'ordinateurs que possible.
Couleur du texte (Format-page Attributs): Vous pouvez également changer la couleur du texte principal ici; Cependant, pour nos besoins, nous allons utiliser le noir.
Arrière-plan (Format-page Attributs): Une image de fond peut être attribué. Pour nos besoins, nous n'utiliserons aucun fond autre que blanc uni. Pour les autres projets, cependant, vous pouvez insérer un fichier GIF ou JPG pour servir de fond; l'image sera carrelée (répétée) en arrière-plan et le texte et d'autres graphiques semble « en haut » de l'image d'arrière-plan.
Il existe d'autres attributs de page qui peuvent être ajustés, mais ils sont au-delà de ce que nous allons faire.
Règle horizontale (élément horizontal Règle): Ceci est un diviseur qui traverse la page:
Je trouve plutôt simple et ont tendance à utiliser un fichier GIF d'une barre de couleur au lieu.
Liens, ancres andImages seront discutées séparément.
Styles (type de style Format-Type): Le texte qui suit Styles de type peuvent être sélectionnés:
Remarque: Toutes ces éléments sont disponibles dans FrontPage Express
Type Styles en HTML
Mise en forme du paragraphe (Format-paragraphe): Les paragraphes peuvent être formatés dans une variété de façons:
Ce paragraphe est formaté dans le style blockquote:
abeba dsjdsj dsjkfdsjds dsklewiew dsksmmsj s ;; s; sl.slds saodslkfkd skewjd, dl; fj saldfli dfkfik dsksks fdskgfks, sdklfks kskjfkm, sklfms l slkfdklw l; ewklefm slaskldfs welsdkdsjk dsksjfds skfsjkf sfdksksks slsklsjk skskfs sfksksk skskwik slkskl; erot, SDL, fs lsdfd ;; tg tg''yltg re ; dl; fdkrei fdkdfj rejkfdj fedjkrfejred ewjkfdj dfjfu aja dsjwm saks sem dqakla aldk a, AKD kaka akmajd ajaj akaka akmakakm un Aklak akakd lamlweole elrl, a w,, lewlew; lw; w; wl; wl wlwlred ehsyds dsgdsbdsr dsgdsagdart sacgdgt asgdgat asgdgag agdg BABA dsjdsj dsjkfdsjds dsklewiew dsksmmsj s ;; s; sl.slds saodslkfkd skewjd, dl; fj saldfli dfkfik dsksks fdskgfks, sdklfks kskjfkm, sklfms l slkfdklw l; ewklefm slaskldfs welsdkdsjk dsksjfds skfsjkf sfdksksks slsklsjk skskfs sfksksk skskwik slkskl; erot, SDL, fs lsdfd ;; tg tg''yltg re ; dl; fdkrei fdkdfj rejkfdj fedjkrfejred ewjkfdj dfjfu aja dsjwm Saks semaine dqak
Ce paragraphe est formaté en préformaté style paragraphe:
abeba dsjdsj dsjkfdsjds dsklewiew dsksmmsj s ;; s; sl.slds saodslkfkd skewjd, dl; fj saldfli dfkfik dsksks fdskgfks, sdklfks kskjfkm, sklfms l slkfdklw l; ewklefm slaskldfs welsdkdsjk dsksjfds skfsjkf sfdksksks slsklsjk skskfs sfksksk skskwik slkskl; erot, SDL, fs lsdfd ;; tg tg''yltg re ; dl; fdkrei fdkdfj rejkfdj fedjkrfejred ewjkfdj dfjfu aja dsjwm saks sem dqakla aldk a, AKD kaka akmajd ajaj
Il existe 3 types de listes, numérotées, et la définition puces:
- premier élément
- deuxième article
- troisième article
- premier élément
- deuxième article
- troisième article
Les graphiques peuvent ajouter beaucoup à une page Web; Cependant, ils ne prennent beaucoup de temps à charger, et pas tout le monde dispose d'un navigateur graphique-capable.
Il est facile d'ajouter des graphiques aux documents HTML avec FrontPage Express. Il y a un bouton sur la barre d'outils pour le faire, et vous pouvez également utiliser la commande de menu Insertion: l'image pour ouvrir une boîte de dialogue. Dans la boîte de dialogue, on vous demande ce que l'image que vous voulez apporter, ce texte à afficher sur les navigateurs non graphiques, la façon dont vous voulez que l'image aligné, que ce soit ou non d'ajouter une bordure, etc. Pour ajouter une image, vous répondez toutes les questions. Utilisez le bouton Parcourir pour lister tous les fichiers graphiques sur votre disque, et choisissez l'un d'entre eux.
Une fois qu'une image est chargée, vous pouvez cliquer et faire glisser sur sa bordure pour changer sa taille. Cela ne réduit pas nécessairement le temps qu'il faut pour charger le graphique, mais il peut aider votre mise en page. Rappelez-vous que le graphique plus vaste et complexe, plus il faudra charger, en particulier pour quelqu'un avec une connexion par modem. Vous ne voulez pas ennuyer vos lecteurs trop en les faisant attendre inutilement graphiques volumineux ou étrangers. Les deux graphiques ci-dessous sont la même image, mais mis à l'échelle à deux tailles différentes:
Plusieurs autres considérations sur les images. Les images stockées dans le GIF 87 « saveur » ne sont pas des fonds transparents; les images enregistrées dans la « saveur » GIF 89 peuvent avoir des arrière-plans transparents si un fond transparent est défini. La documentation suivante est à partir du fichier d'aide Pro LView:
GIF89a et couleurs transparentes
Les deux images suivantes sont identiques, sauf que l'image à droite a des couleurs transparentes et l'autre ne fonctionne pas. Les deux sont entrelacés:
Soit dit en passant, FrontPage Express ne pas afficher de toujours GIF transparent correctement - vous devez utiliser Netscape pour voir la différence dans les chiffres ci-dessus.
Hypertext signifie simplement la possibilité de sauter d'un endroit à placer dans le texte, ou même entre documents (fichiers). En HTML, cela se fait par des liens. Le navigateur est dit où sauter lorsque l'utilisateur clique sur une zone de texte particulier (ou sur un graphique); le navigateur recherche alors la nouvelle URL.
L'autre type de lien va vers un document externe. Il pourrait être un autre fichier hypertexte dans le même répertoire, ou il pourrait être une URL sur un ordinateur en Nouvelle-Zélande. Pour faire le lien ici, tout ce que vous avez à faire est de mettre en évidence le texte (ou graphique) que vous voulez que l'utilisateur de cliquer sur pour activer le saut. Ensuite, utilisez l'insertion: élément de menu Hyperlink pour ouvrir la boîte de dialogue. Maintenant, tapez l'URL dans la boîte.
Rappelez-vous que les URL peuvent changer, et vous devrez surveiller vos liens vers des documents externes afin d'assurer qu'ils sont à jour. Un « rapide » façon d'obtenir et de faire des liens est d'utiliser Netscape et FrontPage Express ensemble. Démarrez FrontPage Express et ouvrez votre document. Ensuite, utilisez le triangle vers le bas dans le coin supérieur droit de la fenêtre FrontPage Express pour réduire FrontPage Express. Maintenant, ouvrez Netscape, et utiliser ses capacités de recherche pour trouver les documents que vous souhaitez créer un lien vers le vôtre. Utilisez la souris pour mettre en évidence l'URL dans la fenêtre Netscape, puis appuyez sur les touches Ctrl et C simultanément. Cette copie l'URL du Presse-papiers de Windows. Maintenant, réduire Netscape en utilisant son triangle vers le bas, et restaurer FrontPage Express. Mettez en surbrillance le texte où vous voulez que le lien soit et ouvrir la boîte de dialogue de liaison à travers le Insérer: Menu Hypertext ou le bouton de lien. Placez le curseur dans la zone supérieure de la boîte de dialogue et appuyez sur les touches Maj et Insertion simultanément. Quittez le dialogue et le lien est fait. Enregistrez votre document (mais ne fermez pas); réduire FrontPage Express et restaurer Netscape pour rechercher un nouveau lien.
Les tableaux sont une grande aide dans le maintien d'une mise en page graphique sur une page, ou tout simplement comme un moyen d'afficher des données tabulaires. Une table peut contenir du texte ou des graphiques, ou les deux.
Une table peut être un moyen rapide pour afficher votre texte de façon colonnaire. Certaines personnes trouvent des colonnes plus facile à lire, parce que les yeux ne doivent voyager-et-vient autant.
Alors que vous avez un certain contrôle sur la largeur des colonnes, ne vous inquiétez pas trop parce que vous avez aucun contrôle sur le navigateur à l'autre extrémité, ou sur la largeur de l'écran que le lecteur est utilisé, ou sur un nombre quelconque de d'autres variables.
Les tableaux peuvent avoir les frontières indiquées, ou non, à votre discrétion. Ce tableau ne présente pas les frontières indiquées. Vous pouvez également contrôler la façon dont le texte ou les graphiques dans chacune des cellules soit aligné avec le autres cellules dans la même ligne ou colonne.
Dans l'ensemble, les tables sont un outil puissant et FrontPage Express vous donne un moyen facile de les mettre en œuvre.
Le matériau dans la deuxième colonne peut être importante « sidebar », ce qui est intéressant, mais périphérique à la poussée principale de votre histoire. Il est un excellent moyen d'ajouter des informations supplémentaires sans détruire le flux de votre article principal.
Vous devez enregistrer votre travail régulièrement. Je vous conseille la mise en place d'un sous-répertoire sur le disque dur (généralement C) de l'ordinateur de laboratoire que vous travaillez, et transférer tous vos fichiers sur le disque dur (utilisez le Gestionnaire de fichiers Windows pour configurer le répertoire et transférer les fichiers) . Ensuite, démarrez FrontPage Express et ouvrez vos fichiers sur le disque dur - cela vous donnera de meilleures performances que si vous travaillez à partir de la disquette. Lorsque vous avez terminé avec une session d'édition, utilisez le Gestionnaire de fichiers pour copier tous vos fichiers du disque dur sur la disquette (ne pas le faire dans l'autre sens et copier les anciens fichiers de votre disquette sur les nouveaux fichiers sur le disque conduire!!). Utilisez une disquette unique pour vos articles et graphiques ci-joints, ne pas t lieu tout autre matériel (par exemple des choses pour les autres classes) sur la disquette. Dans certaines classes, vous serez dirigé pour enregistrer votre travail sur le serveur.
Des soins appropriés et se rendre au travail dès le début d'un projet vous aidera à éviter des problèmes de dernière minute. Enregistrer tous les projets de vos articles, faire plusieurs sauvegardes et vous donner le temps de faire face à l'imprévu. Je serai plus indulgent avec les étudiants qui peuvent documenter le fait qu'ils avaient travaillé de façon constante sur un projet, par opposition à ceux qui ont commencé la veille et a rencontré des problèmes.
Un inconvénient de FrontPage Express est qu'il ne vous permet pas d'exécuter une vérification orthographique. Il y a deux façons de contourner cela. Un, écrire le document dans Word, et vérifiez l'orthographe là. Puis l'enregistrer comme un document HTML, et ré-ouvrir dans FrontPage Express pour faire le montage final. Juste être sûr de ne pas faire d'erreurs! L'autre solution consiste à travailler sur le document dans FrontPage Express, enregistrez-le, puis ouvrez-le dans Word pour la vérification orthographique.
Pourquoi ne pas simplement utiliser Word dès le début? Eh bien, l'éditeur HTML est maladroit, et la réponse est lente. En outre, le code HTML ne semble pas dans Word la façon dont il sera dans la plupart des navigateurs.
Lorsque vous concevez votre article, essayez de trouver un équilibre entre les différents éléments. Les graphismes sont très bien, mais ils ralentissent le chargement de votre page, afin de les utiliser uniquement en cas de besoin (bien que j'attendre chaque article d'avoir quelques éléments graphiques). Les colonnes peuvent « habiller » une page, mais si elles sont utilisées négligemment ils peuvent rendre votre article confus. Plutôt que de répéter ce que l'on peut trouver ailleurs, vous pouvez utiliser des liens pour permettre au lecteur d'obtenir plus de profondeur sur un sujet - c'est la beauté de l'hypertexte. Ne pas utiliser des couleurs et des tailles de texte variable aléatoire - être cohérent, et d'utiliser ces appareils peu de peur qu'ils ne perdent leur impact (ou tout simplement mal paraître).