مقدمات برنامه‌نویسی وب

زبان برنامه‌نویسی HTML

زبان HTML‎ ‏(Hyper Text Markup Language) زبانی برای برنامه‌نویسی مبتنی بر پروتکل HTTP است که به وسیله آن می‌توان صفحات Web را تولید نمود. HTML نوعی زبان توصیف کننده (کاملاً متفاوت و بسیار آسانتر از زبان‌های متداول برنامه سازی نظیر C) است که برای نمایش دادن صفحات وب به کار‌ می‌رود. تقریباً تمامی صفحات دریافتی ما از اینترنت به این زبان نوشته شده‌اند و مرورگرهای وب‌ می‌توانند آن زبان را به ما نمایش دهند. کامپایلر این زبان به نوعی خود مرورگرها هستند که این زبان را اجرا می‌کنند و مانند زبان‌های برنامه‌نویسی مثلا C کامپایلر جدا ندارند.

به واحدهای سازنده‌ی کد HTML، تَگ می گویند. در واقع تگ ها کلماتی کلیدی هستند که در زبان HTML قرارداد شده‌اند و یك مرورگر وب با دیدن هر کدام از این کلمات، متون و یا تصاویر موجود در صفحه را به نوعی نمایش میدهد.

کدهای HTML را می‌توانید در محیط Notepad نوشته و به هنگام ذخیره‌سازی پسوند فایل را به عنوان html. ذخیره نمایید (هنگام این کار برای ذخیره‌سازی با فرمت غیر از txt در قسمت all file، save as type را انتخاب نموده و همچنین در صورتی که در فایل خود از نوشتار فارسی هم استفاده کرده‌اید Encoding ذخیره‌سازی را بر روی UTF۸ قرار دهید).

استفاده از نرم‌افزار +‌+Notepad بیشتر توصیه می‌شود.

تگ‌های اصلی

ساختار برنامه نویسی در HTML به صورت درختی و با استفاده از tag‌ها‌ می‌باشد. تگ‌ها کلیدواژه‌هایی هستند که با نماد $< >$ در بر گرفته می‌شوند. عموما این کلیدواژه‌ها یک بار با تگ شروع و در انتها با تگ انتها مشخص می‌گردند و فضای اعمال شدن آنها در میان این دو تگ خواهد بود. تگ‌های انتهایی مانند تگ اولیه‌اند با این تفاوت که یک علامت $"/"$ هم دارند. به عنوان مثال: 

  <html>     </html>

مراحل کار این جلسه به شرح زیر است:

در آغاز کار، یک صفحه Notepad را باز نموده و تگ‌های بالا را در آن قرار دهید. در واقع فضای کاری ما برای نوشتن کدهای HTML در میان این دو تگ خواهد بود. فایل مذکور را از طریق گزینه save as همانطور که در بالا توضیح داده شد، در محلی از کامپیوتر خود با نام دلخواه و با پسوند html. ذخیره کنید. اکنون در صورت اجرای آن فایل خواهید دید که به وسیله مرورگر باز خواهد شد. (که البته هنوز یک صفحه خالی است!)

برای مشخص کردن عنوان صفحه، از تگ title استفاده می کنیم. در صفحه قبلی که ایجاد کردید، یك عنوان اضافه کنید: 

  <html>       
       <title>   
            My first HTML page! 
       </title>  
  </html>

و پس از ذخیره‌سازی مجدد، حاصل کار را با کمك browser مشاهده کنید:

تگ head به صورت <head> </head> حاوی اطلاعاتی در خصوص صفحه html شما خواهد بود که در ادامه کاربرد‌های آن را خواهیم دید. بدنه صفحه نیز در تگ body قرار خواهد گرفت. 

  <html>
       <title>   
           My first HTML page!
       </title>  
       <body>
           بدن و محتوات صفحه
       </body>
  </html>

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

