Opbygning af dit eget websted for begyndere: 5 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:27

Uanset om du nogensinde har drømt om at være computerprogrammerer eller nogensinde har brugt et websted, som vi kan se, er næsten os alle, er informationsteknologi blevet rygraden i forretningen. Selvom programmering kan virke lidt skræmmende i starten, er mit mål at lære dig det grundlæggende grundlæggende i webdesign, så du efter denne vejledning kan lave din helt egen webside. Med det ude af vejen, lad os komme til det!

Forbrugsvarer

• En Macintosh- eller Windows -pc (selvom Linux -distros også kan bruges, springer jeg dem over for nu, da dette er en begynders introduktion).
• Dit valg af teksteditor (Notesblok på Windows, TextEdit på Mac) eller dit valg af IDE. Efter min erfaring har jeg fundet Visual Studio Code til at fungere bedst for mig selv, så jeg vil også anbefale at tjekke det ud her: https://code.visualstudio.com/ for ikke at nævne det fungerer på alle OS -platforme.

Trin 1: Etiketter og lidt historie

Når du har besluttet dig for dit valg af teksteditor eller IDE, lad os begynde med det grundlæggende.

Tro det eller ej, HTML eller HyperText Markup Language har eksisteret i næsten 30 år nu og med hvert år er der kommet flere og flere forbedringer af sproget. Nu spørger du måske, hvordan fortolker en browser, hvad der skal lægges på skærmen? Dette gøres i et par dele:

HTML -dokumentformatering er let. Du har to sektioner kendt som hovedet og kroppen. Hovedet på et websted indeholder kode, der ikke er synlig for brugeren. Dette bruges til at forbinde stylesheets og erklære andre nødvendige bits, der er nødvendige for, at webstedet kan vises korrekt. Efter hovedet er kroppen, som den lyder, webstedets krop. Det er her, du kommer til at tale din stemme og vise publikum dine fantastiske HTML -færdigheder! Nu er det ikke så let som bare at skrive tekst i kroppen og få den vist præcis, som du vil, men det er næsten så let på en måde med brugen af ting, vi kalder tags.

Her er nogle af de grundlæggende HTML -tags:

• titel - som bruges til at fortælle browseren, hvad titlen på siden er. Det er også det, du ser, når du ser på fanen på en webside.
• h1, h2, h3, h4 - som bruges til forskellige headerstørrelser, hvor h1 er den største og h4 er den mindste. Jeg vil dække mere om dette i det næste afsnit.
• p - afsnit, der bruges til at skrive tekstafsnit. Som afsnit på et papir.
• br - pause, som indsætter et brud på linje med teksten.
• a - bruges til at oprette links til andre sider, f.eks. et klikbart link.
• img - bruges til at linke et billede til websiden.
• ul, ol, li - uordnede lister, ordnede lister og listeelementer.
• - bruges til at lave inline -kommentarer i koden, som slutbrugeren ikke kan se.

Og her er nogle CSS -tags (visuelle):

• farve - bruges til at tildele en bestemt farve til et bestemt element eller sæt på websiden.
• skrifttype-bruges til at ændre skriftstørrelsen på siden.
• baggrundsfarve-bruges til at ændre baggrundsfarven på et bestemt element eller hele siden.

Jeg har også vedhæftet et lille snydeblad til at hjælpe dig, hvis du føler dig lidt tabt, men ikke bekymre dig, du får styr på det på ingen tid! Desuden er www.w3schools.com også en fantastisk ressource til ethvert af dine programmeringsspørgsmål. De har helt sikkert sparet mig en tid eller også.

Grundlæggende er det let, hvordan browseren læser filen. Det går linje for linje og behandler funktion for funktion. Tegnene bruges til at erklære et tag som f.eks

og bruges til at lukke mærket som f.eks

. Dette er vigtigt ellers vil browseren ikke vide, hvor den skal stoppe. I mellem

og

tags, er hvor du indtaster, hvad du vil!

Trin 2: Editoropsætning

Nu hvor vi har dækket lidt om de grundlæggende elementer på et HTML -websted, lad os dykke ned og prøve det selv. Til dette næste trin bruger jeg Visual Studio Code til at programmere webstedet, men layoutet af koden vil være det samme, hvis du er mere komfortabel med bare at bruge Notepad eller TextEdit.

Inden for notesblok:

• Med Notesblok starter programmet med en tom fil, som gør det super let at komme i gang. Dette giver os også mulighed for at springe et par trin i forhold til at bruge VS -kode. Lad os komme i gang ved at gemme filen i det korrekte format.
• Klik på Filer> Gem
• Indtast et navn til din fil efterfulgt af.html og vælg alle filer under Gem som type. Klik på Gem.

Inden for VS -kode:

