Sådan oprettes en simpel webside med HTML: 9 trin (med billeder)

ThisTeaches dig, hvordan du skriver en simpel webside med HTML (HyperText Markup Sprog). HTML er en af kernekomponenterne i World Wide Web, og udgør opbygningen af websider. Når du har oprettet din webside, kan du gemme den som et HTML-dokument og se det i din webbrowser. Oprettelse af en HTML-side er mulig ved hjælp af grundlæggende tekstredaktører, der findes på både Windows og Mac-computere.

Trin

Del 1 af 6:

Tilføjelse af et hoved til din HTML

1. Åbn en teksteditor. På en computer, der kører Windows-operativsystemet, bruger du normalt Notepad eller Notepad ++, mens MacOS-brugere vil bruge TextEdit, og Chromeos-brugere bruger tekst:

Windows - Åben Start

, indtaste Notepad, eller Notepad++ og klik Notepad eller "Notepad ++ eller sublime" På toppen af vinduet.

MacOSer - Klik Spotlight

, indtaste TextEdit, og dobbeltklik på TextEdit Øverst på resultaterne.

Chromeos - Åbn launcher, og klik derefter på Tekst. (Ikonet siger kodepude).

2. Indtaste og presse ↵ ENTER. Dette fortæller webbrowseren, at dette er et HTML-dokument.

3. Type og tryk på ↵ ENTER. Dette åbningsmærke til din HTML-kode.

4. Indtast og tryk på ↵ ENTER. Dette er mærket, der åbner dit HTML-hoved. HTML-hovedinformationen, der normalt ikke vises på din webside. Disse oplysninger kan omfatte titel, meta data, CSS Style Sheets og andre scripting sprog.

5. Indtaste . Dette er mærket for at tilføje en titel til din side.

6. Skriv en titel til din webside. Dette kan være en hvilken som helst titel, du vil nævne din webside.

7. Indtast og tryk på ↵ ENTER. Dette er mærket for at lukke dit titelmærke.

8. Type og tryk på ↵ ENTER. Dette er mærket for at lukke hovedet. Din HTML-kode skal se sådan ud.

Del 2 af 6:

Tilføjelse af en krop og tekst til din HTML

1. Skriv ind under lukket "Hoved" Tag. Dette mærke åbner kroppen af dit HTML-dokument. Alt, der går i HTML-kroppen, vises på websiden.

2. Indtaste . Dette er mærket for at tilføje en overskrift til dit HTML-dokument. En overskrift er stor fed tekst, der typisk går øverst på dit HTML-dokument.

3. Indtast en overskrift til din side. Dette kan være titlen på din side eller en hilsen.

4. Skriv efter din overskriftstekst og tryk på ↵ ENTER. Dette mærke lukker din overskrift.

Tilføj ekstra overskrifter, mens du går. Der er seks forskellige overskrifter, som du kan oprette ved at bruge de gennem tags. Disse skaber overskrifter af forskellige størrelser. For eksempel at skabe tre forskellige mellemstore overskrifter i rækkefølge, kan du skrive følgende:

Overskrifterne viser tekstenes prioritet eller betydning. Men det er ikke nødvendigt at bruge en højere overskrift, hvis du vil bruge lavere overskrift. Man kan direkte bruge H3, selvom der ikke er nogen H1 i dit indlæg.

5. Type . Dette er mærket for at åbne et afsnit. Stykketekst bruges til at vise normal størrelse tekst.

6. Skriv nogle tekst. Dette kan være en beskrivelse af din webside eller andre oplysninger, du ønsker at dele.

7. Skriv efter din tekst og tryk på ↵ ENTER. Dette er mærket til at lukke dit stykke tekst. Følgende er et eksempel på afsnittekst i HTML:

Du kan tilføje flere afsnit linjer i træk for at oprette en række afsnit under en overskrift.

Du kan ændre farven på enhver tekst ved at ramme teksten med og tags. Sørg for at skrive din foretrukne farve i "farve" sektion (du vil holde citaterne). Du kan slå enhver tekst (E.G., overskrifter) i en anden farve med dette sæt af tags. For eksempel at vende et afsnits tekstblå, ville du skrive følgende kode: Hvaler er majestætiske skabninger.

Du kan tilføje modige, kursiv og andre tekstformater ved hjælp af HTML.Følgende er eksempler på, hvordan du kan formatere tekst ved hjælp af HTML-tags:

Hvis du bruger fed og kursiv tekst til vægt, ikke kun til styling, brug og elementer i stedet for og . Dette gør din webside lettere at forstå, når du bruger teknologier som en skærmlæser eller læsertilstanden, der findes i nogle browsere.

Del 3 af 6:

Tilføjelse af yderligere elementer til din HTML

1. Tilføj et billede til din side. Du kan tilføje et billede til din HTML ved hjælp af følgende trin:

Type For at åbne dit billedmærke.
Kopier og indsæt billedadressen efter "=" Log ind citatmærker.
Type > Efter billedwebadressen for at lukke dit billedmærke. For eksempel, hvis billedets webadresse er "http: // mit billede.com / lake", Du ville skrive følgende:

2. Link til en anden side. Du kan tilføje et link til din HTML ved hjælp af følgende trin:

Type For at åbne dit link tag.

Kopier og indsæt URL efter "=" Log ind citatmærker.

