صفحه 1:
صفحه 2:
لو رس
۳
cere aS
صفحه 3:
صفحه 4:
۵ 59393 دهي 5
نگ های HTML
«فیلم آموزشي HTML
كيري
صفحه 5:
امروز بخش جدیدی رابرای شماعز
ا ا ال ل ا ا لل می شود مقاله ای در
این زمینه به شما عزیزان ارائه کنیم. در اولین قسمت از این سری آموزشها با ما
باشید
BUILD YOUR Own
=s— a =
THE Ria TT VAN
USING Mis CSS
مقدمه:
چه کسانی باید این مطالب را بخوانند؟
|
ت .«طلحق شوند پس مسلما از سادم فریرن نکات آغاز مي شود
#تايراف ساحت يك وب سايت استاندارد > نيا نشان فى Pre
یک فصل از موضوع را آموزش دهيم و مسلما با بازخوردی که از خوانندگان خواهم
رای داد
صفحه 6:
معرفى زبان 811130/11 :
Hyper Text Markup) x=. HTML عبارت
©0130 1))است . 118101 زبان استاندارد طراحى صفحات وب است
ا ا ا ل 0
لال ا ا 1
-۲1 ی کزبانن شلنه ene بخثرهاىمختلف
0 0 تكاز هوجدا eee هم تلم اسرد 3
خولص مر بوط خود هستند .مين تكها به مرووكر معلام مىكنند كه هر
re a ee Yee S| Boe ae ا م ل ا ل ال ل
شود در يكصحفه [ میت ولنلنولع عناصر از قبيلمتن تسيتر.
عكس جدهلو ... را قرار داد. كه برلمىهر عنصر بايداز تكمربوط
به en sore oN كرد. صفحاتط111/1آ! فقتطاز كدها كهدبهصويت
تهستند تشكيشدهلند
صفحه 7:
حا فو ىن الويف
۱
ce peo eer Canoe I ا ا ا el |
شامل برنامه هايى است كه يا در سيستم شما موجود مى باشد و يا اين كه مى بايست آن هارا
نصب نمایید.
ed eee Cre Sk Ie Lt Eye Bee CC e Ta
۳
وسایل و برنامه های اصلی که شما نیازدرید:..
صفحه 8:
Be re
لك
Pere re s-1° Fane
No} <<) 9-0 Ieee PnP sre CE SE
اده نمایید. این متن: همان
js 2 طى كنيد
Sere tie ee een rane)
0 ne ee re
ج- برای فرستادن صفحه به محیط وب از دستور ۴ استفاده خواهیم کرد که در ادامه به آن اشاره میکنم.
صفحه 9:
CE
ى +603 كردن صفحات حود مى توائيد از
و
همچنین مرورگرهای گوناگونی وجود دارد که استفاده
1
یکی
۱
صفحه 10:
| ا ge)
Be ee here un eon res en RON ECC ICC ian eC
[۳ ee ee ene Here Eee ee ea
1 me Teel gre?
Sete Reed ا
رگ
صفحه 11:
۱ ر ند پت می نویسیم و بعد مراحل
قیل را بدهید تا در آنجا ذهیره شود
انتخاب نمایید البته با پسوند ۱1۲۲ مانند 6۵0896۰/۳۱ 6۱۲5-۷۷- ۳۱۷
منوى كشويى مال eet er را wale ens
از منوى كشويى 06001190 كزينه 8 وا
BUSES eee an)
حالا در فلدر مورد نظر فایلتان را با مرورگر باز نمایید
صفحه 12:
131 25139۱13۳ ar aoe ae
شايد به جرات بتوان كفت كه راحت ترين روش براى موقعينك دهى به عناصر
استفاده از موقعيت دهى مطلق براى عناصر است. در هنكام استفاده از موقعيت دهى
مطلق می بایست موقعیت آن عنصر را از بالا و چپ صفحه نیز معین کنیم. تصور
كنيد از يك مغازه جواهر فروشى مى خواهيد خريد كنيد و آدرس .يك قطعه طلا را
می خواهید به شخص فروشنده بدهید. می گویید " می توانم ن ساعتی را که در
ستون پنجم اسست و از بالاادر ردیف سوم قرار دارد را بینم؟"
ال د اا ا ا ا ا
جهت هاى هد نظر خود را (موقعيت أن عنصر از بالا و جب) در كنار موقعيت مطلق
ا ل ا prem 1
0 ]67 را برای یک 01۷ با عرض *90]0در نظر گرفته ایم تا هم از بالا و
oD 720) Ooi pe reas gS ee ee eae ores ey ۱
صفحه 13:
که
HTML ga & ل Fe er re cee rece eS NC
روند و باعث می شوند که مرورگر بتواند تشخیص دهد هر بخش چه
نوع عنصری است. هر تگ ۰۲۱۲1 یک بخش ابتدایی و یک بخش
eS neon eee a tee] |
کار می روند :مثال
< تگ انتها / > محتویات < تگ ابتدا >
< label >..... > اع6قا/ <
تك ابتدايى مشخص كننده آغاز تك و تك يايانى » مشخص كننئده انتهاى
تگ است . هر تگ ]۳۱۲ باید حتما در ادامه توسط تگ پایانی بسته
Re CIEE CMTS CPE] CCH TU rt rie W CHEE 3 ره
نوشته مى شوند » محتويات تك را تشكيل مى دهند .
صفحه 14:
WE raved ae y pte
تيترها عناصر بلاك و بسته شونده (0138311361©)هستند و سلسله مراتب مخصوص به خود را دارند و از
ار
۱ Cee Tas
16 همين ترتيب تا
1 PY SLE
یک تگ بلاک و بسته شونده (601631896۳) است و برای یک بلوک متنی استفاده می شود این بدان معنی
1
صفحه 15:
هت امغط عم/ا0061!>
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ره ور درایلیب اصصغط»>
<head>
<title>Lists - an introduction</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
Sees
Salone
<h1>Lists - an introduction </h1>
1۱ ei ew eet Cie Ret
۱ ter aco N NACI ter lel Rese
ا Tee eye
0 cae Mag oe se
<ul>
<اا/کاعنا 0ععاناط عز عن7<زا>
<۵08۱6۵>/۱ ۵۲۵6۲ 0ل۱<زا>
م هن كمون عننا كامام 06 طعمناط د غدن[< >
ند
۱ ae M ees
ee
<ذال> معنا غعمة عط وأ دل15<ذا>
<ذا/>عمه كط برها Sage
ees ا tee aes
<اه/>
>/0۵۷<
bad نات
صفحه 16:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
> 00 <
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK - let's make a splash! </p>
<h2>Welcome to our super-dooper Scuba site</h2>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our home
page.</p>
<h3>About Us</h3>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills"/></p><p>When we're not diving,
we often meet up in a local pub
to talk about our reent adventures (any excuse, eh?).</p>
<h3>Contact Us</h3>
<p>To find out more, contact Club Secretary Bob Dobalina
on 01793 641207 or <a
لمي ره ارت ور
bob@bubbleunder.com</a>.</p></body>
ساك
: حالاخروجى را
صفحه 17:
BubbleUnder.com
Diving cheb for the south-west UK ~ let's make a splash!
Welcome to our super-dooper Scuba site
Glad you could drop im and share some sr with us! Youlve pasted your underwater 0 thils and successfuly
found your way to the stat pomt - of inthis case, our boene page
About Us
When we're not denng. we offen meet up in a local pub to talk about our recest adventures (any excuse, ¢h7)
Contact Us
To feed out moce, contact Club Seceetary Bob Debalina o 01793 641207 or mad bob @ibubbleunder coms
صفحه 18:
ولی اینجا در قسمت 60108368 متن آبی رنگی را می بینید که لینک است یعنی تگ 8 ولی یک لینک
Bete eT OLS SEY ees OR Bree Tom eee eo nr pte ke ctr Ronn Peer
Li aCe) anciey ربب eve oS el
ea ne Rn Ie) ee sai
0 eee err barn erate emis 1 [eg
divers-circle.jpg" width:
<;"alt="A circle of divers practice their skills
Prom ewe yee ل ا را 0) 9 acon ome cao
COL: LN nn eee kL he eed ا ا LS
تصوير به بيكسل
1 Pa Ca RE
0 ie ee a cere rca
ا ا Dene Se Sn eS SYP eee
نشان نمیدهد به جای نمایش عکس این متن نمایش می یابد و اما فایده دیگر اهمیتش برای موتورهای جستجو
صفحه 19:
۷
ERO ear a ات ا ال و۱۳۹
پله این امکان در حال حاضر وجود ندارد و برای حرکت بین صفحات مختلف شما می بایست از
al. و یا 210600۲ استفاده نمایید.
<a href="filename.html">Link text here</a>
Sea ae یساس 0
صفحه 20:
تك هاى 00]©65الابه ٠" بخش زير تقسيم مى شود :
blockqoute>< /blockqoute>>
2. <q></q>
3. <cite>< /cite>1
REPT re POO CHEEN eM DMO FCI C4 RCSB
[oa
I'm said <q>font</q>but my friend said <q> font face
</q>
<م/>
صفحه 21:
۱3 ORR OSE:
ee een Ce ents ee Ee ا ا
em ,Strong’ us
7 pee rae) A Encore YS nea oe Suny panne ee ny
as italic! ts emss , bold, us strong
aa dere ا ا ae
صفحه 22:
فرض كنيد مى خواهيم در يك ياراكراف به خط جديدى برويم . براى اين كار از تف <]8 />استفاده مى كنيم.
ene a ل ا ل ۱
نکته مهم : از 0۳ اضافی پرهیز کنید
p>>
مت ولط
<br />
هع ع366 للامطد عدصلا علط
<</p
ae ی وت
۳ <abbr>
ای توصیف یک عبارت اختصار به کار می رود
صفحه 23:
جدول ها
- ۹
oe ارا سس
sls Sl td G,><td> جدولى «S sxstable data) حاوى سلول
داده است.يك سلول داده مى تولند حاوى متن . عكس » ليشت ها ء ياراكراف ها ء
فرم ها. خط هاى افقى و جدول ها و... باشد و برخى از صفات عبارت است
۳۳ توضيحات
<عاطاه‌ا>ک یک جدول معرفی می کند
<th> ا ۳
<> یک سطر حدول معرفی می کند 1
<td> يك سلول جدول معرفى مى كند 3
BUCS ESC yo eke) We tore) eli felab
۰ <وداهتواهت> یک گروه از ستون ها معرفی می کند
aro i ا ل كيك
<thead>
sibody>
<ifoot>
صفحه 24:
اف فد
02 eae
address>>
Behzad alibeigi
<br/>
<a href =mailto:.. >email</a><br/>
عممطم :...
> > 300155
<dfn>
|
اطلاعات بیشتری در اختیار کاربر قرار دهیم .
<<
The <dfn title="microsaft web browser">Internet
explorer </dfn> is the most popular browser used
undermater.
<<p
صفحه 25:
3
وا 1۳0۳
/
CSS for Bubble Under site
3
0
font-weight: bold;
color: blue;
#۹ }
صفحه 26:
اف
همطنطور که قبلاهم دیدید برلعينكدادنبه عناصر لستفادم میشود.
فا یی ری نت
به دو صوورتمقلار دهومىشود يانام ينكذ١1 916 ,180 ۱
مانند 3360664
Font-family
بالینخصیصه هر فونتیرا که بخولهید میت سولنید بسه متون. اینتشود لعمل لک نید
Font-size
مقلار ده نمت ولند مثليكواز كزينه هاويير باشل
-۱ نام هایآماده برلی‌سایز ا
5 De وت ٠»
رت
ا
صفحه 27:
3- فونت دهى به صورت مطلق؛
YS ااه ا لزه
٠ء به صورت 00108, مانند: 1612م
Font-weight
ضخامت فونت است كه به دو صورت |001173 يا 010 مقدار دهى مى
شود.
Font-style
سب فونت است كه به دو صورت (015703 we usd) jladeitalic L
شود.
Text-decoration
مدل دهى به متن به روز ارت رز تیار 3۳و۱۱
through
ضخامت پردر:
۱ ©). cars Cen tel a bey pone
به صورت پیش فرض هم می توانید از کلمات کلیدی خود 1]:17ابرای ضخامت دادن به بردر
yee eg Ne eC Ca ا ا [01am see 01 كر ا
صفحه 28:
صفحه 29:
اشکال ساده تر میشود زیرا کد ازیک.
استاندارد پیروی میکند. شما نباید دیگر درباره کد نوسی و
نگه داری از چندین نسخه از کد که فرض شده ظاهر.
یکسانی نمایش میدهند
صفحه 30:
صفحه 31:
به امید موفقتي روز افزون
امروز بخ ش جدیدی را برای شم ا عزیزان در نظ ر گرفت ه ایم .ای ن بخ ش شام ل
آموزش مرحله به مرحله طراحی وب سایت می باشد که سعی می شود مقاله ای در
ای ن زمین ه ب ه شم ا عزیزان ارائ ه کنیم .در اولی ن قس مت از ای ن س ری آموزشه ا ب ا م ا
باشید
مقدمه:
چه کسانی باید این مطالب را بخوانند؟
این مطالب برای کسانی مفید است که از طراحی سايت اطالعي ندارند و می خواهند تازه به جمع
طراحان سایت ملحق شوند پس مسلما از ساده ترین نکات آغاز می شود
HTMLراه را برای ساخت یک وب سایت استاندارد به شما نشان می دهد .ذکر در هر مقاله
حداکثر یک فصل از موضوع را آموزش دهیم و مسلما با بازخوردی که از خوانندگان خواهم
گرفت کیفیت کار و هم چنین وسعت کار را افزایش خواهم داد
معرفی زبان : HTML
عبارت HTMLمخفف(Hyper Text Markup
)Languageاست Html .زبان استاندارد طراحی صفحات وب است
و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به
کدهای HTMLتبديل شده و توسط مرورگر نمايش داده می شوند.
7ت ب77ه ا7ينم7عنیک77ه ب77خشهایم7ختلف
HTMLیکز7بانن77شان7ه گ7ذار7یا7س ،
ت77وس7طا7جزا7يیب77ه ن7ام ت77گاز ه7م ج7دا ش7ده ، 7ک77ه هر ک7دا7م دارا7یک7ار7برد و
خ7وا7صم7ربوط خ7ود ه7ستند .ا7ينت77گها ب77ه م7رور7گر ا7عالم م7یک77نند ک77ه هر
7ت77مايشداد7ه7
ب77خشاز ص77فحه چ7ه ن7وع ع7نصریا7س7تو ب77ايد ب77ه چ7ه ص7ور ن
ش7ود در ي77کص77حفه HTMLم7یت77وا7نا7نوا7ع ع7ناصر از ق7بيلم7تن ،ت77يتر ،
ع7کس ،ج7دو7لو ...را ق7رار داد ،ک77ه ب77را7یهر ع7نصر ب77ايد از ت77گم7ربوط
ب77ه آ7نا7س7تفاد7ه 7ک7رد .ص77فحات HTMLف77قطاز ک7د ها ک77ه ب77ه ص7ور7ت
م7تنه7ستند ت77شکيلش7ده 7ا7ند
چگونگي ابتدايي كار با html
این قسمت در واقع آماده کردن کامپیوتر برای کار ،قبل از زدن اولین طرح شماست.
قبل از این که وب سایت خودتان را بسازید ،می بایست کامپیوتر خود را برای کار آماده نمایید که
شامل برنامه هایی است که یا در سیستم شما موجود می باشد و یا این که می بایست آن ها را
نصب نمایید.
برنامه های زیادی در بازار موجود می باشد ولی در ابتدا از برنامه های رایگان و قابل دسترس
استفاده می کنیم.
وسایل و برنامه های اصلی که شما نیاز دارید:
الف)وسیلۀ ابتدایی برای ویرایش فایل های متنی که در واقع صفحه وب شما را شامل میشود
ب)یک مرورگر ( )web browserبرای دیدن صفحات وب در آن
ج)فرستادن صفحه وب سایت به محیط اینترنت با استفاده از ftp client
چون اکثر کاربران ما درایران از ویندوز استفاده می کنند پس ابزارهای موجود در ویندوز را
بررسی خواهیم کرد
ابزارهای اولیه در ویندوز:
الف-editکردن متن :برای editکردن متن در ویندوز می توانید از Notepadاستفاده نمایید .این متن ،همان
صفحۀ وب است .
برای دسترسی به این برنامه در محیط ویندوز مسیر زیر را طی کنید:
Start > All Programs > Accessories > Notepad
ب -دیدن خروجی فایل :برای دیدن کار خروجی می بایست از مرورگر و یا browserاستفاده کنیم .مرورگرهای
متفاوتی وجود دارد که بحث آنها بسیار مفصل است ولی در محیط ویندوز مرورگر Internet Explorerدر
دسترس است.
شما می توانید آن را در دسکتاپ خود و یا Quick Launchویا فولدر برنامه ها و یا در منوی startپیدا کنید.
ج -برای فرستادن صفحه به محیط وب از دستور ftpاستفاده خواهیم کرد که در ادامه به آن اشاره میکنم.
ابزارهای دیگر:
برای editکردن صفحات خود می توانید از برنامهNoteTabاستفاده کرد .مزیت استفاده از آن اینست که می توانید تب های
مختلفی را برای صفحات مختلف باز کنید و بعد از بستن هم در حافظه ش می ماند و برای دفعه بعد هم باز می ماند.
همچنین مرورگرهای گوناگونی وجود دارد که استفاده از آن ها را در کنار Internet Explorerتوصیه می کنم .اما در اینجا از
یکی از بهترین آنها را نام می برم firefox :
مرحله آخر -درست کردن مکانی است برای فایل های ساخته شده :
بعد از ساختن فایل های خود مدیریت آنها بسیار مهم است و این که در کجا فایل اصلی و در
کجا تصاویر قرار گیرد و به همین ترتیب تمام عناصر وب سایت.
شما باید یک فولدر بسازید و تمام عناصر وب سایت خود را در آن قرار دهید .فرض کنید در
دسکتاپ خود می خواهید یک وب سایت بسازید.
Right click > new > folder
سپس نام وب سایت را انتخاب نمایید .حاال یک فولدر دارید که فایل اصلی به همراه تصاویر
و ....., css ,htmlرا داخل آن قرار می دهید.
ابتدا برنامه را به صورت زير در ند پت مي نويسيم و بعد مراحل ذخيره سازي آن به صورت زير است
مسیر فلدر قبل را بدهید تا در آنجا ذخیره شود.
نام فایل را انتخاب نمایید البته با پسوند htmlمانند my-first-webpage.html
از منوی كشویی save as typeگزینه all filesرا انتخاب نمایید
از منوی كشویی Encodingگزینه UTF-8را انتخاب نمایید.
و حاال دكمه saveرا بزنید.
حاال در فلدر مورد نظر فایلتان را با مرورگر باز نمایید .تبریك شما اولین صفحه وب خودتان را ساختید!
موقعیت دهی مطلق( : )absolute
شای د ب ه جرات بتوان گف ت ک ه راح ت تری ن روش برای موقعی ت ده ی ب ه عناص ر
استفاده از موقعیت دهی مطلق برای عناصر است .در هنگام استفاده از موقعیت دهی
مطل ق می بایست موقعی ت آ ن عنص ر را از باال و چپ ص فحه نی ز معی ن کنیم .تص ور
کنید از یک مغازه جواهر فروشی می خواهید خرید کنید و آدرس یک قطعه طال را
می خواهید به شخص فروشنده بدهید ،می گویید " می توانم آن ساعتی را که در
س تون پنج م اس ت و از باال در ردی ف س وم قرار دارد را ببین م؟"
اس تفاده کردن از موقعی ت ده ی مطل ق ب ه س ادگی انجام م ی شود تنه ا کافیس ت ک ه
جهت های مد نظر خود را (موقعیت آن عنصر از باال و چپ) در کنار موقعیت مطلق
داده شده ب ه عنص ر در فایلhtmlآ ن اضاف ه نمایید .در مثال زی ر ،م ا موقعیت های
topو leftرا برای یک divبا عرض 90pxدر نظر گرفته ایم تا هم از باال و
هم از سمت چپ پنجره مرورگرمان به میزان px200فاصله ایجاد کرده ایم.
مفهوم تگ های : HTML
تگ های HTMLبرای نشانه گذاری محتويات صفحات به کار می
روند و باعث می شوند که مرورگر بتواند تشخيص دهد هر بخش چه
نوع عنصری است .هر تگ ، HTMLيک بخش ابتدايی و يک بخش
انتهايی دارد که هم نام بوده و به صورت استاندارد طبق شکل کلی زير به
کار می روند :مثال
< تگ انتها > /محتويات < تگ ابتدا >
< > label > ..... < /label
تگ ابتدايی مشخص کننده آغاز تگ و تگ پايانی ،مشخص کننده انتهای
تگ است .هر تگ ، HTMLبايد حتما در ادامه توسط تگ پايانی بسته
شود .کليه نوشته ها و تگ های ديگری که در بين تگ ابتدا و پايان
نوشته می شوند ،محتويات تگ را تشکيل می دهند .
تیترها و سلسله مراتب آن ()H
تیترها عناصر بالك و بسته شونده ()containerهستند و سلسله مراتب مخصوص به خود را دارند و از
h1تا h6وجود دارند.
از h1برای مهم ترین تیتر از h2برای تیتر كم ارزش تر و 7از h3برای تیتر كم ارزش تر از h2و به
همین ترتیب تا h6
پاراگراف ()p
یك تگ بالك و 7بسته شونده ( )containerاست و برای یك بلوك متنی استفاده می شود این بدان معنی
است كه متن های خوتان را باید داخل این تگ قرار دهید.
لیست ()list
فرض كنید می خواهید لیست وب سایت های طراحی شده خودتان را نمایش دهید ،به ليست زير توجه نماييد
Ol-order listابرای لیست های ترتیبی
Ul-unorder listبرای لیستهای غیر ترتیبی
به اين مثال توجه نمايد
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lists - an introduction</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
</head>
<body>
<h1>Lists - an introduction </h1>
<p>Here's a paragraph. A lovely, concise little paragraph.</p>
<p>Here comes another one, followed by a subheading.</p>
<h2>A subheading here</h2>
<p>And now for a list or two:</p>
<ul>
<li>This is a bulleted list</li>
<li>No order applied</li>
<li>Just a bunch of points we want to make</li>
</ul>
<p>And here's an ordered list:</p>
<ol>
<li>This is the first item</li>
<li>Followed by this one</li>
<li>And one more for luck</li>
</ol>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK - let's make a splash!</p>
<h2>Welcome to our super-dooper Scuba site</h2>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our home
page.</p>
<h3>About Us</h3>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills"/></p><p>When we're not diving,
we often meet up in a local pub
to talk about our reent adventures (any excuse, eh?).</p>
<h3>Contact Us</h3>
<p>To find out more, contact Club Secretary Bob Dobalina
on 01793 641207 or <a
href="mailto:test@test,com">email
bob@bubbleunder.com</a>.</p></body>
</html>
حاال خروجی را ببینیم:
و7لی اینجا در قسمت contactمتن آبی رنگی را می بینید که لینک است یعنی تگ aولی یک لینک
معمولی نیست .این یک لینک برای ارسال ایمیل است و اگر در ویندوز خود برنامه مدیریت ایمیل داشته باشید
مانند outlookبا آن می توانید به شخص مورد نظر ایمیل ارسال نمایید.
صفحاتی که تا به حال درست کرده ایم به صورت متنی و بسیار کسل کننده است و برای جذابیت بیشتر می
بایست از عکس ها استفاده کرد .با استفاده از تگimgمی توان تصاویر را به صفحه اضافه کرد .بدین ترتیب :
<"img src="divers-circle.jpg" width="200" height="162
>/ "alt="A circle of divers practice their skills
این تگ یک تگ emptyاست و 7دارای attributeهای زیر است :
srcبرای آدرس عکس alt،برای توضیح تصویر width،عرض تصویر به پیکسل height،ارتفاع
تصویر به پیکسل
فقط دقت نمایید که آدرس از جایی که صفحه شما قرار دارد حساب میشود یعنی اگر تصویر در همان فولدری
باشد که صفحه شما قرار دارد به طریق باال آدرس می گیرد.
Altهم متنی است که عکس را توصیف می کند و در مرورگرهای متنی و یا زمانی که مرورگر تصاویر را
نشان نمیدهد به جای نمایش عکس این متن نمایش می یابد و اما فایده دیگر اهمیتش برای موتورهای جستجو
است.
لینک کردن صفحات به هم:
صفحه اول یا همان indexرا باز کنید و سعی کنید از آن به صفحه contactبروید!
بله این امکان در حال حاضر وجود ندارد و برای حرکت بین صفحات مختلف شما می بایست از
linkو یا anchorاستفاده نمایید.
<>a href="filename.html">Link text here</a
است ه آنجا ل ینکش ود
ب
است ه ق رار
hrefی ک attributeاستو ب یانک ننده آدرسی ک
است ه آنجا ل ینکش ود
ب
ایست ه ق رار
ک
filename.htmlن ام ص فحه
Link text hereچیزیک ه در ص فحه htmlد یده م یش ود و ن ام ل ینکمورد ن ظر است
نكته:
این را هرگز فراموش نکنید که از کلمات با معنی برای لینک دهی استفاده نمایید و از کلماتی مانند
"اینجا را کلیک نمایید" پرهیز کن
: بخش زیر تقسیم می شود3 بهQuotes تگ های
blockqoute>< /blockqoute>< .
2. <q>< /q>
3. <cite>< /cite>1
:q
..این تگ برای نقل و قول برای یک یا دو کلمه استفاده می شود
p><
I'm said <q>font</q>but my friend said <q> font face
</q>
</p>
: cite
این تگ برای نام نویسنده و یا نویسنده کامنت استفاده می شود
p><
but then <cite> ali</cite>said <q> no think these font
work betfer </q>
><p
: blockquote
گ راياشاره ب ه ی کمرجع خاص م عموال ب رایی کجمله استفاد ه م یش ود .
اینت ب
ت77گهای strongو : em
اهمیت لماتاستفاد ه م یش وند .و اما در ظ اهر ،ت گ
ک
رای رجسته س ازیو
ب
اینت گب
strongک لمه را boldو ت گ emک لمه را italicم یک ند.
این کته را اضافه ک نم ک ه اینت گها ب رایموتورهایجستجو از اهمیتخاصیب رخوردار
ن
است
.
<>p
this is a <strong>bold text</strong> this is a
><em>italic text</em
> </p
خط فاصله بین متون : p
فرض کنید می خواهیم در یک پاراگراف به خط جدیدی برویم .برای این کار از تگ <>/ brاستفاده می کنیم.
این تگ ،یک تگ emptyاست و در ساختار xhtmlبه صورت < >/ brنوشته می شود .
نکته مهم :از brاضافی پرهیز کنید
<>p
this is a test
><br /
this line show after break
></p
تعریف تگ های خاص:
<>abbr
برای توصیف یک عبارت اختصار به کار می رود
<>p
The<abbr titile="search engine optimization">seo</abbr> is good
for your site
><p
><acronym
برای توصیف نامها ی محاوره ای اختصار
<>p
Can I get this <acronym title="as soon as possible">AsAp
></acronym
><p
جدول ها
جداول بوسیله برچسب<<tableمعرفی می شوند.هر جدول به سطرها (بوسیله
برچسب << trو هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب
<>tdحروف tdبیانگر داده جدولی ((table dataهستند که حاوی سلول
داده است.یک سلول داده می تواند حاوی متن ،عکس ،لیست ها ،پاراگراف ها ،
فرم ها ،خط های افقی و جدول ها و ...باشد و برخي از صفات عبارت است
:>address<
برای نوشتن اطالعات تماس
address><
Behzad alibeigi
<br/>
<a href =mailto:.. >email</a><br/>
Phone :...
></address
>dfn<
برای معنای کلمات استفاده می شود و یا توصیف یک کلمه و یا مثال جایی که می خواهیم
. اطالعات بیشتری در اختیار کاربر قرار دهیم
p><
The <dfn title="microsaft web browser">Internet
explorer </dfn> is the most popular browser used
undermater.
><p
نحوه ساخت یک External CSS:
editorخود را باز نمایید و متن cssخود را در آن بنویسید
*/
CSS for Bubble Under site
*/
{p
;font-weight: bold
;color: blue
}
سپس فایل را با نام style1.cssذخیره کنید همان طوری که فایل htmlرا ذخیره نمودید
.حاال می بایست فایل ساخته شده را به صفحه متصل نمایید.
نکته :فواید استفاده از کامنت در cssهمانند htmlمی باشد و برای تفکیک کد های
cssدر پروژه های بزرگ و گروهی استفاده می شود .برای این منظور از عبارت زیر استفاده می
کنیم :
/* comment hear */
Color
همانطور ک ه ق بالهم د یدید ب رایرنگداد نب ه ع ناصر استفاد ه م یش ود.
Background-color
ورت قدار د هیم یش ود ی ا ن ام رنگ( )..,blue, red, greenی ا ب ا اعداد د سیما ،ل
م
ب ه دو ص
مانند3acbef# :
Font-family
ب ا اینخصیصه هر ف ونتیرا ک ه ب خواهید م یت وانید ب ه م تونس ایتخود اعما لک نید.
Font-size
م قدار د هیآنم یت واند م ثلی کیاز گ زینه هایزیر ب اشد:
ونت
؛
-1ن ام هایآماد ه ب رایس ایز داد نب ه ف
• XX-small
• X-small
• Small
•
Medium
• Large
• X-large
• Xx-large
سبی
ورت ؛
ن
ونت هیب ه ص
د
-2ف
• ب ه ص ورتدرصدی120% :
1.2em
• ب ه ص ورت: em
-3
فونت دهی به صورت مطلق؛
• به صورت ، pixelمانندpx12 :
• به صورت ،pointمانندpt12 :
Font-weight
ضخامت فونت است که به دو صورت normalیا boldمقدار دهی می
شود.
Font-style
سبک فونت است که به دو صورت normalیا italicمقدار دهی می
شود.
Text-decoration
مدل دهی به متن به صورت none, underline, overline :و یا line-
through
ضخامت بردر:
مقدار ضخامت بردر را می توان با واحد های px ، ptو یاemبه کار برد.
به صورت پیش فرض هم می توانید از کلمات کلیدی خود htmlبرای ضخامت دادن به بردر
استفاده کنید که شامل سه سایزو باریک ( ، )thinمتوسط ( )mediumو ضخیم ()thick
پايان
