اطلاعيه

Collapse
No announcement yet.

آموزش مقدماتی HTML

Collapse
X
 
  • فیلتر
  • زمان
  • نمایش
Clear All
new posts

    آموزش مقدماتی HTML

    آموزش مقدماتی HTML



    توجه: پیش فرض من برای آموزش اینه که مخاطب هیچ چیزی از برنامه نویسی نمیدونه و اولین باره که کد می نویسه. پس لطفاً اساتید محترم این رشته، خیلی سخت نگیرند. البته از نظرات و پیشنهادات و انتقادات ارزنده شما در پیام خصوصی استقبال میکنم
    ویرایش شده توسط abc_ramak; 2010/4/04, 09:58 PM.

    #2
    [QUOTE=abc_ramak;1858902]


    آموزش مقدماتی HTML

    [/QUOTE
    پس آموزشش کو ؟
    خواستن همیشه توانستن نیست ، گاهی داغ بزرگیست که تا ابد بر دلت می ماند ....
    37

    نظر


      #3
      معمولا اولین چیزی که باید بدونین اینه:
      HTML=HyperText Markup Language
      زبان نشانه گذاری ابر متن

      زبان پایه برای طراحی و برنامه نویسی تحت وب

      محیط های مختلفی برای کار وجود داره که بهترین اونها Dreamweaver هست، ولی بنده ترجیح میدم آموزش مقدماتی رو روی همون note pad خودمون شروع کنیم. در یک کلام: تنبلی و تن پروری ممنوع!

      دستوراتی که در HTML استفاده میشن اسمشون tag هست و همگی بین دو علامت "<" و ">" قرار گرفتن. مثل تگ های زیر:
      كد:
      <b>
      <html>
      <font>
      ...
      ما توی محیط note pad دستورات رو می نویسیم و با فرمت htm ذخیره می کنیم و بعد با استفاده از یه مرورگر مثل IE اونو اجرا می کنیم. تگهای HTML ترجمه میشن و سایر کلمات و عباراتی که نوشتیم، عیناً در خروجی نمایش داده میشن.

      تگ ها دو نو هستند: بعضیهاشون به صورت دوتایی هستن. یعنی وقتی اون تگ رو استفاده کردیم و مطالب رو بعد از اون تگ نوشتیم باید انتهای اون رو مشخص کنیم یا اصطلاحاً اون تگ رو ببندیم. برای بستن تگ از علامت "/" بصورت زیر استفاده می کنیم:
      كد:
      </تگ>
      اکثر تگهای HTML از این نوع هستند، مثل:
      كد:
      <font>متن</font>
      <b>متن</b>
      <head>متن</head>
      ...
      اما نوع دیگه تگ ها هستند که به صورت تکی استفاده میشن و نیازی به مشخص کردن انتها ندارن. مثل:
      كد:
      <br>
      <input>
      ...
      امیدوارم خیلی گیج نشده باشین نگران نباشین. اصلا سخت نیست. اولشه

      خوب حالا وارد محیط note pad میشیم تا آموزش عملی رو شروع کنیم

      اول کدهای زیر رو بنویسید:
      كد:
      <html>
      <body>
      Hello HTML
      </body>
      </html>
      خوب شما یه برنامه کوچیک نوشتین. سخت بود؟!
      میخواین نتیجه رو ببینین؟ اول باید برنامه ای که نوشتین ذخیره کنین. از منوی file گزینه save رو انتخاب کنین. save as type رو به all files تغییر بدین. مقابل file name بنویسین hello.htm و دکمه save رو بزنین. حالا به شاخه ای که فایل رو ذخیره کردین برین و با دبل کلیک، فایل رو اجرا کنین. به به عجب برنامه ای!!

      خوب برگردیم به کدهایی که نوشتیم و یه توضیح کوتاه:
      1- همه صفحات HTML با تگ <html> شروع میشن و با </html> تموم میشن.
      2- بدنه اصلی برنامه بین تگهای <body> و </body> نوشته میشه. اینجا باید بگم که همه کدهای ما شامل بدنه نمیشن. با قسمت های دیگه به زودی آشنا میشیم.
      3- ما 5 سطر کد نوشتیم ولی در خروجی فقط کلمه Hello HTML رو میبینیم. چرا؟

      فکر کنم برای جلسه اول همین قدر کافیه. فعلا به سوال "چرا" جواب بدین تا بعد

      نظر


        #4
        نوشته اصلي بوسيله abc_ramak نمايش پست
        فکر کنم برای جلسه اول همین قدر کافیه. فعلا به سوال "چرا" جواب بدین تا بعد
        آقا اجازه !
        ما هم میشه جواب بدیم ؟

        بذارین یه سوال بپرسم که یه خورده این پست از حالت اسپم گونه خارج بشه !

        میشه کدهای html باشگاه رو فعال کرد ؟

        نظر


          #5
          نوشته اصلي بوسيله افشین... نمايش پست
          آقا اجازه !
          ما هم میشه جواب بدیم ؟

          بذارین یه سوال بپرسم که یه خورده این پست از حالت اسپم گونه خارج بشه !

          میشه کدهای html باشگاه رو فعال کرد ؟
          نه!!!
          شما فقط جواب منو بده!!!

          نظر


            #6
            نوشته اصلي بوسيله افشین... نمايش پست
            آقا اجازه !
            ما هم میشه جواب بدیم ؟

            بذارین یه سوال بپرسم که یه خورده این پست از حالت اسپم گونه خارج بشه !

            میشه کدهای html باشگاه رو فعال کرد ؟
            جواب که ندادین!
            سوالتون هم ربطی به بحث نداره. بهتره از مدیرای باشگاه بپرسین.

            نوشته اصلي بوسيله atish pare نمايش پست
            نه!!!
            شما فقط جواب منو بده!!!
            اسپم؟!

            نظر


              #7
              نوشته اصلي بوسيله abc_ramak نمايش پست
              ما 5 سطر کد نوشتیم ولی در خروجی فقط کلمه Hello HTML رو میبینیم. چرا؟

              فکر کنم برای جلسه اول همین قدر کافیه. فعلا به سوال "چرا" جواب بدین تا بعد
              خوب همونطور که خودتون گفتید تگها ترجمه میشن و مابقی توی خروجی نمایش داده میشن یعنی ما تگها رو توی خروجی نمیبینیم.
              درسته؟
              من به اندازه ی یک ابر دلم می گیرد،وقتی از پنجره بر پوچی افکار جهان می نگرم

              نظر


                #8
                نوشته اصلي بوسيله abc_ramak نمايش پست
                جواب که ندادین!
                سوالتون هم ربطی به بحث نداره. بهتره از مدیرای باشگاه بپرسین.
                دوست عزیز
                منظورم این بود که سوالات رو همه جواب بدن ؟
                یا فقط اونایی که دارن html یاد می گیرن ؟

                مدیرای باشگاه هم کدهای html رو غیر عمد که غیر فعال نکردن ...
                خواستم بدونم روشی یا ترفندی داره که خودمون بتونیم فعالش کنیم ؟

                نظر


                  #9
                  نوشته اصلي بوسيله افشین... نمايش پست
                  مدیرای باشگاه هم کدهای html رو غیر عمد که غیر فعال نکردن ...
                  خواستم بدونم روشی یا ترفندی داره که خودمون بتونیم فعالش کنیم ؟
                  نچ
                  My L0vE IS IRAN
                  ایران وطن من است
                  و وطنم عشق من

                  نظر


                    #10
                    نوشته اصلي بوسيله ژاندارک نمايش پست
                    خوب همونطور که خودتون گفتید تگها ترجمه میشن و مابقی توی خروجی نمایش داده میشن یعنی ما تگها رو توی خروجی نمیبینیم.
                    درسته؟
                    بله درسته

                    نظر


                      #11
                      2

                      خوب حالا بریم سراغ درس بعدی
                      چطوره امروز با چند تا تگ آشنا بشیم

                      مثلا این چطوره؟
                      كد:
                      <font>
                      متن
                      </font>
                      تگ مفیدی هست
                      همونطور که میبینین جزو تگهای دوتایی هست، یعنی باید مابین این تگها متنی نوشته بشه.
                      اما ببینیم چه کاربردی داره؟
                      برنامه ای که جلسه قبل نوشتیم رو دوباره بنویسین:
                      كد:
                      <html>
                      <body>
                      Hello HTML
                      </body>
                      </html>
                      عبارت Hello HTML رو داخل تگ font قرار بدین. اینجوری:
                      كد:
                      <html>
                      <body>
                      <font>Hello HTML</font>
                      </body>
                      </html>
                      خروجی چه تغییری کرد؟

                      هیچی ...
                      خوب این تگ به تنهایی کاری انجام نمیده. داخل اون باید صفاتی رو تعریف کنیم. مثلا اینها:
                      كد:
                      <font family=tahoma size=2 color=red>
                      Hello HTML
                      </font>
                      هر کدوم از عباراتی که داخل تگ نوشتم یه صفت هستند که با فاصله از هم جدا شدند. یعنی من برای تگ font تعداد 3 صفت تعریف کردم. میتونیم هر کدوم از این صفات رو حذف کنیم یا صفات دیگه ای اضافه کنیم.
                      از کلمات size و color ,.. که به کار بردیم مشخصه که خروجی به چه صورتی خواهد بود. امتحان کنید...
                      بله کلمه Hello HTML با فونت tahoma و رنگ قرمز و اندازه 2 نمایش داده میشه. با سایر صفات تگ font به زودی آشنا میشیم.

                      حالا یه تگ پرکاربرد دیگه:
                      كد:
                      <B>
                      متن
                      </B>
                      باز هم یه تگ دوتایی.
                      حتما با کلمه bold در word آشنایی دارید. خوب ایی تگ همونه دیگه. امتحانش کنین
                      تگهایی هم برای italic و underlined داریم. اینا:
                      كد:
                      <I>متن</I>
                      <U>متن</U>
                      حتما ازشون استفاده کنین و خروجی ها رو مقایسه کنین.

                      و اما آخرین تگی که امروز یاد میگیریم:

                      کد زیر رو بنویسید و خروجی رو ببینید:
                      كد:
                      <html>
                      <body>
                      Hello HTML
                      I love You!
                      </body>
                      </html>
                      چی شد؟! چرا اینجوری شد؟! خوب من براتون میگم با زدن کلید Enter نمیتونین به سطر پایین برید. حتی برای این کار هم باید از تگ زیر استفاده کنین:
                      كد:
                      <br>
                      این تگ دوتایی نیست و هرجایی از متن که اونو قرار بدین، مثل اینه که Enter رو زدین و به سطر پایین حرکت می کنین. (مخفف کلمه Break)
                      حالا این تگ رو توی متن بالا قرار بدین تا خروجی درست رو ببینین. اینجوری:
                      كد:
                      <html>
                      <body>
                      Hello HTML
                      <br>
                      I love You!
                      </body>
                      </html>

                      تمرین امروز:
                      متن زیر رو در خروجی ایجاد کنین:

                      HTML documents are composed entirely of HTML elements that, in their most general form have three components: a pair of element tags with a "start tag" and "end tag"; some element attributes given to the element within the tags; and finally, all the actual, textual and graphical, information content that will be rendered on the display.

                      An HTML element is everything between and including the tags. A tag is a keyword enclosed in angle brackets.



                      توجه کنین بعضی از کلمات bold یا italic یا underlined هستند و رنگ پاراگراف دوم green هست.

                      نظر


                        #12
                        كد:
                        <html>
                        <body>
                        <u>HTML documents</u> are composed entirely of <b>HTML elements</b> that, in their most general form have three components: a pair of element <i>tags</i> with a "start tag" and "end tag"; some element <i>attributes</i> given to the element within the tags; and finally, all the actual, textual and graphical, information <i>content</i> that will be rendered on the display.
                        <br><br>
                        <font color=green>An <b>HTML element</b> is everything between and including the tags. A <b>tag</b> is a keyword enclosed in angle brackets.</font>
                        </body>
                        </html>
                        انجام پروژه با MATLAB و VBA
                        لینک دانلود برنامه ها و غلط نامه کتاب شگردهای عددی
                        نمونه صفحات کتاب "شگردهای عددی در پاسخیابی پرسشهای مهندسی با برنامه ریزی متلب"

                        نظر


                          #13
                          نوشته اصلي بوسيله meytim نمايش پست
                          كد:
                          <html> <body> <u>HTML documents</u> are composed entirely of <b>HTML elements</b> that, in their most general form have three components: a pair of element <i>tags</i> with a "start tag" and "end tag"; some element <i>attributes</i> given to the element within the tags; and finally, all the actual, textual and graphical, information <i>content</i> that will be rendered on the display. <br><br> <font color=green>An <b>HTML element</b> is everything between and including the tags. A <b>tag</b> is a keyword enclosed in angle brackets.</font> </body> </html>
                          کاملاً درسته

                          نکته ای که تو نوشتن تگ ها باید بهش توجه کرد اینه که وقتی از چند تگ تو در تو استفاده می کنیم، تگی که زودتر باز شده باید دیرتر بسته بشه و برعکس. همونطور که این دوستمون به خوبی تگ های <font> و <b> رو به صورت تو در تو استفاده کردن.

                          نظر


                            #14
                            <!doctype html>

                            <html>
                            <head>
                            <style>
                            #h{color:green;}

                            </style>



                            </head>
                            <body>
                            <p><u>HTML documents</u>are composed entirely of<b> HTML elements</b> that, in their most general form have three components: a pair of element<i> tags</i> with a "start tag"
                            and "end tag"; some element<i> attributes </i>given to the element within the tags; and finally, all the actual, textual and graphical, information<i> content </i>that will be rendered on the display.
                            </p>

                            <p id="h">An<b> HTML element</b>is everything between and including the tags. A<b> tag</b>s a keyword enclosed in angle brackets
                            </p>

                            </body>
                            </html>
                            چشمانمان را برگذر قاصدک ها باز کنیم که زمان ساز سفر میزند
                            دست در دست هم دهیم ،دلهایمان را یکی کنیم
                            بی هیچ پاداشی حراج محبت کنیم
                            باورکنیم که همه ما خاطره ایم
                            دیر یا زود رهگذر قافله ایم.

                            نظر


                              #15
                              نوشته اصلي بوسيله sahar68 نمايش پست
                              <!doctype html>


                              <html>
                              <head>
                              <style>
                              #h{color:green;}

                              </style>



                              </head>
                              <body>
                              <p><u>HTML documents</u>are composed entirely of<b> HTML elements</b> that, in their most general form have three components: a pair of element<i> tags</i> with a "start tag"
                              and "end tag"; some element<i> attributes </i>given to the element within the tags; and finally, all the actual, textual and graphical, information<i> content </i>that will be rendered on the display.
                              </p>

                              <p id="h">An<b> HTML element</b>is everything between and including the tags. A<b> tag</b>s a keyword enclosed in angle brackets
                              </p>

                              </body>

                              </html>
                              خروجی کاملا درسته
                              ولی سعی کنید با آموزش پیش برید نه جلوتر
                              هنوز به style نرسیدیم و حتی تگ <p> هم یاد نگرفتیم!!

                              در ضمن کد ها رو مثل من داخل علامت CODE قرار بدین. برای این کار بالای صفحه ی پاسخ، علامت # رو بزنید و داخل اون کدها رو بنویسید. ممنون

                              نظر

                              Working...
                              X