کمیته علمی کامپیوتر و فناوری اطلاعات آموزشکده فنی ابن حسام

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

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

افتتاح سردرب ورودی ساختمان آموزشی ، اداری شماره 1 دانشکده فنی و حرفه ای ابن حسام با حضور مسئولین ارشد مرکز استان

استفاده از HTML در ساختار وب سایت

تصویر وب‌سایت مثالی که در تصویر فوق ملاحظه کردید، چندان زیبا نیست؛ اما برای نمایش نمونه‌ای از طرح‌بندی یک وب‌سایت معمولی کاملاً مناسب است. برخی وب‌سایت‌ها، ستون‌های بیشتری دارند، برخی دیگر بسیار پیچیده‌تر هستند؛ اما ایده کلی همین است. با استفاده از CSS مناسب می‌توان تقریباً از هر عنصری برای بخش‌های مختلف استفاده کرد و ظاهری که مورد نظر است را ایجاد کرد؛ اما همان طور که قبلاً اشاره کردیم باید به موارد مفهومی یا معناشناختی نیز توجه کنیم و از عناصر صحیح برای کارهای مناسب استفاده کنیم.

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

نکته: افراد داری کوررنگی در حدود 4 درصد از جمعیت دنیا را تشکیل می‌دهند. به بیان دیگر تقریباً 1 نفر از هر 12 مرد و 1 نفر از هر 200 زن کوررنگ است. افراد نابینا یا دارای نقص بینایی تقریباً 4 تا 5 درصد از جمعیت دنیا را تشکیل می‌دهند.

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

HTML برای پیاده‌سازی چنین نشانه‌گذاری مفهومی از تگ‌های اختصاصی استفاده می‌کند که می‌توان از آن‌ها برای بازنمایی بخش‌هایی مانند زیر بهره گرفت:

هدر: <header>
نوار ناوبری: <nav>
محتوای اصلی: <main>. این بخش، زیربخش‌های مختلفی دارد که به وسیله عنصرهای <article> ،<section> و <div> ارائه می‌شوند.
نوار کناری: <aside> در اغلب موارد درون <main> قرار دارد.
فوتر: <footer>

یادگیری عملی: بررسی کد در یک وب‌سایت نمونه

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
 
    <title>My page title</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"rel="stylesheet"type="text/css">
    <link rel="stylesheet"href="style.css">
 
    <!--thebelowthreelinesareafixtogetHTML5semanticelementsworkinginoldversionsofInternetExplorer-->
    <!--[ifltIE9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>
 
  <body>
    <!--Here isour main header that isused across all the pages of our website-->
 
    <header>
      <h1>Header</h1>
    </header>
 
    <nav>
      <ul>
        <li><ahref="#">Home</a></li>
        <li><ahref="#">Our team</a></li>
        <li><ahref="#">Projects</a></li>
        <li><ahref="#">Contact</a></li>
      </ul>
 
       <!--ASearch form isanother commmon non-linear way tonavigate throughawebsite.-->
 
       <form>
         <input type="search"name="q"placeholder="Search query">
         <input type="submit"value="Go!">
       </form>
     </nav>
 
    <!--Here isour page'smain content-->
    <main>
 
      <!--It contains an article-->
      <article>
        <h2>Article heading</h2>
 
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.Donecadiam lectus.Set sit amet ipsum mauris.Maecenas congue ligula asquam viverra nec consectetur ant hendrerit.Donec et mollis dolor.Praesent et diam eget libero egestas mattis sit amet vitae augue.Nam tincidunt congue enim,ut porta lorem lacinia consectetur.</p>
 
        <h3>subsection</h3>
 
        <p>Donec ut librero sed accu vehicula ultriciesanon tortor.Lorem ipsum dolor sit amet,consectetur adipisicing elit.Aenean ut gravida lorem.Ut turpis felis,pulvinarasemper sed,adipiscing id dolor.</p>
 
        <p>Pelientesque auctor nisi id magna consequat sagittis.Curabitur dapibus,enim sit amet elit pharetra tincidunt feugiat nist imperdiet.Ut convallis libero inurna ultrices accumsan.Donec sed odio eros.</p>
 
        <h3>Another subsection</h3>
 
        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus.Cum soclis natoque penatibus et manis dis parturient montes,nascetur ridiculus mus.Inrutrum accumsan ultricies.Mauris vitae nisi at sem facilisis semper ac inest.</p>
 
        <p>Vivamus fermentum semper porta.Nunc diam velit,adipscing ut tristique vitae sagittis vel odio.Maecenas convallis ullamcorper ultricied.Curabitur ornare,ligula semper consectetur sagittis,nisi diam iaculis velit,isfringille sem nunc vet mi.</p>
      </article>
 
      <!--the aside content can also be nested within the main content-->
      <aside>
        <h2>Related</h2>
 
        <ul>
          <li><ahref="#">OhIdolike tobe beside the seaside</a></li>
          <li><ahref="#">OhIdolike tobe beside the sea</a></li>
          <li><ahref="#">Although inthe North of England</a></li>
          <li><ahref="#">It never stops raining</a></li>
          <li><ahref="#">Oh well...</a></li>
        </ul>
      </aside>
 
    </main>
 
    <!--Andhere isour main footer that isused across all the pages of our website-->
 
    <footer>
      <p>©Copyright2050by nobody.All rights reversed.</p>
    </footer>
 
  </body>
</html>

البته بررسی همه کد فوق و درک اجزای آن به کمی زمان نیاز دارد. کامنت‌هایی که درون کد ارائه شده‌اند نیز به درک بهتر آن کمک می‌کنند. در واقع ما در این نوشته از شما انتظاری به جز این نداریم، زیرا کلید درک طراحی سند، نوشتن یک ساختار مناسب HTML و سپس طرح‌بندی آن با استفاده از CSS است. البته مبحث CSS موضوع کاملاً جدایی است که در راهنمای جامع CSS به آن خواهیم پرداخت.