در ادامه سلسله آموزش های تیم طراحی سایت آنفایو به فصل دوم آموزش html میپردازیم.

آموزش HTML

فصل دوم

درس ۵ – سبکهای مختلف نوشتاری
درس ۶ – < ul >, < ol > لیستها
درس ۷ – قالب بندی فایلهای گرافیکی و استاندارد های مورد استفاده در صفحات وب
درس -٧-ب – قرار دادن تصاویر در اسناد

درس ۵ – سبکهای مختلف نوشتاری

< b >< I >< tt >
HTML می تواند به مرورگر بفهماند که قسمتهایی از متن را بصورت ضخیم و یا ایتالیک درآورد .

اهداف این درس
بعد از آموزش این درس
۱- تگهای ضخیم و یا ایتالیک و …. به شما شناسانده خواهد شد.
۲- متن های خود را در سند HTML به سبک های مختلف وارد کنید و سپس آن را در مرورگر ببینید .

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

—————————————————————————

< b > this is bold – < /b > < I > this is italic < /I > < tt > this is typewriter < /tt >

this is bold – this is italic this is typewriter

< I >< b >this is bold and italic< /b > < /I > < b >< I > and so is this < /I >< /b >

this is bold and italic and so is this

Blah < h2 >< I >< new >< /I > and < tt >improved Blah Blah < /tt >< /h2 > blah blah

Blah

and improved Blah Blah

blah blah

سبک های مختلف متن را در سند HTML خود وارد کنید .
اگر محیط کاری ندارید باز کنید مراحل زیر را دنبال کنید .
۱- محیط کاری خود را دوباره باز کنید .
۲- سند خود را که به نام lesson1.html ذخیره کردید باز کنید .
۳- لغت آموزش را از درون آن پیدا کنید حال می خواهیم آن را ضمیمه کنیم .
۴- تگ مرتبط با عمل فوق را وارد کنید . < b / > آموزش از راه دور < b >
۵- حالا پاراگراف دوم را با صورت ضخیم و ایتالیک درآورید.
برای اینکه تاکید بیشتری روی قسمتی از متن داشته باشید بوسیله تگ های < I >, < /b > , < b > می توانید این تاکید را انجام دهید .
۶-برای اشاره به قسمت خاصی از متن مثل نام نویسنده ، می توانید از تگ
< tt > , < / tt > استفاده کنید .
۷- تغییرات خود را ذخیره کنید و مجددا مرورگر خود را باز کنید .

درس ۶ – < ul >, < ol > لیستها

دو نمونه از پر استفاده ترین لیستها در HTML لیستهای مرتب و لیستهای نامرتب هستند. در لیستهای مرتب ترتیب بخشهای مختلف لیست مشخص می شود ولی در لیستهای نامرتب این ترتیب مشخص نمی شود.

  • لیستهای نامرتب

در لیستهای نامرتب برای عناصر لیست از شماره و عدد یا حروف الفبا مورد استفاده قرار نمی گیرد. عناصر این معمولاً با یک دایره تو پر مشخص می شوند. تگ ابتدای آن <ul> است و تگ پایانی آن <ul/> است. برای جدا کردن هر بخش لیست در ابتدای آن از تگ <li>استفاده می شود. بهتر است هر تگ <li> که باز می شود با <li/> بسته شود. در زیر یک مثال برای این نوع لیست نشان داده شده است:

<ul>
<li>بخش اول لیست</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست</li>
</ul>

مثال بالا یک لیست بولت دار با سه بخش را به ما می دهد:

  • بخش اول لیست
  • بخش دوم لیست
  • بخش سوم لیست

به این نکته هم دقت کنید که <li> نیازی به تگ پایانی ندارد ولی بهتر است از تگ پایانی آن یعنی <li/> استفاده شود.. فاصله متن لیست شده از ابتدای خط هم مقداری از بقیه متن بیشتر می شود. شما می توانید این فاصله را با افزودن تگ <ul> بیشتر کنید فقط به یاد داشته باشید تگهایی را که باز کرده اید در آخر لیست ببندید.در زیر یک مثال برای این نمونه لیست آورده شده است:

<ul>
<ul>
<ul>
<li>خط اول لیست</li>
<li>خط دوم لیست</li>
<li>خط سوم لیست</li>
</ul>
</ul>
</ul>

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

      • خط اول لیست
      • خط دوم لیست
      • خط سوم لیست

از شناسه type می توان در تگ <ul> استفاده کرد و ظاهر لیست را عوض کرد.

·         شناسه type

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

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

………………………………………………………………………………….

disc
این مقدار شکل علامت ابتدای هر قسمت از لیست را به یک دایره تو پر تغییر می دهد.

………………………………………………………………………………….

Square

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

به خاطر داشته باشید که از شناسه type هم می توان در تگ <ul> استفاده کرد و هم در تگ <li>. در صورتی که برای تگ <ul> از این شناسه استفاده شود علامت مربوط به همه قسمتهای لیست عوض میشود اما اگر برای تگ <li> از این شناسه استفاده شود فقط علامت مربوط به همان بخش از لیست عوض میشود.

در مثال زیر می توانید نحوه نمایش لیست با استفاده از شناسه type را در حالات مختلف ببینید. ما از کد زیر برای ساختن این لیست آزمایشی استفاده می کنیم:

<ul>
<li type=”circle”>قسمت اول لیست</li>
<li type=”disk”>قسمت دوم لیست</li>
<li type=”square”>قسمت سوم لیست</li>
</ul>

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

  • قسمت اول لیست
  • قسمت دوم لیست
  • قسمت سوم لیست

اگر می خواهید از تگ <center> برای لیست خود استفاده کنید در این کار دقت کافی داشته باشید . چون ممکن است تمام سطرهای متن شما به یک اندازه نباشند. در این صورت به جای اینکه لیستی در یک خط و مستقیم داشته باشید ممکن است لیستی در هم ریخته و شلوغ ایجاد شود. مانند زیر:

<center>
<ul>
<li>بخش اول لیست که بلندتر از بقیه سطرهای لیست است</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست در سطر آخر</li>
</ul>
<center>

لیست نهایی به این صورت در صفحه دیده می شود.

  • بخش اول لیست که بلندتر از بقیه سطرهای لیست است
  • بخش دوم لیست
  • بخش سوم لیست در سطر آخر

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

  • لیستهای مرتب

شما می توانید در مورد لیستهای مرتب هم مانند لیستهای نامرتب عمل کنید فقط کافیست به جای استفاده از <ul> و <ul/> از تگهای <ol> و <ol/> استفاده کنید. به یک مثال در این زمینه دقت داشته باشید :

<ol>
<li>بخش اول لیست</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست</li>
</ol>

نتیجه به صورت لیستی شماره گذاری شده ظاهر خواهد شد:

  1. بخش اول لیست
  2. بخش دوم لیست
  3. بخش سوم لیست

برای کنترل تگ <ol> از چند شناسه می توان استفاده کرد

۱٫      شناسه start

در مورد لیستهای مرتب با استفاده از شناسه start در تگ <OL> می توانیم تعیین کنیم که شماره های لیست از چه عددی شروع شود. به مثال زیر توجه داشته باشید:

<ol start=”15″>
<li>این سطر اول لیست است ولی شماره آن ۱۵ است.</li>
</ol>

نتیجه به صورت زیر ظاهر میشود:

  1. این سطر اول لیست است ولی شماره آن ۱۵ است.

۲٫      شناسه type

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

“type=”1
با این شناسه بخشهای لیست با اعداد ریاضی ایجاد میشود.

“type=”A
با استفاده از این شناسه بخشهای لیست با حروف بزرگ انگلیسی ایجاد میشود.

“type=”a
با استفاده از این شناسه بخشهای لیست با حروف کوچک انگلیسی ایجاد میشود.

“type=”I
با استفاده از این شناسه بخشهای لیست با حروف بزرگ یونانی مشخص می شوند.

“type=”i

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

این شناسه هم می تواند در تگ <ol>  مورد استفاده قرار گیرد و هم در تگ <li> و در این مورد مانند لیستهای نامرتب است.

در مثال زیر می توانید نحوه نمایش حالات مختلف لیست را با استفاده از شناسه type می بینید:

