Savas vietnes izveide iesācējiem: 5 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:54

Neatkarīgi no tā, vai esat kādreiz sapņojis kļūt par datorprogrammētāju vai kādreiz esat izmantojis vietni, jāatzīst, gandrīz visi esam mēs, informācijas tehnoloģijas ir kļuvušas par biznesa mugurkaulu. Lai gan programmēšana sākotnēji var šķist mazliet biedējoša, mans mērķis ir iemācīt jums tīmekļa dizaina pamatus, lai pēc šīs apmācības jūs varētu izveidot savu tīmekļa lapu. Kad tas nav iespējams, ķersimies pie tā!

Piegādes

• Macintosh vai Windows dators (lai gan var izmantot arī Linux distros, pagaidām tos izlaižu, jo tas ir iesācēja ievads).
• Jūsu izvēlētais teksta redaktors (Notepad operētājsistēmā Windows, TextEdit operētājsistēmā Mac) vai IDE izvēle. Pēc savas pieredzes es atklāju, ka Visual Studio Code vislabāk darbojas man pašam, tāpēc es arī ieteiktu to pārbaudīt šeit: https://code.visualstudio.com/, nemaz nerunājot par to, ka tas darbojas visās OS platformās.

1. darbība. Tagi un vēsture

Kad esat nolēmis izvēlēties teksta redaktoru vai IDE, sāksim ar pamatiem.

Ticiet vai nē, bet HTML vai HyperText iezīmēšanas valoda pastāv jau gandrīz 30 gadus, un ar katru gadu tiek veikti arvien jauni valodas uzlabojumi. Tagad jūs varētu jautāt, kā pārlūkprogramma interpretē to, ko ievietot ekrānā? Tas tiek darīts dažās daļās:

HTML dokumentu formatēšana ir vienkārša. Jums ir divas sadaļas, kas pazīstamas kā galva un ķermenis. Vietnes galvgalī ir kods, kas lietotājam nav redzams. To izmanto, lai saistītu stila lapas un deklarētu citus nepieciešamos bitus, kas nepieciešami, lai vietne tiktu pareizi parādīta. Sekojot galvai, ķermenis ir tāds, kā izklausās, vietnes pamatteksts. Šeit jūs varat izrunāt savu balsi un parādīt auditorijai savas fantastiskās HTML prasmes! Tagad tas nav tik vienkārši, kā vienkārši ierakstīt tekstu pamattekstā un parādīt to tieši tā, kā vēlaties, taču tas ir gandrīz tik vienkārši savā ziņā, izmantojot lietas, kuras mēs saucam par tagiem.

Šeit ir daži pamata HTML tagi:

• virsraksts - tiek izmantots, lai pārlūkprogrammai norādītu lapas nosaukumu. Tas ir arī tas, ko redzat, aplūkojot tīmekļa lapas cilni.
• h1, h2, h3, h4 - tiek izmantoti dažādiem galvenes izmēriem, h1 ir lielākais un h4 ir mazākais. Vairāk par to es runāšu nākamajā sadaļā.
• p - rindkopa, ko izmanto teksta rindkopu rakstīšanai. Tāpat kā rindkopas uz papīra.
• br - pārtraukums, kas ievieto pārtraukumu atbilstoši tekstam.
• a - izmanto, lai izveidotu saites uz citām lapām, piemēram, uz klikšķināmas saites.
• img - izmanto attēla saistīšanai ar tīmekļa lapu.
• ul, ol, li - nesakārtoti saraksti, sakārtoti saraksti un saraksta vienumi.
• - izmanto, lai kodā iekļautu komentārus, kurus galalietotājs neredzēs.

Un šeit ir daži CSS tagi (vizuāli):

• krāsa - izmanto, lai piešķirtu konkrētu krāsu kādam tīmekļa lapas elementam vai kopai.
• font-size-izmanto, lai mainītu lapas fonta lielumu.
• fona krāsa-izmanto, lai mainītu konkrēta elementa vai visas lapas fona krāsu.

Esmu pievienojis arī nelielu krāpšanās lapu, lai palīdzētu jums, ja jūtaties mazliet apmaldījusies, bet neuztraucieties, jūs to ātri sapratīsit! Turklāt www.w3schools.com ir arī fantastisks resurss visiem jūsu programmēšanas jautājumiem. Viņi noteikti ir ietaupījuši man laiku vai arī.

Būtībā tas, kā pārlūks nolasa failu, ir vienkāršs. Tas iet pa rindām un apstrādā funkciju pēc funkcijas. Rakstzīmes tiek izmantotas, lai deklarētu tagu, piemēram, un tiek izmantoti, lai aizvērtu tagu, piemēram,. Tas ir svarīgi, pretējā gadījumā pārlūkprogrammā nav vietas, kur apstāties. Starp

un

tagi, tur jūs ievadāt visu, ko vēlaties!

2. darbība: redaktora iestatīšana

Tagad, kad esam mazliet apskatījuši HTML vietnes pamatelementus, ienirsim un izmēģināsim to paši. Šim nākamajam solim vietnes programmēšanai es izmantošu Visual Studio kodu, taču koda izkārtojums būs tāds pats, ja jums ir ērtāk izmantot tikai Notepad vai TextEdit.

Notepad:

• Izmantojot Notepad, programma tiek palaista ar tukšu failu, kas atvieglo darba sākšanu. Tas arī ļaus mums pāriet dažus soļus salīdzinājumā ar VS koda izmantošanu. Sāksim, saglabājot failu pareizajā formātā.
• Noklikšķiniet uz Fails> Saglabāt
• Ievadiet faila nosaukumu, pēc tam.html un sadaļā Saglabāt kā veidu atlasiet visus failus. Noklikšķiniet uz saglabāt.

