ვიზუალური HTML რედაქტორი. ვიზუალური HTML რედაქტორი

ამ სტატიაში წარმოდგენილია რამდენიმე ყველაზე ფუნქციონალური CSS კოდების რედაქტორებიფრონტ-ენდის დეველოპერებისთვის. ისეთი ფუნქციებით, როგორიცაა სინტაქსის ხაზგასმა, პირდაპირი ყურება, გამართვა და ერთობლივი რედაქტირება, ეს სერვისები შეიძლება იყოს შესანიშნავი არჩევანი ვებ-განვითარებისთვის პირდაპირ თქვენი ბრაუზერის ფანჯარაში.

ონლაინ კოდების რედაქტორები

1. CodePen

ის გთავაზობთ HTML, CSS და JavaScript-ის მხარდაჭერას და წინასწარ პროცესორების დიდ რაოდენობას. Haml, Markdown, Slim და Jade არის მხარდაჭერილი, როგორც HTML წინასწარი პროცესორები. CSS-ისთვის Less, SCSS, Sass და Stylus მხარდაჭერილია. JavaScript-ისთვის მხარდაჭერილია CoffeeScript, TypeScript, LiveScript და Babel.

გარდა ამისა, არსებობს დეველოპერების უზარმაზარი საზოგადოება, რომლებიც იყენებენ CodePen-ს. ეს აადვილებს გამოცდილი დეველოპერების მიერ შექმნილი დემოსა და მაგალითების პოვნას.

CodePen Pro მხარს უჭერს ერთობლივ რეჟიმში, რომელიც საშუალებას გაძლევთ შეავსოთ კოდი რეალურ დროში. ასევე არის პროფესორის რეჟიმი, რომელიც საშუალებას აძლევს სტუდენტთა ჯგუფს გამოგყვეს კოდის ახსნისას და შეგიძლიათ ესაუბროთ მათ.

2. JSFiddle

კიდევ ერთი პოპულარული ონლაინ CSS რედაქტორი. იგი წარმატებით გამოიყენებოდა დეველოპერების მიერ საკმაოდ დიდი ხნის განმავლობაში და პირველი იყო CodePen-ის მოსვლამდე. JSFiddle არის ადვილად გამოსაყენებელი ონლაინ კოდის რედაქტორი უფასო ერთობლივი რედაქტირებით, ტექსტური და ხმოვანი ჩატით. თანამშრომლობის ფუნქციის გამოსაყენებლად რეგისტრაციაც კი არ გჭირდებათ.

JSFiddle ასევე მხარს უჭერს SCSS და CoffeeScript. JSFiddle საკმაოდ აადვილებს კოდებზე ან მასპინძელ დემოებზე თანამშრომლობას.

3. ცოცხალი ქსოვა

ეს არის ონლაინ CSS რედაქტორი რეალურ დროში გადახედვის ფუნქციით. Liveweave მოიცავს ჩაშენებულ კონტექსტზე მგრძნობიარე HTML5, CSS3, JavaScript და JQuery კოდის მინიშნებებს. ის ასევე საშუალებას გაძლევთ ჩამოტვირთოთ თქვენი პროექტი არქივის სახით, რაც ძალიან მოსახერხებელია.

Liveweave საკმაოდ აადვილებს გარე ბიბლიოთეკების, როგორიცაა JQuery, AndgularJS, Bootstrap და ა.შ. დაკავშირებას თქვენს პროექტებთან. მას ასევე აქვს სახაზავი ინსტრუმენტი, რომელიც ეხმარება საპასუხო ვებ დიზაინის შემუშავებაში. Liveweave გთავაზობთ " გუნდი Up", რომელიც უზრუნველყოფს იგივე ფუნქციონირებას, როგორც ერთობლივი რედაქტირების რეჟიმი JSFiddle-ში.

4. პლანკერი

ეს არის ონლაინ საზოგადოება (ასევე CodePen) კოდირება, თანამშრომლობა და ვებ განვითარების იდეების გაზიარება. სერვისი არის ღია კოდის ონლაინ რედაქტორი, რომელიც ლიცენზირებულია MIT ლიცენზიით. Plunker Source Codeშეგიძლიათ იპოვოთ GitHub-ზე.

ონლაინ CSS სტილის რედაქტორი საშუალებას გაძლევთ დაამატოთ მრავალი ფაილი თქვენს სამუშაო სივრცეში და ასევე გთავაზობთ საზოგადოების მიერ შექმნილ შაბლონებს, რომლებიც შეგიძლიათ გამოიყენოთ თქვენი პროექტის სწრაფად დასაწყებად.

5. JS Bin

