Hoe maak je een eenvoudige webpagina met html

ThisTeaches u hoe u een eenvoudige webpagina kunt schrijven met HTML (Hypertext Markup Language). HTML is een van de kerncomponenten van het World Wide Web, dat de structuur van webpagina`s maakt. Nadat u uw webpagina hebt gemaakt, kunt u deze opslaan als een HTML-document en deze in uw webbrowser bekijken. Het maken van een HTML-pagina is mogelijk met behulp van basistekstractors gevonden op zowel Windows- als Mac-computers.

Stappen

Deel 1 van 6:
Een kop toevoegen aan uw HTML
  1. Titel afbeelding 4082 1 2
1. Open een teksteditor. Op een computer die het Windows-besturingssysteem uitvoert, gebruikt u meestal notitieblok of Notepad ++, terwijl MacOS-gebruikers Textedit en Chromeos-gebruikers zullen gebruiken, sms`en:
  • ramen - Open Begin
Titel afbeelding Windowsstart.jpg
, typ in kladblok, of kladblok++ en klik Kladblok of "Notepad ++ of subliem" Aan de bovenkant van het venster.
  • macos - Klik Spotlight
    Titel afbeelding Macspotlight.jpg
    , typ in Textedit, en dubbelklik Textedit Aan de top van de resultaten.
  • Chromeos - Open Launcher en klik vervolgens op Tekst. (Het pictogram zegt codepad).
  • Titel afbeelding 4082 2 2
    2. Typ in en druk op ↵ ENTER. Dit vertelt de webbrowser dat dit een HTML-document is.
  • Titel afbeelding 4082 3 2
    3. Typ en druk op ↵ ENTER. Deze openingstag voor uw HTML-code.
  • Titel afbeelding 4082 4 2
    4. Typ in en druk op ↵ ENTER. Dit is de tag die uw HTML-kop opent. De HTML-hoofdinformatie die niet wordt weergegeven op uw webpagina. Deze informatie kan omvatten, de titel, meta-gegevens, CSS-stijlbladen en andere script-talen.
  • Titel afbeelding 4082 5 2
    5. Typ in . Dit is de tag om een ​​titel aan uw pagina toe te voegen.
  • Titel afbeelding 4082 6 2
    6. Typ een titel voor uw webpagina. Dit kan elke titel zijn die u uw webpagina wilt noemen.
  • Titel afbeelding 4082 7 2
    7. Typ in en druk op ↵ ENTER. Dit is de tag om uw titel-tag te sluiten.
  • Titel afbeelding 4082 8 2
    8. Type en druk op ↵ ENTER. Dit is de tag om je hoofd te sluiten. Uw HTML-code moet er zoiets uitzien.
    • Deel 2 van 6:
    Een lichaam en tekst toevoegen aan uw HTML
    1. Titel afbeelding 4082 9 2
    1. Typ hieronder onder de gesloten "Hoofd" label. Deze tag opent het lichaam van uw HTML-document. Alles wat in de HTML-lichaamsscherm wordt weergegeven op de webpagina.
  • Titel afbeelding 4082 10 2
    2. Typ in . Dit is de tag om een ​​kop toe te voegen aan uw HTML-document. Een kop is grote gedurfde tekst die meestal bovenaan uw HTML-document gaat.
  • Titel afbeelding 4082 11 2
    3. Typ een kop voor uw pagina. Dit kan de titel van uw pagina of een begroeting zijn.
  • Titel afbeelding 4082 12 2
    4. Typ na uw titeltekst en druk op ↵ ENTER. Deze tag sluit je kop.
  • Voeg extra kopjes toe terwijl je gaat. Er zijn zes verschillende rubrieken die u kunt maken met behulp van de doorgaande tags. Deze creëren rubrieken van verschillende maten. Bijvoorbeeld, om drie verschillende rubrieken achter elkaar te maken, kunt u het volgende schrijven:
  • De koppen toont de prioriteit of het belang van de tekst. Maar het is niet nodig om een ​​hogere kop te gebruiken als u een lagere kop wilt gebruiken. Men kan H3 direct gebruiken, zelfs als er geen H1 in uw bericht is.
  • Titel afbeelding 4082 13 2
    5. Type . Dit is de tag om een ​​alinea te openen. Paragraaftekst wordt gebruikt om de tekst van normale grootte weer te geven.
  • Titel afbeelding 4082 14 2
    6. Typ wat tekst. Dit kan een beschrijving zijn voor uw webpagina of andere informatie die u wilt delen.
  • Titel afbeelding 4082 15 2
    7. Typ na uw tekst en druk op ↵ ENTER. Dit is de tag om de tekst van uw paragraaf te sluiten. Het volgende is een voorbeeld van paragraaftekst in HTML:
  • U kunt meerdere paragraaflijnen op een rij toevoegen om een ​​reeks alinea`s onder één kop te maken.
  • U kunt de kleur van elke tekst wijzigen door de tekst met de en-tags te frampen. Zorg ervoor dat u uw voorkeurskleur in de "kleur" sectie (je zult de citaten behouden). U kunt elke tekst draaien (e.g., headers) in een andere kleur met deze set tags. Als u bijvoorbeeld de tekstblue van een alinea wilt instellen, zou u de volgende code schrijven:

    Walvissen zijn majestueuze wezens.

  • U kunt BOLDS, cursief en andere tekstindelingen toevoegen met HTML.Het volgende zijn voorbeelden van hoe u tekst kunt indelen met behulp van HTML-tags:
  • Als u gedurfde en cursieve tekst gebruikt voor de nadruk, gebruikt u niet alleen voor het stylen, de en-elementen in plaats van en . Dit maakt uw webpagina gemakkelijker te begrijpen bij het gebruik van technologieën zoals een schermlezer of de lezer-modus die in sommige browsers wordt verstrekt.
    • Deel 3 van 6:
    Extra elementen toevoegen aan uw HTML
    1. Titel afbeelding 4082 16 2
    1. Voeg een foto toe aan uw pagina. U kunt een afbeelding toevoegen aan uw HTML met behulp van de volgende stappen:
    • Type Om uw beeldlabel te openen.
    • Kopieer en plak de afbeelding URL na de "=" Aanmelden aanhalingstekens.
    • Type > Na de image-URL om uw afbeelding-tag te sluiten. Als de URL van het beeld bijvoorbeeld is "http: // mijn foto.Com / Lake", Je zou het volgende schrijven:
  • Titel afbeelding 4082 17 2
    2. Link naar een andere pagina. U kunt een link naar uw HTML toevoegen met behulp van de volgende stappen:
  • Type Om uw link-tag te openen.
  • Kopieer en plak URL na de "=" Aanmelden aanhalingstekens.
  • Type > na de URL om het linkgedeelte van de HTML te sluiten.
  • Typ een naam voor de link na de sluitingsbeugel.
  • Typ na de link Name om de HTML-link te sluiten. Het volgende is een voorbeeld van een link naar Facebook.
  • Titel afbeelding 4082 18 2
    3. Voeg een lijnvakantie toe aan uw HTML. U kunt een lijnvakantie toevoegen door typen
    naar uw HTML. Dit creëert een horizontale lijn die kan worden gebruikt om verschillende secties van uw pagina te verdelen.
    • Deel 4 van 6:
    Kleuren aanpassen
    1. Titel afbeelding 4082 19 3
    1. Bekijk de lijst met officiële HTML-kleurnamen en -codes. Het World Wide Web Consortium (W3C) beheert een officiële lijst met kleuren die u zult vinden HTTPS: // w3.Org / Wiki / CSS / Eigenschappen / Kleur / Trefwoorden. Elke kleur heeft een officiële naam, 6-cijferige hexadecimale code en een decimale waarde. U kunt een van deze waarden gebruiken om kleur toe te voegen aan elementen van uw webpagina. Voor dit voorbeeld gebruiken we de officiële kleurnamen.
  • Titel afbeelding 4082 20 3
    2. Stel de achtergrondkleur in de tag in. Je doet dit door het toe te voegen van de stijl attribuut aan de tag. Laten we zeggen dat je de achtergrondkleur van de hele pagina wilde maken lavendel:
  • Titel afbeelding 4082 21 3
    3. Stel de tekstkleur voor elke tag in. Je kunt ook de stijl attribuut om op te geven welke kleur u wilt dat alle tekst binnen een bepaalde tag is. Laten we bijvoorbeeld zeggen dat je de tekst in een van je tags wilde maken middernacht blauw:
  • De kleurverandering heeft alleen invloed op de tekst in die tag. Als je later een andere tag start, zou dat ook moeten zijn middernacht blauw, Je moet het stijlkenmerk daar ook instellen.
  • Titel afbeelding 4082 22 3
    4. Stel de achtergrondkleur in voor een koptekst of paragraaf. Vergelijkbaar met hoe u de achtergrondkleur voor het lichaamstag instelt, kunt u ook achtergrondkleuren instellen voor andere tags. Laten we zeggen dat je de achtergrondkleur van een wilde maken lichtgrijze, en de achtergrondkleur van een H1-stijl header lightyblue, je zou gebruiken:
    • Deel 5 van 6:
    Uw HTML-document sluiten
    1. Titel afbeelding 4082 19 2
    1. Type om je lichaam te sluiten. Nadat u klaar bent met het toevoegen van al uw tekst, afbeeldingen en andere elementen aan het lichaam van uw HTML-document, voegt u deze tag toe onder aan uw HTML-document om de behuizing van uw HTML-document te sluiten.
  • Titel afbeelding 4082 20 2
    2. Type om uw HTML-document te sluiten. Deze tag gaat onder de tag om uw HTML-lichaam aan het einde van uw HTML-document te sluiten. Dit vertelt de webbrowser er is geen HTML-code meer na deze tag. Uw volledige HTML-document moet er zoiets uitzien:
    • Deel 6 van 6:
    Uw webpagina opslaan en openen
    1. Titel afbeelding 4082 21 2
    1. Converteer uw document naar duidelijke tekst (alleen MAC-gebruikers). Klik op de Formaat Menu-item boven aan het scherm, klik vervolgens op Maak gewone tekst In het resulterende vervolgkeuzemenu.
    • Deze stap is niet nodig of mogelijk op Windows.
  • Titel afbeelding 4082 22 2
    2. Klik het dossier. Het zit in de menubalk aan de bovenkant van het scherm.
  • Titel afbeelding 4082 23 2
    3. Klik Opslaan als. Het zit in het vervolgkeuzemenu hieronder "het dossier".
  • Als alternatief kunt u drukken Ctrl+S (Windows) of ⌘ opdracht+S (Mac) om dit te doen.
  • Titel afbeelding 4082 24 2
    4. Voer een naam in voor uw HTML-document. Typ wat u uw document wilt noemen in de "Bestandsnaam" (Windows) of "Naam" (MAC) tekstvak.
  • Titel afbeelding 4082 25 2
    5. Wijzig het bestandstype van het document. U moet het document van een tekstbestand wijzigen naar een HTML-bestand. Gebruik de volgende stappen om het bestandstype te wijzigen:
  • ramen - Klik op de "Opslaan als type" Drop-down box, klik Alle bestanden, en typ dan .html Aan het einde van de naam van het bestand.
  • Macos - Vervang de .tekst Aan het einde van de naam van het bestand met .html in plaats daarvan.
  • Chromeos - Klik op de "Opslaan als" knop. Noem het bestand met .html op het eind. Het begin is aan jou.
  • Titel afbeelding 4082 26 2
    6. Klik Sparen. Het is aan de onderkant van het raam. Dit maakt dit een HTML-bestand aan.
  • HTML-bestanden openen meestal met uw standaard webbrowser.
  • Titel afbeelding 4082 27 2
    7. Sluit uw teksteditor. Op dit moment bent u klaar om uw HTML-bestand in uw browser te openen, zodat u uw webpagina kunt bekijken.
  • Titel afbeelding 4082 28 2
    8. Open het HTML-document met uw browser. In de meeste gevallen kunt u dubbelklikken op het HTML-document om dit te doen. Als u dubbelklikt op het document in een fout, doet u het volgende:
  • ramen - Klik met de rechtermuisknop op het document, selecteer Openen met, en klik op de browser die de voorkeur heeft.
  • Mac - Klik eenmaal op het document, klik het dossier, selecteren Openen met, en klik op de browser die de voorkeur heeft.
  • Titel afbeelding 4082 29 2
    9. Bewerk het HTML-document indien nodig. U kunt een foutmelding op uw HTML-pagina. Om het te wijzigen, kunt u de tekst van het HTML-document bewerken:
  • Op Windows kunt u met de rechtermuisknop op het document en klikken klikken Bewerk In het resulterende vervolgkeuzemenu (als u Notepad ++ hebt geïnstalleerd, zal dit zeggen Bewerken met Kladblok++ in plaats daarvan).
  • Op Mac wil je op het document klikken om het te selecteren, klikt u, het dossier, selecteren Openen met, en klik Textedit. U kunt het document ook naar TextEtit slepen.
  • Sluit op Chromebook de tekst-app, open bestanden, zoek uw bestand en klik vervolgens op.

    • Voorbeeld html

    Html cheat vel
    Voorbeeld webpagina met HTML

    Video

    Door deze service te gebruiken, kan sommige informatie worden gedeeld met YouTube.

    Tips

    Tags moeten altijd in een spiegelbeeld van hun open tegenhangers worden gesloten. Bijvoorbeeld, moet worden gesloten als .
  • U kunt Side-Scrolling-tekst toevoegen aan uw website met behulp van de tag, maar houd er rekening mee dat deze tag niet door sommige browsers wordt erkend.
  • Veel mensen Gebruik Notepad++ om hun code te schrijven en compileren.
  • Als u een afbeelding op uw pagina wilt centreren, kunt u typen na de naam van de afbeelding in de img Tag (bijvoorbeeld).

    • Waarschuwingen

    Het is het beste om uw eigen afbeeldingen te hosten op Imgur of vergelijkbaar als u van plan bent om afbeeldingen naar uw webpagina te uploaden. Het plaatsen van de foto`s van andere mensen kan leiden tot inbreuk op het auteursrecht.
    Deel in het sociale netwerk:
    Vergelijkbaar