VS koda ietvaros:

• Labākais veids, kā izmantot visas IDE funkcijas, ir vispirms izveidot failu un pateikt IDE, kāda veida fails tas ir. To var izdarīt šādi:
• Noklikšķiniet uz Fails> Jauns fails
• Tiek atvērts tukšs fails
• Pēc tam jūs vēlaties sākt, saglabājot failu, lai gan tas ir tukšs, jo tas ļaus IDE saprast, kāda veida fails būs galaprodukts. Saglabājot, faila nosaukuma beigās noteikti iekļaujiet.html paplašinājumu. Noklikšķiniet uz saglabāt.

3. solis: rasējumi

Kad esat veiksmīgi saglabājis failu filename.html, sāksim, izveidojot mūsu tīmekļa lapas ietvaru. Atcerieties no augšas, kādas faila galvenās daļas mums ir jādeklarē, pirms varam sākt ar pārējās HTML lapas izveidi. Ieteikums: uzsākot vietnes ietvaru, HTML tags DOCTYPE norāda pārlūkam, ka lasītais fails ir html fails. Tas var noderēt, ja vienā failā ir dažāda veida kodi un vēlaties pārslēgties starp tulkiem. Attiecībā uz šo pamācību mēs pārāk daudz to neaiztiksim, bet, ja pēc šīs pamācības vēlaties uzzināt vairāk par HTML izstrādi, nekautrējieties to izmēģināt. Lai ieviestu paraugpraksi, faila augšdaļā ievietošu HTML tagu! DOCTYPE. Atcerieties atvērt un aizvērt ar.

Šeit ir noderīgi saglabāt failu pirms programmēšanas, tagad, kad IDE zina, ka tas darbojas ar HTML failu, tas izmantos intellisense, lai pabeigtu izteiksmi un piedāvātu ieteikumus, lai nejauši neaizmirstu aizvērt tagu. Ņemiet vērā, ka tiem, kas izmanto Notepad, intellisense nav pieejama kā IDE. Mēs sākam, ievadot galvas un ķermeņa tagus šādi: (skat. Otro attēlu).

Tagad, kad dokumentu iestatīšana ir pabeigta, mēs varam doties sacensībās un izklaidēties!

4. solis: kods; Kods; Kods;

Mēs varam sākt, ievietojot mūsu jaunizveidotā faila nosaukumu. Ievadiet visu, ko vēlaties. Atcerieties, ka šis vārds parādās pārlūkprogrammas cilnē. Sāksim arī, ievadot mūsu vietnes virsrakstu. Atgādiniet no iepriekš, kā mēs to darām. Vai es dzirdēju h1/2/3/4? Tas ir pareizi!

Pirms turpināt, man šķiet noderīgi atvērt mūsu failu pārlūkprogrammas logā, lai mēs reāllaikā varētu redzēt, kā mūsu izmaiņas atspoguļojas pārlūkprogrammā. To var izdarīt, noklikšķinot uz Fails> Saglabāt, lai saglabātu failu, dodoties uz mapi, kurā tiek saglabāts HTML fails, man tā ir darbvirsma, un, lai atvērtu failu, izmantojiet izvēlēto pārlūkprogrammu., te ir tava mājas lapa! Piezīme. Es personīgi izmantoju Safari kā savu izvēlēto pārlūkprogrammu savā datorā, tomēr tīmekļa izstrādē Firefox ir zelta standarta pārlūks testēšanai, jo tas darbojas ar gandrīz katru tīmekļa skriptu valodu.

Kā redzat, cilnē tiek parādīts nosaukums, kā arī mūsu virsraksts h1. Es gribētu, lai vienlaikus ar IDE tiktu atvērts gan faila pārlūkprogrammas logs, jo, veicot izmaiņas IDE un saglabājot, izmaiņas pārlūkprogrammā tiek veiktas uzreiz.

Jūtieties brīvi un pievienojiet tagus un spēlējiet dažādas lietas, ko varat darīt ar HTML. Kā redzat zemāk, esmu pievienojis dažas rindkopas, pārtraukumus, ārēju hipersaiti uz Instructables.com, attēlu (kuru var saistīt vai nu no ārēja avota, vai tajā pašā direktorijā, kur tiek glabāts. HTML fails), nesakārtota saraksta, sakārtota saraksta un visbeidzot komentāra piemērs.

Ja vēlaties pievienot dažas krāsas un izkārtojuma opcijas, faila galvgalī varat ievadīt stila tagu. Tas ir punkts, kurā tas tiek pārvietots no HTML uz CSS, bet vizuāli es ievadīšu dažas rindiņas, lai jūs varētu redzēt, kā tas darbojas. Būtībā tas, kā darbojas CSS, ļauj kontrolēt HTML elementus funkcijās, izmantojot iekavas {}, lai ievadītu kodu konkrētam HTML elementam.

5. solis: pēdējās domas

Un tur jums tas ir; jūs veiksmīgi izveidojāt savu pirmo tīmekļa lapu! Tā kā šī ir iesācēja rokasgrāmata, es vēlos padarīt jūsu pirmo pieredzi ar HTML patīkamu. Labākais veids, kā mācīties manā pieredzē, ir ienirt un izmēģināt lietas, redzēt, ko jūs varat darīt ar savu kodu, kā arī redzēt, kā jūs varat salauzt savu kodu. Tas veido integritāti un palīdz labāk izprast, kā un kāpēc kods darbojas tā, kā tas darbojas. Atcerieties, ka www. W3Schools.com ir lielisks resurss jautājumiem, un tie pat piedāvā virtuālu smilšu kasti pārlūkprogrammā, lai izmēģinātu jūsu kodu. Cerams, ka esat kaut ko iemācījies un laimīgu kodēšanu!