این مقاله جامع آموزش HTML رایگان برای دید پیدا کردن شما عزیزان به دنیای طراحی وب و شروع یادگیری HTML است. اما اگر می خواهید در طراحی وب بی رقیب شوید و نیاز به منبعی رایگان و کامل برای آموزش اچ تی ام ال یا آموزش CSS داشتید می توانید از لینک های زیر نیز استفاده کنید :
همانطور که میدانید صفحات وب صفحاتی هستند که بیشتر در اینترنت به کار برده میشوند در حقیقت تمام صفحات وب با HTML نوشته میشود اگر صفحه نیز با استفاده از Php , ASP یا زبان های دیگر ساخته شده باشد خروجی آن فقط دستورات Html و Javascript می باشد . Html یا Hyper Text Markup Language به ما توانایی تعیین فرمت متن ، اضافه کردن تصاویر ، صدا و ویدئو و ... در صفحات اینترنت را میدهد.یک صفحه وب چیزی جز یک فایل از نوع متن با پسوند Htm نیست با باز کردن این فایل توسط یک ویرایشگر ساده مثل notepad شما میتوانید کد های HTML رو ببینید و همچنین برای دیدن خروجی اصلی HTML میتوانید از مرورگرهای اینترنتی همانند Internet Explorer ، Mozila و ... استفاده کنید.
به دستورات برنامه نویسی توسط HTML تگ یا TAG گفته میشود و در علامت های “ < ” یا “ > ” قرار میگیرند.این تگ ها به صورت های مختلف نوشته میشوند یک دسته از این تگها تگ هایی هستند که در هر جایی از صفحه ممکن است درج شود مانند تگ <HR> و هر وقت این کد درج شود بلافاصله یک خط افقی درج میگردد.
یک سری تگ یا TAG هستند که باید ابتدا و انتهای مشخصی داشته باشند یعنی این تگ ها دارای ابتدا و انتها هستند و از این نوع تگ ها زیاد استفاده میشود مانند تگ <B> که زمانی این تگ باز میشود تا بسته شدن این تگ هر نوشته ای که مابین این دو تگ باشد BOLD میشود و انتهای تمام تگ ها با یک اسلش به پایان میرسد مانند <B/> یک سری تگ دیگر هستند که علاوه بر اینکه ابتدا و انتهای آن مشخص است این تگ ها وجودشان مستلزم داشتن یک سری پارامتر است مانند تگ Font که دارای پارامتر های گوناگون است به صورت مثال:
<Font Face =”Tahoma” Size =20>www.tosinso.com</Font>
اگر کد بالا را خروجی بگیریم میبینیم که آدرس سایت itpro با فونت Tahoma و با اندازه 20 نمایان میگردد.البته تعداد این پارامتر ها میتواند زیاد باشد.
تصویر بالا برگرفته از کد زیر است برای اینکه این تگ را درک کنید بهتر بود با تصویر مثالی میزدم
تصویر بالا برگرفته از کد زیر است
dir="rtl"
تعریف شود حروف از راست به چپ قرار میگیرد یعنی کلمه بر عکس می شود و اگر dir برابر با ltr باشد تغییری در کلمه ایجاد نمی شود به عنوان مثال:
کدی که برای تصویر فوق نوشته شده است در زیر قرار گرفت
با پارامتر زیر آدرس فیلم خود را میتوانید معرفی نمایید
<param name="src" value="example.mpg"/>
با پارامتر زیر فیلم را به صورت خودکار میتوانید پخش کنید
<param name="autoplay" value="true"/>
و اما یک مثال عملی برای این تگ که کد و نحوه نمایش را میتوانید در تصویر زیر ببینید
ضمناً برای ساختن لینک ایمیل کافی است از دستور زیر استفاده شود:
<a href="mailto:webmaster@mywebsite.com">send feedback</a>
<table> <tr> <td> row 1 cell 1 </td> <td> row 1 cell 2 </td> <td> row 1 cell 3 </td> </tr> <tr> <td> row 2 cell 1 </td> <td> row 2 cell 2 </td> <td> row 2 cell 3 </td> </tr> </table>
یکی از مشکلاتی که زبان HTML دارد ایستا بودن آن است یعنی شما نمیتوانید هیچ برنامه ای بنویسید که بتواند پردازشی روی مطالب داشته باشد یعنی نمیتوانید صفحه لاگینی داشته باشید که بفهمد آیا کاربر مجاز است برای ورود یا خیر اما برای حل این مشکل ما باید از زبان های ASP.Net یا جاوا اسکریپت یا vb Script را در کنار HTML به کار بگیریم .حتماً شنیدید که با برنامه Notepad هم میتوان برنامه نوشت اما بیایید با هم این داستان را عملی پیاده کنیم یک مثال بسیار ساده برنامه Notepad را باز میکنیم و کد های زیر را داخل این ویرایشگر دوست داشتنی تایپ میکنیم
در نهایت موقع save کردن باید با پسوند html یا html ذخیره کنید سپس با یک مرورگر باز میکنیم و خروجی را مشاهده مینماییم.
خب این هم از اولین برنامه همانطور که دیدید خیلی سخت نبود فقط باید کمی کار با تگ ها را یاد بگیریم ، یک صفحه وب دو بخش کلی دارد بدنه که همان Body هست و تقریباً تمام وب سایت در این قسمت نوشته میشود و قسمت سر یا همان Head که یک سری اطلاعات از جمله تیتر یا Title صفحه رو شامل میشه و علاوه بر تیتر فرمت ها و اسکریپتهای زبان جاوا اسکریپت در این قسمت نوشته میشود.
امیدوارم با نظر هاتون و کمک هاتون بتونم این آموزش رو پیوسته ادامه بدم ، پایدار باشید.
در بخش قبلی با انواع تگ (tag) ها آشنا شدیم در ادامه میخواهیم به ادامه این تگ ها بپردازیم. با آموزش این زبان در واقع شما پایه های ورود به وب خودتون رو مستحکم تر میکنید و آماده میشوید چگونه صفحات وبتون رو چگونه طراحی کنید ، برنامه های بسیار زیادی هستند که شما میتونید برنامه نویسی یا کد نویسی با HTML را با انواع برنامه ها شروع کنید مانند Html Pad یا Front Page یا حتی Note Pad اما برنامه های مختلف به ما کمک میکنند تا کد هامون رو سریع تر و دسته بندی تر بنویسیم من در این سری از آموزش ها بیشتر با برنامه front Page که در داخل بسته Office مایکروسافت موجود هست استفاده میکنم.
وقتی برنامه front Page را باز میکنید در ابتدا مانند تصویر زیر کد هایی را برای شروع خواهید دید و همینطور زمانی که علامت کوچکتر را تایپ میکنید پنجره ای یا منویی باز میشود به نام intellisense که این منو برای برنامه نویسان بسیار پر کاربرد و حیاتی می باشد مخصوصاً افرادی که با Visual Studio کار میکنند با intellisense آشنایی زیادی دارند ، خب به هر حال میبینید که در این منو تمام تگ هایی که ممکن است شما بخواهید از آن استفاده کنید لیست میشوند
زمانی که از یک تگ استفاده میکنید attribute های اون تگ برای شما به نمایش در می آید پس بنا بر این زمانی که ما برخی از تگ ها یا attribute ها را فراموش کردیم این منو یاد آور خوبی برای ما است.
پس از تایپ کد هامون همونطور که در قسمت قبلی دیدیم من از پسوند Htm یا HTML استفاده میکنم چون نیازی به رندر کرن نداره و صرفاً میخوام با مرورگر هایی مثل Mozilla یا IE به نمایش در بیان البته شما در سطح اینترنت پسوند های زیادی رو ممکنه مشاهده کنید مثل Asp , Jsp , Php , Mspx , Aspx , Prl اینها تماماً برنامه هایی هستند که اصطلاحاً سرور سایت هستند یعنی در داخل این تگ های HTML کد هایی دیگه ای هم مینویسن که این کد ها رو اون سروری که برای ما داره میفرسته اجرا میکنه
و نیاز به رندر کردنش داره ، اما ما در این مبحث فعلاً بر پایه ترین مبحث یعنی HTML میخواهیم کار کنیم ، شاید کمی در قسمت قبلی توضیح داده باشم اما ترجیح میدم اینجا مفصل تر ادامه بدم و بگم تمام تگ های HTML داخل یک تگی قرار دارد به نام HTML پس از این تگ ما تگی داریم به نام Head که اطلاعات محتوایی رو برای ما در نظر میگیره اما برای کاربران چیزی رو به نمایش در نمیاره و اگر میخواهید
در بالای مرورگر خودتون متنی رو به نمایش در بیارید میتونید در داخل این تگ از تگی دیگر به نام Title استفاده کنید که در داخل این تگ میتوان متنی قرار داد مثلاً عنوان صفحه یا اسم صفحه تا بالای مرورگرتون به نمایش در بیاد و هر آن چیزی که شما در صفحه مرورگر خودتون خواهید دید در تگی قرار داره به نام تگ Body و تقریباً تمام تگ هایی رو که در قسمت قبلی عنوان شد در داخل این تگ به کار گرفته میشوند.
اما تقریباً تمام برنامه نویسان به Comment گزاری عادت کرده اند باید بدونید این زبان نیز از کامنت گزاری پشتیبانی میکند و شما میتوانید برای کد های خودتون کامنت هایی رو در نظر بگیرید و این کامنت ها هیچ تاثیری در کد ها ندارند و فقط برای برنامه نویس یا کسانی که بعداً میخواهند کد ها را بخوانند مفید است تا بدانند کدام خط یا کدام تگ یا دستور چه وظیفه ای را دارد و برای درج کامنت از کد زیر استفاده میشود.
<body> <!-- this is a comment --> </body>
ادامه آشنایی با برخی از تگ ها
<body> web site <del>itprogram</del>change name <ins>itpro</ins> my favorites </body>
<body> <ol type="I"> <li>Major Point <ol type="A"> <li>Sub Point</li> <li>Sub Point</li> </ol> </li> <li>Major Point <ol type ="A"> <li>Sub Point</li> <li>Sub point</li> </ol> </li> </ol> </body>
<body> <h1>Html Terms</h1> this is a sample test , this type of list lends itself most readily for use on web site. <dl> <dt>Html</dt> <dd>Hyper Text Markup Language</dd> <dt>Attribute</dt> <dd>Identifies a characteristic of an element</dd> <dt>itpro</dt> <dd>the best web site</dd> </dl> </body>
البته تعداد این کارکتر هایی که به کد اسکی معروف هستند زیاد میباشد بنابر این میتوانید اطلاعات بیشتر را در لینک زیر دنبال کنید
این تگ کمک میکند متن مربوطه کمی جلوتر از ما بقی متن ها به نمایش در بیاید که در ادامه تصویر کد زیر را مشاهده خواهید کرد.
<body> <blockquote> 123<br> 456<br> ABCD<br> EFGH<br> </blockquote> </body>
این مباحث همچنان با حمایت های شما دوستان ادامه خواهد داشت.
در این قسمت از مطالب به هم پیوسته HTML میخواهم کمی بیشتر در مورد لینک ها صحبت کنم ، از مهمترین و پرکاربرد ترین عناصر دنیای وب لینک ها هستند که ما به صورت روزمره بسیار از لینک ها استفاده میکنیم از بارز ترین مشخصات لینک ها این است که وقتی موس رو روی آن متن نگه میدارید شکل موس تغییر کرده و به صورت دست در می آید، البته در بخش اول این دوره آموزشی در مورد این تگ صحبت شد ولی در این مطلب میخواهم کمی بیشتر در مورد attribute های این تگ آشنا شویم.
شکل کلی استفاده از این تگ بسیار ساده می باشد , href موقعیت مقصد را معین میکند.
<a href="url">Link text</a>
نکته : url مخفف Uniform Resource Locator است شاید بار ها این نام را شنیده باشید URL یعنی آدرس اما نه آدرسی که ما در کامپیوتر خود داریم بلکه آدرسی که در سطح اینترنت یا صفحات وب شناخته شده است ، یادتان باشد در دنیای وب فاصله معنی نمیدهد یعنی مابین آدرس های اینترنتی یا همان URL هیچ فاصله ای نیست اگر دیدید در آدرستان علامت 20% آمده بدانید که این نمایانگر Space یا همان فاصله است که خود مرورگر این کارکتر را ایجاد میکند.
<a href="https://tosinso.com/"> tosinso.com مشاهده </a>
کد فوق باعث میشود لینک مورد نظر مانند متن روبرو نمایش داده شود : مشاهده tosinso.com با کلیک بر روی لینک بالا (مشاهده tosinso.com) به صفحه اول سایت توسینسو هدایت می شوید ، البته این پیوند ها یا لینک ها الزاماً یک متن میتواند نباشد و نسبت به سیاست کاری شما تغییر کند مثلاً یک تصویر شما میتوانید به یک عکس لینک دهید تا اگر روی عکس کلیک کنید به سایت یا صفحه دیگری منتقل شوید .
از نظر باز شدن صفحه جدید یا target چند حالت برای باز شدن لینک وجود دارد که این خاصیت را target مینامند. به عبارتی دیگر صفت target به صورت خاص عنوان میکند که لینک مورد نظر چطور و کجا باز شود، البته به صورت پیش فرض لینک ها در همان صفحه باز میشوند . به عنوان مثال در زیر لینکی را مشاهده خواهید نمود که target با عنوان Blank نوشته شده و این یعنی پس از کلیک بر روی لینک صفحه جدید در یک پنچره جدید یا یک Tab جدید در همان مرورگر باز خواهد شد.
<a href="https://tosinso.com/articles/19962/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b1%d8%a7%db%8c%da%af%d8%a7%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8-(HTML)" target="_blank">Visit web.tosinso.com!</a>
نکته : همیشه یک اسلش / به آخر آدرس مورد نظرتان اضافه کنید در این صورت یک باری از روی سرور مورد نظر برداشته اید چون اگر این اسلش را اضافه نکنید خود سرور این کار را خواهد کرد
href="http://www.web.tosinso.com/"
قبلاً خیلی مختصر در مورد لینک های ایمیلی صحبت شده است هنکامی که بر بر روی این لینک ها کلیک میکنید برنامه هایی نظیر Gmail یا Outlook باز شده و منتظر ارسال ایمیل شما میمانند ، کد زیر دقیقاً مربوط به ارسال ایمیل در وب سایت ها به کار میرود
<a href="mailto:name@example.com"> name@example.com </a>
محتوای داخل تگ a مانند انواع دیگر لینک ها می تواند یک متن هم باشد بنا بر این میتوان از کد زیر هم برای ارسال ایمیل استفاده نمود
<a href="mailto:name@example.com"> E-mail Me</a>
کمی پیشرفته تر از کد های فوق را میتوان در کد زیر دید یعنی علاوه بر مشخص کردن آدرس Email دریافت کننده می توان Subject یا موضوع و گزینه های CC و BCC و حتی قسمتی از متن ایمیل را نیز مشخص کرد کد زیر را مد نظر قرار داده و پارامترهای subject، CC ، body راه به دلخواه تغییر دهید با این کار کمک زیادی به کاربر کرده تا بتوانند سریع تر به هدف خود برسند.
<a href="mailto:name@example.com?subject=Network And Programing CC=name2@example.com&body=Please send me a copy of your new Email!"> Email For Me </a>
رنگی کردن لینک ها یکی از عناصری است که برای راحتی کاربر بسیار مهم می باشد و کاربر میتواند تشخیص دهد کدام لینک ها را قبلاً باز کرده است ، پس میتوان رنگ این لینک ها را تغییر داد این تغییر می تواند برای تمام لینک های صفحه به صورت یکجا اعمال گردد یا به صورت جزئی و تعدادی از لینک ها این تغییرات را داشته باشد ، اگر رنگ لینک های موجود در صفحه را در تگ <body> معین کنیم. در این صورت رنگی که برای لینک ها در تگ <body> در نظر گرفته می شود بر روی تمام لینک ها تغییر و اعمال میگردد.
ضمناً اگر میخواهید مشخص کنید که چه لینک هایی توسط کاربر کلیک شده است از ویژگی vlink می توان استفاده کرد،که حرف v مخفف visited می باشد. اگر تمایل دارید وقتی نشانگر موس بر روی لینک میرود رنگ لینک تغییر کند و کاربر را متوجه این سازد که این متن یک لینک است از ویژگی alink می توان استفاده کرد. که حرف a مخفف active می باشد.
به عنوان مثال کد زیر را دقت کنید :
<body alink "red" vlink="#0000FF"|> <a href="https://tosinso.com/" target="_blank">tosinso.com</a> </body>
اگر بر روی این لینک کلیک کنیم رنگ آن تغییر کرده و ما را از اینکه قبلاً این لینک را بازدید کردیم آگاه می سازد ، همانگونه که در کد فوق دیدید تگ body هم دارای صفت هایی است و همچنین استفاده از رنگ ها هم به صورت درج عدد هایی که نمایانگر رنگ است مشخص میشود و هم نام رنگ که بعداً در بخش های بعدی این مورد را دنبال خواهیم نمود.اما روش فوق جهت تغییر در تمام لینک های صفحه بود برای اینکه رنگ لینک های خاصی را در صفحه تغییر دهیم میتوان از دو روش زیر بهره برد:
این دو روش را با مثال آغاز میکنم در روش اول یعنی استفاده از تگ Font:
<body> <a href="https://tosinso.com/"><font color ="Blue"> www.tosinso.com</font></a> </body>
تگ فونت را باید در دو طرف عبارت مورد نظر همراه با انتخاب Color مناسب میتوان تعیین کنیم رنگ لینک مورد نظر چطور باشد ، در روش دوم همانگونه که گفتیم میتوان از ویژگی style داخل تگ لینک <a> استفاده نمود مثال زیر را ببینید:
<body> <a href ="https://tosinso.com/" style=color:"red" > www.tosinso.com</a> </body>
پس با توجه به کد فوق از ویژگی style میتوان برای رنگ هم استفاده نمود ، اما اگر توجه کرده باشید در برخی از سایت ها با استفاده از کلید TAB میتوان بر روی عناصر صفحه یا لینک های موجود بر روی صفحه حرکت کرد اگر میخواهید سایتی کاربر پسند داشته باشید این ویژگی میتواند به افرادی کمک کند که استفاده از موس برایشان زیاد خوشایند نیست پس توسط کیبورد و کلید TAB بر روی لینک ها حرکت میکند
این ویژگی در tabindex موجود است و این ویژگی در تگ <a> به کار میرود ، در مقابل tabindex عددی قرار میگیرد که مشخص کننده این است که با فشاردادن چند بار tab میتوان به این لینک رسید و دوستان برنامه نویس حتماً در برنامه هایی نظیر C شارپ و Visual studio این مورد را در برنامه های windows Application رعایت میکنند.
<body> <a href ="https://tosinso.com/web" tabindex ="1" > www.web.tosinso.com</a> <br/> <a href ="http://dbo.tosinso.com" tabindex ="2" > www.dbo.tosinso.com</a> </body>
توسط کد فوق میتوان این ویژگی را برای لینک های صفحه به دلخواه و به آن صورتی که تمایل دارید توسط Tab صفحه کیبورد حرکت کنید یادتان باشد این عدد میتواند از 0 تا 32767 باشد.همانگونه که مطلع هستید attribute های تگ a کار کنترل جزئیات لینک ها را به عهده دارند میخواهیم با برخی از این صفت ها آشنا شویم.
حالت های زیر تعيين کننده نوع ارتباط بين صفحه جاری و صفحه مقصد لینک یا پیوند است:
میتوان یک نام برای پیوند یا لینک خود مشخص کرد و این نام باید Uniq و منحصر به فرد باشد و ضمناً انتخاب نام نباید با اعداد 0-9 و - و _ و : یا . (نقطه) شروع شود.
حتماً در سایت توسینسو دیدید که وقتی به انتهای مطلب میرسیم اگر اون مطلب طولانی باشد نیازی نیست تا Scroll کرده و مجدد به بالای صفحه برگردیم زمانی که به پایین صفحات سایت scroll میکنیم یک فلش ای پدید می آید که کمک میکند ما به راحتی به اول صفحه منتقل شویم این قابلیت با کمک Java script بسیار شیک و ساده پیاده سازی میشه
اما در این مطلب میخواهم در مورد HTML صحبت کنم این ویژگی در HTML با صفت id در تگ <Hn> قابل پیاده سازی است قبلاً در مورد تگ H صحبت شده است.البته این بخش به عنوان ادامه بخش قبلی که در مورد تگ a و لینک ها بود صحبت میشه در واقع این بخش مرتبط با بخش قبلی استفاده میشه.
علاوه بر اینکه شما میتوانید به ابتدای صفحه برگردید ممکن است شما بخواهید در "یک صفحه" توسط لینک هایی که ایجاد میکنید به هر جای صفحه که دوست دارید بروید من این نکته را با مثالی آغاز میکنم امیدوارم برای راحتی کاربرانتان در صفحات وب تان از این قابلیت استفاده کنید تا کاربران به راحتی صفحه های شما را بازدید کنند.
ابتدا باید در لینک مشخص کنید که Href به یک نام مشخص شده ولی با این تفاوت که قبل از این نام یک شارپ # نوشته شده است و اون نام میتونه در واقع ID یک بخش باشد مثل H2 ، یا یک نام برای H2 T من دراین مثال برای هر H2 یک name قرار دادم که دقیقاً معادل نامی هست که برابر با href لینک ها هست البته شما میتوانید از صفت Id هم استفاده کنید و نام href را به id یک بخشی مثل H2 یکی کنید.
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>The global structure of an HTML document</title> </head> <body> <h1 align="center"><a name="h-7">7</a> The global structure of an HTML document</h1> <div class="subtoc"> <p><strong>Contents</strong></p> <li><a class="tocxref" href="#h-7.1">Introduction to the structure of an HTML document</a></li> <li><a class="tocxref" href="#h-7.2">HTML version information</a></li> <li><a class="tocxref" href="#h-7.3">The <samp class="einst2">HTML</samp> element</a></li> <h2><a name="h-7.1">7.1</a> Introduction to the structure of an HTML document</h2> <p>An HTML 4 document is composed of three parts:</p> <p>White space (spaces, newlines, tabs, and comments) may appear before or <h2><a name="h-7.2">7.2</a> <a name="version-info">HTML version information</a></h2> <p>HTML 4.01 specifies three DTDs, so authors must include one of the following document type declarations in their documents. The DTDs vary in the elements they support.</p> <p><em><strong>Note.</strong> As of the 24 December version of HTML 4.01, the HTML Working Group commits to the following policy:</em></p> <ul> <li><em>Any changes to future HTML 4 DTDs will not invalidate documents that conform to the DTDs of the present specification.</em> The HTML Working Group reserves the right to correct known bugs.</li> <li><em>Software conforming to the DTDs of the present specification may ignore features of future HTML 4 DTDs that it does not recognize.</em></li> </ul> </div> <h2><a name="h-7.3">7.3</a> The <a name="edef-HTML"><samp class="edef"> HTML</samp></a> element</h2> <p>After document type declaration, the remainder of an HTML document is contained by the element. Thus, a typical HTML document has this structure:</p> </body> </html>
کد فوق را در note pad با یک نام دلخواه و با پسوند Html ذخیره کنید و خروجی را ببینید:
همانگونه که مشاهده میشود میتوانید روی لینک هایی کلیک کنید که در همان صفحه شما را جابجا میکنند پس یک لینک الزاماً شما را به یک صفحه جدید نمیبرد و میتواند شما را در همان صفحه جابجا کند . حتی شما میتوانید توسط این روش به یک قسمت خاصی از یک صفحه دیگر رجوع کنید البته با java Script این کار زیباتر و سریع تر عملی میشود ایشالا در درس های بعدی این رو دنبال میکنیم.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> </head> <body> Give Link Details with the title Attribute : <a href="http://www.web.tosinso.com" title="انجمن تخصصی فناوری اطلاعات ایران">www.web.tosinso.com</a> </body> </html>
کد فوق را زمانی که اجرا کنید با تصویر زیر روبرو می شوید که میتوانید روی لینک مشخص شده بروید و Tooltip را مشاهده کنید
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<img src="itpro.jpg" alt="learner" usemap="#taglist" />
<map id="taglist" >
<area id="table" alt="web" shape="rect" coords="1, 2, 194, 122" href="http://www.web.tosinso.com" />
<area id="body" alt="dbo" shape="rect" coords="194, 0, 386, 119" href="http://www.dba.tosinso.com" />
<area id="link" alt="icdl" shape="rect" coords="0, 121, 193, 242" href="http://www.icdl.tosinso.com" />
<area id="p" alt="linux" shape="rect" coords="192, 119, 386, 242" href="http://www.linux.tosinso.com" />
</map >
</body>
</html>
کد فوق را در نظر بگیرید خروجی که کد فوق به ما میدهد به صورت تصویر زیر است ، تصویر زیر یک تصویر یکپارچه است و توسط یک خط به چهار ناحیه تقسیم بندی شده و این تصویر یکپارچه میتواند به چهار لینک متفاوت اشاره کند.
بر میگردیم سراغ ادامه مباحث HTML این بار در این مطلب بر روی تصاویر کار رو ادامه میدیم و همچنین اشاره ای میکنیم به(سئو) Seo تصاویر ، پس با ما همراه باشید.همانگونه که در بخش قبلی هم اشاره شد برای قرار دادن تصاویر بر روی صفحه کافی هست از تگ <img> که مخفف Image هست و در بخش اول آموزش HTML تا حدودی بهش اشاره ای شد.
<body> <img src ="D:/itpro/1.jpg" /> <br /> <img src ="D:/itpro/2.jpg" /> <br /> <img src ="D:/itpro/3.png" /> <br /> </body>
آدرس تصویر به این صورت نوشته میشه البته خود نرم افزار front page بهمون کمک میکنه تا توسط url و پنجره زیر آدرس رو سریع تر و راحت تر پیدا کنیم.
سپس از منو File گزینه Save as رو انتخاب میکنیم و مطابق تصویر با پسوند htm یا html ذخیره میکنیم.
پس از ذخیره کردن بلافاصله با پنجره زیر روبرو میشویم ، زمانی این پنجره برای ما به نمایش در می آید که تصاویر ما در آدرسی متفاوت از محل ذخیره فایل htm دارد بنابر این اگر ادرس ها یکی باشد پنجره زیر به نمایش در نمی آید.
در پنجره فوق شما میتوانید ادرس تصاویر را با فایل htm یکی کرده یا آدرس آنها را جابجا کنید و در یک پوشه مشخص قرار دهید و یا اینکه پسوند آنها را در همین جا یکسان کرده و حتی میتوانید کیفیت تصویر را دستخوش تغییرات دهید تا برای تمام تصاویرتان یکسان سازی انجام گیرد. به عنوان مثال من با دگمه Picture File Type و انتخاب گزینه Gif تصاویر را با این پسوند انتخاب کردم و پس از ok کردن تصاویر با تغییرات خواسته شده در محلی قرار میگیرند که فایل اصلی ما که با پسوند htm ذخیره شده بود قرار میگیرند و بلافاصه تغییری در آدرس url تصاویر ایجاد شده که در کد زیر میتوانید ببینید
<body> <img src ="1.gif" /> <br /> <img src ="2.gif" /> <br /> <img src = "3.gif" /> <br /> </body>
همانگونه میبینید آدرس ها خلاصه شده چون دقیقاً در محل ذخیره فایل اصلی قرار گرفته اند البته شما میتوانید تصاویر را در همان درایو و با همان آدرس ذخیره کنید حتی شما میتوانید از تصاویری استفاده کنید که در سطح اینترنت ذخیره شده اند ولی در آن حالت باید آدرس کامل URL را قرار دهید در ادامه فایل test.htm را با مرورگر IE باز میکنم.
<img src ="4.jpg" height="90" width="140" title="this is a test" /><br />
<img src ="2.gif" alt ="my name is farhad"/> <br />
<img src ="1.gif" height="110" width="120" /><br />
<body> this is attribute border:<br /> <img src ="4.jpg" height="90" width="140" border="5" /><br /> </body>
<body> use image a link:<a href ="http://www.web.tosinso.com"><img src="4.jpg"></a><br /> <a href ="https://tosinso.com/"><img src="8.jpeg"></a><br /> </body>
تصاویر فوق هر کدام یک لینک هستند به صفحات دیگر فقط کافی است با موس روی آنها رفته و کلیک کنید.
SEO برای تصاویر (search engine optimization)
شاید با این واژه آشنایی داشته باشید ولی قبل از شروع بهتر است لینک زیر را بخوانید تا آشنایی شما با Seo بیشتر شود.
همانطور که در فکر تمام برنامه نویسان و طراحان سایت این است که چه کنیم تا سایتمان دیده شود این دغدغه شما نیز باید باشد ، باید از Base طوری برنامه را طراحی کنید تا با بیشترین بازدید روبرو شوید باید سایتتان در نتیجه های بالای موتور های جستوجو قرار گیرد روش های زیادی در این خصوص هست
ولی در این مطلب بنده به ذکر سئوو در تصاویر اشاره میکنم ، این مطالب باعث میشود تصاویرتان در موتور های جستجو به سادگی یافت شوند .قدم اول برای این مهم استفاده از صفت alt در تگ img است همان صفتی که در همین مقاله به آن اشاره شد که این صفت یکی از معیار ها و فاکتور های مهم در موتور های جستجو مثل گوگل است
همانگونه که واضح هست موتور های جستجو دارای حس ادراک نیستند و نمیتوانند تشخیص دهند که این تصویر دارای موضوع فوتبال است و آن را در گروه های ورزش و فوتبال قرار دهد و ما انسانها با نگاه کردن به تصویر متوجه میشویم که این تصویر چیست ولی کامپیوتر ها دارای منطق خاص خود هستد و از روی متن صفت Alt متوجه موضوع تصویر میشوند. پس یادتان باشد حتماً تمام تصاویرتان را با صفت ALT مقدار دهی کنید و همچنین مقداری که در Alt قرار میدهید مطابق با موضوع تصویر باشد.
<body> <pre><img src="Flower.jpg" alt="گل قرمز" /> </body>
قدم بعدی این است که حتماً نامی برای تصاویرتان استفاده کنید که دقیقاً هم موضوع با تصویر است زیرا موتور های جستجو از نام فایل ها نیز کمک میگیرند برای کارشان پس به این موضوع هم دقت کنید.گام بعدی در Seo تصاویر سرعت(Loading) یا لود صفحه است یادتان باشد
اگر زمان لود شدن صفحه وبتان زیاد باشد امتیاز را ازدست دادید یعنی مدت زمانیکه صفحه وبسایت شما بطور کامل لود میشود باعث بالارفتن رتبه و همچنین کاهش رتبه میشود ، حجم تصاویر یکی از علل هایی است که لود تصویر بالا میرود ، یکی از راه کار های کاهش حجم عکس ها این است که تصویر را با نرم افزار فوتوشاپ باز کرده
و آن را از منو فایل و سپس save For Werb ذخیره کنید یا اینکه یک تصویر کوچک قرار دهید و آن تصویر را لینک کنید به تصویر بزرگتر خودش دقیقاً همان تلفیق تگ های <img> و <a> پس همواره سعی بر این داشته باشید صفحات ساده و کم حجم و مرتبی داشته باشید که این موضوع کمک بزرگی است برای دیده شدن سایتتان در دنیای مجازی .
ضمناً همانگونه که شاهد هستید سایت توسینسو برای قرار دادن تصویر از کلید ترکیبی Ctrl+G یا "تصویر" در سایت استفاده میکند و پس از اینکه شما تصویرتان را قرار دادید پایین پنجره قسمتی قرار دارد به نام توضیحات و این برابر با صفت ALT در آموزش ما هست و اگر متنی را در آن کادر قرار دهید این متن به موتور های جستجو کمک میکندتا موضوع و مطلب شما در فهرست قرار گیرند و همچنین این خود یک SEO محسوب میشود.
در ادامه قصد دارم بر روی جداول کار کنم.جداول در صفحات وب کاربردی هست و همچنین مطالبی که داخل جداول چیده میشوند از نظر طراحی و دیزاین شکیل به نظر میرسند و همچنین مخاطب احساس بهتری در مطالب پیدا میکند تا اینکه مطالب به هم ریخته باشد.
همانطور که در تصویر فوق مشاهده میشود ستون ها را با نام column و ردیف ها یا سطر ها را با row نامگذاری میکنند در HTML ستون ها را با تگ <TD> و سطر ها را با تگ <TR> مینویسند . ما در نرم افزار Word میتوانیم برخی از سلول ها یا خانه های جدول رو با هم ترکیب کنیم توسط Merge Cells که هم میتوانیم ستون ها را با هم ترکیب کنیم و هم ردیف ها را دقیقاً مشابه تصویر زیر ، و همانطور که در تصویر زیر ملاحضه میکنید دقیقاً ما در HTML هم میتوانیم این کار را پیاده کنیم.
تگ table دارای attribute زیادی هست که جلوتر خدمتتان توضیح خواهم داد ، پس از نوشتن تگ <table> با هر بار نوشتن تگ <tr> میتوانید یک خط ایجاد کنید پس tr به نشانه table row می باشد پس به ازا< هر چند ردیفی که میخواهید باید tr را اضافه کنید و قبل از اینکه تگ tr بسته شود
یعنی در داخل تگ <TR> باید تعداد ستون هایی را مشخص کنید در کد زیر ملاحضه میکنید که در سطر اول ما سه ستون داریم که داخل هر ستون را به x1 تا x3 نام گذاری کردیم. در ادامه کد ها یعنی دقیقاً پس از پایان تگ <tr//> من میخواهم یک ردیف دیگر با سه ستون ایجاد کنم که هر ستون را با y1 تا y3 نام گذاری میکنم ، و در نهایت تگ table را میبندیم.
<body> <table> <tr> <td>X1</td> <td>X2</td> <td>X3</td> </tr> <tr> <td>y1</td> <td>y2</td> <td>y3</td> </tr> </table> </body>
خروجی کد بالا به صورت زیر می باشد
همانطور که در تصویر نمایان است حاشیه های جدول دیده نمیشوند چون جدول ما دارای Border نیست در ادامه جدول را دارای border میکنیم برای این منظور فقط کافی است در جلو تگ table مقدار border را وارد کنیم ، اگر مقدار border برابر 0 باشد یعنی همان تصویر بالایی که بدون حاشیه بود پس توسط کد زیر به جدولمان حاشیه ای به اندازه 2 میدهیم
<body> <table border="2"> <tr> <td>X1</td> <td>X2</td> <td>X3</td> </tr> <tr> <td>y1</td> <td>y2</td> <td>y3</td> </tr> </table> </body>
<body> <table border="2"> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> </table> </body>
خروجی کد بالا به صورت تصویر زیر نمایان میگردد
<body> <table border="2"> <caption style="font-weight:bold"> How to Use caption in table... </caption> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> </table> </body>
کد زیر را با پسوند html ذخیره کرده و آن را با مرورگر باز میکنم
<body> <table border="2" width="307"> <tr> <td align="left" width="81">Left cell</td> <td align ="right" width="93">Right cell</td> <td align="center">Center cell</td> </tr> </table> </body>
همانگونه که در کد و تصویر فوق ملاحضه میشود توسط خاصیت width نیز جدول را طوری تنظیم کردیم که بتوان حالت چپ چین و راست چین را تشخیص دهیم همین کار را میتوان بر روی جدول های دیگر انجام داد.
<body> <table border="2" height="59" width="312"> <tr> <td valign="top" width="80">top cell</td> <td valign="bottom">Bottom cell</td> <td valign="middle" width="102">middle cell</td> </tr> </table> </body>
Valign دو خاصیت دیگه هم داره یکی baseLine به معنای خط زمینه و همچنین در برخه نسخه های HTML شما justify را خواهید دید و Center را که در واقع بیشتر به سمت چپ میرود جایی که text در آن محل بهترین محل را پیدا میکند.
البته شما میتونید در معرفی TR از Style جهت اندازه طول و عرض جدول استفاده کنید و فکر میکنم این قابلیت برای شما راحت تر باشه چون یک بار در tr مینویسید و هر چند تا td در سطر وجود داشته باشه بهش اعمال میشه مثال زیر رو با هم ببینیم
<body> <table border="2"> <tr style=width:"80px"> <td align="left">www.</td> <td align="center">itpro</td> <td align="right">.ir</td> </tr> </table> </body>
همانطور که میبینیم tr با style ای انتخاب شده که کل ستون ها را برابر با عرض یا (width) برابر 80 پیکسل نمایش میدهد
کار با جداول و رنگ های آن را در قسمت بعدی دنبال خواهیم کرد.
در ادامه مباحث آموزش HTML در ادامه مبحث قبلی کار بر روی جدول و همچنین کمی در مورد رنگ ها در جداول صحبت و ادامه میدیم .جداول در صفحات وب کاربردی هست و همچنین مطالبی که داخل جداول چیده میشوند از نظر طراحی و دیزاین شکیل به نظر میرسند و همچنین مخاطب احساس بهتری در مطالب پیدا میکند تا اینکه مطالب به هم ریخته باشد.
<body> <table border="2" width="350"> <tr style=width:"800px"> <td align="left" bgcolor="cc.ff.33">www.</td> <td align="center" bgcolor="#FF0066">itpro</td> <td align="right" bgcolor="yellow">.ir</td> </tr> </table> </body>
همونطور که در کد فوق میبینید من bgcolor رو به سه صورت اومدم رنگ هاش رو مشخص کردم اولی که در ستون LEFT پیاده شده با کد هگزا نوشتم این همون RGB خودمون هست که R مخفف Red (قرمز) و G مخفف Green (سبز) و B مخفف Blue (آبی) هست و این اعداد میتونن از 00 شروع شدن تا FF که به ترتیب از کم به بیشتر این رنگ رو سوق میده.
در سلول یا ستون Center میبینید که bgcolor با یک عدد هگزادسیمال نوشته شده که این اعداد داخل کوتیشن کمتر از 0 و بیشتر از F نمیتونن باشن و این اعداد از 6 کارکتر تشکیل میشن.در نهایت سلول right با نام یک رنگ نوشته شده که نیازی به توضیح نداره
همونطور که در تصویر پایین هم مشاهده میکنید رنگ ها به این سه حالت میتونن پیاده سازی بشن شاید به خودتون بگید این رنگ ها رو و این اعداد رو ما نمیتونیم حفظ کنیم باید در جواب بگم سخت نگیرید نرم افزار های طراحی سایت مثلاً مثل Front Page که در حال حاظر این آموزش ها رو با اون دارم مینویسم کار ما رو راحت میکنن و خودشون کادری یا پنجره ای باز میکنن که میتونیم رنگمون رو به راحتی و با یک کلیک پیدا کنیم و پیاده سازی کنیم : تصاویر زیر رو ببینید
طریقه استفاده از رنگ ها در این نرم افزار به صورت زیر است به محض اینکه شما در مقابل bgcolor علامت مساوی = را درج کنید با صفحات زیر روبرو خواهید شد.
اگر میخواهید یک ستون کاملاً از یک رنگ ایجاد شود باید در tr از bgcolor استفاده کنید دقیقاً کاری که برای اندازه سلول انجام دادیم کد زیر را ببینید
<body> <table border="2"> <tr bgcolor="aqua"> <td>R=Red</td> <td>G=Green</td> <td>B=Blue</td> </tr> </table> </body>
<body> <table border="3" bgcolor="magenta" cellspacing="10" cellpadding="15" > <caption> How to use Tables </caption> <tr bgcolor="yellow"> <th>col 1</th> <th>col 2</th> <th>col 3</th> </tr> <tr> <td align="center">x</td> <td align="center">x</td> <td align="center">x</td> </tr> <tr> <td align="center">x</td> <td bgcolor=#009900 align="center">x</td> <td align="center">x</td> </tr> <tr> <td align="center">x</td> <td align="center">x</td> <td align="center">x</td> </tr> </table> </body>
<body> <table border="2"> <tr bgcolor="yellow"> <th>col 1</th> <th>col 2</th> <th>col 3</th> </tr> <tr> <td rowspan="2">x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td bgcolor=#009900>x</td> </tr> <tr> <td>x</td> <td colspan="2">x</td> </tr> </table> </body>
<table frame="void" border="2">
<body> <table rules="cols" border="2"> <tr bgcolor="yellow"> <th>col 1</th> <th>col 2</th> <th>col 3</th> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> </tr> </table> <ul> <li>برای نمایش خط های عمودی rules="cols"</li> <li>برای نمایش خطوط افقی rules="rows"</li> <li>اگرمیخواهید هیچ چیزی نمایش داده نشود rules="none"</li> <li>برای استفاده از تیبل گروپ ها و یک حاشیه کلی از این گزینه استفاده میشود rules="groups"</li> </ul> </body>
با سلام و تبریک سال 1394 به همه دوستان و itpro ای های عزیز و مشتاق علم و فناوری و دانش در ادامه یادگیری مباحث پیوسته HTML امروز میخوام کمی در مورد کد ها و موجودیت ها و کارکتر های خاص در HTML صحبت کنم همانطور که در بخش های قبلی دیدید زبان HTML که طراحی پایه وب هست با تگ های بخصوصی کار میکند
و تقریباً هر کاری که میخواهید انجام دهید را باید در تگ مخصوص به خودش تایپ کنید اما در این بین برخی از کاراکترها در زبان HTML دارای معنی متفاوت و خاصی هستند به عنوان مثال اگر بخواهیدکاراکتری مثل کوچکتر > را تایپ کنید به راحتی امکان پذیر نیست
برای اینکه این کارکتر را زمانی که در نرم افزاری مانند Front page تایپ کنید یک لیستی از تگ های موجود برای شما باز میشود چون سر آغاز تمام تگ ها با این کارکتر است اما اگر بخواهيم در متن صفحات وب از اين نوع کاراکترها استفاده کنیم تکلیف چیست؟ برای یادگیری هرچه ساده تر این موضوع با ما در itpro باشید.
جهت نمايش هر کاراکتر خاص باید از يک ترکیب سه قسمتی استفاده نمود ، قسمت اول علامت (&) و در قسمت دوم که در ادامه علامت قبلی ظاهر میشود يک نام (این نام از قبل در HTML رزرو شده و هر نامی نمیتواند قرار گیرد) يا علامت # به همراه يک عدد (این عدد هم همانند نام رزرو شده html است ) و در نهایت در قسمت سوم با علامت سمیکالن (;) این ترکیب را پایان میدهیم.به عنوان مثال جهت نمايش کاراکتر > بايد کد زیر را بنويسيم :
< or <
رنگ ها هم در HTML و هم در CSS (که این دوره هم پس از اتمام HTML شروع خواهم کرد) ، دارای کد ها و موجودیت هایی است که در قسمت تنظیم کردن رنگ متن ، همچنین رنگ پس زمینه و رنگ حاشیه ها وجود دارد ، کد ها در رنگ ها شبیه به #66FF00 هست ولی کار با رنگ ها در HTML به سه روش امکان پذیر هست چون میدونم برای شما هم حفظ کردن چنین اعدادی سخت هست پس سه روش رو در همین مطلب خدمتتون میگم تا کاملاً به این موضوع تسلط پیدا کنید
به عنوان مثال #000000 و #FF0000 به ترتیب نمایانگر رنگ های سیاه و قرمز می باشد.در خصوص اعدادی که در مبنای هگزا دسیمال یا همین روش آخری که مطرح شد باید کمی اطلاعات داشته باشید گفتیم که این روش از rr , bb , gg استفاده میشه رقم های اعداد r ، از 0 هستند تا r-1 به عنوان مثال در مبنای پرکاربرد 10 که به صورت روزانه استفاده می کنید
رقم ها 0 تا 9 هستند و در مبنای 16 ارقام 0 تا 15 هستند ولی کلاً در کامپیوتر و مبناهای اعداد و برای قابل فهم بودن برای برنامه نویسان و کامپیوتر در اعداد مبنای 16 رقم های 10 تا 15 را با حروف لاتین A تا F نشان میدهند یعنی A عدد 10 است و F عدد 15 است .
اما فرض کنید که اینچنین نبود ، مثلا عدد 213 رو به سه شکل می توان نوشت و تفسیر کرد اول اینکه عدد 213 از سه رقم 2 و 1 و 3 تشکیل شده یا از دو رقم 21 و 3 و یا اینکه از دو رقم 2 و 13 خب ما کدام حالت را در نظر بگیریم؟ اما وقتی قانونی ایجاد میشود که از 10 تا 15 را با A تا F جایگزاری میتوان کرد این مورد کاملاً حل میشود و این سه تفسیر رو به صورت 2D میتوان شناخت ، شانزده رقم مبنای گفته شده به صورت زیر است.
0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , F , E , D , C , B , A
با ترکیب این 16 کاراکتری که در بالا گفته شد شما می توانید 16.7 میلیون رنگ بسازید .شاید برای تازه کاران باورش سخت باشد ولی فقط ما در رنگ ها از 1 تا 100 نوع رنگ مشکی داریم این فقط برای رنگ مشکی نست بلکه برای تمام رنگ ها 1 تا 100 نوع طیف رنگی وجود دارد
البته دستگاه های چاپ از 5 تای اول آن را تشخیص نمیدهند ولی تعداد این رنگ ها بسیار زیاد است، در سیستم عامل هاو مرورگر های اینترنتی فقط 256 رنگ هست که سازگاری داردند یعنی رنگهای غیر از آنها در سیستمهای مختلف با هم فرق دارند.
ضمناً جهت آگاهی رنگهای سازگار از ترکیب 00,33,66,99,CC,FF تشکیل شده اند که به آنها palette-safe colorsنیز می گویند. دوستان طراح وب دقت کنند استفاده از رنگ ها در صفحات وب بسیار بسیار تاثیر گذار است ، از رنگ های استاندارد جهانی استفاده کنید تا وبسایت شما در تمام نقاط جهان دارای رنگی باشد که در آن سیستم عامل و آن مرورگر یکی باشد همچنین استفاده از فونت مناسب و استاندارد جهانی میتواند به پویایی وبسایت شما کمک کند.در تصویر زیر چند رنگ معروف را با با سه روش گفته شده میبینید
در سایت w3schools میتونید نام رنگ همچنین کد و RGB این رنگ ها رو ببینید.تصویر زیر هم نمونه رنگ ها و کد های هزادسیمالی است که میتوانید استفاده کنید فقط فراموش نکنید از حروف بزرگ در مقداردهی رنگها استفاده کنید و علامت # را در انتهای کد درج کنید.
دوستان باز هم تکرار میکنم نگران حفظ کردن رنگ و شماره های آن نباشید در نرم افزار های طراحی کدHTMl مثل Front page یا HTML pad انتخاب کننده رنگ یکی از ابزار های نرم افزار هست که میتوانید به راحتی رنگ مورد نظرتون رو انتخاب کنید و جهت اطلاع کد و مقادیر استفاده شده هر کدوم از رنگ های (RGB) قرمز و سبز و آبی ببینید، در تصویر پایین رنگ قرمز گویای همه چیز است
در ادامه تصویری هایی قرار میدهم که رنگهای نامگذاری شده و مقادیر معادل هگزادسیمال آن به ترتیب حروف الفباء آمده است
همانگونه که دیدید رنگ ها طیف وسیعی دارند امیدوارم مورد توجه شما قرار گرفته باشه.
آموزش HTML رو با جداول ادامه میدم ، همونطور که قبلاً هم گفتم جدول ها در صفحات وب بسیار پر کاربرد هستند و یکی از اصلی ترین موارد مورد استفاده از جدول ها این است که شما بیایید و ساختار یک صفحه رو به نمایش بگذارید در این مطلب من صفحه وبی را خواهم ساخت که کلاً از جدول ایجاد شده یعنی در واقع از یک جدولی استفاده میکنم که ساختار اصلی یک صفحه رو نمایش میده
و همونطور که در کد پایین خواهد دید ابعاد و اندازه های این جدول رو توسط درصد (%) مشخص کردم بدین ترتیب وقتی کاربرها با رزولوشن های مختلف اقدام به بازدید سایت شما میکنند صفحه وب شما از نظر اندازه ها به یک میزان تغییر میکنند و این از فنی بسیار مناسب خواهد بود.اما قبل از ارسال یاد آوری میکنم در مورد تگ های ایجاد جدول ،توسط تکه کد زیر شما میتوانید در سایت یک جدول ایجاد کنید
<table> ...محتویات جدول... </table>
سپس برای اضافه کردن و افزودن محتویات به جدول از تگ <td> که قبلاً مورد بحث قرار گرفته استفاده میکنیم ، که td مخفف کلمه table data است ، برای جدول هم از border استفاده میکنیم که حاشیه ها را برای ما ایجاد کند ، تکه کد زیر نیز جدولی ساده با border که دو سلول دارد را مشخص میکند
<table border="3"> <td> سلول اول </td> <td> سلول دوم </td> </table>
اگر میخواهید به خط بعدی یا ردیف بعدی بروید باید توسط تگ tr این کار را انجام دهیم ، یادتان باشد که در انتها باید تگ ها بسته شوند و کد زیر دقیقاً یک جدولی با دو ستون و دو ردیف را برای ما ایجاد میکند.ضمناً شما می توانید هر چیزی را در داخل سلول ها ایجاد کنید مانند تصویر ، لینک، پاراگراف یک متن یا ... و برای این منظور فقط کافی است متن یا کد لینک یا تصویر را داخل و بین تگ <td> و <td/> وارد کنید.
<table border="3"> <tr> <td> سطر اول و سلول اول </td> <td> سطر اول و سلول دوم </td> </tr> <tr> <td> سطر دوم و سلول اول </td> <td> سطر دوم و سلول دوم </td> </tr> </table>
خب به مثال اصلی خودمان باز میگردیم میخواهیم یک صفحه وب ایجاد کنیم و تمام ساختار آن را با جدول مشخص کنیم .
<table width ="100%" border ="1" cellpadding="0" cellspacing ="0"> <colgroup> <col width="15%"/> <col width="85%"/> </colgroup>
در کد فوق جدول ما با table آغاز میشه و همونطور که میبینید تمام ستون های جدول با درصد کار میکنن برای همین با هر مرورگری و هر درصد رزولوشنی این درصد ها متغیر میشن و شما به درستی میتونید صفحه رو ببینید Border جدول رو عدد 1 دادم همچنین از cellpadding و cellspacing که در بخش هفتم در مورد این دو توضیح دادم استفاده نکردم
خصوصیات تگ colgroup: در مورد خوصوصیات تگ colgroup تصویر زیر کاملاً گویا هست.
خب بر میگردیم به ادامه آموزشمون پس از تگ colgroup ما میخواهیم از عنصر های thead و tfoot و tbody استفاده کنیم که همگی اینها زیر مجموعه های تگ table هستند و جهت ایجاد بخش های مختلف جدول و همچنین خوانایی بهتر این جداول از این عناصر استفاده میشود ، کد زیر را ببینید
<thead> <tr> <td align="center" colspan="2"> <img src= "baner.jpg" height="100%" width="100%" alt="how to do "/></td> </tr> </thead>
خب با توجه به اینکه ما میخواهیم از جدولی استفاده کنیم که دو خونه ای هست پس colspan رو برابر 2 قرار میدهیم و ضمناً در بالای صفحه یک تصویر رو به عنوان Header قرار دادم که در کد فوق با آدرس baner.jpg مشخص شده هست.
در table row بعدی دو سلول یا دو خونه وجود داره خونه سمت چپ لینک ها معرفی شدن که همگی انجمن های سایت itpro هستند البته این یک منو بسیار ساده هست هر چند میتونید متو هاتون رو با Java script ایجاد کنید تا منوهاتون زیبا و پیشرفته باشه و قسمت سمت راست رو میتونید اخبار یا هر متنی رو در صفحه قرار بدید.
<tfoot> <tr> <td style ="font-family:arial;fontsize:.75em;" align="center" colspan="2">web Design by itpro © copyright 2015.</td> </tr> </tfoot>
در کد بالا که سلول آخر هم هست و توسط tfoot ایجاد کردیم بهش میگن Footer که معمولاً راجع به copyrighth و ایجاد کننده صفحه صحبت میشه همونطور که در کد بالا مشاهده میشه از علامت یا کد © استفاده کردیم برای نمایش کارکتر های خاص که در بخش قبلی در موردش صحبت کردیم.
کد زیر هم table body هست که دارای دو td هست یکی برای درج لینک ها و دیگری برای درج متن یا تصاویری که به دلخواه میتوان در داخل سایت قرار داد
<tbody> <tr> <td bgcolor = "#FF9933" align="left"> <ul> <li><a href="https://tosinso.com/web">web</a></li> <li><a href="https://tosinso.com/dba">dba</a></li> <li><a href="https://tosinso.com/network">network</a></li> <li><a href="https://tosinso.com/icdl">gsm</a></li> <li><a href="https://tosinso.com/linux">linux</a></li> <li><a href="https://tosinso.com/security">security</a></li> <li><a href="https://tosinso.com/hardware">hardware</a></li> <li><a href="https://tosinso.com/icdl">icdl</a></li> <li><a href="http://programing.tosinso.com">programing</a></li> <li><a href="https://tosinso.com/art">graphic</a></li> <li><a href="https://tosinso.com/virtualization">virtualization</a></li> </ul> </td> <td> <p style="font-size: 2em"><center><b>insert images and text...</b></center></p> </td> </tr> </tbody> </table>
در نهایت در تصویر زیر با هم ماحصل کد زیر رو مشاهده خواهیم نمود:
با سلام ، همانطور که در قسمت اول و دوم در مورد تگ Body صحبت شد دیدیم که بدنه یک قالب را این تگ به عهده داره و تمامی تگ های دیگه باید داخل این تگ نوشته بشن اما به جای این تگ شما میتوانید از تگ frameset استفاده کنید ، ضمناً توجه کنید نمی توانید به صورت همزمان از تگ های frameset و body استفاده کنید.در ادامه این تگ رو بیشتر توضیح خواهم داد.با کمک فريمها یا Frames شما میتوانید نمایش همزمان بیش از یک پنجره را در مرورگر فعال کنید ، هر صفحه در مرورگر به نام یک فريم frame معرفی میشود و اگر قرار است چند فریم با هم در یک صفحه باشند آنها کاملا مستقل از هم هستند.
<html>
<head>
<title>Test web Page</title>
</head>
<frameset rows="50%,50%" cols="50%,50%">
<frame src="www.linux.tosinso.com"/>
<frame src="www.web.tosinso.com"/>
<frame src="www.icdl.tosinso.com"/>
<frame src="www.network.tosinso.com"/>
</frameset>
</html>
کد فوق میگه Row که ردیف هست دو تا 50 درصد داره یعنی صفحه رو از سمت ردیف به دو قسمت مساوی تقسیم کن همچنین در Col این تقسیم رو مشاهده میکنیم پس نتیجه میگیریم کد فوق صفحه رو به چهار قسمت مساوی داره تقسیم میکنه که شما میتونید چهار تا Frame رو داخل این کد ببینید که هر کدوم میتونند به یک صفحه مجزا لینک شوند که این Frame ها یک Attribute به نام SRC دارن که در این تگ باید اجباراً ازشون استفاده کنید
این روش برای سایت هایی که یک کاربر میخواد همزمان مشاهده کنه خیلی استفاده میشه و به جای اینکه کاربر چهارتا صفحه رو باز کنه همه رو میتونه دریک صفحه هم زمان ببینه فقط یادتون باشه باز شدن این پنجره خیلی در سرعت شما تاثیر داره چون عملاً چهار صفحه رو با هم دارید باز میکنید
علاوه بر سرعت باز شدن صفحات که یک بدی محسوب میشه یادتون باشه موتور هی جستجو این صفحات رو برای شما Index نمیکنند و نمیتونید این frame ها رو در موتور های جستجو ببینید ، همچنین در پرینت گرفتن از صفحه همیشه با چالش روبرو خواهید بود و معمولاً حرفه ای ها هیچ وقت از این تگ استفاده نمیکنند
اما چرا من اینجا در itpro دارم اینا رو میگم ؟ فقط به خاطر اینه که مطلبی از HTML ناگفته باقی نمونه و اگر جایی در خصوص فریم ها خوندید زیاد تعجب نکنید ، ضمناً کد فوق رو میتونید به صورت زیر هم تایپ کنید که این نشون میده ما میتونیم چندین Frameset رو صدا بزنیم که هر کدومشون از Frame های جداگانه ای تشکیل بدن یا یک frame رو مجداً به چندین صفحه جداگانه تخصیص دهیم.
<html>
<head>
<title>Test web Page</title>
</head>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="http://www.linux.tosinso.com"/>
<frame src="http://www.web.tosinso.com"/>
</frameset>
<frameset cols="50%,50%">
<frame src="http://www.icdl.tosinso.com"/>
<frame src="http://www.network.tosinso.com"/>
</frameset>
</frameset>
</html>
یک نمونه کد دیگه که سادگی اون میتونه کمک به آموزش باشه کد زیر هست که در ادامه اون تصویری از خروجی کد رو میتونید مشاهده کنید:
<body>
<frameset cols="20%, 80%">
<frameset rows="100, 200">
<frame src="frame1.html">
<frame src="frame2.gif">
</frameset>
<frame src="frame3.html">
</body>
یادتون باشه که تگ frame در HTML5 پشتیبانی نمیشه و از مهمترین خصوصیاتی یا attribute هایی که این تگ در HTML4 داره میتونیم به موارد زیر اشاره کنیم:
تگ iframe :
این تگ مخفف inline frame هست و در HTML 5 پشتیبانی میشه ، توسط تگ iframe فروم های درون خطی را میتواند ایجاد کنید از این تگ معمولاً جهت درج یک صفحه در داخل صفحه ای معمولی و در کنار سایر عنصر ها مانند تصاویر متن لینک و ... استفاده می شود. که به جز صفت noriesize از مابقی صفت های بالا پشتیبانی میکنه همچنین صفت های width و height که مشخصات عرض و ارتفاع یک فریم هست رو میتونید در این تگ استفاده کنید .
تگ noframes :
برخی از مرورگر ها از فریم پشتیبانی نمیکنند پس قائدتاً شما نمیتونید از frameset و frame استفاده کنید پس شما مجبور به استفاده از تگ noframes هستید اگر از این تگ استفاده کنید ، اگرچه در در ابتدای این مطلب گفتم از تگ body نمیتوانید در کنار تگ Frameset بهره ببرید اما برای استفاده از این تگ باید متن را در بین تگ های body قرار دهید به عنوان مثال کاربرد تگ iframe را در بخش آموزش html نشان می دهد.
<iframe src="http://www.web.tosinso.com"></iframe>