اشاره : در اين مقاله نيز براي آشنايي بيشتر با برخي دستورات وبلاگنويسي ما را همراهي كنيد.
مقدمه اگر به خاطر داشته باشيد در مقالههاي قبلي كدنويسي HTML در صفحات وبلاگ را به طور مختصر توضيح داديم و چند مثال کاربردي را در وبلاگ بيان كرديم، از قبيل تغيير زمينه، ايجاد لينك و پيوند، قرار دادن فايلهاي مالتيمديا و گذاشتن نوشته متحرك در صفحه. در اين مقاله ميخواهيم با كدهاي بيشتري آشنا شويم. اين كدها را هم ميتوانيد ابتدا در يك ويرايشگر متني مثل Notepad امتحان كرده و سپس آن را با پسوند *.htm يا *.html ذخيره نموده و در مرورگر وب مثلIE باز و يا اينكه مستقيما در قسمت ويرايش قالب وبلاگ خود تست كنيد.
جدولبندی ( Table ) در طراحی وب سايت، جدول عنصري کليدي است و برای اموري مثل منظم کردن و چيدن عناصر ديگر و زيباتر کردن Layout از آن استفاده ميشود. برای ايجاد جدول از تگ دوبل
…
استفاده ميشود. داخل آن برای سطرها از تگ دوبل
…
( مخفف Table Row ) و برای خانهها از تگ دوبل (
…
( Table Data استفاده ميگردد. دادههاي داخل هر خانه، میتواند نوشته، عکس، فيلم، فرم و چيزهاي ديگر باشد و اين دادهها را ميتوان داخل تگ
قرار داد. جدول دارای صفات زير می باشد: Border : ميزان ضخامت حاشيههای جدول بر حسب Px . اگر مقدار آن را صفر قرار دهيم جدول حاشيهاي نامرئي خواهد داشت. Width : ميزان پهنای سلولهای جدول. اين ميزان يا عدد است و يا به صورت درصد بيان ميشود. Height : ميزان ارتفاع سلولها Align : محل قرارگيری جدول (Right، Center، Left ) Bgcolor : رنگ داخل سلولها Background : عکس پس زمينه جدول. بايد نام و پسوند عکس را در اين صفت داد. Bordercolor : رنگ حاشيههای جدول Bordercolorlight : رنگ حاشيههای بالا وسمت چپ Bordercolordark : رنگ حاشيههای پايين و سمت راست Cellpadding : عدد برحسب Px برای فاصله حاشيه جدول از عبارت يا عنصر داخل آن Cellspacing : فاصله سلولهای جدول از يکديگر Frame : حاشيههای خارجی جدول که میتواند مقادير Above، Below، Hsides، Vsides، LHS، RHS، "Void"، Box / Border را بگيرد. Rules : حاشيههای داخلی جدول که All، Cols، Rows، None را میپذيرد.
مثال ١ : ساخت جدولي 2 در 2 و نوشتن اعداد 1 تا 4 در خانههاي آن ( به شكل ١ دقت کنيد)
1
2
3
4
صفات تگ
: سلولهای جدول میتواند از صفات بالا موارد width، height، bgcolor،background ، align را بپذيرد و علاوه بر آنها صفات زير را نيز می پذيرد : Valign : نحوه تراز شدن عناصر از جنبه عمودي در سلولهای جدول که میتواند top, bottom, middle را قبول کند. Colspan : که عددي برای سلولهای افقی يکی شده را میپذيرد. Rowspan : عددي برای سلولهای عمودی يکی شده را میپذيرد.
صفات تگ
: تگ سطر يا tr نيز صفات height، bgcolor، align، valignرا میپذيرد. نکته : میتوان برای Table Header بجای تگ
از تگ دوبل
استفاده کرد. در اين حالت نوشته داخل اين تگ وسط چين و توپر ميشود. نكته : ميتوان برای عنوان جدول از تگ دوبل
…
استفاده کرد و صفت Align با مقادير Top، bottom، left، right بکار برد. نكته : بهتر است اگر سلولي هيچ دادهاي ندارد از كد فاصله در بين آن استفاده كرد، يعني
شکل1
مثال ٢ : درست كردن پرچم ايران در وبلاگ ( به شكل ١ دقت کنيد)
نکته : کد مربوط به مثال 2 در همان فايل مثال 1 ذخيره شده است.
فرم (Form) برای ساخت يک فرم از تگ دوبل
استفاده میکنيم. فيلدهاي متنی، Password ، Radio Buttons ، Checkboxes، Buttons ، دکمه Submit و Reset و فرمهای نوشتاری ( Textarea ) و منوهای آبشاری ( Select ) در داخل اين تگ دوبل قرار می گيرند.
صفات تگ Form 1 ـ "Name = "FORM NAME : نام فرم مورد نظر 2 ـ "Method = "SEND METHOD : متد ارسال فرم که ميتواند Get، Postباشد. 3 ـ "Action ="URL : آدرسي که پس از زدن Submit آن عمل انجام ميشود و يا صفحهای که کاربر ميتواند بعد از ارسال فرم آن را مشاهده کند. برای قرار دادن موارد اوليه از تگ استفاده میکنيم با شناسه "type="text و شناسه Size برای تعيين اندازه فيلد.برای محدود کردن مقداری که کاربر در فيلد وارد می کند از صفتMaxlength استفاده ميشود.
Type : مقادريري که جلوي Type ميتوان قرارداد به ترتيب زير است: ( به کد مثال 3 دقت نماييد ) • برای متن و عدد از مقدار "Text" برای آن استفاده می کنيم • برای اين که کلمه عبور به شکل * دريافت شود از مقدار Password استفاده ميگردد. • برای قرار دادن دکمه تيک از مقدار "Checkbox" : • برای قرار دادن دکمه راديويي از "Radio" : • برای قرار دادن دکمه معمولی از مقدار "Button" • برای قرار دادن دکمه ارسال اطلاعات به سرور از مقدار "Submit" و برای پاک کردن مقادير فرم از مقدار "Reset" استفاده می کنيم. Size : برای ذکر اندازه فيلدهای فرم و مقدار آن. عددی بر حسب کاراکتر میباشد. Maxlength : حداکثر مقداری که فيلدهای فرم میپذيرند ( بر حسب کاراکتر ) Value : برای تعيين مقدار اوليه و پيش فرض Name : برای نامگذاری فيلدهای فرم براي رجوع به آنها نکته : برای دو نوع Checkbox و Radio ميتوان از گزينه Checked برای انتخاب پيشفرض آنها استفاده کرد. نکته : برای نوشته روی دکمه از صفت Value="LABEL" در تگ <"input type="submit>استفاده میکنيم. نکته : برای غير فعال کردن اجزاء فرم از کلمه Disabled در تگ آن استفاده میکنيم. نکته : برای فقط خواندنی کردن جزئی از فرم و جلوگيری از تغيير محتويات فرم از کلمه Readonly استفاده ميشود. نکته : تگی بنام وجود دارد که نوشته وسط آن يا عکس ( <"img src="PICTURE> ) را به صورت دکمه نشان میدهد.
فرم های نوشتاری ( Textarea ) برای فيلدهای متنی چند خطی که مانند هستند از تگ دوبل در داخل تگ دوبل
صفات Textarea عبارتند از: Cols : برای زياد کردن طول و اندازه textarea که مقدار آن تعداد کاراکترهاست. Rows : برای افزايش سطرهای Textarea که مقدار آن تعداد خط هاست. Wrap : صفت Wrap="off" برای اين است که Textarea نوار پيمايش پايين هم پيدا کند و تا کاربر Enter نزده به خط بعد نيايد.
ساخت منوی آبشاری برای اين منوها از تگ دوبل و برای هر گزينه داخل منوی Select از تگ مفرد
نکته : براي تنظيم دقيق و منظم شدن فرمها بهتر است آنها را در داخل سلولهاي جدول طراحي كنيم.
مثال ٣ : ايجاد فرم ثبت نام در وبلاگ ( به شكل١ دقت نماييد ) ( در اين مثال براي جلوگيري از پيچيده شدن برنامه، از جدول استفاده نكردهايم )
تگهای مربوط به 1 ـ از تگ دوبل براي عنوان صفحه وب در Head استفاده ميکنيم. 2 ـ برای فارسی نويسی از متا تگ زير در قسمت هد صفحه استفاده میکنيم:
سپس در هر جای صفحه که خواستيم فارسی بنويسيم بايد آن را در داخل تگ دوبل
…
يا تگ
…
به صورت فارسی تايپ کنيم. نکته : برای اينکه سايت در Search Engines ها مورد جستجو قرار گيرد از متا تگ زير در هد استفاده میکنيم که شامل توصيف مناسب سايت و کلمات کليدی سايت میباشد:
<" … "= meta name="description" content> <" … "= meta name="keywords" content>
البته اگر وبلاگ شما روي سرور بلاگفا باشد، اين سايت شما را در ليست موتورهاي جستجوي مفيد اضافه ميكند ولي براي بهتر معرفي شدن وبلاگ هم ميتوانيد از تگهاي بالا بهره ببريد.
مهدي سروري دي ماه 87 شماره 47
+ نوشته شده در چهارشنبه بیست و ششم آبان ۱۳۸۹ ساعت 18:8 توسط سید علی باقری قادیکلایی
|