برای نوشتن متن در صفحه، میتوانید پاراگراف‌بندی داشته باشید، هر پاراگراف با <p> آغاز شده، متن مورد نظر نوشته می‌شود و سپس در انتها، پایان پاراگراف با <p/> مشخص می‌شود. در صورت آغاز یك پاراگراف دیگر، از خط بعدی نمایش داده می‌شود. 

   <P>  
       پاراگراف اول
   </p>
   <p>
       پاراگراف دوم
   </p>

در صورتیکه بخواهید در متن خود، به غیر از این پاراگراف‌ها که خود به خود هر پاراگراف جدید به خط بعدی منتقل می‌شود، در جایی ادامه متن را از خط بعدی بنویسید، در صورتی که به صورت عادی از کلید enter استفاده کنید در حاصل کار که با کمك browser نمایش داده می‌شود خواهید دید نوشتار به خطوط بعدی منتقل نشده است حاصل کد بدنه و محتویات صفحهزیر در یك browser به شکلی که در تصویر آمده نمایش داده خواهد شد: $)$ برای جلوگیری از شلوغ شدن صفحه تنها قسمت تغییر یافته کد در ادامه خواهد آمد و تمام صفحه HTML در اینجا تکرار نمی‌شود $($ 

   
   <body>
       Computer workshop                
   </body>

برای آنکه در محل دلخواه انتقال به خط بعد صورت گیرد از تگ <br> استفاده می‌کنیم. ( این تگ از آن دسته tag هایی است که نیازی به تگ انتهایی ندارد یعنی لازم نیست یك <br/> هم داشته باشیم). گاهی ان را به صورت </br> نیز مینویسند: 

   <body>
       Computer workshop <br> 
       fall 92
   </body>

انواع فرمت‌های متنی که در نوشتارها پیش از این با نرم‌افزار‌های مختلف اعمال می‌کردیم، در این جا نیز قابل پیاده‌سازی است. برای Bold کردن یك بخش از $<br> </br>$ برای italic از $<i></i>$ و برای آن که در زیر متن خط کشیده‌شود $(under line)$ از $<u> </u>$ استفاده می‌کنیم: ( می‌توان تعدادی از این تگ‌ها را به صورت ترکیبی درون هم نیز استفاده کرد. ) به مثال زیر توجه کنید: 

   <body>
       <b>Computer workshop</b>
       <br>
       <i>fall 29 </i><br/>
       <u><b>example</b></u>
   </body>

همچنین در HTML، بیش از یك space مانند enter نادیده گرفته می شود. در صورت نیاز به داشتن بیش از یك space از «;nbsp&» استفاده میشود: 

   Computer workshop &nbsp; &nbsp; &nbsp; fall 29

برای نوشتن لیست و درج bullet در صفحات html از تگ های <ul> </ul> یا <ol> </ol> استفاده می شود که به ترتیب غیر شمارشی و شمارشی است. درون این تگ, هر قسمت با <li> </li> مشخص می‌شود. 

   <ul>
     <li> Software </li>
     <li> Hardware </li>
     <li> IT </li>
   </ul>

   <ol>
     <li> Software </li> 
     <li> Hardware </li>
     <li> IT </li> 
   </ol>

در صورتی که از تگ <ol> یا <ul> استفاده نکنید و تنها از <li> ها استفاده کنید، bullet ها از حاشیه صفحه فاصله‌ای نخواهند داشت.

زمانی که از یك لیست شمارشی استفاده می‌کنیم می‌توان نوع آن را نیز مشخص کرد که به صورت .. a b c .. ، A B C ، … I II III IV و … باشد: 

  <ol type="A">
    <li> Software </li>
    <li> Hardware </li>
    <li> IT </li> 
  </ol>

به مواردی چون type که مشخصات اضافی محتوای یك تگ را مشخص می کنند Attribute می گویند.

قرار دادن لینک در صفحه: 

   <a href = " عبارتی که در صفحه نمایش داده میشود <" آدرس لینک مورد نظر </a>

به عنوان مثال: برای آن که لینکی به سایت دانشکده ایجاد کنیم که کاربر با کلیك بر روی عبارت My Department به این صفحه( ce.sharif.edu ) وارد شود، از کد زیر استفاده می کنیم: 

   
   <a href="http://ce.sharif.edu" > My Department </a>

تنظیم فونت

می‌توانید برای هر قسمتی از نوشتار فونت آن را مطابق نظر خود تنظیم کنید، این کار با استفاده از تگ font انجام می‌شود. در این تگ Attribute هایی مانند رنگ، اندازه و نوع رسم الخط را می‌توان تعیین نمود: 

   <font size ="18" color ="red" face ="Arial"> </font>

هر متنی که در میان این تگ آغازی و پایانی قرار گیرد، با این مشخصات خواهد بود. size اندازه نوشتار، color رنگ آن و face نوع فونت مورد استفاده را مشخص می‌کند. می‌توانید در قسمت face چند نوع فونت مختلف قرار دهید مثلاً: 

   
   face="b nazanin , tahoma"

در واقع، هنگامی که یك صفحه html توسط browser در رایانه کاربر گشوده می‌شود، با فونت های موجود در آن رایانه خوانده می‌شود. در صورتی که فونتی که ما تعیین کرده ایم موجود نباشد، متون را با فونت پیش‌فرضی که در کامپیوتر کاربر وجود دارد، نمایش خواهد داد. اما درصورتی که چند نوع فونت تعیین کرده باشیم به ترتیب هر کدام را که موجود باشد نمایش خواهد داد و در صورتی که هیچ یك وجود نداشت، مجددا با فونت پیش‌فرض و موجود در کامپیوتر کاربر نمایش داده خواهد شد.

رنگ‌ها

برای قسمت color علاوه بر رنگ های پیش‌فرضی که به کمك نام‌شان شناخته می‌شوند ( blue ، yellow ، red , … )می‌توان از رنگ دلخواه خود با دانستن سه عدد G ، R و B آن استفاده نمود. به این صورت که اعداد RGB از 0 تا 255 هستند باید آنها را به مبنای 61 محاسبه کرده و مطابق با الگوی RGB# در قسمت color قرار داد.

به عنوان مثال فرض کنید می‌خواهیم رنگ راداشته‌باشیم.برای این رنگ G = 165, R = 181 و B = 213 است این سه عدد به ترتیب در مبنای 61 به‌صورت: G=A5،R=B5 و B=D5 هستند. برای استفاده از آن در قسمت color عبارت B5A5D5# را قرار می‌دهیم، یعنی: 

  color ="#B5A5D5"

در واقع در این حالت پس از علامت # یك عدد 1 رقمی داریم، که دو رقم ابتدای آن متعلق به R دو رقم میانی متعلق به G و دو رقم پایانی متعلق به B است. توجه کنید در صورتی که عدد به دست آمده برای هر یك، یك رقمی بود مثلا 9 آن را به صورت 29 قرار می‌دهیم.

می‌توان برای background صفحه هم رنگ تعیین نمود. در تگ آغازین body قسمتی را به صورت زیر اضافه کنید: 

  <body bgcolor ="#B5A5D5" >

آن گاه خواهید دید رنگ پس زمینه صفحه مطابق با رنگی که تعیین نموده‌اید، تغییر کرده است. 

  <html>
      <title> HTML Test </title>
      <body bgcolor="#B5A5D5" >
      <font color = "yellow" size ="20"> <b> Test! </b> </font>    
      </body>
  </html>

تگ pre

تگ pre، محتوای درونی خود را با فونت و سایز خاصی ( متفاوت از فونت و سایز پیش‌فرض در سایر قسمت ها، نمایش می‌دهد. از ویژگی‌های این تگ آن است که چندین space پشت سر هم و enter را متوجه می‌شود و دیگر نیازی به استفاده از br و ;nbsp& نیست. 

  <body bgcolor="#B5A5D5" >
  Computer workshop! 
  <pre>fall 29-93
  weekly 13-15:30
  </pre> </body>

تگ xmp

اگر بخواهید تکه کدی از html را عینا در صفحه نمایش دهید، باید از تگ xmp استفاده کنید. در غیر این صورت تگ‌ها را به عنوان دستور تلقی کرده و اجرا می‌کند، اما هر آن چه در میان <xmp> </xmp> بنویسید عینا در صفحه browser نمایش داده خواهد شد: 

  <xmp>
  <body> Hello! </body>
  <font size = "2" > ! </font>
  </xmp>

می‌توان داخل تگ pre هم دستور html را نوشت تا به صورت عادی نمایش داده شود، با این تفاوت که باید به جای علامت‌های < و > معادل عددی آن یعنی ;60#& و ;62#& را استفاده کنید. 

  <PRE> &#60;body&#62; </PRE>

استفاده از کاراکتر‌های عددی به جای علائم خاص و شناخته‌‌شده html در خارج از تگ pre نیز همین کاربرد را دارند یعنی در صورتی که به جای استفاده از > و < از معادلشان در متن ها استفاده کنید به صورت عادی نمایش داده می‌شوند و به عنوان کد HTML شناخته نخواهند‌شد.

عکس

برای قرار‌دادن عکس در صفحه از تگ img استفاده می‌کنیم. این تگ نیز انتها ندارد و تصویر مورد نظر در داخل آن با کمك Attribute هایی مشخص می‌شود: 

   <img src =”address” alt=” ...” >

در قسمت src آدرس تصویر مورد نظر درج می‌شود $)$ آدرس نسبی $($ . در صورتی که فایل تصویر در همان محلی که صفحه HTML مان قرار دارد قرار داشته باشد آدرس نسبی آن فقط نام فایل تصویر خواهد بود. $)$ هنگام آدرس دهی فراموش نکنید که باید format تصویر را نیز مشخص نمایید $($ . آن چه در قسمت alt نوشته می‌شود، متن و یا عبارتی است که در صورت قرار دادن نشانگر موس بر روی تصویر در کنار آن نمایش داده خواهد شد. 

  <body>
     <img src="flower.jpg" alt="tasvir">
  </body>

می‌توان برای تصویر border تعیین نموده و همچنین اندازه آن در صفحه را مشخص کرد. ( توجه کنید در صورتیکه اندازهای به آن ندهید، تصویر به اندازه حقیقی فایل استفاده شده نمایش داده خواهد شد. ) 

  <body>
     <img src="flower2.jpg" border="1" alt="tasvir" width="200" height="120">
  </body>

توجه داشته باشید که اگر فرمت تصویر شما jpeg بود، در زمان آدرس‌دهی آن را به صورت jpg بنویسید.

نوشته‌ی متحرک

برای داشتن یك نوشته متحرک از marquee استفاده می‌شود به این صورت که هرچه در میان تگ آغازین و پایانی آن قرار گیرد، به صورت متحرک در صفحه نمایش داده خواهد شد. 

  <marquee> CE Department </marquee>

عبارت CE Department در عرض صفحه حرکت می‌کند. حاصل این کار از آن جا که متحرک است اینجا قابل نمایش نیست، اما نتیجه را در کلاس خواهید دید! این حرکت به صورت پیش‌فرض از راست به چپ است اما می‌توان برای ان جهت تعیین نمود، مثلاً: 

  <marquee direction = “right”> CE Department </marquee>

می‌توان در قسمت up ، left ، right ) direction و down ) را قرار داده و نتیجه هرکدام را مشاهده کنید.

می‌توان این کار را برای تصاویر نیز انجام داد. برای داشتن یك تصویر متحرک کافی است که به جای عبارت CE Department تصویر را به همان شیوه ای که برای درج تصویر در متن در بالا توضیح داده شد، درج کنیم.

جدول‌ها

جدول با تگ <table> </table> مشخص میشود. هر ردیف در جدول با <tr> </tr> و هر سلول جدول با <td> </td> مشخص می‌شود. پس نحوه ی صحیح کد یك جدول به صورت زیر خواهد بود.

به عنوان مثال فرض کنید جدول دارای دو ردیف و سه ستون است و در هر خانه آن داده ای مطابق آن چه در ادامه آمده درج شده است: 

  <table>
      <tr> <td> std number: </td> <td>89123456 </td> </tr> 
      <tr><td> Department: </td><td> Computer </td></tr> 
  <table>

در صورتی که حاصل این کد را به وسیله browser مشاهده کنید خواهید دید داده ها به صورت مرتب قرار دارند اما اثری از جدول نیست! از آن جایی که برای جدول border ای تعیین نکرده ایم، قطر این حاشیه به صورت پیش فرض 0 در نظر گرفته شده، کافیست که به آن مقداری دهیم یعنی: 

  <body>
      <table border = "1">
          <tr> <td> std number: </td> <td>89123456 </td> </tr> 
          <tr><td> Department: </td><td> Computer </td></tr> 
      <table>
  </body>

