html-i õppimine võrgus nullist. HTML-i põhitõed algajatele. Sildid teksti esiletõstmiseks

See saidi jaotis on täielikult pühendatud saidi loomise kahele keelele, nimelt HTML-ile ja CSS-ile. Siin saate õppida keeli samm-sammult, õppida kõike alates põhitõdedest kuni kõige raskemate hetkedeni.

See jaotis on üles ehitatud materjali samm-sammult õppimise põhimõttel, seetõttu on HTML-i ja CSS-i õppetunni iga pealkirja ees number, mis vastab tunni seerianumbrile. See on loomulik, kui soovite õppida kõike päris põhitõdedest ja mitte ajada oma peas segamini. Kui tead juba midagi HTML- ja CSS-keeltest, siis siit leiad ka puuduolevad teadmised või süvendada õpitut.

Selles jaotises on õppetunnid vastavalt HTML5 ja CSS3 keelestandardite kohta, kui nendest keeltest on mõni uuem versioon, siis kajastuvad need ka selle jaotise uutes tundides ja kindlasti saate teada.



Tõenäoliselt on iga inimene, kes on vähemalt korra elus kokku puutunud veebilehe loomisega, kindlasti kuulnud sellisest kombinatsioonist nagu html ja css, võin julgelt öelda, et kui tahad ise veebilehti teha, siis ilma nende teadmisteta hakkama ei saa. kaks asja.

Kui teil on üldine arusaam sellest, mis html on teie peas, on teil selgelt segane pilt ja ma arvan, et see pole üllatav. On aeg liikuda otse praktika juurde ja luua oma esimene HTML-dokument.

Nagu html-keelel, on ka CSS-il oma omadused, reeglid ja struktuur. Selles õppetükis räägin teile CSS-keele põhikontseptsioonidest, selle struktuurist, ülesehitusest ning me teeme teie esimese CSS-i stiililehe ja õpime, kuidas stiililehte HTML-dokumendiga ühendada.

CSS-i selektorid on keele enda aluseks ning nende õppimine ja mõistmine on väga oluline, seega räägin selles õppetükis veel mitmest selektoritüübist ja kirjeldan nende võimalusi.

Väga oluline punkt kodulehe loomisel on tekstiga töötamine ja nagu aru saate, tuleb osata ka html-s tekstiga töötada ning teada, millised sildid seal on ja kuidas neid kasutada saab.

Kui olete õppinud selgeks kõik tekstiga töötamise HTML-märgised, on nüüd aeg liikuda otse tekstiga töötamise CSS-i, mis laiendab oluliselt teie teadmisi ja võimalusi.

CSS-il on tohutult palju igasuguseid mugavaid omadusi, mis muudavad välimust kvalitatiivselt ning jätkame tekstiga töötamise CSS-i uurimist ning selles õppetükis süveneme tekstiga töötamise teemasse ja vaatame uusi teksti omadusi.

Veebisaidi loomisel piltidega töötamine on üks võtmepunkte nii kujunduse loomisel kui ka lihtsalt oma veebisaidi jaoks materjalide küljendamisel või kirjutamisel.

CSS laiendab märkimisväärselt HTML-objektidega töötamise võimalusi; selles õppetükis tahaksin teile üksikasjalikult rääkida parameetritest, mida saab piltidele rakendada.

Tere kõigile!!! Mul on väga hea meel, et otsustasite vallutada HTML-i põhitõdede kõrgused ja see on õige valik. Lõppude lõpuks peate enne oma esimese veebisaidi loomist teadma HTML-i põhitõdesid. Lisaks peate veebisaidil HTML-kodeerimisega tegelema rohkem kui üks kord. Soovitan väga tundidega tutvuda. HTML algajatele minu ajaveebis ja garanteerin, et pärast selle kursuse läbimist saate hõlpsalt ise veebilehe või isegi veebisaidi luua.

Alustame! Kõigepealt uurime välja
HTML– (inglise keelest. Hüperteksti märgistuskeel) on hüperteksti märgistuskeel. Selle töötas esmakordselt välja Briti teadlane Tim Berners-Lee aastatel 1991–1992. HTML oli mõeldud ainult teksti, piltide ja tabelite märgistamiseks veebilehtedel. Nüüd saab HTML-dokumenti sisestada ka programmeerimiskeeli, nagu JavaScript ja VBScript.

