HTML & CSS pour débutants

Qui veut créer des sites web entrera tôt ou tard en contact avec HTML. C'est pourquoi dans les prochaines formations vidéo, nous conquerrons ensemble le magnifique monde de HTML. Vous verrez étape par étape ce qu'il en est de ce langage et comment créer des sites web avec lui en combinaison avec des feuilles de style. Cependant, au début se pose une question : qu'est-ce que HTML et les feuilles de style exactement ? À la fin de cette formation vidéo, vous découvrirez également de quel logiciel vous avez besoin pour créer et tester des sites web.

Contrairement à des langages de programmation tels que Java, on peut obtenir rapidement les premiers résultats en HTML sans grande initiation. Tout ce dont vous avez besoin pour commencer, c'est un éditeur et un navigateur. Dans cette formation vidéo, vous allez créer votre premier document HTML et obtenir directement une sortie dans le navigateur. Et en même temps, vous découvrirez comment les documents HTML, donc finalement les pages web, sont structurés ou quelle structure de base ils suivent.

Vous connaissez déjà la relation entre les termes élément, balise et attribut du premier volet de cette série. Maintenant, il s'agit de savoir comment utiliser ces éléments dans des documents HTML. En conclusion de cette formation vidéo, vous apprendrez comment vérifier la correction syntaxique de votre code HTML.

Vos sites Web ne seront certainement pas constitués uniquement d'images, mais aussi de textes. Et les textes devraient être structurés de manière raisonnable, ne serait-ce que pour une bonne lisibilité. Pour cela, HTML met à disposition de nombreux éléments. Dans cette formation vidéo, les principaux éléments de structuration pour les textes sont présentés. De plus, vous découvrirez comment masquer les caractères spéciaux propres à HTML et comment afficher des listes de programmes.

Pour une bonne lisibilité des textes, une mise en forme raisonnable est nécessaire. Et cela va au-delà des éléments de structuration tels que les titres et les paragraphes de texte. Par exemple, en HTML, on peut marquer des citations et mettre en forme des passages en gras ou en italique. Cette formation vidéo fournit les outils nécessaires pour cela.

Les éléments que vous rencontrerez souvent en HTML sont les listes. Cela s'applique non seulement aux listes de tâches, aux données de contact, mais aussi à la définition des menus. Les listes jouent donc un rôle central en HTML. Il est donc judicieux d'examiner de manière approfondie. Dans cette formation vidéo, vous apprendrez toutes les variantes de listes que HTML propose. Il s'agit de listes à puces, de listes numérotées, de listes de définitions et de listes de menus. De plus, vous recevrez des conseils sur la manière d'adapter visuellement les listes si nécessaire.

Les tableaux jouent toujours un rôle important sur les sites web, mais seulement en ce qui concerne la présentation des données. Avant l'existence du CSS ou lorsque les navigateurs ne le prenaient pas vraiment en charge, les tableaux servaient également à un tout autre but : on y appliquait des mises en page. On y plaçait les différents éléments de la page à l'intérieur des cellules du tableau. Les monstruosités de tableaux de mise en page qui en résultaient appartiennent heureusement au passé grâce au CSS. Aujourd'hui, les tableaux en conception web sont utilisés exclusivement à des fins pour lesquelles ils étaient initialement prévus : pour afficher de manière claire des données.

Des tableaux bien conçus ne doivent pas nécessairement se composer d'un nombre identique de cellules dans une même ligne de tableau. Cette vidéo de formation montre comment vous pouvez fusionner des cellules de tableau. Dans la deuxième partie, vous apprendrez quelque chose sur la légende des tableaux. Cet aspect est important car cela permet de montrer aux visiteurs de quoi il s'agit finalement. La formation vidéo se termine par un examen détaillé de la conception de tableaux en HTML. En effet, beaucoup de progrès ont été réalisés dans ce secteur par rapport aux versions HTML précédentes.

À peine un site Web se passe de graphiques. Pas étonnant donc que le sujet des graphiques occupe également une place importante dans cette série. Dans cette formation vidéo et dans les suivantes, il vous sera montré comment insérer des graphiques dans vos sites Web. Au départ, un autre aspect est mis en avant : quels formats d'image conviennent réellement à une utilisation en ligne ? Dans la deuxième partie, il sera question de comment référencer les chemins d'accès aux images.

Comment les images peuvent être référencées fondamentalement a été montré dans la partie précédente. Cependant, la limite des images n'a pas encore été atteinte. En fait, il est possible de décrire plus précisément les images à l'aide d'attributs appropriés. C'est ce qui est abordé au début de cette vidéo. La deuxième partie décrit comment les légendes d'images peuvent être implémentées à l'aide de la syntaxe HTML5.

Le sel dans la soupe de l'Internet est la possibilité de relier des contenus les uns aux autres grâce à des hyperliens. Sans ces liens hypertextes, l'Internet dans sa forme actuelle serait inconcevable. Vous découvrirez dans cette vidéo et la suivante les différentes options que HTML vous offre en termes de définition des hyperliens.

HTML offre beaucoup plus de possibilités en matière de liens hypertexte que ce qui a été montré dans la vidéo de formation précédente. Vous pouvez par exemple définir des liens de messagerie électronique et proposer des fichiers à télécharger. Vous apprendrez ces variantes de liens hypertexte et d'autres encore dans cette vidéo de formation.

Pour anticiper : Les formulaires ont fait un bond en avant, surtout en HTML5. Grâce à de nombreux nouveaux types de champs, il est possible de créer des formulaires très intéressants. Vous découvrirez bien sûr ces nouvelles possibilités. Cependant, cette vidéo de formation commence avec l'équipement nécessaire pour définir des formulaires. Au début, il s'agit de créer des champs de saisie à une ligne. Vous verrez comment les définir, comment les préremplir avec des valeurs et comment les rendre non modifiables. Vous découvrirez également la définition des champs de mot de passe. C'est en effet un type de champ que l'on peut avoir besoin d'utiliser de temps en temps.

Dans cette vidéo, vous apprendrez à connaître d'autres types de champs avec lesquels vous pouvez équiper vos formulaires. Plus précisément, il s'agit de champs de sélection, de boutons radio et de cases à cocher. Ce sont tous des éléments importants que l'on a souvent besoin dans les formulaires. Une raison suffisante donc pour examiner de plus près ces éléments et d'autres encore.

Avec HTML5, il s'est passé et surtout en ce qui concerne les formulaires, beaucoup de choses. Raison suffisante pour jeter un coup d'œil détaillé sur les nombreuses nouvelles fonctionnalités de formulaire désormais utilisables. En effet, c'en est fini des simples champs de saisie. Enfin, il est possible de définir des curseurs, des champs de date, etc. - et cela tout cela sans utiliser JavaScript.

Le démarrage dans le monde des formulaires HTML5 a été préparé par la précédente vidéo de formation. Cependant, la fin de la ligne n'est pas encore atteinte. En fait, HTML5 a encore beaucoup plus à offrir dans ce domaine.

En HTML5, en plus des types de champs présentés, il existe de nombreux autres aspects intéressants. Ainsi, il est désormais possible, par exemple, de mettre en place très facilement une fonctionnalité d'autocomplétion pour les champs de formulaire, inspirée de Google. Ces éléments et d'autres encore sont présentés dans cette vidéo de formation.

Qui s'intéresse à HTML5 ne peut pas éviter le thème de la sémantique. Vous allez apprendre dans cette formation vidéo et dans les prochaines les éléments les plus importants introduits par HTML5, qui vous permettent de structurer correctement vos documents. En effet, cette structuration logique est indispensable si l'on veut rendre ses sites Web résistants à l'avenir.

HTML5 introduit de nombreux nouveaux éléments de structuration. Ceux qui sont fondamentaux ont déjà été montrés dans la vidéo de formation précédente. Maintenant, il s'agit de leur utilisation pratique. En effet, ces éléments sont ceux qui assurent une structuration sémantique des documents. Dans cette vidéo de formation, vous apprendrez principalement les deux éléments article et section. Ceux-ci assurent la structure de base des documents HTML. À la fin de cette vidéo, un coup d'œil sera également jeté sur les différences entre div, article et section.

En HTML5, les documents peuvent être divisés non seulement en articles et en sections. En fait, il existe de nombreux autres éléments, tels que header, footer & Co., pour une structuration sémantique. Ils méritent certainement d'être examinés de plus près.

Dans cette dernière vidéo de formation de la série des éléments sémantiques, vous allez apprendre d'autres éléments de structuration. En fait, HTML5 propose également des éléments pour les zones de navigation, les notes marginales et les résumés.

Dans les anciennes versions d'HTML, l'intégration de contenus multimédias était un cauchemar. Avec une combinaison d'éléments `

Vous avez vu comment intégrer des vidéos. Maintenant, bien sûr, les vidéos ne sont pas tout ce que l'on peut présenter à ses visiteurs sur le site web. Dans cette formation vidéo, il est donc décrit quelles options HTML5 vous offre en ce qui concerne l'intégration de fichiers audio et de films Flash. Car il faut parfois afficher ces choses sur son site.

Les balises frames n'existent plus en HTML5. Leurs homonymes, les iFrames, ont toutefois réussi à passer dans cette nouvelle ère de l'HTML et sont présents en HTML5. Alors que les frames classiques divisent une page en zones indépendantes, les iFrames permettent d'intégrer des ressources variées dans les pages web.

HTML est là pour structurer le contenu. Une fois que l'on aborde la conception de la page, les feuilles de style en cascade (CSS) entrent en jeu. Car c'est seulement la combinaison de CSS et d'HTML qui permet de créer des sites Web attrayants à partir d'une simple structure HTML. Il est donc très utile d'examiner de plus près le CSS.

Un concept qui vous rencontrerez à plusieurs reprises en lien avec CSS est celui des "sélecteurs". Ces sélecteurs permettent ultimement de définir les éléments qui doivent être formatés en CSS. Dans cette formation vidéo, vous découvrirez les premiers sélecteurs. Vous seront présentés les sélecteurs d'éléments, d'ID et universels. Ceux-ci feront partie de votre quotidien lorsque vous feuillèterez vos sites Web avec CSS.

Certains sélecteurs ont été présentés dans la vidéo de formation précédente. Bien sûr, CSS offre encore de nombreux autres sélecteurs.

Dans cette dernière vidéo de formation sur les sélecteurs, je vous présente une forme de sélecteurs très particulière. Il s'agit des pseudo-classes et pseudo-éléments. Ce sont des sélecteurs qui ne se rapportent pas à des éléments HTML spécifiques, mais qui sont générés par le dispositif de sortie.

Dans cette et les prochaines vidéos de formation, je vais vous présenter les propriétés CSS les plus importantes. Il ne s'agit pas ici de vous présenter une référence CSS. Au contraire, vous devriez avoir une idée de ce qui est possible avec CSS. Nous commençons ici avec la mise en forme du texte. Dans cette vidéo de formation, seront présentées toutes les choses qui ont directement à voir avec les soi-disant polices. Notez qu'il y a d'autres propriétés en ce qui concerne la mise en forme du texte, qui seront présentées dans la prochaine vidéo de formation.

Les propriétés CSS présentées dans cette formation vidéo permettent d'ajuster visuellement les textes et les caractères. Par exemple, il est possible de modifier les espaces entre les lettres et d'aligner les textes. Ces propriétés vous aideront donc à présenter les textes de manière attrayante.

Bien sûr, dans CSS, les définitions de couleurs et les arrière-plans graphiques ne doivent pas manquer. Les propriétés correspondantes sont présentées dans cette formation vidéo. En effet, CSS offre de nombreuses possibilités dans ce domaine. Il n'est donc pas seulement possible de définir des couleurs et des images facilement, mais aussi des/images de fond répétitives.

En particulier, lorsqu'il s'agit de la mise en page des sites Web, vous serez confrontés à la définition de marges extérieures et d'espacements. Dans les dernières vidéos de cette série, un projet exemple complet sera mis en place, dans lequel l'utilisation pratique de ces propriétés CSS et d'autres sera démontrée.

Le CSS propose des propriétés intéressantes pour les paragraphes et les blocs de texte que je ne voudrais pas vous cacher. Par exemple, vous pouvez aligner les paragraphes de texte à gauche et à droite.

Lorsque l'on parle de cadres, la plupart des gens pensent probablement d'abord aux tableaux. En effet, les cadres jouent un rôle important en relation avec les tableaux. Cependant, avec CSS, il est également possible d'appliquer des cadres à d'autres éléments. Et la manière dont ces cadres finissent par apparaître peut également être déterminée de manière explicite par des définitions CSS.

Comment définir des listes, vous le savez probablement depuis longtemps. Cela a en effet été largement démontré dans le cadre de cette série. Cependant, les listes ne sont pas forcément élégantes de base. Afin qu'elles soient également attrayantes visuellement, il existe des propriétés CSS correspondantes. Vous découvrirez dans cette vidéo de formation quelles sont ces propriétés et comment les utiliser. La deuxième partie traitera des surnommés compteurs, avec lesquels il est possible de mettre en œuvre des numérotations plus complexes.

Lorsqu'il s'agit de la mise en page des sites web, le modèle de boîte, appelé box model en anglais, sera votre compagnon constant. Car c'est sur cela que l'on définit finalement comment et où les éléments seront placés.

Pour pouvoir positionner les éléments à des endroits spécifiques sur le site web, vous devez utiliser des propriétés CSS très précises.

Dans la vidéo de formation précédente, le principe du float a déjà été brièvement abordé. Cependant, le sujet est si complexe qu'un regard détaillé sur ce flottement est encore nécessaire ici. En effet, il s'agit d'un concept crucial en CSS. Car seulement si l'on comprend ce sujet, on peut réellement créer des sites Web.

Dans les formations vidéo précédentes, les bases du travail avec HTML et CSS ont été présentées. Maintenant, il est bien sûr temps de récolter les premiers fruits. Dans les prochaines formations vidéo, un site Web exemple sera donc construit étape par étape. Cependant, dans cette formation vidéo, vous apprendrez d'abord à connaître les différentes variantes de mise en page. En effet, le choix de la forme de mise en page appropriée devrait toujours être au début de vos réflexions pour la conception d'un site Web.

