Retour à Tutoriels HTML

TUTORIAL: HTML de base

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Février 28th, 2008, 12:11 pm

Introduction


Cette introduction mai ne pas être pour tout le monde. Nous allons dans les détails extrêmes sur les bases et sont supposant que l'utilisateur n'a guère d'expérience avec la création de pages Web.

HTML signifie Hyper Text Markup Language. C'est la langue universelle parmi toutes les pages Web sur Internet et le World Wide Web (ou WWW). Pour écrire un document en html vous avez besoin d'une sorte d'éditeur de texte tel que Bloc-notes de Windows. Il s'agit d'un programme de base qui vous permet de taper du texte. Il existe une variété d'éditeurs de texte là-bas, mais j'utilise personnellement Bloc-notes. Voici le bloc-notes ci-dessous:

Attachments:
basicnotepad.jpg

A basic notepad editor.



Ci-dessus est un exemple d'un éditeur de texte que vous pourriez utiliser pour taper vos documents HTML. Cet éditeur est appelé bloc-notes qui peuvent être consultées à Windows et en cliquant sur le menu Démarrer. Au sommet de la cliquez sur Menu Démarrer, puis sur les programmes et accessoires. Ensuite, cliquez sur l'icône du Bloc-notes pour démarrer le programme. S'il vous arrive d'utiliser un Mac, je ne suis pas sûr de ce que les programmes sont disponibles pour taper du texte.

Une fois dans le programme que vous pouvez commencer à taper du texte immédiatement. Avec ce programme vous pouvez l'utiliser pour beaucoup de choses, car il n'a pas à être utilisés pour HTML. Vous pouvez taper des notes, des histoires, des lettres ou n'importe quoi, mais c'est un excellent programme pour utiliser le type de documents HTML.

Beaucoup de gens utilisent aussi des sites comme Geocities ou Tripod éditeurs qui ont construit bien dans le navigateur de sorte que vous pouvez éditer les pages de votre site. C'est une façon de le faire ok html, mais j'ai fortement recommandé d'utiliser le Bloc-notes si vous voulez vraiment apprendre la langue. Il et est moins compliqué que vous pouvez enregistrer votre site sur votre disque dur aussi. Il est toujours préférable car il est possible que les serveurs va planter et votre site sera entièrement perdu. En procédant ainsi, vous pouvez sauvegarder tous les efforts que vous mettez dans votre site.

Lorsque, dans ce programme jouer avec lui d'un petit peu. Tapez un petit paragraphe ou une note et ensuite essayer de l'enregistrer sur votre disque dur. Créez un dossier appelé "sites", puis l'intérieur de ce dossier de faire un autre dossier appelé «Démo-site". Dans le dossier appelé "demo-site" enregistrer le document que vous venez d'écrire comme mynote.txt qui est juste un fichier texte ordinaire. Maintenant Notepad fermer, puis essayer de rouvrir mynote.txt. Il est essentiel que vous sachiez comment trouver vos documents sauvegardés sur votre disque dur.

Vous utiliserez ce répertoire plus tard pour créer de nombreuses pages Web et il est bon de rester organisé. C'est pourquoi je vous avais créer un dossier séparé pour vos pages. Si vous ne récupérez pas vos pages dans tout le lieu, il sera difficile de faire n'importe quoi. Vous êtes maintenant prêt à passer à la leçon suivante, Basic Markup Tags.

Basic Markup Tags


Dans le langage HTML que nous utilisons balises de donner à la structure du document. Une balise de balisage est toujours à l'intérieur de ces caractères spéciaux <>, le signe inférieur à et le signe supérieur à . Elles sont situées sur votre clavier-dessus de la barre d'espace pour le droit de la m. Vous devez appuyer sur shift pour les utiliser. Si vous n'appuyez pas de déplacer, ils seront une virgule et un point. Une fois que nous faisons un document HTML qui a une bonne structure, c'est alors que nous passerons à l'aide de CSS (Cascading Style Sheets) pour rendre la page Web look agréable pour votre public. Qui seront couverts dans un autre tutoriel.