HTML ei ole programmeerimiskeel, see on mõeldud ainult tekstidokumentide märgistamiseks.

HTML-i õppimiseks teil peab lihtsalt olema brauser ja tavaline märkmik või .
Standardse märkmiku avamiseks tehke arvutis järgmist. "Start" => "Programmid" => "Tarvikud" => "Märkmik" .

Kui olete kuulnud programmidest, mis lihtsustavad HTML-koodi kirjutamise tööd (Microsoft FrontPage, Adobe Dreamweaver), siis ma ei soovita neid selles koolitusetapis kasutada. Harjutage oma oskusi tavalises märkmikus või Notepad++ tekstiredaktoris ja selle kursuse läbimisel saate kasutada programme asjade kiirendamiseks. Tellige minu ajaveebi värskendused ja lugege, kuidas kasutada Microsoft FrontPage'i ja Adobe Dreamweaverit.

Parema mõistmise huvides koostasin näite. Vaadake pilti hoolikalt:

Selgitus.

1). Iga HTML-dokument algab selle reaga:


"https://www.w3.org/TR/html4/loose.dtd">

Selle reaga anname brauserile teada, et meie HTML-dokument vastab rahvusvahelise spetsifikatsiooni versioonile 4.01. Tänu sellele reale näeb teie leht välja samasugune.
Seda rida pole vaja meeles pidada, HTML-dokument töötab ka ilma selleta. See on lihtsalt selleks, et oleksite teadlik, mis see on.

2). Ja- see on dokumendi algus ja lõpp.

3). Ja- dokumendi juht. Siia sisestatakse sageli lisateenuse silte, üks neist siltidest on . Teiste teenindusmärgendite kohta saate teada edasistes õppetundides, koolituse selles etapis piisab sellest teabest.

4). Ja- dokumendi pealkiri.
See päis kuvatakse brauseris:

otsingus olen indeksis või Google'is.

5). Ja

- dokumendi põhiosa.
Siin on dokumendi sisu, näiteks tekst, pildid, tabelid, muusika, filmid jne. Lisateavet selle kohta, kuidas lisada muusikat, teksti, pilte dokumendi kehasse, saate järgmistest õppetundidest.

Märge:

Sageli loete ja kuulete sõna "silt".
Silt on kõik, mis on sulgude vahel< >. Näiteks: , , <html> , <head> , <br> , <p> </i> jne – kõik need on sildid. <br>Lehte brauseris vaadates silte näha ei ole, kuid kõik, mis sulgudes pole, kuvatakse vaatamisel brauseris.</p> <p>Silte on palju ja neil on erinevad eesmärgid.</p> <p>On silte, mis tuleb sulgeda. Näiteks, <br>avage silt <i><p> </i> <br>ja sulgege kindlasti silt <i></p> </i> </p> <p>Ja seal on üksikud sildid, näiteks see <i><br> </i> .</p> <p>Silt on omamoodi konteiner, mis võib sisaldada teksti, pilte ja muid silte...</p> <p>○ Pöörake tähelepanu avamis- ja sulgemismärgendite õigele järjestusele:</p> <p><тэг1> <тэг2> <тэг3> ... </тэг3> </тэг2> </тэг1> <i> </i></p> <p>Silt, mille me esimesena avasime, suletakse viimasena, teine ​​on eelviimane jne.</p> <p>○ Siin on näide avamise ja sulgemise siltide valest järjestusest. Selle tellimusega võib veebilehel esineda vigu:</p> <p><тэг1> <тэг2> <тэг3> ... </тэг3> </тэг1> </тэг2> </p> <p>Viga oli sees<тэг1>Ja<тэг2> .<br>Olge koodi kirjutamisel ettevaatlik.</p> <p><img src='https://i2.wp.com/bloggood.ru/wp-content/uploads/2013/05/osnovi-html-100.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p><b>Valmis kood.</b><br>Selline näeb välja veebilehe valmis standardne kohustuslik HTML-kood.</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Lehekülje pealkiri Lehe tekst, tabelid, pildid, muusika ja video.

Ärge heitke meelt, kui saate ülalkirjeldatust vähe või peaaegu mitte midagi aru. Teises tunnis on rohkem harjutamist ja saate kõik ise käsitsi kirjutada ja vaadata, kuidas HTML töötab.

Jätkake järgmise õppetunniga

