تبلیغات
تبلیغات متنی
پرچم تشریفات با کیفیت بالا و قیمت ارزان
پرواز از نگاه دکتر ماکان آریا پارسا
دکتر علی پرند فوق تخصص جراحی پلاستیک
تجهیزات و دستگاه های کلینیک زیبایی
محبوبترینها
سررسید تبلیغاتی 1404 چگونه می‌تواند برندینگ کسب‌وکارتان را تقویت کند؟
چگونه با ثبت آگهی رایگان در سایت های نیازمندیها، کسب و کارتان را به دیگران معرفی کنید؟
بهترین لوله برای لوله کشی آب ساختمان
دانلود آهنگ های برتر ایرانی و خارجی 2024
ماندگاری بیشتر محصولات باغ شما با این روش ساده!
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
قیمت انواع دستگاه تصفیه آب خانگی در ایران
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1851837396
آموزش زبان صفحات وب Html -
واضح آرشیو وب فارسی:سایت ریسک: آموزش زبان صفحات وب Html H-assan 17 بهمن 1384, 02:59مقدمه : همانطور كه ميدانيد صفحات وب صفحاتي هستند كه در اينترنت به كاربرده مي شوند.HTML يك زبان برنامه نويسي براي طراحي صفحات وب مي باشد. در حقيقت تمامي صفحات وب با اين زبان برنامه نويسي نوشته ميشوند. كلمه HTML مخفف كلمات Hyper Text Markup Language است.زبان برنامه نويسي HTML به شما توانايي فرمت متن ، اضافه كردن تصوير ، صدا و ويدئو و ... را در صفحات اينترنتي ميدهد. تگها در HTML : تگ در زبان برنامه نويسي HTML به كليدهاي مربوط به برنامه نويسي توسط HTML گفته ميشود تگها داخل دو علامت كوچكتر "<" و بزرگتر ">" قرار مي گيرند. تگها در HTML به سه صورت مورد استفاده قرار مي گيرند دسته اول اين تگها تگهايي هستند كه به سادگي در هر جايي نوشته ميشوند مانند تگ <HR> كه باعث رسم خط ميشود. مثال : <html> <body> welcome to our website <HR> </body> </html> دسته دوم تگهايي هستند كه بايد ابتدا و انتهاي مشخصي داشته باشند مثلا اگر تگ <B> در قسمتي از كد HTML مورد استفاده قرار گرفت ، بايد انتهاي اين تگ توسط </B> مشخص گردد توجه نماييد متني كه بين اين دو تگ قرار ميگيرد درشت نشان داده ميشود. مثال: <html> <body> <b>Welcome to our website</b> </body> </html> دسته سوم تگهايي هستند كه ضمن آنكه بايد ابتدا و انتهاي مشخصي داشته باشند شامل چند پارامتر نيز مي باشند. به عنوان مثال تگ FONT : <Font Face="Arial"></Font> در مثال بالا نام تگ FONT ميباشد و Face از پارامترهاي اين تگ است."Arial" هم مقدار انتخاب شده براي پارامتر Face است. مثال : <html> <body> <font face="arial" size=12> <b>welcome to our website</b> </body> </html> در درسهاي آينده با انواع بيشتر تگها آشنا خواهيد شد. ويرايشگر HTML: براي ويرايش يا ايجاد صفحات وب ساده ترين برنامه ممكن برنامه Notepad ويندوز است البته برنامه هاي ديگري نظير Frontpage نيز وجود دارند ولي براي آغاز كار استفاده از Notepad ميتواند بهتر باشد. بايد توجه داشته باشيد كه پس از نوشتن كدهاي HTML در داخل برنامه Notepad در آخر بايد آنها را با پسوندهاي *.htm - *.html ذخيره نماييد. ساختار صفحات وب : يك صفحه وب شامل دو بخش كلي سر و بدنه ميباشد در قسمت سر يا <Head> تيتر صفحه وب كه در كاوشگر اينترنت نمايش داده ميشود نوشته ميشود همچنين در اين قسمت علاوه بر تيتر صفحه فرمتها و اسكريپتهاي برنامه نويسي نيز نوشته ميشوند. اما در بخش بدنه يا <Body> قسمتي كه توسط بينندگان صفحه مشاهده مي گردد نوشته مي شود . اگر متني در اين قسمت نوشته شود توسط كاوشگر اينترنت نشان داده خواهد شد. مثال : <Html> <head> </Head> <Body> </Body> </Html> ايجاد يك فايل HTML : براي ايجاد يك فايل HTML شما بايد در ابتدا ، ابتدا و انتهاي آنرا مشخص نماييد. براي اين كار از دو تگ <html></html> استفاده مي گردد. بقيه كدها و عبارات HTML بايد داخل اين دو تگ قرار گيرد. براي مشخص كردن قسمت سر فايل از دو تگ <Head></Head> استفاده مي گردد كه اين دوتگ بايد بين دو تگ قبلي قرار گيرد. و در نهايت براي مشخص كردن قسمت بدنه از دو تگ <Body></Body> استفده مي گردد. با استفاده از اين تگ ميتوان مشخصات ظاهر صفحه وب مانند رنگ متن ، رنگ زمينه و ... انتخاب نمود. پارامترهاي تگ <Body> : اين تگ جزء دسته سوم تگها ميباشد يعني علاوه بر مشخص بودن آغاز و پايان داراي چند پارامتر نيز مي باشد يكي از اين پارامترها پارامتر TEXT مي باشد كه با استفاده از آن شما مي توانيد رنگ متن صفحه را تعيين نماييد پارامتر ديگر اين تگ پارامتر BGColor است با استفاده از اين پارامتر شما ميتوانيد رنگ زمينه را مشخص نماييد. مثال:در مثال زير ما يك فايل HTML ايجاد كرده ايم و همانطور كه مي بينيد براي تگ Body پرامترهايي نيز قرار داده ايم. <html> <head> </head> <body text=white bgcolor=black> </body> </html> تگ <Title> : هر كدام از صفحات وب مي توانند يك تيتر داشته باشند.كه اين تيتر در قسمت نوار عنوان كاوشگر اينترنت نشان داده مي شود.براي ايجاد تيتر صفحه وب از تگ <Title> استفاده ميشود اين تگ بين دو تگ <head></head> قرار داده مي شود. مثال: <html> <head> <Title>Computer Site</Title> </head> <Body> </Body> </Html> H-assan 17 بهمن 1384, 03:02تگ <BR> : این تگ در زبان برنامه نویسی HTML مانند کلید ENTER عمل میکند یعنی باعث میشود که متن یا هر چیز دیگری به سطر بعد منتقل شود.به مثال زیر توجه نمایید. <Html> <Body> Welcome to our WebSite<BR> Thank you for this visit <BR> </Body> </Html> تگ <CENTER> : این تگ موجب این میشود که متن یا موارد دیگر برنامه نویسی مانند تصاویر ، کلیدها و ... در وسط صفحه قرار گیرد برای درک بهتر این موضوع به مثال زیر توجه نمایید. <Html> <Body> <Center> Welcome to our website </Center> </Body> </Html> تگ <IMG> : میتوان گفت که این تگ یکی از تگهای پرکاربرد میباشد از این تگ به منظور قرار دادن تصاویر در صفحه وب استفاده میشود.این تگ دارای پارامترهای بسیاری میباشد که برای بهتر عمل کردن این تگ مورد استفاده قرار می گیرند. اولین پارامتر این تگ پارامتر Src میباشد که محل قرار گیری آدرس فایل تصویری میباشد. <Img Src="/Image/Cat.jpg"> پارامتر دیگر این Border میباشد . بوسیله این پارامتر میتوان حاشیه دور تصویر موردنظر را تنظیم نمود.در مثال زیر N مقدار یک عدد دلخواه شما میباشد. <Img Src="/Image/Cat.jpg" Border=N> و در نهایت بوسیله پارامترهای Width و Height میتوان طول و عرض تصویر را تنظیم نمود.در مثال زیر N مقدار عدد دلخواه شما برای تنظیم تصویر میباشد. <Img Src="/Image/Cat.jpg" Border=N Width=N Height=N> یک مثال کلی : <Html> <Body> <Center> Welcome to our Website<BR><BR> <Img Src="/Image/1.Gif " Border=2 width=200 height=200> </Center> </Body> </Html> تگ <A> : از این تگ برای ایجاد ÷یوند یا همان لینک در صفحات وب استفاده میشود.بوسیله پیوندها یا همان لینکها میتوان به صفحات دیگر رفت و یا کارهای دیگری را انجام داد. به مثال زیر توجه نمایید.بوسیله کد زیر شما یک پیوند ایجاد میکنید در قسمت مقابل پارامتر Herf آدرس فایل مقصد یا هر چیز دیگر نوشته میشود و در قسمت بعد همانطور که میبینید متن پیوند نوشته میشود. <A Herf="/Html/Contact.asp> Click Here </A> H-assan 17 بهمن 1384, 03:04پیوند دادن یک تصویر: امروز یک کدی رو به شما معرفی کنم که بوسیله اون میتونید از ترکیب کردن دو تگ <A> و <IMG> برای یک تصویر ÷یوند ایجاد کنید یعنی با کلیک کردن روی تصویر به صفحه دلخواه برید یا کار دلخواه خودتون رو انجام بدید. <A Herf="/html/about.htm"><Img Src="/image/01.gif"></A> اگر کد بالا رو درون طراحی خودتون قرار بدید و آدرس صفحه و همچنین آدرس تصویر رو درست تنظیم بکنید تصویری که انتخاب کردید به یک لینک تصویری تبدیل میشه. تگ <Table> : این تگ یکی از مهمترین تگهای زبان HTML میباشد که بوسیله این تگ و پارامترهایی که داره شما میتونید در صفحات وب خودتون جدول نیز رسم کنید.ابتدا تگ و پارامترهاش رو معرفی میکنم بعد یک مثال میزنم. حالت کلی: <Table> </Table> پارامترها : از پارامتر اول جهت رسم ردیف استفاده میشود و از پارامتر دوم جهت رسم یک ستون مورد استفاده قرار می گیرد. پرامتر سوم مشخص میکند که خطهای جدول چه مقدار ضخامتی داشته باشند که N برابر با یک عدد میشود. نهایت پارامترچهارم برای تعیین اندازه سطر یا ستونهای جدول استفاده میشود. در نهایت پارامتر آخر جهت قرار دادن جدول در یک سمت از صفحه نمایش مورد استفاده قرار میگیرد. <TR></TR> <TD></TD> Border = N Width – Heigh Align = "Left – Right – Center" یک مثال کلی : <Html> <Body> <center><h1><b>Create The table</Center></b></h1><Br> <"Table border=1 align="center> <Tr> <td>Part-1</td> <Td>Click</Td> <Td>Register</Td> </Tr> <Tr> <td>Part-2</td> <Td>Click</Td> <Td>Register</Td> </Tr> <Tr> <td>Part-3</td> <Td>Click</Td> <Td>Register</Td> </Tr> <Tr> <Td>Part-4</tdT <Td>Click</Td> <Td>Register</Td> </Tr> <Table/> </Body> </Html> در این قسمت شما با یکی دیگه از تگهای زبان HTML آشنا شدید که کار اون رسم جدول بود که فکر کنم خیلی در طراحی صفحات وب کاربرد داشته باشه.فکر کنم طریقه دیدن مثال بالا رو هم بلد باشید.اول اون رو تو محیط NOTEPAD کپی کنید بعد اون رو با پسوند *.HTM ذخیره کنید بعدش هم ببینید. H-assan 17 بهمن 1384, 03:08روش کدگزاری UTF-8 اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 اسنفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام در بخش head صفحات اچتمل به شکل زير استفاده شود: <meta "Content-Type" content="text/html; charset=utf-8"> در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخيص داده و ديگر مثلا نيازی به تعيين دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود. شناسه يا attribute ی به نام dir جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسی بايد با کمک روشی جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه يا attribute ی به نام dir يا همان direction اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد : dir="ltr" , Left-to-right text. - چپ به راست dir="rtl" , Right-to-left text. - راست به چپ مثلا برای نمايش جمله فارسی "سلام بر دنيای وب!" با کمک عناصر p يا div کافی است که به يکی از شکلهای زير عمل شود: <p dir="rtl"> سلام بر دنيای وب </p> <div dir="rtl"> سلام بر دنيای وب </div> در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد: <p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ... منبع () H-assan 17 بهمن 1384, 03:12متاتگ ها راهی برای شناساندن وب سایت شما به جهان خارج است . عنوان تگ هایی که برای صفحات سایت خود تعریف میکنید موتور های جستجوگر را در شناختن مطالب داخل سایت شما یاری میکند . دو نوع اصلی متاتگ وجود دارد : این متاتگ باعث میشود که اطلاعات اضافی ای همراه صفحه وب درخواستی شما در http header به مرورگر ارسال شود . مثلا میتوانید تاریخ انقضای اطلاعات را تعیین کنید یا میتوانید صفحه وب را با یک متا تگ خاص پس از چند ثانیه به صفحه دیگری بفرستید بدون دخالت کاربر ! این نوع از متاتگ برای تعیین اطلاعات داخل صفحه وب استفاده میشود که باعث میشود صفحه وب شما با راحتی بیشتری برای موتورهای جستجوگر شناخته شود ... مثلا زبان این صفحه ، نام طراح ، کلمات کلیدی این صفحه و ... NAME متاتگ ها کجای صفحه وب نوشته میشوند ؟ متاتگ ها را باید داخل تگ head نوشت . در صفحه هایی که از چند فریم درست شده باید در تمام صفحات متاتگ را نوشت. به مثال های زیر دقت کنید : content در متاتگ کارش معرفی مقداری هست که متاتگ با یکی از دو صفت name و در خود دارد . مثال : NAME="keywords" CONTENT=" persian macromediax dreamweaver"> تگ بالا را یه نگاه کنید . از نوع name است . مقدار name مساوی با keywords است . یعنی این متاتگ کارش شناساندن کلمات کلیدی سایت به موتور های جستجوگر است ... اگر میخواهید موتور های جستجو مانند گوگل سایت شما را بهتر بشناسند این تگ را به قالب سایت یا وبلاگ خود بیفزایید و در جلوی content کلمات کلیدی سایت خود را بنویسید . مثال : NAME="description" CONTENT=" persian web design center"> تگ بالا کارش افزودن توضیحات سایت شما به موتور های جستجوگر است . اگر این تگ را به وب سایت یا وبلاگ خود اضافه کنید از ماه آینده اگر کسی بصورت تصادفی در گوگل به سایت شما بر بخورد توضیحات داخل این متا تگ را بجای توضیحات میبیند . یعنی گوگل دقیقا از این متاتگ برای ذخیره اطلاعات درباره سایت شما استفاده میکند . پس بکاربردن این متا تگ ها خیلی مهمه ! مثال :<META "Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT"> تگ بالا تاریخ انقضای این صفحه وب را تعیین میکند . یعنی اگر کسی این صفحه وب را یکبار دیده باشد وقتی این زمان فرا برسد و او دوباره آدرس این سایت را در مرورگرش بزند این صفحه از داخل cache لود نمیشود بلکه از سرور دانلود میشود . منبع () mahdyonline 17 بهمن 1384, 08:03آفرین parkanet 17 بهمن 1384, 08:41بسيار مفيد بود MISS-LOPEZ 28 بهمن 1384, 02:07خیلی واضح و رسا بود اگه میشد تصویر هم بگذارید عالی میشد ممنون H-assan 28 بهمن 1384, 21:20منظور شما چیه از تصویر عزیز !
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 577]
-
گوناگون
پربازدیدترینها