Il ya beaucoup de différents types de balises. Nous allons commencer par la prise en <html>, <head>, <body> et <p>. Dans de nombreux marqueurs, nous aurons une balise d'ouverture et une balise fermante. La balise fermante aura une barre oblique inverse, la balise de début seront pas. Par exemple ici est une balise d'ouverture:

Code: [ Select ]
<body>


Et voici une balise de fermeture:

Code: [ Select ]
</body>


Le document HTML commence par <html> et se termine par </ html>. Lorsque vous voyez apparaître <html> c'est déclarer qu'un document HTML a commencé. Vous placez </ html> à la fin du document HTML afin qu'il déclare que le code html est terminée. Si vous ne placez pas ces balises certains navigateurs encore lire et d'afficher vos pages HTML correctement, mais certains anciens navigateurs mai pas. Ici ia un autre exemple:

Code: [ Select ]
<html>
<head>
 
</head>
 
</html>
  1. <html>
  2. <head>
  3.  
  4. </head>
  5.  
  6. </html>


Immédiatement après la balise <html> est la balise. La balise <head> aura également une balise de fermeture. Cette balise contient le titre et les autres choses importantes comme les meta tags pour les mots clés. Il existe de nombreux autres articles qui peuvent être placées dans la balise de tête ainsi que nous ne couvrira pas pour le moment. Remarquez comment les balises de tête sont dans les balises html, ce qui est appelé la nidification. Les balises de nidification doit être fermée avant l'une des balises externes qu'elle réside dans sont fermés. Il est très similaire à la grammaire et les règles avec l'aide de guillemets simples dans des guillemets doubles. Un exemple:

"Il a éteint son ordinateur, il s'assit sur son lit et m'a dit que je ne comprends tout simplement pas en HTML."

Remarquez comment les guillemets simples sont à l'intérieur des guillemets doubles. HTML fonctionne sur le même principe. Tags sera à l'intérieur d'autres balises qui seront encore plus au coeur de balises. Il peut devenir tout à fait confuses parfois.

Il est extrêmement important que si vous démarrez un tag que vous finissez le tag ou de la fermer dans les bons endroits. Sur cet exemple si vous étiez à ouvrir avec <html> <head> puis fermez </ html> sans fermer jamais la balise "head" de nombreuses browswers mai n'est pas comme cela et mai produire des résultats que vous aviez l'intention non pas parce que le HTML est incorrect.

Les balises prochaine, je vais présenter sont les balises et les <title> <body>. Le <title> balise doit toujours être placé entre les balises <head> comme indiqué ci-dessous. Ce que vous devez la saisir entre le tag <title> sera affiché en haut du navigateur. Par exemple. Si vous regardez les très, très haut de votre browswer en ce moment, vous remarquerez qu'il ne dit "Tutorial: HTML simplifié". Si j'ai mis "Ma page d'accueil" entre les balises <title> comme je l'ai montré dans l'exemple alors c'est ce qui serait affiché en haut de votre droit browswer maintenant.

Code: [ Select ]
<html>
<head>
<title>My Homepage</title>
</head>
<body>
 
</body>
</html>
  1. <html>
  2. <head>
  3. <title>My Homepage</title>
  4. </head>
  5. <body>
  6.  
  7. </body>
  8. </html>


La balise suivante, la balise est <body> où la viande de votre site Web ira. Tout ce que vous voyez dans l'browswer lui-même sera placé entre les deux <body>. Le <body> doit toujours venir après les balises <head> et doit toujours rester quelque part inbetween Le <html> balises.

Maintenant, je veux que vous ouvriez le Bloc-notes et tapez tout comme je l'ai montré dans le dernier exemple. Une fois que vous avez terminé, cliquez sur Fichier, puis Enregistrer sous .. et puis enregistrez-le "index.html" dans les répertoires ealier nous avons créé ce site. Vous devez avoir un dossier nommé "sites" et alors, dans ce dossier d'un autre qui dit "démo-site", et c'est dans ce dossier que je veux que vous pour sauver ce que tu venais d'écrire que "index.html". Espérons que vous n'aurez pas de problème et beaucoup le font ce que vous êtes probablement déjà familier avec votre ordinateur.