ღრუბლოვანი გარემო JavaScript კოდთან თანამშრომლობისთვის. იგი მოიცავს მხარდაჭერას მთელი რიგი წინასწარი პროცესორებისთვის, როგორიცაა SCSS, Less, CoffeeScript, Jade და სხვა. კონსოლი ასევე ხელმისაწვდომია გამართვისა და კოდის განსახილველად, რომელიც ფუნქციონირებს Google Chrome-ის ან Firefox-ის კონსოლის მსგავსად.

JS Bin ასევე მხარს უჭერს კოდის შექმნის ინტერაქტიულ ჩაწერას და მაუწყებლობას ნებისმიერი რაოდენობის მონაწილეზე. ეს რეჟიმი ხელმისაწვდომია უფასოდ რეგისტრირებული და ანონიმური მომხმარებლებისთვის.

6. CSS Deck

ეს CSS რედაქტორი ცოტა უფრო მარტივია სხვა ინსტრუმენტებთან შედარებით. ძირითადი ფუნქციების გარდა, ის შეიცავს კომენტარის ფუნქციას. დემოს გაზიარება და ჩაშენება ასევე მხარდაჭერილია CSS Deck-ში.

7. კოდეტესტი

kodtest სასარგებლოა, როდესაც გჭირდებათ თქვენი კოდის ტესტირება ეკრანის სხვადასხვა ზომებზე. ეს ონლაინ ინსტრუმენტი საშუალებას გაძლევთ სწრაფად გადახვიდეთ რამდენიმე წინასწარ დაყენებულ ეკრანის ზომას შორის.

ონლაინ კოდის რედაქტორების დემონსტრირება

ქვემოთ მოცემულია დემო ვერსია, რომელიც შევქმენი CodePen-ზე. შეგიძლიათ ჩანართების გადართვა HTML, CSS და JS კოდების სანახავად. ან ექსპერიმენტი ჩაატარეთ ფიგურების გადაადგილებით „შედეგი“ ჩანართზე.

დემოს ნახვა

დასკვნა

ონლაინ CSS რედაქტორებიშეიძლება გამოყენებულ იქნას სხვადასხვა მიზნებისთვის. მაგალითად, თუ გჭირდებათ პროექტებზე ერთობლივი მუშაობა ან კლიენტისთვის დემო ვერსიის ჩვენება.

ვებ-ზე დაფუძნებული კოდების რედაქტორები ასევე შესანიშნავია საგანმანათლებლო მიზნებისთვის, რადგან ისინი არ საჭიროებენ ინსტალაციას და ხელმისაწვდომია ყველა ტიპის მოწყობილობიდან.

თუ დეველოპერი ხართ, დაწერეთ კომენტარებში თქვენი საყვარელი ონლაინ კოდის რედაქტორის შესახებ.

სტატიის თარგმანი " 7 უფასო ონლაინ კოდის რედაქტორი Front-End ვებ განვითარებისთვის» მომზადდა Website Building-ის A-დან Z-მდე პროექტის მეგობრული გუნდის მიერ.

ნებისმიერი დოკუმენტის კონვერტაცია სუფთა HTML-ში. ეს უფასო ონლაინ კოდის ფორმატორი დაგეხმარებათ სწრაფად და მარტივად შექმნათ თქვენი დოკუმენტები. თქვენ შეგიძლიათ ერთდროულად ნახოთ და დაარედაქტიროთ ვიზუალური კოდის დოკუმენტი. დაარედაქტირეთ ერთ-ერთი ველი და ცვლილებები აისახება მეორე ველში მყისიერად, იმავე დროს, როგორც თქვენ აკრიფებთ.

WYSIWYG რედაქტორი "რას ხედავთ არის ის რასაც იღებთ"

ამ ვიზუალურ ტექსტურ რედაქტორში მუშაობა ძალიან ინტუიციურია. ის იქცევა Microsoft Word-ის, Open office-ის ან ნებისმიერი სხვა მდიდარი ტექსტური რედაქტორის მსგავსად და საშუალებას გაძლევთ წინასწარ ნახოთ როგორი იქნება ელემენტები თქვენს სტატიას საიტზე გამოქვეყნებისას. გთხოვთ გაითვალისწინოთ, რომ გარეგნობა შეიძლება ოდნავ განსხვავდებოდეს ვებსაიტის CSS ფაილის მიხედვით.

წყარო კოდის რედაქტორი

HTML კოდის რედაქტორს მონიშნული სინტაქსით აქვს მრავალი სასარგებლო ფუნქცია, როგორიცაა:

• ხაზის ნომრის მრიცხველი
• აქტიური რიგის არჩევა
• გახსნის და შესაბამისი დახურვის ტეგების მონიშვნა
• ტეგების ავტომატური დახურვა
• დამატებითი დეტალებისთვის იხილეთ ქვემოთ...

