Bou u eie webwerf vir beginners: 5 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:25

Of u nou al ooit daarvan gedroom het om 'n rekenaarprogrammeerder te wees of ooit 'n webwerf gebruik het, wat ons in die gesig staar, is byna almal van ons; inligtingstegnologie het die ruggraat van sake geword. Alhoewel programmering aanvanklik 'n bietjie eng kan lyk, is my doel om u die basiese beginsels van webontwerp te leer, sodat u na hierdie tutoriaal u eie webblad kan maak. Met dit uit die weg geruim, laat ons daarby kom!

Voorrade

• 'N Macintosh- of Windows -rekenaar (hoewel Linux -distros ook gebruik kan word, slaan ek dit vir eers oor, aangesien dit 'n beginner -inleiding is).
• U keuse van teksredakteur (Notepad op Windows, TextEdit op Mac) of u keuse van IDE. Uit my ervaring het ek gevind dat Visual Studio Code die beste vir myself werk, dus ek beveel ook aan om dit hier te besoek: https://code.visualstudio.com/ om nie te praat dat dit op alle bedryfstelselplatforms werk nie.

Stap 1: Etikette en 'n bietjie geskiedenis

Sodra u besluit het oor u keuse van teksredakteur of IDE, begin ons met die basiese beginsels.

Glo dit of nie, HTML of HyperText Markup Language bestaan nou al byna 30 jaar en met elke jaar kom daar meer en meer verbeterings aan die taal. Nou vra u miskien: hoe interpreteer 'n blaaier wat u op die skerm moet plaas? Dit word in 'n paar dele gedoen:

Die opmaak van HTML -dokumente is maklik. U het twee afdelings, bekend as die kop en die liggaam. Die hoof van 'n webwerf bevat kode wat nie vir die gebruiker sigbaar is nie. Dit word gebruik om stylblaaie te koppel en ander nodige stukkies te verklaar wat nodig is om die webwerf behoorlik te vertoon. Na die kop is die liggaam soos dit klink, die liggaam van die webwerf. Dit is waar u u stem kan uitspreek en u fantastiese HTML -vaardighede aan die gehoor kan wys! Dit is nou nie so maklik as om net teks in die liggaam te tik en dit presies te laat sien soos u wil nie, maar dit is in 'n sekere sin amper so maklik met die gebruik van dinge wat ons etikette noem.

Hier is 'n paar van die basiese HTML -etikette:

• titel - wat gebruik word om die blaaier te vertel wat die titel van die bladsy is. Dit is ook wat u sien as u na die blad van 'n webblad kyk.
• h1, h2, h3, h4 - wat gebruik word vir verskillende kopgroottes, met h1 die grootste en h4 die kleinste. Ek sal meer hieroor in die volgende afdeling bespreek.
• p - paragraaf, gebruik vir die skryf van teksgedeeltes. Soos paragrawe op 'n papier.
• br - breek, wat 'n onderbreking in ooreenstemming met die teks invoeg.
• a - word gebruik om skakels na ander bladsye te skep, soos 'n klikbare skakel.
• img - word gebruik om 'n prent aan die webblad te koppel.
• ul, ol, li - ongeordende lyste, geordende lyste en lysitems.
• - word gebruik vir die maak van inline -opmerkings in die kode wat die eindgebruiker nie kan sien nie.

En hier is 'n paar CSS -etikette (visueel):

• kleur - word gebruik om 'n spesifieke kleur aan 'n spesifieke element toe te ken of op die webblad te stel.
• lettergrootte-word gebruik om die lettergrootte op die bladsy te verander.
• agtergrondkleur-word gebruik om die agtergrondkleur van sekere elemente of die hele bladsy te verander.

Ek het ook 'n klein bedrogblad bygevoeg om u te help as u 'n bietjie verlore voel, maar u hoef nie bekommerd te wees nie; u kry dit vinnig onder die knie! Boonop is www.w3schools.com ook 'n uitstekende bron vir enige van u programmeervrae. Hulle het my beslis ook tyd gespaar.

Dit is in wese maklik hoe die blaaier die lêer lees. Dit gaan reël vir reël en verwerk funksie vir funksie. Die karakters word gebruik om 'n etiket soos

en word gebruik om die etiket te sluit, soos

. Dit is belangrik, anders kan die blaaier nie waar om te stop nie. Tussen die

en

tags, is waar u alles inskryf wat u wil!

Stap 2: Opstel van redakteur

Noudat ons 'n bietjie ingegaan het oor die basiese elemente van 'n HTML -webwerf, laat ons dit duik en dit self probeer. Vir hierdie volgende stap gebruik ek Visual Studio Code om die webwerf te programmeer, maar die uitleg van die kode sal dieselfde wees as u gemakliker is met die gebruik van Notepad of TextEdit.

Binne Notepad:

• Met Notepad word die program begin met 'n leë lêer, wat dit baie maklik maak om aan die gang te kom. Dit sal ons ook in staat stel om 'n paar stappe te spring in vergelyking met die gebruik van VS -kode. Kom ons begin deur die lêer in die regte formaat te stoor.
• Klik op File> Save
• Voer 'n naam vir u lêer in, gevolg deur.html en kies alle lêers onder Stoor as tipe. Klik op stoor.

Binne VS -kode:

• Die beste manier om van al die IDE se funksies gebruik te maak, is deur die lêer te skep en die IDE te vertel watter tipe lêer dit is. Dit kan soos volg gedoen word:
• Klik op File> New File
• 'N Leë lêer word oopgemaak
• Vervolgens wil u begin met die stoor van die lêer, hoewel dit leeg is, aangesien dit die IDE in staat sal stel om te verstaan watter tipe lêer die eindproduk gaan wees. As u stoor, moet u die.html -uitbreiding aan die einde van die lêernaam insluit. Klik op stoor.

Stap 3: bloudrukke

Nadat u u lêernaam.html -lêer suksesvol gestoor het, begin ons met die opstel van die raamwerk vir ons webblad. Onthou van bo watter belangrike dele van die lêer ons moet verklaar voordat ons met die res van die HTML -bladsy kan begin. Wenk: wanneer die raamwerk vir die webwerf begin word, sê die! DOCTYPE HTML-tag vir die blaaier dat die lêer wat dit lees 'n html-lêer is. Dit kan handig wees as u verskillende soorte kode in dieselfde lêer het en tussen tolke wil wissel. Vir die omvang van hierdie instruksies, sal ons dit nie te veel raak nie, maar as u na hierdie instruksie nuuskierig is om meer te wete te kom oor HTML -ontwikkeling, kan u dit gerus probeer. Ek sal die! DOCTYPE HTML -etiket bo -aan die lêer invoeg vir beste praktyk. Onthou om oop en toe te maak.

Dit is waar die stoor van die lêer handig te pas kom, noudat die IDE weet dat dit met 'n HTML -lêer werk, sal dit intellisense gebruik om die uitdrukking af te handel en voorstelle te bied sodat u nie per ongeluk vergeet om 'n etiket toe te maak nie. Let daarop dat vir diegene onder u wat Notepad gebruik, intellisense nie beskikbaar is soos in die IDE nie. Ons begin deur die kop- en liggaamsmerke soos volg in te voer: (sien tweede prent).

Noudat die opstelling van die dokument voltooi is, kan ons aan die wedren deelneem en pret hê!

Stap 4: Kodeer; Kode; Kode;

Ons kan begin deur 'n titel vir ons nuutgeskepte lêer in te voeg. Tik in wat u wil. Onthou dat dit die naam is wat op die blaaieroortjie verskyn. Laat ons ook begin deur 'n opskrif vir ons webwerf in te voer. Onthou van vooraf hoe ons dit doen. Het ek h1/2/3/4 gehoor? Dit is korrek!

Voordat ons voortgaan, vind ek dit nuttig om ons lêer in 'n blaaiervenster oop te maak, sodat ons intyds kan sien hoe ons veranderinge in die blaaier weerspieël. U kan dit doen deur op File> Save te klik om die lêer te stoor, na die gids te gaan waarin die HTML -lêer gestoor is; dit is vir my die lessenaar en gebruik die blaaier van u keuse om die lêer oop te maak., daar is jou webblad! Opmerking: ek gebruik Safari persoonlik as my gunsteling blaaier op my rekenaar, maar in webontwikkeling is Firefox die goue standaardblaaier om te toets, aangesien dit met byna elke webskripttaal werk.

Soos u kan sien, word die titel op die blad vertoon, sowel as ons h1 -opskrif. Ek verkies dat die blaaiervenster van die lêer langs die IDE geopen word, soos dat u die veranderinge onmiddellik in die blaaier verander as u die IDE verander en stoor.

Probeer gerus tags byvoeg en speel met die verskillende dinge wat u met HTML kan doen. Soos u hieronder kan sien, het ek 'n paar paragrawe, breuke, eksterne hiperskakel na Instructables.com, 'n prentjie (wat óf vanuit 'n eksterne bron gekoppel kan word, óf in dieselfde gids as waar die. HTML -lêer gestoor word), 'n voorbeeld van 'n ongeordende lys, 'n geordende lys en laastens 'n opmerking.

As u kleur en rangskikkingsopsies wil byvoeg, kan u 'n styletiket in die kop van die lêer invoer. Dit is die punt waarop dit van HTML na CSS verskuif, maar vir visuele onthalwe sal ek 'n paar reëls invoer, sodat u kan sien hoe dit werk. In wese hoe CSS werk, kan u HTML -elemente binne funksies beheer deur hakies {} in te voer om u kode vir 'n spesifieke HTML -element in te voer.

Stap 5: Laaste gedagtes

En daar het jy dit; jy het jou eerste webblad suksesvol geskep! Omdat dit 'n beginnersgids is, wil ek u eerste ervaring met HTML 'n aangename ervaring maak. Die beste manier om uit my ervaring te leer, is om in te duik en dinge op die proef te stel, te kyk wat u met u kode kan doen en ook te sien hoe u u kode kan breek. Dit bou integriteit op en help u om beter te verstaan hoe en waarom die kode werk soos dit werk. Onthou dat www. W3Schools.com 'n uitstekende bron vir vrae is, en dat hulle selfs 'n virtuele sandbak in die blaaier bied om u kode te probeer. Hopelik het u iets geleer en gelukkig kodering!