سفارش تبلیغ
صبا ویژن
 
آموشهای تخصصی کامپیوتر و طراحی سایت
صفحه نخست       ATOM       عناوین مطالب وبلاگ      نقشه سایت
درباره وبلاگ


آخرین مطالب
آرشیو وبلاگ
لینک های ویژه
پیوندها
طول ناحیه در قالب بزرگتر از حد مجاز
آمار وبلاگ
  • بازدید امروز: 7
  • بازدید دیروز: 2
  • کل بازدیدها: 411348



آموزش HTML - درس 11 - لیستهای تعریف
دوشنبه 91 بهمن 16 :: 9:10 عصر ::  نویسنده : smfatemi

درس 11 - لیستهای تعریف 


اهداف این درس

1- ایجاد لیستهای تعریف با متنهای جداگانه
برای تعریف اقلام
2- ایجاد تاریخچه با لیست تعریف
در درس 6 آموختیم که چگونه لیست تعریف ایجاد کنیم . حال می خواهیم نوع سومی از لیست که به لیستهای تعریف معروف است ایجاد کنیم . در قبل در جلوی اقلام لیست از نقطه استفاده نمی کردیم ولی در اینجا جلوی هر قلم از لیست یک نقطه داریم .
قالب HTML  این نوع لیست بصورت زیر است :

 



تگ < dl> و < dl /> بصورت زوج عمل می کند و < dd > و < dt > بصورت فرد
در فایل index.html موارد آموزشی را بصورت لیست تعریف دربیاورید . کار خود را آزمایش کنید .

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

1- چه فرقی بین لیست تعریف و لیستهای مرتب و نامرتب وجود دارد؟
2- در چه مواردی باید لیست تعریف بکار برد؟
3- چه فرقی بین دو تگ < dt > و < dd > وجود دارد ؟

تذکر :

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

oxielex

Combinations of metal ions with oxygen Comprises the major ores extracted inmining operations

  • Hematite
  • maquetite
  • corundum


Source آن بصورت زیر است :

 

 

 




موضوع مطلب :
نظر بدهید
آموزش HTML - درس 10 - کاراکترهای ویژه
دوشنبه 91 بهمن 16 :: 9:0 عصر ::  نویسنده : smfatemi

درس 10 - کاراکترهای ویژه 


اهداف این درس

- نشانه گذاری در HTML
- استفاده از علامات < > در هنگام لزوم در سند
- گذاشتن فاصله اضافی در بین کاراکترها

نشانه های تایید

بعضی اوقات در صفحه نیاز دارید از بعضی کاراکترهای ویژه استفاده کنید که به Iso مشهور هستند و در HTML نشان xxxxxxx مشخص می شوند.
برای دیدن مرجع این نشانه ها به آدرس زیر مراجعه کنید:
Iso characters
http://www.htmlhelp.com/refrence/charset
ممکن است بعضی اوقات مجبور به استفاده از علامت کوچکتر و بزرگتر < > در صفحه باشد که برای اینکه مرورگر آنها را بصورت Code ترجمه نکند .برای نمایش آنها نیاز به استفاده از کاراکترهای ویژه دارید.
< استفاده می شود برای &Lt
> استفاده می شود برای >
& استفاده می شود برای & amp

ایجاد فضای خالی

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

جدول کاراکترهای ویژه








Name

HTML

Copyright

& copy;

Trademark

& reg;

Cent

& cent;

Deqree sign

-& deg ;

double-less than

& laquo ;

Midline dot

& middot;

Micron

& micro ;




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

1- برای گذاشتن علامت بزرگتر و کوچکتر چه روشی دارید؟
2- برای گذاشتن فاصله چه می کنید ؟

تمرین

در صفحه وب خود از کاراکترهای ویژه استفاده کنید .

 




موضوع مطلب :
نظر بدهید
آموزش HTMH - درس 9 - به ردیف در آوردن متن
دوشنبه 91 بهمن 16 :: 8:57 عصر ::  نویسنده : smfatemi

درس 9 - به ردیف در آوردن متن


اهداف این درس

- به ردیف در آوردن متن
- کنترل بر جاهای دقیق متن و کاراکترها

