Daudzi cilvēki domā, ka savas vietnes izveide -grūts bizness, kas prasa nopietnu sagatavošanu un sarežģītu instrumentu izmantošanu. Faktiski, lai sāktu, pietiek ar minimālām zināšanām un visvienkāršāko Windows programmu Notepad. Pēc vienkāršām instrukcijām, kā izveidot tīmekļa vietni Notepad, varat izveidot pirmo pilnu lapu pāris stundu laikā.
Notepad priekšrocības
Profesionāli web izstrādātāji, pieredzējušiVietnes veidotāji ļoti reti izmanto Notepad darba gaitā, tomēr ir divas lietotāju kategorijas, kurām šī programma ir lieliska izvēle:
- iesācēju izkārtojuma dizaineri;
- cilvēki, kuri nav iepazinušies ar tīmekļa lapu veidošanas procesu, nevēlas mācīties sarežģītus redaktorus, lai rakstītu vienkāršu vizītkaršu vietni.
Многие профессионалы знакомились с версткой и HTML, norādot, kā izveidot vietni, izmantojot Notepad. Tas ļāva viņiem droši un ātri apvienot visas iegūtās zināšanas. Notepad nav paredzēts darbam ar kodu un atzīmi, tai nav iebūvētu uzvedņu, automātiskās pabeigšanas un citu mikroshēmu, kas pieejamas mūsdienu programmās, kas nozīmē, ka attīstītājs var paļauties tikai uz sevi un atmiņu.
Notepad teksta redaktoram ir visizdevīgākaisminimālisma interfeiss, kas nozīmē, ka nav nepieciešams ilgs laiks, lai saprastu programmas sarežģīto funkcionalitāti. Tas ir ļoti pievilcīgs lietotājiem, kuri neplāno pavadīt laiku mācīties par rīku, ko viņi bieži neizmantos.
Darba pamati
Soli pa solim instrukcijas par to, kā izveidot HTML vietni Notepad, sākas ar programmas atvēršanu. Vienkāršākais veids ir atrast Notepad caur Windows Start izvēlni Standard sadaļā.
Atvērtais jaunais fails ir jāsaglabā kopā arhtml paplašinājums. Tas ir svarīgi, jo ar šo paplašinājumu pārlūks sapratīs, ka priekšā ir tīmekļa lapa. "Saglabāt kā" komandu izvēlnē "Fails" tiks atvērts jauns logs. Šeit jums ir nepieciešams dot dokumentam nosaukumu index.html, izvēlieties utf-8 kodējumu un mapi, kuru vēlaties saglabāt.
Tagad jebkurā laikā varat atvērt šo failu, veicot dubultklikšķi uz tā vai ar peles labo pogu noklikšķinot uz konteksta izvēlnes un atlasot vienumu "Atvērt ar Notepad".
Lapa jau ir izveidota un jūs varat redzēt, kā tas izskatās pārlūkprogrammā. Ir vairāki veidi, kā interneta pārlūkā atvērt dokumentu:
- noklikšķinot uz tās ar peles labo pogu un uznirstošajā izvēlnē atlasot komandu "Atvērt ar Google Chrome" (vai citu pārlūkprogrammu);
- vienkārši velkot ikonu atvērtā pārlūka cilnes joslā;
- ierakstot pārlūkprogrammas adrešu joslā pilnu dokumenta adresi, sākot ar failu: // protokols
fails: /// C: /Users/UserName/Desktop/my-site/index.htmlTagad lapa ir paredzami tukša, ir pienācis laiks to aizpildīt ar informāciju.
Hiperteksta iezīmēšanas valoda
Visas tīmekļa lapas tīmeklīrakstīts speciālā valodā HTML (hiperteksta iezīmēšanas valoda). Izpratne par tās pamatiem ir ļoti svarīga, lai noskaidrotu, kā izveidot tīmekļa vietni Notepad vai citā redaktorā. Izmantojot HTML, izstrādātājs pārlūkam izskaidro, kā lapai vajadzētu izskatīties. Tāpēc ir svarīgi instalēt pareizo faila paplašinājumu.
Valodas pamatā ir tagi - rakstzīmju kombinācijas, kas ietvertas leņķa iekavās.
Tagu piemēri:
Pirmā līmeņa virsraksts
Kursīvā teksts Teksts starp atvēršanas un aizvēršanas tagiem tiks īpaši apstrādāts pārlūkprogrammā.
Papildus datiem, kas tieši parādīti lapā, veidojot lapu, jānorāda īpaša pakalpojuma informācija, kas paredzēta pašai pārlūkprogrammai.
Pirmās skices
Sāciet darbu ar pareizu html dokumenta dizainu. Lapas pamatstruktūra ir šāda:
Labākā vietne pasaulē
Katra vienuma vērtība:
DOCTYPE- pārlūkprogrammas tehniskā informācija, norādot, kā tai vajadzētu interpretēt kodu;html- lapas saknes tags;galva- pakalpojuma informācijas sadaļa, kas nav redzama vietnes apmeklētājiem;meta- pakalpojuma tags, korsetes atribūts nosaka teksta kodējumu;nosaukums- pārlūkprogrammas cilnē parādītās lapas nosaukums;ķermenis- dokumenta pamatteksts, kas tieši redzams lapā.
Pēc koda saglabāšanas un faila pārlūkprogrammas atkārtotas atvēršanas (vai atkārtotas ielādēšanas) var redzēt pirmās izmaiņas - cilnē parādījās vietnes nosaukums.
Tēma un struktūra
Pirms izdomāt, kā izveidot vietni HTML, izmantojot Notepad, jums skaidri jāiedomājas, kā šai vietnei vajadzētu izskatīties. Piemēram, pieņemsim kāda Džona Doe personīgo emuāru.
Šīs lapas struktūras galvenie elementi:
- cepure ar logotipu un pirmā līmeņa virsraksts;
- horizontālā navigācijas josla;
- galvenais saturs, ko pārstāv trīs raksti, katrs ar virsrakstu, īsu aprakstu un saiti uz pilnu tekstu;
- pagrabs ar paziņojumu par autortiesībām.
Šīs lapas HTML kods izskatīsies šādi:
Labākā vietne pasaulē
Džons Dojs
Superkoncerts
Bija biļetēm vērts kilometrs
izbaudīt šo izrādi !!
Skatīt vairāk
Kāpēc es mīlu saldējumu
Es vēlos dalīties ar dziļajiem iemesliem
mana mīlestība uz saldējumu ...
Skatīt vairāk
būt vai nebūt?
Dzīves un nāves jautājumi.
Skatīt sīkāku informāciju
Džons Dojs (c) 2018
Web lapas aprakstīšanai tiek izmantoti HTML5 standarta semantiskie tagi: galveni, galvenais, nav, kājene, rakstu.
Koda skaidrojumi:
- Galvenē ir attēls, kas ietīts saitē. Ar tās palīdzību lietotājs var atgriezties galvenajā lapā no jebkuras vietas vietnē.
- Pats attēls atrodas mapē
attēlusvienā līmenī ar failuindex.html... Tā kodā, izmantojot atribūtuplatumsplatums ir stingri iestatīts uz 100 pikseļiem. - Virsraksts ir veidots kā tags
h1, kas uzsver tā nozīmi. - Navigācijas izvēlne tiek parādīta kā nenumurēts saraksts, un katrs tās vienums ir saite uz atbilstošo vietnes lapu. Šīs sadaļas vēl nav pieejamas, taču tās, iespējams, tiks izveidotas nākotnē.
- Rakstu nosaukumiem izmantojiet tagu
h2. - Saite "Skatīt" sīkāk ved uz atsevišķu lapu ar pilnu raksta tekstu. Arī šīs lapas vēl nepastāv.
- Viss saturs ir iesaiņots kopējā blokā ar klasi
iesaiņojums... Klases atribūti parasti tiek izmantoti stila elementu veidošanai.
Tagad lapa izskatās šādi:
Šis uzskats nav ļoti līdzīgs iecerētajam. Lai labotu situāciju, jums jāpievieno rotājums.
Lai to izdarītu, jums blakus jāizveido vēl viens fails index.html un nosauc to style.css... Tajā būs visi nepieciešamie stili.
Pašlaik projekta struktūra izskatās šādi:
Stils
Turpinot noskaidrot, kā izveidot vietni Notepad, mēs ejam uz jaunu līmeni - savienojot stila lapu.
Lai pārlūkprogramma saprastu, no kurienes iegūt noformējumu, jums jānorāda faila css adrese. Šī ir informācija par servisu, tā jānovieto sadaļā galva.
<head> <meta charset = "utf-8"> <title> Labākā vietne pasaulē </title> <link rel = "stylesheet" href = "style.css"> </head>Tagad viss, kas tiks aprakstīts failā style.css, pārlūkprogramma lietos lapu. Piemēram, mainīsim fona krāsu:
ķermenis { fons: # 89745d; }Viss stila lapas saturs izskatīsies šādi:
ķermenis { polsterējums: 0; fontu saime: sans serif; fonta lielums: 16 pikseļi; fons: # 89745d; } .wrapper { polsterējums: 20 pikseļi; atstarpe pa kreisi: automātiska; margin-right: auto; platums: 960px; } galvene a { teksta noformēšana: nav; } header img { vertikāli-izlīdzināt: vidus; labā mala: 20 pikseļi; } galvene h1 { displejs: inline-block; vertikāli-izlīdzināt: vidus; krāsa: # f8d9b7; } nav { polsterējums - 20 pikseļi; polsterējuma apakšdaļa: 20 pikseļi; } nav ul { starpība: 0; text-align: center; } nav ul li { displejs: inline-block; saraksta stils: nav; polsterējums: 0px 15px; } nav ul li a { krāsa: # f8d9b7; teksta noformēšana: nav; } nav ul li a: lidināties { teksta apdare: pasvītrojums; } raksts { polsterējums: 20 pikseļi; starpība: 20px 0; fons: # f8d9b7; box-shadow: 0 0 15px # f8d9b7; } raksts h2 { margin-top: 0px; margin-bottom: 15 pikseļi; krāsa: # d57106; } raksts a { fonta lielums: 14 pikseļi; fonta stils: kursīvs; krāsa: # d57106; } kājene { polsterējums: 20 pikseļi; text-align: pa labi; krāsa: # f8d9b7; fonta lielums: 14 pikseļi; fonta svars: treknrakstā; }Stilu skaidrojumi:
- Pamatteksta elements ir iestatīts uz pamata fonta parametriem: sans-serif saime un 16 pikseļu izmērs.
- Galvenajam konteineram ir nemainīgs platums 960 pikseļi, un tas ir centrēts.
- Izvēlņu saraksta vienumi tiek pasludināti par bloku elementiem, kas ļauj tos ievietot vienā rindā. Saitēm pasvītrojums ir noņemts, tagad tas tiek rādīts tikai ar peles kursoru.
- Rakstu blokam ir kontrastējošs fons un neliela ēna.
Atsvaidzinot dokumentu pārlūkprogrammā, var redzēt tā galīgo attēlojumu. Pirmā tīmekļa lapa ir veiksmīgi izveidota!
Tomēr emuārs nevar sastāvēt tikai no galvenālapas ar rakstu sarakstu. Vajag kaut kā parādīt atsevišķu ziņu ar pilnu tekstu, turklāt navigācijas izvēlnē norādītās lapas jau ir plānotas.
Vissvarīgākā interneta koncepcija ir atsevišķu dokumentu sasaistīšana, izmantojot saites. Kā Notepad izveidot hipersaiti saistītu vietni?
Lapu pievienošana
Faktiski viss nepieciešamais jau ir izdarīts. Ēdienkartes vienumi un norādes "Pulkstenis" sīkāk tiek ietīti īpašā tagā a, kas ir atbildīgs par hipersaites veidošanos. Nepieciešamā adrese ir norādīta atribūtā href... Atliek tikai pašiem izveidot lapas un ievietot tās blakus failam index.html.
Foto albuma lapas koda paraugs (gallery.html):
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Labākā vietne pasaulē </title> <link rel = "stylesheet" href = "style.css"> </head> <ķermenis> <div class = "wrapper"> <galvene> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> Džons Doe </h1> </header> <nav> <ul> <li> <a href="bio.html"> Autobiogrāfija </a> </li> <li> <a href="life.html"> Mana dzīve, mani sasniegumi </a> </li> <li> <a href="gallery.html"> Foto albums </a> </li> <li> <a href="contacts.html"> Sazinieties ar mani </a> </li> <li> <a href="thanks.html"> Paldies </a> </li> </ul> </nav> <galvenais> <div class = "gallery"> <attēls> <img src = "/ images / images / in-forest.jpg" alt = ""> <figcaption> Mežā </figcaption> </figure> <attēls> <img src = "/ images / images / winter.jpg" alt = ""> <figcaption> Ziemā </figcaption> </figure> <attēls> <img src = "/ images / images / on-beach.jpg" alt = ""> <figcaption> Pludmalē </figcaption> </figure> <attēls> <img src = "/ images / images / work.jpg" alt = ""> <figcaption> Darbā </figcaption> </figure> <attēls> <img src = "/ images / images / new-year.jpg" alt = ""> <figcaption> Jaunais gads </figcaption> </figure> <attēls> <img src = "/ images / images / picture.jpg" alt = ""> <figcaption> Pašportrets </figcaption> </figure> </div> </main> <pēdas> Džons Doe (c) 2018 </footer> </div> </body> </html>Galvenā struktūra, galvene, navigācija un kājene pilnībā dublē galveno lapu, mainās tikai sadaļa galvenaiskurā tagad ir galerija ar vairākiem blokiem skaitlis... Katrā blokā ir attēls un paraksts.
Lapas noformēšanai tiek izmantots tas pats fails style.csssavienots sekcijas iekšpusē galva... Jums galerijai jāpievieno vairāki noteikumi:
.gallery { fonta lielums: 0; } skaitlis { displejs:inline-block; vertikāli izlīdzināt: apakšā; platums: 33,3333%; kastes izmērs: pierobežas kaste; polsterējums: 10 pikseļi 15 pikseļi; piemale: 0px; fonta lielums: 14 pikseļi; krāsa: # f8d9b7; text-align: center; } attēls img { platums: 100%; apmale apakšā: 10 pikseļi; }Šeit tiek izmantota css tehnika, kas ļauj blokus ievietot trīs pēc kārtas un iestatīt tos tieši vienā trešdaļā no vecāku konteinera platuma.
Galerijas skats ir parādīts zemāk.
Hipersaites nodrošina pārvietošanos starp vietnes lapām: no izvēlnes varat pāriet uz "Fotoalbumu", un, noklikšķinot uz logotipa, varat pāriet atpakaļ uz galveno lapu.
Vietnes izvietošana internetā
Tātad, mēs sapratu, izmantojot pakāpeniskas instrukcijas, kā izveidot vietni Notepad. Bet tagad viņu neviens neredz! Bet personīgie emuāri tiek veidoti, lai dalītos savā dzīvē ar visu pasauli.
Lai labotu situāciju, jums ir jānovietovisus izveidotos failus mitināšanas laikā un izvēlieties vietnes domēnu, izmantojot īpašu pakalpojumu. Ir ļoti daudz mitināšanas pakalpojumu sniedzēju, kas sniedz pakalpojumus katrai gaumei un seifam.
Pēc līguma noslēgšanas ar hostu jums būs piekļuve vadības panelim, kur jūs varat pārsūtīt visus izveidotos failus. Pašlaik projekta struktūra ir šāda:
Tajā jāiekļauj arī HTML faili pārējām vietnes lapām.
Kodu redaktori
Tagad jūs zināt, kā izveidot html vietniNotepad, bet ir ērtāki veidi. Profesionāļi izmanto īpašus redaktorus, kas paredzēti darbam ar kodu. Tie piedāvā daudzas ērtas iespējas, lai būtu ērti izveidot un rediģēt vietnes.
Populārākie rīki - Visual StudioKods, Sublime Text, Notepad ++. Nevajadzētu baidīties no viņu sarežģītības. Zinot, kā izveidot vietni, izmantojot Notepad, jūs varat viegli saprast, kas ir kas. Visa šo redaktoru papildu funkcionalitāte ir paredzēta, lai atvieglotu tīmekļa pārziņa darbu, un tai nevajadzētu viņu iejaukties šajā procesā.
Vietnes izveide, izmantojot Notepad, ir tikai sākums ilgam un interesantam ceļam kā tīmekļa izstrādātājam.
