با سلام خدمت همه علاقه مندان به یادگیری. با توجه به استقبال شما عزیزان از این مقالات سعی می کنم با دقت و سرعت بیشتری به نوشتن ادامه دهم . بازهم اعلام می کنم که ترجمه خط به خط کتاب ارائه نمی شود و چیزی که به عنوان برداشت شخصی من یک طراح وب سایت ( بهزاد علی بیگی ) از کتاب می باشد در قالب مقالات آموزشی برای شما بیان خواهد شد و مسلما با بازخوردی که از خوانندگان خواهم گرفت کیفیت کار و هم چنین وسعت کار را افزایش خواهم داد. و اما ادامه آموزش. فصل دوم Your First Web Pages در این فصل شما می توانید اولین صفحه وب خودتان را خلق نمایید و با XHTM آشنا خواهید شد و مرحله به مرحله کارهای خود را در مرورگر تست میکنید . بگذارید دقیق شویم ! طراحی وب سایتی که شما می بینید به سه لایه اصلی تقسیم می شود: یادگیری این سه لایه شما را به یک طراح تبدیل میکند! لایه اول لایه محتوی است که مانند شاسی ماشین است و شامل تگهای متفاوتی می باشد .لایه دوم لایه نمایش است که به عناصر HTML شکل و ظاهر می دهد و لایه سوم لایه رفتار است که حرکت و پویایی صفحات را شامل می شود. چیزی که در این کتاب آموزش داده می شود مربوط به 2 لایه HTML و CSS است. دیدن کد برنامه می تواند به یادگیری شما سرعت ببخشد البته باید در انتخاب وب سایت خود دقت نمایید تا اشتباه آنها مسیر یادگیری شما را تغییر ندهد. روش کار بدین صورت است که ماوس را درروی صفحه جایی غیر از تصاویر ببرید و کلیک راست کنید و view page source یا view source را بزنید. عناصر اصلی یک صفحهHTML : یک DocType یک tag یک tag یک حالا می خواهیم با تک تک این عناصر آشنا شویم : داک تایپ DocType : Document Type Definition اولین آیتم صفحه است بدون فاصله. این یک قانون است. همانطوری که فایل word 2007 در نمایش در 2000 دچار مشکل می شود HTML ها با داک تایپ های متفاوت هم نمایش متفاوت در مرورگرها خواهند داشت. در واقع این داک تایپ است که به مرورگر می گوید این سند از چه نوعی است و باید به چه ترتیب Render شود . نحوه رندر شدن و تفاوت های آنها باید در سطح حرفه ای تری مطرح شود. داک تایپ ها هم در طول زمان به وجود می آیند یعنی مانند word نوع های جدیدی روی قبلی ها عرضه می شوند مانند HTML5 که به تازگی مطرح شده است. برای دیدن داک تایپ های موجود به این آدرس برید http://reference.sitepoint.com/html/doctypes http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> به کدهای داک تایپ دقت نمایید: ما در این خط می گوییم نوع سند چیست و آدرسی که باید به این نوع سند در وب سایت کنسرسیوم جهانی وب World Wide Web Consortium یا W3C ، اشاره کند کدام است. در حال حاضر دو نوع داکتایپ هستند که استفاده بیشتری دارند Transitional و Strict همانطوری که گفتم فعلا دنبال تفاوت این داک تایپ ها نباشید به آن هم خواهیم رسید . تاکید میکنم : اولین آیتم صفحه است بدون فاصله. این یک قانون است. عناصر HTML : قبل از این که عناصر HTML را شرح دهم باید با مفهوم تگ (tag) آشناشوید. تگ یعنی اسمی که میان این دو <> قرار گیرد و نام تگ همان متنی است که بین این دو <> قرار می گیرد تگ HTML تگ HEAD تگ ها می توانند شامل چند attribute (ویژگی) باشند: http://www.w3.org/1999/xhtml ” dir=”rtl” > dir یک نام attribute است و rtl ، value (مقدار) آن است که بین ” ” قرار گرفته است. تگ ها به دودسته container و empty تقسیم می شوند.تگ های container شامل یک تگ بازشونده و یک تگ بسته شونده هستند به مثال بالا دقت نمایید HTML باز شده و بسته شده است. تگهای empty متفاوت هستند مانند مثال زیر
تگ های empty را می توان به صورت container استفاده کرد ولی در داک تایپ های xhtml توصیه شده است که تگ های empty را به همان شکل empty بنویسیم در استفاده از تگ ها باید دانید که از چه نوعی هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty بنویسیم دچار error می شویم. نگران نباشید کم کم همه آنها را خواهید آموخت . بیایید همین الان تو اینترنت عبارت روبرو را جستجو کنیم : empty tag in html بسیار عالی شما هم این نتایج را پیدا کردید : •
•

