فتوشاپ یکی از نرم افزارهای گرافیکی است که اساس کار آن بر پایه ی Bitmap می باشد. نرم افزار فتوشاپ متعلق به شرکت Adobe بوده و برای ویرایش تصاویر ، طراحی موارد گرافیکی چاپی یا غیر چاپی و ... مورد استفاده ی کاربران قرار می گیردضمن اینکه این نرم افزار با چاپگرها و دستگاههای خروجی فیلم و زینک بصورت استاندارد هماهنگی دارد . برای مطالعه ی این دوره ی آموزشی نیاز است کاربران محترم آشنایی با سیستم عامل ویندوز داشته باشند .
ضمنا سیستم شما باید دارای مشخصات سخت افزاری ذیل باشد :
- حداقل سیستم مورد نیاز پنتیوم 233 -16 مگابایتRam - حدود 600 مگا بایت فضای آزاد - کارت گرافیکی 64 گیگا بایت
حالتها و مدهاي رنگ :
مدلهاي رنگ به صورت زير مي باشد : مدل RGB : مدل رنگ Red, Green , Blue -RGB كه در مانيتور ها و تلويزيون براي نمايش رنگها مورد استفاده قرار مي گيرد. مقادير هر يك از رنگهاي اصلي RGB با عددي بين (255-0) نشان داده می شود . براي ايجاد رنگ سفيد خالص مقادير رنگهاي اصلي RGB معادل 255 مي باشد و براي ایجاد رنگ سياه خالص مقادير رنگ هاي اصلي RGB معادل صفر مي شود .
مدل CMYK : مدل رنگ CMYK معمولا براي چاپ مورد استفاده قرار مي گيرد . در اين مدل رنگها بر حسب درصد بيان مي شوند . (Cyan - Magenta - Yellow - Black) اين چهاررنگ بعنوان جوهر چاپ مورد استفاده قرار مي گيرند. محدوده رنگي هر يك از ، (0 تا 100 ) تعریف می شود .
مدل Grayscale : در اين مدل تصاوير به صورت سياه و سفيد مي باشند و در پنجره كانالهاي فقط يك كانال Black مشاهده مي شود . در اين حالت طيف رنگي از سفيد تا سياه مي باشد (سفيد - خاكستري - سياه ) و محدودة رنگي آن صفر تا 255 مي باشد بنابراين بهتر است كه براي كارهاي تك رنگ مديا حالت رنگي را روي Grayscale تنظيم نماييم .
مدل Bitmap : Bitmap كوچكترين حجم اطلاعات براي هر پيكسل را به همراه دارد . اغلب ابزارهاي برنامه فتوشاپ در حالت رنگ Bitmap قابل دسترسي نيستند . براي كار با ابزارها بهتر است ، تصاوير Bitmap را به انواع ديگر حالت رنگ تبديل كنيد . يك تصوير طرح بيتي (Bitmap) ، فقط شامل پيكسلهاي سياه و سفيد است . تصويري كه داراي چنين حالت رنگي است از درجه وضوح كمتري برخوردار است . به طور كلي در اين حالت رنگ نمي توان از رنگهاي ديگر و نيز لايه ها و فيلتر ها استفاده كرد . همچنين هيچ گونه تغييري به جز چرخش 60و 180 درجه و معكوس كردن در جهت هاي افقي و عمودي روي تصوير اعمال نمي شود . (براي تبديل يك فايل رنگي به حالتBitmap،ابتدا بايد تصوير را به حالت Grayscale تبديل كنيد )
شروع كار : برنامه فتوشاپ محصول شركت Adobe مي باشد . هنگام نصب این نرم افزار بر روی سیستم ، لیست این برنامه ها هم نظیر دیگر برنامه ها در منوي Start مي نشيند .
جهت ورود به اين برنامه مسير زير را طي مي كنيم :
Start > programs> adobe> photo shop 6 در نظر داشته باشيد كه فايل اجرايي اين برنامه آيكوني شبيه يك چشم دارد . پس از كليك بر روي فايل اجرايي ، برنامه فتو شاپ باز مي شود وقتي براي اولين بار ، فتو شاپ را باز مي كنيد ، جعبه ابزاري را در قسمت سمت چپ صفحه مشاهده ميكنيد كه تمامي ابزارهاي مربوط به طراحي در اين Box موجود می باشد . در سمت راست نيز چهار پنجره قرار دارد . عنوان منوها در نوار منو قرار گرفته است . زمينه اين پنجره ميزكار (Desktop) محيط فتوشاپ مي باشد . فتوشاپ بر خلاف ساير برنامه هاي گرافيكي به صورت خودكار صفحه جديدي را برايتان باز نمي كند .
براي باز كردن فايل جديد (بوم نقاشي) :
گزينة New را از منوي File انتخاب مي كنيم ، با انتخاب اين گزينه كادر New ظاهر مي شود .
Name : نام فايل را در اين قسمت تايپ مي كنيم .
Width : پهناي فايل را در اين قسمت وارد مي كنيم و در كادر مقابل آن واحد را تعيين مي كنيم
Height : ارتفاع فايل را در اين قسمت وارد مي كنيم و در كادر مقابل آن واحد را تعيين مي كنيم . Resolution : اين قسمت مربوط به تعداد نقاط جوهر بر اينچ است. اين پارامتر به علت تعیین کیفیت تصویر از اهمیت زیادی برخوردار است. هرچه تفكيك پذيري بالاتر باشد ، كيفيت تصوير نيز بهتر مي باشد . اما حافظه بيشتري را نيز مورد استفاده قرار مي دهد . تفكيك پذيري مانيتور 72 نقطه بر اينچ و براي چاپ 300 نقطه بر اينچ (DPI) مي باشد .
( به طور كلي كيفيت و وضوح تصوير بستگي به Resulation دارد .)
Mode : در اين قسمت مديا حالت رنگ را مشخص مي كنيم . طراحي براي چاپ با مد CMYK ، براي مانيتور RGB ، و... Contents : زمينة بوم نقاشي را مشخص مي كند ، که شامل سه حالت : White :سفيد Background color : به رنگ B.G Transparent : بي رنگ ، می باشد .
جعبه ابزار (Tool Box) مانند جعبه رنگ هنرمند نقاش است . يعني ابزارهاي مورد نياز براي ترسيم ، رنگ آميزي ، پاك كردن و ساير عملكردهاي مربوط به تصوير را در خود جاي داده است. :: موضوعات مرتبط: آموزش فتوشاپ , , :: بازدید از این مطلب : 328
دانلود Rational Rose Enterprise نرم افزار قدرتمند برنامه نویسی با زبان UML
Rational Rose Enterprise ابزار قدرتمند مدلسازی نرم افزاری از طریق زبان مدلسازی UML می باشد. نرم افزار رشنال رز سرعت عمل و دقت را بالا می برد, با این برنامه براحتی می توانید به مدلسازی و ویرایش نرم افزار ساخته شده توسط C++، ANSI C++، Visual C++، CORBA، Java، Visual Basic بپردازید. همچنین قابلیت مدسازی صفحات وب نیز با استفاده از برنامه Rational Rose وجود دارد. نرم افزار Rational Rose از سیستم عامل ویندوز پشتیبانی می کند, از دیگر ویژگی ها و امکانات این برنامه میتوان به ساخت DTD با فرمت XML به منظور توسعه محصول اشاره کرد. برنامه رشنال رز از مدل های خاصی بهره می برد که نمونه های آن به شرح زیر است: Class، Component، Deployment، Sequence، Statechart، Use Case، Collaboration، Physical Storage Physical Data Table. هم اکنون می توانید آخرین نسخه نرم افزار Rational Rose را به صورت رایگان از سایت یاس دانلود دریافت نمایید.
برخی از ویژگی های کلیدی نرم افزار Rational Rose:- مدل سازی بر اساس زبان UML - مدل سازی و انالیز محصولات ساخته شده توسط C++، ANSI C++، Visual C++، CORBA، Java، Visual Basic - ساخت DTD با فرمت XML - پشتیبانی از تکنولوژی RUP - پشتیبانی از سیستم عامل ویندوز
(برای مشاهده در سایز اصلی روی عکس کلیک نمایید)
- Includes Unified Modeling Language™ (UML™) support and is one of the most comprehensive products in the Rational Rose family - Supports Analysis, ANSI C++, Rose J and Visual C++ patterns, Enterprise JavaBeans™ ۲.۰, and forward and/or reverse engineering for some of the most common Java 1.5 constructs - Offers code quality analysis abilities and code generation, with configurable model- to- code synchronization capabilities, as well as more granular management and use of models with the separately controllable model components feature
:: موضوعات مرتبط: بدو بدو دانلود , , :: بازدید از این مطلب : 732
:: بازدید از این مطلب : 329
خانواده : تعداد افرادی که با مناسبت های مشخص نسبی و سببی در کنار یکدیگر بر اساس ضوابط و مسولیت هایی به عنوان یک کانون قرار می گیرند خانواده مانع است
خانواده محل و محیطی است که نیازهای فرد را با کمترین وابستگی و به صورت تعاملی-تبادلی بر طرف می سازد نیاز های اولیه زندگی - عاطفی - حمایتی ولی تفکر و روش حکومتی سرمایه داری در جهت وابسته سازی تک تک افراد به سیستم حکومتی و اجرایی است تا همیشه در کنترل آنها باشند و هم سود و جاه طلبی آنها را تامین نمایند. خانواده مغایر است با مصرف گرایی و چون دارای چهارچوب و حریم مشخص است یکسری رفتارهای پرخطر و آسیب رسان را در جامعه می کاهد و این آرامش روانی در افراد مغایر است یا نیاز و وابستگی به سیستم اجرایی پس سرگرم کردن و تشویق به مدهای جدید و متنوع تر که حس زیبادوستی و تنوع طلبی افراد را تحریک کند تا جایی پیش می رود که در مورد همسر نیز ترویج تنوع طلبی و در بند و قید نبودن آن و اشتراک جنسی همسران و جشن برای طلاق که همه نشان دهنده علاقه و تلاش آنها برای حرکت در مسیر صرفا حیوانی و زندگی در حد و سطح حیوانی باظاهر انسانی دارد. ساخت فیلم هایی با محوریت یک دختر و یا زن که با زندگی یک نفره با مخاطرات و مشکلات روبرو با کمک حکومت بر آنها غلبه می کند و تمام نیازهای زندگی و جنسی و نیز با این الگوها برطرف می شود و با نشاط و ایده آل به زندگی می پردازد (البته فیلم های کره ای مثل یانگوم یا ایرانی ستایش فیلم های متضاد این تفکر استعماری است که ساخته شده است) و اگر این نیاز ها در همین خانواده هم بر طرف نشود می تواند منجر به ایجاد دغدغه هایی در فرد و جامعه شود پس آموزش مهارت های زندگی و مدیریت فردی و خانواده همیشه دارای اهمیت بالایی است. . پول : :: موضوعات مرتبط: , , :: بازدید از این مطلب : 282
استفاده از کلاس و id در طراحی صفحات با CSS
با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته باشیم: یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت زیر می نویسیم: p.black {color: black} p.red {color:red}
در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه "class="black در تگ استفاده کنیم و برای پاراگراف قرمز از شناسه "class="red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید: این متنی است که به رنگ مشکی نمایش داده می شود < p class="red">این متن به رنگ قرمز نمایش داده می شود.نکته : شما می توانید بیش از یک کلاس برای یک تگ HTML تعریف کنید اما برای این کار نباید دو بار از شناسه class استفاده کرد. بلکه باید در یک شناسه class نام دو کلاس مورد نظر را با یک فاصله بین آنها وارد کرد. برای مثال برای پاراگراف زیر از دو کلاس فرضی red و center استفاده شده است: این متن پاراگرافی است که تحت تأثیر دو کلاس red و center قرار دارد در نوشتن استایل می توان از نوشتن نام تگ در سلکتور کلاس چشم پوشی کرد. در این صورت ویژگیهای تعریف شده در آن کلاس بر هر تگ HTML که از کلاس مربوطه در شناسه class آن استفاده شده باشد اثر می گذارد. برای مثال در کلاس زیر ویژگی وسط چین را تعریف می کنیم و از نام تگ در سلکتور کلاس استفاده نمی کنیم: .center {text-align: center}
اکنون برای هر تگی که احتیاج به وسط چین داشته باشد می توانیم از کلاس بالا استفاده کنیم. به چند نمونه در زیر توجه کنید: متن این پاراگراف به صورت وسط چین نمایش داده می شود < div class="center">متن این قسمت به صورت وسط چین نمایش داده می شود< h2 class="center">متن این سرفصل به صورت وسط چین نمایش داده می شود تذکر : هیچ وقت نام کلاس را با یک عدد شروع نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن کلاس استفاده کنند. ما می توانیم از سلکتور کلاس برای تگی که حاوی شناسه class است استفاده کنیم که در قسمتهای قبلی در این مورد توضیح داده شد. علاوه بر این می توانیم از ویژگیهای تعریف شده در سلکتور کلاس برای تگهایی که در یک تگ محتوی شناسه class قرار دارند نیز استفاده کنیم. مثلا برای لینکهایی که در یک DIV قرار دارند و برای DIV کلاس تعریف شده است. برای این کار در نوشتن استایل مربوطه باید پس از نقطه که مشخص کننده سلکتور کلاس است نام کلاس را وارد کنیم و پس از وارد کردن یک فضای خالی نام تگی که می خواهیم ویژگیهای بر روی آن اعمال شود. به مثال زیر توجه کنید: در این مثال از استایل زیر در استفاده می کنیم: .test { border: #F00 1px double } .test a { color: green } .test a:hover { border: yellow 2px solid }
کد HTML زیر برای این مثال مورد استفاده قرار می گیرد: < a href="#">لینک آزمایشی شماره 1 < /div> < a href="#">لینک آزمایشی شماره 2
می توانید نتیجه را در اینجا مشاهده کنید: لینک آزمایشی شماره 2همانطور که در مثال بالا می بینید خواص لینک آزمایشی شماره 1 تحت تأثیر استایل مورد استفاده برای تگ DIV قرار دارد ولی لینک آزمایشی شماره 2 مانند سایر لینکهای خارج از DIV نمایش داده می شود.
همانطور که می دانید با وجود اینکه برخی از عناصر در صفحه با هم تفاوت دارند، از یک تگ HTML برای ایجاد آنها استفاده می شود.برای مثال برخی از این عناصر را که از تگ در به وجود آوردن آنها استفاده می شود می توانید در زیر مشاهده کنید:
حالا فرض کنید ما در یک صفحه از چند نمونه از عناصر بالا استفاده کرده ایم ولی فقط می خواهیم ویژگیهای یکی از آنها را تغییر دهیم. دو روش برای این کار وجود دارد: یکی استفاده از کلاس است که در این روش اگر تعداد زیادی از عنصر مورد نظر در صفحه وجود داشته باشد باید به همان تعداد از شناسه class در تگهای آنها استفاده کنیم و ممکن است این کار باعث افزایش حجم صفحه یا موجب سختی در نوشتن کد شود. روش دوم تعریف کردن سلکتور input برای عناصر مورد نظر است که به صورت زیر انجام می گیرد: فرض کنید می خواهیم فقط عرض کادرهای متنی را در صفحه تغییر دهیم. در صورتی که در استایل از سلکتور input به تنهایی استفاده کنیم عرض همه چک باکسها ، دکمه ارسال، دکمه های رادیو و سایر عناصری که از تگ استفاده کرده اند نیز تغییر می کند. برای انجام این کار می توانید سلکتور را به صورت زیر تعریف کنیم: input[type="text"] { width: 200px }
کد استایلی که در بالا نوشتیم فقط بر روی کادر های متنی که در آنها از شناسه "type="text استفاده شده است اثر می گذارد. البته این روش ممکن است در مرورگر Internet Explorer پشتیبانی نشود اما مرورگرهای Firefox و Opera از آن پشتیبانی می کنند.
سلکتور idروش دیگری که برای تعریف استایل وجود دارد استفاده از id است. شناسه id احتمالاً در آینده جایگزین شناسه name در تگهای HTML می شود بنا بر این در هرصفحه نباید بیش از یک بار از هر ID استفاده شود. اگر بیش از یک بار از یک id استفاده شود کارایی صفحه تغییری نمی کند ولی صفحه اعتبار خود را از دست می دهد. سلکتور id با علامت # مشخص می شود. با استایل زیر همه عناصر که شناسه "id="border دارند با کادری سبز رنگ نمایش داده می شوند: #border { border: green thin solid }
برای مثال ما از استایل بالا در این صفحه استفاده کرده ایم. حالا کد زیر را وارد صفحه می کنیم: این یک سرفصل با اندازه 3 است< div id="border">این قسمت یک div استدر قسمت زیر می توانید نتیجه کد بالا را مشاهده کنید: این یک سرفصل با اندازه 3 استاین قسمت یک div است
همانطور که کلاس را می توانستیم برای یک عنصر مشخص تعریف کنیم در مورد id نیز می توانیم این کار را انجام دهیم. به استایل زیر توجه کنید: p#border { border: green thin solid }
استایل بالا فقط روی پاراگرافی که شناسه "id="green در آن به کا رفته اثر می گذارد. نکته : هرگز نام یک id را با یک عدد آغاز نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن استفاده کنند. :: موضوعات مرتبط: آموزش css , , :: بازدید از این مطلب : 315
CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم. CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم. :: موضوعات مرتبط: آموزش css , , :: بازدید از این مطلب : 361
آیا شما می خواهید یک عکس را به صفحه خود اضافه کنید؟ برای این کار باید از تگ زیر استفاده کنید: در این تگIMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس است. حتماً لازم نیست این عکس مربوط به سایت شما باشد یا در سرور شما قرار داشته باشد، شما می توانید هر عکسی که در اینترنت قابل دسترسی باشد استفاده کنید (اگر قصد دارید صفحه خود را در یک سایت اینترنتی قرار دهید) . شما می توانید فقط نام فایل را به جای آدرس کامل بنویسید اگر صفحه ای که عکس باید در آن قرار گیرد و خود عکس در یک پوشه قرار داشته باشند. مثلاً اگر عکس شما در این آدرس قرار دارد http://www.example.com/images/image.gifو صفحه ای که در حال ویرایش آن هستید در پوشه ای غیر از این قرار دارد شما باید تگ زیر را برای اضافه کردن عکس به صفحه خود به کار ببرید: اگر فایلhtml و عکس هر دو در یک پوشه باشند می توانید برای راحتی در تایپ کردن از این تگ استفاده کنید: پسوند فایل حتماً نبایدgif. باشد. یعنی شما می توانید از فرمتی مثلjpg. نیز استفاده کنید. این دو فرمت از بقیه پر استفاده تر هستند. اگر شما عکسی با فرمتی غیر از این دو فرمت دارید می توانید از برنامه های ویرایش عکس از قبیل فتوشاپ برای تبدیل کردن آنها استفاده کنید. برای نمونه من می خواهم یک عکس را با نام learn_html.gif را که در پوشه همین صفحه قرار دارد را به این صفحه اضافه کنم. در اینجا از این تگ استفاده کرده ام: با نوشتن این تگ، این تصور را در صفحه نهایی می بینیم: به این ترتیب یک تصویر را در سمت چپ صفحه خواهیم دید (در صورتی که صفحه ما چپ به راست باشد). اگر می خواهید تصویر در مرکز صفحه ( وسط خط ) قرار گیرد باید از تگ تصویر به دست آمده به صورت زیر است: روشهای دیگری هم برای نمایش عکس در وسط صفحه وجود دارد که با توجه به کم کاربرد شدن تگ با شناسه "align="center استفاده کرد.
به خاطر داشته باشید که آدرس محل عکس و نام آن به حروف کوچک و بزرگ حساس هستند. پس ممکن است اگر به جایimage.jpg از IMAGE.JPG استفاده کنید ممکن است مرورگر شما عکسی را در صفحه نشان ندهد. پس در نوشتن آنها دقت کنید.
در مورد اضافه کردن عکسها به صفحه بعداً با جزئیات بیشتری توضیح می دهیم. تا اینجا یاد گرفتیم چگونه یک عکس را به صفحه اضافه کنیم و نحوه قرار گیری آنرا در صفحه تعیین کنیم. :: موضوعات مرتبط: آموزش HTML , , :: بازدید از این مطلب : 304
در این بخش ایجاد لینک به بقیه صفحات را مورد بررسی قرار می دهیم. برای ایجاد لینک از تگ زیر استفاده می کنیم: تگ نشانه لینک است. شناسه href مشخص کننده آدرس لینک می باشد، نشانه بسته شدن تگ است. متنی که بین این دو تگ ابتدایی و پایانی نوشته می شود متنی است که در صفحه شما به عنوان یک لینک دیده می شود. مثلاً اگر می خواهید به یک صفحه وب مثلاً صفحه اصلی سایت ما با این آدرس: http://www.neopersia.org/html/index.html لینکی را در صفحه خود داشته باشید باید فرمان زیر را در قسمت bodyصفحه خود در جایی که می خواهید لینک به نمایش درآید قرار دهید: لینک در صفحه شما به این صورت دیده می شود: لینکی را که با فرمان بالا ساخته اید به صورت رنگی (بسته به تنظیمات مرورگر رنگ آن تعیین می شود) و زیرخط دار به وجود می آید. که این خصوصیات نشانه آن است که یک متن لینک است و وقتی که نشانگر ماوس را بر روی آن قرار دهید به شکل دست در می آید. البته هر متنی که رنگی بود و دارای زیر خط بود لزوماً نباید یک لینک باشد. شکل نشانگر ماوس در اینجا به کمک ما می آید. اگر شما لینکی را که با این روش به وجود آمده کلیک کنید به صفحه مورد نظر می روید. با این روش شما می توانید به هر صفحه ای لینک بسازید چون آدرس کامل آنرا در لینک قرار داده اید. برای مثال شما می توانید برای صفحات سایت خود در صفحه اصلی با این روش لینکهایی بسازید. اگر همه فایلهای شما مانند صفحه ای که لینک در آن قرار دارد در یک پوشه باشند شما می توانید به جای آدرس کامل صفحه مقصد از روش میانبری استفاده کنید و فقط نام فایل مورد نظر را به جای آدرس کامل آن بنویسید. در مثال زیر فرض بر این است که هر دو صفحه مبدأ و مقصد لینک در یک پوشه قرار دارند.برای نمونه سرفصل آموزش مقدماتی HTML در همان پوشه ای قرار دارد که این صفحه قرار دارد. نام این صفحهindex.php است. برای ایجاد یک لینک در این صفحه می توانیم به اینگونه عمل کنیم: لینک حاصل شده: هر دو روش بالا یک نتیجه را دارند اما در روش دوم زحمت نوشتن کمتر است. اگر شما شک دارید یا مطمئن نیستید که هر دو صفحه در یک پوشه قرار دارند حتماً از آدرس کامل استفاده کنید. چون در این روش مهم نیست که صفحات مربوط به چه سایتی باشند. شناسه دیگری که می توانید در تگ لینک به کار ببرید title است. با استفاده از این شناسه می توانید عنوانی را برای لینک انتخاب کنید و این عنوان در هنگامی که بازدید کننده کاوس خود را روی لینک قرار می دهد به نمایش در نمی آید. به مثال زیر توجه کنید: :: موضوعات مرتبط: آموزش HTML , , :: بازدید از این مطلب : 333
آیا تا به حال موقعیتی پیش آمده که بخواهید بین دو کلمه فاصله بیشتری وجود داشته باشد. یا بخواهید علامت کپی رایت را نشان دهید. این کاراکتر های ویژه با استفاده از کدهای ویژه در صفحه شما قرار می گیرند. این کدهای ویژه با علامت & (امپرسند) شروع می شوند و با تعدادی حرف یا عدد ادامه پیدا می کنند و با ; (نقطه ویرگول) پایان می یابند. برای مثل زمانی که شما می خواهید بین دو کلمه فضای خالی اضافی بگذارید باید از کد ;nbsp& استفاده کنید که فضای خالی اضافه می کند. مطابق مثال زیر: کلمه اول کلمه دوم
نتیجه به این صورت خواهد بود: کلمه اول کلمه دوم فاصله اول بین کلمات با فشار دادن دکمه Space ایجاد می شود. مرورگر فاصله اول را تشخیص می دهد اما بعد از آن هر تعداد فاصله که باشد تفاوتی نمی کند و شما فقط یک فاصله را در مرورگر می بینید. افزودن کد ;nbsp& مرورگر را مجبور می کند تا بین دو کلمه فاصله اضافی بگذارد. شما با تکرار این کد می توانید به هر تعداد که بخواهید فاصله خالی ایجاد کنید.مانند زیر: کلمه اول کلمه دوم
نتیجه: کلمه اول کلمه دوم این فرمان چهار فضای خالی اضافی بین دو کلمه ایجاد می کند. و در مجموع پنج فضای خالی داریم. بحث بعدی ما علامت کپی رایت است. شما می توانید به همان روشی که برای فضای خالی اضافی ایجاد کردیم این علامت را نیز به وجود بیاورید. یعنی با استفاده از کد آن. کد علامت کپی رایت این است: ;copy& به این مثال توجه کنید: this page Copyright © 2007 by me
متن نتیجه: this page Copyright © 2007 by me روش کار برای تمامی کاراکترهای ویژه به همین صورت است فقط کد آنها را در متن HTML قرار دهید. در جدول زیر می توانید تعدادی از این کاراکترهای ویژه را به همراه کد سازنده آنها ببینید:
:: موضوعات مرتبط: آموزش HTML , , :: بازدید از این مطلب : 387
در این قسمت از درس به سراغ کار با فونتها و اندازه آنها می رویم. اندازه فونت را می توان با دستور زیر تعیین کرد: متنی که می خواهیم اندازه آنرا تعیین کنیم
به جای «x» عددی با علامت منفی یا مثبت قرار می گیرد. وقتی که می خواهیم یک متن بزرگتر دیده شود از علامت مثبت و زمانی که می خواهیم متن کوچکتر شود از علامت منفی استفاده می کنیم. به مثال زیر توجه کنید: این متن بزرگتر دیده می شود
این هم نتیجه تغییر سایز فونت: این متن بزرگتر دیده می شود برای کوچکتر کردن متن نیز به همین صورت عمل می کنیم: این متن کوچکتر دیده می شود
این هم متن کوچک شده: این متن کوچکتر دیده می شود این هم تعدادی مثال برای درک بهتر مطالب: این متن با اندازه 4 نوشته شده است
این متن با اندازه 4 نوشته شده است این متن با اندازه 3 نوشته شده است
این متن با اندازه 3 نوشته شده است این متن با اندازه 2 نوشته شده است
این متن با اندازه 2 نوشته شده است این متن با اندازه 1 نوشته شده است
این متن با اندازه 1 نوشته شده است این متن با اندازه 1- نوشته شده است
این متن با اندازه 1- نوشته شده است این متن با اندازه 2- نوشته شده است
این متن با اندازه 2- نوشته شده است این متن با اندازه 3- نوشته شده است
این متن با اندازه 3- نوشته شده است برای تغییر رنگ متنها نیز می توانیم به روش زیر عمل کنیم، با این فرمان : می توانیم رنگ مورد نظر خود را با نام انگلیسی آن در فرمان بالا قرار دهیم یا از معادل هگزا دسیمال رنگ به جای اسم رنگ استفاده کنیم. برای شروع با اسم رنگ شروع می کنیم: متن مورد نظر
متن نهایی: متن مورد نظر حالا از معادل هگزا دسیمال رنگ قرمز به جای نام رنگ استفاده می کنیم. البته استفاده از اسم رنگها ساده تر است اما شما ممکن است بخواهید از رنگهای پیچیده تری استفاده کنید.در مورد رنگ قرمز باید به این صورت عمل کنیم: متن مورد نظر
در اینجا نتیجه با مثال قبلی یکسان است: متن مورد نظر معادل هگزا دسیمال رنگها را باید با علامت # شروع کرد و بعد از این علامت شش حرف یا عدد دیگر قرار می گیرد. برای رنگ قرمز بعد از علامت # دو F و چهار صفر قرار می گیرد. اگر می خواهید معادل هگزادسیمال رنگها را به دست آورید اینجا را کلیک کنید. فرض کنید می خواهید رنگ و اندازه متنی را همراه با هم تغییر دهید. برای این کار می توانید از دو تگ استفاده کنید. اما به خاطر داشته باشید که هر دو را ببندید. مانند زیر: متن بزرگ و طلایی
متن بزرگ و طلایی همچنین می توانید از شناسه های size و color در یک تگ استفاده کنید. مانند زیر: متن بزرگ و طلایی
متن بزرگ و طلایی شما می توانید رنگ فونت را در تگ body تعریف کنید که بعداً به آن می پردازیم. :: موضوعات مرتبط: آموزش HTML , , :: بازدید از این مطلب : 308
از تگهای سر فصل (HEADING) برای تیتر و عنوان مطالب استفاده می شود. به این مثالها توجه کنید: سرفصل بزرگسرفصل بزرگسرفصل 2سرفصل 2سرفصل 3سرفصل 3در حال کوچک شدندر حال کوچک شدنکوچکترکوچکتربسیار کوچکبسیار کوچکاز دستورات بالا می توانید برای عنوان مطالب استفاده کنید.
This is the first line
Here is the second line نتیجه مثال بالا به اینگونه است: This is the first line Here is the second line
مرورگر اصولاً تا وقتی که به کمبود فضا برای یک خط بر نخورد به خط بعدی نمی رود. اما تگ من، یک خط جدید می خواهم
نتیجه به این صورت خواهد بود: من، یک خط جدید می خواهم
برای اینکه نتیجه ای مشابه متن نوشته شده در ویرایشگر متن داشته باشیم، باید متن را به این صورت بنویسیم: من،
یک خط جدید می خواهم این هم نتیجه: من، یک خط جدید می خواهم
خط اول از پاراگراف اول
خط دوم از پاراگراف اول این هم پاراگراف جدید < /p> و نتیجه به این صورت است: خط اول از پاراگراف اول خط دوم از پاراگراف اول این هم پاراگراف جدید تگ پاراگراف هم نیازی به تگ پایانی ندارد. اما شما می توانید برای فهم بهتر آنرا در متن خود به کار ببرید. مثلاً به این صورت: پاراگراف اول < /p> < p> پاراگراف دوم این متن همان نتیجه ای را دارد که متن زیر دارد: پاراگراف اول < p> پاراگراف دومادامه پاراگراف دوم < /p> این هم نتیجه هر دو متن بالا: پاراگراف اول پاراگراف دوم ادامه پاراگراف دوم البته اگر می خواهید صفحه ای که طراحی می کنید معتبر باشد بهتر است از تگ پایانی پاراگراف استفاده کنید. استفاده از تگ پایانی در XHTML الزامی است. :: موضوعات مرتبط: آموزش HTML , , :: بازدید از این مطلب : 341
در اینجا می خواهیم به ساختار شناسه ها یا همان تگها(tag) در HTML بپردازیم. یک تگ همیشه با علامت کوچکتر ریاضی یعنی این علامت > آغاز می شود و با علامت بزرگتر< به پایان می رسد. مثلاً تگی که باعث ایجاد زیرخط کلمات می شود اینطور نوشته می شود: این علامت را قبل از متنی که می خواهیم زیر آن خط کشیده شود قرار می دهیم. به این تگ ، تگ ابتدایی(Opening tag) می گویند، که عملیاتی را که شما می خواهید آغاز کنید شروع می کند. به منظور پایان دادن به زیرخط باید از یک تگ پایانی استفاده کنید. یک تگ پایانی با این علامت شروع می شود: /> بقیه تگ مانند تگ ابتدایی می باشد. برای درک بهتر این مطلب به مثال زیر توجه کنید: Tags and their position
اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آنرا مطابق خط روبرو در ویرایشگر متن خود بنویسید: tags and their position
نتیجه را به این صورت می بینید: Tags and their position در HTML همه تگها به یک تگ پایانی نیاز ندارند. برای مثال تگی که برای وارد کردن عکس استفاده می شود از این قبیل تگهاست، که به این صورت می باشد: ![]() البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً که برای ایجاد یک خط افقی به کار می رود و که برای رفتن به پاراگراف بعدی استفاده می شود. در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً همان است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً : متن زیرخط دار < /u>
کد بالا همان نتیجه ای را می دهد که کد زیر دارد: متن زیرخط دار
به این طریق هم اگر نوشته شود فرقی نمی کند: متن زیرخط دار < /u>
قالب پایه ای یک فایل HTML مانند زیر است. ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟ البته همه آنها را بعداً توضیح می دهیم.
< head> < title>html قالب اصلی < /head> < body> هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است < /body> < /html>
برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شوند) اولین تگ است که علامت شروع یک متن HTML است و تگ پایانی آن است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است. هر چیزی در HTMLباید بین این دو تگ قرار گیرد. مانند متن، دیگر تگها، عکسها و... چون این دو تگ نشان دهنده آغاز و پایان صفحه شما هستند. تگ بعدی است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با به پایان می رسد. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که باTITLE مشخص می شود. تگ به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید. این قسمت مورد استفاده موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده می شود. تا هنگامی که این تگ در قسمت BODY قرار نگیرد در متن شما نشان داده نمی شود. برای پایان دادن به تگ عنوان از این تگ استفاده می شود: در مثال بالا عنوانی که برای صفحه نشان داده می شود قالب اصلی HTML است. تگ بخشی را آغاز می کند که در صفحه مرورگر شما به نمایش در می آید. این قسمت جایی است که ما باید کار اصلی خود را در آن انجام دهیم. برای پایان دادن به این تگ از استفاده می کنیم. در مثال بالا متنی که در صفحه مرورگر دیده می شود به صورت زیر است (البته در اینجا برای نوشته زیر رنگ و فونت نیز انتخاب شده که در قسمتهای بعد به آنها خواهیم پرداخت) : هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است
:: بازدید از این مطلب : 292
آنچه که قبل از یادگیری HTML لازم است بدانید: برای شروع کار با HTML شما به چیزهایی نیاز دارید که در لیست زیر آمده است:
:: موضوعات مرتبط: آموزش HTML , , :: بازدید از این مطلب : 329
|
|
|