Your address will show here +12 34 56 78
آموزش طراحی وب سایت
سلام خدمت تمامی دوستان و همراهان طرح سوم؛ در قسمت های قبل آموزش طراحی وب سایت با کدنویسی HTML آشنایی کامل پیدا کردید. امیدوارم اندکی تمرین کرده باشید. 😉  در این قسمت کمی بیشتر شما را با مباحث ویژگی المان ها آشنا می کنیم . در قسمت های قبل به خاطر دارید که برای هر تگ یا المان یک یا چند ویژگی می توانستیم تعریف کنیم و این ویژگی ها در قسمت کدهای CSS استفاده می شوند. در این قسمت مهم ترین ویژگی هایی که در قسمت های بعدی آموزش طراحی وب سایت نیاز می شود را معرفی می کنیم .
چند نکته را قبل از شروع یادآوری می کنیم :
– تمامی تگ های HTML می توانند دارای Attribute باشند.
– Attribute ها ویژگی های اضافی به تگ اختصاص می دهند.
– Attribute ها همیشه در تگ استارت قرار می گیرند. در قسمت پایانی تگ هیچ ویژگی درج نمی شود و تگ پایان صرفا برای بستن تگ استفاده می شود.
– Attribute ها همیشه با فرمت مقابل در تگ استارت قرار می گیرند: “name=”value

ویژگی href :
تگ لینک HTML با تگ a معرفی می شود و برای لینک دهی از ویژگی href استفاده می شود و لینک بصورت مقدار در داخل href قرار می گیرد:
<a href=”http://tarhesevom.com”>click here</a>

ویژگی SRC :
تمامی عکس ها در HTML داخل تگ img قرار می گیرند.
برای تعریف نمودن مسیر عکس از ویژگی src استفاده می شود :
<“img src=”img.jpg>

ویژگی width و height :
برای مشخص نمودن سایز عکس از این ویژگی استفاده می شود و می توان برای عکس مقدار ارتفاع و عرض را تعیین نمود:
<“img src=”img_girl.jpg” width=”500″ height=”600>

ویژگی Alt :
این ویژگی یک متن جایگزین به عکس می دهد که در صورتی که عکس به هر دلیلی قابل مشاهده نباشد این متن به جای عکس نمایش داده می شود. همچنین این ویژگی بسیار در سئو سایت موثر می باشد.
<“img src=”img.jpg” alt=”alternative text here>

ویژگی style :
این ویژگی برای المان استایل های مختلفی همانند سایز ، فونت، رنگ و … را ایجاد می کند.
<p style=”color:red”>I am a paragraph</p>
ویژگی lang :
این ویژگی در تگ <html> درج می شود. این ویژگی مشخص کننده زبان صفحه مورد نظر می باشد.
موارد استفاده این ویژگی در اپلیکیشن ها و همچنین موتورهای جستجو می باشد.
<“html lang=”fa-IR>

ویژگی title :
این ویژگی در داخل تگ p استفاده می شود و در قسمتی که این کد درج شود در هنگامی که موس بر روی نوشته قرار گیرد متن مورد نظر بصورت tooltip نمایش داده می شود.
<“p title=”I’m a tooltip>

نکاتی که در پایان باید حتما به آنها توجه کنید : 
– حتما تاکید میکنیم که از ویژگی ها در کدنویسی خود با حروف کوچک استفاده نمایید.
– حتما در تمامی ویژگی علامت “” را قرار دهید و بدون علامت ویژگی تعریف نکنید.
– ممکن است این سوال بوجود آید که اگر میخواستید داخل ویژگی همانند title عبارتی را درج نمایید که خود دارای “” باشد باید چکار کرد. در این حالت می توانید عبارت ویژگی را داخل ” قرار دهید و سپس متنی را که دارای علامت “” هست را داخل آن درج نمایید.
<‘p title=’Tarhe “Design” Sevom>
– همچنین می توانید برعکس این حالت را هم انجام دهید که علامت “” برای ویژگی تعریف شود و در داخل آن از ” استفاده نمایید.

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

آموزش طراحی وب سایت
سلام خدمت تمامی دوستان و همراهان طرح سوم؛ تا قسمت های قبل آموزش طراحی وب سایت آشنایی با دامنه و هاست و نرم افزارهای کدنویسی رو یاد گرفتید. در این قسمت وارد کدنویسی طراحی وب سایت می شویم. خب در ابتدا باید این مطلب را بدانید که طراحی وب سایت و کدنویسی آن چند بخش دارد که در این جا قسمت هایی رو معرفی می کنیم بهتون و در کنار شما هستیم تا کاملا یک وب سایت داینامیک را طراحی کنید . قسمت اولی که باید یاد بگیرید کد های 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 کدهای سورس صفحه وب را مشاهده کنید. همین ! در قسمت های بعد به معرفی این تگ ها بصورت کامل می پردازیم . اگر سوالی داشتید در قسمت نظرات بپرسید تا در اسرع وقت کارشناسان ما جواب را ارسال کنند. 
0