---

• • • • • • • • • این را گفتم که هیچ وقت دنیای وب و جستجو را فراموش نکنید. غیر از داک تایپ ها تمامی عناصر صفحه داخل تگ HTML است که شامل 2 بخش می شود head و body عنصر HAED این یک تگ container است و در بالای سند قبل از body قرار می گیرد و شامل اطلاعاتی در باره صفحه است مانند title, meta, css و ….. عنصر title : یک تگ container است که متن وسط آن در عنوان (Title) بالای صفحه قرار میگیرد : موارد استفاده دیگر: • این تایتل در زمان مینیمایز کردن پنجره در taskbar windows قابل مشاهده است • در زمان بوکمارک کردن صفحه با این عنوان در لیست ما ذخیره می شود • برای معرفی آن صفحه است • برای موتورهای جستجو هم حائز اهمیت می باشد چیزی که در بهینه سازی وب سایت وب اسکالا هم استفاده شده است عنصر meta : متا تگ یک تگ empty است و برای دلایل متفاوتی استفاده می شوند اطلاعات اضافی که در مرورگر نمایش پیدا نمی کند . به طور مثال برای نام نویسنده ویا حق کپی رایت و یا نوع کاراکتر و …. Css و javascript هم در head قرار میگیرند که بنا به نیاز استفاده میشوند البته برای جاوااسکریپت میتوان یک تفاوتهایی در طراحی های حرفه ای قائل شد. به طور مثال سورسی که در طراحی سایت فوق استفاده شده است را مشاهده نمایید. جاوا اسکریپت در پایین صفحه درج شده است. عناصر body : هرآنچه در body قرار می گیرد را می توان در خروجی دید: تیترها، پاراگراف ها, تصاویر و ……. در قسمت بعدی به طور عملی با هم یک وب سایت می سازیم! ادامه دارد اگر مورد استقبال قرار گیرد!

با سلام خدمت همه علاقه مندان به یادگیری طراحی سایت. با قسمت سوم آموزش طراحی وب سایت از پایه در خدمت شما هستیم. در این قسمت شما نحوه سازمان دادن وب سایت و ساخت اولین صفحه وب خودتان را تجربه خواهید کرد . امیدوارم همانند مقاله های گذشته نظر خودتان را برای ما ارسال نمایید. ساخت اولین صفحه وب سایت شما در هر جای کامپیوتر که دوست دارید فلدری به نام my-first-webpage بسازید. textEditor خودتان را که در جلسات قبل توضیح دادیم باز کنید کد زیر را در آن کپی کنید http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> http://www.w3.org/1999/xhtml”>

The Most Basic Web Page in the World

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.

This is another paragraph, by the way. Just to show how it works.

از textEditor گزینه file>save as را بزنید مسیر فلدر قبل را بدهید تا در آنجا ذخیره شود. نام فایل را انتخاب نمایید البته با پسوند html مانند my-first-webpage.html از منوی کشویی save as type گزینه all files را انتخاب نمایید از منوی کشویی Encoding گزینه UTF-8 را انتخاب نمایید. و حالا دکمه save را بزنید. حالا در فلدر مورد نظر فایلتان را با مرورگر باز نمایید . تبریک شما اولین صفحه وب خودتان را ساختید! اهمیت UTF-8 این کاراکتر ست (Character Set) اجازه می دهد زبان های دیگر هم بتوانند به درستی صفحه شما را ببینند. فرض کنید یک کاربر کره ای که زبان انگلیسی ندارد بخواهد صفحه شما را ببیند ، این کاراکتر ست است که اجازه میدهد شما با مشکلی مواجه نشوید.

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