1 / 31

Mastering HTML Basics for Web Design | Practical Course Overview

Learn the fundamentals of HTML, CSS using Adobe Dreamweaver CS5 for building basic websites without coding. Practical approach emphasizing site structure and multimedia integration. Course covers HTML elements, tags, and attributes. Join now to enhance your web design skills!

judd
Download Presentation

Mastering HTML Basics for Web Design | Practical Course Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Applications Internet(COM2580) Introduction 3 octobre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2580/

  2. Un peu sur le prof • Etudiant au doctorat à Polytechnique Montréal • Accessibilité des nouvelles technologies • Aussi consultant en expérience utilisateur pour divers clients

  3. Infos en vrac • http://lrcm.com.umontreal.ca/greg/COM2580/ • Courriel : gregory.petit@umontreal.ca • Mercredi de 8h30 à 11h30 en B-340 (Marie-Victorin) • 3 crédits • 2 travaux individuels + 1 travail en binôme

  4. Avant de commencer…  Que veux dire « Applications Internet » pour vous?  Qu’est ce que vous attendez de ce cours?

  5. Et donc on fait quoi aujourd’hui? • Pourquoi ce cours??? • Que va-t-on voir dans ce cours? • HTML • Adobe Dreamweaver CS5 • Atelier

  6. Pourquoi ce cours???

  7. Pourquoi ce cours??? • Job en communication = contact quasi-obligatoire avec le monde de l’Internet. • Probabilité que vous ayez affaire à la gestion d’un site Web dans votre carrière = 98,25%. • Si cela peut vous rassurer, ce cours ne va pas faire de vous des programmeurs! • Le système doit s’adapter à l’utilisateur et pas le contraire! (voir COM2571)

  8. Y’aura quoi dans ce cours?

  9. Regardons un peu le plan de cours

  10. Y’aura quoi dans ce cours? Beaucoup de pratique : • Vous n’êtes pas dans ce cours pour apprendre divers théories sur l’Internet, • Vous allez apprendre à faire un site Web basique sans forcément écrire une seule ligne de code, • Mais vous allez apprendre à comprendre le code derrière une page Web. Du boulot : • Premier travail : conception d’une page Web basique, • Second travail : petit site Internet de 3 pages, • Travail en binôme : maquettage et conception d’un site Web.

  11. Y’aura quoi dans ce cours? Apprentissage de méthodes de conception : • Utilisation des éléments HTML, • Mise en page à l’aide de fichiers CSS, • Via Adobe Dreamweaver CS5. Tout en utilisant vos connaissances sur : • L’ergonomie, • La communication (parait qu’on est dans un département de communication …), • Le multimédia.

  12. HTML

  13. HTML • HyperText MarkupLanguage • Donc c’est un langage! (langage informatique certes) • Langage composé de balises • Il génère de l’hypertexte • Hypertexte : texte qui contient des liens vers d’autres textes (Ted Nelson, 1965)

  14. HTML HTML permet de : • De structurer sémantiquement et de mettre en page le contenu des pages Web, • D’inclure des ressources multimédias dont des images, des formulaires de saisie, des vidéos, des applets, etc. Il est souvent utilisé avec d’autres langage de programmation comme le PHP et le javascriptqui permettent de rendre les pages Web plus dynamiques.

  15. HTML • Ça ressemble à ça : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Ceci est un titre</TITLE> </HEAD> <BODY> <H1>Bonjour</H1> <P> HTML, c’est bien! </P> </BODY> </HTML>

  16. Les éléments HTML • Les éléments HTML correspondent au divers éléments composant une page Web. • On va souvent parler d’éléments, de balises ou de tags HTML : c’est plus ou moins la même chose. • Un élément HTML est normalement composé de 2 balises: • Balise d’ouverture <balise> • Balise de fermeture </balise>

  17. Les éléments HTML 2 types de niveau pour les éléments HTML : • Niveau bloc (block) : grandes structures qui peuvent contenir d’autres blocs ou textes. Les titres, paragraphes, les listes ou les tableaux en font parti. • Niveau texte (inline) : « petites » structure qui représentent ou décrivent des morceaux de textes ou de données. Ils ne contiennent normalement pas d’autres éléments. Les hyperliens, les citations ou les images en font parti.

  18. Les éléments HTML • HTML 4 contient 91 éléments. • On ne va pas apprendre à tous les utiliser. • HTML 4 est encore le standard mais HTML 5 est déjà supporté par la majorité des fureteurs. • La majorité des éléments HTML possède des attributs et un contenu.

  19. Les éléments HTML Alors en gros on a : • des textes, • des hyperliens, • des entêtes, • des listes, • des tableaux, • des images, • des formulaires, • des éléments de regroupements, • et d’autres trucs!

  20. HTML • Voyez l’HTML comme un gros arbre mélangé avec des poupées russes. • Poupées russes : Un éléments HTML peut contenir un plusieurs sous-éléments HTML • Ex : un paragraphe peut contenir un autre paragraphe, un lien, une image, etc. • C’est le fait qu’un élément HTML puisse contenir plusieurs éléments HTML qui fait penser à un arbre • On a un éléments principal qui est le tronc, qui possède des branches, qui possèdent elle-même des branches, etc.

  21. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Ceci est un titre</TITLE> </HEAD> <BODY> <H1>Bonjour</H1> <P> HTML, c’est bien! </P> </BODY> </HTML>

  22. HTML Voici donc les 3 éléments racines d’un document HTML • <html> … </html> Délimite le document HTML. C’est aussi là où est défini le langage primaire du document. C’est le gros tronc! • <head> … </head> Entête du document. Il contient toutes les métadonnées de la page Web (titre, mots-clés, styles, etc.) • <body> … </body> Contenu de la page Web. C’est la grosse branche principale de l’arbre.

  23. XHTML • X : eXtended • Pareil qu’HTML 4 sauf qu’il est moins permissible • Le document doit obligatoirement être bien formé • Chaque balise ouverte doit être fermée • La syntaxe est sensible à la casse (majuscule/minuscule) • Amené à disparaître avec la sortie de HTML 5 en fin 2014 • Les documents créés par Dreamweaver sont en XHTML donc vous n’avez pas vraiment à vous en soucier.

  24. Adobe Dreamweaver CS5

  25. Pourquoi Dreamweaver? Pour créer une page Web : • Vous devez écrire du code! Ça peut se faire avec une éditeur de texte tout bidon comme bloc-note ou textedit! • Vous avez besoin d’un fureteur Web pour tester vos pages Web. • Vous n’avez pas besoin d’être connecté à Internet!

  26. Pourquoi Dreamweaver? Ou alors vous utilisez un logiciel qui génèrera ce code pour vous!

  27. Mais attention! Il est quand même important de connaître à quoi correspond le code car : • Vous n’aurez pas toujours un outil comme Dreamweaver sous la main, • Les outils comme Dreamweaver ne sont pas parfaits, • Dreamweaver utilise un vocabulaire spécifique se rapportant au code HTML, • Le code source de chaque page du Web est accessible et libre de droit, donc vous pouvez toujours vous en inspirer. Mais pour cela, vous devez comprendre le code.

  28. Dreamweaver Boites à outils Aperçu du rendu De la page Code source Propriétés de l’élément sélectionné

  29. Atelier

  30. On va créer notre première page Web On va le faire ensemble sous forme de démo assistée

More Related