Bare Bones webside: 10 trin

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

I dag skal vi oprette en meget enkel, barben webside fra bunden. Vi vil tale om HTML -elementer, styling af din webside (farver, skrifttyper, justering osv.), Og endelig hvordan du indsætter et billede på din webside!

Ved afslutningen af denne instruktive vil du have de grundlæggende færdigheder til at oprette en webside fra bunden og opdage, at kodning ikke er så svært som det ser ud til!

Trin 1: Brug af Notesblok

Vi vil bruge Notepad på Windows til at oprette vores første webside. Selvom enhver tekstredigerer vil gøre det, kommer notesblok forudinstalleret på Windows-maskiner, så det er et godt udgangspunkt.

For at åbne notesblok skal du gå til din søgelinje i nederste venstre hjørne af din skærm og skrive "Notesblok". Vælg derefter programmet "Notesblok", der vises i søgeresultaterne. Et nyt vindue skal åbne.

Trin 2: Tilføjelse af det grundlæggende HTML -dokumenttræ

Alle websider skal følge en standard skeletstruktur, for at din webbrowser (Chrome, Firefox, Edge, Internet Explorer, Safari …) kan behandle og vise din webside.

Dette kaldes html -dokumenttræet. I Notesblok skal du skrive html "elementer" eller "tags" som vist på skærmbilledet. Du er også velkommen til at kopiere og indsætte:

Trin 3: Gem som en.html -side

Nu hvor vi har vores grundlæggende html -struktur i Notesblok, lad os gemme den, så vi ikke mister noget arbejde, og så vi kan se vores ændringer, når vi skrider frem langs Instructable.

1. Vælg 'Fil'> 'Gem som …' (Skærmbillede 1)
2. Skift filtypen til 'Alle filer' (skærmbillede 2)
3. Giv din fil et navn efter eget valg. Sørg for at notere, hvor du gemmer dokumentet på din computer, så du kan åbne det senere. BEMÆRK: Den vigtigste del ved at gemme denne fil er at tilføje ".html" til slutningen af filnavnet. Dette gør det muligt for din computer at genkende den som en webside. Så hvis du vil navngive din fil "min_webside", skal du sørge for at tilføje.html til slutningen af det, f.eks. "min_webside.html"

Trin 4: Tilføjelse af en titel til din webside

Så vi har den grundlæggende html -struktur, der er nødvendig for, at webbrowsere kan fortolke og vise vores webside, men vi har ikke noget indhold. Lad os ændre det!

Den første ting, vi skal gøre, er at give en titel til vores webside. Næsten alle websider har en titel. Dette er, hvad der vises på fanen i din webbrowser (se skærmbillede). Jeg vil give min webside titlen "Taylors websted". For at gøre dette skal vi tilføje et 'titel' -element.

Taylors websted

På dette tidspunkt vil du bemærke, at hvert mærke har et "åbnings" -tag og et "lukkende" mærke. Såsom

og.

Dette er for at se, hvor titlen starter, og hvor den ender. Næsten alle html -tags følger dette, men der er nogle undtagelser.

Trin 5: Tilføjelse af indhold til din webside

Godt, vi har en titel til vores webside, men vi har stadig ikke noget egentligt indhold til det. Lad os tilføje noget flair!

Vi har tilføjet en titel til vores webside ved hjælp af et 'titel' -element. Lad os give vores webside et stort, opsigtsvækkende overskrift ved hjælp af et 'h1' -element, som er et overskriftselement.

Taylors websted

Velkommen til min webside

Trin 6: Se vores ændringer indtil nu

Vi har en titel, vi har noget indhold, lad os tjekke vores webside, hvordan det kommer så langt.

1. Gem din fil i notesblok
2. Gå til det sted, hvor du gemte din fil, og dobbeltklik på den. Den skal automatisk åbne i din standardwebbrowser. Ser godt ud!

Trin 7: Tilføjelse af et afsnitsmærke

Vi har en titel, en overskrift, lad os nu tilføje et afsnit med lidt mere tekst. Elementnavnet for et afsnit er 'p'. Du kan se brugen herunder:

Taylors websted

Velkommen til min webside

I dag vil vi lære at oprette denne meget enkle webside!

Bemærk: Du kan når som helst se dine ændringer ved at gemme notesblok og åbne filen.

Trin 8: Giv det lidt farve

Vi har vores webside rullende lige ved siden af, men det er ret almindeligt. Lad os give vores afsnitstegn noget farve!

Vi kan farve forskellige elementer ved at tilføje en 'style' -attribut til' p' -tagget som beskrevet nedenfor:

Taylors websted

Velkommen til min webside

I dag vil vi lære at oprette denne meget enkle webside!

Trin 9: Tilføjelse af et billede

Hvad er et websted uden billeder? Lad os tilføje et billede til vores websted!

Første trin er at finde et billede, du kan lide. Jeg brugte google -billeder til at søge efter en golden retriever. Træk billedet op, og sørg for, at url ender med.jpg,.png,.gif,-j.webp

Når du har valgt dit billede, skal vi føje det til html -siden ved hjælp af et 'img' -tag. Mit billede er:

Føj den til din side ved hjælp af et 'img' tag med en 'src' attribut:

Taylors websted

Velkommen til min webside

I dag vil vi lære at oprette denne meget enkle webside!

Trin 10: Visning af det endelige produkt

Gem notesblokfilen, og åbn det endelige produkt. Du bør se din webside!