Thats it! Ceci est la première chose que je fais toujours avant de me créer une page Web. Je reçois toutes les balises requises dans mon fichier et l'enregistrer. Dans chaque page HTML que vous créez, vous devriez avoir tous ces balises dans un ordre similaire. Ceci est la configuration de base de chaque page. Encore une fois les balises html sont à déclarer qu'il s'agit d'une page web. Les balises de tête sont ce que contient la balise de titre. Et ce que vous tapez entre la balise de titre est ce qui apparaît en haut de votre navigateur. Après le titre et les balises tête se trouve la balise corps pour lequel vous placerez tous vos autres balises, du texte et des images pour votre site Web. Créons à présent un texte qui apparaîtra sur votre page!

Texte de base


Cette leçon ne doit pas être trop dur. Pour obtenir le texte pour afficher sur votre site tout simplement commencer à taper du texte entre les balises de paragraphe <p> </ p>, qui devrait se situer entre les balises BODY. Une fois que vous avez terminé, puis enregistrez votre fichier. Il doit encore être appelé indice. - html La source devrait ressembler à quelque chose comme ceci:

Code: [ Select ]
<html>
<head>
<title>Hello World</title>
</head>
<body>
 
<p>This is some sample text. Type whatever you would like here.</p>
 
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Hello World</title>
  4. </head>
  5. <body>
  6.  
  7. <p>This is some sample text. Type whatever you would like here.</p>
  8.  
  9. </body>
  10. </html>


Si vous voulez un aperçu de votre site, vous pouvez charger votre page de votre disque dur. Ouvrez une autre fenêtre de navigateur et tapez la ligne suivante à votre adresse (ou tapez si vous vous adressez à votre page est différente que):

C: \ websites \-Demo Site \ index.html

Vous devriez voir une fenêtre vide avec le texte que vous avez écrit ci-dessus en elle.

Rubriques


Les titres sont comme les titres des articles dans votre document. Rappelez-vous qu'il est important de garder votre document afin qu'il soit bien structuré. Habituellement, un bon moyen d'y parvenir est d'avoir des zones différentes dans votre document marqué avec des titres. Il existe différents niveaux de la rubrique tags par <h1>, <h2>, <h3>, <h4>, <h5>, et <h6>. La balise h1 serait le titre le plus important et souvent le titre de l'ensemble du document. Aux termes que vous pouvez décomposer en petites zones en utilisant la balise h2. Au sein de ces sections que vous pourriez tomber d'autres domaines en sous-sections plus petites en utilisant la balise H3. Voici un exemple de ce qu'est un document HTML pourrait ressembler avec des titres et des paragraphes:

Code: [ Select ]
<html>
<head>
<title>Hello World</title>
</head>
<body>
 
<h1>Food Groups</h1>
<p>This document will discuss the various types of food groups and some information about each</p>
 
<h2>Fruits</h2>
<p>Fruits are healthy and should be eaten daily. There are many different kinds of fruits and ...</p>
 
<h3>Apples</h3>
<p>An apple a day keeps the doctor away. Apples are usually found...</p>
 
<h3>Oranges</h3>
<p>Oranges have a sweetish, acidic juice and are usually found...</p>
 
<h2>Vegetables</h2>
<p>Vegetables are also healthy and should be eaten daily. There are many different kinds of vegetables and ...</p>
 
...
 
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Hello World</title>
  4. </head>
  5. <body>
  6.  
  7. <h1>Food Groups</h1>
  8. <p>This document will discuss the various types of food groups and some information about each</p>
  9.  
  10. <h2>Fruits</h2>
  11. <p>Fruits are healthy and should be eaten daily. There are many different kinds of fruits and ...</p>
  12.  
  13. <h3>Apples</h3>
  14. <p>An apple a day keeps the doctor away. Apples are usually found...</p>
  15.  
  16. <h3>Oranges</h3>
  17. <p>Oranges have a sweetish, acidic juice and are usually found...</p>
  18.  
  19. <h2>Vegetables</h2>
  20. <p>Vegetables are also healthy and should be eaten daily. There are many different kinds of vegetables and ...</p>
  21.  
  22. ...
  23.  
  24. </body>
  25. </html>


Comme vous pouvez le voir dans l'exemple ci-dessus la ligne principale est d'utiliser le h1 tags qui indique que le document est sur les groupes d'aliments. De là, vous avez des sous-positions de différents niveaux. Après chaque rubrique Il ya des paragraphes en utilisant la balise <p> qui décrivent un peu plus sur ce que l'intitulé est d'environ. Bien sûr, un document ne doit pas avoir cette structure exacte, mais c'est un bon exemple de comment vous pouvez organiser et de structurer votre document en utilisant rubriques.

Images


Grâce à la balise d'image, vous pouvez placer des images sur votre site. Que vous ayez envie de petites images, les grandes images, des images colorées, ou même des images animées, vous devez utiliser la balise d'image pour le placer sur votre site. Faire des images ou trouver des images ne seront pas expliquées dans cette leçon. Cette leçon sera tout simplement expliquer comment placer les images sur votre site.

La balise image est <img> et il n'a pas de balises de fermeture avec du HTML (XHTML n'a balises de fermeture, mais vous ne devez pas vous inquiéter de cela maintenant). Voici un exemple de la façon de charger une image:

Code: [ Select ]
<html>
<head>
<title>Hello World</title>
</head>
<body>
 
<p>This is some sample text. Type whatever you would like here.</p>
 
<img src="images/someimage.jpg" width="100" height="50" alt="Some Image">
 
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Hello World</title>
  4. </head>
  5. <body>
  6.  
  7. <p>This is some sample text. Type whatever you would like here.</p>
  8.  
  9. <img src="images/someimage.jpg" width="100" height="50" alt="Some Image">
  10.  
  11. </body>
  12. </html>


Balises de base telles que la balise image peut avoir ce qu'on appelle les attributs. Dans l'exemple ci-dessus sont les attributs src, width, height et alt. L'attribut src vous permet de définir la source de l'image. Dans ce cas la source ou l'emplacement de l'image est images / unelmage.jpg, qui est simplement une image JPEG situé dans le répertoire des images (je fais généralement un répertoire distinct, tel que des images à garder les choses organisées). L'attribut width définit la largeur de l'image, et l'attribut height définit la hauteur des images. Ceci doit correspondre précisément ce que la vraie largeur et la hauteur de l'image sont. Autre chose que les vraies largeurs ou hauteurs seront disort l'image soit par étirement ou rétrécissement de l'image. Ce n'est pas recommandée, car elle rendra l'image look de piètre qualité. Enfin la dernière est l'attribut alt qui vous permet de spécifier un titre ou le nom de l'image, et dans ce cas nous avons appelé "l'image une certaine image».

Conclusion


Que ce soit pour ce tutoriel. Ce tutoriel ne couvre que certaines des balises de base et devrait être suffisant pour vous de faire une page web complète. Jusqu'à ce que vous apprendre le CSS, la page sera très ennuyeux - mais je pense qu'il est très important d'avoir une bonne compréhension de la structure de sorte que vous pouvez mettre du contenu sur votre site et de la mode organisé. Styling devrait aller au sommet de la structure pour les rendre beaux. Have fun!
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Février 28th, 2008, 12:11 pm

  • fernalex74
  • Born
  • Born
  • No Avatar
  • Inscription: Mai 21, 2008
  • Messages: 1
  • Status: Offline

Message Mai 22nd, 2008, 9:50 am

Comment puis-je charge ma page de mon disque dur? WHN j'ai mis C: \ sites \ demo-site \ index.html qui m'a pris seulement à un moteur de recherche suite au lieu de montrer ma page Web.
  • geneliamarc
  • Born
  • Born
  • No Avatar
  • Inscription: Mar 09, 2009
  • Messages: 2
  • Status: Offline

Message Mars 9th, 2009, 11:29 pm