شروع درس

در درس قبل آموختیم که مرورگر کلیه فضاهای خالی که در صفحه قرار دادیم چشم پوشی می کند ، به هر جهت بعضی از مواردنحوه آرایش کلمات در حمایت از طرح و ترکیب کلی صفحه مهم است . تگ Performat صفحه شما را دقیقا مانند آنچه که در ویرایشگر متنی تایپ نمودید نشان می دهد.
M n o s p a c ed
در ادامه بحث مطالب زیر را دنبال می کنیم :
1- فایل HTML با نام Index.html را در ویرایشگر خود باز کنید و موارد زیر را اضافه کنید .

نام دورهای اموزشی

نام دوره اموزشی

نام مدرس

internet

---

html

---

- نتایج خود را ذخیره کنید و صفحه را مجددا بارگذاری کنید .

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

1- در هنگام ترجمه مرورگر تگ Preformat چگونه عمل می کند؟
2- در چه مواقعی از این تگ استفاده می شود؟

 




موضوع مطلب :
نظر بدهید
آموزش HTML - درس 8 -ه - اتصالات ابر متن و تصویرهای لینک شده
دوشنبه 91 بهمن 16 :: 8:55 عصر ::  نویسنده : smfatemi

8-ه - اتصالات ابر متن و تصویرهای لینک شده


اهداف این درس

1- وارد کردن یک دگمه گرافیکی در صفحه وب برای اتصال به سند دیگر HTML
2- وارد کردن یک تصویر کوچک که مانند یک تمبر پستی برای نمایش یک Copy از عکس بزرگتر عمل می کند.

شروع درس


دکمه های اتصال

از درس قبل آموختید که چگونه یک ابر متن در سند خود ایجاد کنید که بیننده را به اطلاعات وابسته اتصال دهد. همچنین در درس (a 7) آموختید که چگونه یک عکس خطی را بصورت لینک در آورید . اگر بیاد بیاورید در درسهای قبل که یک رشته متن در Index.html -Lesson1.html را به صفحه دوم Lesson2.html اتصال دادیم که توضیح داده شد( در مورد آموزش از راه دور) حال در این صفحه می خواهیم بدانیم که چگونه یک دکمه اضافه کنیم که با اتصال بر روی آن ما را به صفحه اول بر گرداند.
به دستور زیر توجه کنید :
< a href="filex.html" >< img src="qraphic.gif" >go to document< /a >
دو صفحه وب شما رشته متن Go to Document و تصویر هر دو بصورت ابراتصال عمل می کنند و با کلیک بر روی آن به مرورگر می فهمانید که باید به صفحه filex.html باز گردد . معمولا متنها و عکسهایی که با حالت ابر اتصال باشند در صفحه متمایز هستند. امروزه خیلی از مرورگرها می توانند رنگ ابر متن را تغییر دهند . معمولا شما می توانید شناسایی کنید یک نامه ابرمتن در صفحه وب را به وسیله کشیدن ماوس روی آن تغییر رنگ می دهد و نیز هنگامی که یکبار بر روی متن کلیک کنید در بازگشت رنگ ابرمتن های بازدید شده تغییر کرده است از نقطه نظر یک طراح وب پیشنهاد می کنیم که وقتی می خواهید از تصویر به عنوان یک اتصال استفاده کنید . همچنین در تگ < Img> از صفات دیگری مثل attribute و Alt نیز استفاده می شود . کاربر با بارگذاری عکس را متوقف می کند حال می خواهیم یک اتصال گرافیکی ایجاد کنیم . در ابتدا باید در جایی از کامپیوتر خود عکس را ذخیره کنید .
1- صفحه Lesson1.html را باز کنید.
2- در بالای صفحه تغییرات زیر را ایجاد کنید :

3- نتایج خود را ذخیره و صفحه را مجددا بار گذاری کنید .
حال دوباره به سند Lesson1.html باز گردید.
1- صفحه Lesson1.html را باز کنید .
2- تغییرات زیر را در صفحه انجام دهید :


تذکر :

