جلسه بیستم

سلام به دوستداران طراحی وب

جلسه بیستم رو با نام و یاد خدا آغاز می کنیم... من یه نکته رو تذکر بدم که اگر تمرین نکنید فایده ای نداره.. باید توی خونه تمرین کنید.. مطمئن باشید بهترین مطالب و چکیده ای از مطالبی که در تمام کلاس های طراحی وب گفته می شه رو منتقل خواهم کرد.. پس غفلت نکنید و فقط هر درس رو با تمرین کافی جلو برید.

Block-level Elements & Text-level Elements

Block-level المنت ها حداقل روی یک پاراگراف تاثیر می گذارند. حالا این یعنی چه؟ عرض می کنم خدمتتون.

ببینید وقتی ما از تگی به نام استفاده می کنیم اگر دقت کنید این تگ دو خط از بالا و پایین فاصله می اندازد و اگر متنی بعد از این تگ نوشته شود، دو خط بعد به نمایش در می آید .. خودتان تست کنید.. به این جور تگ ها که دو خط از بالا و پایین فاصله می اندازند و روی یک پاراگراف عمل می کنند block-level المنت می گویند.

تگ های زیادی هستند که جزو block-level المنت ها هستند که می توان به تگ هایی همچون

اشاره کرد.همه این تگ ها بر روی یک پاراگراف اثر می کنند و دو خط از بالا و پایین با متن قبل و بعد خودشان فاصله
می اندازند. فکر می کنم غیر از یکی دو مورد اکثر تگ های بالا رو توضیح داده باشم.که اون یکی دو مورد هم توضیح خواهم داد ان شاء الله.

و اما Text-level المنت ها.

Text-level المنت ها بر روی یک کاراکتر یا کلمه تاثیر می کنند. مثل اکثر تگ های که می شناسید تگ
 و و... از این دسته هستند.

خب... واما بحث دیگری رو می خواهم مطرح کنم به نام کامنت نویسی در طراحی سایت .. برای مواقعی که شما می خواهید متنی رو در کدنویسی تان بنویسید که یادآور برای خودتان باشد و کاربر نمایش داده نشود.که باید از تگ زیر استفاده کرد

که به جای کلمه comment می توان متنی رو که می خواهیم نمایش داده نشود و بعنوان یادآوری برای خودمان باشد در این قسمت می نویسیم

خب بحث بعدی تگ هست برای گذاشتن تصویر در وبلاگ که من قبلا یعنی در جلسه پانزدهم در مورد این تگ صحبت کرده ام الان می خواهم شناسه های تکمیلی این تگ رو با هم بررسی کنیم.

البته اجازه بدید قبلش سه فرمت عکسی که روی وب کاربرد دارد رو باهم بررسی کنیم:

البته مرورگر اینترنت اکسپلورر فرمت BMP که برای ویندوز مایکروسافت هست رو هم ساپورت می کنه ولی سه فرمت بالا اصلی ترین فرمت عکس های بر روی وب هستند.

و اما خاصیت هایی که دارند:

فرمت GIF سه خاصیت دارد 1.transparency 2.interlacing و 3.animation که تک تک به توضیح می پردازم.

اولیش شفافیت تصویر هست اگر دقت کنید بعضی عکس ها پس زمینه ای دارند که اگر مثلا بخواهیم در پس زمینه سفید استفاده کنیم یک قابی میگیرند... این خاصیت transparency موجب می شوند که اون قاب حذف بشود و عکس همرنگ محیط در بیاد نمی دونم فهمیدید یا نه به عکس زیر دقت کنید:

همانطور که می بینید در زمینه سفید یک قاب طوسی رنگ دارد اگر مثلا بخواهیم که اون قاب از بین برود می توانیم از فرمت gif استفاده کنیم البته این خاصیت را فرمت png  هم داراست.

اما خاصیت دوم interlacing: اگر دقت کرده باشید در سرعت های پایین اینترنت عکس های jpg از بالا به پایین لود می شوند این خاصیت interlacing که فرمت های GIF و PNG دارا هستند موجب می شود که عکس از چپ به راست لود شود و در سایت ظاهر شود.

Animation هم که مشخص است و اون متحرک سازی عکس هست همین تبلیغت بلاگفا که در هنگام باز کردن وبلاگ ظاهر می شود رو اگر دقت کنید یک عکسی با فرمت GIF هست که از اون عکس به منظور تبلیغات استفاده شده است و عکسی است متحرک!

این سه خاصیت رو فرمت jpg ندارد و فرمت png دارد. در واقع فرمت png ترکیبی است از jpg و gif.

خوبی فرمت jpg حجم پایین اون و ترکیب میلیون ها رنگی که دارد هست. فرمت jpg  حدودا از 16 میلیون تنوع رنگی استفاده می کند که این در مقابل فرمت gif که 256  رنگ هست عدد بسیار بالایی است.

خب فکر می کنم این سه فرمت عکس رو به خوبی شناختید.. حالا بریم سراغ تگ خودمون.

سه شناسه باقیمانده از این تگ عبارت است از align و hspace و vspace

شناسه align که نسبت قرار گیری متن نسبت به عکس هست 5 مقدار می گیرد که عبارتند از:

در اولی عکس را در سمت چپ متن و در دومی عکس را در سمت راست متن قرار می دهد. سه تای بقیه رو باید خودتون امتحان کنید تا ببینید چه اتفاقی می افته البته می تونید توی این لینک کلیک کنید تا ببینید.

خب دو شناسه hspace و vspace هم به ترتیب برای فاصله دادن افقی و عمودی اطراف یک عکس است.

یه جورایی عکس رو حرکت می دهد بعنوان مثال اگر به شناسه hspace عدد 100 بدهیم عکس به اندازه 100 پیکسل از سمتی که در آن قرار گرفته به جلو یعنی سمت راست حرکت می کند.

ان شاء الله در جلسه بعدی می گم که چطوری می تونیم وقتی روی یک عکس یا لینکی رفتیم عکس عوض بشه!

البته از جاوا اسکریپت استفاده می کنیم. فعلا تا بعد...

پایان جلسه بیستم

---

پ.ن :قدیما خیلی راحت کدهای اچ تی ام ال رو میگذاشتم و عمل نمی کردند ولی الان کدهای اچ تی ام ال عمل می کنند و نمی شه خود کد را گذاشت مثلا من اگر کد مربوط به خط رو اینجا بگذارم به جای اینکه کدش رو به شما نشون بده یک خط برای شما می کشه .. این روند آموزش رو سخت کرده چرا که من باید برای هر کدوم از کدهای اچ تی ام ال عکسش رو قرار بدهم تا عمل نکنه .. اگر دقت کنید تمام کدهای اچ تی ام ال موجود در صفحه عکس هستند... خلاصه کار من خیلی سخت شده... فعلا

جلسه نوزدهم

خب.. بی مقدمه میرم سر اصل مطلب

بعضی از شناسه های تگ HTML رو قبلا گفتم اما دو شناسه دیگر آن که به طور معمول بکار می رود رو در اینجا ذکر می کنم

1.xmlns که به صورت زیر همیشه بکار می رود

به طور پیش فرض این آدرس بالا همیشه جلوی شناسه xmlns قرار می گیرد. اگر به سورس کد سایت msn نگاهی بیندازید کاربرد این شناسه را در آنجا می بینید.

2.شناسه lang هست که زبان بکار رفته در صفحه را مشخص می کند.

این شناسه برای موتورهای جستجو و متن خوان ها مفید است تا متوجه شوند که زبان بکار رفته در صفحه چیست؟

متن خوان ها نرم افزارهایی هستند که مورد استفاده نابینایان برای خواندن متن قرار می گیرد.

خب اینم از شناسه های تکمیلی تگ html

و اما تگ head در داخل تگ head سه تگ بسیار بسیار مهم بکار می روند که عبارتند از:

1.      Meta

2.      Link

3.      Title

به title که قبلا اشاره کرده ام می ماند دو تگ دیگه یعنی meta و link

1. صفات و Attribute های تگ Meta

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

البته الان موتورهای جستجو کمتر به این تگ اهمیت می دهند چرا که بعضی قصد سوء استفاده از این تگ و بالا بردن رتبه سایت خودشان در موتورهای جستجو را داشته اند. به همین دلیل موتورهای جستجوی بزرگی مثل گوگل کمتر به آن توجه می کنند. با این حال من به ذکر مهمترین کاربردهای آن
می پردازم.

الف.Http-equiv: این صفت مقادیر مختلفی می گیرد که هر کدام کارهای مختلفی انجام میدهند بعنوان مثال توسط مقدار content-type  می توان مشخص ساخت که محتویات یک صفحه از چه encoding پیروی کنند.

به این مثال که باز هم سورس کد سایت msn هست دقت کنید:

همانطور که می بینید محتویات صفحه را از نوع encoding ، utf-8 مشخص کرده ایم.

این شناسه مقدار جالب دیگه ای هم می گیرید به نام "refresh" برای مواقعی که ما صفحه وبمان مرتبا به روز می شود و می خواهیم در فواصل زمانی مشخص برای کاربر صفحه را رفرش کنیم.

به مثال توجه کنید:

این قطعه کد باعث می شود که صفحه ما هر دو ثانیه یکبار رفرش بشود که البته با تغییر عدد جلوی content که برحسب ثانیه هست می توان زمان رفرش شدن صفحه را تغییر داد.

ب.شناسه Name:

به این شناسه هم مقادیر بسیاری می توان داد که من به سه مورد آن که بسیار مهم و پرکاربرد است اشاره می کنم.

اولین مقداری که این شناسه می گیرد Keyword است توسط این مقدار می توانیم یکسری از کلمات کلیدی در شناسه content بنویسیم که اگر در موتورهای جستجو سرچ زده شدند به سایت ما هدایت شوند.

خیلی بحث تئوری شد به مثالی از سایت http://www.echessdesign.com  توجه کنید:

 همانطور که می بینید یک سری زیاد از کلمات کلیدی در این سایت نوشته شده که اگر سرچ زده شد به این سایت هدایت شوند مثل حسین سعیدی .، web design و ... که خودتان مشاهده می کنید.

البته لازم به ذکر است چون تقلب در این روش وجود داشت این روش از روی موتورهای جستجو برداشته شده است و اگر دقت کنید سایتهایی مثل یاهو و msn از کلمات کلیدی استفاده نکرده اند بلکه از مقدار بعدی استفاده کرده اند که الساعه ذکر می کنم.

مقدار description . اگراین مقدار را به شناسه name بدهیم می توانیم در رابطه با سایت توصیفاتی را ذکر کنیم که توسط موتورهای جستجو قابل شناسایی باشد و اگر آن توصیفات در موتورهای جستجو سرچ زده شد به سایت ما رهنمون شوند.

باز هم به مثالی از سایت msn و توصیفاتی که این سایت از خودش کرده است توجه بفرمایید.

به توصیفات جالب سایت msn دقت کنید... شما هم می توانید با view source گرفتن از این سایت این کدها را ببینید.

اما یک مقدار دیگری که این شناسه name می گیرد مقدار robots هست . ابتدا یک مثال می زنم و از روی مثال به توضیح می پردازم به مثال زیر توجه کنید:

شناسه content در این جا دو مقدار گرفته به نام noindex و nofollow ... اگر این تگ را بکار ببریم به موتورهای جستجو می فهمانیم که این صفحه را ایندکس گذاری نکنند و کاربران را به این صفحه هدایت نکنند و همینطور لینک های موجود در این صفحه را نیز دنبال نکنند چرا که گاهی ما یک فروشگاه اینترنتی داریم و مثلا در قسمت سبد خرید نمی خواهیم کاربران مستقیما وارد این صفحه بشوند چون در این صورت سایت ما به درستی کار نخواهد کرد.. می توانیم از این قطعه کد در این شرایط استفاده ببریم.

و اما تگ LINK در یکی از سه مورد تگی هست که در میان تگ head قرار می گیرد

این تگ به فایل css اشاره می کند اگر موجود باشد .که در مورد استایل شیت ها وcss حتما مفصلا در آینده نزدیک به توضیح خواهم پرداخت .

یک مژده هم بدهم که زبان php را هم به زودی آموزش می دهم. پس با ما همراه باشید فعلا...

پایان جلسه نوزدهم

جلسه هجدهم

خب ... پیرو درس های قبلی بی مقدمه میرم سر اصل مطلب.

Countainer tags & Empty tags

Container tags: تگ هایی که نیاز به آغاز کننده و پایان دهنده دارند مثل تگ

Empty tags: تگ هایی هستند که نیاز به تگ پایان دهنده ندارند. مثل تگ  

اما یک نکته اینجا هست .. همانطور که قبلا توضیح دادم نحو یا سینتکس html با xhtml در بعضی وقت ها فرق می کند.که من هرجا تفاوتی داشته باشند حتما اون تفاوت رو ذکر می کنم.

در تگ های دوتایی یا container tag  ها در زبان xhtml می توان به جای تگ آغاز کننده و پایان دهنده یک تگ را به صورت زیر بکار برد. به مثال دقت کنید:

Empty Tag ها هم در زبان xhtml با زبان html فرق می کند. بعنوان مثال در زبان html تگ  که یک خط افقی می کشد به همین صورت  بکار می رود ولی همین emty tag یا تگ بدون پایان دهنده به صورت بکار  می رود یعنی یک اسلش (/) در پایان می خواهد.

پس خلاصه این شد که:

اما اجزاء تشکیل دهنده یک تگ چیست؟

شاید در جلسات قبل گفته باشم ولی یکبار دیگر می گم خالی از فایده نیست!

خب... بعد از بیان قالب کلی تگ ها و انواع تگ های موجود همانطور که قبلا قول داده بودم می خوام بحث رو به یک تگی که در ابتدای کلیه کدنویسی های html قرار می گیرد معطوف کنم، خواهش می کنم حواستون رو جمع کنید و بیاید با دقت موضوع رو بررسی کنیم:

همین الان از یک سایت view source بگیرید (روی صفحه سایت راست کلیک کنید و گزینه view source را بزنید)

در خط اول چی می بینید؟

بعنوان مثال این doctype برای سایت msn هست:

در ابتدا بگویم که HTML 4.01 و xhtml به سه دسته transitional و strict و frameset تقسیم می شوند.

در transitional و frameset اجازه استفاده از تگ های قدیمی داده شده  ولی در strict  ما نمی توانیم از تگ های قدیمی استفاده کنیم.

خب خوب به اون تگی که مال سایت msn بود دقت کنید: کار DOCTYPE این هست که به مرورگر بگه که این صفحه وب داره از ورژن فلان HTML یا XHTML استفاده می کنه و دستورات از این قوانین استفاده می کنند.

همانطور که می دونید برای HTML اصلا چیزی به نام DOCTYPE مطرح نبود ولی برای XHTML مطرح هست و اجباری هم هست. اصلا تا یه مدت دیگه مرورگرها با صفحات وبی که DOCTYPE نداشته باشند کار نمی کنند و حضور این تگ اجباری میشود.چرا که از روی این تگ هست که مرورگر می فهمد چطور باید کدها رو ترجمه کند و از چه قوانینی برای ترجمه پیروی کند.

خیلی قضیه تئوری شد چند تا مثال بزنم کمی قضیه جا بیوفته

دقت کنید مثلا ما اگر از HTML 2.0 استفاده می کنیم می تونیم از DOCTYPE زیر استفاده کنیم:

یا اگر از HTML 3.2 استفاده می کنیم از DOCTYPE زیر باید استفاده کنیم:

جا افتاد؟ نه؟ خب به این مثال ها هم توجه کنید:

یادتونه گفتم که XHTML سه حالت داره یا transitional هست یا strict یا frameset خب اینجا بدرد می خوره به مثال دقت کنید:

