Ang 7 Pinakamahusay na Libreng Mga Online Editor ng HTML upang Subukin ang Iyong Code

Ang 7 Pinakamahusay na Libreng Mga Online Editor ng HTML upang Subukin ang Iyong Code

Ang bawat website na ginagamit mo ay umaasa sa HTML. Habang ang mga developer ng web ay nangangailangan ng mga kasanayan sa JavaScript, Python, CSS, at server-side scripting, pinagsama-sama ng HTML ang lahat.





Nang walang HTML, walang web, kaya kailangan mong malaman kung paano ito likhain at i-edit. Sa halip na mag-set up ng system ng pagsubok ng HTML code sa iyong computer, mas simple na subukan ang code sa isang browser.



Kahit na pagkalikot sa maliliit na mga snippet ng HTML o buong mga proyekto sa website, perpekto ang isang online na editor ng HTML.





Bakit Dapat Mong Gumamit ng isang Online HTML Editor

Ang paggamit ng isang editor ng HTML na nakabatay sa browser ay may katuturan sa isang bagay tulad ng Notepad ++ para sa mga sumusunod na kadahilanan:

  • Direkta na tumatakbo ang mga online editor ng HTML sa iyong web browser
  • Subukan ang iyong HTML code online --- tingnan kung tumatakbo ang code tulad ng inaasahan
  • Tingnan ang mga preview ng real-time na web --- ang mga pag-update ng preview habang nag-e-edit ka
  • I-streamline ang iyong daloy ng trabaho --- wala nang pag-save, paglo-load sa browser, pagbalik sa editor, at ulitin
  • Platform agnostic --- tumatakbo sila sa anumang aparato na may isang koneksyon sa web.

Ang huling puntong ito ay napakahalaga. Nangangahulugan ito na maaari mong maiisip na bumuo ng isang web page nang mas madali sa isang PC bilang isang Chromebook. Maaari ka ring gumamit ng isang Android tablet, o isang $ 50 computer tulad ng Raspberry Pi.



Ang HTML coding ay isang naa-access, prangkahang gateway sa pag-unawa sa programa at pag-unlad. Patuloy mong kailangan mong subukan ang iyong HTML code --- ano ang mas mahusay kaysa sa mga live na resulta sa window ng iyong browser?

Tingnan natin ang ilan sa mga pinakamahusay na online HTML editor na kasalukuyang magagamit.



1. CodePen

Ang CodePen ay isang 'kapaligiran sa pag-unlad ng lipunan' para sa mga web developer, na nangangahulugang ito ay isang online editor na may mga tampok na pakikipagtulungan. Nag-aalok ito ng isang simpleng layout. Mahahanap mo ang isang panel para sa HTML, isang panel para sa CSS, at isang panel para sa JavaScript, kasama ang isa para sa preview ng real-time. Ang lahat ng mga laki ng panel ay maaaring iakma sa pamamagitan ng pag-drag sa mga gilid sa paligid.

Maaari kang lumikha ng 'Pens,' na katulad ng mga indibidwal na palaruan para sa pag-aayos ng web code. Ang Maramihang Mga Pens ay maaaring mapangkat sa Mga Koleksyon.



Habang ang pag-sign up para sa pangunahing paggamit ay libre, ang Mga Pribadong Pens at Koleksyon ay nangangailangan ng a Pro account . Nagsisimula ito sa $ 8 / mo at may kasamang pagho-host ng asset, mga naka-embed na tema, pakikipagtulungan sa real-time, at pag-access sa buong IDE ng pagpapaunlad ng web ng CodePen.

Maraming tao ang isinasaalang-alang ang CodePen na pinakamahusay na online HTML editor. Subukan ito upang makita kung nababagay ito sa iyong mga pangangailangan.

2. JSFiddle