در تگ < Img src > از صفات height و width برای کوچک کردن تصویر استفاده کنید بطوریکه با کلیک روی آن عکس بزرگ به نمایش در آید .


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

1- چگونه یک دکمه گرافیکی در صفحه ایجاد می کنید ؟

تمرین

مطالب گفته شده را در صفحه خود بکار ببرید .

 




موضوع مطلب :
نظر بدهید
آموزش HTML - درس 8 - د
دوشنبه 91 بهمن 16 :: 8:51 عصر ::  نویسنده : smfatemi

8-د - اتصال به قسمتی از همان صفحه


تگ < name >


اهداف این درس

1 - ایجاد یک شاخه مخفی برای اشاره به یک قسمت خاص از یک سند HTML
2- ساخت و ایجاد یک اتصال ابرمتن که به بخش خاصی از یک سند متصل شوید .
3- ساخت یک ابرمتن برای اتصال به قسمتی از یک صفحه در یک سند HTML دیگر
4- ایجاد انواعی از ابر متنها برای صفحه وب

شروع درس

Anchor name یک نشانه مخفی ، برای اشاره به یک بخش خاصی از یک سند HTML و نیز می تواند برای اتصال به قسمتی از یک صفحه دیگر کاربرد داشته باشد . برای مثال می توانیم در یک صفحه ( در اینجا ) یک اتصال درست کنیم که با کلیلک بر روی آن به قسمت آخر صفحه پرش پیدا کنید .
قالب HTML آن عبارتست از
< aname="name" >Text to link to < /a >

نوشتن و ایجاد یک لینک (Name Anchor)

هنگامی که می خواهید یک ( Name Anchor ) ایجاد کنید مراحل زیر را دنبال کنید .

کاراکتر "#" به مرورگر شما می فهماند که باید در داخل سند به دنبال Anchor name باشد . اضافه کردن یک name anchor به index.html که در قبل ساختید.
1- سند index.html را باز کنید .
2- در بالای این متن را اضافه کنید .

3- در یک روش یکسان مانند بالا موارد زیر را نیز انتخاب کنید .

4- اگر صفحه را مجددا بارگذاری کنید از تغییراتی که انجام دادید چیزی دیده نمی شود و از چشم کاربر مخفی است .
اضافه کردن اتصالات (NameAnchor) به همان سند
1- باز کردن فایل Index.html
2- موارد زیر را اضافه کنید .
3- سند خود را ذخیره کنید و آن را مجددا بارگذاری کنید .
در پایان ما می خواهیم که هر کدام از موارد لیست بالا بصورت ابرمتنی باشند که ما را به قسمتی از همین صفحه هدایت کنند .
1- صفحه index.html را در ویرایشگر متنی باز کنید .
2- اولین مورد را بصورت فوق تغییر دهید .

3- نتایج خود را ذخیره و صفحه را مجددا بارگذاری نمایید.

اضافه کردن یک اتصال Anchor name به یک سند دیگر

شما میتوانید یک اتصال ایجاد کنید که به وسیله آن به قسمتی از یک سند دیگر هدایت شوید که دستور آن بصورت زیر است :

اگر چنین سندی در صفحه دیگری وجود داشته باشد
برای ایجاد چنین لینکی مراحل زیر را دنبال کنید :
1- سند Lesson1.html را که در قبل ایجاد کردید باز کنید .
2- در بین تگ و متن زیر را وارد کنید :

3- اسناد خود را ذخیره کرده و صفحه را مجددا بارگذاری کنید .
وقتی که بر روی ابر متن Return to training the web کلیک می کنیم و در صفحه Index.html در قسمت آموزش آن می شوید .

آزمایش


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

1- چگونه یک تگ Anchor name را می شناسید؟
2- مراحل ایجاد یک لینک به قسمت دیگر از یک صفحه چیست؟
3- چگونه این لینک را برای اتصال به قسمت صفحه دیگر آرایش می کنید؟
4- تفاوت بین تگ های زیر چیست ؟

تمرین

در صفحه خود از انواع name anchor استفاده کنید

 

 




موضوع مطلب :
نظر بدهید
<   1   2   3   4   5   >>   >