Type > efter webadressen for at lukke linkdelen af HTML`en.

Indtast et navn for linket efter lukkekonsollen.

Skriv efter linknavnet for at lukke HTML-linket. Følgende er et eksempel på et link til Facebook.

3. Tilføj en linjeafbrydelse til din HTML. Du kan tilføje en linjeafbrydelse ved at skrive til din HTML. Dette skaber en vandret linje, der kan bruges til at opdele forskellige sektioner på din side.

Del 4 af 6:

Tilpasning af farver

1. Tjek listen over officielle HTML-farvebilleder og koder. World Wide Web Consortium (W3C) forvalter en officiel liste over farver, som du finder på https: // W3.Org / Wiki / CSS / Egenskaber / Farve / Nøgleord. Hver farve har et officielt navn, 6-cifret hexadecimal kode og en decimal værdi. Du kan bruge nogen af disse værdier til at tilføje farve til elementer på din webside. For dette eksempel bruger vi de officielle farve navne.

2. Indstil baggrundsfarven i tagget. Du vil gøre dette ved at tilføje stil Attribut til tagget. Lad os sige, at du ønskede at lave baggrundsfarven på hele siden Lavendel:

3. Indstil tekstfarven til ethvert mærke. Du kan også bruge stil Attribut for at angive hvilken farve du gerne vil have al tekst inden for et bestemt tag til at være. For eksempel lad os sige, at du ønskede at lave teksten i et af dine tags midnightblue:

Farveændringen påvirker kun teksten inden for den pågældende tag. Hvis du starter en anden tag senere, skal det også være midnightblue, Du bliver nødt til at indstille stilattributten der også.

4. Indstil baggrundsfarven for et overskrift eller afsnit. Ligesom hvordan du indstiller baggrundsfarven til kroppen, kan du også indstille baggrundsfarver til andre tags. Lad os sige, at du ønskede at lave baggrundsfarven på en lysegrå, og baggrundsfarven på en H1-stil header LightSkyBlue, du vil bruge:

Del 5 af 6:

Lukker dit HTML-dokument

1. Type for at lukke din krop. Når du er færdig med at tilføje al din tekst, billeder og andre elementer til kroppen af dit HTML-dokument, skal du tilføje dette mærke nederst i dit HTML-dokument for at lukke kroppen af dit HTML-dokument.

2. Skriv for at lukke dit HTML-dokument. Dette mærke går under mærket for at lukke dit HTML-krop i slutningen af dit HTML-dokument. Dette fortæller webbrowseren, at der ikke er mere HTML-kode efter dette mærke. Dit hele HTML-dokument skal se sådan ud:

Del 6 af 6:

Gemmer og åbning af din webside

1. Konverter dit dokument til almindelig tekst (kun MAC-brugere). Klik på Format Menupunkt øverst på skærmen, og klik derefter på Gør almindelig tekst I den resulterende rullemenu.

Dette trin er hverken nødvendigt eller muligt på Windows.

2. Klik Fil. Det er i menulinjen øverst på skærmen.

3. Klik Gem som. Det er i rullemenuen nedenfor "Fil".

Alternativt kan du trykke på Ctrl+S (Windows) eller ⌘ kommando+S (Mac) at gøre det.

4. Indtast et navn til dit HTML-dokument. Indtast hvad du vil nævne dit dokument i "Filnavn" (Windows) eller "Navn" (Mac) tekstboks.

5. Skift dokumentets filtype. Du skal ændre dokumentet fra en tekstfil til en HTML-fil. Brug følgende trin til at ændre filtypen:

Windows - Klik på "Gem som Type" Drop-down boks, klik Alle filer, og derefter skrive .html I slutningen af filens navn.

MacOSer - Udskift .txt I slutningen af filens navn med .html i stedet.

Chromeos - Klik på "Gem som" knap. Navngiv filen med .html i slutningen. Begyndelsen er op til dig.

6. Klik Gemme. Det er i bunden af vinduet. Gør det, vil oprette en HTML-fil.

HTML-filer åbner typisk med din standard webbrowser.

7. Luk din teksteditor. På dette tidspunkt er du klar til at åbne din HTML-fil i din browser, så du kan se din webside.

8. Åbn HTML-dokumentet med din browser. I de fleste tilfælde kan du dobbeltklikke på HTML-dokumentet for at gøre dette. Hvis du vil klikke på dokumentet med resultater i en fejl, skal du gøre følgende:

Windows - Højreklik på dokumentet, vælg Åben med, og klik på din foretrukne browser.

Mac - Klik på dokumentet en gang, klik på Fil, Vælg Åben med, og klik på din foretrukne browser.

9. Rediger HTML-dokumentet, hvis det er nødvendigt. Du kan bemærke en fejl på din HTML-side. For at ændre det kan du redigere HTML-dokumentets tekst:

På Windows kan du højreklikke på dokumentet og klikke på Redigere I den resulterende rullemenu (hvis du har notesblok ++ installeret, vil dette sige Rediger med notesblok++ i stedet).

På Mac vil du gerne klikke på dokumentet for at vælge det, klik på Fil, Vælg Åben med, og klik TextEdit. Du kan også trække dokumentet til TextEdit.

På Chromebook skal du lukke tekstappen, åbne filer, find din fil, og klik derefter på den.

Prøve HTML

Html cheat sheet

Sample webside med HTML

Video.

Ved at bruge denne service kan nogle oplysninger deles med YouTube.

Tips

Tags skal altid lukkes i et spejlbillede af deres åbne modparter. For eksempel, bør lukkes som .

Du kan tilføje side-scrolling tekst til dit websted ved hjælp af tagget, men husk på, at dette tag ikke kan genkendes af nogle browsere.

Mange mennesker Brug notesblok++ at skrive og kompilere deres kode.

Hvis du vil centrere et billede på din side, kan du skrive efter billedets navn i img Tag (for eksempel).

Advarsler

Det er bedst at være vært for dine egne billeder på Imgur eller lignende, hvis du planlægger at uploade billeder til din webside. Udstationering af andres billeder kan resultere i krænkelse af ophavsret.

Del på sociale netværk :

Sådan oprettes en simpel webside med html

Trin

Prøve HTML

Video.

Tips

Advarsler