آموزش طراحی سایت




آموزش طراحی سایت


اساس آموزش طراحی سایت ارائه شده در این بخش براساس زبان HTML و اسکریپ نویسی با CSS و Jscript است. توجه کنید استفاده از زبانهای PHP و ASP تا حدود زیادی توسط HTML قابل پیاده سازی هستند اما از آنجا که همیشه افرادی هستند که باید تخصص های پیچیده داشته باشند تا خبرگی خود را نشان دهند از زبانهای پیچیده تری غیر از HTML سود می برند.

آموزش طراحی سایت

نیازمندیهای آموزش طراحی سایت

1- نرم افزار و آموزش طراحی سایت: پیاده سازی و اجرای آموزش طراحی سایت با برنامه ساده notepad قابل انجام است. برخی نرم افزارهای دیگر مانند مایکروسافت FrontPage نیز وجود دارند که اصلاً توصیه نمی شود. من به شما برنامه ماکرومدیا DreamWeaver را پیشنهاد می کنم.

2- آشنائی کار با گرافیک: درک صحیح از فایلهای صوتی، تصویری و عکس در طراحی بنرها و انواع افزونه های تصویری یا صوتی بسیار الزامی است. برنامه Adobe Photoshop و Xara 3d پیشنهاد من هستند.

3- مرورگر یا Browser :  نرم افزاری است که توسط آن صفحات وب به اجرا در می آیند. Internet Explorer  و mozilla firefox از مهمترین مرورگرها هستند. در سیستم عامل های Apple mackintosh از مرورگر Netscape استفاده می شود که در ایران کاربردی ندارد. همچنین Google croom, Safari  و Opera نیز از دیگر مرورگرهای موجود هستند.

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

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

 آموزش طراحی سایت از طریق سایت های آموزش طراحی وب سایت

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

آموزش طراحی سایت از طریق کلاس های آموزشی

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

آموزش طراحی سایت از طریق کتاب

یادگیری طراحی وب از طریق کتاب باعث می شود شما برای یادگیری های موارد آموزش طراحی سایت به استاد خود متکی نباشید و موارد را از کتاب به راحتی آموزش ببینید. کتاب های مختلفی در زمینه های مختلف آموزش طراحی سایت وجود دارند در هر موردی بهترین کتاب آموزش طراحی سایت را از طریق پرس و جو از آشنایان و گشت و گذار در اینترنت تهیه نموده و کار یادگیری طراحی سایت را شروع نمایید.

در ایران یادگیری موارد مورد زیر برای طراحان وب مورد نیاز است، در صورتی که بخواهید یک طراح وب کامل باشید می بایست تمام موارد زیر را به همراه زیر شاخه های آن آموزش دیده باشید:

photoshop , flash , frontpage , dreamweaver , expression web, css , html , javascript , php , asp.net , asp

آموزش طراحی وب سایت از پایهقسمت اول


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

این دوره آموزسی بر اساس کتاب Build Your Own Website The Right Way Using HTML & CSS از انتشارات Sitepoint  می باشد.

چه کسانی باید این کتاب را بخوانند در آموزش طراحی سایت ؟

این کتاب برای کسانی مفید است که از طراحی سایت اطلاعی ندارند و می خواهند تازه به جمع طراحان سایت ملحق شوند پس مسلما از ساده ترین نکات آغاز می شود .
این کتاب شما را با HTML  و CSS آشنا میکند و راه را برای ساخت یک وب سایت استاندارد به شما نشان می دهد. ذکر این نکته لازم است که ترجمه خط به خط کتاب ارائه نمی شود در قالب مقالات آموزشی برای شما بیان خواهد شد.
سعی می کنیم در هر مقاله حداکثر یک فصل از کتاب را آموزش دهیم و مسلما با بازخوردی که از خوانندگان خواهیم گرفت کیفیت کار و هم چنین وسعت کار را افزایش خواهیم داد.
فصل اول:
Setting up Shop

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

1- وسیلۀ ابتدایی برای ویرایش فایل های متنی که در واقع صفحه وب شما را شامل میشود
2- یک مرورگر (web browser) برای دیدن صفحات وب در آن
3- فرستادن صفحه وب سایت به محیط اینترنت با استفاده از ftp client

چون اکثر کاربران ما درایران از ویندوز استفاده می کنند پس ابزارهای موجود در ویندوز را بررسی خواهیم کرد.

ابزارهای اولیه در ویندوز:

1- ادیت کردن متن : برای ادیت کردن متن در ویندوز می توانید از Notepad استفاده نمایید. این متن، همان صفحۀ وب است .
برای دسترسی به این برنامه در محیط ویندوز مسیر زیر را طی کنید:

    Start > All Programs > Accessories > Notepad

                                                                         آموزش طراحی سایت
2- دیدن خروجی فایل : برای دیدن کار خروجی می بایست از مرورگر و یا browser استفاده کنیم. مرورگرهای متفاوتی وجود دارد که بحث آنها بسیار مفصل است ولی در محیط ویندوز مرورگر Internet Explorer در دسترس است.
شما می توانید آن را در دسکتاپ خود و یا Quick Launch ویا فولدر برنامه ها و یا در منوی start پیدا کنید.

                                                                          آموزش طراحی سایت

3- برای فرستادن صفحه به محیط وب از دستور ftp استفاده خواهیم کرد که در ادامه به آن اشاره میکنم.

ابزارهای دیگر:

برای ادیت کردن صفحات خود می توانید از برنامه NoteTab استفاده کرد .مزیت استفاده از آن اینست که می توانید تب های مختلفی را برای صفحات مختلف باز کنید و بعد از بستن هم در حافظه ش می ماند و برای دفعه بعد هم باز می ماند.

                                                    آموزش طراحی سایت


همچنین مرورگرهای گوناگونی وجود دارد که استفاده از آن ها را در کنار Internet Explorer توصیه می کنم. اما  در اینجا از یکی از بهترین آنها را نام می برم : firefox

                                             آموزش طراحی سایت

اما همه عناصر که متن نیستند شما برای ویرایش عکس هم به برنامه هایی نیاز دارید که می توانید از برنامه های زیر استفاده کنید:
Adobe photoshop
Adobe fireworks
Picasa
توصیه من استفاده از فتوشاپ است ، نگران نباشید یادگیری آن برای کاربرد وب آسان است.

مرحله آخر – درست کردن مکانی است برای فایل های ساخته شده :

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

    Right click > new > folder

سپس نام وب سایت را انتخاب نمایید .حالا یک فولدر دارید که فایل اصلی به همراه تصاویر و css ,html ,….. را داخل آن قرار می دهید.

نگران نباشید با هم پیش میریم و به همه موارد خواهیم رسید.


آموزش طراحی  سایت از پایهقسمت دوم

با سلام خدمت همه علاقه مندان به يادگيري. با توجه به استقبال شما عزيزان از اين مقالات سعي مي كنیم  با دقت و سرعت بيشتري  به نوشتن  ادامه دهیم .
بازهم اعلام مي كنیم که ترجمه خط به خط کتاب ارائه نمی شود و در قالب مقالات آموزشی برای شما بیان خواهد شد و مسلما با بازخوردی که از خوانندگان خواهیم گرفت کیفیت کار و هم چنین وسعت کار را افزایش خواهیم داد. و اما ادامه آموزش.

فصل دوم آموزش طراحی سایت

Your First Web Pages

در اين فصل شما مي توانيد اولين صفحه وب خودتان را خلق نماييد و با XHTM آشنا خواهيد شد و مرحله به مرحله كارهاي خود را در مرورگر تست ميكنيد .
بگذاريد دقيق شويم ! طراحي وب سايتی كه شما مي بينيد به سه لايه اصلي تقسيم مي شود:

                                                   آموزش طراحی سایت
يادگيري اين سه لايه شما را به يك طراح تبديل ميكند!
لايه اول آموزش طراحی سایت لايه محتوي است كه مانند شاسي ماشين است و شامل تگهاي متفاوتي مي باشد .لايه دوم آموزش طراحی سایت لايه نمايش است كه به عناصر HTML شكل و ظاهر مي دهد و لايه سوم آموزش طراحی سایت لايه رفتار است كه حركت و پويايي صفحات را شامل مي شود.
چيزي كه در اين كتاب آموزش داده مي شود مربوط به 2 لايه  HTML و  CSS است.

ديدن Source برنامه:


ديدن كد برنامه مي تواند به يادگيري شما در آموزش طراحی سایت سرعت ببخشد البته بايد در انتخاب وب سايت خود دقت نماييد تا اشتباه آنها مسير يادگيري شما را تغيير ندهد. روش كار بدين صورت است كه ماوس را درروي صفحه جايي غير از تصاوير ببريد و كليك راست كنيد و view page source  يا view source را بزنيد.
بايد صفحه اي مانند زير در فايرفاكس ببينيد:

                                             آموزش طراحی سایت
يا در IE
                                            آموزش طراحی سایت

آموزش طراحی سایت عناصر اصلي يك صفحهHTML :

     یک DocType
    یک<html> tag
    یک<head>  tag
    یک<title>   tag
    یک<body>   tag

تو سورس پيداشون كنيد.

                                     آموزش طراحی سایت

برای دیدن تصویر واضحتر روی تصویر بالا کلیک کنید

و حالا يك نمونه كد فقط شامل عناصري اصلي :

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
    <html xmlns=”http://www.w3.org/1999/xhtml“>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv=”Content-Type   content=”text/html; charset=utf-8″/>
    </head>
    <body>
    </body>
    </html>

حالا مي خواهيم با تك تك اين عناصر آشنا شويم به کمک آموزش طراحی سایت :
داك تايپ DocType  : Document Type Definition
اولين آيتم صفحه است بدون فاصله. اين يك قانون است.
همانطوري كه فايل word 2007 در نمايش در 2000 دچار مشكل مي شود HTML ها با داك تايپ هاي متفاوت هم نمايش متفاوت در مرورگرها خواهند داشت.
در واقع اين داك تايپ است كه به مرورگر مي گويد اين سند از چه نوعي است و بايد به چه ترتيب Render شود . نحوه رندر شدن و تفاوت هاي آنها بايد در سطح حرفه اي تري مطرح شود.
داك تايپ ها هم در طول زمان به وجود مي آيند يعني مانند word نوع هاي جديدي روي قبلي ها عرضه مي شوند مانند HTML5  كه به تازگي مطرح شده است.
براي ديدن داك تايپ هاي آموزش طراحی سایت موجود به اين آدرس بريد http://reference.sitepoint.com/html/doctypes


    <!DOCTYPE  html  PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

به کدهای داك تايپ دقت نماييد: ما در اين خط مي گوييم نوع سند چيست و آدرسي كه بايد به اين نوع سند در وب سايت كنسرسيوم جهاني وب World Wide Web Consortium یا W3C ، اشاره كند کدام است.
در حال حاضر دو نوع داكتايپ هستند كه استفاده بيشتري دارند Transitional  و  Strict
همانطوري كه گفتم فعلا دنبال تفاوت اين داك تايپ ها نباشيد به آن هم خواهيم رسيد .
تاكيد ميكنم : اولين آيتم صفحه است بدون فاصله. اين يك قانون است.


عناصر HTML  :
قبل از اين كه عناصر HTML را شرح دهم بايد با مفهوم تگ (tag) در آموزش طراحی سایت آشناشويد. تگ يعني اسمي كه ميان اين دو <> قرار گيرد و نام تگ همان متني است كه بين اين دو <> قرار مي گيرد

    تگ HTML    <html>
    تگ HEAD   <head>

تگ ها مي توانند شامل چند attribute  (ویژگی) باشند:

    <html   xmlns=”http://www.w3.org/1999/xhtml ”  dir=”rtl” >

dir يك نام  attribute است و rtl ، value (مقدار) آن است كه بين ” ” قرار گرفته است.
                                                 آموزش طراحی سایت

تگ ها به دودسته container و empty  تقسيم مي شوند.تگ هاي container شامل يك تگ بازشونده و يك تگ بسته شونده هستند به مثال بالا دقت نماييد HTML  باز شده و بسته شده است. تگهاي empty  متفاوت هستند مانند مثال زير

    <img src=”images/test.jpg” alt=”test” />
    <br/>

تگ هاي empty  را مي توان به صورت container استفاده كرد ولي در داك تايپ هاي xhtml توصيه شده است كه تگ هاي empty را به همان شكل empty  بنويسيم
در استفاده از تگ ها بايد دانيد كه از چه نوعي هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty  بنويسيم دچار error می شویم.
نگران نباشيد كم كم همه آنها را خواهيد آموخت . بياييد همين الان تو اينترنت عبارت روبرو را جستجو كنيم :

    empty tag in html

بسيار عالي شما هم اين نتايج را پيدا كرديد در آموزش طراحی سایت :

    • <br/>
    • <hr/>
    • <meta/>
    • <base/>
    • <link/>
    • <meta/>
    • <img/>
    • <embed/>
    • <area/>
    • <input/>
    •

اين را گفتم كه هيچ وقت دنياي وب و جستجو را فراموش نكنيد.
غير از داك تايپ ها تمامي عناصر صفحه داخل تگ HTML است كه شامل 2 بخش مي شود head و  body
عنصر HAED
اين يك تگ container  است و در بالاي سند قبل از body قرار مي گيرد و شامل اطلاعاتي در باره صفحه است مانند title, meta, css  و …..

    <head>
    <title>Untitled Document</title>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
    </head>

عنصر  title :
يك تگ container است كه متن وسط آن در عنوان (Title) بالاي صفحه قرار ميگيرد :

به تایتل درسایت بنده توجه کنید :

                                                  آموزش طراحی سایت
موارد استفاده ديگر:
• اين تايتل در زمان مينيمايز كردن پنجره در taskbar windows قابل مشاهده است
• در زمان بوكمارك كردن صفحه با اين عنوان  در ليست ما ذخيره مي شود
• براي معرفي آن صفحه است
• براي موتورهاي جستجو هم حائز اهميت مي باشد چیزی که در بهینه سازی وب سایت  وب اسکالا هم استفاده شده است


عنصر meta  :
متا تگ يك تگ empty است و براي  دلايل متفاوتي استفاده مي شوند اطلاعات اضافي كه در مرورگر نمايش پيدا نمي كند . به طور مثال براي نام نويسنده ويا حق كپي رايت و يا نوع كاراكتر و ….
Css و  javascript  هم در  head قرار ميگيرند كه بنا به نياز استفاده ميشوند البته براي جاوااسكريپت ميتوان يك تفاوتهايي  در طراحی های حرفه ای  قائل شد. به طور مثال سورسی که در طراحی سایت فوق استفاده شده است را مشاهده نمایید. جاوا اسکریپت در پایین صفحه درج شده است.


عناصر body :
هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد: تيترها، پاراگراف ها, تصاوير و …….
در قسمت بعدي به طور عملي با هم يك وب سايت مي سازيم!


آموزش طراحی سایت از پایهقسمت سوم

با سلام خدمت همه علاقه مندان به یادگیری طراحی سایت. با قسمت سوم آموزش طراحی سایت از پايه در خدمت شما هستیم. در اين قسمت شما نحوه سازمان دادن وب سايت و ساخت اولين صفحه وب خودتان را تجربه خواهيد كرد . اميدوارم همانند مقاله های گذشته نظر خودتان را برای ما ارسال نماييد.

ساخت اولین صفحه وب سایت شما

در هر جای كامپیوتر كه دوست دارید فلدری به نام my-first-webpage  بسازید

textEditor خودتان را كه در جلسات قبل توضیح دادیم باز كنید كد زیر را در آن كپی كنید

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>The Most Basic Web Page in the World</title>
    <meta http-equiv=”Content-Type”
    content=”text/html; charset=utf-8″/>
    </head>
    <body>
    <h2>The Most Basic Web Page in the World</h2>
    <p>This is a very simple web page to get you started.
    Hopefully you will get to see how the markup that drives
    the page relates to the end result that you can see on
    screen.</p>
    <p>This is another paragraph, by the way. Just to show how it
    works.</p>
    </body>
    </html>

آموزش طراحی سایت

از textEditor گزینه file>save as را بزنید پنجره ای مانند زیر نمایش می یابد:

                                      آموزش طراحی سایت

مسیر فلدر قبل را بدهید تا در آنجا ذخیره شود.
نام فایل را انتخاب نمایید البته با پسوند html مانند my-first-webpage.html
از منوی كشویی save as type گزینه all files را انتخاب نمایید
از منوی كشویی Encoding گزینه UTF-8 را انتخاب نمایید.

و حالا دكمه save را بزنید.
حالا در فلدر مورد نظر فایلتان را با مرورگر باز نمایید . تبریك شما اولین صفحه وب خودتان را ساختید . تا اینجا آموزش طراحی سایت برای شما مفید بوده؟


                                        آموزش طراحی سایت
