آموزش برنامه نویسی HTML – مرور مفاهیم و دستورات

 

 

اولین زبان برای طراحی صفحات وب html است. با زبان html فقط می توان اسکلت و ساختار یک صفحه وب را مشخص کرد. اما این که چه کارهایی را انجام دهد و چه پردازش هایی را انجام دهد نیاز به بخش سرور و زبان هایی مثل php داریم.

عبارت HTML مخفف (Hyper Text Markup Language) است.

زبان html به وسیله المنت‌ها (element)، ساختار یک صفحه وب را می‌سازد. برای ایجاد المنت ها از تگ‌ (tag) استفاده می شود. هر کدام از تگ‌های این زبان، وظیفه خاصی را بر عهده دارند. به طور مثال تگ a که در تصویر بالا ساختار آن را مشاهده می‌کنید، برای لینک کردن صفحات به هم کاربرد دارد. هر تگ تعداد خصوصیت (attribute) دارد، که قابلیت مقداردهی دارند. در این مثال برای درج لینک (link) از خصوصیت href در تگ a استفاده می شود. وجود خصوصیت در تگ ها یکی از بهترین ویژگی های زبان html است. هر تگ در زبان اچ تی ام ال به صورت <نام تگ> باز شده <نام تگ/> بسته می شود.

زبان html به حروف بزرگ و کوچک حساس نیست. هر تگ HTML محتویات درون خود را تحت تاثیر قرار می دهد. برای مثال تگ < b > برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بین تگ باز و بسته < b > قرار بگیرد، توپر می شود.

HTML یک زبان نشانه گذاری است، به این معنی که بخش های مختلف توسط اجزایی به نام تگ از هم جدا شده، که هر کدام دارای کاربرد و خواص مربوط خود هستند. این تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و باید به چه صورت نمایش داده شود.

شروع کار برای طراحی یک صفحه ی وب:

I. فایل text درست می کنیم.

II. یک اسم برایش انتخاب و پسوند فایل را عوض کرده و به html یا htm تغییر داده و آن را ذخیره می کنیم.

می توانیم از ویرایشگر notepad++ استفاده کرد کار با این ویرایشگر بسیار راحت و سریع است و باعث میشود که برنامه نویس وایسته به محیط خاصی نباشیم. واضح است که غلط یابی در این محیط بر عهده خودمان است و با اجرای برنامه می توان اشکالات برنامه را مرتفع ساخت.

همه چیز در html در قالب tag ها ارایه می شوند. این tag ها در واقع بیان می کنند کاری را در صفحه وب شروع می کنیم.

در زبان html یک صفحه وب را به دو قسمت تقسیم می کنیم. تگ head و تگ body. چون این تگ ها داخل تگ html نوشته می شوند می گوییم این تگ ها فرزندان html هستند.

<html>
        <head>
                   <meta charset=”UTF-8″

/>

                   <!– درباره encoding –>
       </head>
       <body>
       </body>
                                                   </html>

تگ meta درباره encoding محتویات این صفحه به چه زبانی نوشته شده است و برای شناسایی زبان فارسی باید حتما با این تگ utf-8 را تعریف کرد. تگ های متا تگ های اصطلاحاً فرد است و به تگ جداگانه برای بستن تگ شروع نیاز نداریم.

تگ title اجازه می دهد یک عنوان را برای صفحه مان در نظر بگیریم. هر چیزی در داخل body بنویسیم، در بدنه صفحه وب قرار می گیرد. تگ p که مخفف پاراگراف است. تگ head برای سئو خیلی مهم است چون آن را به عنوان مطلب در نظر می گیرد. ساختار سایت را می توان از تگ head فهمید. تگ span همان طور که از نامش پیداست دارد ناحیه را تحت پوشش قرار می دهد.  زبان html از فاصله ها می گذرد یا اصطلاح عامیانه می پرد.

برای گذاشتن فاصله دستور “non breaking space” استفاده می شود. اگر می خواهیم نوشته مان در خط دیگری برود از break استفاده می کنیم.

<html lang=”en-US”>
        <head>
                 <meta charset=”UTF-8″ />
                 <title>FaraDars</title>
</head>
<body >
          <h1>HTML Tutorial</h1>
          <h2>P Tag</h2>
<p style=”font-size:24pt;color:red;background-color:yellow;
width:50%;height:500px;font-weight:bold;
“>
                 salaam &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br /> <br /><span style=”font-size:48pt;color:blue;font-family:tahoma,arial;”>ali</span> khoobi ?
                             </p>
</body>
                                                 </html>

 

 

