Aller directement au contenu
Melinyel

Melinyel
  1. Accueil
  2. Programmation
  3. Développement web
  4. HTML & CSS

HTML & CSS

12 Sujets 96 Messages

Cette catégorie peut être suivie depuis le web social ouvert via le pseudo [email protected]

Sous-catégories

  • 4 20
    4 Sujets
    20 Messages
    BaptisteB
    ![html2.png](<base_url>/applications/sslimageproxy/interface/image.php?url=http://webdesy.com/webdesy-wp/wp-content/uploads/2012/01/html2.png) Vous avez toujours voulu créer votre page web? Et bien pour la créer il faut tout d'abord s'instruire! Et pour s'instruire il faut lire, et c'est dans ce topic que vous allez découvrir les balises html ! Les balises html c'est quoi? Ce sont les "codes" qui vont définir la structure de votre page ! Ici vous aurez donc les balises fondamentales pour votre site web ! Pour le document : <html></html> : définit un document html <body></body> : définit le corps du document Pour vos titres : <h1></h1> <h2></h2> <h3></h3> Et ainsi de suite jusqu'à <h6></6> Ces balises définissent la hauteur de votre texte, elles servent donc de mise en page pour le texte ! Pour le texte : <p></p> : pour contenir un paragraphe <b></b> : pour écrire en gras <u></u> : pour écrire souligner <i></i> : pour écrire en italique <a href="LIEN">TEXTE</href> : pour créer un lien cliquable (ex: <a href="http://melinyel.net">CLIQUEICI</href> <blockquote></blockquote> : pour créer une citation <li></li> : élément d'une liste <ol></ol> : liste numérotée <ul></ul> : liste à puce <center></center> : pour centrer du texte <font></font> : pour modifier les polices de caractères <strike></strike> : pour barrer du texte <applet></applet> : pour les applets java Pour des tableaux : <table></table> : pour créer un tableau <tr></tr> : pour créer une ligne <th></th> : cellule de légende de ligne ou de colonne <td></td> : pour créer une colonne Structure et habillage : <div></div> : définition de blocs, regroupement d'éléments <span></span> : habillage d'éléments de manière inline Nouveautés HTML 5 ! <header></header> : en-tête <section></section> : section <article></article> : sous section pour un article <nav></nav> : bloc de navigation <aside></aside> : encart <figure></figure> : images et/ou vidéos <footer></footer> : pied de page Pour toute aide poster votre question en réponse à la suite de ce topic, merci ! Baptiste.

  • 0 0
    0 Sujets
    0 Messages
    Pas de nouveau message

  • 0 0
    0 Sujets
    0 Messages
    Pas de nouveau message
  • F

    [Recherche] Site Mockup

    1
    0 Votes
    1 Messages
    2k Vues
    F
    Salut à tous, Je suis actuellement à la recherche d'un site pour réaliser des maquettes simples et gratuitement. Merci à vous, FaKe77.
  • AzadA

    HTML5 / CSS3 : Commencer dans la programmation

    Épinglé
    5
    0 Votes
    5 Messages
    3k Vues
    AzadA
    Bonjour, Étant donné qu'une majorité de membres connaissent les bases de l'informatique et de la programmation, je m'adresse à l'autre partie de la communauté : ceux qui ne connaissent pas encore ce merveilleux monde de la programmation, mais qui cependant veulent commencer à s'y lancer. Alors, ce sujet sera très simple car il consistera en une première mission pour vous : Découvrir les bases. Pour cela, le plus simple reste inévitablement le Site du Zéro, avec le tutoriel en HTML5 & CSS3 que vous pouvez constater juste là : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3 Ce tutoriel commence par vous apprendre les bases, il est fait pour des lecteurs n'ayant non seulement aucune base en programmation mais également de faibles bases en informatiques. Ainsi, tout le monde peut se lancer dans ce tutoriel et finir avec, je vous le garantis, un solide bagage en HTML / CSS (ce qui est déjà un début, ne sous-estimons pas un langage). A la fin de ce tutoriel, vous serez tous capable de créer un site simple (et vous pourrez l'héberger via Melinyel sans doute, par la suite), et de partager vos créations pour avoir des conseils, de l'aide, etc... Ceux qui ne connaissent pas la programmation, commencez par là, c'est un réel conseil.
  • I

    Liste des balises HTML5

    11
    0 Votes
    11 Messages
    4k Vues
    I
    Bonjour ! Souvent, on code un site, et on se dit "mince, elle fait quoi dejà cette balise ? " ou "c'est quelle balise pour faire telle chose ?". C'est pour cela que je vous propose un petit récapitulatif des balises utilisées en HTML5 ainsi que de leurs fontions. Un exemple concret est présent quand on clique sur les balises. ( liste trouvée sur http://41mag.fr/liste-des-balises-html5) <!– … –> Définit un commentaire <!DOCTYPE> Définit le type du document <a> Définit un lien <abbr> Définit une abréviation <address> Définit une adresse <area> Définit une zone à l’intérieur d’une image <article> Définit un article <aside> Définit une partie latérale au contenu <audio> Définit un fichier audio <b> Texte en gras <base> Définit une URL de base pour tous les liens de la page <bdo> Définit la direction du texte <blockquote> Définit une longue citation <body> Définit le corps de la page <br> Saut de ligne <button> Définit un bouton cliquable <canvas> Définit un graphique <caption> Légende du tableau <cite> Définit une citation <code> Mise en forme d’un texte en code informatique <col> Définit une colonne d’un tableau <colgroup> Définit un groupe de colonne pour un tableau <command> Définit un bouton de commande <datalist Définit une liste d’options <dd> Définition d’un terme <del> Définit un texte supprimé <details> Définit les détails d’un élément <dfn> Définition <div> Définit un calque ou une section <dl> Liste de définition <dt> Définition d’un terme <em> Mise en exergue d’un texte – italique <embed> Définit un contenu extérieur (audio, vidéo …) <fieldset> Regroupe plusieurs éléments d’un formulaire <figcaption> Légende d’un groupe d’élément multimédia <figure> Définit un groupe d’élément multimédia <footer> Définit le bas d’un section ou d’une page <form> Définit un formulaire <h1> to <h6> Définit un titre par degré importance de 1 à 6 <head> Définit l’en-tête d’un document <header> Définit le haut d’une section ou d’une page <hgroup> Regroupe les informations du haut d’une page ou section <hr> Barre horizontale <html> Définit un document html <i> Texte en italique <iframe> Introduit un page html dans une frame <img> Définit une image <input> Définit un champ <ins> Définit un texte insérer <keygen> Générateur de clé pour un formulaire <kbd> Raccourcis ou touche du clavier <label> Légende d’un groupe d’élément de formulaire <legend> Titre d’un groupe d’élément d’un formulaire <li> Élément d’une liste <link> Définit les relations entre les documents <map> Définit une carte <mark> Mise en valeur d’un mot ou d’un texte – Texte marqué <math> Définit une formule mathématique <menu> Définit un menu en liste <meta> Définit des informations relatives au document <meter> Définit une unité de mesure <nav> Définit un groupe de liens de navigation <noscript> Définit une alternative au script non supporté <object> Définit un objet du contenu extérieur multimédia <ol> Définit une liste ordonné <optgroup> Regroupe d’une liste d »option dans un formulaire <option> Option d’une liste dans un formulaire <output> Définit un type de sortie <p> Définit un paragraphe <param> Définit les paramètres d’un objet <pre> Texte pré-formaté <progress> Définit une progression <q> Définit une courte citation <rp> Annotation ruby si le script n’est pas supporté <rt> Annotation ruby d’explication <ruby> Définit une annotation en ruby <samp> Définit un échantillon de code <script> Définit un script <section> Définit une section <select> Définit une liste sélectionnable <small> Minimise l’importance d’un texte <source> Définit la source d’un contenu multimédia <span> Définit une section de type inline <strong> Mise en exergue d’un texte – Texte en Gras <style> Définit un style CSS <sub> Mise en indice d’un texte <summary> Définit l’en-tête des détails d’un document ou section <sup> Mise en exposant d’un texte <svg> Définit une image vectorielle <table> Définit un tableau <tbody> Définit le corps d’un tableau <td> Définit une cellule d’un tableau <textarea> Définit une zone de texte <tfoot> Définit le bas d’un tableau <th> Définit une cellule d’en-tête d’un tableau <thead> Définit le haut d’un tableau <time> Définit une unité de temps <title> Définit le titre d’un document <tr> Définit une ligne de tableau <track> Définit une unité de temps pour les éléments <audio> et <video>. <ul> Définit une liste non-ordonné <var> Définit une variable <video> Définit une vidéo <wbr> Définit un possible retour à la ligne
  • IgniteI

    [Bootstrap] SB Admin Template

    12
    0 Votes
    12 Messages
    5k Vues
    IgniteI
    BootStrap -SB Admin Bonjour à tous. Ce topic est pour ceux qui ne veulent pas passer leurs temps sur le css de leur site mais qui veulent quand même avoir un design pas trop repoussant. Présentation : Twitter Bootstrap est une collection d’outils utiles à la création de sites web et applications web. C’est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autre éléments interactifs, mais contient aussi des extensions JavaScript en option. Téléchargable sur le site officiel : Bootstrap Il présente plusieurs différents templates que vous pouvez visualiser ici  --> TEMPLATE Je vous présente le Template SB Admin car il est vraiment très utile pour la plupart des sites que vous concevez. exemple : Lien  vers le site: Start Bootstrap Lien vers l'exemple : SB Admin ci-dessous [image: sb-admin.jpg] Celui-ci est le SB Admin première version. Il existe la V2 qui inclue de nouvelles fonctionnalités.
  • AzadA

    [Bootstrap] LayoutIt !

    1
    0 Votes
    1 Messages
    2k Vues
    AzadA
    Bonjour à tous, je vous présente un outil qui peut être très pratique si vous faites du web design : LayoutIt ! [image: Sfhw5k7.png] Ce site est en quelque sorte un générateur de template, avec du drag & drop. Il utilise les atouts de bootstrap pour générer un parfait webdesign à télécharger (en HTML). L'interface de création ressemble à cela : [image: QBpeLFT.png] On y voit clairement l'interface pour déplacer ses modules, les supprimer, etc... Et en avoir une préview au final ! Voilà, si vous l'utilisez, postez vos screenshot du rendu final. http://www.layoutit.com/
  • AzadA

    [Concours n°1 - Terminé] Programmation : Web !

    Verrouillé
    6
    0 Votes
    6 Messages
    6k Vues
    AzadA
    Bonjour à tous. Aujourd'hui, je lance le premier concours de programmation, donc pas nécessairement le plus dur. C'est simple, celui-ci sera de coder un site web basique pour aider Akimace dans son projet ! Toutes les informations sont ses besoins sont [ici](<base_url>/index.php/topic/52-site-en-cours-de-r%C3%A9alisation/), mais je vais détailler. Langage de programmation du projet : Web : HTML / CSS (obligatoire). PHP, SQL, Javascript et autre (facultatif). Le but est de concevoir un site web de meilleur qualité que celui-ci : Basket Club Solérien (son club de basket). La date limite est le 31 Mars 2014, 23h59. Les participants devront préciser leurs noms, s'ils veulent s'y essayer, et ceux-ci seront inscrit ci-dessus. Les récompenses seront : 20 points de réputation. Le code final sera exposé sur le GitHub de Melinyel, avec les crédits pour l'auteur. J'espère que vous saurez monter vos capacités.
  • K

    [Show] Site HTML5/CSS3

    3
    0 Votes
    3 Messages
    2k Vues
    K
    Bonjour Un pote m'a demandé de lui faire un site web pour son groupe de musique rock/metal naissant, je suis partit sur l'idée d'un wordpress dernière gen avec un thème black etc... Puis finalement je n'ai pas trouvé mon bonheur et j'ai eu l'idée de créer moi même le site J'avais jamais fait de site web de 0 auparavant ceci est mon premier site web 100% moi, tout le code à été écrit à la main sur l'éditeur notepad++ par mes soins é_é Voila ce qu'il donne après environ 5h de travail : ![1395770083-screen1.png](<base_url>/applications/sslimageproxy/interface/image.php?url=http://image.noelshack.com/fichiers/2014/13/1395770083-screen1.png) -- ![1395770082-screen2.png](<base_url>/applications/sslimageproxy/interface/image.php?url=http://image.noelshack.com/fichiers/2014/13/1395770082-screen2.png) Comme vous le voyez le travail effectué à été concentré sur la structure de la page et l'emplacement des fonctionnalités style menu, vidéobox et lecteur mp3 pour voir les derniers titres Le site n'est PAS une image les modules sont bien en place et fonctionnels, j'ai opté pour une dimension de 1360px de largeur, tout simplement car pour ce domaine de site un 1920+ n'aurait pas servit à grand chose, pour la hauteur aucune idée elle sera amenée à changer de tout de façon Il est structuré en 2 colonnes (Modules 300px largeur à gauche et le gros 750px central/gauche. Pour le design pour le moment seul le logo est définitif et c'est moi qui l'ai fait haha, les barres de menu, footer n'étant que pour la base, ah oui aussi le fond des modules et définitif, je rajouterais surement des petites images incrustées en transparence à l'intérieur histoire de donner du vivant. Voila si vous avez des critiques envoyez, oubliez pas c'est mon premier site Bonne soirée. Cordialement, Karles.
  • AkimaceA

    Site en cours de réalisation

    37
    0 Votes
    37 Messages
    13k Vues
    AkimaceA
    Hey! Dernièrement dans ma présentation je disais que j'étais entrain de faire un site, en faite on (ma classe) nous a demandé à chaque groupe d'en faire un pour une association. Mon groupe a choisis un club de basket et on doit apporter des améliorations à leur site, que voici : http://club.quomodo.com/basketlesoler/le_club/contact.html Comme je débute là dedans, j'ai pas trop trop avancé  :lol: ![1394397617-10006533-4019697026669-214188](<base_url>/applications/sslimageproxy/interface/image.php?url=http://image.noelshack.com/fichiers/2014/10/1394397617-10006533-4019697026669-2141887525-o.jpg) <!DOCTYPE html> <html> <head> <p><h2>Basket Club Solérien</h2> <p><img src="Mes documents/HTML/logo.gif" alt="Logo" /></p> <h3>C'est ici que seront présenté les actualités du <mark>Basket Club Solérien !<mark/></h3></p> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title> Basket Club Solérien </title> </head> <body><h4>On peut trouver sur notre site :</h4> <ul> <li><a href="http://www.siteduzero.com" title="Tout ce qui concerne les actualités du club.">Le Club</a></li> <li><a href="http://www.siteduzero.com" title="Les équipes classées par niveau du club.">Les équipes</a></li> <li><a href="http://www.siteduzero.com" title="Les plannings concernant les rencontres, tournois, matchs...">Les plannings</a></li> <li><balise><a href="http://www.siteduzero.com" title="Le programmes de l'année (actualisé toutes les semaines).">Les calendriers</a></balise> <p><a href="calendrier.zip">> Téléchargez le calendrier de la semaine ! <</a></p></li> <li><a href="http://www.siteduzero.com" title="Ici se trouve les documents d'inscriptions et quelques guides.">Les documents</a></li> <li><a href="http://www.siteduzero.com" title="Tout ce qui concerne le basket à l'école primaire.">Le basket à l'école</a></li> <li><a href="http://www.siteduzero.com" title="Les photos du club.">L'Album photos</a></li> <li><a href="http://www.siteduzero.com" title="Ici nous retrouverons tous les liens en relation avec le club.">Les liens</a></li> <body><h3> Contact :</h3> <p style="color: blue;">Voila notre page Facebook : <a href="https://www.facebook.com/pages/Basket-Club-Sol%C3%A9rien-BCS/370393609765791" target="_blank">Facebook BCS</a><br /><br /></p> <p>Pour contacter le club : <a href="mailto:[email protected] ">Envoyez-moi un e-mail!</a></p> <p>La suite ici : <a href="TROLL/test2.html">CLIC ICI BATARD</p> </body> </html> Voilà où j'en suis pour le moment. Si y en a qui peuvent donner un coup de main ça serait sympa  ^_^ Merci d'avance, Aki