آموزش طراحی وب با HTML
اسلاید 1: موضوع: آموزش طراحي وب با HTML زير نظر استاد: سر كار خانم قندريز تهيه كنندگان: مهران ملك زاده،سعيد تقي پور،حسين سجاديان،مجيد حاتم پور،مهدي كفاش زاده
اسلاید 2:
اسلاید 3: فهرست مطالب: 1-مقدمه 2-معرفي زبانHTML 3-چگونگي ابتدايي كار با HTML 4-ابزار هاي اوليه در ويندوز 5-موقعيت دهي مطلق 6-تگ های HTML 7-فيلم آموزشي HTML 8-نتيجه گيري
اسلاید 4: امروز بخش جدیدی را برای شما عزیزان در نظر گرفته ایم. این بخش شامل آموزش مرحله به مرحله طراحی وب سایت می باشد که سعی می شود مقاله ای در این زمینه به شما عزیزان ارائه کنیم. در اولین قسمت از این سری آموزشها با ما باشیدمقدمه:چه کسانی باید این مطالب را بخوانند؟این مطالب برای کسانی مفید است که از طراحی سايت اطلاعي ندارند و می خواهند تازه به جمع طراحان سایت ملحق شوند پس مسلما از ساده ترین نکات آغاز می شود HTML راه را برای ساخت یک وب سایت استاندارد به شما نشان می دهد. ذکر در هر مقاله حداکثر یک فصل از موضوع را آموزش دهیم و مسلما با بازخوردی که از خوانندگان خواهم گرفت کیفیت کار و هم چنین وسعت کار را افزایش خواهم داد
اسلاید 5: معرفی زبان HTML : عبارت HTML مخفف(Hyper Text Markup Language)است . Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود در يک صحفه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول و ... را قرار داد ، که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند
اسلاید 6: چگونگي ابتدايي كار با htmlاین قسمت در واقع آماده کردن کامپیوتر برای کار، قبل از زدن اولین طرح شماست. قبل از این که وب سایت خودتان را بسازید، می بایست کامپیوتر خود را برای کار آماده نمایید که شامل برنامه هایی است که یا در سیستم شما موجود می باشد و یا این که می بایست آن ها را نصب نمایید. برنامه های زیادی در بازار موجود می باشد ولی در ابتدا از برنامه های رایگان و قابل دسترس استفاده می کنیم. وسایل و برنامه های اصلی که شما نیاز دارید: الف)وسیلۀ ابتدایی برای ویرایش فایل های متنی که در واقع صفحه وب شما را شامل میشود ب)یک مرورگر (web browser) برای دیدن صفحات وب در آن ج)فرستادن صفحه وب سایت به محیط اینترنت با استفاده از ftp client چون اکثر کاربران ما درایران از ویندوز استفاده می کنند پس ابزارهای موجود در ویندوز را بررسی خواهیم کرد
اسلاید 7: ابزارهای اولیه در ویندوز: الفedit-کردن متن : برای editکردن متن در ویندوز می توانید از Notepad استفاده نمایید. این متن، همان صفحۀ وب است . برای دسترسی به این برنامه در محیط ویندوز مسیر زیر را طی کنید:Start > All Programs > Accessories > Notepad ب- دیدن خروجی فایل : برای دیدن کار خروجی می بایست از مرورگر و یا browser استفاده کنیم. مرورگرهای متفاوتی وجود دارد که بحث آنها بسیار مفصل است ولی در محیط ویندوز مرورگر Internet Explorer در دسترس است. شما می توانید آن را در دسکتاپ خود و یا Quick Launch ویا فولدر برنامه ها و یا در منوی start پیدا کنید. ج- برای فرستادن صفحه به محیط وب از دستور ftp استفاده خواهیم کرد که در ادامه به آن اشاره میکنم.
اسلاید 8: ابزارهای دیگر: برای editکردن صفحات خود می توانید از برنامهNoteTabاستفاده کرد .مزیت استفاده از آن اینست که می توانید تب های مختلفی را برای صفحات مختلف باز کنید و بعد از بستن هم در حافظه ش می ماند و برای دفعه بعد هم باز می ماند. همچنین مرورگرهای گوناگونی وجود دارد که استفاده از آن ها را در کنار Internet Explorer توصیه می کنم. اما در اینجا از یکی از بهترین آنها را نام می برم : firefox
اسلاید 9: مرحله آخر - درست کردن مکانی است برای فایل های ساخته شده : بعد از ساختن فایل های خود مدیریت آنها بسیار مهم است و این که در کجا فایل اصلی و در کجا تصاویر قرار گیرد و به همین ترتیب تمام عناصر وب سایت. شما باید یک فولدر بسازید و تمام عناصر وب سایت خود را در آن قرار دهید. فرض کنید در دسکتاپ خود می خواهید یک وب سایت بسازید. Right click > new > folder سپس نام وب سایت را انتخاب نمایید .حالا یک فولدر دارید که فایل اصلی به همراه تصاویر وcss ,html ,..... را داخل آن قرار می دهید.
اسلاید 10: ابتدا برنامه را به صورت زير در ند پت مي نويسيم و بعد مراحل ذخيره سازي آن به صورت زير است مسیر فلدر قبل را بدهید تا در آنجا ذخیره شود. نام فایل را انتخاب نمایید البته با پسوند html مانند my-first-webpage.html از منوی كشویی save as type گزینه all files را انتخاب نمایید از منوی كشویی Encoding گزینه UTF-8 را انتخاب نمایید. و حالا دكمه save را بزنید. حالا در فلدر مورد نظر فایلتان را با مرورگر باز نمایید . تبریك شما اولین صفحه وب خودتان را ساختید!
اسلاید 11: موقعیت دهی مطلق( absolute) : شاید به جرات بتوان گفت که راحت ترین روش برای موقعیت دهی به عناصر استفاده از موقعیت دهی مطلق برای عناصر است. در هنگام استفاده از موقعیت دهی مطلق می بایست موقعیت آن عنصر را از بالا و چپ صفحه نیز معین کنیم. تصور کنید از یک مغازه جواهر فروشی می خواهید خرید کنید و آدرس یک قطعه طلا را می خواهید به شخص فروشنده بدهید، می گویید می توانم آن ساعتی را که در ستون پنجم است و از بالا در ردیف سوم قرار دارد را ببینم؟ استفاده کردن از موقعیت دهی مطلق به سادگی انجام می شود تنها کافیست که جهت های مد نظر خود را (موقعیت آن عنصر از بالا و چپ) در کنار موقعیت مطلق داده شده به عنصر در فایلhtmlآن اضافه نمایید. در مثال زیر، ما موقعیت های top و left را برای یک div با عرض 90pxدر نظر گرفته ایم تا هم از بالا و هم از سمت چپ پنجره مرورگرمان به میزان px200 فاصله ایجاد کرده ایم.
اسلاید 12: مفهوم تگ های HTML : تگ های HTML برای نشانه گذاری محتويات صفحات به کار می روند و باعث می شوند که مرورگر بتواند تشخيص دهد هر بخش چه نوع عنصری است. هر تگ HTML ، يک بخش ابتدايی و يک بخش انتهايی دارد که هم نام بوده و به صورت استاندارد طبق شکل کلی زير به کار می روند :مثال< تگ انتها / > محتويات < تگ ابتدا > < label > ..... < /label > تگ ابتدايی مشخص کننده آغاز تگ و تگ پايانی ، مشخص کننده انتهای تگ است . هر تگ HTML ، بايد حتما در ادامه توسط تگ پايانی بسته شود . کليه نوشته ها و تگ های ديگری که در بين تگ ابتدا و پايان نوشته می شوند ، محتويات تگ را تشکيل می دهند .
اسلاید 13: تیترها و سلسله مراتب آن (H)تیترها عناصر بلاك و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1 تا h6 وجود دارند. از h1 برای مهم ترین تیتر از h2 برای تیتر كم ارزش تر و از h3 برای تیتر كم ارزش تر از h2 و به همین ترتیب تا h6 پاراگراف (p)یك تگ بلاك و بسته شونده (container) است و برای یك بلوك متنی استفاده می شود این بدان معنی است كه متن های خوتان را باید داخل این تگ قرار دهید.لیست (list)فرض كنید می خواهید لیست وب سایت های طراحی شده خودتان را نمایش دهید ، به ليست زير توجه نماييد Ol-order list ابرای لیست های ترتیبی Ul-unorder listبرای لیستهای غیر ترتیبی به اين مثال توجه نمايد
اسلاید 14: <!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> <h1>Lists - an introduction </h1> <p>Heres 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 heres 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>و حالا خروجی كار رو در مرورگر ببینید تا تفاوت های دو نوع لیست را ببینید
اسلاید 15: <meta http-equiv=Content-Type content=text/html; charset=utf-8/> </head> <body> <h1>BubbleUnder.com</h1> <p>Diving club for the south-west UK - lets 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! Youve 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 were not diving, we often meet up in a local pub to talk about our reent 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> حالا خروجی را ببینیم :
اسلاید 16:
اسلاید 17: ولی اینجا در قسمت 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 هم متنی است که عکس را توصیف می کند و در مرورگرهای متنی و یا زمانی که مرورگر تصاویر را نشان نمیدهد به جای نمایش عکس این متن نمایش می یابد و اما فایده دیگر اهمیتش برای موتورهای جستجو است.
اسلاید 18: لینک کردن صفحات به هم: صفحه اول یا همان index را باز کنید و سعی کنید از آن به صفحه contact بروید! بله این امکان در حال حاضر وجود ندارد و برای حرکت بین صفحات مختلف شما می بایست از link و یا anchor استفاده نمایید.<a href=filename.html>Link text here</a> hrefیک attribute است و بیان کننده آدرسی است که قرار است به آنجا لینک شود filename.htmlنام صفحه ایست که قرار است به آنجا لینک شود Link text hereچیزی که در صفحه html دیده می شود و نام لینک مورد نظر است نكته: این را هرگز فراموش نکنید که از کلمات با معنی برای لینک دهی استفاده نمایید و از کلماتی مانند اینجا را کلیک نمایید پرهیز کن
اسلاید 19: تگ های Quotesبه 3 بخش زیر تقسیم می شود :. <blockqoute>< /blockqoute> 2. <q>< /q> 3. <cite>< /cite>1 q : این تگ برای نقل و قول برای یک یا دو کلمه استفاده می شود..<p> Im said <q>font</q>but my friend said <q> font face </q> </p> cite : این تگ برای نام نویسنده و یا نویسنده کامنت استفاده می شود <p> but then <cite> ali</cite>said <q> no think these font work betfer </q> <p>
اسلاید 20: blockquote : این تگ براي اشاره به یک مرجع خاص معمولا برای یک جمله استفاده می شود. تگ های strong و em : این تگ برای برجسته سازی و اهمیت کلمات استفاده می شوند. و اما در ظاهر ، تگ strong کلمه را bold و تگem کلمه را italic می کند. این نکته را اضافه کنم که این تگ ها برای موتورهای جستجو از اهمیت خاصی برخوردار است . <p> this is a <strong>bold text</strong> this is a <em>italic text</em> </p>
اسلاید 21: خط فاصله بین متون p : فرض کنید می خواهیم در یک پاراگراف به خط جدیدی برویم . برای این کار از تگ <br />استفاده می کنیم. این تگ ، یک تگ empty است و در ساختار xhtml به صورت <br /> نوشته می شود . نکته مهم : از br اضافی پرهیز کنید <p> this is a test <br /> this line show after break </p> تعریف تگ های خاص: <abbr> برای توصیف یک عبارت اختصار به کار می رود<p> The<abbr titile=search engine optimization>seo</abbr> is good for your site <p> <acronym> برای توصیف نامها ی محاوره ای اختصار <p> Can I get this <acronym title=as soon as possible>AsAp </acronym> <p>
اسلاید 22: جدول هاجداول بوسیله برچسب<<tableمعرفی می شوند.هر جدول به سطرها (بوسیله برچسب <<trو هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب <td>حروف td بیانگر داده جدولی ((table dataهستند که حاوی سلول داده است.یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد و برخي از صفات عبارت استبرچسب ها توضیحات <table> یک جدول معرفی می کند <th> سرتیتر جدول معرفی می کند <tr> یک سطر جدول معرفی می کند <td> یک سلول جدول معرفی می کند <caption> عنوان جدول معرفی می کند <colgroup> یک گروه از ستون ها معرفی می کند <col> یک مقدار موجودیت برای یک یا چند ستون معرفی می کند <thead> سر یک جدول را معرفی می کند <tbody> بدنه یک جدول را معرفی می کند <tfoot> پاورقی جدول را معرفی می کند
اسلاید 23: <address>: برای نوشتن اطلاعات تماس<address> Behzad alibeigi <br/> <a href =mailto:.. >email</a><br/> Phone :... </address> <dfn> برای معنای کلمات استفاده می شود و یا توصیف یک کلمه و یا مثلا جایی که می خواهیم اطلاعات بیشتری در اختیار کاربر قرار دهیم .<p> The <dfn title=microsaft web browser>Internet explorer </dfn> is the most popular browser used undermater. <p>
اسلاید 24: نحوه ساخت یک External CSS: editorخود را باز نمایید و متنcss خود را در آن بنویسید/* CSS for Bubble Under site */ p { font-weight: bold; color: blue; } سپس فایل را با نام style1.css ذخیره کنید همان طوری که فایل html را ذخیره نمودید . حالا می بایست فایل ساخته شده را به صفحه متصل نمایید. نکته : فواید استفاده از کامنت درcss همانند html می باشد و برای تفکیک کد های css در پروژه های بزرگ و گروهی استفاده می شود. برای این منظور از عبارت زیر استفاده می کنیم :/* comment hear */
اسلاید 25: Color همانطور که قبلا هم دیدید برای رنگ دادن به عناصر استفاده می شود. Background-color به دو صورت مقدار دهی می شود یا نام رنگ (blue, red, green,..) یا با اعداد دسیمال، مانند: #3acbef Font-family با این خصیصه هر فونتی را که بخواهید می توانید به متون سایت خود اعمال کنید. Font-size مقدار دهی آن می تواند مثل یکی از گزینه های زیر باشد: 1- نام های آماده برای سایز دادن به فونت ؛ • XX-small • X-small • Small • Medium • Large • X-large • Xx-large 2- فونت دهی به صورت نسبی؛ • به صورت درصدی : %120 • به صورت 1.2em : em
اسلاید 26: 3- فونت دهی به صورت مطلق؛ • به صورت pixel ، مانند: px12 • به صورت point، مانند: pt12 Font-weight ضخامت فونت است که به دو صورت normal یا bold مقدار دهی می شود. Font-style سبک فونت است که به دو صورت normal یا italicمقدار دهی می شود. Text-decoration مدل دهی به متن به صورت: none, underline, overline و یا line-through ضخامت بردر: مقدار ضخامت بردر را می توان با واحد هایpx ، pt و یاemبه کار برد. به صورت پیش فرض هم می توانید از کلمات کلیدی خود htmlبرای ضخامت دادن به بردر استفاده کنید که شامل سه سایزو باریک (thin) ، متوسط (medium) و ضخیم (thick) است. استایل بردر:
اسلاید 27: فيلم آموزشي HTML:قسمت دهمقسمت هشتمقسمت نهمقسمت دومقسمت پنجمقسمت ششمقسمت يازدهمقسمت چهاردهمقسمت سيزدهمقسمت دوازدهمقسمت سومقسمت چهارمقسمت اولقسمت هفتم
اسلاید 28: نتيجه گيري: نوشتن صفحات وب جهت طراحي و همچنين استفاده از تگ ها و دستورالعمل ها در مطابقت با استانداردها زمان توسعه را کوتاه تر و نگه داری صفحات را آسانتر میکند. عیب یابی و رفع اشکال ساده تر میشود زیرا کد از یک استاندارد پیروی میکند. شما نباید دیگر درباره کد نویسی و نگه داری از چندین نسخه از کد که فرض شده ظاهر یکسانی نمایش میدهند
اسلاید 29: منابع: http://www.writeage.com/designing_web_site_from_scratch.htmlhttp://www.yekweb.comhttp://www.a4neet.ir
اسلاید 30: به اميد موفقتي روز افزونپايانباتشكر
نقد و بررسی ها
هیچ نظری برای این پاورپوینت نوشته نشده است.