Je pars d'une mise en page en colonnes typique pour notre projet pratique. Avant de présenter ce projet en direct et en couleurs, je voudrais vous montrer concrètement comment vous pouvez mettre en place des mises en page en colonnes vous-mêmes. L'accent sera mis sur les mises en page à deux et trois colonnes, car celles-ci restent la base de la plupart des sites web.

Dans les formations vidéo suivantes, je vais vous montrer comment réaliser pas à pas une mise en page de site web. Il existe plusieurs approches différentes à ce sujet. Souvent, les mises en page sont créées dans Photoshop. Ensuite, on découpe les éléments de la page pour les assembler de nouveau en utilisant du CSS et de l'HTML. C'est exactement ce que nous faisons ici également. Cependant, au lieu de Photoshop, j'utilise GIMP, qui est un logiciel gratuit. Les étapes décrites peuvent cependant être suivies dans Photoshop également.

Les premiers pas vers la création de sa propre mise en page ont été faits dans la vidéo de formation précédente. Bien sûr, il manque encore de nombreux éléments. Ceux-ci seront ajoutés dans cette vidéo de formation. Une fois la mise en page établie, on poursuivra avec la découpe, appelée le "slicing". Car c'est en définitive l'étape de travail qui permet de concrétiser le design créé en HTML et CSS.

Vous avez créé la mise en page. Maintenant, passons à sa mise en œuvre pratique. Dans cette vidéo de formation, nous allons ensemble créer la structure de base HTML du site web.

La structure de base de la page est en place, mais elle est encore assez spartiate. Cette formation vidéo vise à développer davantage le contenu de la page. L'accent est d'abord mis sur le menu, situé dans la partie supérieure de la page. Ensuite viennent le menu de droite et le menu inférieur.

Un aspect crucial pour un site web attrayant est bien sûr sa typographie. Au cours de cette série, vous avez déjà découvert les possibilités offertes par HTML et CSS en matière de mise en page de texte. Dans cette formation vidéo, nous les utiliserons pour améliorer le site. D'ailleurs, nous ne nous contenterons pas des variantes classiques. Le mot magique pour l'utilisation de polices de caractères "exotiques" est @font-face.

Normalement, on devrait offrir aux visiteurs la possibilité de nous contacter. Dans le cas le plus simple, on peut noter un numéro de téléphone et/ou une adresse e-mail. On peut le faire de cette manière, mais ce n'est pas très pratique pour les visiteurs. C'est pourquoi nous allons créer un formulaire dans cette formation vidéo, à travers lequel les visiteurs pourront facilement entrer en contact avec nous. Et bien sûr, nous allons utiliser les fonctionnalités offertes par HTML5 et CSS3.

La structure de base et la conception fondamentale du formulaire sont définies et terminées. Et en fait, le formulaire semble déjà assez attrayant à ce stade. Cependant, grâce au CSS3, il est possible d'aller encore plus loin en termes d'embellissement visuel du formulaire. C'est pourquoi ce tutoriel vidéo va continuer à travailler un peu sur le formulaire.

Déjà à l'heure actuelle, vous avez sûrement investi beaucoup de temps et de travail dans le développement de votre site web. De la conception à la conception de la mise en page et à sa mise en œuvre en HTML et CSS. Il est donc grand temps de présenter enfin votre site web au monde. C'est précisément le sujet de cette formation vidéo. Je vais vous montrer comment mettre en ligne le site web. Tout d'abord, vous apprendrez comment obtenir le bon fournisseur et le bon forfait d'hébergement web. Ensuite, les données seront chargées sur le serveur avec le populaire FileZilla. Et puis, eh bien, le site web sera effectivement en ligne.

Dans cette formation vidéo, je voudrais vous donner un petit aperçu de l'environnement de développement approprié pour la création de sites Web. Ceux qui ont déjà écrit des sites Web complets ou de petites pages individuelles disposent généralement de ces éditeurs et peuvent sauter cette vidéo.

Les outils présentés sont :
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

L'HTML5 Boilerplate est un puissant modèle pour les sites Web HTML5 et CSS3; il rend l'HTML5 aussi compatible que possible avec les différents navigateurs et inclut quelques très bons modèles de code en JavaScript, CSS3 et bien sûr en HTML.

Dans cette formation vidéo, je voudrais vous présenter ces fonctionnalités. Pour commencer dans le domaine de l'HTML5 et du CSS3, il n'y a actuellement aucun meilleur modèle.

Dans cette formation vidéo, je vais vous présenter quelques outils très utiles pour développer en HTML5 et CSS3.

Cela inclut :
html5css3box.com
kuler.adobe.com (maintenant https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com