hello world!

====== HTML – La Base ====== * Initié par Thomas Ricordeau. Date : jadis * Complété par Damien MUTI DESGROUAS. Date : 16/03/2020 --- effet coronavirus ===== Un peu d'histoire... ===== **Le langage HTML (HyperText Markup Language) ou langage de balisage hypertexte est un système de codes en texte structurant les pages web sur internet. Créé en 1989 en Suisse au CERN (Conseil européen pour la recherche nucléaire) par le britannique Tim Berners-Lee, il est utilisé sur le Web (World Wide Web).** **Le Web, à ne pas confondre avec Internet est une invention conjointe du britannique Tim Berners-Lee et du belge Robert Cailliau. Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de normalisation à but non lucratif, fondé en 1994.** ** HTML5 est la dernière révision majeure d'HTML. Cette version a été finalisée en octobre 2014.** sources Wikipédia ==== Les outils ==== On peut utiliser n'importe quel traitement de texte pour rédiger du code html, par exemple notepad pour PC. Il est toutefois conseillé d'utiliser un logiciel dédié comme notepad++ ou Sublime Text (payant mais la version gratuite est largement suffisante) afin de disposer d'outils d'assistance durant la rédaction du code. * http://notepad-plus-plus.org/fr/ * https://atom.io/ * http://www.sublimetext.com/ * ... ==== Liens ==== Les excellents cours de Nicolas Brignol : http://www.neeko.fr/cours/, qui ont très largement servi à la préparation de ces tutoriels. Les cours de Johan Segura, enseignant de mathématiques au lycée St Exupéry: http://segura.ddns.net/lycee/index.php?d=about ---- ===== hello world! =====






	 hello world! 


	hello world!

{{:wiki:tutoriels:html:web02.jpeg?300|}} ===== Créer une page HTML basique ===== Le code est commenté pour favoriser la compréhension.








	
	basic.html
	
	





	
	titre de niveau 1
	
	
		Ceci est un paragraphe.
		Notez que le texte est automatiquement aligné.

{{:wiki:tutoriels:html:web03.jpeg?300|}} ---- ===== Les balises ===== Le langage html est composé de balises qui encadrent les parties du code, balise ouvrante , balise fermante . Les balises peuvent contenir des attributs, des balises enfants ou du texte. On dit d'une balise "contenante" qu'elle est parent. L'ensemble constitue une arborescence, autrement dit un arbre d'où l'importance de hiérarchiser votre code pour révéler son organisation (imbrication), par une indentation et des sauts de ligne clairs. Si vous êtes contributeur du wiki, vous êtes déjà sans le savoir familier de ce type de langage balisé! * **** * **** * **** * **html:** balise encadrant tout le document * **head:** balise d'entête de la page, définissant les propriétés du document * **meta:** balise définissant un aspect du document * **title:** balise de titre * **body:** balise du corps du document * **h1, h2, h3 ... h6:** différents niveaux de titres * **p:** paragraphes ---- La suite ici: [[wiki:tutoriels:html:html_01|HTML - Images, listes, liens...]] ===== Un Cours et des liens utiles sur le HTML et la CSS ===== * Par Damien MUTI DESGROUAS (17/03/2020) ==== Une présentation du HTML et de la CSS ==== Les cours suivants sont une compilation de cours de HTML/CSS effectués à l'IUT Multimédia d'Arles (par Zeineb EL KHALFI), du site de référence W3scools [[https://www.w3schools.com/|W3scools]] et [[https://developer.mozilla.org/fr/|MozzilaDevelopper.com]] : * {{ :wiki:tutoriels:html:chap_html_css.pdf |Cours : chap_html_css.pdf}} * {{ :wiki:tutoriels:html:cours_html_css_1.2.pdf |Présentation : cours_html_css_1.2.pdf}} * {{ :wiki:tutoriels:html:cours_html_css_1.2.pptx |Présentation : cours_html_css_1.2.pptx}} ==== Des fonctionnalités plus poussées utilisant la CSS ==== Afin de rendre vos pages dynamique, les possibilités données par la CSS sont très importante, sans avoir à utiliser le JavaScript. Voici quelques documents utiles : * Créer un site "**__Responsive__**, c'est à dire dont la mise en page dépend de la taille de l'écran utilisé pour visionner le site : {{ :wiki:tutoriels:html:chap_responsive_web_design.pdf |chap_responsive_web_design.pdf}} * Incorporer des **__animations__** et des **__transitions__**, très utiles pour rendre le pages dynamiques : {{ :wiki:tutoriels:html:animation_css.pdf |animation_css.pdf}} ==== How to ?...Quelques liens utiles ==== * [[https://www.w3schools.com/html/default.asp|Introduction au HTLM]] * [[https://www.w3schools.com/css/css_rwd_intro.asp|Introduction à la CSS]] * [[https://www.w3schools.com/css/css_rwd_intro.asp|Site "Responsive"]] * [[https://www.w3schools.com/css/css_navbar.asp|Inclure des barres de navigation, et des menus (fixes, déroulants, etc.)]] * [[https://www.w3schools.com/css/css3_transitions.asp|Transitions ]] * [[https://www.w3schools.com/css/css3_animations.asp|Animations]] * [[https://www.w3schools.com/css/css_pseudo_classes.asp|Rendre vos pages les plus dynamiques possibles en incluant les effets liés aux pseudo-classes ( :over, etc...)]] * [[https://www.youtube.com/watch?v=ZsuTciVL8PU|Slider d'images]], et les fichiers sources associés : {{ :wiki:tutoriels:html:slider_images.zip |}} * Images de fond qui défilent avec des parallaxes différentes : [[wiki:projets:aiga-trebola:aiga-trebola|Aiga Trebola - Amandine Long]] ==== Des ressources HTML/CSS Open Source ==== * [[http://www.openwebdesign.org/|OpenWebDesign - Structures libres de droit]] * [[https://vikpe.org/archive/arcsin-web-templates/|Arcsin Web Templates - CSS libres de droit]] ==== Fonts Libre de droit ==== * [[http://www.fontsquirrel.com/|Font-Squirel - Des fonts libres de droit]] * [[http://www.dafont.com/fr/|Dafont - Des fonts pas forcément libres ]] * [[http://velvetyne.fr/|velvetyne.fr- Des fonts libres de droit]] ==== Gérer la couleur ==== * [[http://html-color-codes.info/Codes-couleur-HTML/|HTML Color Codes ]] ==== Éditeurs WYSIWYG ... ou pas ==== Il est possible de développer un site à partir d'un éditeur en WYSIWYG (What you see is what you get) tel que WordPress etc... Si vous utilisez ce genre d'outils, vous devez être capables de commenter chaque ligne de code. Dans la mesure du possible, je vous conseille tout de même de développer votre site à partir des modèles développés en cours sur les éditeurs de votre choix (NotePad++, SublimeText, etc...). En effet, l'objectif est que vous sortiez de cette expérience avec une véritable compréhension et des compétences solides en programmation HTML/CSS. En utilisant un éditeur WYSIWYG , vous êtes esclave de vos outils qui se comportent comme des boites noires dans lesquelles le contenu et la mise en forme sont noyés dans du code JavaScript... Des exemples d'Éditeurs WYSIWYG : * [[http://outils-web.fr/les-12-meilleurs-editeurs-html-gratuits/|Quelques éditeurs Open Source]]