დასუფთავების პარამეტრები:

• ჩაშენებული სტილები- წაშალე თითოეული სტილიტეგის ატრიბუტი. სტილისთვის რეკომენდებულია ცალკე CSS ფაილის გამოყენება.
• კლასი & ID- შლის ყველა ატრიბუტს კლასიდა id. ეს ფუნქცია სასარგებლოა იმ შემთხვევაში, თუ თქვენ გადააქვთ სტატია ერთი საიტიდან მეორეზე და გსურთ თავი დააღწიოთ უცხო კლასებს.
• ცარიელი ტეგები- შლის ტეგებს, რომლებიც არაფერს შეიცავს ან მხოლოდ სივრცეს.
• ერთი სივრცის ტეგები- შლის ტეგებს, რომლებიც შეიცავს ერთ სივრცეს, მაგ
• განმეორებადი სივრცეები- შლის განმეორებით სივრცეებს, რომლებიც გამოწვეულია ტექსტის მარჯვნივ გადართვისა და ტექსტში ცარიელი სივრცის რეგულირებით გამოწვეული ცუდი პრაქტიკით:
• კომენტარების წაშლა- მოიშორეთ HTML კომენტარები:
• ტეგის ატრიბუტები- წაშლის ყველა ტეგის ატრიბუტს, მათ შორის სტილებს, კლასებს და ა.შ. ეს პარამეტრი არ მოქმედებს srcსურათები და ატრიბუტი hrefბმულები, რადგან წინააღმდეგ შემთხვევაში ეს ტეგები უსარგებლო გახდება.
• უბრალო ტექსტში- შლის ყველა ტეგს, ფორმატირებას და ტოვებს უბრალო ტექსტს.

HTML რედაქტორის პარამეტრები

გახსენით ჩამოსაშლელი მენიუ ▼ დასუფთავების ვარიანტების საჩვენებლად. არჩეული ოფციები შესრულებულია HTML ღილაკზე დაჭერის შემდეგ. დააწკაპუნეთ წითელ სამკუთხედის ხატულაზე მარჯვნივ, რომ შეასრულოთ მხოლოდ ერთი მათგანი.

• გაუქმება- აღადგინეთ დოკუმენტი წინა მდგომარეობაში. დაუბრუნდით წინა საფეხურს, თუ დასუფთავების ვარიანტი არ მოიტანს სასურველ შედეგს.
• ახალი გვერდი- წაშალეთ მთელი დოკუმენტი ნულიდან დასაწყებად.
• შეკუმშოს- ჩანართები და ახალი ხაზები გამოიყენება იმისათვის, რომ HTML ფაილი უფრო ადვილად იკითხებოდეს, მაგრამ არ იმოქმედებს ვებ ბრაუზერში ჩვენებაზე. წაშალეთ ეს არასაჭირო სიმბოლოები ფაილის ზომის შესამცირებლად და გვერდის უფრო სწრაფად ჩატვირთვის მიზნით.
• ხედი ხედი- დააყენეთ ტექსტის ჩაღრმავება თეგის იერარქიის ხაზგასასმელად. ამ პარამეტრით შეგიძლიათ შეკუმშული დოკუმენტები ხელახლა იკითხებოდეს.
• სიმბოლოების კოდირება- გადაწყვიტეთ, გსურთ თუ არა სპეციალური სიმბოლოების დაშიფვრა. მაგალითად
• დემო შინაარსი- შეავსეთ თქვენი დაფა დემო კონტენტით, რომელიც დაგეხმარებათ ინსტრუმენტთან ექსპერიმენტში. დემო შეიცავს სათაურს, ცხრილს, სურათებს, აბზაცებს და სხვა ელემენტებს.
• გადაახვიეთ რედაქტორები ერთად- ნაგულისხმევად, ორი რედაქტორი ერთად გადადის, თუ დოკუმენტი დიდია. შეგიძლიათ გამორთოთ ეს ფუნქცია.
• დაამატეთ უაზრო ტექსტი- ამატებს პუნქტს "Lorem ipsum" ფაილის ბოლოს. დააწკაპუნეთ ხელახლა სხვა დასამატებლად.

წმინდა ასოები

დააწკაპუნეთ აქ ამ ტექსტის რედაქტირებისთვის ან ჩასვით თქვენი დოკუმენტი აქ HTML-ში გადასაყვანად 😁

ეს დემო საშუალებას გაძლევთ შეამოწმოთ ამ რედაქტორის შესაძლებლობები. შეიყვანეთ ტექსტი ერთ-ერთ ველში და ნახეთ, როგორ იცვლება მეორე რეალურ დროში!