<ol>
<li type=”A”>قسمت اول لیست</li>
<li type=”a”>قسمت دوم لیست</li>
<li type=”1″>قسمت سوم لیست</li>
<li type=”I”>قسمت چهارم لیست</li>
<li type=”i”>قسمت پنجم لیست</li>
</ol>

نتیجه به صورت زیر خواهد بود:

  1. قسمت اول لیست
  2. قسمت دوم لیست
  3. قسمت سوم لیست
  4.     IV.            قسمت چهارم لیست
  5.        v.            قسمت پنجم لیست

 

درس ۷ – قالب بندی فایلهای گرافیکی و استاندارد های مورد استفاده در صفحات وب

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

اهداف این درس

۱- شناسایی فایلهای گرافیکی شبکه www
۲- بحث کلیدی در مورد استفاده از گرافیک در سندهای وب
۳- انتقال فایل گرافیکی از وب به کامپیوتر شخصی خود
۴- استفاده از قالب صحیح برای تصاویر در صفحات وب

شروع درس
همانطور که می دانید تعداد بسیار زیادی از قالب بندیهای گرافیکی وجود دارند .مثل pict , hif : tiff , png حالتی که مرورگر وب گرافیکها را در شکل ، HTML نشان می دهد بیان کننده محل فایل گرافیکی در یک قالب دستوراتی است که می تواند توسط انواع مختلفی از کامپیوترها ترجمه شود .

برای مثال :
وقتی که اطلاعات در آن قالب به کامپیوتر مکینتاش می رسد مرورگر آن را در قالب دستور برای مکینتاش نشان می دهد و برای کامپیوترهای معمولی وضع به همین صورت است.gif اطلاعات تصویر را فشرده می کند ( کاهش حجم فایل) و اطلاعات را به کدهای دودوئی قابل ارسال برروی اینترنت تبدیل می کند. gif فشرده موثر ترین فایل گرافیکی است که ناحیه یکپارچه رنگی متصل به حجمی دارد و فشردگی آن قابل تنظیم است . هنگامی که رنگ به طور متوالی در یک جهت افقی باشد فایلهای gif خاصیت شفافی دارند ، بنابراین فایلهای gif با درجه خلاصه سازی ذخیره می شوند و در صفحات وبی که از gif برای تصاویر استفاده شده ، تصاویر به زودی دیده می شوند. ابتدا تصویر به صورت تیره ظاهر می شود تا در نهایت تصویر نهایی ظاهر گردد .
از فرصتهای دیگر تصویر jpg می باشد که مخفف کلمات Joint photo graphic expert group در اوایل شروع تصاویر jpeg در صفحه نشان داده نمی شدند و در پنجره ای جداگانه به نمایش درمی آمدند . اما مرورگرهای امروزی از فایلهای jpeg پشتیبانی می کنند و آنها را در صفحه نمایش می دهند .
اگر تنوع رنگ در فاصله کمی زیاد باشد ، برای فایلهای با قالب jpeg می توان به درجه خلاصه سازی تعریف کرد. فایلهای jpeg قابلیت تحرک و انیمیشن سازی ندارند . تعداد زیادی از برنامه های گرافیکی می توانند فایل را با پسوند gif ذخیره کنند . امروزه برنامه های image ready از شرکت adobe طرح مشخصی برای ایجاد تصاویر گرافیکی دارند .
نکاتی که هنگام استفاده از تصاویر گرافیکی باید به آن دقت داشت . هنگامی که در صفحه وب از عکس استفاده می کنید، به نکات زیر توجه داشته باشید .
• تصاویر بزرگ و بیشماری که کل صفحه کامپیوتر را در بر می گیرد برای کاربری که در انتظار ظاهر شدن آن عکس می باشد ، خسته کننده می شود . پیشنهاد این است که کل سایز عکس را بیشتر از ۱۰۰kb نکنید .
• همه کاربران از مانیتور ۲۱ اینچ استفاده نمی کنند طول تصاویر بکار برده شده را بیشتر از pix 480 و عرض آنها را بیشتر از pix 300 نکنید که کاربر مجبور می شود برای دیدن تمام عکس از Scroll استفاده کند .
• شیب رنگ برای فایلهای gif ممکن است زیاد به نظر برسد اما فایلهای gif نمی توانند این ناحیه رنگ یکپارچه را فشرده کنند . بعضی برنامه های گرافیکی این اختیار را به شما می دهند که ، هنگام برگردان فایل به gif ، لبه های تصویر هموار شود و از اختلالات تصویر کم شود .
بهتر است اول تصاویر کوچک استفاده شود و سپس این تصاویر به تصاویر با سایز بزرگتر اتصال پیدا کنند .
یک تصویر خاص که شما در صفحه اینترنت می بینید ، ممکن است هر بار در یک بازه زمانی ، برای شما ظاهر شود .
• بیشتراوقات ، مرورگر تصاویر را از hard disk شما cash می کنند. یعنی هنگامی که یک عکس بارگزاری می شود ،از hard شما آورده می شوند . شما ممکن است که صفحه زیبا طراحی کنید که عکسهای بزرگی در آن بار گزاری شوند اما برای یک مودم با سرعت کم و شبکه شلوغ کار مشقت باری است .

مروری بر مطالب

۱- دو قالب معمول مورد استفاده تصاویر در صفحات وب چیست ؟
۲- چگونه یک تصویر گرافیکی در کامپیوترهای مختلف نشان داده می شود ؟
۳- نکاتی که هنگام استفاده از تصاویر وب باید در نظر گرفت چیست ؟

درس -٧-ب – قرار دادن تصاویر در اسناد

آیا شما تصمیم دارید یک عکس را به صفحه خود وارد کنید؟ برای این کار باید از تگ زیر استفاده کنید:

 

<img src=”image.gif”>

در این تگ IMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس است. حتماً لازم نیست این عکس مربوط به سایت شما باشد یا در سرور شما قرار داشته باشد، شما می توانید هر عکسی که در اینترنت قابل دسترسی باشد استفاده کنید (اگر قصد دارید صفحه خود را در یک سایت اینترنتی قرار دهید) . شما می توانید فقط نام فایل را به جای آدرس کامل بنویسید اگر صفحه ای که عکس باید در آن قرار گیرد و خود عکس در یک پوشه قرار داشته باشند.
مثلاً اگر عکس شما در این آدرس قرار دارد http://www.example.com/images/image.gif و صفحه ای که در حال ویرایش آن هستید در پوشه ای غیر از این قرار دارد شما باید تگ زیر را برای اضافه کردن عکس به صفحه خود استفاده کنید:

<img src=”http://www.example.com/images/image.gif”>

اگر فایل html و عکس هر دو در یک پوشه قرار داشته باشند می توانید برای راحتی در تایپ کردن از این تگ استفاده کنید:

<img src=”image.gif”>

پسوند فایل حتماً نباید gif. باشد. یعنی شما می توانید از فرمتی مثل jpg. نیز استفاده کنید. این دو فرمت از بقیه پر استفاده تر هستند. اگر شما عکسی با فرمتی غیر از این دو فرمت دارید می توانید از برنامه های ویرایش عکس از قبیل فتوشاپ برای تبدیل کردن آنها استفاده کنید.

برای نمونه من می خواهم یک عکس را با نام learn_html.gif را که در پوشه همین صفحه قرار دارد را به این صفحه اضافه کنم. در اینجا از این تگ استفاده کرده ا یم:

 <img src=”learn_html.gif”>

به این ترتیب یک تصویر را در سمت چپ صفحه خواهیم دید (در صورتی که صفحه ما چپ به راست باشد). اگر می خواهید تصویر در مرکز صفحه ( وسط خط ) قرار گیرد باید از تگ <CENTER> در اطراف تگ تصویر استفاده کنید. مانند زیر:

<center>
<img src=”learn_html.gif”>
</center>

روشهای دیگری هم برای نمایش عکس در وسط صفحه هست که با توجه به کم کاربرد شدن تگ <center> در نسخه چهارم HTML از آنها استفاده می شود. مثلاً می توان از تگ <div> با شناسه “align=”center استفاده کرد.

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

در مورد اضافه کردن عکسها به صفحه بعداً با جزئیات بیشتری توضیح می دهیم. تا اینجا یاد گرفتیم چگونه یک عکس را به صفحه اضافه کنیم و نحوه قرار گیری آنرا در صفحه تعیین کنیم.

 در ادامه با آموزش های تیم طراحی سایت آنفایو همراه باشید.