emkiset.ru

Hoe een achtergrondafbeelding in HTML te herstellen

Als u een afbeelding aan uw webpagina wilt toevoegen, heeft u alleen HTML nodig. Als u een afbeelding als achtergrond op uw webpagina wilt instellen, hebt u HTML en CSS nodig. HTML betekent "hypertext markup language" en is de code die browsers vertelt wat ze op een webpagina moeten weergeven. CSS betekent "cascading style sheets" en het wordt gebruikt om het uiterlijk en ontwerp van een webpagina te wijzigen. Om te beginnen heeft u de achtergrondafbeelding nodig die u op uw webpagina wilt gebruiken.

stappen

Deel 1
Configureer de bestanden

Titel afbeelding 2627945 1 1
1
Maak een map om uw HTML-bestand en de achtergrondafbeelding op te slaan. Maak een map op uw computer en geef deze een naam waarmee u deze gemakkelijk kunt identificeren.
  • Je kunt het een naam geven zoals je wilt, maar aangezien je met HTML gaat werken, is het beter om te wennen aan het kiezen van korte namen van één woord voor je bestanden en mappen.
  • Titel afbeelding 2627945 2 1
    2
    Plaats de achtergrondafbeelding in de HTML-map. Zoek de afbeelding die u als achtergrond wilt gebruiken en sla deze op in uw HTML-map.
  • Over het algemeen is het raadzaam om eenvoudige afbeeldingen met vloeiende en repetitieve patronen als achtergrondafbeelding te gebruiken, zodat tekst die boven de achtergrond staat gemakkelijk kan worden gelezen.
  • Als u geen afbeelding hebt, kunt u een gratis achtergrondafbeelding downloaden van internet. Als u een afbeelding gaat downloaden, sla deze dan op in uw HTML-map.
  • Titel afbeelding 2627945 3 1
    3
    Maak een HTML-bestand. Open een teksteditor en maak een nieuw bestand. Bewaar dat bestand met de naam index.html.
  • U kunt de gewenste teksteditor gebruiken, inclusief de teksteditors die bij het besturingssysteem worden geleverd (Kladblok in het geval van Windows en TextEdit in het geval van Mac).
  • Als u een teksteditor wilt gebruiken die speciaal is ontworpen om met HTML te werken, klik hier Atom downloaden, een teksteditor die werkt met Windows, Mac OS X en Linux-besturingssystemen.
  • Als u TextEdit gaat gebruiken voordat u begint met het schrijven van het HTML-bestand, klikt u op het menu "formaat" en selecteer vervolgens "Converteren naar normale tekst" (of "Converteren naar gewone tekst"). Op deze manier zorgt u ervoor dat uw HTML-bestand correct in een webbrowser wordt geladen.
  • Tekstverwerkers zoals Microsoft Word zijn geen goede keuze voor het schrijven van HTML-code omdat ze onzichtbare tekens en opmaak toevoegen. Deze tekens kunnen het HTML-bestand bederven en het niet correct weergeven in een webbrowser.
  • Deel 2
    Schrijf het HTML-bestand

    Titel afbeelding 2627945 4 1
    1
    Kopieer en plak de volgende standaard HTML-code. Selecteer en kopieer de onderstaande code en plak deze in het open index.html-bestand.
    Titel van de pagina
  • Titel afbeelding 2627945 5 1
    2
    Voeg de URL van de afbeelding toe. Zoek in het index.html-bestand naar de regel achtergrondafbeelding: url (" ") -. Plaats de cursor tussen de haakjes en schrijf de naam van het bestand met de achtergrondafbeelding. Zorg ervoor dat u de extensie van het afbeeldingsbestand opneemt.
    Als je klaar bent, zou je er als volgt uit moeten zien:
    achtergrondafbeelding: url ("imagendefondo.jpg") -
    Telkens wanneer u een bestandsnaam zonder het pad of de URL gebruikt, zoekt de webbrowser naar de afbeelding in de map waarin de webpagina is opgeslagen. Als het bestand zich in een andere map op het systeem bevindt, moet u het volledige pad van het bestand toevoegen.
  • Titel afbeelding 2627945 6 1
    3
    Sla het HTML-bestand op.
  • Deel 3
    Toon het HTML-bestand

    Titel afbeelding 2627945 7 1


    1
    Open het HTML-bestand op een webserver. Klik met de rechtermuisknop op het index.html-bestand en selecteer de optie om het te openen met de gewenste webbrowser.
    • Als de afbeelding niet wordt weergegeven wanneer u de browser opent, controleert u of de naam van de afbeelding correct is gespeld in het teksteditorvenster waarin u de index.html hebt gemaakt.
    • Als bij het openen van de browser in plaats van het verschijnen van de afbeelding de HTML-code wordt weergegeven, betekent dit dat het bestand index.html is opgeslagen als een RTF-document. Probeer de HTML-code te bewerken met een andere teksteditor.
  • Titel afbeelding 2627945 8 1
    2
    Bewerk het HTML-bestand. Plaats de cursor in het teksteditor-venster tussen de labels en en schrijf dan "Hallo wereld!". Werk het browservenster bij om te zien of de tekst boven de achtergrondafbeelding wordt weergegeven.
  • Deel 4
    Begrijp de HTML-code

    Titel afbeelding 2627945 9 1
    1
    Leer hoe u HTML- en CSS-tags kunt gebruiken. De HTML-code bestaat uit het openen en sluiten van tags. Het label is het openingslabel van de hoofdtekst van de pagina en Het is de afsluitende tag. In HTML moeten alle openingstags hun bijbehorende sluitingstag hebben om de pagina correct weer te geven.
  • Titel afbeelding 2627945 10 1
    2
    Lees wat de DOCTYPE-tag betekent. Alle goed geschreven HTML-pagina`s zouden moeten beginnen met . Dit is wat de browser vertelt dat het HTML-bestand een HTML-bestand is.



  • Titel afbeelding 2627945 11 1
    3
    Bewerk het HTML-bestand. Plaats de cursor in het teksteditor-venster tussen de labels en en schrijf dan "Hallo wereld!". Werk het browservenster bij om te zien of de tekst boven de achtergrondafbeelding wordt weergegeven.
  • Titel afbeelding 2627945 12 1
    4
    Leer om HTML- en CSS-tags te gebruiken. De HTML-code bestaat uit het openen en sluiten van tags. Het label is het openingslabel van de hoofdtekst van de pagina en Het is de afsluitende tag. In HTML moeten alle openingstags hun bijbehorende sluitingstag hebben om de pagina correct weer te geven.
  • Titel afbeelding 2627945 13 1
    5
    Leer de title-tag te gebruiken. Het label wordt weergegeven in de titelbalk van het browservenster en wordt ook weergegeven in de browsertabbladen.
  • Titel afbeelding 2627945 14 1
    6
    Leer de stijltag te gebruiken. Het label
  • Titel afbeelding 2627945 15 1
    7
    Leer de body-tag te gebruiken. Alle tekst die verschijnt tussen de labels wordt weergegeven zoals geschreven, tenzij het HTML- of CSS-code is.
  • Titel afbeelding 2627945 16 1
    8
    Bewerk het HTML-bestand. Plaats de cursor in het teksteditor-venster tussen de labels en en schrijf dan "Hallo wereld!". Werk het browservenster bij om te zien of de tekst boven de achtergrondafbeelding wordt weergegeven.
  • Deel 5
    Begrijp de CSS-code

    Titel afbeelding 2627945 17 1
    1
    Leer de CSS-code gebruiken. In het index.html-bestand, alle CSS-code gevonden tussen de tags
  • Titel afbeelding 2627945 18 1
    2
    Neem de volgende CSS-code in acht.
    body {background-image: url ("imagendefondo.jpg") -}
  • Titel afbeelding 2627945 19 1
    3
    Leer de delen van de CSS-code te identificeren. De CSS-stijlbladen bestaan ​​uit twee delen: een selector en een verklaring.
    In het voorbeeld is de selector en achtergrondafbeelding: url ("imagendefondo.jpg") Het is de verklaring.
    De selectors kunnen HTML-tags zijn.
    De instructies gaan altijd tussen accolades ({}).
  • Titel afbeelding 2627945 20
    4
    Het bevat de CSS-verklaringen. De CSS-verklaringen zijn op hun beurt verdeeld in twee delen: een eigenschap en een waarde. In het vorige voorbeeld, binnen wat zich tussen de toetsen bevindt, background-image is het eigendom en url ("imagendefondo.jpg") Het is de waarde.
    De eigenschap is verantwoordelijk voor het opgeven van welk object moet worden opgemaakt en de waarde beschrijft hoe de stijl van de eigenschap wordt toegepast.
    Eigenschap en waarde worden altijd gescheiden door een dubbele punt (:).
    CSS-statements eindigen altijd in een puntkomma (-).
  • Delen op sociale netwerken:

    Verwant
    Hoe een achtergrond van een website toevoegenHoe een achtergrond van een website toevoegen
    Hoe een afbeelding in HTML te centrerenHoe een afbeelding in HTML te centreren
    Hoe HTML-frames te makenHoe HTML-frames te maken
    Een afbeeldingslink maken in HTMLEen afbeeldingslink maken in HTML
    Hoe maak je een vervolgkeuzelijst in HTML zonder JavaHoe maak je een vervolgkeuzelijst in HTML zonder Java
    Hoe te detecteren of jаvascript niet is ingeschakeldHoe te detecteren of jаvascript niet is ingeschakeld
    Hoe een HTML-bestand uit te voerenHoe een HTML-bestand uit te voeren
    Hoe de achtergrondkleur in HTML in te stellenHoe de achtergrondkleur in HTML in te stellen
    Hoe u uw producten filtert in de boekingskalender van WebReservHoe u uw producten filtert in de boekingskalender van WebReserv
    Hoe maak je een vervangende afbeelding in jаvascriptHoe maak je een vervangende afbeelding in jаvascript
    » » Hoe een achtergrondafbeelding in HTML te herstellen
    © 2021 emkiset.ru