დასუფთავების პარამეტრების კონფიგურაცია და დააჭირეთ ▼ გაწმენდა

იმუშავეთ ნებისმიერ რედაქტორთან და ნახეთ, როგორ იცვლება სხვა რეალურ დროში:

დაასრულეთ GeekPrank კარგი ონლაინ ხუმრობისთვის.

მიეცით მომხმარებლებს შესაძლებლობა ტექსტის ფორმატირებადამატებითი კოდის შესწავლის გარეშე არის ის, რაზეც დეველოპერები მუშაობენ ბოლო რამდენიმე წლის განმავლობაში. და ეს არ არის უშედეგო, მათ უკვე მიაღწიეს მნიშვნელოვან პროგრესს. წარმოგიდგენთ 10 ყველაზე გამოყენებულს WYSIWYG რედაქტორები. ვიმედოვნებთ, რომ იპოვით რაიმეს თქვენი საკუთარი პროექტებისთვის.

01. NicEdit

NicEditარის შესანიშნავი ალტერნატივა დიდი და შრომატევადი რედაქტორებისთვის. იგი მოიცავს ყველა საჭირო მახასიათებელს, მაგრამ ძალიან მარტივია ვებსაიტში ინტეგრირება.

02. TinyMCE

TinyMCEარის უფასო Javascript HTML WYSIWYG რედაქტორი. მისი დანერგვა მარტივია თქვენს საიტზე და უზრუნველყოფს პერსონალიზაციისა და გარეგნობის ვარიანტების ფართო სპექტრს. TinyMCE ალბათ ყველაზე "სრული" რედაქტორია ჩვენს არჩევანში დღეს. თითქმის MSWord.

03.CKEditor

CK რედაქტორიარის ახალი FCKEditor, რომელმაც ადრევე მოიპოვა ბაზრის ლიდერის ტიტული. რედაქტორი შემუშავებულია მის საფუძველზე და მიზნად ისახავს გამოასწოროს რა პრობლემები წარმოიშვა FCKEditor-ში. შედეგი არის უაღრესად პროდუქტიული WYSIWYG რედაქტორი, რომელიც გთავაზობთ ყველა იმ მახასიათებელს, რომელსაც ჩვეულებრივ ნახავთ MSWord-ში ან Open Office-ში.

04. YUI მდიდარი ტექსტის რედაქტორი

YUI მდიდარი ტექსტის რედაქტორიარის Yahoo-ს მომხმარებლის გრაფიკული ინტერფეისი, რომელიც აქცევს რეგულარულ ტექსტის შეყვანის ველს სრულფასოვან WYSIWYG რედაქტორად. აპლიკაცია წარმოდგენილია სხვადასხვა ვერსიით, განსხვავებული თვისებებითა და შინაარსით. მაგრამ ნებისმიერი ვერსიის გამოყენებით, თქვენ მიიღებთ რედაქტორისთვის საჭირო ყველა ფუნქციას.

მარკირებაარის jQuery დანამატი, რომელიც საშუალებას გაძლევთ გადააქციოთ ჩვეულებრივი ტექსტის შეყვანის ველი ტეგების და ფორმატირების რედაქტორად. Html, Wiki და BBcode მხოლოდ რამდენიმეა, რასაც მოდული გთავაზობთ. Markitup არ არის WYSIWYG რედაქტორი, მაგრამ ეს არ აუარესებს მას, რადგან ის გთავაზობთ ყველა საჭირო ფუნქციას.

06. FreeTextBox

FreeTextBoxარის HTML რედაქტორი, რომელიც შექმნილია სპეციალურად ASP.NET-ისთვის. რედაქტორის გარეგნობა ძალიან ჰგავს Microsoft Word-ს. უფასო ვერსიას ნამდვილად არ აქვს ბევრი ფუნქცია, მაგრამ აქვს ყველაფერი რაც თქვენ გჭირდებათ.

07.MooEditable

WYSIWYG რედაქტორები, უმეტესწილად, ახლა უზრუნველყოფენ დანამატებს პოპულარული jQuery ბიბლიოთეკისთვის და ნაკლებად შემთხვევაში Mootools. MooEditableსრულად ავსებს ამ ხარვეზს, რადგან არის მარტივი, მაგრამ ძალიან ეფექტური Javascript ბიბლიოთეკა. თუ Mootools-ის ფანი ხართ, მაშინ მასთან არანაირი პრობლემა არ შეგექმნებათ.

08. OpenWysiwyg?