Merci beaucoup pour ces tutoriaux! Son d'une grande aide pour les débutants comme moi :)
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Mars 11th, 2009, 8:08 pm

fernalex74 a écrit:
Comment puis-je charge ma page de mon disque dur? WHN j'ai mis C: \ sites \ demo-site \ index.html qui m'a pris seulement à un moteur de recherche suite au lieu de montrer ma page Web.


Je me rends compte que tu as écrit la question il ya environ un an, mais j'ai pensé que je serais tout de même répondre, au cas où quelqu'un d'autre a ce problème. Si vous tapez dans votre navigateur:

C: \ sites \ demo-site \ index.html

il ne fonctionnera que si existe sur votre disque dur. Vous devez avoir un dossier sur votre lecteur C: appelé sites web et dans le dossier des sites Web, vous devez disposer d'un autre dossier appelé demo-site et à l'intérieur de ce dossier un fichier nommé index.html . Bien sûr, vous n'avez pas à utiliser que la localisation exacte, cela dépendra de comment vous avez tout installé sur votre ordinateur. Si vous avez sur votre D: disque dur, par exemple, le chemin peut être:

D: \ websites \ demo-site \ index.html

Ou si vous avez utilisé un répertoire de sites plutôt que de sites Web, il serait:

D: \ websites \ demo-site \ index.html

Si cela ne fonctionne pas sur votre ordinateur puis je double vérification pour s'assurer que tout existe comme vous mis sur votre ordinateur. Par la façon dont cela est pour les machines Windows, je ne suis pas sûr que l'adresse que vous utilisez un autre OS navigateur. Peut-être que quelqu'un d'autre peut répondre à cette question.

Il est également possible que vous ayez un type de logiciel (tel que Norton Antivirus) sur votre ordinateur vous empêche de charger quoi que ce soit au niveau local par le biais de votre navigateur. Vérifiez que vous n'avez pas d'interférer avec celle des programmes. J'espère que quelqu'un m'aide pour rencontrer ce problème.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8212
  • Loc: USA
  • Status: Offline

Message Mars 12th, 2009, 7:02 pm

Bigwebmaster a écrit:
Ou si vous avez utilisé un répertoire de sites plutôt que de sites Web, il serait:

D: \ sites web \ demo-site \ index.html

Dont vous dire:

D: \ sites \ demo-site \ index.html

?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 21st, 2009, 6:52 pm

Avec certains navigateurs, son nécessaire de donner au navigateur de l'acheminement correct. Au lieu au large pour les sites web http:// normale, de charger une de votre disque dur serait utiliser "file :///" (sans les guillemets). Disons votre fichier que vous souhaitez ouvrir dans votre navigateur est situé sur votre disque dur ici:

Code: [ Select ]
D:\sites\demo-site\index.html


Dans ce cas, vous ouvrez votre navigateur et tapez ceci dans votre barre d'adresse:

Code: [ Select ]
file:///D:\sites\demo-site\index.html
Use your words like arrows to shoot toward your goal.
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8212
  • Loc: USA
  • Status: Offline

Message Octobre 29th, 2010, 12:30 am

Une autre façon de l'ouvrir est de s'assurer que vous avez un programme qui ouvre par défaut les fichiers. Html.

Vous pouvez essayer cela sur une machine Windows.

Double-cliquez sur le fichier html (ou htm).

Si IE / Firefox / Votre navigateur par défaut chiots en place, alors il doit être fin et vous devriez être en mesure d'afficher votre fichier.

Si une boîte de dialogue vous demandant chiots quel logiciel à utiliser pour ouvrir le fichier avec, parcourir la liste jusqu'à ce que votre navigateur par défaut. Une fois sélectionnée, vous pouvez ensuite cocher la case Mémoriser ce...(Je ne suis pas en utilisant une machine à base de Microsoft à l'heure actuelle, je ne peux pas vous dire exactement ce qu'il dit).

C'est à peu près la même chose sur une machine basée sur Linux (Ubuntu, au moins 10,10).
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 7 messages
  • Modérateur: Tutorial Writers
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 10 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC