Aller au contenu

[HTML] Texte sur fond noir et formulaire

Bourriks

Par Bourriks
dans Programmation et Lignes de code

Messages recommandés

Bourriks Régulier

Bourriks

Posté(e)
Posté(e)

Bonjour à tous. Je précise que je ne suis qu'une merde en html et que je ne connais que les strictes bases.

Il y a deux mois, à la demande de mon patron, et malgré mes lacunes, j'ai du faire un petit site vitrine pour un client, un petit truc vraiment pas compliqué. Aujourd'hui le client me demande de mettre une des lignes de texte en blanc sur surlignage noir et une page supplémentaire avec un formulaire (simple, juste M./Mmme, nom/prénom et adresse mail) à envoyer sur une adresse mail bien précise.

C'est, je pense, la base pour n’importe quel petit développeur web lambda, mais comme je ne le suis pas, je vous demande humblement comment je peux faire ça.

Pour le texte en blanc sur surlignage noir, je ne sais pas, vu que je ne connais que la balise <font>, donc je ferais un <font color=FFFFFF size=[taille désirée]>Texte</font>, mais pour mettre un surlignage noir, je ne sais pas (la page est en fond blanc, et c'est juste une ligne qu'il faut mettre.

Pour le formulaire, je n'ai aucune idée de la procédure.

Merci d'avance de votre aide.

Lien vers le commentaire
Partager sur d’autres sites
foetus Vétéran

foetus

Posté(e)
Posté(e)

u: :transpi:, même obsolète.

ou alors a, avec un href vide.

pour un formulaire propre regarde le code source de cette page:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="eng">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Formulaire d'envois de notifications</title>

 <script type="text/javascript">
 <!-- Stupid Fiefox: it doesn't support CDATA balise -->
 /* <![CDATA[ */
   <!-- http://blog.stevenlevithan.com/archives/faster-trim-javascript -->
     function trim(str) {
       var whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';

       for (var i = 0; i < str.length; i++) {
         if (whitespace.indexOf(str.charAt(i)) === -1) {
           str = str.substring(i);
           break;
         }
       }

       for (i = str.length - 1; i >= 0; i--) {
         if (whitespace.indexOf(str.charAt(i)) === -1) {
           str = str.substring(0, i + 1);
           break;
         }
       }

       return ((whitespace.indexOf(str.charAt(0)) === -1)? str : '');
   }


   function checkValues() {
     if (document.form.certificate.value.length == 0) {
       alert("Vous n\'avez pas choisi votre certificat");
       document.form.certificate.focus();

       return false;
     }

     document.form.notification.value = trim(document.form.notification.value);

     if (document.form.notification.value.length == 0) {
       alert("Vous n\'avez pas saisi la notification à envoyer");
       document.form.notification.focus();

       return false;
     }

     if( confirm("Lancer le script d'envoi des notifications") ) {
     	if (document.form.type[0].checked) {
         document.form.action = "http://.../script1.php";
     	} else {
         document.form.action = "http://.../script2.php";
     	}

       return true;
     }

     return false;
   }

   function display_corean_text() {
     document.form.notification.value = "메탈과 소프트 케이스가 조화를 이룬 독특한 감성 디자인";
   }

   function display_japan_text() {
     document.form.notification.value = "わたしの町は京都です。わたし";
   }

   function display_russian_text() {
     document.form.notification.value = "Все люди рождаются свободными и равными в своем достоинстве и правах";
   }

   function display_latin1_charset_1() {
     document.form.notification.value = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwyxz";
   }

   function display_latin1_charset_2() {
     document.form.notification.value = "!\"#$%&«»()*+,-./ -:;<=>?@[\\]^_{|}~¡¢£¤¥§¨©ª¬®±¹²³μ¶¼½¾¿";
   }

   function display_latin1_charset_3() {
     document.form.notification.value = "ÁÂÃÄÅÆÇÈÉÊËÌÍÎÑÒÓÔÕÖØÙÚÛÜÝàáâãäåçèéêëòóìíùú"; //öôõîïûüÿý×þ÷æÞ";
   }
 /* ]]> */
 </script>

 <style type="text/css">
 <!-- /* // Stupid Fiefox: it doesn't support CDATA balise */ -->
 /* <![CDATA[ */
   span.info_text {
     position:relative;
     z-index:24;
     color:#000;
     text-decoration:none
   }

   span.info_text:hover {
     z-index:25;
     background-color:#FFF
   }

   span.info_text span {
     display: none
   }

   span.info_text:hover span {
     display:block;
     position:absolute;
     border:1px solid #000;
     background-color:#EEF3E2;
     color:#000;
     text-align: center;
     padding:1px;
     width: 150px;
   }
 /* ]]> */
 </style>
</head>
<body>

<!-- Using tables to Format the Web Page is the old way: Vive CSS. But, I know just a little CSS (and I have no time to spend) -->
<!-- http://www.w3.org/TR/html401/interact/forms.html -->

 <!-- List which referes to useful Internet links -->
 <dl id="informations">
   <dt><strong>Documentation à lire </strong><img src="images/smiley.gif" alt=":-)" id="smiley" /></dt>
   <dd>
     <li id="certificate_documentation" type="square">
       <a href="http://www.developers-life.com/apple-push-notification.html" name="certificate_documentation" lang="en-us" target="_blank" />Documentation sur la génération du certificat à renseigner</a>
     </li>
     <li id="apple_documentation" type="square">
       <a href="http://developer.apple.com/library/ios/#documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/ApplePushService/ApplePushService.html" name="apple_documentation" lang="en-us" target="_blank" />Documentation Apple sur les "Push Notifications"</a>
     </li>
     <li id="ssl_documentation" type="square">
       <a href="http://php.net/manual/fr/context.ssl.php" name="ssl_documentation" lang="en-us" target="_blank" />Options de contexte SSL</a>
     </li>
   </dd>
 </dl>

 <br />
 <br />

 <!-- The form -->
 <form method="post" action="" enctype="multipart/form-data" accept-charset ="UTF-8" name="form" id="form" onSubmit="return checkValues();">
   <fieldset>
     <legend>Votre certificat</legend>
     <input type="file" name="certificate" accept="application/x-pem-file" id="certificate" accesskey="O" tabindex="5" value="" />
   </fieldset>
   <br />
   <fieldset>
     <legend>Cible</legend>
       <label for="production"><u>P</u>roduction</label>
       <input type="radio" name="target" id="production" value="production" accesskey="P" checked="checked" tabindex="7" />
       <label for="sandbox">Sand<u>b</u>ox</label>
       <input type="radio" name="target" id="sandbox" value="sandbox" accesskey="B" tabindex="8" />
       <br />
       Note: <span class="info_text"><img src="images/notes_info.png" alt="Info" id="info_text" /><span>Production: Application provenant de l'App Store</span>
   </fieldset>
   <br />
   <fieldset>
     <legend>Votre notification</legend>
     <textarea  name="notification" cols="35"  rows="5" id="notification" accesskey="N" tabindex="10" value="" /></textarea>
     <br />
     <input type="Button" value="Laint-1 (1/3)" OnCLick="display_latin1_charset_1();"/>
     <input type="Button" value="Laint-1 (2/3)" OnCLick="display_latin1_charset_2();"/>
     <input type="Button" value="Laint-1 (3/3)" OnCLick="display_latin1_charset_3();"/>
     <input type="Button" value="Corréen" OnCLick="display_corean_text();"/>
     <input type="Button" value="Japonais" OnCLick="display_japan_text();"/>
     <input type="Button" value="Russe" OnCLick="display_russian_text();"/>
   </fieldset>
   <br />
   <fieldset>
     <label for="simple">Simple</label>
     <input type="radio" name="type" id="simple" value="simple" checked="checked" tabindex="11" />
     <label for="ajax">Ajax</label>
     <input type="radio" name="type" id="ajax" value="ajax" tabindex="12" />
     <br />
     <br />
     <input type="submit" id="button_send" accesskey="S" tabindex="15" />
     <input type="reset" id="button_reset" accesskey="R" tabindex="20" />
   </fieldset>
 </form>
</body>
</html>

Lien vers le commentaire
Partager sur d’autres sites
Bourriks Régulier

Bourriks

Posté(e)
  • Auteur
Posté(e)

Tu peux mettre l'arrière plan sur un morceau de texte plutôt que la page, par exemple avec un <span>

.surlignage {
 background-color: Black;
}


<p>bla bla bla<span class="surlignage">TRES IMPORTANT SURLIGNE</span> bla bla bla ...</p>

Solution intéressante, mais le

.surlignage {
 background-color: Black;
}

je le mets où ?

(oui, j'insiste sur mon extrême noobitude en la matière)

Lien vers le commentaire
Partager sur d’autres sites
foetus Vétéran

foetus

Posté(e)
Posté(e)

Solution intéressante, mais le

.surlignage {
 background-color: Black;
}

je le mets où ?

Regardes mon code:

1) Soit dans l'entête (head) dans la balise <style type="text/css"> Ici </style>

2) (Presque???) Toutes les balises ont l'attribut style: <span style="background-color: black" />

3) Soit dans un fichier .css que tu appelles dans l'entête (head) (voir Google pour cela)

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...