Turinys
- Kas yra HTML?
- Teksto redaktoriai
- „Notepad“ ir „TextEdit“
- Skliausteliuose
- Atomas
- Teksto redaktoriaus palyginimas
- Sukurkite HTML failą
- Peržiūrėkite failą naršyklėje
- Kodo paaiškinimas
- Ačiū, kad skaitėte
- Padėkite man geriau suprasti, kur mano skaitytojai laikosi HTML
Bretas HTML rašė daugiau nei 10 metų, jis taip pat moka CSS, „JavaScript“ ir „React“. Šiuo metu Bret dirba TCN
Kas yra HTML?
HTML reiškia hiperteksto žymėjimo kalbą. HTML nėra kalba tradicine prasme, bet ta prasme, kad tai yra įrankis, sudarytas iš raktinių žodžių ir komandų, kurias programuotojai naudoja bendraujant su kompiuteriais. HTML naudoja interneto dizaineriai kurdami tokias svetaines kaip „Facebook“, „Twitter“ ir „HubPages“. Šiuose pavyzdžiuose taip pat naudojami įvairūs kiti įrankiai, tačiau pirmiausia norintiems sužinoti apie svetainių kūrimą HTML yra pirmasis įrankis, kurį jie turėtų išmokti naudoti.
Teksto redaktoriai
Norint rašyti HTML, jums reikės teksto redaktoriaus. Teksto redaktorius skiriasi nuo tokių programų kaip „Word“, skirtų knygoms ar esė rašyti. Tokios programos kaip „Word“ turi naudingų įrankių, tokių kaip pastraipų stilius ir automatiniai didžiosios raidės, tačiau tie įrankiai nėra naudingi rašant HTML. iš tikrųjų tai gali labai apsunkinti. Niekada nenaudokite „Word“ HTML rašymui. Kita vertus, teksto redaktoriai dažnai turi specialiai programavimui skirtus įrankius. Yra daug teksto redaktorių, bet aš sutelksiu dėmesį į tuos tris, kuriuos naudojau daugiausiai.
„Notepad“ ir „TextEdit“
„Notepad“ arba „TextEdit“, jei naudojate „Mac“, tikriausiai yra pats paprasčiausias teksto rengyklės įrankis, todėl labai lengva sukurti ir redaguoti HTML failą naudojant bet kurią iš šių programų. Trūkumas yra tas, kad nei „Notepad“, nei „TextEdit“ nesiūlo jokių naudingų įrankių, rašančių HTML, tačiau jei norite tiesiog parašyti ką nors greito ir paprasto, tada bet kurio iš jų pakaktų darbui atlikti.
Skliausteliuose
Kronšteinai yra geras pasirinkimas pradedantiesiems. Išmokti naudoti tik šiek tiek sunkiau nei „Notepad / TextEdit“, be to, jis turi papildomą pranašumą, kad tai buvo sukurta HTML ir CSS. Skliausteliuose yra daugybė įrankių, kurie yra naudingi rašant HTML, pvz., Automatinio užbaigimo pasiūlymai, dabartinis eilučių paryškinimas, tiesioginė peržiūra ir skliaustų žymėjimas. Jei nesate tikri, kokie yra šie įrankiai arba ką jie daro, tai gerai, tiesiog žinokite, kad ateityje jie bus jums labai naudingi, jei nuspręsite toliau naudoti HTML. Visiems, kurie dirba su paprastu HTML ir CSS, rekomenduoju redaktorių.
Atomas
„Atom“ yra labai pritaikomas teksto redaktorius. jame yra daug naudingų įrankių ir jis gali būti naudojamas daugeliui programavimo kalbų, be HTML. Deja, nepaprastai pritaikomas jo pobūdis gali būti pribloškiantis, jei esate naujokas programavimui. Aš pats daugeliui projektų naudojau „Atom“ ir man tai labai patinka kaip redaktorius, bet jei jūs esate naujokas programuojant ar tiesiog dirbate pagrindinius HTML ir CSS, tada aš rekomenduočiau vieną iš kitų dviejų redaktorių. Tai sakant, vis tiek raginčiau pabandyti „Atom“, kai daugiau susipažinsite su programavimu ar ketinsite atlikti pažangesnį projektą.
Teksto redaktoriaus palyginimas
| Programa | Mokymosi kreivė | Naudingi įrankiai |
|---|---|---|
„Notepad“ / „TextEdit“ | Minimalus | Nė vienas |
Skliausteliuose | Mažas | Naudingi HTML įrankiai |
Atomas | Gali būti didžiulis | Daug pažangių įrankių |
Sukurkite HTML failą
Pasirinkę redaktorių, atidarykite jį ir sukurkite naują failą bei išsaugokite kaip index.html (visi mažieji). „.Html“ interneto naršyklėms nurodo, kad šiame faile yra HTML, o pavadinimas „index“ nurodo naršyklėms, kad tai bus jūsų svetainių numatytasis pagrindinis puslapis. Dabar iš tikrųjų galite atidaryti šį failą savo interneto naršyklėje ir jį peržiūrėti, bet tai būtų tik tuščias puslapis, todėl pridėkime prie jo šiek tiek teksto! Pirmyn nukopijuokite ir įklijuokite žemiau esantį tekstą į savo index.html failą.
! DOCTYPE html> html lang = "lt"> head> / head> body> Sveikas pasaulis !! SVEIKI ATVYK TO Į MANO SVETAIN !! !! / body> / html>
Peržiūrėkite failą naršyklėje
Aš paaiškinsiu, ką reiškia kiekviena eilutė, bet pirmiausia pažiūrėkime, kaip atrodo jūsų svetainė. Pirmyn ir vėl išsaugokite failą. Norėdami atidaryti failą naršyklėje, dešiniuoju pelės mygtuku spustelėkite failą ir pasirinkite „atidaryti naudojant“, tada pasirinkite savo naršyklę (žr. Paveikslėlį žemiau).
Jūsų naršyklė turėtų atidaryti puslapį, panašų į paveikslėlį žemiau.
Sveikiname, jūs sukūrėte paprastą svetainę! Dabar tai gali atrodyti nedaug, tačiau visos svetainės prasideda iš pradžių. turėdami šiek tiek daugiau laiko ir pastangų, galime tai paversti kur kas gražesniu.
Kodo paaiškinimas
Dabar nebūčiau labai geras mokytojas, jei nepaaiškinčiau ką tik naudojamo kodo, todėl eikime į priekį ir pereikime tiesiai į jį. Dar kartą atidarykite failą ir mes eisime per kodą eilutė po eilutės. Jei failas atsidaro naršyklėje, kai bandote jį spustelėti, dešiniuoju pelės mygtuku spustelėkite failą ir dar kartą pasirinkite „atidaryti naudojant“, tačiau šį kartą vietoj naršyklės pasirinkite redaktorių.
Ši pirmoji eilutė tiesiog nurodo naršyklei, kokia programavimo kalba yra failas.
! DOCTYPE html>
Šios dvi eilutės vadinamos atidarymo ir uždarymo žymomis. Atidarymo žyma nurodo naršyklei, kada prasideda tam tikra jūsų svetainės skiltis, o uždaromoji - kur ji baigsis. Tradiciškai yra įtraukiamos visos eilutės, dedamos tarp atitinkančių žymių, kad jūsų tekstą būtų lengviau suprasti. paspaudus klaviatūros skirtuką, bus sukurta įtrauka dabartinėje pasirinktoje eilutėje. Šios konkrečios žymos vadinamos HTML žymomis ir jos nurodo naršyklei, kad viskas tarp jų yra HTML. "Lang =" lt dalis yra tokia, kad naršyklė žino, kad vidinis tekstas bus pateiktas anglų kalba.
html lang = "lt"> / html>
Tai yra galvos žymos. Tarp šių žymų įdėtas tekstas nebus rodomas jūsų svetainėje. Šiame skyriuje pateikiamas kodas, kuris nurodo naršyklei, koks yra svetainės pavadinimas, kur gauti stiliaus įrankius, pvz., Specialius šriftus, ir kur saugoma jūsų svetainės skirtuko piktograma. Šiam projektui šią dalį paliksime tuščią.
galva> / galva>
Viskas, ką norite rodyti savo svetainėje, įdėsite tarp šių kūno žymių. Tai bus jūsų svetainės „turinys“.
kūnas> / kūnas>
Tai paprastas tekstas. bet koks paprastas tekstas, įdėtas jūsų kūno žymose, bus rodomas svetainėje. Kai kurie specialūs simboliai, pvz., „&“, Nebus rodomi jūsų svetainėje, tačiau juos galima parodyti naudojant simbolių nuorodas. Pavyzdžiui, „Tomas ir Džeris“ jūsų svetainėje atrodys kaip „Tomas ir Džeris“.
Labas pasauli!! SVEIKI ATVYK TO Į MANO SVETAIN !! !!
Visi šie įrankiai gali būti naudojami kuriant paprastą svetainę.
! DOCTYPE html> html lang = "lt"> head> / head> body> Sveikas pasaulis !! SVEIKI ATVYK TO Į MANO SVETAIN !! !! / body> / html>
Ačiū, kad skaitėte
Dėkojame, kad perskaitėte šį straipsnį. Jei turite klausimų, palikite komentarą žemiau. Džiaugiuosi galėdamas padėti sprendžiant bet kokius su šiuo projektu ar HTML susijusius klausimus. Be to, čia yra keletas nuorodų į kai kurias naudingesnes HTML svetaines.
- HTML pamoka
Gerai organizuotos ir lengvai suprantamos žiniatinklio kūrimo pamokos su daugybe pavyzdžių, kaip naudoti HTML, CSS, „JavaScript“, SQL, PHP ir XML.
- Sužinokite HTML - nemokama interaktyvi HTML pamoka
„LearnHTML.org“ yra nemokama interaktyvi HTML pamoka žmonėms, norintiems greitai išmokti HTML.
- Nemokamos HTML, CSS ir PHP pamokos - susikurkite savo svetainę Pagrindinis puslapis - HTML.net
Nemokamos HTML, CSS ir PHP pamokos - sukurkite savo svetainę - nemokamos HTML, CSS ir PHP pamokos - sukurkite savo svetainę
Padėkite man geriau suprasti, kur mano skaitytojai laikosi HTML
Šis straipsnis yra tikslus ir tikras, kiek autorius žino. Turinys skirtas tik informaciniams ar pramoginiams tikslams ir nepakeičia asmeninių ar profesionalių patarimų verslo, finansų, teisiniais ar techniniais klausimais.
