Module Technologie du web Contenu Planning Mode d`emploi
Contents
1. S Lanquetin L3 Introduction Technologie pour le Web CSS comment faire deco css index html TSS deco css propri t valeur index html S Lanquetin L3 Introduction Technologie pour le Web Regroupement de s lecteurs Si les informations sont les m mes pour 2 l ments On peut les grouper S Lanquetin L3 Introduction Technologie pour le Web S lecteurs d enfants Le style n est appliqu strong que s il est descendant direct d une balise p Exemple lt p gt La couleur lt strong gt rou ge lt strong gt est appliqu amp eacute e NS lt strong gt ici lt strong gt lt q gt Mais lt strong gt pas ici lt strong gt lt q gt lt p gt La couleur rouge est appliqu e ici Et ici aussi A Pas support par IE6 S Lanquetin L3 Introduction Technologie pour le Web S lecteur d enfants adjacents Le style n est appliqu p que s il suit une balise h2 a A Pas support par IE6 S Lanquetin L3 Introduction Technologie pour le Web S lecteur pour identifiant et classe S lecteur d identifiant S Lanquetin L3 Introduction Technologie pour le Web Mise en forme du texte s Polices Plusieurs polices Par ordre de priorit Polices par d faut serif avec empattement esans serif Gras Italique Lanquetin L3 Introduction Technologie pour le Web Style et balise Style pour certaines oo Ide2. El ment lt button gt Comme lt input gt accepte contenu lt button gt lt button gt lt button type reset name reset value reset gt texte sur bouton lt button gt texte sur bouton Attributs m Name nom commande m Value valeur initiale m Type submit reset button S Lanquetin L3 Introduction Technologie pour le Web El ment lt select gt Exemple lt select name pays size 3 multiple multiple gt lt option gt Allemagne lt option gt lt option gt Angleterre lt option gt lt option gt France lt option gt lt option gt ltalie lt option gt lt select gt Allemagne Angleterre France Y S Lanquetin L3 Introduction Technologie pour le Web El ment lt select gt CR Se lt optgroup gt lt optgroup gt groupe d options dans une liste d roulante m label nom du groupe lt select name pays gt lt optgroup label Europe gt lt option value fr selected selected gt France lt option gt lt option value it gt ltalie lt option gt lt loptgroup gt lt optgroup label Asie gt lt option value ch gt Chine lt option gt lt loptgroup gt lt select gt 13 El ment lt textarea gt SE Cr e une zone de texte multiligne Attributs Name Rows gt nombre de lignes visibles Cols gt largeur visible Readonly gt booleen pour mode lecture seule wrap gt passage la ligne automatique dans le champ de saisie g
3. donner une largeur 2 Marges automatiques gauche et droite IE 5 5 et avant Lanquetin L3 Introduction Technologie pour le Web Habillage du texte Arr ter flottement S Lanquetin L3 Introduction Technologie pour le Web Exemple de flottement et d arr t Lt Ce Texte est cot de l image Celui ci se place sous l image S Lanquetin L3 Introduction Technologie pour le Web Positionnement fixe Absolu l ment reste fixe quand la page d file Utilisation Menu S Lanquetin L3 Introduction Technologie pour le Web Exemple de flottement code du block qui reste fixe S il y a assez de texte le texte va entourer l image Attention Lt le code de la partie flottante doit tre crit avant le code du block qui reste fixe S il y a assez de texte le texte va entourer l image S Lanquetin L3 Introduction Technologie pour le Web Positionnement absolu Placement au pixel pr s 0 0 260 0 0 100 bottom right IE 6 et avant pas de positionnement absolu Imbrication de bloc s Superposition z index le plus lev devant les autres S Lanquetin L3 Introduction Technologie pour le Web Positionnement relatif Position par rapport la position th orique Dans cet exemple le texte important est surlign et d plac S Lanquetin L3 Introduction Technologie pour le Web Positionnement statique Retour au positionnem
4. Fe gt lt label for Fe gt Femme lt label gt lt li gt lt ul gt lt lfieldset gt an lt form gt Homme S Lanque Femme Les Pseudo l ments CR Un pseudo l ment est une caract ristique qui permet de rajouter du d tail de style On reconna t un pseudo l ment l utilisation de dans la d finition du style correspondant Quelques exemples S Lanquetin L3 Introduction Technologie pour le Web 14 Quelques pseudo l ments first letter ne s applique que sur la premi re lettre de l ensemble Lrst line ne s applique que sur la premi re ligne de l ensemble On peut pr ciser quel l ment appliquer le pseudo l ment p first letter color red font size large first letter color red font size large l S Lanquetin L3 Introduction Technologie pour le Web Les Pseudo classe liens CE 17 Un lien peu avoir plusieurs tats m Visit m Actif m Point par la souris Les pseudo classes permettent de donner des styles diff rents ces diff rentes classes de liens S Lanquetin L3 Introduction Technologie pour le Web R solution d un site CE Statistiques m 4 d utilisateurs en 800x600 en juin 2009 m 36 en 1024x768 m 57 en r solutions sup rieures Tendances m Fixe gauche m Fixe au centre m Fluide S Lanquetin L3 Introduction Technologie pour le Web Les Pseudo classe s
5. Une pseudo classe est tr s similaire un pseudo l ment On parle de pseudo classe quand un objet peut avoir diff rents tats Un exemple S Lanquetin L3 Introduction Technologie pour le Web Les Pseudo classe liens r link gt s applique un lien actif avant visite gt visited gt s applique un lien visit gt active gt au moment ou le lien est activ gt hover gt lorsque la souris est sur le lien gt focus gt lorsque le focus est sur le lien tabulation par exemple S Lanquetin L3 Introduction Technologie pour le Web Fixe gauche Zoom sur les troubles M dicaments sexuels f minins Nouveau guide des m dicaments Rechercher dans nos articles Grippe La vaccination chez le m decin Apr s plusieurs mois d attente est possible de si decin je X ani PLi Thalassoth rapie Les nouvelles tendances Doctissimo SE MOBILISE POUR SOUTENIR 15 Fixe centr Vito Alsacr ations est une agence web Strasbourg en Alsace sp cialis e dans la conception de sites internet conformes aux standards internationaux W3C et accessibles tous Nos comp tences sont principalement orient es vers le d veloppement et l int gration HTML XHTML CSS PHP MySQL Actionscript Ajax et le design web Flash PR S RE EE cr ations Cr ation de sites
6. le Web Les Formulaires Pourquoi Envoyer des informations m 1 m thode informations dans l adresse de la page http gt limit e 255 caract res gt Informations visibles method get m 2nd m thode S Lanquetin L3 Introduction Technologie pour le Web El ment lt input gt Permet de cr er de nombreuses commandes Syntaxe type type de commande cr er Par d faut text saisie de texte sur 1 ligne size largeur initiale de la commande en nb de caract res maxlength nombre maxi de caract res que l utilisateur peut saisir value remplir le champ par d faut S Lanquetin L3 Introduction Technologie pour le Web 11 El ment lt input gt D Exemple lt form id nomform action gt lt h3 gt Nom lt input type text name nom value toto size 10 gt lt h3 gt lt form gt Affichage Nom toto S Lanquetin L3 Introduction Technologie pour le Web El ment lt input gt CE EE type radio bouton radio attribut checked si case pr s lectionn e attribut va ue obligatoire lt p gt Boutons radio lt h lt input type radio iname rad value rouge gt rouge lt br gt lt input type radio iname rad value vert gt vert lt br gt lt input type radio name rad value bleu checked checked gt bleu lt br gt lt p gt Boutons radio rouge vert bleu gt Lanquetin L3 I
7. Contenu Module Technologie du web s Xhtml css html5 css3 SL Javascript SL Xml dtd xsit xpath ED s Php SL Ajax ED S Lanquetin Jquery ED Aile sciences de l ing nieur s Responsive web SL Bureau G206 s Projet Pr sentation 4 f vrier Attribution 18 f vrier Point 18 mars D mo semaine 5 mai S Lanquetin L3 Introduction Technologie pour le Web Technologie du Web L3 Info Pla RER RER a Mode d emploi s Ponctualit CM TD TP En cas d absence r cup rer Projets groupes en f vrier d but en mars s Modalit s examen m Dur e 2 heures m Pas de documents Semaine du 19 mai m 1 unique feuille manuscrite recto verso m Questions Cours Exercices Qu est ce que c est Technologie pour le Web OOHTML CSS Langage de description qui permet de cr er des documents interactifs Sandrine Lanquetin m liens hypertextes lecture non lin aire Aile sciences de l ing nieur Bureau G206 m lt ind pendant du syst me d exploitation et de sandrine lanquetin u bourgogne fr l ordinateur fichier texte marqueurs marqueur balise tag S Lanquetin L3 Introduction Technologie pour le Web Mais encore 2 langages m XHTML pour le fond m CSS pour la forme Consulter un site m Code interpr t par le logiciel de navigation Navigateurs Mozilla Firefox Internet Explorer m En tester au moins 2 Cr er un site m Editeur de texte Notepad m WYSI
8. S SoS CS Codecs a Red Green Bue ci Fixer l image de fond Pakad enan e Valeurs comprise entre 0 et FF pour chaque couleur de i se p tition de l image ie SeN er sa a p g background repeat no repeat Rouge ff0000 1 repeat x repeat y Vert 00ff00 repeat Bleu 0000ff Positionner le fond background position 300px 100px Blanc ffffff center middle Noir 000000 Top middle bottom left center right S Lanquetin L3 Introduction Technologie pour le Web S Lanquetin L3 Introduction Technologie pour le Web Pseudo formats Passage de la souris s Page visit e S Lanquetin L3 Introduction Technologie pour le Web Les listes Liste de d finition Imbrication de listes entre lt li gt et lt li gt S Lanquetin L3 Introduction Technologie pour le Web Les tableaux s Balise Cr ation par ligne Ligne d coup e en cellules Ent te gras S Lanquetin L3 Introduction Technologie pour le Web Les listes Liste non ordonn e lt li gt lt li gt correspond une puce Liste ordonn e Style css pour changer le type de num rotation S Lanquetin L3 Introduction Technologie pour le Web CSS pour les listes Retrait de liste list style positioniinside Apparence de la puce Image pour puce S Lanquetin L3 Introduction Technologie pour le Web Les tableaux S Lanquetin L3 Introduction Technologi
9. WYG Dreamweaver Frontpage Nvu S Lanquetin L3 Introduction Technologie pour le Web Structure d un document HTML Balise de base html Titre de la page Fin du document lt html gt Lanquetm L3 Introduction Technologie pour le Web Baliser le texte Mise en valeurs m Faible Citations m Courtes Indice ksub gt deu S Lanquetin L3 Introduction Technologie pour le Web Comment a fonctionne Commandes sous forme de balises lt gt Balise en paire atmes Tire de a enere lt gt a Balise auto fermante lt img gt Attribut compl ment d information pour la balise Remarques m Les balises sont crites en minuscule xml m Les retours de chariot espaces blancs ou tabulations ne sont pas pris en compte S Lanquetin L3 Introduction Technologie pour le Web Baliser le texte S Lanquetin L3 Introduction Technologie pour le Web Vers 1 autre page Page1 html lt p gt lt a href page2 htmi gt Aller page 2 lt a gt lt p gt page2 hmi title pour ajouter une infobulle Dans la page page2 htmi S Lanquetin L3 Introduction Technologie pour le Web Liens dans une autre page age2 html age2 html Pagel html Page2 html Pagel html rep Page2 html agel html Adresse relative S Lanquetin L3 Introduction Technologie pour le Web S Lanquetin L3 Introduction Technologie pour le Web Liens externes page2 h
10. ader 215 clics a E EDLFP Wikireader mettez Wikip dia dans votre poche 78 clics gt Lire les commentaires 1 commentaire moyenne 3 S Lanquetin L3 Introduction Technologie pour le Web Fluide intelligent CETTE ne G rer taille extr me div width 80 max width 1000px min width 700px S Lanquetin L3 Introduction Technologie pour le Web Favicon CS Ki http www siteduzero com Gestion d IE6 lt if It IE 7 gt lt style type text css gt div width 770px width expression document body clientWidth lt 602 600px document body clientWidth gt 1002 1000px auto lt style gt lt endif gt coalition anti IE6 EE Norv ge Su de Indon sie et Australie Internet Explorer 6 usage around the world Argentina 0 9 India 3 0 Australia 0 8 Indonesia 1 1 Austria 0 3 Italy 0 9 Spain Belgium 0 5 Japan 47 Sweden Brazil 0 7 Malaysia 1 0 Switzeriand Canada 0 7 Mexico 0 8 Taiwan Chile 1 6 Netheriands 0 3 Thailand Peoples Republic e 243 New Zealand 0 6 Turkey of China Colombia 0 8 Norway 0 1 Ukraine Czech Rep Do ue pu LL Denmark 0 2 Dos d USA Finland 02 a 06 Russia 0 6 Vietnam France 1 0 Germany 0 5 Saudi Arabia 1 7 Hong Kong SAR 1 8 Source Net Applications June 30 2012 data Intemet Explorer 6 usage share by pey ell OS Venezuela Singapore 1 6 Oduction Technologie pour le Web lt link r
11. e pour le Web Bordures en CSS Type de bordure Style appliquer sur lt table gt ET lt td gt Epaisseur border width 3px border left Couleur border color blue right 3 top Raccourci border 3px solid blue bottom S Lanquetin L3 Introduction Technologie pour le Web Les tableaux Titre du tableau Grand tableau lt thead gt _ lt tfoot gt lt tody gt Fusion des cellules lt td colspan 2 gt S Lanquetin L3 Introduction Technologie pour le Web Balise g n rique div et span padding Contenu contenu marge interne marge externe bordure Par d faut Pas de bordure Pas de marge en ligne Marge block sauf div Les marges externes ne s ajoutent pas S Lanquetin L3 Introduction Technologie pour le Web Les tableaux s gt table border 1px solid black B gt th td border 1px solid black 7 cellpadding 2 padding 2px cellspacing 3 border spacing 3px 1 seule bordure S Lanquetin L3 Introduction Technologie pour le Web Position dans la page Balises type bloc Ep etabies em lemme m Largeur page m Les unes en dessous des autres Balise type en ligne ka gt lt q gt lt strong gt m Taille du texte m Pas de retour la ligne Passage bloc ligne S Lanquetin L3 Introduction Technologie pour le Web Modifier un bloc Da TE TE gt Dimensions mamaa Hans s adapte r solution Centrer 1
12. el shortcut icon href favicon ico gt AA Pas support par IE lt link rel icon type image png href logo png gt S Lanquetin L3 Introduction Technologie pour le Web 16
13. ent par d faut S Lanquetin L3 Introduction Technologie pour le Web Exemple de positionnement Bloc contenu plus grand que bloc menu Bloc titre Bloc menu Bloc contenu avec bloc contenu plus grand ou gal au bloc menu Bloc pied de page Exemple de positionnement Bloc menu plus grand que bloc contenu Bloc menu Bloc contenu avec bloc menu plus grand ou avec bloc contenu plus grand ou gal au bloc menu gal au bloc contenu Cette solution n est pas satisfaisante S Lanquetin L3 Introduction Technologie pour le Web Exemple de positionnement display m inline m block m table gt ie8 m table cell gt ie8 m inline block Safari Op ra firefox 3 S Lanquetin L3 Introduction Technologie pour le Web Exemple de positionnement avec bloc contenu plus grand ou gal au bloc menu S Lanquetin L3 Introduction Technologie pour le Web Exemple de positionnement Exemple de positionnement Colonne 1 blabla J Lanquetin L3 Introduction Technologie pour le Web Exemple de formulaire oduction Technologie pour le Web Comment Balise sform gt lt horm gt m Attributs gt method gt action adresse de la page ou du programme qui va traiter les informations gt envoy es par mail gt Stock es BD puis r affich es m Pour crire dans un formulaire il faut des balises de type block lt p gt S Lanquetin L3 Introduction Technologie pour
14. fois moins pr sent MSIE 0 propri taire 2 fois moins pr sent Opera 9 8 propri taire second navigateur le plus utilis en hausse et Konqueror en hausse Le site comporte plus de 25000 d p ches et autant d entr es gt Lire la d p che 13 commentaires moyenne 3 7 Le site LinuxFr org vit avec les d p ches que vous r digez ou que vous contribuez r diger Tri chronologique par note par int r t s lection de contenus du site tri s chronologiquement he WikiReader en fran ais Post par asthro Mod r le jeudi 21 janvier 07 17 Le WikiReader lecteur de Wikipedia hors igne a d sormais une image de Wikip dia Fran ais se mettre sous la dent Apr s quelques d boires techniques et de longs traitements 36 heures de compilation une archive de 1 4 Go est disponible mettre sur la carte uSD du lecteur afin de consulter tous les articles fran ais de Wikipedia partout J Cerise sur le g teau un autre membre de Openmoko fr org a traduit linterface dans la langue de Moli re pour avoir un outil totalement francis Certains ironiseront que les boutons physiques resteront pour l instant en anglais Le clavier virtuel passe en AZERTY sans accent pour le moment a BE Firmware du WikiReader en fran ais 87 clics a E E Fichier fran ais chez Bearstech 14 Go 49 clics E E Fichier fran ais chez Burn2 1 4 Go 23 clics a E E Forum OpenMoko fr org 40 clics a E E Wikire
15. ntifiant unique index htm deco css E m Identifiant r utilisable classe class deco css oduction Technologie pour le Web Mise en forme du texte Aligner Ain as final Nom de taille xx small Taille font size 20px x small small Notations relatives 1 5em largeur M medium 1 5ex hauteur de X aA 80 xx large S Lanquetin L3 Introduction Technologie pour le Web Mise en forme du texte Souligner Majuscule Minuscule S Lanquetin L3 Introduction Technologie pour le Web Couleur et fond Couleurs CE s Code couleur Red Green Blue RGB color 00FF 00 2 chiffres 2 chiffres 2 chiffres hexas hexas hexas gt Couleur de fond pa ME gt 256 valeurs possibles par couleur Image de fond g background image url image jpg Image de fond lt 50 Ko S Lanquetin L3 Introduction Technologie pour le Web S Lanquetin L3 Introduction Technologie pour le Web Hexad cimal Conversion d cimal hexad cimal CE Binaire 0 1 255 i6 2 chiffres 15 15 16 D cimal 0 1 2 3 4 5 6 7 8 9 iis o a a N a F 10 chiffres Hexad cimal 0 1 2 3 4 5 6 7 8 9 A B C D E F 2 t a E techies 33 21h 255 lt FF La calculatrice de l ordinateur fait ces conversions S Lanquetin L3 Introduction Technologie pour le Web S Lanquetin L3 Introduction Technologie pour le Web Couleurs Image de fond C amp T
16. ntroduction Technologie pour le Web El ment lt input gt CE Le type submit cr e un bouton de soumission du formulaire Effectue l action d finie dans l l ment lt form gt lt input type submit name envoyer value envoyer gt envoyer Le type reset cr e un bouton de r initialisation du formulaire lt input type reset name reset value reset gt reset S Lanquetin L3 Introduction Technologie pour le Web El ment lt input gt CE ET type password saisie de texte sur une ligne de type mot de passe masqu lt label for pass gt Mot de passe lt label gt lt input type password name pass id pass value toto size 10 gt Mot de passe eee S Lanquetin L3 Introduction Technologie pour le Web El ment lt input gt OR ES type checkbox case cocher attribut checked si case pr s lectionn e attribut va ue obligatoire lt input type checkbox name homme gt homme lt br gt lt input type checkbox name femme checked checked gt femme Boutons checkbox homme v femme S Lanquetin L3 Introduction Technologie pour le Web El ment lt input gt CR Le type image cr e un bouton de soumission graphique alors l attribut src sp cifie l URL de l image alt donne une alternative lt input type image src coccinelle gif alt coccinelle gt Le type button cr e un bouton d action javascript lt input type bu
17. t off pas activ gt virtual affiche le passage la ligne mais n envoie pas les retour la ligne au serveur gt physical affiche et transmet les retour la ligne S Lanquetin L3 Introduction Technologie pour le Web El ment lt label gt CE RE ES Permet d ajouter des libell s Attribut optionnel for permet de lier le label la commande par son attribut id Pr nom S Lanquetin L3 Introduction Technologie pour le Web Soumission du formulaire CE Protocole HTTP get gt pr f r quand pas d effets secondaires type recherche post gt quand la soumission du formulaire a un effet ajout dans une base de donn es Type de contenu enctype Application x www form urlencoded Multipart form data fichiers donn es non ASCII donn es binaires S Lanquetin L3 Introduction Technologie pour le Web El ment lt textarea gt Exemple S Lanquetin L3 Introduction Technologie pour le Web El ments lt fieldset gt et lt legend gt CE lt fieldset gt permet de rassembler par th me certains l ments d un formulaire lt egend gt permet d associer une l gende ce groupe d l ments lt form action gt lt fieldset gt lt legend gt Sexe lt legend gt lt ul gt lt li gt lt input type radio value H name sexe id Ho gt lt label for Ho gt Homme lt label gt lt li gt lt li gt lt input type radio value F name sexe id
18. tml ep Pagel html rep Page2 html Envoi d un email age1 htmli A spams php subject S Lanquetin L3 Introduction Technologie pour le Web S Lanquetin L3 Introduction Technologie pour le Web Les accents D buter le code par le amp JPEG PNG GIF XE X Inscrire le caract re a e i o u Ecrire avec un des codes suivants Balise accent grave s Formats accent circonflexe circ c dille Lien image Terminer le tout avec un point virgule Donc amp eacute S Lanquetin L3 Introduction Technologie pour le Web S Lanquetin L3 Introduction Technologie pour le Web Caract res r serv s S Lanquetin L3 Introduction Technologie pour le Web Style et balise Style commun toutes les balises Commentaire en css style pour une balise Style commun plusieurs balises Style pour des balises imbriqu es S Lanquetin L3 Introduction Technologie pour le Web S lecteurs descendants Le style n est appliqu strong que s il est imbriqu dans une balise p Exemple lt p gt La couleur lt strong gt rouge lt strong gt est appliqu amp eacute e lt strong gt ici lt strong gt lt q gt Et lt strong gt ici aussi lt strong gt lt q gt lt p gt lt div gt lt strong gt Mais pas ici lt strong gt lt div gt lt p gt Ni l amp agrave lt p gt La couleur rouge est appliqu e ici Et ici aussi Mais pas ici Nil
19. tton name nom value Gol gt Gal S Lanquetin L3 Introduction Technologie pour le Web 12 El ment lt input gt E Le type hidden cr e une commande cach e Ajoute au formulaire avant l envoi des donn es lt input type hidden name label value texte gt Le type file cr e une commande de s lection de fichier lt input type file name label value texte gt Parcourir S Lanquetin L3 Introduction Technologie pour le Web El ment lt select gt E Cr e un menu Syntaxe lt select name nom gt lt option gt lt option gt lt select gt Chaque option est repr sent e par un l ment lt option gt Attributs m Name m Size gt nombre de lignes de menu affich es a Multiple autorise la s lection simultan e de plusieurs items de la liste S Lanquetin L3 Introduction Technologie pour le Web El ment lt select gt E Attributs de l l ment lt option gt m value d finit la valeur pass e au script m selected pr s lection d un item de la liste ou valeur par d faut du menu lt select name pays size 3 multiple multiple gt lt option value All gt Allemagne lt option gt lt option value Ang gt Angleterre lt option gt lt option value Fr selected selected gt France lt option gt lt option value lt gt Italie lt option gt lt select gt S Lanquetin L3 Introduction Technologie pour le Web
20. web Webdesign et graphisme Int gration XHTML CSS Formations web Animations Flash Mise en conformit W3C Accessibilit web Outils PHP MySQL R f rencement H bergement Fluide a Bloc menu fixe et autre non pr cis recherche Accueil D p ches Entretiens Journaux Forums Sondages Suivi Statistiques Contact Plan amen e QU tnt ous vous corail user l acc s s curis SSL Pseudo Mot de passe Photoshop Vectoriel x En savoir plus aux ditions Eyrolles Nos formations web re ot documents de r f rence par le milieu Fort d une reconnaissance tablie dans le domaine de la conception web conforme CRE Alsacr ations propose des formations XHTML et CSS niveau d butant confirm Alsacreations com ra et aussi El connexion automatique 4 publications Connexion Cr er un com Perdu votre mot de passe Changer le style Aide et FAQ Articles EE ESCORT 1 y a un an TS annuelles voir 2008 et 2008 montre une hausse de 21 du a Logiciel Reprise de Dspam par Is communaut A l chamin ES LE 2 Aties LIVE d barque chez FON SE A nman Logiciel Open Web Server 1 0 est ib r Logiciel Faire part de naissance FusionForge e Anides L utilisation du cadesve fran ais autoris e pour OpenStreetMap on constate identit s comme Mozilla 5 0 restent constants 09 MSIE 7 0 propri taire est bois
Download Pdf Manuals
Related Search