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

آموزش طراحی وب سایت | جلسه چهارم | کدنویسی HTML

سلام خدمت تمامی دوستان و همراهان طرح سوم؛ تا قسمت های قبل آموزش طراحی وب سایت آشنایی با دامنه و هاست و نرم افزارهای کدنویسی رو یاد گرفتید. در این قسمت وارد کدنویسی طراحی وب سایت می شویم. خب در ابتدا باید این مطلب را بدانید که طراحی وب سایت و کدنویسی آن چند بخش دارد که در این جا قسمت هایی رو معرفی می کنیم بهتون و در کنار شما هستیم تا کاملا یک وب سایت داینامیک را طراحی کنید . قسمت اولی که باید یاد بگیرید کد های HTML است . HTML خلاصه شده Hypertext Markup Language هست . کلیه المان هایی که در این صفجه یا در هر صفحه وبی که مشاهده می کنید تماما کدهای HTML هستند . کدهای HTML همانند ستون های خانه و دیوار های آن هستند که ساختار اصلی وب سایت را تشکیل می دهند . قسمت بعدی کدنویسی ، دستورات CSS که خلاصه شده Cascading Style Sheets هستند که این دستورات اگر بخواهیم همانند سازی کنیم مثل طراحی داخلی و چیدمان وسایل خانه می باشند. طرز قرار گیری متن ها، عرض ها و نحوه قرار گیری منو ها ، رنگ ها و … تمام ساختار گرافیکی که مشاهده می کنید تماما در کدهای CSS تعریف می شوند . در کنار این کد ها دستورات Javascript نیز به کار می آیند تا امکانات تصویری و بعضا کدهایی برای قسمت های مختلف وب سایت در آنها درج کنید. عکس زیر خلاصه ای از این مطلب را نمایش می دهد :
design-web-06.gif
ابتدا به آموزش HTML و تگ های آن می پردازیم و سپس به آموزش کدنویسی CSS . چرا که شروع طراحی با کدهای HTML هستند و برای لباس پوشاندن به این کدها سراغ کدهای CSS می رویم . بعداز یادگیری این کدها سراغ کدهای داینامیک سازی می رویم که زبان برنامه نویسی PHP از این قسمت استارت می خورد . تمام قسمت هایی که می بینید توسط کدهای PHP داینامیک سازی شده اند و قابلیت بروزرسانی ، حذف و ایجاد مطالب و محتواها از داخل Backend سایت مدیریت می شوند. خب برای اینکه کمی با کدهای وب سایت آشنا بشید داخل همین صفحه ای که هستید دکمه های ctrl+U را فشار دهید . صفحه ای که باز می شود شامل تمامی کدهای HTML هست که در این صفحه ایجاد شده اند . در کدهای HTML ساختار خاصی وجود دارد که طبق این ساختار دستورات خوانده می شوند و برای کاربر به نمایش گذاشته می شوند . این ساختار همانند بدن انسان می باشد. یعنی کدهای HTML دارای یک مجموعه تگ بنام HTML هستند که داخل این تگ دو زیر مجموعه تگ HEAD و BODY وجود دارد . می توانید در صفحاتی که کدهای آن را باز می کنید این تگ ها را پیدا کنید. خب اصلا تگ چیست !؟ تگ يعني اسمي كه ميان اين دو <> قرار گيرد و نام تگ همان متني است كه بين اين دو <> قرار مي گيرد. بطور مثال تگ HTML به این صورت نوشته می شود :اگر اندکی دقت کنید تمامی تگ ها تکرار می شوند و علامت / در کنار آنها در پایین تر قرار می گیرد. یعنی تمامی تگ ها با علامت <> شروع می شوند و با علامت </> بسته می شوند. می توانید در پایین صفحه بروید و پایان تگ را مشاهده کنید. خب تگ ها فقط به این چند نمونه تگ HTML ، BODY و HEAD ختم نمیشه. خیلی تگ های زیادی در طراحی وب سایت هست که یادگیری آنها بسیار واجب هست. تگ های معروف شامل تگ های عنوان به نام های h1,h2,h3,h4,h5,h6 هستند که تمامی این ها تگ های عنوان متن ها هستند. متن ها عموما در داخل تگ <p> قرار می گیرند . تگ های <div> نیر برای تعریف قسمت های مختلف وب سایت که تمام در داخل آن مجموعه تعریف می شوند کاربرد دارد. در آینده به معرفی تمام این تگ ها می پردازیم.
خب برای این جلسه فعلا فقط کافی است چندین وب سایت را باز کنید و با فشار دادن دکمه های CTRL+U کدهای سورس صفحه وب را مشاهده کنید. همین ! در قسمت های بعد به معرفی این تگ ها بصورت کامل می پردازیم . اگر سوالی داشتید در قسمت نظرات بپرسید تا در اسرع وقت کارشناسان ما جواب را ارسال کنند. 

نویسنده


Avatar

مهرداد کشمیری

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