Otsustasin pöörata rohkem tähelepanu algajatele, kes soovivad omandada teadmisi veebilehe loomise vallas. Minu õpetaja sundis mind seda tegema, sest ta tegi laboritööde juhendites palju vigu. Vaataksin hea meelega allikat, kust haridusteave on võetud, ja jätaksin sinna paar rida oma arvamust. Aga see ei käi praegu selles. Oma esimeses loengus räägin sellest

Mis on HTML-dokumendi struktuur?

Tag teatab, et html-dokumendi struktuur algab, - mis lõpeb. Siltide vahel Suurem osa teabest salvestatakse brauseri ja otsingumootorite jaoks. Siltide sees sisaldab meie lehe pealkirja. Tag näitab, et järgnev on kasutajale mõeldud teave,

See tähendab loomulikult, et kasutajale mõeldud teave hakkab otsa saama.

Nüüd lubage mul veidi selgitada. Kõik sildid ( silt – hüperteksti märgistuskeele element) jagunevad kahte tüüpi: "üksik" ja "sulgev". Lisaks on sildid ümbritsetud järgmiste tähemärkidega < Ja > , need on need, mis märgistust eristavad lihttekstist html. Vaatame mõnda lihtsaimat "ühekordset" silti:


— silt, mis vastutab uuele reale murdmise eest kohas, kus see silt on paigaldatud. Vaatame selle sildi abil koodi.

Minu esimene sait Tere kõigile!
Ja see on minu esimene sait.

Tulemust saab vaadata.


— silt, mis tõmbab horisontaalse joone. See silt kehtib plokielementide kohta, rida algab alati uuelt realt. Sellel on 5 atribuuti:

  • joondus — määrab joone joonduse. Võib võtta väärtuse vasakule, keskele, paremale.
  • värv – määrab joone värvi.
  • noshade – joonistab joone ilma 3D-efektideta.
  • suurus — määrab joone paksuse.
  • laius — määrab joone laiuse.

Kood kasutades silti


:

Minu esimene sait Tere kõigile!


Ja see on minu esimene sait.

Visuaalse näite leiate siit.

Teine "üksik" silt on . Seda silti kasutatakse brauserite ja otsingumootorite jaoks mõeldud teabe salvestamiseks. Otsingumootorid otsivad saidikirjelduste, märksõnade ja muude andmete saamiseks metasilte. Teil on lubatud kasutada piiramatul arvul metasilte, kõik need peavad asuma nende vahel Ja . Iga metasildi parameetrid on kujul "nimi=väärtus", mis määratakse märksõnadega sisu, nimi või http-ekv. Sest metasildid on mõeldud masinatele, need ei muuda visuaalselt, seega annan ainult lähtekoodi:

See rida näitab, et lehe looja usub, et leht kasutab UTF-8 kodeeringut. HTML5-s on kõik muutunud lihtsamaks; kodeeringu määramiseks on vaja ainult järgmist rida:

On ka teisi üksikuid silte ( , ,
, , , ,


, , , , , , , , , ), kuid tutvustan teile neid veidi hiljem.

Nüüd räägime siltide "sulgemisest". Juba nimi "sulgev silt" näitab, et silt nõuab kohustuslikku sulgemist. Seda tehakse selleks, et selgelt piirata tekstiosa, mida silt mõjutab.

Selge näite saamiseks vaatame silti , mida kasutatakse teksti esiletõstmiseks, määrab see fondi paksuks. Sildid Ja on piirid, mis määravad ala, kus teksti saab valida. Siin on kood, kus nad unustasid viimasel real sildi sulgeda :

Minu esimene sait Tere kõigile! Ja see on minu esimene sait.
Tere kõigile! Ja see on minu esimene sait.

Nagu näete, pole midagi keerulist, nüüd saate luua mitu üksteisega lingitud lehte.

Sildid teksti esiletõstmiseks

Lehel teksti esiletõstmiseks on mitu võimalust. Seda saab teha stiilide või siltide abil. Oleme (praegu) huvitatud teisest võimalusest.

— määrab fondi paksuks.

— määrab kaldkirjas kirjastiili.

— lisab tekstile allajoone.

— mõeldud teksti rõhutamiseks. Brauserid kuvavad selle teksti kaldkirjas.

- kriipsutab teksti läbi. See silt on HTML5-st eemaldatud, soovitame seda hoopis kasutada