زمانی که می‌خواهید تعدادی مولفه در صفحه به صورت منظم و تراز شده نسبت به یکدیگر قرار گیرند، استفاده از جدول‌های بدون border کاربرد دارد.

یك متن یا تصویر به طور پیش‌فرض از سمت چپ صفحه آغاز می‌شود. اما برای تعیین محل آن به صورت دلخواه، مثلاً برای آن که در وسط صفحه قرار گیرد آن را درون تگ center یعنی بین <center> </center> قرار دهید.

همچنین برای محل قرار گیری تصویر،میتوان از alignاستفاده نمود. به عنوان مثال در زیر یك نمونه‌ از سه نوع درج تصویر در صفحه را می‌بینید: 

  <html>
    <title> HTML Test </title>
    <body bgcolor="#B5A5D5" >
        <img alt="" src="flo.jpg">
        <center>
           <img alt="" src="flo.jpg">
        </center>
        <img alt="" src="flo.jpg" align="right">
    </body>
  </html>

همچنین می‌توان جهت کلی صفحه را تغییر داد. همانطور که دیدید به صورت عادی نوشتار از چپ به راست درج می‌شود اما در صورتی که از نوشتار فارسی استفاده کنید بایستی صفحه راست به چپ باشد. برای این منظور کافیست در قسمت body این جهت‌دهی را به صورت زیر مشخص کنید: 

  <body dir="rtl">