اهمیت UTF-8

این كاراكتر ست (Character Set) اجازه می دهد زبان های دیگر هم بتوانند به درستی صفحه شما را ببینند. فرض كنید یك كاربر كره ای كه زبان انگلیسی ندارد بخواهد صفحه شما را ببیند ، این كاراكتر ست است كه اجازه میدهد شما با مشكلی مواجه نشوید.

اولین آنالیز شما در آموزش طراحی سایت

یك مقایسه و یك آنالیز ساده در آموزش طراحی سایت بین كد شما و ظاهری كه در مرورگر می بینید ، می تواند در یادگیری شما كمك شایانی كند:

                                         آموزش طراحی سایت
زمان مناسبی است كه در مورد 2 تگ p  و h2 و البته عناصر دیگر صحبت كنیم.

تیترها و سلسله مراتب آن (H) در آموزش طراحی سایت


تیترها عناصر بلاك و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h2  تا h6  وجود دارند.
از h2  برای مهم ترین تیتر از h2 برای تیتر كم  ارزش تر و از h3 برای تیتر كم ارزش تر از h2 و به همین ترتیب تا  h6

پاراگراف (p) در آموزش طراحی سایت

یك تگ بلاك و بسته شونده (container) است و برای یك بلوك متنی استفاده می شود این بدان معنی است كه متن های خوتان را باید داخل این تگ قرار دهید.

لیست (list) در  آموزش طراحی سایت

و اما لیست ها دو گونه اند:

Ol-order list : برای لیست های ترتیبی
Ul-unorder list: برای لیستهای غیر ترتیبی

به مثال زیر دقت كنید:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Lists – an introduction</title>
    <meta http-equiv=”Content-Type”
    content=”text/html; charset=utf-8″/>
    </head>
    <body>
    <h2>Lists – an introduction </h2>
    <p>Here’s a paragraph. A lovely, concise little paragraph.</p>
    <p>Here comes another one, followed by a subheading.</p>
    <h2>A subheading here</h2>
    <p>And now for a list or two:</p>
    <ul>
    <li>This is a bulleted list</li>
    <li>No order applied</li>
    <li>Just a bunch of points we want to make</li>
    </ul>
    <p>And here’s an ordered list:</p>
    <ol>
    <li>This is the first item</li>
    <li>Followed by this one</li>
    <li>And one more for luck</li>
    </ol>
    </body>
    </html>

و حالا خروجی كار رو در مرورگر ببینید تا تفاوت های دو نوع لیست را ببینید

                                            آموزش طراحی سایت

ظاهر همه لیست ها به همین سادگی نیستند و امروزه در طراحی وب سایت حرفه ای استفاده زیادی دارد..

ادامه دارد آموزش طراحی سایت اگر مورد استقبال قرار گیرد!


آموزش طراحی وب سایت از پایه – قسمت چهارم

 با سلام خدمت کاربران شرکت آکان. با قسمت چهارم آموزش طراحی وب سایت از پایه در خدمت شما هستیم. در این قسمت مطالب زیر را با هم بررسی خواهیم کرد:

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

مفهوم کامنت و لزوم استفاده از آن

نظم در برنامه نویسی ارزش بالایی دارد به طوری که می بایست برنامه نوشته شده توسط شما قابل دنبال کردن توسط برنامه نویس دیگری باشد. یکی از ابزارهایی که در این زمینه به ما کمک می کند گذاشتن کامنت است.
کامنت در واقع نوشته هایی است که در سورس برنامه وجود دارند ولی در نمایش خروجی ظاهر نمی شوند . کامنت گذاری در HTML  و CSS و JavaScript  کاربرد زیادی دارند. به مثال زیر دقت کنید:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Comment example</title>
    <meta http-equiv=”Content-Type”
    content=”text/html; charset=utf-8″/>
    </head>
    <body>
    <p>I really, <em>really</em> like this XHTML stuff.</p>
    <!– Added emphasis using the em element. Handy one, that. –>
    </body>
    </html>

و خروجی بدین صورت است:

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

نحوه نوشن کامنت در HTML بدین صورت است:

    <!– Beginn Navigation –>

درآموزش طراحی سایت جاوا اسکریپت به 2 صورت زیر صورت :

    /* comment  */
    // comment

و آموزش طراحی سایت در CSS :

    /*  comment  */

بگذارید یک ذره جلوتر برویم و یک استفاده حرفه ای تر کامنت را هم براتون توضیح بدهم :

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

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Commenting out XHTML</title>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
    </head>
    <body>
    <h2>Current Stock</h2>
    <p>The following items are available for order:</p>
    <ul>
    <li>Dark Smoke Window Tinting</li>
    <li>Bronze Window Tinting</li>
    <!– <li>Spray mount</li>
    <li>Craft knife</li> –>
    </ul>
    </body>
    </html>

و حالا خروجی برنامه

                                                آموزش طراحی سایت

دقت کنید که 2 آیتم  li نمایش نمی یابد ولی حذف نشده تا شاید در آینده دوباره فعال شوند.
کاراکترها وسمبل ها و نحوه استفاده در  XHTML

بسیاری موارد پیش می آید که می خواهید در متن خود مانند نوشتن همین مقاله از کاراکترهایی مثل > ویا &  و یا هر کاراکتر خاص دیگری استفاده کنید. در XHTML  ما به جای درج مستقیم این کاراکترها از کد خاصی که برای آنها تعریف شده استفاده می کنیم. مثلا به جای & از &   استفاده می کنیم و این یکی از تفاوت های HTML با XHTML است ، یعنی اگر بدین صورت عمل نکنیم سند ما Valid نخواهد شد.

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

نقطه شروع هر وب سایت صفحه اول آن است که با نام  index  ویا default  شناخته خواهد شد. ما در یک مثال کاربردی تگ هایی که تا به حال آموختیم به اضافه دو خصوصیت جدید اضافه کردن تصویر و ارسال ایمیل را خواهیم آموخت.

مثال زیر را در ادیتور خود بنویسید و با نام index.html  ذخیره نمایید

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
    </head>
    <body>
    <h2>BubbleUnder.com</h2>
    <p>Diving club for the south-west UK – let’s make a splash!</p>
    <h2>Welcome to our super-dooper Scuba site</h2>
    <p>Glad you could drop in and share some air with us! You’ve
    passed your underwater navigation skills and successfully
    found your way to the start point – or in this case, our home
    page.</p>
    <h3>About Us</h3>
    <p><img  src=”divers-circle.jpg” width=”200″ height=”162″
    alt=”A circle of divers practice their skills”/></p><p>When we’re not diving, we often meet up in a local pub
    to talk about our recent adventures (any excuse, eh?).</p>
    <h3>Contact Us</h3>
    <p>To find out more, contact Club Secretary Bob Dobalina
    on 01793 641207 or <a
    href=”mailto:test@test,com”>email
    bob@bubbleunder.com</a>.</p> </body>
    </html>

حالا خروجی را ببینیم :

                                             آموزش طراحی سایت
در مورد تگ های p  و h قبلا صحبت کرده ایم ولی اینجا در قسمت contact متن آبی رنگی را می بینید که لینک است یعنی تگ a ولی یک لینک معمولی نیست .این یک لینک برای ارسال ایمیل است و اگر در ویندوز خود برنامه مدیریت ایمیل داشته باشید مانند outlook با آن می توانید به شخص مورد نظر ایمیل ارسال نمایید.
صفحاتی که تا به حال درست کرده ایم به صورت متنی و بسیار کسل کننده است و برای جذابیت بیشتر می بایست از عکس ها استفاده کرد . با استفاده از تگ img می توان تصاویر را به صفحه اضافه کرد. بدین ترتیب :

    <img  src=”divers-circle.jpg”  width=”200″ height=”162″ alt=”A circle of divers practice their skills” />

این تگ یک تگ empty است و دارای attribute های زیر است :

src  برای آدرس عکس در آموزش طراحی سایت

alt  برای توضیح تصویر در آموزش طراحی سایت

width عرض تصویر به پیکسل در آموزش طراحی سایت

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

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

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

این نکته را هم در پایان اضافه کنم که برای Valid شدن در XHTML صفحه وجود alt  الزامی است .

ادامه دارد اگر مورد استقبال قرار گیرد!





شرکت طراحی وب سایت آکان
امتیاز 4.9 از 5 - تعداد 115 رای


نام :
ایمیل :
پیغام :
 
xhtml
akan google plus
akan facebook
akan twitter
akan instagram
css

شماره تماس :