— kuvab teksti ühekohalise tekstina. HTML5-st eemaldatud.

— kuvab fondi ülaindeksina. Font kuvatakse teksti baasjoone kohal ja vähendatud suurusega.

— kuvab fondi alaindeksina. Tekst paikneb rea ülejäänud märkide lähtejoonest allpool ja selle suurus on vähendatud.

— mõeldud teksti rõhutamiseks. Brauserid kuvavad seda teksti paksus kirjas.

— vähendab fondi suurust tavalise tekstiga võrreldes ühe võrra. HTML-is mõõdetakse fondi suurust suvalistes ühikutes vahemikus 1 kuni 7, keskmine vaiketeksti suurus on 3. Märgi vähendab teksti ühe kokkuleppelise ühiku võrra. Pesastatud sildid on lubatud , ja fondi suurus on iga pesastatud taseme korral 1 võrra väiksem, kuid ei tohi olla väiksem kui 1.

— suurendab fondi suurust tavalise tekstiga võrreldes ühe võrra. HTML-is mõõdetakse fondi suurust suvalistes ühikutes vahemikus 1 kuni 7, keskmine vaiketeksti suurus on 3. Seega märgendi lisamine suurendab teksti ühe kokkuleppelise ühiku võrra. Pesastatud sildid on lubatud ja fondi suurus on iga tasemega suurem.

— kasutatakse tsitaatide esiletõstmiseks tekstis. Konteineri sisu kuvatakse brauseris automaatselt jutumärkides.

— mõeldud pikkade jutumärkide esiletõstmiseks dokumendis. Selle sildiga tähistatud tekst kuvatakse traditsiooniliselt joondatud plokina, millel on polsterdus vasakul ja paremal (umbes 40 pikslit), samuti täidis üla- ja alaosas.


— määratleb eelvormindatud teksti ploki.  Sellist teksti kuvatakse tavaliselt ühekohalise kirjatüübiga ja sõnade vahel on kõik tühikud.  Vaikimisi kuvatakse veebilehel suvaline arv tühikuid koodis reas ühena.  Tag 
Võimaldab teil sellest funktsioonist mööda minna ja kuvada teksti vastavalt arendaja nõudele.

— määratleb tekstilõigu. Tag

See on plokkelement, algab alati uuelt realt, üksteisele järgnevad teksti lõigud eraldatakse täidisega. Polsterduse hulka saab stiilide abil juhtida. Kui sulgevat silti pole, loetakse lõigu lõpp kattuks järgmise plokielemendi algusega.

..
..

- HTML pakub kuut erineval tasemel pealkirja, mis näitavad pealkirja järgse jaotise suhtelist tähtsust. Jah, märgi

esindab kõige olulisemat esimese taseme pealkirja ja silti

tähistab kuuenda taseme pealkirja ja on kõige vähem oluline. Vaikimisi kuvatakse esimese taseme pealkiri suurima paksus kirjas ja järgnevad pealkirjad on väiksema suurusega. Sildid

,…,

Viidake plokielementidele, need algavad alati uuelt realt ja pärast neid ilmuvad järgmisele reale teised elemendid. Lisaks lisatakse pealkirja ette ja taha tühik. Märgendil on atribuut joondada, mis määrab pealkirja joonduse, võib võtta väärtusi vasakule— päise joondamine vasakule, Keskus- keskjoondus, õige- õige joondus, õigustada— joondamine laiuse järgi (samaaegselt piki paremat ja vasakut serva). See väärtus töötab ainult päiste puhul, mis on pikemad kui üks rida.

— on konteiner fondi omaduste (nt suuruse, värvi ja kirjatüübi) muutmiseks. Kuigi seda silti toetavad endiselt kõik brauserid, peetakse seda aegunuks ja selle kasutamisest soovitatakse stiilide kasuks loobuda. Märgendil on 3 atribuuti: värvi- määrab teksti värvi, nägu— määrab fondi kirjatüübi, suurus— määrab fondi suuruse tavalistes ühikutes.

— märgib teksti tsitaadi või joonealuse märkena muule materjalile. See esiletõstmine on kasulik teksti stiili muutmiseks CSS-i kaudu ja seda kasutatakse ka HTML-koodi eraldamiseks struktuurielementideks. Tavaliselt määravad brauserid teksti konteinerisse kaldkirjas.

— näitab, et tähemärkide jada on lühend. Atribuudi kasutamine pealkiri antakse lühendi dekodeerimine, mis võimaldab neil, kes seda ei tunne, lühendist aru saada. Lisaks indekseerivad otsingumootorid lühendi täistekstiversiooni, mille abil saab dokumendi järjestust parandada.

Vaikimisi on tekst konteinerisse suletud punktiirjoonega alla joonitud.

Allpool on kood, milles ma kõiki neid silte kasutasin:

Minu esimene sait

HTML ja CSS on kaks veebilehtede loomise põhitehnoloogiat. HTML pakub lehe struktuuri, CSS(visuaalne ja heliline) paigutus erinevate seadmete jaoks. Lisaks graafikale ja skriptimisele on HTML ja CSS veebilehtede ja veebirakenduste loomise aluseks. Lisateavet allpool:

Mis on HTML?

HTML on keel veebilehtede struktuuri kirjeldamiseks. HTML annab autoritele järgmised võimalused:

Avaldage veebidokumente koos pealkirjade, teksti, tabelite, loendite, fotode jne.
Otsige veebis teavet hüperteksti linkide kaudu ühe nupuvajutusega.
Kujundusvormid kaugteenustega tehingute tegemiseks, kasutamiseks info otsimisel, broneerimisel, toodete tellimisel jne.
Kaasake arvutustabelid, videoklipid, heliklipid ja muud rakendused otse nende dokumentidesse.
HTML-iga kirjeldavad autorid märgistuse abil lehtede struktuuri. Keele elemendid sildivad selliseid sisutükke nagu "lõik", "loend", "tabel" ja nii edasi.

Mis on XHTML?

XHTML on a HTML-i variant mis kasutab XML-i süntaksit, laiendatavat märgistuskeelt. XHTML-is on kõik samad elemendid (lõikude jms jaoks) mis HTML-i variandil, kuid süntaks on veidi erinev. Kuna XHTML on XML-rakendus, saate kasutada ka muud XML-i tööriistad sellega (nt XSLT, XML-sisu teisendamise keel).

Mis on CSS?

CSS on keel, mis kirjeldab veebilehtede esitusviisi, sealhulgas värve, paigutust ja fonte. See võimaldab kohandada esitlust erinevat tüüpi seadmetega, nagu suured ekraanid, väikesed ekraanid või printerid. CSS on sõltumatu HTML-ist ja seda saab kasutada mis tahes XML-põhise märgistusega keel keel. HTML-i eraldamine CSS-ist hõlbustab saitide haldamist, stiililehtede jagamist lehtede vahel ja lehtede kohandamist erinevatele keskkondadele. Seda nimetatakse struktuuri (või: sisu) eraldamiseks esitusest.

Mis on WebFonts?

Veebifondid on tehnoloogia, mis võimaldab inimestel nõudmisel kasutada fonte veebis ilma operatsioonisüsteemi installimata. W3C-l on kogemusi allalaaditavate fontide alal HTML, CSS2 ja SVG. Kuni viimase ajani ei olnud allalaaditavad fondid veebis levinud, kuna puudub koostalitlusvõimeline fondivorming. WebFonts kavatseb selle probleemi lahendada tööstusharu toetatud avatud fondivormingu loomisega veebi jaoks (nimega "WOFF").

Loeng on lõppenud, loodan, et omandatud teadmised on teile kasulikud! Järgmises loengus räägin teile, mida silt endas talletab , õpime tegema kõikvõimalikke piltidega manipulatsioone ja tutvume tabelitega.

Selle artikli kirjutamisel võeti mõne siltide kirjeldus siit

Täielik pealkiri - Hüperteksti märgistuskeel. See on hüperteksti märgistuskeel, mida kasutatakse laialdaselt veebilehtede ja dokumentide koostamisel. HTML-i tee algas esimesel poolel 90ndad. Tol ajal oli see äärmiselt primitiivne, kuid juba aitas luua lihtsaid veebilehti. Sellest ajast peale on keel pidevalt arenenud ja tänaseks on see juba palju õppinud. Ilma HTML-ita, meie harjumuspärasel kujul, ei oleks veebisaite lihtsalt olemas. Peaaegu kõik veebisaidid kasutavad mingil määral HTML-i.

Praegune standard on täna HTML5, mis ilmus ametlikult 2014. aastal. See on revolutsiooniline standard, mis võimaldas keelel jõuda uuele tasemele.

Uus HTML5-s:

  • Sõelumisalgoritm on DOM-i struktuuri arendamise käigus muutunud;
  • Ilmunud on uued sildid, nagu heli, video ja muud. Muide, nüüd saate veebipleieri luua ainult HTML-i kasutades. Varem tuli kasutada Adobe Flash Playerit;
  • Mõnede HTML-elementide kasutamise reeglite ja semantika uuesti määratlemine.

Kui vaadata globaalselt, siis HTML5-st on saanud enamat kui keele järgmine versioon, vaid täisväärtuslik platvorm rakenduste arendamiseks. Varem piirdusid tema võimalused konstruktsiooni ehitamisega, täna on ta palju targem. Standardi väljatulekuga on keele kasutusala kõvasti laienenud. Lisaks traditsioonilisele veebiarenduse suunale kasutatakse seda Windows 8 ja uuemate operatsioonisüsteemide arvutiprogrammide loomiseks, samuti nutitelefonide rakenduste arendamiseks kõigil populaarsetel platvormidel.

Kõik on jõudnud selleni, et HTML5-d hakati kasutama kahes võtmevaldkonnas:

  • HTML-keele uuendatud versioonina;
  • Funktsionaalse platvormina, millele saate ehitada erineva keerukusega veebirakendusi. Tõsi, puhta HTML5 abil täisväärtuslikku rakendust luua ei saa, selleks kasutatakse ka JavaScripti ja CSS3.

Kes uuendab HTML5? Keele kallal töötab W3C või selle täisnimi - World Wide Web Consortium on rahvusvaheline organisatsioon, mis säilitab sõltumatuse konkreetsetest arendajatest. Samuti toodab see HTML5 spetsifikatsioone, määratlusi ja standardeid. Algne ja täielik spetsifikatsioon on saadaval ametlikul veebisaidil lingi kaudu ( saadaval inglise keeles). Organisatsioon ei ole keele kallal tööd lõpetanud, vastupidi, selle arendamine jätkub.

Brauseri tugi

Oluline on mõista, et HTML5 spetsifikatsioon ja selle tehnoloogia rakendamine konkreetsetes brauserites on erinevad mõisted. Paljud aktiivselt arenevad veebibrauserid hakkasid HTML5 funktsioone järk-järgult juurutama juba enne selle versiooni väljaandmist. Tänapäeval toetavad enamik uusimaid brausereid kõiki HTML5 funktsioone. Täielikku tuge pakuvad: Chrome, IE 11, Firefox, Edge, Opera. Suhteliselt vanad versioonid ei toeta uusi standardeid, näiteks IE 8 ja varasemad. Versioonis IE 9 Ja 10 Standardid on juba rakendatud, kuid ainult osaliselt.

Sageli võivad brauserid üldiselt uue standardiga töötada, kuid käsitlevad funktsioone erinevalt või annavad lihtsalt vea. Seetõttu peate ristbrauserite arendamisel võtma arvesse kõiki brauserite funktsioone. Siinkohal on standardi tugi veebilehitsejatelt juba heal tasemel.

Veendumaks, et teie praegune brauseri versioon toetab HTML5, võite sooritada lühikese testi.

Mida sa tööks vajad?

Mis on HTML5 arendamisel kasulik? Võtmetööriist on tekstiredaktor, millesse sisestatakse tulevase veebilehe kood. Üks populaarsemaid ja multifunktsionaalsemaid toimetajaid on Notepad++. See on saadaval ametlikul veebisaidil täiesti tasuta. Lisaks tasuta levitamisele on sellel ka kõik vajalikud funktsioonid, palju kasulikke pluginaid ning see tõstab esile avamise ja sulgemise sildid.

Hea redaktor, mis toetab enamikku operatsioonisüsteeme, on Visual Studio Code. See on võimeline töötama operatsioonisüsteemides MacOS, Windows ja Linux. Võimaluste poolest on see tarkvaratoode pisut parem kui Notepad++.

Teine oluline tööriist on veebibrauser, see on kasulik koodi testimiseks. Iga tuntud arendaja brauser sobib. Kui teil on vaja luua platvormideülene rakendus, peate süsteemi installima kõik populaarsed veebibrauserid.