Hoe maak je een eenvoudige webpagina met html

In dit artikel zullen we u vertellen hoe u een eenvoudige webpagina kunt maken met behulp van een HTML-code. HTML is een van de belangrijkste componenten van internet omdat het de structuur van webpagina`s aangeeft. Webpagina die u kunt maken in een teksteditor die zich in Windows of MacOS bevindt.

Stappen

Deel 1 van 6:
Hoe TOER "HOOFD" toevoegen (beschrijving van de webpagina)
  1. Titel afbeelding 4082 1 1
een. Open teksteditor. Voer in Windows de Kladblok of Notepad ++ uit en in MacOS - Textedit:
  • ramen - Open het startmenu
Titel afbeelding Windowsstart.jpg
, Voer de zoekreeks in notitieboekje of Kladblok++, En klik vervolgens op "Notepad" of "Notepad ++" aan de bovenkant van het menu "Start".
  • MacOS - Klik op "Spotlight"
    Titel afbeelding Macspotlight.jpg
    , Binnenkomen Textedit, En dubbelklik vervolgens op "Textedit" aan de bovenkant van de zoekresultaten.
  • Titel afbeelding 4082 2 1
    2. Binnenkomen en druk op ↵ Enter. Dus u informeert de webbrowser dat dit een HTML-document is.
  • Titel afbeelding 4082 3 1
    3. Binnenkomen en druk op ↵ Enter. Dit is het opening HTML-code-tag.
  • Titel afbeelding 4082 4 1
    4. Binnenkomen en druk op ↵ Enter. Deze tag bevat een beschrijving van een webpagina en header-elementen. De inhoud van deze tag op de pagina wordt meestal niet weergegeven. Inhoud is de beschrijving van de pagina, metadata, CSS-stijlentabellen en andere scriptalen.
  • Titel afbeelding 4082 5 1
    vijf. Binnenkomen . Deze tag bevat de naam van de pagina.
  • Titel afbeelding 4082 6 1
    6. Voer de naam van de pagina in. Voer de tekst in die moet worden weergegeven op het tabblad Pagina.
  • Titel afbeelding 4082 7 1
    7. Binnenkomen en druk op ↵ Enter. Deze tag sluit de pagina Naamplaatje.
  • Titel afbeelding 4082 8 1
    acht. Binnenkomen en druk op ↵ Enter. Deze tag sluit de pagina Beschrijving Tag. In dit stadium moet de HTML-code er zo uitzien.
    Mijn webpagina
    • Deel 2 van 6:
    Hoe voegt u "BODY" -tag (alle inhoud) toe
    1. Titel afbeelding 4082 9 1
    een. Voer tag in onder de slotlabel "Head". Deze tag bevat de volledige inhoud van het HTML-document. Inhoud Deze tag wordt weergegeven op een webpagina.
  • Titel afbeelding 4082 10 1
    2. Binnenkomen . Deze tag bevat een paginatitel. De titel is een grote tekst die zich meestal boven aan de pagina bevindt.
  • Titel afbeelding 4082 11 1
    3. Voer de paginatitel in. Het kan de naam zijn van de pagina of begroeting.
  • Titel afbeelding 4082 12 1
    4. Binnenkomen Na de tekst van de kop en klik ↵ Enter. Deze tag sluit de titel-tag.
  • Voeg indien nodig extra krantenkoppen toe. U kunt maximaal zes headers maken - dit gebeurt met behulp van tags -
    . Headlines hebben verschillende maten. De code voor het maken van drie krantenkoppen van verschillende maten is bijvoorbeeld:
    Welkom op mijn pagina!Mijn naam is Max.Ik hoop dat je het niet saai zult zijn.
  • Titel afbeelding 4082 13 1
    vijf. Binnenkomen . Deze tag bevat een tekstparagraaf. Een dergelijke tag geeft de tekst van de normale grootte weer.
  • Titel afbeelding 4082 14 1
    6. Voer de tekst in. Voer bijvoorbeeld een webpagina-beschrijving of andere informatie in.
  • Titel afbeelding 4082 15 1
    7. Binnenkomen Na tekst en klik ↵ Enter. Deze tag sluit de Tekst Paragraaf-tag. Hieronder is een voorbeeld van paragraaf in HTML-document:
    Dit is de eerste alinea.
  • Voeg een paar rijen op een rij om verschillende alinea`s te maken.
  • Verander de kleur van de tekst. Voer aan het begin van de tekst de tag in , En aan het einde van de tag . In plaats van het woord "Kleur" Vervang de gewenste kleur (in het Engels) en verwijder geen offertes. Met deze tags kunt u de kleur van elke tekst wijzigen (bijvoorbeeld header). Om tekstblauw bijvoorbeeld te maken, voert u de volgende code in:

    Walvissen - Majestueuze dieren.

  • Ook kan het lettertype gedurfd, geneigd en andere worden gemaakt. Hieronder staan ​​voorbeelden van tekstopmaak met behulp van HTML-tags:
     Vetgedrukte teksttekst  Substitueerde tekst  Gevoerde tekst
    • Deel 3 van 6:
    Hoe extra items toe te voegen
    1. Titel afbeelding 4082 16 1
    een. Voeg een afbeelding toe aan de pagina. Voor deze:
    • Binnenkomen . Deze tag bevat een foto.
    • Kopieer en plak de URL van de foto na het gelijkheidsteken (=) in aanhalingstekens.
    • Binnenkomen > Na de URL-afbeelding om het beeldlabel te sluiten. Als de URL-afbeelding bijvoorbeeld http: // www is.Myimage.Com / oceaan.JPG, voer de volgende code in:
     SRC ="http: // Myimage.Com / oceaan.JPG">
  • Titel afbeelding 4082 17 1
    2. Voeg een link toe aan een andere webpagina. Voor deze:
  • Binnenkomen . Deze tag bevat een link naar een andere pagina.
  • Kopieer en plak de URL na het gelijkheidsteken (=) in aanhalingstekens.
  • Binnenkomen > Na de URL om het adres te sluiten.
  • Voer de koppelingstekst in na het symbool ">".
  • Binnenkomen Na tekstlink om de link-tag te sluiten. Hieronder is een voorbeeld van verwijzing naar Yandex.
     href ="HTTPS: // Ya.Ru"> Yandex.
  • Titel afbeelding 4082 18 1
    3. Voeg een string-kloof toe. Om dit te doen, voert u binnen
    . Rijoverdracht wordt ingevoegd. Deze tag kan worden gebruikt om de verschillende partities van de pagina te scheiden.
    • Deel 4 van 6:
    Hoe kleuren te veranderen
    1. Titel afbeelding 4082 19 3
    een. Neem contact op met uw officiële lijst met kleuren en hun codes in HTML-kleur. World Wire Consortium (W3C) leidt een officiële lijst met kleuren die te vinden is op HTTPS: // W3.Org / Wiki / CSS / Eigenschappen / Kleur / Trefwoorden. Elke kleur heeft een formele naam, 6-cijferige hexadecimale code en decimaal. U kunt een van deze parameters gebruiken om de kleur van de items op uw pagina in te stellen. In dit voorbeeld nemen we de officiële namen van de kleuren.
  • Titel afbeelding 4082 20 3
    2. Zet de achtergrondkleur met behulp van de tag . Om dit te doen, moet u een kenmerk aan de tag toevoegen Stijl. Stel dat je de achtergrond van de hele pagina wilt maken lavendel (Lavend):
  • Titel afbeelding 4082 21 3
    3. Stel tekstkleur in voor elke tag. Attribuut Stijl U kunt ook gebruiken om aan te geven welke kleur de volledige tekst binnen een specifieke tag is. U wilt bijvoorbeeld tekst binnen een van uw tags was Middernacht blauw (Donkerblauw):
  • Kleurwijziging zal alleen tekst binnen deze tag raken . Als u later een nieuwe tag opent , waar tekst ook kleur moet hebben Middernacht blauw, Het attribuut "Stijl" moet hem vragen.
  • Titel afbeelding 4082 22 3
    4. Stel de kleurenachtergrond in voor de kop of alinea. Net zoals u de achtergrondkleur voor het lichaamstag opgeeft, kunt u de achtergrondkleuren kiezen voor andere tags. U wilt bijvoorbeeld de achtergrondkleur was Lichtgrijs (lichtgrijs), en de kleur van de koptekst van H1 - Lightyblue (lichtblauw):
    • Deel 5 van 6:
    Hoe HTML-code te sluiten
    1. Titel afbeelding 4082 19 1
    een. Binnenkomen , Om het tag "lichaam" te sluiten. Wanneer u klaar bent met het toevoegen van tekst, afbeeldingen en andere items, voert u de opgegeven tag in onder aan het HTML-document.
  • Titel afbeelding 4082 20 1
    2. Binnenkomen , Om de HTML-code te sluiten. Voer deze tag in onder het slotlabel "Lichaam". Dus u informeert de webbrowser die nadat deze tag HTML-code niet is. Alle HTML-code moet ongeveer zijn:
    Yandex fan paginaGroeten aan u op mijn pagina"http: // Ya.Ru"> Yandex
    • Deel 6 van 6:
    Hoe een webpagina op te slaan en te openen
    1. Titel afbeelding 4082 21 1
    een. Converteer het document naar de normale tekst (alleen voor gebruikers van MacOS). Klik op "Formatteren" (bovenaan het scherm)> "Een eenvoudige tekst maken" (in het vervolgkeuzemenu).

    Het is onmogelijk om niet te doen in Windows.

  • Titel afbeelding 4082 22 1
    2. Klik Bestand. Deze optie bevindt zich in de menubalk aan de bovenkant van het scherm.
  • Titel afbeelding 4082 23 1
    3. Klik op Opslaan als. U vindt deze optie in het menu Bestand.
  • U kunt ook klikken Ctrl+S (Windows) of ⌘ Commando+S (Mac).
  • Titel afbeelding 4082 24 1
    4. Voer de naam van het HTML-document in. Voer het in de string "Bestandsnaam" (Windows) of "NAAM" (MAC).
  • Titel afbeelding 4082 25 1
    vijf. Wijzig het bestandsindeling met txt op html. Voor deze:
  • ramen - Klik op het menu "Bestandstype", selecteer "Alle bestanden" en voer vervolgens in .HTML Aan het einde van de bestandsnaam.
  • MacOS - Aan het einde van de bestandsnaam in plaats daarvan .TEKSTBinnenkomen .HTML.
  • Titel afbeelding 4082 26 1
    6. Klik op Sparen. Deze optie bevindt zich aan de onderkant van het venster. HTML-bestand wordt gemaakt.
  • Meestal open HTML-bestanden in de standaardwebbrowser.
  • Titel afbeelding 4082 27 1
    7. Sluit teksteditor. Open nu het HTML-bestand in de browser waarin u de gemaakte webpagina kunt bekijken.
  • Titel afbeelding 4082 28 1
    acht. Open het HTML-bestand in de browser. Om dit te doen, dubbelklikt u op het HTML-bestand. Als een fout is op de hoogte gebracht, doet u het volgende:
  • ramen - Klik op het rechtermuisknop-bestand, selecteer "Openen" en klik vervolgens op de gewenste browser.
  • MacOS - Klik op het bestand, klik op het "Bestand", selecteer "Openen met" en selecteer vervolgens de gewenste browser.
  • Titel afbeelding 4082 29 1
    negen. Bewerk HTML-document (indien nodig). Mogelijk merkt u een fout op de pagina. Als u het wilt oplossen, wijzigt u wijzigingen in de inhoud van het HTML-bestand:
  • Klik in Windows op het bestand met de rechtermuisknop en selecteer "Bewerken" (als Kladblok ++ op de computer is geïnstalleerd, selecteert u de optie "Bewerken in Notepad ++".
  • Klik op het MacOS-bestand, klik op "Bestand", selecteer "Openen met" en klik op "Textedit". Sleep nu het HTML-bestand naar het Textryit-venster.

    • Tips

    • U kunt een zijstrip van schuiftekst toevoegen met behulp van een tag .Maar vergeet niet dat sommige browsers deze tag niet herkennen.
    • Veel mensen gebruiken Notepad ++ om de code te schrijven en compileren.
    • Elke tag moet sluiten. Bijvoorbeeld tags Het moet zo worden gesloten: .
    • Om de afbeelding op de pagina te verduidelijken, voert u in Na de naam van de afbeelding in de "Img" -tag (bijvoorbeeld, ).

    Waarschuwingen

    • Laad je foto`s naar Imgur of vergelijkbaar als je ze aan je webpagina gaat toevoegen. Vergeet niet dat het gebruik van foto`s die behoren tot andere mensen het auteursrecht schendt.
    Deel in het sociale netwerk:
    Vergelijkbaar