OpenWysiwygარის ბრაუზერის სრულფასოვანი რედაქტორი ყველა საჭირო ფუნქციით. მასში შედის მიმზიდველი ჩამოსაშლელი მენიუები და ღილაკები. სამწუხაროდ, Chrome მას არ დაუჭერს მხარს.

09. Spaw Editor- საიტი მკვდარია

Spaw რედაქტორიარის WYSIWYG რედაქტორი, რომელიც ვებსაიტების დეველოპერებს საშუალებას აძლევს შეცვალონ სტანდარტული ტექსტური ველები კონტროლირებადი HTML რედაქტორით, პარამეტრების ფართო სპექტრით, მრავალ ენაზე და გარეგნობის შეცვლის შესაძლებლობით.

10.jHtml ფართობი

jHtmlAreaარის კიდევ ერთი WYSIWYG ტექსტური რედაქტორი, რომელიც არის მოდული Jquery-სთვის. მოდულის მიზანია სიმარტივე და გამოყენების სიმარტივე. იგი მოიცავს ყველა საჭირო ფუნქციას. თქვენ შეგიძლიათ დააკონფიგურიროთ გარეგნობა, მახასიათებლები და ენები.

ვებსაიტის შექმნისას თქვენ უნდა გაიაროთ რამდენიმე ეტაპი: დიზაინი, გვერდის განლაგების შექმნა, შინაარსით შევსება, საიტის და პროგრამული ბაზის შენარჩუნება. ვებ-დიზაინი ან გვერდების ვიზუალური დიზაინი არის ვებსაიტის განვითარების ერთ-ერთი ეტაპი, ბეჭდურ პუბლიკაციებში განლაგების მსგავსი. ამ პროცესში მუშავდება საიტის სტრუქტურა, ნავიგაცია და ა.შ, ანუ ვებ დიზაინის მიზანია არა მხოლოდ ვიზუალური აღქმა, არამედ მომხმარებლის მოხერხებულობაც.

პროგრამებს, რომლებსაც ვებ დიზაინერები იყენებენ განლაგებისთვის, ეწოდება HTML რედაქტორები. ასეთი რედაქტორების ორი ტიპი არსებობს:

• ვიზუალური, მუშაობს პრინციპზე "თქვენ მიიღებთ იმას, რასაც ხედავთ" - WYSIWYG (რას ხედავთ არის ის, რასაც იღებთ). WYSIWYG-თან მუშაობისას, საბოლოო შედეგი ისევე გამოიყურება, როგორც რედაქტირების პროცესში.
• არავიზუალური (ტექსტი). ასეთი რედაქტორების კოდი დამოუკიდებლად უნდა დაიწეროს, ამიტომ ამ ინსტრუმენტებს ძირითადად იყენებენ პროფესიონალი ვებ დიზაინერები, რომლებიც თიშავენ „ნაგულისხმევ“ ვარიანტს.

ასევე შემუშავებულია რედაქტორები, რომლებიც აერთიანებს ორივე ოპერაციულ პრინციპს. ძნელია აირჩიოთ საუკეთესო HTML რედაქტორი - ზოგი კარგად იყიდება, ზოგი შემუშავებულია წამყვანი კომპანიების მიერ, ზოგს იყენებენ პროფესიონალი ვებ დიზაინერები, სხვები ხელმისაწვდომია და ა. ტრენინგის დონეები.

რომელი რედაქტორი უკეთესია

ტექსტური რედაქტორების მხარდამჭერები თვლიან, რომ კოდის შექმნა შესაძლებელია მხოლოდ ხელით, ხოლო პროგრამული უზრუნველყოფის მარკირება უკეთესია, ვიდრე ვიზუალური მარკირება. ვებსაიტები, რომლებიც შექმნილია მზა შაბლონების გამოყენებით, მართლაც იგივე ტიპისაა, მაგრამ მათ აქვთ არსებობის უფლება და ბევრი კმაყოფილია მათით. როდესაც გჭირდებათ მარტივი "სატესტო" ვებსაიტი ან პირადი ვებსაიტის ორი გვერდი, WYSIWYG ვარიანტი იდეალურია.

პროფესიონალებს არ სჭირდებათ მზა განლაგება და რჩევები, ისევე როგორც მაღალი კლასის დიზაინერს არ სჭირდება შაბლონები და შაბლონები, ხოლო მთარგმნელს არ სჭირდება ლექსიკონი. ვისაც სურს გახსნას ვებ გვერდი HTML-ის საფუძვლიანი შესწავლის გარეშე, არ სჭირდება ტექსტური რედაქტორები, ხოლო ვიზუალური რედაქტორები ძალიან პრიმიტიულია ვებ დიზაინერისთვის.

რა სარგებელი მოაქვს WYSIWYG რედაქტორებს?

ვიზუალური დიზაინერები ან ვიზუალური HTML რედაქტორები ონლაინ არის შეუცვლელი ინსტრუმენტი, რომელიც საშუალებას გაძლევთ ჩასვათ ელემენტები და ობიექტები ტექსტში მათი ორიგინალური ფორმით. HTML კოდით ტექსტის, ცხრილების და სურათების შემცველი გვერდის შექმნა შეიძლება სპეციალისტებმა შექმნან, ხოლო ვიზუალური რედაქტორი გამორიცხავს კოდის შექმნის აუცილებლობას. ვებმასტერი იღებს გვერდს ტექსტით დასრულებული ფორმით. ამ თვალსაზრისით, WYSIWYG მოგვაგონებს Microsoft Word ტექსტურ რედაქტორს.

ხელსაწყოთა ზოლს აქვს ყველაფერი, რაც გჭირდებათ აკრეფისა და რედაქტირებისთვის: ღილაკები ბუფერისთვის, ბეჭდვა, შრიფტები და ტექსტის დიზაინი, ცხრილების, სურათების, ფორმების ჩასმა და მრავალი სხვა. HTML კოდის მისაღებად, თქვენ უბრალოდ უნდა დააჭიროთ ღილაკს, რის შემდეგაც შესაძლებელია კოდის რედაქტირება, კოპირება და გადატანა საიტზე. WYSIWYG რედაქტორი საშუალებას მოგცემთ მიიღოთ კარგი შედეგები მოკლე დროში და აჩვენოთ გვერდები ვებ რესურსზე.

ვიზუალური რედაქტორი შეიძლება გაერთიანდეს ტეგებთან HTML ტექსტიდან - ეს მნიშვნელოვნად ამარტივებს ვებ დიზაინერების მუშაობას.

მოგესალმებით, საიტის ძვირფასო მკითხველებო. HTML მარკირების ენა არის ყველა ინტერნეტ საიტის საფუძველი. ხშირად, ამ ენის არცოდნა ბევრ ნიჭიერ ადამიანს აჩერებს საკუთარი ვებ პროექტის შექმნის გზაზე – ბოლოს და ბოლოს, ყველას არ აქვს მიდრეკილება პროგრამირებისადმი. და ყველამ არ იცის, რომ თქვენ შეგიძლიათ შექმნათ HTML კოდი არა მხოლოდ ნოუთბუქში ტეგების ჩაწერით, არამედ მარტივი ვიზუალური რედაქტორების გამოყენებით, რომლებიც მოგაგონებთ Word-ს.

• ვიზუალური (WYSIWYG) - რომელშიც კოდის შექმნის მთელი პროცესი არ საჭიროებს HTML-ის ცოდნას - საშუალებას გაძლევთ შექმნათ ტექსტი, სურათები და გვერდის სხვა ელემენტები ვიზუალურ რეჟიმში (როგორც Word-ში) - გააკეთეთ სათაურები, ხაზგასმით აღნიშნეთ აბზაცები, შეავსოთ მასალა. პუნქტიანი სიებით და ა.შ. და გამოსავალზე მიიღებთ მზა HTML კოდს ყველა ტეგით;
• მუშაობა მხოლოდ წყაროს კოდით - ჩვეულებრივ რვეულთან შედარებით, ისინი საშუალებას გაძლევთ ნახოთ კოდის სტრუქტურა, ხაზგასმის და სხვა მახასიათებლების წყალობით. შეუძლებელია ასეთ რედაქტორებთან მუშაობა HTML-ის ცოდნის გარეშე.

არის რედაქტორები პროგრამების სახით, რომლებიც უნდა იყოს დაინსტალირებული კომპიუტერზე, მაგალითად ვიზუალური NVU ან Frontpage შეგიძლიათ იმუშაოთ კოდით Notepad++-ში. მაგრამ ასევე არის ონლაინ ანალოგები - საიტები, სადაც HTML რედაქტორი მუშაობს პირდაპირ ქსელში, ჩამოტვირთვის საჭიროების გარეშე.

ონლაინ რედაქტორი ძალიან მოსახერხებელია, თუ იშვიათად აკეთებთ კოდირებას (ინტერნეტ გვერდების შექმნა და რედაქტირება).

მე გადავწყვიტე მომეწოდებინა ჩემთვის ცნობილი უმაღლესი ხარისხის და ყველაზე სასარგებლო ონლაინ HTML რედაქტორების სია.

მარტივი HTML ონლაინ რედაქტორები

