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

1 Programmation des sites web Statiques A.Karim. 2 Web statique client Serveur 1 2 3 1-le navigateur envoie une requête http au serveur 2-le serveur renvoie.

Présentations similaires


Présentation au sujet: "1 Programmation des sites web Statiques A.Karim. 2 Web statique client Serveur 1 2 3 1-le navigateur envoie une requête http au serveur 2-le serveur renvoie."— Transcription de la présentation:

1 1 Programmation des sites web Statiques A.Karim

2 2 Web statique client Serveur le navigateur envoie une requête http au serveur 2-le serveur renvoie le code html 3-le navigateur interprète le code html. DE point de vue Logiciel: Client: Navigateur( IExplorer, Mozilla …) Serveur: Serveur web comme IIS,Apache

3 3 Client dynamique client Serveur le navigateur envoie une requête http au serveur 2-le serveur renvoie le code html 3-le navigateur interprète le code html.qui contient un script Le navigateur interagit avec ce script

4 4 Serveur dynamique client Serveur le navigateur envoie une requête http au serveur 2-le serveur confie le traitement à un script et constitue le code HTML 3-Le serveur renvoie ce code html 4-le navigateur interprète le code html 4 2

5 5 Baliser le texte de sa page

6 6 Créer des paragraphes

7 7 Créer des titres Le HTML vous permet donc de créer jusquà 6 niveaux de titres différents : Titre très important (titre principal) Sous-titre Sous-sous-titre Sous-sous-sous-titre Sous-sous-sous-sous-titre (pas très important) Sous-sous-sous-sous-sous-titre (hum...)

8 8 Mettre en valeur son texte On dispose pour cela de 2 balises de « mise en valeur » différentes : : pour une faible mise en valeur. Le texte sera généralement mis en italique.ou bien : pour une mise en valeur importante. Le texte sera généralement mis en gras.ou bien

9 Colorer le text On dispose pour cela balise Exemple: kkkkkkk ggggggg 9

10 10 Les citations 1-Les citations courtes: Une citation courte (quelques mots) se place dans une balise.Cette balise doit se trouver à lintérieur dun paragraphe. 2-Les citations longues: Pour effectuer une citation un peu longue (de plusieurs paragraphes), on utilise la balise.À linverse dune citation courte, une citation longue ne doit pas se trouver dans un paragraphe mais elle doit au contraire contenir une balise de paragraphe.

11 11

12 12 Les exposants et indices : mise en exposant (caractères surélevés). : mise en indice (caractères abaissés).

13 13 Les abréviations

14 14 Les liens Vers Cible

15 15 Un lien pour envoyer un Envoyez-moi un message !

16 16 Insérer un lien vers un autre endroit de la page(ancre) Les recettes de Choumicha allez voir les recettes de Choumicha

17 17 Insérer des images

18 18 La balise dimage la balise :, qui est auto-fermante alt : cet attribut permet dindiquer un texte de remplacement (dit« texte alternatif ») pour votre image. Ce texte sera affiché à la place de votre image si celle-ci ne peut pas être affichée.

19 19 Ajouter une infobulle

20 20 Créer une image cliquable Un lien ne se présente pas obligatoirement sous la forme dun texte. On peut aussi transformer une image en lien et réaliser ce quon appelle une« image cliquable ».

21 21 Les Tableaux

22 22 Fusionner des cellules

23 23 Exercice1

24 24 des listes à puces

25 25 Listes non ordonnées

26 26 Listes ordonnées

27 27 Imbriquer des listes à puces

28 28 Présentation de la puce

29 29 ul { list-style-type: square; /*Puces carrées*/ }

30 30 ol { list-style-type: upper-alpha; /*NumÈrotation alphabétique*/ }

31 31 Changer la puce pour une image ul { list-style-image: url("dossier.png"); }

32 32 Les formulaires

33 33 Zone de text:

34 34 Mot de passe

35 35 Zone de texte multiligne Veuillez raconter votre vie :

36 36

37 37 Les cases à cocher ************************************************************************* Quels pays avez-vous déja visités ? La France LEspagne LAllemagne LItalie

38 38 Les zones doptions ******************************************************** Etes-vous majeur ou mineur ? Majeur (18 ans et plus) Mineur (-18 ans)

39 39 Les listes déroulantes Agence de voyages Tourisk Ou souhaitez-vous partir en vacances cet été ? En Papouasie-Nouvelle-Guinée Aux iles Fidji Dans la Creuse

40 40 boutton

41 41 Exercice2 Exploiter les differentes balises vues dans le cours dans des pages web

42 42 CSS, le langage de mise en page du Web

43 43 CSS Langage qui permet de faire la mise en forme des pages web(changer la couleur du texte ou du fond, changer la police, la taille, etc.)

44 44 Insérer du code CSS 1-Dans un fichier.css 2-Dans len-tête du fichier HTML

45 45 1-Dans un fichier.css séparé Exemple : p.html Bonjour, je suis un paragraphe !

46 46 Sans style

47 47 Fichier css Fichier s.css p{ text-align:center; font-size:20; color:red; }

48 48 Appliquer du style Bonjour, je suis un paragraphe !

49 49 Avec style

50 50 2-Dans len-tête du fichier HTML New Document p{ text-align:center; font-size:20; color:red; }

51 51 Appliquer un style à toutes les balises le symbole :étoile * ! Il signifie : « appliquer à toutes les balises ». * { propriete: valeur; ……. }

52 52 Appliquer un style à une balise Nom de la balise { propriete: valeur; ……. } Exemple: h1 { text-align: center; }

53 53 Appliquer un style à plusieurs balises Nom de la balise1, Nom de la balise2……… { propriete: valeur; ……. } Exemple: h1,h2 { text-align: center; }

54 54 Appliquer un style à des balises imbriquées Quest-ce quune balise imbriquée ? Cest une balise qui en contient une autre. Petit exemple : Le voile du matin sur les monts se dÈploie. Vois, un rayon naissant blanchit la vieille tour ; Et dÈj dans les cieux síunit avec amour, Ainsi que la gloire la joie, Le premier chant des bois aux premiers feux du jour.

55 55 exemple1: blockquote p { text-align: center; } Cela signifie « Centrer tous les paragraphes (p) situés à lintérieur de citations longues (blockquote)».

56 56 exemple2: blockquote p strong { text-align: center; } Cette fois, cela signifie « Centrer tous les textes importants (strong) situés dans des paragraphes (p) eux-mêmes situés dans des citations longues (blockquote)».

57 57 Appliquer un style à certaines balises id : un identifiant unique au niveau du page html Au niveau de la feuille css #valeur { propriéte: valeur; }

58 58 exemple Ceci est un site de foot- ball #introduction { text-align: center; }

59 59 class : un identificateur réutilisable il existe un autre attribut, lui aussi utilisable sur la plupart des balises. Il sagit de class. Son fonctionnement est pratiquement le même que celui did, à la différence près quon peut donner le même nom à autant de balises que lon veut.

60 60 Exemple **********************page html******************** Bienvenue sur mon site web ! Présentation Ceci est le site de la league des champions. ************************feuille Css*****************. maclasse { text-align: center; } Résultat : toutes les balises utilisant la classe maclasse verront leur texte centré. POINT

61 61 Mettre en forme son texte

62 62 Aligner tout le texte: Propriété: text-align Valeurs; left : à gauche -center : centré -right : à droite- justify : justifié Exemple : h1 { text-align: center; }

63 63 Les alinéas Propriété: text-indent Exemple : p { text-indent: 30px; }

64 64 Les polices Propriété: font-family Exemple : p { font-family: Verdana; }

65 65 La taille du texte Propriété: font-size Exemple : p { font-size: 18px; }

66 66 Gras, italique, souligné, etc. Mise en gras: font-weight: bold; Mise en italique:font-style: italic; Mise en majuscules:text-transform:uppercase; Mise en minuscules:text-transform:lowercase; Souligner:text-decoration: underline;