• Den bedste måde for dig at drage fordel af alle IDE's funktioner er at starte med at oprette filen og fortælle IDE, hvilken filtype det er. Dette kan gøres som følger:
• Klik på Filer> Ny fil
• En tom fil åbnes
• Dernæst vil du starte med at gemme filen, selvom den er tom, da dette giver IDE mulighed for at forstå, hvilken filtype slutproduktet vil være. Når du gemmer, skal du inkludere.html -udvidelsen i slutningen af filnavnet. Klik på Gem.

Trin 3: Blueprints

Når du har gemt din filnavn.html -fil, lad os begynde med at oprette rammen for vores webside. Husk ovenfra, hvilke vigtige dele af filen vi skal erklære, før vi kan starte med at oprette resten af HTML -siden. Pro-tip: Når du starter rammerne for webstedet, fortæller! DOCTYPE HTML-tag browseren, at den fil, den læser, er en html-fil. Dette kan være praktisk, hvis du har forskellige typer kode i den samme fil og ønsker at skifte mellem tolke. For omfanget af denne instruktive vil vi ikke røre for meget ved dette, men hvis du efter denne Instructable er nysgerrig efter at tjekke mere om HTML -udvikling, er du velkommen til at give det et skud. Jeg vil indsætte! DOCTYPE HTML -tag øverst i filen for at få bedste praksis. Husk at åbne og lukke med.

Her er det godt at gemme filen, før du begynder at programmere, nu hvor IDE ved, at den arbejder med en HTML -fil, vil den bruge intellisense til at afslutte udtrykket og tilbyde forslag, så du ikke ved et uheld glemmer at lukke et tag. Bemærk, at for dem af jer, der bruger Notesblok, er intellisense ikke tilgængelig som i IDE. Vi begynder med at indtaste hoved- og kropsmærkerne som følger: (se andet billede).

Nu hvor dokumentopsætningen er afsluttet, kan vi komme til løbene og have det sjovt!

Trin 4: Kode; Kode; Kode;

Vi kan begynde med at indsætte en titel til vores nyoprettede fil. Indtast hvad du vil. Husk, at dette er navnet, der vises i browserfanen. Lad os også begynde med at indtaste en overskrift for vores websted. Husk fra før, hvordan vi gør dette. Hørte jeg h1/2/3/4? Det er korrekt!

Inden vi fortsætter, finder jeg det nyttigt at åbne vores fil i et browservindue, så vi i realtid kan se, hvordan vores ændringer afspejler sig i browseren. Du kan gøre dette ved at klikke på Filer> Gem for at gemme filen, navigere til den mappe, hvor HTML -filen er gemt, for mig er dette skrivebordet, og brug den browser, du ønsker, til at åbne filen, og vil du se på det, der er din webside! Bemærk: Jeg bruger personligt Safari som min foretrukne browser på min computer, men i webudvikling er Firefox den gyldne standardbrowser til test, da den fungerer med næsten alle web -scriptsprog.

Som du kan se, vises titlen på fanen, såvel som at se vores h1 -overskrift. Jeg foretrækker at have både browserens vindue i filen åbnet ved siden af IDE, som når du foretager en ændring i IDE og gemmer, er ændringerne øjeblikkelige i browseren.

Prøv at tilføje tags og lege med de forskellige ting, du kan gøre med HTML. Som du kan se nedenfor, har jeg tilføjet et par afsnit, pauser, eksternt hyperlink til Instructables.com, et billede, (som enten kan linkes fra en ekstern kilde eller inden for den samme mappe som. HTML -filen er gemt), et eksempel på en uordnet liste, en ordnet liste og til sidst en kommentar.

Hvis du vil prøve at tilføje nogle farver og arrangementmuligheder, kan du indtaste et stilmærke i filens hoved. Dette er det punkt, hvor dette skifter fra HTML til CSS, men for visuel skyld vil jeg indtaste et par linjer, så du kan se, hvordan dette fungerer. I det væsentlige hvordan CSS fungerer, er det muligt for dig at kontrollere HTML -elementer inden for funktioner ved hjælp af parenteser {} til at indtaste din kode for et specifikt HTML -element.

Trin 5: Endelige tanker

Og der har du det; du har oprettet din første webside med succes! Fordi dette er en begyndervejledning, vil jeg gøre din første oplevelse med HTML til en fornøjelig oplevelse. Den bedste måde at lære i min erfaring er at dykke ned og prøve tingene på, se hvad du kan gøre med din kode og også se, hvordan du kan bryde din kode. Dette opbygger integritet og hjælper dig med bedre at forstå, hvordan og hvorfor koden fungerer, som den gør. Husk, at www. W3Schools.com er en god ressource til spørgsmål, og de tilbyder endda en virtuel sandkasse i browseren for at prøve din kode. Forhåbentlig har du lært noget og glad for kodning!