Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE 1 SÉQUENCE 1 ACTIVITÉ 1 A

CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE 1 SÉQUENCE 1 ACTIVITÉ 1 Apprendre 1. Initiation à l’HTML A. Introduction Pour consulter des informations nous pouvons naviguer simplement sur le Web et consulter des sites Web. Pour présenter ces informations, nous utilisons un navigateur comme Mozilla, Chrome. En fait, nous saisissons l’adresse d’un site web sous forme textuel www.nom_site_web.fr qui correspond à l’URL du site Web (Uniform Resource Locator), Nous verrons plus tard dans le cours ce qui se cache derrière cette adresse Web. Le Web désigne un réseau d’ordinateurs qui donnent accès à différentes informations comme : texte, image, vidéo, animations, base de données, etc. B. Ce qu’il y a derrière une page Web Taper l’adresse web : www.ffme.fr sur un navigateur comme Chrome. Effectuer un clic droit puis afficher le code source. Nous constatons que nous ne visualisons plus une page Web de la même façon, mais des balises (liste de commandes textuelles) apparaissent en rose encadrant des informations. 2 CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE C. Première page Web Il est possible de créer une page Web de façon très simple en utilisant un simple éditeur de texte très basique comme : brackets ou le blocnote ou notepad++ par exemple. Mais nous allons plutôt utiliser un éditeur qui permet une aide dans l’écriture d’une page Web en HTML comme Brackets que l’on peut télécharger ici. (http://brackets.io/ ) Il est aussi possible d’utiliser un outil en ligne comme : https://thimble.mozilla.org. Cet outil est identique à Brackets, mais demande une connexion Internet permanente. Tous les exercices pourront être réalisés, soit à l’aide de Brackets ou de Thimble (dans ce cas, voir https://vimeo.com/207612449). Nous allons créer une page Web, pour cela, vous pouvez suivre les étapes suivantes. Lancer Brackets puis créer un nouveau document. Enregistrer le fichier HTML en index.html. Saisir la page Web suivante. Nous allons visualiser la première page Web à l’aide d’un navigateur. Pour cela dans Brackets, il suffit de taper sur l’icône en haut à droite. CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE 3 Que constatez-vous ? Et oui, il y a un souci, on voulait afficher notre texte sur deux lignes. Or, le texte est présenté sur une seule ligne ! Cela signifie qu’il faudra utiliser un langage spécial pour pouvoir présenter des informations sur une page web, c’est ce que nous allons découvrir avec le langage HTML. Nous allons voir comment présenter le texte sur deux lignes. 2. HTML, un langage à base de balises A. Que signifie HTML ? Le HTML (« Hypertext Markup Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l’écriture d’un document avec des balises de formatage. B. Les balises Les balises permettent d’indiquer la façon dont doit être présenté les informations dans la page Web et les liens établis avec d’autres documents. En regardant la page Web proposée (essai.html), indiquer la fonction des différentes balises données dans le tableau ci-dessous. Pour cela, ouvrir la page essai.html à l’aide du navigateur Chrome, puis cliquer droit sur inspecter. Aide complémentaire si nécessaire : http://www.codeshttp.com/baliseh.htm Balise <!DOCTYPE html> <html> <title> <head> <body> < !-- --> <h1> <p> 4 CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE <a href=»http://www.ffme.fr»>lien vers une page web</a> <br/> <img src=»ipage.jpg» alt=»texte» title=»titre» width=»200» height=»133»> <ul><li> <ol><li> <a href=»#paragraphe»>Aller à paragraphe</a> <meta name=»keywords» content=»mot clé 1, mot clé 2...»> Une balise est un élément de texte (un nom) encadré par le caractère inférieur ( « < » ) et le caractère supérieur ( « > » ). Exemple la balise <br> pour un saut de ligne. Une balise (de début) fonctionne avec une autre balise (de fin) qui permet d’encadrer une action associée à un élément. <nom_balise> éléments…</nom_balise> C’est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images. Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ». 3. Liens hypertextes Dans l’exemple précédent, il est possible d’avoir accès à d’autres pages Web depuis la page Web de départ nommée essai.html. Ainsi, on peut dessiner un graphe associé à ces liens hypertextes. Arrête ou arc (lien hypertexte) Somment ou nœud (page Web) Il est possible de dessiner ce graphe à l’aide du site : http://graphonline.ru/en/ Ce graphe comporte alors 3 sommets et 2 arrêtes. On remarquera que le graphe est dit orienté, car on remarque des sens de déplacement imposés entre sommets (pages Web). On va par exemple de la pages Web essai.html vers la page d’accueil de www.ffme.fr et pas l’inverse. On représente alors le lien par une flèche orientée dans un sens donné. CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE 5 4. Création d’un mini site Web À partir de l’exemple ci-dessous, vous allez créer un petit site Web composé de deux pages Web. Vous créerez un lien orienté dans la page Web page1.html vers la page2.html, et réciproquement, un lien hypertexte dans la page2.html vers la page1.html. Il vous faudra modifier quelques balises HTML pour répondre au cahier des charges imposé. Ouvrir les pages Web à l’aide de Brackets et modifier les balises pour répondre aux commentaires. Pour la page1.html Pour la page2.html Vérifier que votre site Web fonctionne avec ses liens hypertextes. Créer le graphe du site Web à développer. Le dessiner avec http://graphonline.ru/en/ 5. Initiation à CSS A. Introduction Le langage (HTML) permet de créer des pages Web pour qu’elles soient visualisables à l’aide d’un navigateur qui interprète les balises HTML et présente correctement les informations. Voici alors deux pages Web (index.html et index2.html) qui semble identiques. Mais quelle est la principale différence entre ces deux pages Web ? 6 CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE Effectivement, la différence est la mise en forme et le placement des informations. Nous allons maintenant regarder le contenu HTML de ces deux pages Web. Que constatez-vous ? B. Le fichier CSS En fait, la mise en forme de la page Web en HTML est réalisée à l’aide d’un autre fichier appelé fichier CSS, ici style.css. Ce fichier style.css va donner la mise en forme associée à des balises HTML (agencement, positionnement, décoration, couleurs, taille du text, etc.). Le CSS pour Cascading Style Sheets est un langage de feuille de style. Dans l’exemple fourni, on s’aperçoit que toutes les données à afficher, en tant que titre de niveau1 (grâce à la balise <h1>), seront affichées en vert (green). Puis la police utilisée est fantasy. CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE 7 Fichier CSS : Valeur Propriété En effet, le code ici indique que toutes les informations qui sont intégrées dans une balise <h1> et présentent dans toute la page Web, seront présentées en vert, et police Fantasy. C. Modifier un fichier CSS Modifier la couleur des informations dans les balises h1 pour un affichage en rouge (red). D. Lien entre fichier CSS et fichier HTML Pour que la page Web puisse utiliser la mise en forme imposée dans le fichier style.css, il faudra que dans la page Web, on indique où se trouve le fameux fichier CSS (ici style.css). Pour cela, il faut positionner dans la zone <head> la commande suivante : <link href=”style.css” rel=”stylesheet” type=”text/css”> On définit alors le chemin d’accès ainsi que le nom du fichier CSS dans la partie href=’chemin_acces\nom_fichier.css’ Dans notre exemple le fichier style.css se trouve au même endroit que la page web index2.html. Un même fichier CSS peut alors être utilisé par plusieurs pages Web en même temps, ce qui est très pratique pour définir une charte graphique pour un site Web complet. Cela évite alors de modifier la présentation de toutes les pages Web, page par page. On peut ainsi modifier le design d’un site entier très rapidement. Appel de la page de styles 8 CNED – SECONDE – SCIENCES NUMÉRIQUES ET TECHNOLOGIQUE Toutes les pages Web qui utilisent le même fichier CSS seront alors modifiées en même temps. E. Exemples de commandes CSS Nous avons découvert deux commandes CSS permettant de fixer la couleur de la police ainsi que le type de police. Mais il existe de nombreuses autres commandes CSS. L’objectif dans ce cours n’est, bien sûr, pas de connaître toutes les commandes CSS. Commande CSS Effet font-size: 16px; Taille de la police en pixels font-size: 16pt ; Taille de la police en points Color rgb(0,0,255) ; Couleur de la police en utilsant les composant RGB (voir thème photogra phie numérique) font-style: italic; Police en italic font-weight: bold; Police en gras text-align: center; Texte aligné en mode centré text-align: left; Texte aligné à gauche (mode par défaut) text-align: right; Texte aligné à droite text-align: justify Texte « justifié ». Cela signifie que le texte prend toute la largeur (en fin de ligne) background-color: black; Couleur de fond de la page Web en noir uploads/Litterature/ st20-te-01-19-activite1-apprendre 2 .pdf