🍳 🌰 👩🏼‍💼 Google HTML / CSS Design Guide 🏺 🕘 👫

अनुवादक से

मैंने इन सिफारिशों को खुशी-खुशी पढ़ा और अब मैं आपको एक अनुवाद प्रदान करता हूं।

परिचय

यह मार्गदर्शिका HTML और CSS कोड को प्रारूपित करने और प्रारूपित करने के नियमों का वर्णन करती है। इसका लक्ष्य कोड की गुणवत्ता में सुधार करना और सहयोग और बुनियादी ढांचे के समर्थन की सुविधा प्रदान करना है।

यह HTML , CSS और GSS का उपयोग करके फ़ाइलों के कार्यशील संस्करणों पर लागू होता है ।

किसी भी उपकरण का उपयोग कोड के संकलन या आपत्ति को कम करने के लिए करने की अनुमति है, बशर्ते कि कोड की समग्र गुणवत्ता संरक्षित हो।

सामान्य डिजाइन नियम

प्रोटोकॉल

पृष्ठ पर संसाधनों को शामिल करते समय प्रोटोकॉल निर्दिष्ट न करें।

प्रोटोकॉल या (मीडिया :, https :) का नाम छवियों या अन्य मीडिया संसाधनों, शैली फ़ाइलों या लिपियों के लिंक पर दें, यदि ये फाइलें दोनों प्रोटोकॉल द्वारा सुलभ हैं।

एक प्रोटोकॉल की अनुपस्थिति लिंक को सापेक्ष बनाती है, जो विभिन्न प्रोटोकॉल से संसाधनों को मिलाने से रोकता है और फ़ाइल आकार को थोड़ा कम करता है।

अनुशंसित नहीं:

  <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

  <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

  .example {
    background: url(http://www.google.com/images/example);
  }

  .example {
    background: url(//www.google.com/images/example);
  }

.

.

:

  <ul>
    <li>
    <li>
  </ul>

  .example {
    color: blue;
  }

.

: , , ( /CDATA), , ( ).

:

  <A HREF="/"></A>

  <img src="google.png" alt="Google">

.

diff.

:

  <p>?_

  <p> .

UTF-8 ( BOM).

, UTF-8 (BOM).

HTML <meta charset="utf-8">. ss-: UTF-8 .

( , , , : XHTML, HTML CSS (.).)

, .

, : , , .

( , , . HTML CSS . )

TODO.

TODO. , @@.

( ) : TODO().

, : TODO: .

:

  {# TODO(Ivan Ivanov):    #}
  <center></center>

  <!-- TODO:    -->
  <ul>
    <li></li>
    <li></li>
  </ul>

HTML

HTML5.

HTML5 (HTML ) html-: <!DOCTYPE html>.

( HTML text/html. XHTML, application/xhtml+xml (.), . )

HTML

HTML.

HTML , , , .

W3C HTML validator (.) .

— . HTML HTML.

:

  <title></title>
  <article>

  <!DOCTYPE html>
  <meta charset="utf-8">
  <title></title>
  <article> .</article>

HTML , .

( “”) : , p , a ..

, .

:

  <div onclick="goToRecommendations();">All recommendations</div>

  <a href="recommendations/">All recommendations</a>

.

: , , canvas. (alt), .

. , @alt. .

( alt , , CSS, alt="")

:

    <img src="spreadsheet.png">

    <img src="spreadsheet.png" alt="Spreadsheet screenshot.">

, .

(), () () .

, HTML, HTML . , , , — .

, .

. HTML- .

:

  <!DOCTYPE html>
  <title>HTML sucks</title>
  <link rel="stylesheet" href="base.css" media="screen">
  <link rel="stylesheet" href="grid.css" media="screen">
  <link rel="stylesheet" href="print.css" media="print">
  <h1 style="font-size: 1em;">HTML </h1>
  <p>     - ,     :
    <u>HTML -  !!1</u>
  <center>  ,      ,
       . </center>

  <!DOCTYPE html>
  <title>My first CSS-only redesign</title>
  <link rel="stylesheet" href="default.css">
  <h1>  CSS </h1>
  <p>     ,  -  :
             HTML
  <p> !

-

-.

-, —, ”, ☺, , (UTF-8)

— HTML ( < &) “” ( ).

:

    : &ldquo;&eur;&rdquo;.

    : “€”.

. ( )

. HTML5 (.) .

( , , , -. , , , ).

:

  <!DOCTYPE html>
  <html>
    <head>
      <title>  -  .</title>
    </head>
    <body>
      <p>.</p>
    </body>
  </html>

  <!DOCTYPE html>
  <title>-!</title>
  <p>-

'type'

type .

type ( - CSS) ( JavaScript).

type HTML5 text/css (.) text/javascript (.) . .

:

  <link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">

  <link rel="stylesheet" href="//www.google.com/css/maia.css">

  <script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>

  <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

HTML

, .

(CSS display), .

.

( - , li . [ . .] .

:

  <blockquote>
    <p><em>Space</em>, the final frontier.</p>
  </blockquote>

  <ul>
    <li>
    <li>
    <li>
  </ul>

  <table>
    <thead>
      <tr>
        <th scope="col">
        <th scope="col">
    <tbody>
      <tr>
        <td>$ 5.00
        <td>$ 4.50
  </table>

CSS

CSS-.

, - , , CSS .

W3C CSS (.) .

— . CSS …

.

, , , …

, , , , .

— , . “.”

.

:

  /*  :    */
  #yee-1901 {}
  
  /*  :    */
  .button-green {}
  .clear {}

  /* :     */
  #gallery {}
  #login {}
  .video {}
  
  /* :   */
  .aux {}
  .alt {}

, , , .

, , .

.

:

  /*   */
  #navigation {}
  .atr {}

  /*  */
  #nav {}
  .author {}

() .

( -), .

(.).

:

  /*   */
  ul#example {}
  div.error {}

  /*  */
  #example {}
  .error {}

, .

CSS (.) ( font), , .

.

:

  /*   */
  border-top-style: none;
  font-family: palatino, georgia, serif;
  font-size: 100%;
  line-height: 1.6;
  padding-bottom: 2em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0;

  /*  */
  border-top: 0;
  font: 100%/1.6 palatino, georgia, serif;
  padding: 0 1em 2em;

0

.

:

  margin: 0;
  padding: 0;

0

“0” .

0 -1 1.

:

  font-size: .8em;

("", '') url().

:

  @import url(//www.google.com/css/go.css);

.

.

:

  /*   */
  color: #eebbcc;

  /*  */
  color: #ebc;

. ( )

, , , ( ) . .

. .

:

  .adw-help {} /* AdWords */
  #maia-note {} /* Maia */

.

, , , .

:

  /*  :  “demo”  “image”   */
  .demoimage {}
  
  /*  :     */
  .error_status {}

  /*  */
  #video-id {}
  .ads-sample {}

, CSS “”— .

CSS-, . , . , , , . , .

CSS

.

, , .

. , , ( -moz --webkit)

:

  background: fuchsia;
  border: 1px solid;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: black;
  text-align: center;
  text-indent: 2em;

.

.

(.), , .

:

  @media screen, projection {
  
    html {
      background: #fff;
      color: #444;
    }
  
  }

.

.

:

  .test {
    display: block;
    height: 100px
  }

  .test {
    display: block;
    height: 100px;
  }

.

( ) , .

:

  h3 {
    font-weight:bold;
  }

  h3 {
    font-weight: bold;
  }

.

.

:

  a:focus, a:active {
    position: relative; top: 1px;
  }

  h1,
  h2,
  h3 {
    font-weight: normal;
    line-height: 1.2;
  }

.

.

:

  html {
    background: #fff;
  }
  
  body {
    margin: auto;
    width: 50%;
  }

CSS

. ( )

. .

:

  /* Header */
  
  #adw-header {}
  
  /* Footer */
  
  #adw-footer {}
  
  /* Gallery */
  
  .adw-gallery {}

, , , . , . , .

, , , , .

, , , .

, . .

, Google , , , , , , .

.

Google HTML / CSS Design Guide

अनुवादक से

परिचय

सामान्य डिजाइन नियम

प्रोटोकॉल

HTML

HTML

-

'type'

HTML

CSS

CSS

0

0

CSS

.

CSS

More articles: