با سلام در خدمتتون هستیم با قسمت سوم از آموزش طراحی قالب وب سایت با html , در این آموزش با کلیات html و ساختار کلی یک صفحه ی وب آشنا خواهید شد . یاد آوری کنم که برخی تگ ها به صورت تکی استفاده میشن و برخی از تگ ها هم نیاز با تگی دارن که زوج اون تگ به حساب میاد. مثلا تگ :
<br />
باعث شکست خط میشه. یعنی یک خط یا یک سطر رو خالی میزاره و میرا به سطر و خط بعدی. این تگ به صورت تکی استفاده میشه و تگ زوج نداره. اما تگ زیر :
<title> design web </title>
همون طور که مشاهده می کنید تگ تایتل رو باز کردیم و در آخر اون و بستیم که یه اسلش / داره. در ادامه بیشتر آشنا خواهید شد. راستی اگه قسمت های قبل رو مطالعه نکردید می تونید از قسمت مطالب مرتبط پیداشون کنید.
توانایی طراحی صفحات ساده به کمک Notepad
- کلیات
- همانطور که قبلا نیز اشاره شد یک صفحه وب از نظر ساختار یک فایل متنی از نوع ASCII است که به وسیله یک برنامه ویرایشگر ایجاد شده و تغییر میابد . ویرایش صفحات وب به وسیله دو گروه برنامه ویرایشگرهای متنی (Notepad ) و ویرایشگرهایی با رابط گرافیکی کاربر ( FrontPage ) انجام میشود در این جاد ضمن معرفی کاربردهای ویرایشگرهای متنی در تولید صفحات وب تگهای اولیه اساسی HTML معرفی میشود ودر پایان صفحه ساده طراحی شده ای را با کمک مرورگر Internet Explorer مشاهده میکنید .معمولا برای تولید و سازمان دهی صفحات وب پوشه مشخصی به نام Myweb در داخل پوشه MyDocument میسازید و فایلها و پوشه های مربوط به سایتهای وب خود را در ان ذخیره میکنید اسن موضوع یک قرارداد غیر رسمی برای نظم بخشی و سازمان دهی کارهاست و شما هیچ اجباری به رعایت ان ندارید در کامپیوترهایی که به عنوان سرویس دهنده وب عمل میکنند (سرور وب ) ویرایشگر وب مانند FrontPage به صورت پیشفرض فایلهای خود را در پوشه Myweb از پوشه MyDocument ذخیره میکنند این موضوع یکی دیگر از دلایلی است که برای ذخیره صفحات وب طراحی شده در محلی مشخص ارایه شده است .
- محیطNotepad برای صفحات وب
- ایجاد و ذخیره سازی صفحات وب
- سیستم عامل ویندوز به صورت پیش فرض پسوند فایل های شناخته شده را نشان نمیدهد برای مشاهده پسوند فایل های مربوط به صفحات وب کافی است در پنجره Windows Explorer از منوی Tools گزینه Folder Options را انتخاب کرده و سپس در زبانه View گزینه Hide extensions Known file types را غیر فعال کنید .
- مفاهیم اولیه وب
- HTML مخفف Hypertext Markup Language است
- فایل HTML فایلی متنی (text) و شامل مجموعه ای از تگهای سازنده ( markup tagها ) است.
- مرورگر(Browser) از روی تگهای سازنده میفهمد که چگونه باید صفحه را نمایش دهد .
- یک فایل HTML باید دارای پسئند فایل htm یا html باشد .
- یک فایل HTML با هر ویرایشگر متنی ساده ای (مانند Notepad ) قابل ایجاد و ویرایش است
- وظیفه اصلی تگهای سازنده (markup tags) بیان چگونگی نمایش اطلاعات است .
- ساختار تگهای سازنده به شکل <tag> است , به عبارت ساده تر هر تگ میان علامت های < و > قرار میگیرد .
- تگهای HTML به دو دسته اصلی تقسیم میشوند :
- دسته اول تگهای بدون مکمل ( stand alone ) هستند که برای انجام تگ نیازی به تگ پایانی ندارند تگ پایانی (end tag ) مشابه تگ اصلی / است به عنوان تگ <BR> باعث شکسته شدن خط و رفت به خط بعدی میشود و برای استفاده از ان نیازی به تگ <BR/> نیست .
- دسته دوم تگها دارای مکمل ( container tag ) هستند که ضرورتا برای انجام به تگ پایانی نیاز دارند مثلا تگ <HTML> با تگ <HTML/> پایان میگیرد و تگ < B> باعث ضخیم شدن خط میشود و برای استفاده از ان به تگ <B/> نیاز است . توجه داشته باشید که بزرگی و کوچکی تگ های نوشته شده در فایل html تاثیری در نحوه نمایش و اجرای فرامین ندارد ولی بهتر است همواره الگوی ثابتی را برای نوشتن تگها به کار ببرید مثلا همه تگها را همواره با حروف کوچک بنویسید .
- چه تفاوتی بین پسوند فایل htm. و html . وجود دارد ؟ در واقع هیچ تفاوتی میان این دو پسوند وجود ندارد . اغلب مرورگرها هر دو نوع پسوند فایل را به خوبی میشناسند ولی ترجیحا به هنگام ذخیره فایل های وب از htm. استفاده کنید
- ساختار کلی تگ های HTML
- ساختار کلی تگ های html به شکل زیر است :
- <مقدار = شناسه تگ >
- یا
- <tag attribute= value>
- برای مثال در مورد تگ <htm> شناسه به نام dir وجود دارد که دارای مقادیر itr یا rtl است itr مخفف Ieft to right و برای چین چین کردن صفحه وب و rtl مخفف right to left و برای راست چین کردن صفحه وب به کار میرود کاربرد شناسه dir در تگ html در زیر اورده شده است :
<html dir= Itr > - مثال دیگر تگ <P > است که پاراگراف بندی متن را به عهده دارد در این تگ شناسه align محل قرارگیری پاراگراف را در یک سطر کنترل میکند و دارای مقادیر right , justify , left و center است کاربرد شناسه align در تگ <p >در زیر اورده شده است :
<p align= center > . . . . . . </p> - شناسه align در تگ بالا مقدار center را گرفته است . این مقدار باعث میشود که متن قرار گرفته در داخل تگ های < p> و <p/> به صورت وسط چین نمایش داده شود .
- توضیح بالا فقط برای تشریح ساختار کلی تگ های HTML اورده شده است و نیازی به حفظ انها ندارید .
- HTML
- یکی از اصلی ترین تگهای HTML تگ <HTML> است . این تگ از نوع تگ های دارای مکمل است یعنی به <HTML/> نیاز دارد . با رسیدن به این تگ مرورگر برای اجرای فرامین یک فایل از نوع HTML فراخوانی میشود پس از تگ>html> تگ <head> قرار میگیرد این تگ محلی برای قرارگرفتن تگ های عنوان صفحه تگهای متا (Meta Tags) و کدهای جاوا اسکریپت است متن قرار گرفته در بین تگ <body> و انتهای ان یعنی تگ <body />اطلاعاتی است که به وسیله مرورگر در داخل صفحه وب نمایش داده خواهد شد متن بین تگ <b> و انتهای ان یعنی تگ <b/> به صورت Bold یا توپر نمایش داده میشود . تگها میتوانند حاوی اطلاعات اضافی دیگری باشند که به این اطلاعات شناسه یا Attribute می گویند و وظیفه انها بیانی دیگر از اطلاعات یک عنصر یا Element است یک عنصر با یک تگ ایجاد می شود .
- head
- تگ head تگی از نوع تگهای دارای مکمل است یعنی برای اجرای ان به تگ <head/> نیاز است این تگ بلافاصله بعد از تگ <html> در صفحه وب ظاهر میشود و وظایف متعددی به عهده دارند که عبارتند از :
- جدا کردن بخش سر صفحه از مابقی صفحه
- تعیین محلی برای قراردادن تگ <title> برای عنوان صفحه وب
- تعیین محلی برای قراردادن تگهای <Meta>
- محلی برای قراردادن تگ های JavaScrilt
- محلی برای قراردادن تگ هایCSS
- title
- این تگ یکی از مهم ترین تگ های زبان html است و برای دادن یک عنوان به صفحه به کار میرود شکل این تگ که از نوع تگ های دارای مکمل است به صورت <title> و <title/>است و عنوان صفحه بین دو بخش تگ قرار میگیرد.
- body
- این تگ مهم ترین تگ یک صفحه html. است و تمام محتویات قابل مشاهده در یک صفحه وب در این تگ قرار میگیرد این تگ در واقع در بر گیرنده تمامی تگ های نمایش دهنده محتویات صفحه است و در اغلب مواقع رنگ زمینه یا تصویر به کار رفته به عنوان تصویر زمینه به وسیله این تگ کنترل میشود شکل کلی تگ body به این صورت است (شما نیازی به حفظ کردن تمام این شناسه ها ندارید ):
<body alink=" " background=" " bgcolor=" " bgproperties=" " bottommargin"= " class=" " datafld=" " datafrmatas=" " datasrc=" " dir= " " id=" " lang=" " language=" "leftmargin=" " link" " =nowrap=" " rightmargin" " =runat=" " scroll=" " style=" " tabindex=" " text=" " title=" " topmargin=" " vlink=" " >
- شکل ساده تگ به این صورت است :
<body alink=” ” background=” ” bgcolor=” ” vlink=” ” >
- مقادیر هر یک از شناسه های ارایه شده برای تگ body در قسمت ” ” قرار خواهد گرفت شناسه های دیگر تگ body عبارتند از :
onload , onunload , onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmoouseout , onkeypress , onkeydown , onkeyup (intrinsic events ),
- تایپ متن ساده در صفحه مورد نظر
- همانطور که ذکر شد بخش اصلی یک صفحه وب در قسمت بدنه و در بین تگ body قرار میگیرد برای قرار دادن متن در صفحه به صورت پاراگراف متن مورد نظر راداخل تگ های <p> و <p/>تایپ کنید تگ <p>نشان دهنده پاراگراف بودن متن قرار گرفته در داخل تگ است زبان HTML وجود Enter , Return یا فاصله های خالی موجود در متن را تشخیص نمیدهد به همین دلیل میتوان از تگ <P> برای ایجاد فاصله استفاده کرد توصیه میشود که در انتهای پاراگراف <P/> را بنویسید در صورت تمایل میتوانید متن یک پاراگراف را به صورت چین چین , راست چین یا وسط چین تنظیم کنید برای این منظور در تگ ابتدای پاراگراف مزبور , شناسه align را با مقادیر center , right , left یا justify مقدار دهی کنید شناسه align برای تراز بندی متن یک پاراگراف مورد استفاده قرار میگیرد و مقادیر ذکر شده در بالا برای این شناسه به کار میرود و
- مرور صفحه طراحی شده به کمک IE
- پس از انجام مراحل ذکر شده برای مشاهده صفحه طراحی شده خود کافی است روی فایل paragraph.htm دابل کلیک کنید تا مرورگر IE فایل مورد نظر را اجرا کرده و نمایش دهد برای مشاهده مبدا تگ های فایل یاد شده از منوی Viewگزینه Source را انتخاب کنید .
خوب دوستان اینم از آموزش بخش سوم . امید واردم مفید بوده باشه براتون…
آرزومند بهترین ها برای شما …
منبع: bigtheme.ir
لینک کوتاه: https://bigtheme.ir/?p=931