آموزش طراحی مقدماتی تا پیشرفته صفحات وب

آموزش طراحی قالب وب سایت با html

با سلام در خدمتتون هستیم با قسمت سوم از آموزش طراحی قالب وب سایت با html , در این آموزش با کلیات html و ساختار کلی یک صفحه ی وب  آشنا خواهید شد . یاد آوری کنم که برخی تگ ها به صورت تکی استفاده میشن و برخی از تگ ها هم نیاز با تگی دارن که زوج اون تگ به حساب میاد. مثلا تگ :

<br />

باعث شکست خط میشه. یعنی یک خط یا یک سطر  رو  خالی میزاره و میرا به سطر و خط بعدی. این تگ به صورت تکی استفاده میشه و تگ زوج نداره. اما تگ زیر :

<title> design web </title>

همون طور که مشاهده می کنید تگ تایتل رو باز کردیم و در آخر اون و بستیم که یه اسلش / داره. در ادامه بیشتر آشنا خواهید شد. راستی اگه قسمت های قبل رو مطالعه نکردید می تونید از قسمت مطالب مرتبط پیداشون کنید.

طراحی وب سایت و آموزش html

توانایی طراحی صفحات ساده به کمک 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

یک نظر

  1. مهدی

    html فقط قالب بندی رو انجام میده.اگر بخواهید سایتی مثلا مثل این سایت رو طراحی کنید به برنامه نویسی CSS , Javascript ,… نیاز دارید.

  2. بازدید کننده سایت

    سلام کاش طراحی سایت رو به صورت تصویری قرار میدادید شما فقط کد و توضیحات قرار دادید

  3. زهرا

    سلام ببخشید من یه اموزش اچ تی ام ال سایت میخوام ک اصلا با فتوشاپ کار نکرده باشه چون فتوشاپم خوب نیس میخام همه کارمو با html برای سایتم انجام بدم هیچ نبود شما اموزشی ندارید ک بتونم از روش انجام بدم
    منتظر جوابتونم

  4. sustain

    سلام
    یک سوال صفحه ای رو با dreamweaver طراحی کردم اما موقع اجرا گرفتن توی هر مرورگری اندازش عوض میشه یعنی یا به اندازه ی اون پنجره ی باز شده نیست یا اونقدر بزرگ تر هست که باید از نوار پیمایش ها استفاده کنم.. برای حل این مشکل باید چیکار کنم؟ ممنون میشم کمکم کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *