Comment faire une page Web


Original: http://terpconnect.umd.edu/~toh/HowToMakeAWebPage.html

 

Tom O’Haver (http://terpconnect.umd.edu/ ~ HO / HowToMakeAWebPage.html
http://tom.ohaver.googlepages.com/howtomakeawebpage
Révisé 22 Juin, 2008

Table des matières

La structure d’une page Web
Les pages Web sont en fait des fichiers texte qui sont “marqués” avec des symboles pour représenter la structure et la fonction. Vous pouvez préparer et modifier des pages Web dans un éditeur de texte ou traitement de texte vous. Le système d’étiquettes, appelé HTML (HyperText Markup Language), est très logique et pas difficile à apprendre. Cependant, vous n’avez pas vraiment besoin de parler couramment HTML pour créer vos propres pages Web. Il existe plusieurs raccourcis qui ont été développés pour simplifier le processus.

Les icônes, des images, des extraits sonores et des clips vidéo qui sont communs sur les pages Web sont en fait des fichiers distincts qui sont visés par les codes HTML spécifiques. Lorsque la page est affichée par un navigateur Web, tel que Firefox ou Internet Explorer, ces codes HTML sont interprétées par le navigateur, qui tire dans tous les fichiers séparés et assemble la page Web sous la forme que vous voyez enfin. Ceci est en contraste à un traitement de texte moderne, dans laquelle les fonctions d’édition et de visualisation sont intégrés dans un programme et dans lequel tout le texte, les graphiques et les autres éléments du document sont contenues dans un fichier de document. Pour cette raison, le processus de création de pages Web est moins direct que la création d’un mot document de traitement équivalent.

L’écriture des pages HTML
Le texte reste la partie la plus importante de la plupart des sites Web, et donc sera le premier élément considéré ici. Tout le texte d’une page Web est contenu dans un fichier texte ASCII qui est «marqué» avec les codes HTML et est habituellement donnée un nom de fichier qui se termine par “. Html”. Le «Corps de texte» de la page est simplement écrit en texte brut dans le fichier html. Vous pouvez utiliser n’importe quel éditeur de texte pratique pour écrire vos fichiers HTML, par exemple, SIMPLETEXT sur le Mac ou le bloc-notes sur Windows.

Si vous apprendre le HTML?
Apprendre HTML vous permettra de personnaliser vos pages Web. Il n’est pas difficile à apprendre; en fait, il s’agit d’un système très logique qui a un certain attrait. Essayez de regarder mon Tutoriel HTML d’introduction, avec des exemples pratiques. Il explique tous les aspects essentiels de HTML. Il ya des sections sur le formatage du texte, des graphiques, des hyperliens, des sons, des listes, des tableaux, des couleurs et des motifs de fond, etc

Dois-je acheter un éditeur Web?
Pas vraiment. Tout ce que vous avez vraiment besoin est d’un navigateur Web et l’éditeur de texte fourni avec votre ordinateur. Il n’est pas nécessaire d’être lié à un éditeur Web commercial qui finira par devenir obsolètes ou exiger la mise à niveau vers une nouvelle version. Les éditeurs Web ne, cependant, il est facile de créer des pages Web de fantaisie avec beaucoup de cloches et de sifflets. Mais vous n’avez pas réellement besoin de dépenser de l’argent; il ya de bons éditeurs gratuits web que vous pouvez télécharger, comme Kompozer (tir à l’écran). Ceux-ci fonctionnent un peu comme les traitements de texte, mais ils incluent des fonctionnalités supplémentaires pour créer des liens, de la gestion du site, le téléchargement de pages sur votre serveur, les feuilles de style en cascade, etc Il existe également sur le Web les éditeurs de pages qui font tout dans un navigateur Web, par exemple facile à utiliser mais quelque peu limitée Page Creator de Google.

Modèles HTML
Si vous ne voulez pas apprendre le HTML tout de suite, vous pouvez toujours créer des pages Web en utilisant un modèle créé par quelqu’un d’autre qui a toutes les balises HTML nécessaires sont en place et que vous tapez ou collez votre texte. Juste Google “modèles HTML» ou «web templates” et vous trouverez des milliers de couleurs, des modèles joliment conçus à télécharger.

Si vous êtes un enseignant à la recherche de modèles simples pour la construction de salles de classe site Web, voir Utilisation de modèles pour produire des Web-publiables projets multimédias. Il existe des liens là-bas à des jeux téléchargeables de modèles pour la création de sites Web de classe tout le projet, tels que des diaporamas, des abécédaires, etc Instructions complètes d’étape par étape sont inclus.

Pour la modification des modèles, je recommande NoteTab lumière, un multi-fichiers éditeur de texte freeware qui permet à tous les fichiers d’un modèle à être ouverts à la fois et effectue rechercher et remplacer des fonctions dans tous les fichiers d’un modèle simultanément. Idéal pour changer le fond et la couleur du texte à travers un modèle entier, l’ajout d’images et de sons liens, ou de modifier les types de fichiers graphiques ou sonores à travers un site multi-page.

Quelques conseils sur la création de pages Web
Si vous développez une page Web en utilisant un éditeur de texte pour écrire en HTML, il est commode de garder votre navigateur Web et le fichier html ouvert dans un éditeur de texte (tel que le Bloc-notes, NoteTab, ou SimpleText) en même temps. Pour afficher la page telle qu’elle apparaîtra dans votre navigateur Web, cliquez sur la fenêtre du navigateur, déroulez le menu Fichier et sélectionnez Ouvrir fichier, sélectionnez le fichier html et cliquez sur Ouvrir. Si vous voulez faire un changement, cliquez sur la fenêtre de l’éditeur de texte, modifiez le texte html, Enregistrer, puis cliquez sur la fenêtre du navigateur et cliquez sur le bouton Recharger.

Vous pouvez trouver plus facile de taper votre texte dans votre traitement de texte favori, où vous aurez accès à un correcteur orthographique, etc, puis copiez et collez le texte dans le modèle. N’essayez pas de formater le texte dans le traitement de texte, comme la mise en forme est perdue lorsque le texte est copié et collé, à moins que vous “Enregistrer sous …” dans le format HTML, puis copier et coller le code HTML dans votre modèle. Au contraire, les codes de mise en forme peuvent être ajoutés à la suite du texte. Ne vous inquiétez pas la longueur de ligne et les sauts de ligne; navigateurs Web ignorent les retours chariot et les autres caractères de saut de ligne et formater automatiquement le texte à la largeur de la fenêtre (qui est contrôlé par l’utilisateur, et non par l’auteur). tag between paragraphs. “>Pour séparer les paragraphes, ajouter un <p> entre les paragraphes.

Vous pouvez utiliser votre traitement de texte pour créer et modifier des modèles HTML, mais n’oubliez pas d’enregistrer sous … en format texte seulement.

Conversion de fichiers traitement de texte au format HTML
Vous pouvez utiliser la fonction “Enregistrer au format HTML» de commande pour convertir vos documents en HTML. Il convertit automatiquement la partie texte du document en format HTML et enregistre tous les graphiques dans le dossier document aa séparé. Par conséquent, un seul document de traitement de texte avec des images sera convertie en un document HTML et un dossier de graphiques; gardez-les ensemble pour ne pas se séparer. Vous verrez que le code HTML généré par un traitement de texte est très salissant et difficile à lire, mais cela fonctionne. Il est probablement préférable d’utiliser un éditeur de pages Web tels que Nvu.

Trouver graphiques pour vos pages Web
Les icônes, les motifs de fond, et de photos sur les pages Web sont en fait des fichiers distincts qui sont visés par les codes HTML spécifiques. Les fichiers graphiques sont soit au format GIF ou JPG. Vous pouvez créer ces graphiques à bien des égards; par exemple en leur tirant dans un programme de dessin, de capturer des captures d’écran, prendre des photos avec un appareil photo numérique, la numérisation de photographies et des illustrations plat avec un scanner, capture des images fixes à partir d’une source vidéo, etc Un programme d’édition graphique peut alors être utilisé pour convertir les fichiers dans le format GIF requis ou JPG.

La meilleure façon d’obtenir des graphiques pour orner vos nouvelles pages Web est de les capturer à partir d’autres pages Web. TOUT graphique qui est affiché sur une page Web peut être facilement capturé par vous et enregistrée pour votre propre usage. Tout ce que vous avez à faire est de placer le pointeur de la souris sur le graphique que vous voulez et maintenez enfoncé le bouton de la souris (bouton droit de la souris sur un PC). Un menu contextuel apparaît; déplacer le pointeur pour sélectionner “Enregistrer l’image sous …” et laisser le bouton de la souris. La boîte de dialogue “Enregistrer sous …” apparaît, affichant le nom du fichier graphique (avec un. Gif ou extension. Jpg indiquant s’il s’agit d’un GIF ou un type de fichier JPG). Accédez à l’emplacement souhaité et cliquez sur Enregistrer.

Graphiques enregistrés dans GIF de format JPG sont prêts à utiliser sur des pages Web; where FILE NAME”>pour afficher un tel graphique sur votre page, il suffit de sauvegarder le fichier graphique dans le même répertoire (dossier) que le fichier HTML et ajouter au fichier HTML une balise de référence de l’image: NOM DE src=”FILE <img GRAPHIC”> où NOM DU FICHIER DE GRAPHIQUE est remplacé par le nom complet du fichier de l’image. . “>Par exemple, si le nom du fichier graphique est “mypicture.jpg”, puis le code HTML serait lu <img src=”mypicture.jpg”>.

Il existe de nombreuses sources de graphiques sur le Web. Utilisez un moteur de recherche pour rechercher des “clip art” ou “images libres” ou “images libres”. Un moyen pratique pour localiser les images est d’utiliser la recherche d’images de Google ou le moteur de recherche d’images d’AltaVista à http://www.altavista.com/r?L10. Tapez un ou plusieurs termes de recherche et ce moteur de recherche d’image renvoie une liste de résultats illustrés avec des aperçus miniatures (images de taille petit timbre-poste) de chaque image qu’il trouve.

Faire vos propres images numériques
Il ya deux façons de base pour faire vos propres images numériques à afficher sur vos pages Web: utiliser un appareil photo numérique pour prendre des photos, ou utiliser un scanner pour numériser des photographies ou autre matériel plat-copie. Les deux appareils photo numériques et les scanners sont maintenant largement disponibles et relativement peu coûteux.

Un appareil photo numérique est idéal pour prendre des portraits de personnes, des illustrations, des activités en classe, et des excursions. La plupart d’entre eux viennent avec un câble et un logiciel pour transférer les photos vers votre ordinateur. Certains enregistrer des fichiers image directement sur une disquette ou un CD-R (disque compact enregistrable). La plupart des caméras enregistrent leurs images sous forme de fichiers JPG, qui est le format utilisé sur le Web. Cependant, la plupart des appareils photo numériques de prendre des photos qui sont trop gros pour tenir sur une page Web, de sorte que vous aurez à utiliser un programme d’édition graphique pour recadrer ou réduire les images à une taille plus gérable. Je suggère d’utiliser le logiciel gratuit Picasa pour cette tâche; sa fonction “Export” réduit automatiquement la taille de l’ensemble de aa dossier d’images à une taille que vous désignez et de les enregistrer dans un dossier séparé.

Un scanner couleur est idéal pour la numérisation de photos imprimées magazines et des illustrations plat tels que peintures et dessins. Scanners viennent avec leur propre logiciel – reportez-vous à la documentation de votre scanner pour savoir comment le faire fonctionner. Avant de commencer la numérisation, régler la résolution de balayage à 72 ppp ou dpi 75 dpi (= points par pouce). (Suivez les instructions du scanner pour savoir comment configurer la résolution). Cela se traduira par des images qui sont «grandeur nature», c’est grand comme l’objet original numérisé Pour rendre l’image plus grande que la taille de vie, régler la résolution supérieure à 75 dpi de balayage;. Pour rendre l’image plus petite que la vie- taille, régler la résolution de balayage moins de 75 dpi La plupart des scanners peuvent enregistrer des images numérisées dans différents formats:. format JPG est généralement le meilleur choix Lorsque vous enregistrez l’image numérisée, choisissez JPG dans le menu “Format” pop-up dans la Save. boîte de dialogue.

Changement de formats graphiques
Les graphiques et les icônes qui sont affichées sur les pages Web sont des fichiers distincts qui doivent être en format GIF ou JPG. Pour recadrer des images ou convertir d’un format à un autre, vous pouvez utiliser un programme graphique libre, tels que Graphic Converter pour Mac, ou la peinture (un éditeur graphique simple qui vient avec tous les PC) ou Irfanview pour Windows.

Le choix entre les formats GIF ou JPG dépend de la nature de l’industrie graphique. format GIF est plus efficace pour les graphiques générés par ordinateur tranchants et des graphiques et des dessins de bande dessinée comme plats de couleur, tandis que JPG est le plus efficace pour photos numériques, des images vidéo capturées, et d’autres photos d’objets naturels. En utilisant le format approprié vous donnera la meilleure qualité d’image et la taille des fichiers plus petits, ce qui réduit le temps qu’il faut pour voir les photos avec une connexion Internet lente. (Graphics dans d’autres formats ne peuvent pas être affichés directement sur une page Web, du moins pas sans plug-ins).

Pour ouvrir une image avec un programme d’édition graphique, vous pouvez soit:
(A) faites glisser l’icône de l’image et de le déposer sur le dessus de l’icône du programme d’édition graphique,
ou
(B) lancement (double-cliquez sur l’icône de) le programme d’édition graphique, puis sélectionnez Ouvrir dans le menu Fichier, sélectionnez le fichier souhaité, puis double-cliquez sur le nom du fichier.

Pour enregistrer un fichier graphique au format GIF (meilleur pour les graphiques générés par ordinateur):

Save As… , select GIF from the Format pop-up menu, navigate to another directory if desired, then click Save. “>Sélectionnez Fichier -> Enregistrer sous …, sélectionnez GIF dans le menu déroulant Format, accédez à un autre répertoire si vous le souhaitez, puis cliquez sur Enregistrer.

Pour enregistrer un fichier graphique au format JPG (le meilleur pour ton continu photographies numérisées et les écrans vidéo):

Save As… , select JPG from the Format pop-up menu, navigate to another directory if desired, then click Save. “>Sélectionnez Fichier -> Enregistrer sous …, sélectionnez JPG dans le menu déroulant Format, accédez à un autre répertoire si vous le souhaitez, puis cliquez sur Enregistrer.

Mettez tous vos fichiers GIF et JPG dans le même répertoire (dossier) que les fichiers html.

Ajouter du son et de la vidéo
Si vous avez un modèle informatique qui est livré avec un microphone (un Macintosh ou un PC avec une carte son), vous pouvez facilement enregistrer des sons et de les ajouter à votre page Web. Par exemple, vous pouvez enregistrer une narration parlée par le petit microphone qui vient avec l’ordinateur, ou vous pouvez enregistrer de la musique ou de la voix à partir d’un magnétophone ou d’un lecteur de CD.

1. Vous aurez besoin d’un programme enregistreur / lecteur sonore qui peut enregistrer au format mp3, tels que l’excellent Audacity programme freeware pour PC et Mac. (Ou, vous pouvez utiliser l’enregistreur sonore qui vient avec le PC dans les programmes / Accessoires / Divertissement / Magnétophone, mais il enregistre uniquement au format WAV volumineux).

2. Branchez le microphone à l’arrière de l’ordinateur, dans la petite prise ronde qui est marqué avec une photo d’un microphone. Si vous enregistrez à partir d’un magnétophone ou d’un lecteur de CD, connecter sa sortie à l’entrée du microphone. (Vous devrez vous procurer un câble de connexion approprié, que vous pouvez obtenir auprès de Radio Shack).

3. Lancez vous semblez programme de l’enregistreur. Suivez les instructions pour enregistrer les sons. Réglez le volume sonore à un enregistrement clair. Enregistrer les fichiers audio au format mp3 ou wav. Placez les fichiers audio dans le même dossier que les fichiers HTML et graphiques.

4. Pour obtenir le son à jouer à partir de votre page Web, de créer un lien hypertexte vers le fichier. Par exemple, si vous avez enregistré votre fichier son comme “sound1.mp3”, vous pouvez ajouter à votre page Web:

here to hear a sound bite.     “>Cliquez <a href=”sound1.mp3”> ici </ a> pour entendre un extrait sonore.

Cela crée un lien hypertexte vers le fichier sonore “sound1.mp3”, en supposant qu’il est stocké dans le même répertoire que la page d’appel.

Cliquez ici pour entendre un octet sonore.

Lorsque l’utilisateur clique sur le lien, le navigateur télécharge le fichier, regarde l’extension de fichier, détermine quelle application auxiliaire est désigné pour ce type de fichier, lance (si elle n’est pas déjà ouverte), et puis charge et joue le son déposer.

Alternativement, vous pouvez intégrer un lecteur de sons directement dans votre page Web en utilisant un contrôleur de lecteur “intégré”:

“><embed src=”geetar.mid” width=144 height=25 autostart=false>

où “geetar.mid” est le nom du fichier de son. Cela met un petit contrôleur de lecteur sur votre page qui permet au lecteur de démarrer et d’arrêter le son à volonté. Réglez les numéros de largeur et de hauteur pour s’adapter à votre contrôleur audio. Voici un exemple, en utilisant un fichier son.

Cela fonctionne uniquement avec les versions récentes de navigateurs Web. L’inconvénient de cette technique est que les téléchargements de fichiers audio dès que la page est affichée, si oui ou non le lecteur a l’intention de jouer. Cela peut ralentir l’affichage des pages, en particulier sur une connexion Internet lente.

Ajout d’une vidéo est exactement comme l’ajout de bruit, sauf que le nom de fichier doit se référer à un fichier vidéo, comme un mpeg, mov, wmv ou fichier avi. La plupart des appareils photo numériques sont capables de prendre de petites vidéos dans un format et format adapté à une page Web. Vidéo intégré fonctionne comme un son incorporé, sauf que la largeur et la hauteur doivent correspondre à la taille de l’image vidéo entière et le contrôleur au fond. Voici un exemple d’un joueur de la vidéo en utilisant ce code HTML:
“><embed src=”fireworks.mpg” width=320 height=260 autostart=false>

Tester vos pages
Ne pas disposer d’une connexion Internet encore? Ne vous inquiétez pas!. Les pages Web peuvent être conçus, construits et testés sur n’importe quel ordinateur de bureau qui peut lancer un navigateur Web standard, même celui qui n’est pas connecté à Internet. navigateurs Web fonctionnent très bien en mode «local» sur un ordinateur autonome, bien que sans une connexion Internet, il ne peut évidemment pas accéder à des pages externes, c’est-pages qui résident sur des ordinateurs hôtes distants. Cependant, les navigateurs Web peuvent lire et afficher les fichiers “locaux” stockées sur la même machine que, à l’aide de la commande Fichier Ouvrir … de commande dans le menu Fichier pour ouvrir les fichiers HTML. C’est ainsi que vous pouvez tester vos pages pour voir à quoi ils ressemblent et pour s’assurer que tout fonctionne. Il suffit de mettre tous les fichiers html, fichiers graphiques et des fichiers audio dans le même répertoire (dossier).

Vous pouvez même envisager d’utiliser un navigateur Web comme une sorte de bas de gamme système de présentation multimédia pour une utilisation autonome dans une salle de classe ou un laboratoire informatique. Les navigateurs Web sont libres; support formaté texte, graphiques couleur, et numérisés sons et vidéo; sont disponibles dans des versions identiques pour les deux PC et Mac; et les présentations ainsi produits sont facilement converti entre les formats PC et Mac et sont prêts à être mis «sur le Web» quand et si vous avez accès à un serveur Web. Les pages Web peuvent être distribués et lus sur des disques CD-R ou les clés USB ou les serveurs de fichiers en réseau local. En raison de leur vitesse et de capacité, les disques durs USB sont particulièrement bonnes pour les pages qui ont beaucoup de grands graphiques, fichiers audio ou des clips vidéo.

Remarque: si vous utilisez un CD-R écrivain sur PC (“brûleur”) pour produire des sites Web sur CD-R pour jouer sur PC et Mac (en profitant de la capacité de la Mac de lire des disques de PC formaté), assurez-vous de limiter tous les fichiers HTML, graphique, et les noms de fichiers sonores de huit caractères, une extension de trois caractères (par exemple “Page1.htm”). Sinon, les anciens Mac ne sera pas capable de lire le site.

Trouver un hébergeur pour servir vos pages
Pour vos pages Web pour être réellement “sur” l’Internet, de sorte qu’ils seront accessibles aux utilisateurs Web partout dans le monde, ils doivent résider sur un serveur Web. Vous pourriez théoriquement gérer votre propre serveur Web sur votre propre PC, mais alors vous devez laisser tourner 24/7, qui est une douleur.

Beaucoup de fournisseurs commerciaux de services Internet (FSI) et des sociétés Internet comme Google fournissent page Web (“page d’accueil”) de l’espace de leurs clients; il n’est pas rare d’être donné 10-30 Mo libre (Google vous donne 100 Mo!), avec plus d’espace disponible à un coût supplémentaire. Consultez la documentation de votre fournisseur pour plus d’informations. Faites une recherche Google sur le nom de votre fournisseur de services Internet et les «pages personnelles» pour plus d’informations. Rechercher des sections intitulées quelque chose comme «Connexion à votre site”, “gestion du site Web”, “Téléchargement de fichiers”, “Détermination de votre URL”, “Lier vos pages”, “La publicité pour vos pages Web» ou quelque chose comme ça. (Ces titres de sections sont tirées de la documentation du serveur Web Verizon).

La plupart des hébergeurs de sites web ont une ligne “constructeur de site” qui vous permet de construire des pages web en ligne, à l’aide d’un simple navigateur Web. Par exemple, Google a un facile à utiliser mais limité “Page Creator” – voici une page d’accueil que j’ai créé l’utiliser. Le gros avantage de cette approche est que vous n’avez pas besoin de trouver un hôte pour vous servir pages – les pages que vous développez sont automatiquement hébergés sur le même site, ce qui simplifie grandement le montage / upload / vue du cycle car un seul programme (web navigateur) et le site Web est utilisé pour créer, modifier, télécharger et afficher le site de développement. (Cependant, en utilisant un constructeur de site comme celui-ci vous lie à ce site particulier, il ne peut pas être un moyen facile de transférer votre site vers un nouveau serveur dans l’avenir, je vous suggère de créer votre site sur votre propre ordinateur, garder un. copie des fichiers vous-même, puis télécharger les fichiers sur votre serveur Web. De cette façon, vous pouvez simplement télécharger les fichiers vers un nouveau serveur à tout moment de changer de serveur).

Téléchargement de vos pages
Si vous développez vos sites web hors ligne, soit en utilisant un éditeur web ou écrire directement en HTML, vous aurez besoin de télécharger les résultats de votre serveur web. La plupart des éditeurs de sites Web, par exemple Kompozer, un téléchargeur intégré qui se connecte directement à votre serveur, ce qui en fait une simple opération d’un bouton pour télécharger vous modifications. Toutefois, vous devez configurer au préalable avec la bonne adresse du serveur, nom d’utilisateur et mot de passe. Regardez la documentation de votre hôte pour cette information. Voici un exemple “Paramètres de publication” la boîte de dialogue de Kompozer, montrant le type d’information que vous aurez besoin d’entrer de. Si vous utilisez plus d’un hôte de publier vos sites, notez que vous pouvez conserver plusieurs configurations d’hôte dans la liste “Sites édition” sur la gauche, chacun avec sa propre adresse de l’hôte, nom d’utilisateur et mot de passe.

Certains hébergeurs vous permettent d’utiliser un programme distinct pour le téléchargement FTP (FTP = protocole de transfert de fichiers), pour par exemple WSFTP LE à des fins éducatives. Ces programmes vous permettent de télécharger des dossiers entiers de fichiers à la fois, ce qui rend relativement facile à charger et télécharger ensemble d’un site développé précédemment ou pour déplacer un site d’un serveur Web à un autre. Encore une fois, vous avez à mettre en place avec la bonne adresse du serveur, nom d’utilisateur et mot de passe.

Pour affaires ou professionnelles fins, de votre entreprise ou du système scolaire peuvent exploiter un serveur Web central qui est exploité par un administrateur du Web; dans ce cas, vous pouvez habituellement juste présenter tous vos fichiers HTML et des graphiques à l’administrateur du serveur Web sur un CD-R ou une clé USB et ils prendront soin par le mettre sur le serveur Web. Demandez-leur de vous dire l’URL (adresse Web) une fois qu’il est sur le serveur.