ეს ვიზუალური HTML რედაქტორი ბევრის აზრით სტანდარტად არის მიჩნეული, რადგან მისი პარამეტრების პანელი შეიცავს თითქმის ყველაფერს, რაც ვებმასტერს შეუძლია მოიფიქროს - სმაილიკებს, YouTube ვიდეოებს, თუნდაც კოდის ჩასმის უნარს ტეგის ხაზგასმით აღქმის გასაუმჯობესებლად.

Cut Editor ახორციელებს სამი რეჟიმის გადართვას:

• ვიზუალური;
• კოდის მუშაობის რეჟიმი;
• წინასწარ დაათვალიერეთ შედეგი.

გადართვა ხდება რედაქტორის ფანჯრის ბოლოში ჩანართების საშუალებით.

ეს WYSIWYG HTML რედაქტორი შეიძლება იყოს ინტეგრირებული ნებისმიერ ვებსაიტში, სადაც ნახავთ დეველოპერების ინსტრუქციებს. მართვის პანელი ამ მიზნით შეიძლება შეიცვალოს, ფორმის ზემოთ არის ფანჯარა ჩამოსაშლელი სიით, რომელიც გთავაზობთ საკონტროლო ღილაკების 5 კომპლექტს.

ეს განვითარება არ არის მხოლოდ ონლაინ HTML რედაქტორი, არამედ დანამატის მოდული, რომელიც შეიძლება დაინსტალირდეს ნებისმიერ ვებსაიტზე, რის გამოც ის გვხვდება ბევრ რესურსზე. თუ გსურთ, შეგიძლიათ განათავსოთ იგი თქვენს პროექტზე - ამისათვის აიღეთ საწყისი კოდი აქ -.

აქ მუშაობს რედაქტორის რეალური მოდული.

ეს არის WYSIWYG რედაქტორი მრავალი ფუნქციით. არსებობს ტექსტის ფორმატირება და ონლაინ მართლწერის შემოწმებაც კი.

თქვენ ამშვენებთ გვერდს საჭირო ღილაკებით და ბოლოს ვიზუალური ჩვენებიდან გადადიხართ მზა HTML კოდზე ღილაკით “Source”.

ორი ფანჯრის ონლაინ HTML 5 რედაქტორი მოსახერხებელია, რადგან ერთ ეკრანზე შეგიძლიათ ერთდროულად იმუშაოთ კოდთან და ნახოთ თქვენი ცვლილებების შედეგი. ეს რედაქტორი არ არის შესაფერისი მათთვის, ვინც საერთოდ არ საუბრობს HTML-ზე, რადგან ის მიზნად ისახავს უშუალოდ კოდთან მუშაობას. სტანდარტულ კომპლექტში არის მხოლოდ 5 ელემენტი სწრაფი ჩასართავად - ბურთულებიანი სია, ცხრილი, სურათი, ფორმა და შერჩევა. ყველაფერი დანარჩენი თავად უნდა დაიწეროს ტეგების გამოყენებით.

კოდში ცვლილებების რეპროდუცირება ხდება ვიზუალურ ნაწილში არა რეალურ დროში, არამედ ღილაკზე „რენდერი“ დაჭერის შემდეგ.

რედაქტორს შეუძლია CSS და JavaScript-ით მუშაობა.

ვულკი

ძალიან მარტივი ჩაშენებული WYSIWYG HTML რედაქტორი. მინიმალური პარამეტრები, მსუბუქი წონა და სიმარტივე საშუალებას გაძლევთ დაამატოთ ის სადმე, წყაროს კოდი გადმოწერილია პირდაპირ დეველოპერის ვებსაიტიდან - ყველაფერი რუსულ ენაზეა.

მართვის პანელის ნაკრები შეიცავს ყველა ყველაზე პოპულარულ ფუნქციას - მარტივი, მაგრამ გემოვნებიანი.

ბოლოში არის ჩანართები ონლაინ რედაქტორის ვიზუალურიდან HTML რეჟიმში გადასართავად.

JSBin

მარტივი ორი ფანჯრის ონლაინ რედაქტორი HTML, CSS და JS კოდების მხარდაჭერით. მარცხენა მხარეს ვწერთ ტეგებს და ჩავსვით საჭირო კონტენტს, მარჯვნივ კი ვხედავთ რა გამოდის მისგან რეალურ დროში. ტეგის ხაზგასმა საშუალებას გაძლევთ აკონტროლოთ სწორი სინტაქსი. მოსახერხებელია Java სკრიპტების გამართვისთვის, რომელთა მუშაობა არ არის მხარდაჭერილი ბევრ ვიზუალურ რედაქტორში.

სასურველ კოდის ტიპზე გადასვლა განლაგებულია სამუშაო ადგილის ზემოთ.

პროფესიონალური ინსტრუმენტები ვებ განვითარებისთვის

