Introduction au HTML et CSS pour les concepteurs

Une introduction au HTML et CSS pour les concepteurs.

En tant que graphiste, vous êtes probablement conscient de la relation en constante évolution entre le design et la technologie. Cela est particulièrement vrai pour ceux qui sont impliqués dans la conception de sites Web. Dans ce secteur, nous devons avoir une compréhension de base de la manière dont nos mises en page soigneusement conçues deviennent des pages Web vivantes. Lorsque nous comprenons les bases de ce processus (et ses limites), nous pouvons communiquer avec précision avec les développeurs et créer sites Web avec parfait pixel.

Cela ne signifie pas que vous devez savoir comment coder un site Web de haut en bas (même si ce serait génial !), cela signifie simplement que vous devez comprendre les bases. Dans cet article, nous commencerons par une introduction très basique au HTML. Vous apprendrez à découper des conceptions Web dans Photoshop et à formater du HTML à l'aide de CSS. Introduction au HTML et CSS pour les concepteurs

Qu’est-ce que le HTML ?

Presque tout ce que vous voyez lorsque vous naviguez sur le Web est un document HTML (Hypertext Markup Language). Hypertexte est un texte qui fait référence et référence un autre texte sur votre écran, vous permettant d'accéder au contenu d'un simple clic. Langage de balisage est un ensemble de balises entourées de crochets <>. Ces balises HTML sont généralement présentées par paires :

<balise de début> : Également connue sous le nom de balise d'ouverture.
: également appelé balise de fermeture et comprend une barre oblique /

Lorsque vous placez du contenu entre ces deux balises, le tout s'appelle élément :

Ceci est un paragraphe

Lorsque cette langue est traduite sur Internet, les téléspectateurs ne verront pas les balises, ils ne verront que le contenu entre elles.

HTML 5, la version actuelle de HTML, contient environ 100 balises avec des attributs qui modifient leur fonction ou leur apparence. Il vous suffit de connaître 30 à 40 de ces balises pour commencer à comprendre et à créer du HTML. Jetez un oeil à eux et remarquez comment ils sont regroupés par fonction. Voyons cela en action.

Découpe d'images dans Photoshop.

Introduction au HTML et CSS pour les concepteurs

Avant de coder, nous devons décider quelles sections du site Web doivent inclure des images et lesquelles peuvent être codées. Profitons un outil Photoshop Tranche (caché sous le sous-menu Outil de recadrage ) et mettez en évidence des zones telles qu'une photographie d'un burrito et taco Jeanne .

Nous devons maintenant exporter nos extraits de code - choisissez Fichier > Enregistrer pour le Web (Alt + Maj + Ctrl + S). Lorsqu'un extrait spécifique est sélectionné, vous pouvez définir ses options d'exportation sur le côté droit de la fenêtre (JPG, PNG, etc.). Si vous double-cliquez sur un fragment spécifique, vous verrez une fenêtre contextuelle " Paramètres des fragments" - Cela vous permet de nommer des fichiers de fragments spécifiques.

Par défaut, toutes les images sont placées dans le sous-répertoire : /images/. Si vous souhaitez exporter uniquement les extraits que vous créez, sélectionnez " Tous les fragments personnalisés" dans la fenêtre "Enregistrer". Introduction au HTML et CSS pour les concepteurs

Création d'un document HTML de base

Nous avons nos slicers, créons un document HTML de base. Introduction au HTML et CSS pour les concepteurs

Ligne 1 : Déclare que le dialecte HTML 5 est la langue du document.

Ligne 2 : élément représente la racine d'un document HTML. Il s'agit d'un conteneur obligatoire qui dénote les limites de notre document.

3 : chapitre contient des éléments de page invisibles tels que des méta-informations, un titre, etc.

Ligne 4 : Ceci est la déclaration d'encodage du document - utf-8 - choix sûr - vous pouvez en savoir plus sur les encodages de caractères HTML ici .

Ligne 5 : Page d'exemple Il s'agit du titre de la page qui apparaît dans la barre de titre du navigateur.

6 : ferme la balise à partir de la ligne 3.

Ligne 7 : Cet élément body contiendra tout le contenu visible de la page.

Ligne 8 : ferme la balise à partir de la ligne 2. Cet élément marque la fin du document. Introduction au HTML et CSS pour les concepteurs

Il existe d'autres façons possibles de coder la même conception. Nous utiliserons des balises sémantiques HTML 5 (en-tête, navigation, article, pied de page) pour créer la structure de base du document :

Voici la mise en page traduite en HTML :

Quelques notes:

Lignes 11 et 12 : Les éléments sont l'essence d'Internet car ils sont utilisés pour créer hyperliens . Ils sont liés à l'attribut HREF et doivent lier la cible URL .

Lignes 18 à 20 : Voici quelques balises de formatage de texte : désigne un en-tête de premier niveau ; désigne un paragraphe ; signifie un saut de ligne.

Formatage avec des feuilles de style en cascade (CSS).

Introduction au HTML et CSS pour les concepteurs

Lorsque vous ouvrez uniquement le fichier HTML dans un navigateur Web, vous verrez qu'il n'est pas formaté comme notre conception précédente. C'est parce que le code HTML ne suffit pas - nous devons le formater avec Feuilles de style en cascade (CSS) . CSS est un langage de feuille de style utilisé pour formater les éléments HTML.

Mais pourquoi exactement devons-nous combiner HTML et CCS ? Il y a quelque temps, le formatage était réalisé en ajoutant des attributs aux balises HTML. Cependant, cela aboutissait à un code illisible et impossible à maintenir. La solution consistait à séparer le contenu du document (HTML) du formatage du document (CSS).

Décomposons simplement Règle CSS : .

Sélecteur : Il s'agit de l'élément HTML que vous souhaitez styliser. Par exemple : <article>

Annonce : Une règle CSS peut avoir une ou plusieurs déclarations. Chaque déclaration se compose d'une propriété et d'une valeur et est séparée par un point-virgule. Vous placez les déclarations entre accolades {}. Introduction au HTML et CSS pour les concepteurs

propriété : ce caractéristique de style, que vous souhaitez modifier. Par exemple : couleur d’arrière-plan, taille Police de caractère etc.

Valeur : Chaque propriété est associée à une valeur. Par exemple : #ffcc11 (pour la couleur d'arrière-plan), 16px (pour la taille de la police), etc.

Là de nombreuses propriétés CSS, qui peut être défini pour chaque élément HTML, mais il n'est pas nécessaire de tous les écrire vous-même. Vous pouvez vous fier aux paramètres par défaut de votre navigateur ou utiliser une feuille de style de base qui réinitialise votre navigateur à des paramètres raisonnables. En fait, à écrire des sélecteurs le faire soi-même nécessite beaucoup de connaissances et d’expérience.

Examinons quelques règles CSS nécessaires pour formater notre conception simple.

Propriétés de positionnement CSS : existe 4 méthodes différentes (statiques, fixes, relatifs et absolus) qui nous permettent de positionner certains éléments dans notre conception. Après avoir défini l'une de ces méthodes, vous pouvez positionner les éléments à l'aide des propriétés top, right, bottom et left - elles fonctionneront différemment selon la méthode que vous utilisez parmi les 4. Dans ce cas, nous aimerions positionner plaque_image, en utilisant absolu positionnement.

Modèle de boîte CSS : ce modèle est un cadre qui contient tous les éléments HTML, y compris les marges, les bordures, le remplissage et le contenu. La marge est la zone invisible autour de la bordure et le remplissage entre la bordure et le contenu.

Si vous voulez VRAIMENT en savoir plus sur le codage, regarde sur ce site sympa : Codecademy .