اگر دقت کنید یک سری چیزها هستند که در سه مثال تکرار شدند و فقط یک قسمتی از DOCTYPE تغییر کرد اون هم ورژن استفاده شده از html یا XHTML که به طور مثال در مثال بالا از XHTML 1.0 Transinal استفاده شده است. بعنی به مرورگر می فهمانیم که ما میخواهیم از طریقه کدنویسی XHTML 1.0 حالت Transitional اون استفاده کنیم.

DTD (Document Type Definition) یک داکیومنت جدا هست که شامل مجموعه قوانین ساختاری، نحوی هست و در تگ DOCTYPE یک URL استقاده شده که به همین DTD اشاره می کند.

DOCTYPE استفاده اش در زبان XHTML اجباری است و باید با حروف بزرگ نوشته شود. همینطور کدها در زبان XHTML باید با حروف کوچک نوشته شود.

فکر می کنم برای این جلسه کافی باشه ... فعلا..

 پایان جلسه هجدهم

بعد از دو سال و یک ماه و نوزده روز مجددا سلاااااااااااااااام...

جدای از هر گونه مسایل جنبی که برای من توی این دو سال پیش اومد حالا اومدم مجددا مباحث طراحی صفحات وب رو پیگیری کنیم اما این بار نه به صورت مقدماتی بلکه به صورت کاملا حرفه ای .. از بیان هر گونه نکته ای باکی ندارم و سعی می کنم تا اونجا که بلدم نکات رو منتقل کنم...

مثل قبل جلسه به جلسه میریم جلو و من نام این جلسه را در ادامه جلسات قبلی جلسه هفدهم
نام گذاری می کنم اما یه جورایی از اول کاملتر شروع می کنم سعی می کنم نکاتی که قبلا گفتم رو تکرار نکنم بنابراین اگر جلسات قبل رو نخوندید بهتر هست اونها رو بخونید... در ضمن مطالب این جلسات همان مطالبی است که در دوره CIW در level دوم یعنی Site Development & Web Designed  در مجتمع فنی تهران تدریس می شود... (برای اون هایی که به امکانات دسترسی ندارند )... خب آماده اید؟ شروع می کنیم

جلسه هفدهم

خب چون می خوام از پایه شروع کنم ممکن است بعضی مباحث تکراری باشد ، شما اونجایی که تکراری بود ازش بگذرید و مطالعه نکنید..

SGML(Standard Generalized Markup Language

از این زبان برنامه نویسی برای ساخت زبان های دیگر نظیر HTML و XHTML(که ترکیب HTML و XML هست) استفاده شد.
توسط IBM ساخته شده است و به DTD هم نیازمند است(در مورد DTD بعدا به طور کامل توضیح میدم نگران نباشید فقط همین را بدانید که برای اینکه مرورگر یا مفسر بفهمد که سایت ما با چه زبانی نوشته شده باید در اولین سطر از DTD استفاده بشود)

Hypertext & Hypermedia

HyperText: که همان فوق متن هست (همونی که وقتی روی اینترنت روش می ریم ماوس عکس یک دست میشه)

Hypermedia:که از 4 قسم تشکیل شده image و animation و audio و video  (البته اینها هم وقتی با ماوس روشون میریم عکس ماوس تبدیل به دست میشه)

Markup Language & Programming Language

در Programming Language مثل C  و C++ و جاوا اول برنامه باید کامپایل بشه تا بتونه اجرا بشه ولی در مارک آپ ها اینگونه نیست.
فایل اطلاعات و فایل برنامه در Programming Language جدا هست ولی در مارک آپ ها مثل HTML داخل هم هست و قاطیه!
Markup Language ها نیازی به کامپایل ندارند( کامپایل یعنی تبدیل کردن زبان برنامه نویسی به زبان قابل فهم برای ماشین)

Interpreters(مفسر ها)

مفسر ها برنامه هایی هست که کدهای HTML رو ترجمه و تفسیر می کنند.

خب یه سری اصطلاحات رو این جلسه برای دست گرمی تعریف کردم...

مطمئن باشید با دست بسیار بسیار پر آمده ام. مطمئن باشید که مطالب بسیار زیادی رو یاد خواهید گرفت پس آماده باشید..فعلا

پایان جلسه هفدهم