ეს რედაქტორი საშუალებას გაძლევთ იმუშაოთ არა მხოლოდ HTML კოდით, ის მხარს უჭერს პროგრამირების ენების უზარმაზარ სიას, მათ შორის JavaScript, PHP, Perl, Python და ა.

მაგრამ ეს არ არის მთავარი. Cloud9ide საშუალებას აძლევს რამდენიმე პროგრამისტს ერთდროულად იმუშაოს კოდთან - პირადი ანგარიში ხსნის წვდომას სპეციალისტების გარკვეულ წრეზე. ამ მიზეზით აუცილებელია რეგისტრაცია.

რედაქტორი ნათლად ხაზს უსვამს კოდის ელემენტებს, პროექტზე მომუშავე მონაწილეებს ჩეთის საშუალებით კომუნიკაციის საშუალებას აძლევს – ერთი სიტყვით, ყველაფერი ისე კეთდება, როგორც უნდა.

ეს ონლაინ რედაქტორი ფუნქციონალურობით მსგავსია ზემოთ აღწერილი Cloud9ide-ს, ის ასევე მხარს უჭერს უამრავ ენას, შეგიძლიათ დაპროგრამოთ რეგულარული HTML კოდი, JS და PHP თქვენი ვებსაიტისთვის. მასთან ერთად შეგიძლიათ პირდაპირ დაუკავშირდეთ თქვენს ჰოსტინგს FTP-ის საშუალებით და შეცვალოთ ფაილები პირდაპირ მისგან. ინტერფეისი დაყოფილია 3 ნაწილად: მთავარი კოდით, ფაილების სია მარცხნივ და შედეგის გადახედვა მარჯვნივ.

მხარს უჭერს მუშაობას Dropbox-თან და Google Drive-თან.

კოდში ყველა ტეგი მონიშნულია სიცხადისთვის. არსებობს დახურვის ტეგების ავტომატური მიწოდება, მონაცემების ავტომატური შევსება და დახურული ელემენტების ხაზგასმა.

ფორმატირება საშუალებას გაძლევთ ავტომატურად „გაწმინდოთ“ კოდის არაკეთილსინდისიერი სექციები შეწევისა და ხაზის წყვეტების დამატებით.

არის მოკლე ვიდეო ინსტრუქცია ამ HTML რედაქტორისთვის, ვფიქრობ, რომ მისი ჩართვა ცუდი არ იქნება:

ბინძური მარკირების კოდის „სავარცხლის“ სერვისი

ეს სერვისი არ შეიძლება იყოს კლასიფიცირებული, როგორც ონლაინ რედაქტორი, თუმცა ის საშუალებას გაძლევთ საკმაოდ ეფექტურად იმუშაოთ HTML, JS და CSS კოდებთან, მაგრამ არ იძლევა ვიზუალურ რეჟიმს. ხელსაწყოს დანიშნულებაა კოდის გასუფთავება - ტეგების ნებისმიერი მოუხერხებელი ნაკრებიდან, რომელიც შეყვანილია დოკუმენტში შემთხვევით, Dirty Markup ქმნის სტრუქტურირებულ კოდს, რომელიც ადვილად იკითხება, სადაც ყველა ლოგიკური ელემენტი და ბლოკი ადვილად იკითხება და გასაგებია.

სერვისი მოსახერხებელია, მაგალითად, ოპტიმიზაციისთვის შეკუმშული ფაილების წაკითხვის აღსადგენად, რომლებიც შექმნილია საშუალო დონის პროგრამისტის მუშაობის მიზნით ან გამოსასწორებლად.

ქვემოთ მოცემულ სკრინშოტებში ნაჩვენებია ორი 100% იდენტური კოდი, ერთი ოპტიმიზირებულია და შეუძლებელია გასაგები, მეორე ადვილად იკითხება ადამიანებისთვის.

ეს ისეთი სასარგებლო ინსტრუმენტია - ის შეიძლება იყოს ძალიან სასარგებლო, თუ გსურთ ცვლილებების შეტანა ადრე ოპტიმიზებულ ვებსაიტზე.

ვიმედოვნებ, რომ დღეს მოცემული ონლაინ HTML რედაქტორების სია დაგეხმარებათ უფრო ეფექტურად იმუშაოთ თქვენს პროექტებზე და მიაღწიოთ ახალ სიმაღლეებს. და ამით ვემშვიდობები ყველას.

სასარგებლო სტატიები:

• 
  
  სმაილიკები VK-სთვის - ფარული სმაილიკების კოდები, როგორიცაა...
• 
  
  როგორ გამოიმუშაოთ ფული ინტერნეტში დამწყებთათვის - 23...