67 67 couleur du texte color: code couleur; Exemple (voir logiciel code couleurs.exe) p { color: #3E75EF; }

68 68 La couleur de fond propriété:background-color. body { color: white; background-color: black; }

69 69 L image de fond background-image: url("nom_img.jpg");

70 70 Répétition de limage de fond Propriété:background-repeat. no-repeat : le fond ne se répétera pas. Il ny aura donc quun exemplaire de limage en fond de page. repeat-x : le fond se répétera uniquement horizontalement, sur la première ligne. repeat-y : le fond se répétera uniquement verticalement, sur la première colonne.

71 71 Bordures border-style:solid; border-width: 1px;//taille border-color: blue;//couleur

72 72 Exemple: Cadre arrondi

73 73 Exercice 3

74 74 La balise Il peut arriver que l'on désire appliquer un style à une portion de texte qui n'est pas délimitée par une balise. Pour réaliser celà on utilise la balise. La portion de texte concernée sera délimitée à l'aide de cette balise à laquelle on aura au préalable appliqué un style.

75 75 Exemple: SPAN {color:red; font-size:24pt; font- style:italic; font-family: serif; text-decoration: underline;} Ceci est un texte ne dependant d'aucune balise, cette portion est ecrite en rouge en 24 points italique et le tout est souligne.

76 76 Positionner les éléments dans la page

77 77 Balises de type bloc et de type en ligne Les balises de type bloc : ces balises créent des blocs de texte qui saffichent les uns en dessous des autres. Cest le cas par exemple des balises,,,,... Les balises de type en ligne : ces balises se trouvent toujours à lintérieur de balises de type bloc. Comme leur nom lindique, ces balises se placent au fil du texte, sur la même ligne. Quelques exemples de balises en ligne :,,,...

78 78 Le principe des boîtes En HTML, chaque élément, que ce soit un en ligne ou un bloc, est considéré comme une boîte. Chaque boîte possède : un contenu (le texte dun paragraphe par exemple) ; une marge interne, appelée padding ; une marge externe, appelée margin ; une bordure, appelée border. Padding-(top,left,right,bottom) Margin-(top,left,right,bottom)

79 79 Le positionnement flottant Ce type de positionnement que nous offre le langage CSS est très pratique. En effet, il permet de faire en sorte quun élément « flotte » et que le texte lentoure. Pour faire flotter un élément, on utilise la propriété CSS float. Elle peut prendre 3 valeurs différentes : left : flottement à gauche ; right : flottement à droite ; none : pas de flottement (par défaut).

80 80 Exemple Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla +.avatar { float: left; }

81 81 Le positionnement absolu Le positionnement absolu vous permet de placer un élément où vous voulez sur la page, au pixel près. il faut en effet dire à quel endroit on veut placer lélément sur la page, grâce aux quatre propriétés CSS suivantes : top : indique la distance par rapport au haut de la page ; bottom : indique la distance par rapport au bas de la page ; left : indique la distance par rapport au bord gauche de la page ; right : indique la distance par rapport au bord droit de la page.

82 82 Exemple.avatar { position: absolute; top: 100px; left: 260px; } Le point de coordonnées (0, 0) se trouve donc en haut à gauche de la page

83 83 Div et CSS : une mise en page

84 84 Page simple : bandeau, contenu, pied de page. Ceci est lebandeau Ceci est le contenu Ceci est le pied de page + #bandeau { width:600px; height:50px; background-color:#00CCFF; } #contenu { width:600px; height:400px; background-color:#FFCC00; } #piedpage { width:600px; height:50px; background-color:#33FF99; }

85 85 Ajout d'une barre de menu à gauche du contenu. Pour afficher deux div l'un à coté de l'autre, il va donc nous falloir utiliser une autre propriété. C'est la propriété float:left; clear:both; Rajoutons donc cette propriété à notre bloc 'pied de page' : ce ci est le bandeau ce ci est le menu ce ci est le contenu ce ci est le pied de la page

86 86 Fichier Css #bandeau { width:600; height:50; background-color:#00CCFF; } #menu { float:left; width:100; height:400; background-color:#FF6699; } #contenu { float:left; width:500; height:400; background-color:#FFCC00; } #pied { clear:both; width:600; height:50; background-color:#99FF33; }

87 87 Résultat

88 88 Exercice 4

89 Ceci est le bandeau Menu haut Menu bas Bloc News Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis neque laoreet ante varius rutrum. Nam arcu ipsum, blandit placerat, pharetra ut, pulvinar in, nulla. Vivamus condimentum, elit eu faucibus sollicitudin, nisi metus fermentum mi, sed egestas purus nunc sit amet est. Cras imperdiet, arcu sed placerat viverra, arcu justo malesuada augue, a tristique nunc neque vitae ligula. Mauris bibendum. Praesent nibh. Sed in lacus semper dui lobortis dignissim. Nunc iaculis, tortor sed commodo tincidunt, neque ligula porttitor orci, venenatis bibendum ante mi id massa. Pellentesque ipsum urna, posuere non, pellentesque non, tempus at, ipsum. Aliquam lacinia nisl sit amet ipsum. Nam volutpat vulputate lacus. Integer orci dui, lacinia non, blandit sit amet, vulputate vel, sem. Vestibulum mi neque, pharetra ut, venenatis et, ultricies vitae, urna. Ceci est le pied de page 89

90 div { text-align:center; } div#bandeau { width:600px; height:50px; background-color:#00CCFF; } div#menu { float:left; width:100px; height:400px; background-color:#FF6699; } div#menu_haut { width:100px; height:200px; background-color:#66CC33; } div#menu_bas { width:100px; height:200px; background-color:#CC99CC; } div#contenu { float:left; width:500px; height:400px; background-color:#FFCC00; } div#bloc_news { float:right; width:150px; height:150px; background-color:#FF3300; } div#pied_page { clear:both; width:600px; height:50px; background-color:#33FF99; } 90

91 91 Les Frames en HTML fonctionnement Il faut comprendre que le fichier HTML dans lequel vous allez définir vos fenêtres grâce aux Frames est indépendant des autres fichiers. Il va diviser votre écran en fenêtres et appeler d'autres fichiers dans ces fenêtres.

92 92 Exemple remplace.

93 93 Imagemap Utiliser le logiciel MapEdit

94 94 Les éléments multimédia ( son, vidéo)

95 95 Code : Windows Media Player :

96 96 Code : Real Player :

97 97 Code : Quicktime :

98 98 Code :animation Flash

99 99 Menu horizontal

100 100 Exemple: ul li{ list-style-type: none; float:left; margin-left:30px; border-style:solid; text-align:center; width:100; } ul li a{ text-decoration:none; } ul li :hover{ background-color:#D3D3D3; }

101 101 Dynamiser Votre Site Web Langage JavaScript

102 102 Définition JavaScript est un langage de script côté client, ce qui signifie qu'il s'exécute côté client, dans un navigateur Web.

103 103 Inclusion du code JavaScript Le code JavaScript peut se présenter de deux manières : 1-intégré dans une page HTML. 2-ou intégré dans un fichier externe.

104 104 1-intégré dans une page HTML //Code JavaScript exemple: alert("Welcome to JavaScript!");

105 105 2-Utilisation de chier(s) JavaScript externe(s)

106 106 Pseudo-URL dans JavaScript Une autre manière d'appeler du code JavaScript consiste à utiliser une pseudo- URL. Exemple: clickez ici

107 107 Exécution de JavaScript avec des gestionnaires d'événements La troisième manière d'exécuter du code JavaScript (les deux premières étant les éléments et les pseudo-URL JavaScript:) se fait par l'intermédiaire d'un gestionnaire d'événements en appelant des methodes. La plupart des éléments HTML acceptent quelques événements ; par exemple, la balise accepte l'événement de chargement(load). la balise accepte l'événement click… En utilisant le préfixe on, vous pouvez joindre le code à cet événement

108 108 Exemple: JavaScript

Annonces Google