Ang JSFiddle ay medyo kamukha nito: isang sandbox kung saan maaari kang mag-libot gamit ang JavaScript. Marahil alam mo na ang JavaScript ay kasabay ng HTML at CSS. Nangangahulugan ito na sa JSFiddle, maaari mong i-edit ang lahat nang sabay-sabay gamit ang interface ng pag-edit ng JSFiddle.

Kung nais mo, maaari mong laktawan ang JavaScript nang buo.

Ano ang maganda tungkol sa JSFiddle ay maaari kang magdagdag ng Mga Panlabas na Kahilingan sa sidebar. Hinahayaan ka nitong magsama ng mga off-site na JavaScript at CSS file para sa pagpapahusay ng iyong HTML. Kapaki-pakinabang din ang pindutan na Malinis, na awtomatikong linisin ang paglalagay ng iyong code, habang ang pag-click sa Pakikipagtulungan ay nagbibigay-daan sa real-time na pakikipagtulungan sa online.

Ang tanging downside ay dapat mong i-click ang Run button upang i-update ang preview panel.

3. JSBin

Isaalang-alang ang JSBin bilang isang mas simple at mas malinis na kahalili sa JSFiddle. Maaari mong i-edit ang anumang kumbinasyon ng HTML, CSS, at JavaScript sa pamamagitan lamang ng pag-toggle ng mga panel gamit ang tuktok na toolbar. Para sa maximum na kakayahang umangkop maaari mo ring i-toggle ang preview panel at isang console panel kung kinakailangan.

kung paano gawing mas mabilis ang iyong computer sa windows 10

Ngunit samantalang pinapayagan ka ng JSFiddle na mag-link ng mga panlabas na mapagkukunan ng CSS at JavaScript, nililimitahan ka ng JSBin sa paunang natukoy na mga aklatan ng JavaScript. Ang pagpili ay mabuti bagaman, mula sa jQuery hanggang React hanggang Angular at marami pa.

Habang ang JSBin ay libre at hindi nangangailangan ng isang account, kakailanganin mo ng Pro account para sa mga advanced na tampok. Kasama rito ang mga pribadong bin, mga pasadyang embeds, pagho-host ng asset, pag-sync ng Dropbox, at mga vanity URL para sa mga pahinang nai-publish sa pamamagitan ng JSBin.

Apat. Liveweave

Ang Liveweave ay biswal na katulad ng mga nakaraang editor, na may isang nakalulugod na interface ng gumagamit. Tulad ng JSFiddle, pinapayagan ng Liveweave ang pakikipagtulungan sa real-time, at tulad ng JSBin, hinahayaan kang mag-link sa paunang natukoy na mga mapagkukunang third-party tulad ng jQuery.

Ngunit mayroon din itong ilang mga natatanging tampok. Lumilikha ang Lorem Ipsum Generator ng teksto ng placeholder sa iyong kasalukuyang posisyon sa cursor. Nagbibigay ang CSS Explorer ng isang tool na WYSIWYG para sa paglikha ng mga estilo ng CSS at tinutulungan ka ng Color Explorer na pumili ng mga perpektong kulay. Samantala, nagbibigay-daan sa iyo ang Vector Editor na lumikha ng mga vector graphics para sa iyong site.

kung paano magpadala ng mga mensahe sa youtube

5. HTMLhouse

Ang HTMLhouse ay isang mahusay na pagpipilian kung nagmamalasakit ka lamang sa HTML (ibig sabihin walang CSS o JavaScript). Malinis at minimal, nahahati ito nang patayo sa pag-edit sa kaliwa at real-time na preview sa kanan.

Kapaki-pakinabang ang kakayahang mai-publish ang iyong HTML at ibahagi ito nang pribado (sa pamamagitan ng pribadong URL) o sa publiko (idinagdag sa Pahina sa Pag-browse ng HTMLhouse ). Ito ay simple ngunit epektibo, na kung saan ay eksakto kung saan ang isang online HTML editor ay maglaro at magaling.

Tandaan na ang HTMLhouse ay nilikha at pinapanatili ng mga tao sa Sumulat.as , isang tool sa pagsusulat na walang kaguluhan sa online. Isaisip ito kung balak mong isulat ang iyong sariling nilalaman ng site.

6. HTMLG

Ang isa pang pagpipilian na HTMLG ay sumusunod sa parehong pattern ng paggamit ng mga code at preview na pane para sa HTML. Gayunpaman, ang tool na ito ay hindi kasama ang CSS at JavaScript sa loob ng parehong pinag-isang proyekto. Sa halip, kung nais mong i-edit ang mga iyon, kakailanganin mong buksan ang isang bagong tab at i-edit ang mga ito bilang magkakahiwalay na mga proyekto.

Ginagawa nitong perpekto para sa purong mga pag-aayos ng HTML at pagsubok ng code sa iyong browser; mas kaunti kung nais mong isama ang mga pag-edit ng CSS.

Tandaan na mayroong isang limitasyong 300-salita kung sinusubukan mo ang buong mga web page na may HTMLG. Upang madagdagan ito, maaari kang mag-sign up sa bersyon ng premium na walang ad, simula sa kasing maliit ng $ 5.80 sa isang buwan.

7. Dabblet

Nag-aalok ng isang bahagyang naiibang pagkuha sa mga online na editor ng HTML, Hinahati ng Dabblet ang screen sa dalawa, sa halip na tatlo / apat na mga pane. Kaya, mayroon kang isang view para sa HTML & Result, at isang hiwalay na (ngunit naka-link) na pagtingin para sa CSS & Result.

Nag-aalok ito ng mas maraming puwang, na nagbibigay ng isang mas malinaw na pagtingin sa code at ang preview. Dagdag dito, ang built-in na w3.org HTML at CSS validator ay nagha-highlight ng anumang mga isyu.

Kung kailangan mo ng isang malinaw na puwang sa desktop upang subukan ang iyong site code, maaaring ito ang pinakamahusay na editor ng HTML para sa iyo.

Gamitin ang Pinakamahusay na Mga Online Editor ng HTML upang Pagbutihin ang Iyong Mga Kasanayan

Kung ang iyong pagkakalantad lamang sa HTML ang iyong natutunan isang dekada na ang nakakalipas, ngayon ang oras upang makahabol. Ang HTML5 ay inilabas noong 2014 at nagpakilala ng kaunting mga bagong pamantayan at tampok. Hindi sigurado kung saan magsisimula? Suriin ang mga mahahalagang bagong elemento ng HTML5.

Nais mo bang malaman ang mabubuting kasanayan sa disenyo at pag-unlad ng HTML5 web? Suriin ito mga website na may kalidad ng mga halimbawa ng pag-coding ng HTML . Dapat mo ring tingnan ang iba pang mga tool na ito para sa pag-upgrade ng iyong mga kasanayan sa pagbuo ng web.

Magbahagi Magbahagi Mag-tweet Email 15 Mga Utos ng Windows Command Prompt (CMD) na Dapat Mong Malaman

Ang command prompt ay isang malakas pa ring tool sa Windows. Narito ang pinaka kapaki-pakinabang na utos ng CMD na kailangang malaman ng bawat gumagamit ng Windows.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • Text Editor
  • Pag-unlad sa Web
  • Mga Editor ng WYSIWYG
  • HTML5
  • Pag-iskrip
Tungkol sa May-akda Christian Cawley(1510 Mga Artikulo Nai-publish)

Deputy Editor para sa Seguridad, Linux, DIY, Programming, at Tech Ipinaliwanag, at Tunay na Kapaki-pakinabang na tagagawa ng Podcast, na may malawak na karanasan sa suporta sa desktop at software. Isang nag-ambag sa magazine na Linux Format, si Christian ay isang Raspberry Pi tinkerer, Lego lover at retro gaming fan.

Higit pa Mula sa Christian Cawley

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe