Home-theater-designers
HTML yra gyvybiškai svarbi žiniatinklio dalis. Ir nors nedaugelis interneto dizainerių sukuria puslapius rankiniu būdu įvesdami HTML, vis tiek patogu apie tai šiek tiek sužinoti.
Mes pažvelgsime į kai kuriuos kalbos pagrindus, įskaitant tai, kas iš tikrųjų yra HTML, kai kurias pagrindines sąvokas ir kaip ji sąveikauja su kitomis kalbomis. Pagalvokite apie tai kaip apie „manekenų HTML“ avarijos kursą.
HTML pagrindai: kas yra HTML?
HTML reiškia Hiperteksto žymėjimo kalba . Ir nors kartais tai sujungiama su programavimo kalbomis, tai nėra tikslu.
Kaip žymėjimo kalba , HTML leidžia jums sukurti tik puslapių išdėstymą. Tikra tiesa programavimo kalba , kaip ir „Java“ ar „C ++“, yra logika ir vykdomos komandos.
Nors tai paprasta, HTML yra kiekvieno žiniatinklio puslapio pagrindas. Ji yra atsakinga už tai, koks tekstas rodomas kaip paryškintas, prideda vaizdų ir nukreipia į kitus puslapius. Turime HTML DUK, kurie paaiškina daugiau.
Galite dešiniuoju pelės klavišu spustelėti daugumą naršyklės tinklalapių ir pasirinkti Rodyti puslapio šaltinį ar panašiai, kad pamatytumėte už jų esantį HTML. Tikėtina, kad jame taip pat bus daug kodo, kuris nėra HTML, tačiau galite jį perskaityti.
Net jei neturite žymėjimo ar programavimo kalbų patirties, šiek tiek sužinoję apie HTML, būsite labiau informuotas žiniatinklio vartotojas. Eikime per penkis pagrindinius veiksmus, kurie padės suprasti, kaip veikia HTML. Pakeliui pateiksime pavyzdžių.
1 žingsnis: supraskite žymų sąvoką
HTML naudojama sistema žymes klasifikuoti skirtingus dokumento elementus.
Dauguma žymų pateikiamos poromis, kad apvyniotų paveiktą tekstą. Štai paprastas pavyzdys (
žyma sukuria tekstą drąsus ; netrukus aptarsime tai plačiau.)
This is some bold text .Atkreipkite dėmesį, kaip uždarymo žyma prasideda pasviruoju brūkšniu (/). Tai reiškia uždarymo žymą, kuri yra svarbi. Jei neuždarysite žymos, viskas nuo pat pradžių turės tą atributą.
kaip išvalyti kitus „iPhone“
Tačiau ne visos žymos turi porą. Kai kurie HTML elementai, vadinami tušti elementai , neturi turinio ir egzistuoja patys. Pavyzdys yra
žyma, kuri yra eilutės pertrauka. Galite „uždaryti“ tokias žymas pridėdami pasvirąjį brūkšnį (pvz
), bet tai nėra būtina.
2 veiksmas: skeleto HTML išdėstymas
Tinkamame HTML dokumente turi būti apibrėžtos tam tikros žymos, kad jis būtų tinkamai išdėstytas. Tai yra esminės dalys:
- Kiekvienas HTML dokumentas turi prasidėti | _+_ | pasiskelbti tokiu. Taigi, jo uždarymo žyma | _+_ | , yra paskutinis elementas HTML faile.
- Toliau | _+_ | skyriuje pateikiama tokia informacija kaip puslapio pavadinimas, įvairūs puslapyje vykdomi scenarijai ir panašiai. Kaip rodo pavadinimas, tai paprastai būna iškart po pradinio | _+_ | žyma. Galutinis vartotojas nemato daug šių žymų turinio.
- Galiausiai | _+_ | žyma turi puslapio tekstą, kurį mato skaitytojas (ir daug daugiau). Čia rasite paveikslėlius, nuorodas ir dar daugiau.
Kadangi nuo
skirsnis sudaro didžiąją HTML dokumento dalį, likusioje mūsų apžvalgoje apžvelgiami su juo susiję elementai.
3 veiksmas: pagrindinės HTML žymos formatavimui
Toliau pažvelkime į keletą įprastų žymų, sudarančių HTML dokumentus. Žinoma, neįmanoma aprėpti kiekvieno elemento, todėl apžvelgsime kai kuriuos svarbiausius. Mes padengėme daug daugiau HTML pavyzdžių jei tai tavęs netenkina.
Jei šios žymės atrodo gana paprastos, atminkite, kad HTML buvo sukurtas dar 1993 metais. Ankstyvosiose stadijose žiniatinklis buvo labai pagrįstas tekstu.
Paprastas teksto formatavimas
HTML palaiko pagrindinius teksto stilius, tokius kaip „Microsoft Word“:
- | _+_ | žymės sukuria tekstą drąsus .
- | _+_ | žymės (tai reiškia „pabrėžimas“) bus kursyvu tekstas.
HTML taip pat palaiko senesnius
žyma paryškinti ir
kursyvu. Tačiau geriau naudoti aukščiau išvardintus.
Trumpai tariant,
ir
parodyti, kaip kažkas turėtų būti suprantama, o pastarosios žymos tik nurodo, kaip tai turėtų atrodyti. Šios buvusios žymos yra labiau prieinamos ekrano skaitytojams, naudojamiems silpnaregiams.
Pastraipa ir kiti skyriai
HTML
žyma leidžia apibrėžti dokumento dalį. Paprastai tai suporuojama su CSS (žr. Toliau), kad tam tikru būdu suformatuotumėte skyrių.
The
žyma leidžia padalinti tekstą į pastraipas. Naršyklės automatiškai įdės šiek tiek vietos prieš ir po jų, leisdamos natūraliai suskaidyti tekstą.
Galite pridėti antraštes prie savo dokumento ir palengvinti sekimą naudodami
per
žymes. H1 yra svarbiausia antraštė, o H6 - mažiausiai svarbi. Beveik kiekviename „MakeUseOf“ straipsnyje informacijai tvarkyti naudojamos antraštės H2 ir H3.
Smūgis Įveskite Jei HTML dokumente norite pridėti eilučių pertraukų, jie iš tikrųjų nebus rodomi. Vietoj to galite naudoti
pridėti eilutės pertrauką.
Štai pavyzdys, kuriame visa tai naudojama:
4 žingsnis: vaizdų įterpimas
Vaizdai yra svarbi daugelio tinklalapių dalis. Galite lengvai juos pridėti naudodami HTML ir netgi nustatyti skirtingas jų savybes.
Vaizdą įterpiate naudodami
žyma. Derinant tai su
atributas leidžia nurodyti, iš kur norite įkelti vaizdą.
Kitas svarbus atributas
kaip įjungti „YouTube“ pranešimus
žymės yra
. Alternatyvus tekstas leidžia apibūdinti vaizdą ekrano skaitytojams arba tuo atveju, jei vaizdas netinkamai įkeliamas. Galite perkelti pelę ant paveikslėlio, kad pamatytumėte jo alternatyvų tekstą.
Naudoti
ir
elementai, skirti nurodyti taškų, kuriuose rodomas vaizdas, skaičių.
Sudėkite viską ir vaizdo žyma atrodo taip:
Example Heading
This is one paragraph.
This is a second
paragraph split between two lines.
5 veiksmas: nuorodų pridėjimas
Pasaulinis tinklas nebūtų didelis žiniatinklis be nuorodų į kitus puslapius. Naudojant
![]()
žymą, galite susieti su kitais puslapiais bet kuriame tekste.
Viduje
srcžyma,
![]()
atributas nurodo, kur susiejate. Tiesiog įklijuoti URL veiks gerai. Galite naudoti
altelementą, kad pridėtumėte šiek tiek teksto, kuris rodomas, kai kas nors užveskite pelės žymeklį virš nuorodos.
Pagrindinė nuoroda atrodo taip:
widthThe
heightžyma turi daug kitų galimų elementų, tačiau čia jų nesigilinsime.
Kaip HTML jungiasi su CSS ir „JavaScript“
Mes apžvelgėme HTML pagrindą ir tai, kaip jis sukuria tinklalapį. Tačiau, kaip galite įsivaizduoti, vien HTML jo netinka šiuolaikiniam žiniatinkliui. Paprasti HTML tinklalapiai buvo paplitę „Web 1.0“ laikais, kai dauguma svetainių buvo tik statinis tekstas.
Bet dabar mes turime daug daugiau. CSS („Cascading Style Sheets“) yra kalba, naudojama apibūdinti, kaip turėtų atrodyti tekstas, kurį paruošėte HTML. Prisiminkite
etiketę, apie kurią diskutavome? Šio (ir kitų žymų) viduje galite apibrėžti a
atributas. Tada pridėtame CSS dokumente galite parašyti instrukcijas, kaip tai padaryti
turėtų žiūrėti.
Šiuos stiliaus elementus galite apibrėžti savo HTML kode, tačiau tai laikoma prasta praktika, nes ją išlaikyti yra daug sunkiau. Sužinokite daugiau su šie paprasti CSS pavyzdžiai . Taip pat patikrinkite kaip optimizuoti CSS failus .
„JavaScript“
Matėme, kad HTML apibrėžia turinį, o CSS - išvaizdą. „JavaScript“ - paskutinis žiniatinkliui gyvybiškai svarbios trijulės narys - leidžia tinklalapiams reaguoti į žmonių veiksmus kiekvieną kartą neįkeliant naujo puslapio.
Pavyzdžiui, „JavaScript“ leidžia svetainei įspėti, kad įvestas slaptažodis neatitinka jo reikalavimų prieš bandant jį pateikti. Žiniatinklio dizaineris gali naudoti „JavaScript“, norėdamas peržvelgti vaizdus skaidrių demonstracijoje arba paprašyti vartotojo įvesti.
Tai tik keli elementarūs pavyzdžiai. „JavaScript“ yra scenarijų kalba, galinti nuveikti labai daug ir palyginti sudėtingesnė nei HTML ir CSS. Pamatyti mūsų „JavaScript“ apžvalga už daug daugiau.
Žvelgiant į visą žiniatinklio dizaino sritį, šis straipsnis neapima, tačiau pakanka pasakyti, kad HTML sąveikauja su kitomis kalbomis, kad sukurtų šiandien žinomus tinklalapius.
HTML evoliucija
Svarbu pažymėti, kad HTML nėra statinis. HTML buvo peržiūrėtas keletą kartų, paskutinis - HTML 5. Pažymėtina, kad šis standartas palaiko vietinį vaizdo įrašų įterpimą, o ne remiasi patentuotais formatais, pvz., „Adobe Flash“.
Naujos HTML kartotinės taip pat skelbia, kad tam tikros archajiškos žymos kartkartėmis nebenaudojamos. Tai apima baisias žymas, tokias kaip
hrefir
title(atitinkamai slinkties ir „flash“ tekstas), dažniausiai matomas kuriant dešimtojo dešimtmečio svetaines. Taigi atminkite, kad laikui bėgant standartai keičiasi.
Mažos HTML žinios nueina ilgą kelią
Trumpai apžvelgėme, kaip veikia HTML dokumentas. Dabar jūs žinote tinklalapių struktūros pagrindus. Net jei neketinate kurti tinklalapių, jūs šiek tiek žinote apie kasdien naudojamą žiniatinklį.
kaip pamatyti senus pranešimus „iPhone“
Jei norite sužinoti daugiau, atnaujinkite žiniatinklio kūrimo įgūdžius naudodami pagrindinius įrankius ir patikrinkite mūsų vadovas, kaip sukurti savo pirmąją svetainę .
Vaizdo kreditas: Belyaevskiy/ Depositphotos
Dalintis Dalintis „Tweet“ Paštu 5 patarimai, kaip perkrauti „VirtualBox Linux“ mašinasPavargote nuo prastų virtualių mašinų našumo? Štai ką turėtumėte padaryti, kad padidintumėte „VirtualBox“ našumą.
Skaityti toliau Susijusios temos- Programavimas
- HTML
- Interneto svetainių kūrimas
- „JavaScript“
- Žiniatinklio valdytojo įrankiai
- Programavimas
- HTML5
Benas yra „MakeUseOf“ redaktoriaus pavaduotojas ir pradinis vadovas. Jis paliko savo IT darbą ir rašė visą darbo dieną 2016 m. Ir niekada neatsigręžė atgal. Jau daugiau nei septynerius metus jis, kaip profesionalus rašytojas, apima technologijų vadovus, vaizdo žaidimų rekomendacijas ir dar daugiau.
Daugiau iš Ben StegnerPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia