در حال بارگذاری

گروه طراحي وب سایت ، سايت مايت ، با ارائه خدمات طراحي حرفه اي وب سايت ، سئو و بهينه سازي ، امنيت و هک و آموزش و کار آموزي شما را به صبر و شکيبايي جهت بارگذاری کامل وب سایت دعوت مينمايد.
شماره دفتر مرکزي : 03116618188
موبايل واحد فروش : 09136848587

موضوعات
دوستان
آرشیو
آمار سايت
arrow  افراد آنلاین : 2
بازديد ديروز: 588
بازديد امروز: 141
 خروجی فید امروز : 10
arrow  ورودی گوگل : 0
  • برچسب‌ها

  • آموزش جلسه اول html

    تعداد بازدید : 458   دسته بندی : آموزش HTML , آموزش و کار آموزی جمعه ,28 سپتامبر , 2012

    آموزش جلسه اول html به زبان ساده

    آموزش جدید ساده html

    آموزش html به زبان ساده

    مراحل کار طراحی سایت با html

    1ـ جمع آوری اطلاعات: برای طراحی هر سایتی، نخستین گام جمع آوری اطلاعات در مورد سایت مورد سایت است. اگر بخواهیم سایت را برای خودمان یا سازمان یا مؤسسه ای که در آن کار می کنیم طراحی کنیم که احتمالاً از قبل می دانیم که چه اطلاعاتی را می خواهیم در سایت مطرح کنیم. اما اگر بخواهیم سایت را برای مشتری طراحی کنیم، باید ابتدا جلسه ای برای مصاحبه مشتری اختصاص داده و در طی این جلسه از کلیه اطلاعاتی که مشتری می خواهد در سایتش مطرح شود، مطلع شویم. به علاوه، لازم است که در مورد نحوه مطلوب مشتری برای مطرح کردن مطالب سایت و همچنین سلیقه او در مورد طرح و رنگ آمیزی سایت، اطلاعاتی از او کسب نماییم.

    2ـ سازماندهی اطلاعات: پس از آن که اطلاعات مورد نظر را جمع آوری کردیم، لازم است که این اطلاعات را دسته بندی و سازماندهی کنیم و تعیین کنیم که مطالب باید در چه گروه ها و دسته هایی و در چند صفحه، مطرح شوند. نکته ای که توجه به آن در این مرحله لازم است، این است که نباید دسته بندی و صفحه بندی سایت به گونه ای انجام شود که یافتن مطالب مورد نیاز کاربران سایت، دشوار باشد. صفحه اصلی سایت باید به اندازه کافی گویا باشد و ترجیحاً خلاصه ای از کلیه مطالب سایت همراه با لینک های مناسب به مقصد بخش های مربوطه در آن گنجانده شده باشد. در صورت نیاز و زیاد و مفصل بودن مطالب و دایرکتوری های سایت، می توان صفحه ای را به نام «نقشه سایت» که حاوی لینک هایی به کلیه مطالب سایت باشد، ایجاد کرده ودر تمامی صفحات سایت، لینکی را به مقصد این صفحه گنجاند تا کاربر بتواند با مراجعه به این صفحه و با انتخاب لینک مربوطه، مطالب مورد نظر خود را پیدا کند. همچنین، صفحات دیگر سایت، نباید بیش از اندازه طولانی و دارای پیچیدگی های غیرضروری باشد زیرا باعث طولانی شدن زمان دانلود صفحه و سردرگمی کاربر خواهد شد. در صورت لزوم و در مواردی که می خواهیم مطلبی طولانی (مانند یک مقاله مفصل) را مطرح کنیم، می توانیم صفحه مورد نظر را به چند زیر صفحه تقسیم کرده و قستمهای مختلف مطلب را در این زیرصفحات ذکر کنیم. برای اینکه کاربر بتواند بین این صفحات حرکت و جستجو کند، می توانیم لینکهایی مانند «صفحه قبل» و «صفحه بعد» در بالا یا پایین این زیر صفحات قرار دهیم.

    3ـ ایجاد طرح های گرافیکی برای صفحات مختلف سایت: پس از انجام مراحل فوق، برای آنکه طرحی عینی از سایت داشته باشیم که مانند «نقشه ساختمان» عمل کند و شکل صوری مطالب، همراه با قالب بندی ها و آرایش های لازم برای صفحات و همچنین، مشترکات موجود در زمینه شکل ظاهری سایت را برای ما نمایان سازد، اقدام به ایجاد طرحی گرافیکی از کلیه صفحات سایت با کلیه حالت های لازم (مثلاً باز شدن و بسته شدن منوها، آشکار شدن و پنهان شدن و یا جایگزین شدن بخشی از مطالب سایت و غیره)، می کنیم. همانطور که ذکر شد، این طرح گرافیکی مانند نقشه ساختمان عمل می کند به گونه ای که کلیه رنگ بندی ها، شکل بندی ها، اندازه ها و فواصل و کلیه اطلاعات بصری کار در آن تعیین و رعایت شده است و بنابراین، ما می توانیم در هنگام کدنویسی سایت، از این اطلاعات استفاده کرده و زمان لازم برای کدنویسی سایت را به میزان قابل توجهی کاهش دهیم. انجام این مرحله از کار بسیار مهم است و توصیه می شود حتی الامکان این مرحله به صورت کامل انجام شده و از انجام آن صرف نظر نشود. علاوه بر مزایای ذکر شده، ما می توانیم قبل از اینکه دست به کار کدنویسی سایت شویم، این طرح را به مشتری یا کارفرما نشان داده و نظر او را جویا شویم و هر گونه تغییرات مورد نظر او را اعمال کنیم. بدون انجام این کار، ناچاریم نسخه اصلی و کدنویسی شده سایت را به کارفرما نشان دهیم و در صورتی که تغییری مورد نظر او باشد، اعمال تغییر در این مرحله کار بسیار دشوارتری خواهد بود.

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

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

    طراحی محتوای سایت با استفاده از HTML

    برای دسترسی به صفحات وب از روش های متعدد و گوناگونی استفاده می شود اما مهمترین و مرسوم ترین راه دسترسی به این صفحات، استفاده از نرم افزارهای »مرورگر وب» است. اینکه کاربر چگونه و با استفاده از چه نسخه ای از چه مرورگری به صفحات وب ما دسترسی پیدا می کند، در بیشتر مواقع در کنترل ما نیست. به همین دلیل، لازم است که نسخه رایج و حتی الامکان، آخرین نسخه پایدار منتشر شده از مرورگرهای وب رایج را بر روی رایانه مان نصب کنیم تا همزمان با طراحی صفحات وب، این صفحات را در هر یک از این مرورگرها آزمایش کنیم و ایرادهای احتمالی آن ها را برطرف نماییم. در حال حاضر، چهار نرم افزار مرورگری که بیش از همه مورد استفاده بوده و همچنین در منابع و سازمانهای طراحی وب آزمایش قرار گرفته اند، Microsoft Internet Explorer (IE)، Mozilla Firefox، Opera و Safari می باشند. از این چهار نرم افزار، Firefox، Opera و Safari مشترکات بیشتری را نسبت به یکدیگر نشان داده و معمولاً، پا به پای هم در اجرای جدیدترین پیش رفت ها، پیش می روند. اما IE، دارای برخی خصوصیات مخصوص به خود بوده و حتی نسخه های مختلف آن هم با یکدیگر همخوانی کامل ندارند. از آنجا که این نرم افزار، همراه با سیستم عامل ویندوز نصب می شود، کاربران بسیاری در سراسر جهان از آن استفاده می کنند و در بسیاری از موارد نیز، این کاربران، وقت صرف به روز رسانی مرورگر مورد استفاده خود نمی کنند. به همین دلیل، بهتر است صفحاتی را که طراحی می کنیم در نسخه های مختلف این نرم افزار، آزمایش کنیم. نصب بیش از یک نسخه خاص از این نرم افزار بر روی یک سیستم عامل ویندوز امکان پذیر نیست ولی می توانیم در هنگام طراحی صفحات، از دو یا چند رایانه، یا از نرم افزار هایی مانند VM Ware Virtual Workstation که رایانه ای مجازی در سیستم عامل موجود ما ایجاد می کنند، استفاده کنیم.

    علاوه بر نرم افزارهای مرورگر که برای نشان دادن صفحات وب به کار می روند، نیاز به نرم افزاری داریم که بتوانیم در آن کدنویسی کنیم. برای نوشتن کدهای صفحات وب، به نرم افزار خاصی نیاز نداریم و می توانیم با استفاده از نرم افزار Notepad که در سیستم عامل ویندوز موجود است، استفاده کنیم اما برای تسهیل نوشتن، خواندن و پیدا کردن بخش هایی از کد که مورد نظر ما است، می توانیم از نرم افزارهای پیش رفته تری که به نام ویرایشگر (editor) های HTML معروفند، استفاده کنیم. ویژگی بارز این نرم افزارها، همچون Notepad ویندوز، این است که کدها را به صورت متن ساده (plain text) ذخیره می کنند و قالب بندی خاصی را در هنگام ذخیره سازی بر روی کدها، اعمال نمی کنند. نرم افزار مورد توصیه ما، Notepad++ نام دارد که علاوه بر HTML، می توان از آن برای نوشتن کدها در بسیاری از زبانهای دیگر نیز استفاده کرد.

    ساختار کلی صفحات وب

    صفحات وب از عناصر (elements) مختلفی تشکیل شده اند که تگ نام داشته و داخل علامتهای < و > نوشته می شوند. این عناصر ممکن است به صورت جفتی بوده و دارای تگ ابتدایی و انتهایی باشند یا اینکه تنها از یک تگ تشکیل شده باشند. تگ های HTML ممکن است دارای ویژگی هایی (attributes) باشند که در داخل آنها نوشته شده و معمولاً دارای مقادیری (values) هستند که با واسطه علامت = در جلوی آنها و در داخل علامتهای نقل قول، “”، نوشته می شوند. عناصری از HTML که دارای تگ ابتدایی و انتهایی هستند، می توانند، عناصر دیگری را نیز در داخل خود داشته باشند که این عناصر، ممکن است متن یا عناصر دیگری از HTML باشند. برای روشن شدن موضوع، صفحه وبی را به صورت عملی طراحی می کنیم:

    1ـ نرم افزار Notepad را باز کنید. گزینه Save As … از منوی فایل را انتخاب کرده و یا به طور همزمان، کلیدهای Ctrl و S بر روی صفحه کلید خود را فشار دهید. پس از باز شدن کادر محاوره ای Save As و بعد از انتخاب محل مناسبی برای ذخیره فایل خود، در کادر File Name، کلمه «index.htm» یا «index.html» را تایپ کرده و کادر انتخابی Save as type را بر روز گزینه «All Files» قرار دهید. سپس از کادر انتخابی «Encoding»، گزینه «UTF-8» را انتخاب کنید. دقت کنید که اگر صفحه ای که در حال طراحی آن هستید به هر زبانی به غیر از انگلیسی نوشته می شود، باید حتماً این گزینه را درست انتخاب کنید. در غیر این صورت، نوشته ها به صورت نادرست نمایش داده خواهند شد. بعد از انجام مراحل فوق، تکمه «Save» را کلیک کنید.

    2ـ نرم افزار Notepad++ را باز کرده و فایلی را که ذخیره کردید، در آن باز کنید. اکنون می توانیم دستورات HTML را در این فایل تایپ کنیم. اولین چیزی که باید در صفحات وب خود، تایپ نمایید، Doctype نام دارد و مشخص کننده زبان و نسخه زبانی است که برای طراحی صفحات خود از آن استفاده می کنیم. تجزیه و تحلیل این بخش از کدهای HTML با توجه به توضیحات مفصل و فنی آن برای دوره آموزشی ما لازم نیست و کاربرد عملی چندانی ندارد. همین اندازه که بدانیم مرورگرها حالتهای مختلفی برای نشان دادن صفحات وب دارند که حالت مورد نیاز برای نشان دادن صفحه ما را با توجه به این بخش از کد انتخاب می نمایند، برای منظور ما کفایت می کند. نسخه مورد استفاده ما برای طراحی صفحات وب، HTML 4.01 Strict است که برای مشخص کردن آن نوشته زیر را در خط اول فایلمان، تایپ می کنیم:

    <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”

    “http://www.w3.org/TR/html4/strict.dtd”>

    سپس دو تگ ابتدایی و انتهایی <html> و </html> را در فایل خود تایپ می کنیم. در صفحات وب، لحاظ کردن فاصله لازم نیست ولی ما برای آنکه بتوانیم کدهای نوشته شده را آسانتر بخوانیم، هر یک از عناصر ذکر شده را در خط جداگانه ای می نویسیم. کل محتویات صفحه وب ما میان دو تگ ابتدایی و انتهایی <html> و </html> قرار خواهند گرفت. در مرحله بعد، دو تگ ابتدایی و انتهایی <head> و </head> و دوتگ ابتدایی و انتهایی <body> و </body> را در بین تگهای <html> و </html> که قبلاً تایپ کردیم، تایپ می کنیم. اطلاعاتی که میان تگهای <head> و </head> قرار می گیرند، معمولاً و به استثنای یک مورد، در صفحه وب ما دیده نمی شوند و برای اعمال دیگری مانند دادن اطلاعات مناسب به موتورهای جستجوگر و یا نرم افزار مرورگر، نوشتن اطلاعات مربوط به آرایش و قالب بندی صفحات، نوشتن اسکریپتهای طرف سرویس گیرنده (client) و چنین کارهایی مورد استفاده قرار می گیرند اما اطلاعاتی که در میان تگ های <body> و </body> قرار می گیرند، جزو بدنه صفحه ما بوده و معمولاً در صفحه مرورگر دیده می شوند. به عنوان آخرین مرحله برای تکمیل اولین فایل صفحه وبمان، در میان دو تگ <head> و </head> که قبلاً تایپ کردیم، دو تگ <title> و </title> و نوشته ای را میان آنها تایپ می کنیم. این دوتگ، همراه با نوشته میان آنها، عنوان صفحه وب ما را تشکیل می دهند. پس از انجام این مراحل، مرحله آزمایش صفحه طراحی شده در مرورگرها فرا می رسد. این مرحله برای کلیه دروس و پروژه هایی که از این به بعد خواهیم داشت ضروری می باشد. برای آزمایش صفحه وب خود ، هر چهار مرورگری را که ذکر کردیم، باز کرده و با استفاده از منوی فایل آنها، فایل صفحه وبی را که طراحی کردیم، باز می کنیم. از آنجا که صفحه وب ما در حال حاضر، هیچ گونه محتویاتی ندارد، تنها یک صفحه سفید در مرورگر دیده می شود اما نوشته ای که در میان تگ های <title> و</title> تایپ کردیم، در نوار عنوان آبی رنگ بالای پنجره مرورگر دیده می شود. به این ترتیب، اصول و ساختار اصلی صفحات وب ما به پایان می رسد و نحوه افزودن مطالب دیگر به صفحات وب را در درسهای بعدی دنبال می کنیم.

     ارسال در حدود 1786 روز قبل  نویسنده : admin  بدون نظر   | ادامه مطلب »

    برترين مطالب
    Best Posts
    آخرین مطالب ارسالی
    Last Posts