rtl نشان‌دهنده‌ right to left است و برعکس آن, ltr , Left to right خواهد بود.

اگر همان کد بالا را با اضافه کردن ”dir =”rtl به body اجرا کنید تصور اول نیز در سمت راست صفحه خواهد بود.

( CSS (Cascade Style Sheet

برای مشخص کردن تنظیمات مرتبط به متن، جدول ها و تصاویر در کدهای style ، HTML تعریف می‌شود. style می‌تواند به صورت داخلی یا خارجی تعریف شود. style sheet های خارجی در فایل های CSS با پسوند css. ذخیره می‌شوند.

برای استفاده از یك style sheet خارجی ( یك فایل CSS ) در قسمت head باید با استفاده از تگ link این فایل را معرفی کنیم. این تگ به صورت زیر خواهد بود: 

  <link rel="stylesheet" type="text/CSS" href="myStyle.CSS" />

در قسمت href باید آدرس نسبی فایل CSS را قرار دهیم. در این نمونه فرض شده است که فایل مذکور در همان محلی قرار گرفته است که فایل html قرار دارد و نام آن myStyle.css است.

در فایل CSS می‌توانید Attribute های تگ‌های شناخته شده html را تعیین کنید. به عنوان مثال در فایل myStyle.CSS ( که به وسیله notepad ساخته و با این پسوند ذخیره میکنیم ) تعاریف زیر را قرار میدهیم: 

  body {
     background-color: yellow;
     font-size: 20pt;
    }

نکته: توجه داشته باشید که مقادیر تعریف شده دقیقا نام Attribute های درون html را ندارند. به جای علامت = از : استفاده می‌شود و در انتهای هر خط باید یك ; قرار بگیرد.

حال در فایل html به صورت زیر می‌نویسیم: 

  <html>
     <title> HTML Test </title>
      <head>
        <link rel="stylesheet" type="text/CSS" href="myStyle.CSS" />
      </head>
     <body>
        Computer Workshop 
     </body>
  </html>

همان طور که می‌یینید دیگر در این جا برای body رنگ تعیین نکرده‌ایم. ( فایل HTML و CSS در این نمونه، در یك محل قرار دارند)

علاوه بر تعریف Attribute های مرتبط با تگ‌های شناخته شده HTML در CSS می‌توانیم کلاس‌ها و دسته‌بندی‌های جدیدی ایجاد کنیم. مثلا می‌خواهیم مشخصه‌هایی را تحت نام item تعریف کنیم، برای این کار در فایل css خواهیم داشت: 

   .item
   {    font-family: b roya, tahoma;
        font-weight:bold;
        color: #7F0200; 
   }

توجه: برای تعریف دسته‌های جدید بایستی حتما قبل از نام آنها یك کاراکتر « . » بگذاریم.

حال برای استفاده از این ویژگی‌ها در HTML بعد از آن که فایل css را به همان طریق گذشته به آن شناسانده و اضافه نمودیم، در محلی که میخواهیم از این کلاس خاص استفاده کنیم این گونه عمل خواهیم نمود: 

  <html>
    <title> HTML Test </title>
    <head>
       <link rel="stylesheet" type="text/CSS" href="myStyle.CSS" />   
    </head>
    <body>
       <font class="item">
           Computer Workshop.
       </font>
    </body>
  </html>

Java Script

مدل (Document Object Model (DOM یك قرارداد مستقل از بان برنامه نویسی برای نمایش و تعامل با اشیاء( Object ) در اسناد HTML است. اشیاء در درخت DOM با استفاده از متدهایی قابل ادرس دهی و تغییر هستند. این مدل به برنامه‌ها و اسکریپت‌ها امکان دسترسی و به‌روز رسانی محتوا، ساختار و استایل اسناد را می‌دهد. سند طبق متد معین شده پردازش شده و نتیجه پردازش‌ها در صفحه نمایش داده می‌شود.

از java script برای تعاملی کردن HTML و ایجاد صفحات وب تعاملی استفاده می‌شود. در آنچه تا کنون دیدیم، کاربر نمی‌توانست با آن چه در صفحات درج شده‌است ارتباطی داشته باشد و با انتخاب‌های خود تغییراتی در آن ایجاد کند، تمام آن چه بر روی صفحات نمایش داده می‌شد یك طرح از پیش تعیین شده و ثابت بود.

در java Script می‌توان توابع و function هایی تعریف کرد که هنگام وقوع یك رویداد( event ), مثلا کلیك کردن کاربر بر روی بخشی از صفحه، این توابع اجرا شوند. می‌توان با استفاده از onClick مشخص نمود که هرگاه کاربر بر روی قسمت خاصی از صفحه html کلیك کرد، یکی از توابع تعریف شده در قسمت script اجرا شود. توابع در این بخش با syntax ای به صورت زیر تعریف می‌شوند: 

   function name() {
      ......   
   }

کدهای java script درون تگی با فرمت زیر نوشته می‌شوند: 

   <script type=”text/javascript”> </script>

در ادامه نمونه ساده ای برای استفاده از java script می‌بینید: 

  <html>
     <title> HTML Test </title>  
     <head>
       <script type="text/javascript">
           function show()
                 {
                   document.write("<b> Java Script</b>"); 
                 }
       </script> 
     </head>
  <body>
     <font color="red" onClick="show()">
         Computer Workshop
     </font>
  </body>
  </html>

حاصل این کد به این صورت خواهد بود که ابتدا صفحه سمت چپ نمایش داده می‌شود. در صورتی که کاربر بر روی عبارت Computer Workshop کلیك کند، تابع show همانطور که در onClick مشخص شده است، اجرا شده و صفحه دوم نمایش داده می شود:

می‌توان برای توابع تعریف شده در java script ورودی نیز تعیین کرد. همچنین آنچه در مثال بالا دیدید تمام محتوای صفحه را تغییر داد، اما می‌توان بخش خاصی از صفحه را انتخاب نمود و با اجرای تابع تنها آن بخش را تغییر داد. این کار با استفاده از تگ div و تعریف یك id مشخص انجام می‌شود. به عنوان مثال: 

  <html>
    <title> HTML Test </title> 
    <head>
      <script type="text/javascript"> 
      function change(inp)
              {
               switch(inp) 
                  {
                      case "s":
                      document.getElementById('content').innerHTML='<b> Software Group </b>';
                      break;
                      case "h" :
                      document.getElementById('content').innerHTML='<b> Hardware Group </b>'; 
                      break;
                      case "i" :
                      document.getElementById('content').innerHTML='<b> IT Group </b>';
                      break;
                  } 
              }
     </script>
   </head> 
   <body> 
   <ul>
      <li onclick="change('s');">Software </li>
      <li onclick="change('h');"> HardWare</li>
      <li onclick="change('i');">Information Technology </li> 
   </ul>
      <font color="red">
         Group name:</br>
      </font>
   <div id ='content'> name! </div>
   </body>
   </html>

در صورت کلیك بر روی هر کدام از این سه عبارت در صفحه‌ی ابتدایی، یکی از سه شکل زیر نشان داده می‌شود. در واقع بخش مشخص شده با div به صورت تعیین شده در تابع change متناسب با ورودی ارسالی، تغییر خواهد کرد:

برخی از ویرایشگرها برای کار با صفحات HTML

ویرایشگرهای ساده متون برای تولید صفحات وب:

  • AkelPad
  • Crimson Editor
  • FAR Manager (+Colorer plugin)
  • gedit
  • jEdit
  • Kate
  • Metapad
  • nano
  • NEdit
  • Notepad
  • WordPad
  • SciTE
  • Tex-Edit Plus  TextEdit
  • TED Notepad

ویرایشگرهای کد، برگرفته از ویرایشگرهای متون با این تفاوت که شامل برخی ابزارهای کار با کد هستند:

  • ActiveState Komodo
  • Alleycode HTML Editor
  • Astana
  • Arachnophilia
  • BBEdit
  • BlueFish
  • Brackets
  • Coda
  • CoffeeCup HTML Editor
  • E Text Editor
  • Eclipse
  • EditPlus
  • EmEditor
  • Geany
  • HTML-Kit
  • HomeSite
  • Notepad+‌+
  • NetBeans IDE
  • NoteTab
  • PHPEdit
  • PhpStorm IDE
  • Programmer's Notepad
  • PSPad
  • RJ TextEd
  • Scintilla
  • Smultron
  • Sublime Text
  • skEdit
  • TED Notepad
  • TextMate
  • TextPad
  • Tincta
  • TopStyle
  • UltraEdit
  • Web Architect
  • WebStorm IDE
  • vi
  • Vim

میتوان ویرایشگرهای بیشتری را با مراجعه به ادرس زیر یافت:

http://en.wikipedia.org/wiki/List_of_HTML_editors