Module 1 : Réaliser un site internet La feuille de Style L'informatique est une science qui est en essor fulgurent depuis quelques années, netbook, smarphone , applications … font partis de notre vie quotidienne. Pour mieux comprendre ce monde virtuel (et aussi matériel) il y a nue nouvelle option : l'I.S.N Module 1 : Réaliser un site internet
L’essentiel du CSS Le HTML gère le contenu et sa signification Le CSS permet d'enjoliver le contenu et créer des pages plus complexes ou plus attractives, en ajoutant des couleurs, en gérant des polices, la mise en page, etc….. Voyons à qui NE s'adresse PAS cette option. Si vous souhaitez uniquement utiliser sans chercher à comprendre, passer votre chemin ! L’essentiel du CSS
Comment insérer le code CSS ? Dans la partie <head> de la page HTML : ☞ ne vaut donc que pour cette page <head> …… <style type="text/css"> h1 { color: red; } …… </style> ……… </head> Si par contre, vous souhaitez comprendre, devenir maître de votre vie numérique et même réaliser vous même votre propre solution informatique à un de vos problème (alors qu'aucune société informatique n'y avait pensé!) et bien cette option est faite pour vous. Comment insérer le code CSS ?
Comment insérer le code CSS ? Inline : dans le corps de la page html ☞ pour cibler un texte précis <h2 style = "background-color: red; "> Ceci est un titre </h2> <p style = "font-family: arial; color: red; font-size: 20px; "> ceci est le paragraphe </p> Si par contre, vous souhaitez comprendre, devenir maître de votre vie numérique et même réaliser vous même votre propre solution informatique à un de vos problème (alors qu'aucune société informatique n'y avait pensé!) et bien cette option est faite pour vous. Comment insérer le code CSS ?
Comment insérer le code CSS ? Dans un fichier externe : donner le lien dans une balise <link> de la partie <head> ☞ plus pratique car peut être utilisé par plusieurs pages html <head> … <link rel="stylesheet" href="style.css" type="text/css"> … </head> Si par contre, vous souhaitez comprendre, devenir maître de votre vie numérique et même réaliser vous même votre propre solution informatique à un de vos problème (alors qu'aucune société informatique n'y avait pensé!) et bien cette option est faite pour vous. Comment insérer le code CSS ?
Comment faire ? Utiliser deux fichiers : pages.html : contiendra tout le contenu de nos pages HTML. style.css : contiendra toutes les informations de mises en forme (body, h1 , p, paragraphes identifiés…). Voici le programme qui est varié : - Architecture des ordinateurs - Réseaux - Algorithmique - Langages de programmation - Robotique - Représentation de l'information - Droit, libertés et responsabilités L'objectif est d'avoir un aperçu sur chacun de ces domaines, vous ne serez pas des « spécialistes chevronnés» car chaque item est très dense. Comment faire ?
Exemple index.html style.css Voici le programme qui est varié : - Architecture des ordinateurs - Réseaux - Algorithmique - Langages de programmation - Robotique - Représentation de l'information - Droit, libertés et responsabilités L'objectif est d'avoir un aperçu sur chacun de ces domaines, vous ne serez pas des « spécialistes chevronnés» car chaque item est très dense. Exemple
Documents Documents à dispositions L’essentiel du CSS3 Le mémento du CSS3 Un site a découvrir Voici le programme qui est varié : - Architecture des ordinateurs - Réseaux - Algorithmique - Langages de programmation - Robotique - Représentation de l'information - Droit, libertés et responsabilités L'objectif est d'avoir un aperçu sur chacun de ces domaines, vous ne serez pas des « spécialistes chevronnés» car chaque item est très dense. Documents
Cahier des charges Voici le programme qui est varié : Page d’accueil qui comprend le plan sous forme de liste de votre exposé. Créer autant de pages que de rubriques existantes. Chaque page comportera du texte mis en forme avec entre autre des titres h1 et h2, paragraphes des liens vers les autres pages et la page d’accueil, ou sites externes des illustrations (image, extrait vidéo, …. ) Eventuellement des listes / tableaux Créer une page CSS de feuille de style pour mettre en forme les pages de votre site Pour titres h1 , h2, h3 : couleur, taille, police…. Pour les paragraphes : utiliser un identifiant pour les différentier Pour chaque zone divisions <div > des différentes pages Pour définir les listes, les liens hypertextes…. Voici le programme qui est varié : - Architecture des ordinateurs - Réseaux - Algorithmique - Langages de programmation - Robotique - Représentation de l'information - Droit, libertés et responsabilités L'objectif est d'avoir un aperçu sur chacun de ces domaines, vous ne serez pas des « spécialistes chevronnés» car chaque item est très dense. Cahier des charges