nexpay

آموزش HTML

شروع موضوع توسط saalek ‏28 ژانویه 2006 در انجمن HTML

  1. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    منبع اين آموزش از سايت
    http://www.w3schools.com/html/default.asp
    است.

    اميدوارم با اين آموزش ، صفحات زيبايي براي خود بسازيد.
    و هر روز بر كارايي سايت خود و زيبايي آن بيافزاييد.
    .
    البته چون اين زبان ساده و ضروري است همه بلدند ولي من براي معدود افرادي اين آموزش را زدم و همچنين براي يادگيري بهتر خودم.
    .
     
    salamatism, ..SaaRaa, انـدیشه پویان و 4 کاربر دیگر از این نوشته تشکر کرده اند.
  2. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body>
    The content of the body element is displayed in your browser.
    </body>
    </html>
    
    اين ساده ترين صفحه اي است كه ميشه ساخت.
    كد بالا را در اديتور خود paste كنيد و با پسوند htm ذخيره كنيد. مثلا hello.htm .
    اگر اديتور فعلا نداريد از notepad خود ويندوز استفاده كنيد.
    حالا شما يك صفحه ساخته ايد كه مي تواند در اينترنت يك سايت باشد.
    من همين فايل را آپلود مي كنم در فضاي خودم و لينك مي دهم تا برويد ببينيد.
    http://www.saalek.netfirms.com/learnhtml/hello.htm
    عكس هم مي گيرم از اين سايت تا همين جا هم بتوانيد ببينيد.

    [​IMG]
    .
    البته بنر تبليغاتي سايت بالاي صفحه نبايد باشه. ولي چون فضاي من مجاني است ديگه بايد تحمل كرد.
    .
     
    YosefFaraji, majidhmt و sixly از این نوشته تشکر کرده اند.
  3. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    توضيح كد اين كه <html> يعني كه كدهاي به زبان html شروع مي شود و </html> يعني خاتمه اين كدها.
    و <body> يعني بدنه سايت شروع ميشه و </boby> نشانه اختتام بدنه است.
    .
    حالا مي خواهيم كمي پا را فراتر بگذاريم و پاراگراف بندي كنيم. در اينجا از دستور <p> براي شروع يك پاراگراف و از دستور </p> براي اطلاع پايان پاراگراف استفاده مي كنيم.

    کد:
    <html>
    <body>
    
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    
    <p>Paragraph elements are defined by the p tag.</p> 
    
    </body>
    </html>
    
    
    در كدهاي بالا ، 4 پاراگراف ايجاد شده. دقت كنيد كه در صفحه اي كه ايجاد مي شود ، يك خط خالي فاصله مي افتد بين پاراگرافها.
    من ديگه اين فايل را آپلود نمي كنم و در همان hard با اكسپلورر بازش مي كنم. اين جوري ديگه بنر هم نداريم بالاي سايت.


    [​IMG]
    .
     
    majidhmt از این نوشته تشکر کرده است.
  4. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body>
    
    <p>
    This paragraph
    contains a lot of lines
    in the source code,
    but the browser 
    ignores it.
    </p>
    
    <p>
    This paragraph
    contains	  a lot of spaces
    in the source	 code,
    but the	browser 
    ignores it.
    </p>
    
    <p>
    The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
    </p>
    
    </body>
    </html>
    
    در كد بالا مي بينيد كه فواصلي بين نوشته ها وجود دارد و در جاهايي اينتر شده ، ولي اينها هيچ يك در سايت شما نمايش داده نمي شود.
    حالا مي شود اين را خوبي دستور <p> دانست يا بدي آن. ولي بعدا دستوراتي را مي گيم كه اين فواصل و اينتر ها را منعكس مي كند در سايت.
    .

    [​IMG]




    کد:
    <html>
    <body>
    
    <p>
    To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
    </p>
    
    </body>
    </html>
    
     
    براي حل اينتر كردنش از دستور <br> كه مخفف break است ميشه استفاده كرد. در كد بالا چند بار از اين دستور استفاده شده و نتيجه را در پايين مي بينيد.
    .

    [​IMG]
     
    ..SaaRaa, majidhmt و sixly از این نوشته تشکر کرده اند.
  5. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body>
    
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
    
    <p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>
    
    </body>
    </html>
     

    حالا از دستوراتي غير از <p> استفاده مي كنيم. همين طور كه در بالا مي بينيد از <h1> تا <h6> استفاده شده. به نتيجه در زير توجه كنيد. ديگه معلومه كارش چيه. براي فرمت دهي . مثلا عنوان سايت را با <h1> بنويسيم و فصول را با نوع مناسب. بعدا در style دهي ، خواهيم ديد كه ميشه h ها و p را از لحاظ نوع فونت و اندازه فونت و محل قرارگيري و رنگ و غيره براي خودمان شخصي تعريف كنيم و به زيبايي و خوانايي سايت خود بيافزاييم.
    .

    [​IMG]
    .
     
    majidhmt از این نوشته تشکر کرده است.
  6. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body>
    
    <h1 align="center">This is heading 1</h1>
    
    <p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>
    
    </body>
    </html>
    
     
    در اين كد از دستور align="center" استفاده شده و كارش اينه كه h1 ما را به مركز صفحه منتقل مي كند.
    .
    .

    [​IMG]

    فايل را آپلود هم مي كنم و لينك مي دهم.
    http://www.saalek.netfirms.com/learnhtml/hello6.htm



    کد:
    <html>
    <body>
    <p>The hr tag defines a horizontal rule:</p>
    <hr>
    <p>This is a paragraph</p>
    <hr>
    <p>This is a paragraph</p>
    <hr>
    <p>This is a paragraph</p>
    </body>
    </html>
    
    
    
     
    در اين كد دستور <hr> يك خط افقي رسم مي كند.
    .

    [​IMG]

    http://www.saalek.netfirms.com/learnhtml/hello7.htm

    کد:
    <html>
    <body>
    
    <!--This comment will not be displayed-->
    <p>This is a regular paragraph</p>
    
    </body>
    </html>
    
     
    طريقه كامنت نويسي در html . كامنت نوشته اي است كه اجرا نمي شود و فقط براي راهنمايي برنامه نويس و افراد ديگري است كه كد را مي خوانند.
    .

    [​IMG]

    http://www.saalek.netfirms.com/learnhtml/hello8.htm
     
    YosefFaraji و majidhmt از این نوشته تشکر کرده اند.
  7. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    majidhmt از این نوشته تشکر کرده است.
  8. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body background="jokondsmile.jpg">
    
    <h3>Look: A background image!</h3>
    
    <p>Both gif and jpg files can be used as HTML backgrounds.</p>
    
    <p>If the image is smaller than the page, the image will repeat itself.</p>
    
    </body>
    </html>
    
    
     
    در اين برنامه عكس بك گراند تعيين كرده ايم.
    آدرس به نوعي تنظيم شده كه بايد عكس مورد نظر هم كنار فايل html آپلود شده باشد. اگر به سايت ديگري مي خواهيد آدرس بدهيد ، بايد آدرس كامل بدهيد. مثل وقتي كه در بروسر(مثل اكسپلورر) آدرس سايت را مي نويسيد . (براي رويت آن سايت)
    .
    وقتي عكس كوچكتر از صفحه باشد
    tile
    مي شود يعني تكرار مي شود.
    .

    [​IMG]

    http://www.saalek.netfirms.com/learnhtml/link1.htm
     
    YosefFaraji و majidhmt از این نوشته تشکر کرده اند.
  9. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body>
    
    <b>This text is bold</b>
    
    <br>
    
    <strong>
    This text is strong
    </strong>
    
    <br>
    
    <big>
    This text is big
    </big>
    <br>
    
    <em>
    This text is emphasized
    </em>
    
    <br>
    
    <i>
    This text is italic
    </i>
    
    <br>
    <small>
    This text is small
    </small>
    
    <br>
    
    This text contains
    <sub>
    subscript
    </sub>
    
    <br>
    This text contains
    <sup>
    superscript
    </sup>
    
    </body>
    </html>
    
     
    در اين برنامه از تگهايي استفاده شده كه هر يك براي كاري مناسب است. با ديدن كد و نتيجه ، شما مي توانيد بفهميد كه هر تگ چه كاري انجام مي دهد و در جاي مناسب مي توانيد از اين تگها استفاده كنيد. ديگه من توضيح نمي دهم . خودتان با ديدن نتيجه مي فهميد چه تغييري در طرز نمايش نوشته ما بوجود مي ايد.
    .

    [​IMG]

    http://www.saalek.netfirms.com/learnhtml/format.htm
     
    majidhmt از این نوشته تشکر کرده است.
  10. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body>
    
    <pre>
    This is
    preformatted text.
    It preserves	  both spaces
    and line breaks.
    </pre>
    
    <p>The pre tag is good for displaying computer code:</p>
    
    <pre>
    for i = 1 to 10
    	 print i
    next i
    </pre>
    
    </body>
    </html>
    
     
    دستور <pre> جانشين به حق <p> است ، وقتي مي خواهيم فواصل و اينتركردن ما ، در سايت رعايت بشه.
    و واضحه كه جون مي دهد براي نوشتن كدهاي برنامه نويسي در سايت. تا خوانا باشد و خواننده سريع كدهاي برنامه نويسي را تحليل كند.
    پس اگر خواستيد يك سايت بزنيد و برنامه نويسي آموزش بدهيد ، اين دستور را از خاطر نبريد.
    البته واضح است كه خيلي جاها كاربرد داره و فقط براي كدهاي برنامه نويسي نيست.
    .

    [​IMG]

    http://www.saalek.netfirms.com/learnhtml/format2.htm
     
    majidhmt از این نوشته تشکر کرده است.
  11. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body>
    
    <code>Computer code</code>
    <br>
    <kbd>Keyboard input</kbd>
    <br>
    <tt>Teletype text</tt>
    <br>
    <samp>Sample text</samp>
    <br>
    <var>Computer variable</var>
    <br>
    <p>
    <b>Note:</b> These tags are often used to display computer/programming code.
    </p>
    </body>
    </html>
    
     
    دستورات بالا هم براي كدهاي برنامه نويسي استفاده مي شود.
    .

    [​IMG]

    http://www.saalek.netfirms.com/learnhtml/format3.htm






    کد:
    <html>
    <body>
    
    <address>
    Donald Duck<br>
    BOX 555<br>
    Disneyland<br>
    USA
    </address>
    
    <p> beraye moghayeseh ino neveshtam</p>
    
    </body>
    </html>
    
    
    بدون شرح.
    .

    [​IMG]

    http://www.saalek.netfirms.com/learnhtml/address.htm
     
    majidhmt از این نوشته تشکر کرده است.
  12. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body>
    
    <abbr title="United Nations">UN</abbr>
    <br>
    <acronym title="World Wide Web">WWW</acronym>
    
    <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
    
    <p>This only works for the acronym element in IE 5.</p>
    
    <p>This works for both the abbr and acronym element in Netscape 6.2.</p>
    
    </body>
    </html>
    
    
    
    با نگه داشتن ماوس بر روي اين كلمات ، ((شرحي)) به نمايش درميايد.
    پس عكس به كار نمي ايد ، بريد در سايت ماوس را روي كلمه نگه داريد.
    در متن توضيحاتي انگليسي داخل كد ، توضيحاتي داده شده راجع به اين كه اين دستورات در اكسپلورر 5 و نت اسكيپ 6 و 2 دهم كدام دستورها اجرا مي شوند.
    .

    [​IMG]

    http://www.saalek.netfirms.com/learnhtml/format4.htm
     
    majidhmt از این نوشته تشکر کرده است.
  13. avajang.com .leftjee.ir.right
  14. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body>
    
    Here comes a long quotation:
    <blockquote>
    This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
    </blockquote>
    
    Here comes a short quotation:
    <q>
    This is a short quotation
    </q>
    <p>
    With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.
    </p>
    
    </body>
    </html>
    
    
    دو نوع دستور در اينجا استفاده شده، يكي <blockquote> و ديگري <q> .
    در اولي مارجين ( حاشيه) ايجاد مي شود ولي در دومي اين را ندارد.
    نكته جالب اينكه در بروسرهاي مختلف دستورات جلوه مختلف دارند. مثلا در اينجا
    short quotation
    با بروسر اپرا داراي علامت " "است ولي در اينترنت اكسپلورر ندارد. چون من خودم با اپرا كار مي كنم متوجه اين شدم.
    .
    .

    [​IMG]



    [​IMG]

    http://www.saalek.netfirms.com/learnhtml/format5.htm
     
    majidhmt از این نوشته تشکر کرده است.
  15. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    کد:
    <html>
    <body>
    
    <p>
    a dozen is 
    <del>twenty</del> 
    <ins>twelve</ins> 
    pieces
    </p>
    
    <p>
    Most browsers will overstrike deleted text and underline inserted text.
    </p>
    <p>
    Some older browsers will display deleted or inserted text as plain text.
    </p>
    
    </body>
    </html>
    
    
    دستورات بالا ، باعث ميشه كه روي متني خط بزند و متن جايگزين را نشان بدهد. بيشتر در سايتهايي مي بينيد كه قيمتي را اعلام مي كنند و روي آن خط مي كشند و قيمت جديد را به عنوان قيمت شكسته شده جايگزين مي كنند.


    [​IMG]

    http://www.saalek.netfirms.com/learnhtml/format1a.htm

    کد:
    <html>
    <body>
    
    <p>
    <a href="lastpage.htm">
    This text</a> is a link to a page on 
    this Web site
    </p>
    
    <p>
    <a href="http://www.microsoft.com/">
    This text</a> is a link to a page on 
    the World Wide Web.
    </p>
    
    </body>
    </html>
    
    
    در برنامه بالا ، طرز لينك دادن به صفحات همان سايت ، و طرز لينك دادن به صفحات سايتهاي ديگر را ملاحظه مي كنيد.
    .

    کد:
    <html>
    <body>
    <p>
    You can also use an image as a link:
    <a href="lastpage.htm">
    <img border="0" src="buttonnext.gif" width="65" height="38">
    </a>
    </p>
    
    </body>
    </html>
    
    و در برنامه بالا طرز استفاده از يك عكس به عنوان لينك آموزش داده شده.
    يعني بازديد كننده از سايت با كليك بر روي عكس به صفحه ديگري مي رود.
    .
     
    majidhmt از این نوشته تشکر کرده است.
  16. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها
    حالا مي خواهيم ابزاري را معرفي كنيم كه تقريبا در همه سايتها از آن استفاده مي شود.
    ابزارهاي فرمت دهي ، يعني تگهايي كه تابحال گفتيم ، بيشتر كارشان اين بود كه طرز نمايش يك نوشته را تعيين مي كرد .
    ولي ما نياز به ابزاري داريم كه بتواند شماي كلي صفحه ما را معين كند.
    منظور من از اين مقدمه ، ذكر اهميت table است.

    با table است كه مي توان تعيين كرد كه اجزاي سايت ما نسبت به هم چه پوزيشني مي يابند.
    البته دستور ساده اي است ولي استفاده هنرمندانه از آن ، باعث خلق صفحاتي زيبا و كارآمد مي شود.

    بايد بدانيم كه table مثل جدول است . ولي بيشتر سايتها بدون كادر دور جدول table هاي خود را ايجاد مي كنند.
    زيرا وقتي كه خطوط عمودي و افقي جدول ديده نشود ولي نوشته ها و اعداد داراي نظم شطرنجي دقيقي باشد ، همين باعث زيبايي دو چندان مي شود.

    پس در ادامه به تمرين با اين ابزار كارآمد مي پردازيم.
    .
     
    majidhmt از این نوشته تشکر کرده است.
  17. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها

    [​IMG]

    در شكل بالا كدهايي كه براي ساخت table نياز است را مي بينيد و در كنارش صفحه ايجاد شده را مي بينيد.
    همان طور كه مي بينيد ، براي ساخت جدول اولين دستور <table> است. كه در اينجا عددي هم بعنوان ضخامت كادر جدول داده شده. البته همان طور كه در پست قبلي گفتم ، اكثرا جدول ها را بدون كادر دورش مي كشند ، چون زيبايي بيشتري دارد. تقريبا تمام سايتهايي كه شما بازديد مي كنيد از جدول درست شده ولي كمتر شما خطوط جدول را ديده ايد. ولي من براي اينكه كارمان آموزشي است در اين پست با كادر دور در نظر گرفتم. بدون كار اگر خواستيد بكشيد ، فقط <table> بنويسيد. من همين الان با اين دستور امتحان كردم ، همين جدول بوجود آمد ولي بدون چارچوب. و فقط اعداد وجود داشت.

    دستور بعدي اين كدها ، <tr> است. شايد مخفف table row باشد. يعني رديفهاي جدول.
    دقت كنيد كه قسمتهايي كه بين <tr> و </tr> قرار مي گيرند يك رديف را بوجود مي آورند و هر تعداد ستون كه موجود باشد بين اين دو دستور ، باعث تشكيل خطوط عمودي در اين رديف مي شود. به شكل زير دقت كنيد:


    [​IMG]

    در اين شكل من عمدا تعداد ستونها را با دستور <td> كه علامت ستون است افزايش دادم، تا ببينيد كه هر تعداد ستون كه بين <tr> و </tr> قرار بگيرد ، از رديف خارج نمي شود. البته مي بيند كه جدول زيبايي نشده ولي اگر بدون كادر بود شايد بي اشكال بود و مي شد استفاده كرد. منظورم سه خانه آخر رديف دوم است كه حالت زيبايي ندارد. براي رفع اين مشكل ميشه كد زير را نوشت:


    [​IMG]

    علامت &nbsp; چيزي نمايش نمي دهد ولي از بروز مشكلات بعدي جلوگيري مي كند.
    در پايين همين كد را قرار مي دهم كه اگر خواستيد استفاده كنيد دوباره تايپ نكنيد و كپي _ پيست كنيد.
    .

    کد:
    <html>
    <body>
    
    <table border="1">
    <tr>
      <td>100</td>
      <td>200</td>
      <td>300</td>
      <td>aaa</td>
      <td>bbb</td>
      <td>ccc</td>
    </tr>
    <tr>
      <td>400</td>
      <td>500</td>
      <td>600</td>
       <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    </table>
    
    </body>
    </html>
    
    
    .
     
    majidhmt از این نوشته تشکر کرده است.
  18. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها

    [​IMG]
    دو جدول با ضخامت كادر مختلف.
    .
     
    majidhmt از این نوشته تشکر کرده است.
  19. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها

    [​IMG]
    البته ديگه نياز نبود اين برنامه را ايجاد كنم ولي براي اينكه جدول بي border هم جا بيافتد ، اين تصوير را گذاشتم.
    .
     
    majidhmt از این نوشته تشکر کرده است.
  20. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها

    [​IMG]
    دستور <th> براي دادن عنوان است براي جدول .
    .
     
    majidhmt از این نوشته تشکر کرده است.
  21. saalek

    saalek مدیر بازنشسته

    تاریخ عضویت:
    ‏24 می 2005
    نوشته ها:
    654
    تشکر شده:
    53
    محل سکونت:
    در پاي كوهپايه ها

    [​IMG]
    و در اينجا طرز استفاده از دستور <th> براي موقعي است كه مي خواهيم عنوانها به شكل عمودي روي هم باشد.
    .


    [​IMG]
    دستور caption اسمي به جدول مي دهد ، يعني بالاي جدول نام آن را به نمايش مي گذارد.
    .
     
    majidhmt از این نوشته تشکر کرده است.
zarpopخرید بک لینک عسل طبیعی و گرده گل ایرانیfootbal