La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Internet Principes généraux Création de site web Langages HTML XML.

Présentations similaires


Présentation au sujet: "Internet Principes généraux Création de site web Langages HTML XML."— Transcription de la présentation:

1 Internet Principes généraux Création de site web Langages HTML XML

2 Internet Principes généraux

3 Présentation de linternet : Réseau Réseau : ensemble dinterconnections permettant une communication Ex : réseau téléphonique, réseau routier, réseau damis… En informatique : deux ordinateurs (ou plus) reliés entre eux = un réseau

4 Réseau : quest ce que cest Un réseau : Connexion physique (câble) Langage de communication commun : un protocole

5 Réseau local (LAN : Local Area Network) Réseau Local : réseau sur une zone limitée (une salle, un bâtiment ou quelques bâtiments) Deux types de machines : Serveurs : fournissent des services (ex : un disque commun, une imprimante, un accès internet, …) Clients : utilisent les services

6 Réseau Local : connexion Connexion : par câble réseau Exemple dici :

7 Réseau Local : protocole Pour avoir une information, il faut savoir : - Son nom (ex : le fichier « exo HTML.doc ») - Qui la possède (le serveur ?) - Les règles de communication

8 Réseau Local : protocole Le protocole utilisé : TCP/IP (Transmission Control Protocol/Internet Protocol) Chaque machine a une adresse appelée adresse IP (un ensemble de 4 chiffres de 0 à 255, ex : ) Pour faire plus lisible, un nom peut représenter une adresse IP (ex : l3lea15,

9 Exemple de communication 1. Votre machine (le client) demande « est-ce que l3lea15 peut menvoyer le fichier exos html.doc ? Mon adresse est » 2. Linformation transite dans le réseau jusquà la machine l3lea15 (en réalité ) 3. L3lea15 (le serveur) reçoit la demande, et envoie le fichier à ladresse demandée.

10 Internet : définition Un internet : « Interconnected Network », réseaux locaux connectés entre eux LInternet : un ensemble extrêmement important de réseaux connectés entre eux Dans ces réseaux, il y a : Des serveurs : par exemple des serveurs qui permettent daccéder à des pages Web Des clients : par exemple, votre machine lorsque vous « surfez »

11 Et de chez vous ? Pour se connecter à un réseau local (celui de votre fournisseur daccès) : modem (classique ou ADSL) Puis votre fournisseur daccès est connecté à dautres réseaux (à lInternet)

12 Internet : différents services Les services de lInternet (offerts par les serveurs présents sur Internet) Le Chat (discussion) Le Ftp (téléchargement de fichier) Le courrier électronique (le mail) Les messageries instantanées Le Web (documents hypertextes) …

13 Le World Wide Web (le Web) Sur Internet : Un ensemble de documents textuels appelés « pages Web » connectés entre elles par des « hyperliens » qui permettent de passer dune page à une autre soit au sein dun même serveur (site) soit entre différents serveurs (sites) Le World Wide Web : lensemble des pages Web de lInternet

14 Création de site web Le langage HTML

15 Le format de fichier HTML Fichiers visualisés par le navigateur (Internet Explorer, Mozilla, Firefox) Format de fichier : texte pur Avec des instructions de mise en page sous forme de balises (Tag ou Markup) Avec des liens « hypertextes » HTML : HyperText Markup Language

16 Les balises Chaque élément de structure est entouré : Dune balise de début Dune balise de fin (pas toujours…)

17 Les balises : Exemple Document HTML Ce texte est normal, celui-ci est en gras, celui-ci est en italique, et celui-ci est les deux. Dans le navigateur Ce texte est normal, celui-ci est en gras, celui-ci est en italique, et celui-ci est les deux. Pour mettre en gras : balises et Pour mettre en italique : balises et

18 Structure dun document HTML Un document HTML a toujours deux parties : Une entête (head) : il contient des informations sur le document (comme le titre par exemple) Un corps (body) : il contient la partie visible du document

19 Structure dun document HTML : Exemple mon premier document Il fait beau. Mais qu'est-ce que le beau temps s'il n'y a pas eu la pluie auparavant ?

20 Exercices Exercices 1 et 2 : vos premières pages Web

21 Création de site web Quelques balises…

22 Balises : mise en forme Pour mettre en gras : Ex : test Pour mettre en italique : Ex : test Pour mettre en souligné : Ex : test Pour mettre en écriture « machine à écrire » : Ex : test Pour centrer un texte : test

23 Balises : paragraphe Début de paragraphe : Fin de paragraphe : Attention : pas de retour à la ligne automatique Il fait beau. Mais qu'est-ce que le beau temps s'il n'y a pas eu la pluie auparavant ? [...] Et comment ne le serait-ce pas ? [...] Il fait beau. Mais qu'est-ce que le beau temps s'il n'y a pas eu la pluie auparavant ? [...] Et comment ne le serait-ce pas ? [...]

24 Balises : titres Titre de premier niveau : Titre de second niveau : (sous-titres) Titre de troisième niveau : (sous-sous-titres) … jusquà Partie 1 : Les entrées 1.1 Les crudités 1.2 Les surgelés Partie 1 : Les entrées 1.1 Les Crudités 1.2 Les Surgelés

25 Les listes ordonnées : et (« ordered lists » et « list item ») allumez l'ordinateur ; tapez votre nom de connexion ; tapez le mot de passe ; lancer le programme. 1. allumez l'ordinateur ; 2. tapez votre nom de connexion ; 3. tapez le mot de passe ; 4. lancer le programme.

26 Les listes non ordonnées : et (« unordered lists » et « list item ») Contenu du panier Oranges Pommes de terre Poireaux Fromage Jambon fumé Contenu du panier Oranges Pommes de terre Poireaux Fromage Jambon fumé

27 Propriétés dune balise Certaines balises peuvent avoir des propriétés. Par exemple, un paragraphe peut être : Aligné à gauche Aligné à droite Justifié Ceci correspond à la propriété alignement (align) du paragraphe (left, right ou justify). Pour utiliser une propriété : bonjour !

28 Pour la police : balise font Balise font avec comme propriétés : Size : la taille de 1 à 7 (normal = 3) Color : code Rouge Vert Bleu hexadecimal (codage RGB – Red Green Blue) Ex : cest vert ! Ou une couleur en anglais Ex : cest vert !

29 La balise body La balise body peut elle aussi avoir des propriétés : bgcolor (background color) : la couleur de fond du texte (voir font) text : la couleur du texte (un code RGB) Ex : Voici une page moche et illisible

30 Plus dinformations ? Il y a encore plein de balises et de propriétés ! Plus dinformations : : le site référence du W3C (complet mais incompréhensible) Tout ce que vous trouverez sur google en tapant « guide HTML » par exemple

31 Exercices Exercice 3 : conception dune page Web

32 Création de site web créer un site

33 Gérer un site Un site web, cest : Plusieurs pages html reliées entre elles Des images (éventuellement) Des animations, des fichiers zip, pdf… à télécharger…

34 Créer un site Web : version simple 1. Créez un répertoire : ce sera la racine de votre projet 2. Y placer tous vos fichiers (images et fichiers HTML notamment) 3. Une fois le site fini, il faudra copier lensemble du répertoire avec son contenu sur le serveur responsable de la gestion des pages Web.

35 Créer un site Web : le fichier index.html Noubliez pas de créez un fichier index.html ! Il sagit : De la page daccueil de votre site En général, du sommaire De la page par défaut Ex : si je tape sans préciser la page, le serveur Web menvoie en réalitéwww.google.fr

36 Faire référence à un fichier Organisation classique C:/internet/Mon_site : la racine C:/internet/Mon_site/Images : les images C:/internet/Mon_site/Videos : les vidéos C:/internet/Mon_site/Fichiers : les fichiers à télécharger

37 Insérer des images Pour mettre une image, balise Propriétés : src : le nom du fichier image width et height (facultatifs) : dimension de limage, indiquer lunité (cm, px…) Ex : Limage test.jpg sera affichée avec une largeur de 10 pixels.

38 Des liens : à lintérieur dune page La balise A (Anchor) permet de créer des signets, avec la propriété name, et un signet dont le nom commence par # Ex : PARTIE 1 Permet de faire un lien, en indiquant le signet avec la propriété href. Ex : lien vers la partie 1

39 Liens externes : balise A Lien vers une autre page du site : lien vers la partie 1 Lien vers une page dun autre site : un super site

40 Exercices Exercice 4 : conception dun mini site

41 Renseigner les pages HTML Lentête et la balise

42 Balise META Lentête ( … ) sert à renseigner sur le contenu de la page : Le titre Lauteur Jeu de caractère (codage) Informations pour les moteurs de recherche (mots-clés, description…) …

43 Pour les moteurs de recherche keywords, description Pour mettre des mots-clés à vos pages: Une recherche dans Google (par exemple) sur les mots vie aura plus de chances daboutir à votre page Pour mettre une description :

44 Head : sur lauteur Pour préciser lauteur et la langue : Pour préciser le copyright :

45 Balises META : codage du document Pour préciser le codage : En général, UTF-8 (Unicode) par défaut

46 Balises META, mais encore ? Un nombre très grand de possibilités, pas toujours indispensables : La page ne sera plus valide après le 15 Février La page a été produite avec le bloc-notes

47 Tableaux et mise en page Balises,, et leurs amis

48 Pour faire un tableau A B C D AB CD : le tableau : une ligne (table row) : une cellule (table data)

49 Les titres : (table header) : une cellule de titre Nom Prénom Alfred Grojean NomPrénom AlfredGrojean

50 : attributs Les attributs possibles pour : BORDER : la taille des bords (en pixels) CELLSPACING : lespace entre les cellules CELLPADDING : espace entre le bord des cellules et le texte Ex : …

51 : attributs Align : alignement (center, left, right) bgcolor : couleur de fond de la table colspan : pour les cellules fusionnées, nombre de cellules width/height : largeur/hauteur (en % ou en pixel) Ex : ICI là ou la ICI LA OU LA

52 Menu avec Accueil Histoire Accueil Histoire Un Menu = une table à une colonne

53 Mise en page avec des tables Une page = un grand tableau 1. Choisir le layout (disposition de la page) 2. Traduire en tableau 3. Remplir !

54 Exemple : quel est la disposition de cette page ? La page à Momo Bienvenue dans ma page à moi, où je raconte tout quest ce que je veux Accueil Ma photo

55 Mise en page par table, le layout Disposition de la page précédente : Le titre Le contenuLe menu Le titre Le contenu Le menu (un tableau)

56 Exemple : la page à Momo La page à Momo bienvenue dans ma page… Accueil Ma photo

57 Balises meta et Mise en page Exercices 5, 6 et 7

58 Les feuilles des style CSS et HTML

59 Mise en page Solution classique : table et font Mise en page par et par Long Vite illisible Peu souple Difficile à modifier Aspect présentation et contenu entremélés Mais encore très utilisé…

60 Mise en page Solution moderne : les feuilles de style Distinction entre contenu et présentation Contenu : dans le document HTML (sans table ni balises font) Présentation : dans un fichier à part (feuille de style) Changer de présentation = changer de feuille de style

61 CSS : généralité CSS 1.0 (1996) Accepté par la plupart des navigateurs Mozilla 1.1, Firefox, Netscape 6, Internet Explorer 5.5, Opera 4 … CSS 2.0 (1998) pas toujours accepté par tous CSS 3.0 (à venir) très hasardeux pour linstant

62 Application dune feuille de style 1. Créez la feuille de style (fichier.css) 2. Plusieurs solutions existent, la plus simple, ajouter dans lentête ( ) Note : il est possible dintégrer des (morceaux de) feuilles de style dans la page HTML

63 CSS : la syntaxe H1 { font-size: large; color: red; } Nom de la balise considérée { Attribut1 : valeur ; Attribut2 : valeur2 ; }

64 Une feuille de style, exemple : H1 { font-family: arial; } H1,H2,H3 { font-size: large; color: red; } LI B { color: blue; } Tous les éléments de type H1 seront dans la police arial Les éléments de type H1, H2 et H3 seront en grand (large) et en rouge Les éléments en gras qui sont à lintérieur dune liste seront en bleu

65 Quelques propriétés (texte) : Font-family : la police (times, arial, helevetica …) Font-size : (small, medium, large, x-large…) Font-weight (normal, bold, 120%) Color : couleur du texte (black, green, #00FF00) background-color : la couleur du fond (idem) Background-image : image de fond url( "truc.jpg") text-align: left, center ou right Définir plusieurs attributs dun coup : font : times small bold;

66 Les listes, quelques autres propriétés List-style-type : type de liste (pour ul, ol et li) None, disc, circle, square,decimal, lower- roman, upper-roman, georgian … …

67 Les tableaux Border-style : dotted (points), dashed (pointillés), solid (lignes), none (rien) Border-width : largeur (1px par exemple) Border-color : red, #00FF00, … Margin : marges

68 Attribut class toto tata H1.menu { color : blue; } H1.doc { color : red; } Pour distinguer deux types déléments similaires. Ex : On utilise h1 dans le titre et dans document, on désire deux présentations différentes

69 Attribut ID Idem que class. Mais normalement,chaque id est unique (il ny aura quun seul élément did « menu ») toto … tata #menu { color : blue; } #doc { color : red; }

70 HTML et CSS Exercice 8

71 CSS : mise en page par boite, class et id

72 CSS : des boîtes plutôt que des tables Mettre en page avec des CSS : 1. Repérez les différents éléments constituant de la page 2. Chaque élément sera mis dans une « boîte » à laide dune balise munie des attributs class (et id) nécessaires. La balise ne fait rien, elle sert juste à marquer une zone du document

73 Exemple : la page à Momo La page à Momo Bienvenue dans ma page à moi, où je raconte tout ce que je veux Accueil Ma photo

74 Exemple : la page à Momo titre contenu Menu

75 Décomposition en Trois éléments : le titre, le menu et le contenu La page à momo Le menu (un tableau ou une liste) Bienvenue

76 Mise en forme Avec la feuille de style. Note : on peut spécifier le style dun élément par rapport à sa position. Ex :.contenu h1 { color : red; } Les titres de type h1 qui sont à lintérieur dun élément de class « contenu » sont en rouge équivalent à : div.contenu h1 { color : red; }

77 Placement des boîtes Dimensions : Width : largeur Height : hauteur (en pixel px ou en %) Position, plusieurs modes Relatifs (position fixée): on précise la position avec left (ou right) et top (ou bottom) Flottant (au dessus du reste) : on indique float :left ou float : right

78 Exemple : La page à Momo Bienvenue dans ma page à moi, où je raconte tout ce que je veux Accueil Ma photo Le titre : fixe (wdth:100%), le menu : flottant (width:20%; float:right;)

79 Mise en page par CSS Exercice 9 et 10


Télécharger ppt "Internet Principes généraux Création de site web Langages HTML XML."

Présentations similaires


Annonces Google