Inhoudsopgave:
- Stap 1: Kladblok gebruiken
- Stap 2: De basis HTML-documentstructuur toevoegen
- Stap 3: Opslaan als.html-pagina
- Stap 4: Een titel toevoegen aan uw webpagina
- Stap 5: Inhoud toevoegen aan uw webpagina
- Welkom op mijn webpagina
- Stap 6: Onze wijzigingen tot nu toe bekijken
- Stap 7: Een alineatag toevoegen
- Welkom op mijn webpagina
- Stap 8: Geef het wat kleur
- Welkom op mijn webpagina
- Stap 9: Een afbeelding toevoegen
- Welkom op mijn webpagina
- Stap 10: Het eindproduct bekijken
Video: Bare Bones-webpagina - Ajarnpa
2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:18
Vandaag gaan we een heel eenvoudige, kale webpagina helemaal opnieuw maken. We zullen het hebben over HTML-elementen, het stylen van uw webpagina (kleuren, lettertypen, uitlijning, enz.), en tot slot hoe u een afbeelding in uw webpagina kunt invoegen!
Aan het einde van deze instructable heb je de basisvaardigheden om helemaal opnieuw een webpagina te maken en ontdek je dat coderen niet zo moeilijk is als het lijkt!
Stap 1: Kladblok gebruiken
We gaan Kladblok op Windows gebruiken om onze eerste webpagina te maken. Hoewel elke teksteditor het zal doen, is Kladblok vooraf geïnstalleerd op Windows-machines, dus het is een goed startpunt.
Om Kladblok te openen, gaat u naar uw zoekbalk in de linkerbenedenhoek van uw scherm en typt u "Kladblok". Selecteer vervolgens de toepassing "Kladblok" die in de zoekresultaten verschijnt. Er zou een nieuw venster moeten openen.
Stap 2: De basis HTML-documentstructuur toevoegen
Alle webpagina's moeten een standaard skeletstructuur volgen zodat uw webbrowser (Chrome, Firefox, Edge, Internet Explorer, Safari…) uw webpagina kan verwerken en weergeven.
Dit wordt de html-documentboom genoemd. Typ in Kladblok de html "elementen" of "tags" zoals weergegeven in de schermafbeelding. Kopieer en plak ook gerust:
Stap 3: Opslaan als.html-pagina
Nu we onze basis-html-structuur in Kladblok hebben, laten we deze opslaan zodat we geen werk verliezen en zodat we onze wijzigingen kunnen zien terwijl we verder gaan met de Instructable.
- Selecteer 'Bestand' > 'Opslaan als…' (Screenshot 1)
- Wijzig het bestandstype in 'Alle bestanden' (screenshot 2)
- Geef uw bestand een naam naar keuze. Zorg ervoor dat u noteert waar u het document op uw computer opslaat, zodat u het later kunt openen. OPMERKING: Het belangrijkste onderdeel van het opslaan van dit bestand is het toevoegen van ".html" aan het einde van de bestandsnaam. Hierdoor kan uw computer het herkennen als een webpagina. Dus als u uw bestand "mijn_webpagina" wilt noemen, zorg er dan voor dat u.html aan het einde daarvan toevoegt, b.v. "mijn_webpagina.html"
Stap 4: Een titel toevoegen aan uw webpagina
We hebben dus de basis html-structuur die nodig is voor webbrowsers om onze webpagina te interpreteren en weer te geven, maar we hebben geen inhoud. Laten we dat veranderen!
Het eerste wat we moeten doen is een titel aan onze webpagina geven. Bijna alle webpagina's hebben een titel. Dit wordt weergegeven op het tabblad in uw webbrowser (zie screenshot). Ik ga mijn webpagina de titel "Taylor's Website" geven. Om dit te doen, moeten we een 'titel'-element toevoegen.
Taylor's website
Op dit punt zult u merken dat elke tag een "openings"-tag en een "sluitings"-tag heeft. Zoals
en.
Dit is om te onderscheiden waar de titel begint en waar deze eindigt. Bijna alle html-tags volgen dit, maar er zijn enkele uitzonderingen.
Stap 5: Inhoud toevoegen aan uw webpagina
Welnu, we hebben een titel voor onze webpagina, maar we hebben er nog steeds geen echte inhoud voor. Laten we wat flair toevoegen!
We hebben een titel aan onze webpagina toegevoegd met behulp van een 'titel'-element. Laten we onze webpagina een grote, opvallende header geven door een 'h1'-element te gebruiken dat een header-element is.
Taylor's website
Welkom op mijn webpagina
Stap 6: Onze wijzigingen tot nu toe bekijken
We hebben een titel, we hebben wat inhoud, laten we eens kijken op onze webpagina hoe het tot nu toe gaat.
- Sla uw bestand op in Kladblok
- Ga naar waar je je bestand hebt opgeslagen en dubbelklik erop. Het zou automatisch moeten openen in uw standaardwebbrowser. Ziet er goed uit!
Stap 7: Een alineatag toevoegen
We hebben een titel, een kop, laten we nu een alinea toevoegen met wat meer tekst. De elementnaam voor een alinea is 'p'. Je kunt het gebruik hieronder zien:
Taylor's website
Welkom op mijn webpagina
Vandaag zullen we leren hoe we deze zeer eenvoudige webpagina kunnen maken!
Opmerking: u kunt uw wijzigingen op elk gewenst moment bekijken door Kladblok op te slaan en het bestand te openen.
Stap 8: Geef het wat kleur
We hebben onze webpagina aan het rollen, maar het is vrij eenvoudig. Laten we onze alinea-tag wat kleur geven!
We kunnen verschillende elementen kleuren door een 'style' attribuut toe te voegen aan de 'p' tag, zoals hieronder beschreven:
Taylor's website
Welkom op mijn webpagina
Vandaag zullen we leren hoe we deze zeer eenvoudige webpagina kunnen maken!
Stap 9: Een afbeelding toevoegen
Wat is een website zonder afbeeldingen? Laten we een foto toevoegen aan onze website!
De eerste stap is om een afbeelding te vinden die je leuk vindt. Ik gebruikte google afbeeldingen om te zoeken naar een golden retriever. Trek de afbeelding omhoog en zorg ervoor dat de url eindigt op.jpg,.png,.gif,.jpg, etc.
Nadat u uw afbeelding heeft gekozen, moeten we deze toevoegen aan de html-pagina met behulp van een 'img'-tag. Mijn afbeelding is:
Voeg het toe aan uw pagina met behulp van een 'img'-tag met een 'src'-attribuut:
Taylor's website
Welkom op mijn webpagina
Vandaag zullen we leren hoe we deze zeer eenvoudige webpagina kunnen maken!
Stap 10: Het eindproduct bekijken
Sla het Kladblok-bestand op en open het eindproduct. Je zou je webpagina moeten zien!