برجسته کردن نوشته از تگ bold استفاده می کنیم. تگی که زودتر باز شده باید دیرتر بسته شود و برعکس. تگی که دیرتر باز شده باید زودتر بسته شود تا یک برنامه خوش ساختار داشته باشیم. تگ strong همانند تگ bold عمل می کند اما دارای معنی است، یعنی یک تگ معنایی (sementic) است. به موتور جستجو می گوید که آن واژه در صفحه ما اهمیت ویژه دارد.

اگر می خواهید صفحات شما در موتور های جستجو رتبه خوبی داشته باشد بهتر است کلمات کلیدی را در آن مشخص کنید. تگ تاکید (emphasis) هم جزو تگ های معنایی است. زیر نویس و بالا نویس نقل قول در داخل کوتیشن(“) قرار می گیرد. تگ مخفف abbreviation می باشد.

تگ آدرس که مرورگر می تواند بفهمد که این راجع به آدرس مکانی هست. برای نام یک اثر از تگ cite استفاده می شود، که برای موتور جستجو دارای معنی است. برای نشان دادن خروجی از تگ sample استفاده می شود. برای نشان دادن یک قطعه کد کامپیوتری می توان از تگ code استفاده کرد. نشان دادن یک فرمول ریاضی با تگ Ver است.

<html>
        <head>
                  <meta charset=”UTF-8″ />
</head>
<body>
          salaam <b>salaam</b><br />
          salaam <i>salaam</i><br />
          salaam <u>salaam</u><br />
          salaam <u><b><i>salaam</i></b></u><br />
          salaam <strong>salaam</strong><br />
          salaam <em>salaam</em><br />
          salaam <big>salaam</big><br />
          salaam <small>salaam</small><br />
         <del>100$</del> <ins>90$</ins><br />
         <mark>salaam</mark><br />
          x<sup>2</sup><br />
          H<sub>2</sub>O<br />
         <q>Hello Hello</q><br />
         <blockquote cite=”http://www.faradars.org”>
          Hello <br />
          Hello <br />
          Hello <br />
         </blockquote>
         <abbr title=”Islamic Republic Iranian Broadcasting”>IRIB</abbr><br />
         <address>address</address>
         <cite>هشت کتاب</cite> توسط سهراب سپهری<br />
         To open a file select <kbd>File | Open</kbd> <br />
         <samp>x = 35</samp><br />
         <code>
                  <pre>
                  var i = 0;
                  document.getElementById(‘d1’).value=i;
                  </pre>
         </code>
         <var>E = mc<sup>2</sup></var>
</body>
                                                         </html>

دادن لینک به صفحات دیگر:
وقتی از http در آدرس دهی استفاده نمی کنیم انگار می گوییم که صفحه ارجاع داده شده در همان پوشه صفحه وب ما قرار دارد. بازگشت به عقب با دونقطه و اسلش ../ یعنی یک فولدر به عقب برو. بهتر است از کلمات کلیدی مناسب برای ارجاع به سایت دیگر استفاده کنیم.

اگر می خواهید صفحه وب بعدی در یک صفحه جدید باز شود از target استفاده کنید.

رفتن به بالای صفحه که اغلب با نام top در سایت ها مشاهده می شود. ابتدا یک علامت گذاری با دادن اسم در بالای صفحه انجام می دهیم، سپس در هر جا که بخواهیم به آن قسمت ارجاع می دهیم.

<html>
        <head>
        </head>
        <body>
                 <a name=”start”></a>
                 <a href=”files/about.html” title=”Learn More About HTML” target=”_blank”>Click Here</a>
                 <p style=”width:200px;height:1200px;background:yellow;”>salaam</p>
                 <a href=”#start”>Top</a>
                 <a name=”end”></a>
</body>
                                               </html>

برای نوشتن یک کامنت شما باید ابتدا این علامت > سپس علامت تعجب ! و بعد دو خط فاصله — (دش) بگذارید. بعد از این علائم هر متنی که بنویسید توسط مرورگر نمایش داده نمی شود، تا وقتی که علامت پایان کامنت را در انتهای آن بگذارید.

علامت پایان کامنت به این صورت نوشته می شود: ابتدا دو خط فاصله — سپس این علامت < . به مثال زیر توجه کنید:

<!– این یک کامنت است –>

 

آنچه مطالعه کردید، توسط جناب آقای امین صابره به عنوان پیاده سازی و برداشت متنی بخش هایی از «آموزش طراحی وب با HTML – مقدماتی» تهیه شده و جهت استفاده مخاطبین گرامی در متلب سایت منتشر می شود.

 

 

 




0 پاسخ

ارسال یک پاسخ

در گفتگو ها شرکت کنید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *