Hoe een achtergrondafbeelding aan html toe te voegen

Om een ​​afbeelding toe te voegen aan een webpagina, hebt u HTML nodig en om een ​​foto van een webpagina te maken, zijn HTML en CSS vereist. HTML (Hypertext Marking Taal) is een gestandaardiseerde documentmarkeringstaal die de browser aangeeft om weer te geven op de webpagina. CSS (Cascading Style Tables) is een beschrijvingstaal van het uiterlijk van een document dat wordt gebruikt om het uiterlijk en de lay-out van een webpagina te wijzigen. U hebt een afbeelding nodig die u instelt als een webpagina-achtergrond.

Stappen

Deel 1 van 5:
Hoe een map en bestand te maken
  1. Titel afbeelding 2627945 1 1
een. Maak een map voor het opslaan van een HTML-bestand en achtergrondafbeelding. Naam mapnaam waarvoor het gemakkelijk te vinden is.
  • De naam van de map kan elk zijn, maar beter als het uit één kort woord bestaat.
  • Titel afbeelding 2627945 2 1
    2. Kopieer de achtergrondafbeelding naar de gemaakte map.
  • Als u niet voorzichtig bent met hoe uw site zich opent op oude apparaten of apparaten met een langzame internetverbinding, gebruikt u een afbeelding met een hogere resolutie. Als achtergrond is een afbeelding met een eenvoudig herhalend patroon geschikt, omdat de tekst er duidelijk op zal zijn.
  • Als u geen afbeelding hebt, downloadt u deze gratis op internet en kopieer deze naar de gemaakte map.
  • Titel afbeelding 2627945 3 1
    3. Maak een HTML-bestand. Open een teksteditor en maak vervolgens een nieuw bestand aan. Bewaar het als index.HTML.
  • U kunt elke teksteditor gebruiken, bijvoorbeeld notitieblok in Windows of Textit in Mac OS X.
  • Als u een teksteditor wilt gebruiken voor het werken met HTML, Download de Atom Editor, die Windows, MacOS en Linux ondersteunt.
  • Als u Textedit gebruikt voordat u begint met het schrijven van HTML-code, opent u het menu "Opmaak" en selecteert u "Converteren naar eenvoudige tekst". In dit geval wordt het HTML-bestand correct geladen in een webbrowser.
  • Krachtige teksteditors zoals Microsoft Word zijn niet erg goed geschikt voor het schrijven van HTML-code, omdat ze onzichtbare tekens en opmaak toevoegen, die het juiste weergave van de inhoud van het HTML-bestand in de webbrowser kunnen voorkomen.
    • Deel 2 van 5:
    Hoe een HTML-code te schrijven
    1. Titel afbeelding 2627945 4 1
    een. Kopieer en plak de standaard HTML-code. Markeer en kopieer de HTML-code hieronder en plaats deze in een open bestandsindex.HTML.
    Pagina titel {Achtergrond-afbeelding: URL (" ") -}
  • Titel afbeelding 2627945 5 1
    2. Voeg URL achtergrondafbeelding toe. In het indexbestand.HTML Zoek een touwtje Achtergrond-afbeelding: URL (" ")-. Plaats de cursor in de haakjes en voer vervolgens de naam van het achtergrondafbeeldingsbestand in. Zorg ervoor dat u de extensie van de bestandsbeeld opgeeft.
      • De opgegeven string moet er zoiets uitzien:
      Achtergrond-afbeelding: URL ("achtergrond.jpg")-
      Als u eenvoudig de bestandsnaam (zonder de URL of PAD ernaar gaat), wordt de webbrowser naar een afbeelding in een map zoekt met een HTML-bestand. Als de afbeelding zich in een andere map bevindt, voert u het volledige pad naar het bestand in.
  • Sla het HTML-bestand op.Titel afbeelding 2627945 6 1
    • Deel 3 van 5:
    Hoe een HTML-bestand te bekijken
    1. Titel afbeelding 2627945 7 1
    een. Open een HTML-bestand in een webbrowser. Klik met de rechtermuisknop op het indexbestand.HTML en open het in de geselecteerde webbrowser.
    • Als de gewenste foto niet in de browser is geopend, controleert u de naam van het bestand met de afbeelding correct in het venster Teksteditor.
    • Als een HTML-code in de webbrowser verschijnt, en niet de achtergrondafbeelding, het indexbestand.HTML is opgeslagen als een document in RTF-formaat. Bewerk in dit geval het HTML-bestand in een andere teksteditor.
  • Titel afbeelding 2627945 8 1
    2. Wijzigingen aanbrengen in een HTML-bestand. Plaats in het venster Teksteditor de cursor tussen de tags en ga "Hallo, vrede binnen!". Vernieuw de pagina in de browser zodat de ingevoerde tekst op de achtergrond van de afbeelding wordt weergegeven.
    • Deel 4 van 5:
    Hoe HTML-code te begrijpen
    1. Titel afbeelding 2627945 9 1
    een. Denk aan wat de tags in HTML en CSS zijn. HTML-code bestaat uit het openen en sluiten van tags. Bijvoorbeeld tag is ook open - sluitend. Op elke openingstag moet de bijbehorende sluitlabel op de webpagina correct hebben geladen.
  • Titel afbeelding 2627945 10 1
    2. Onthoud DOCTYPE-tag. HTML-code van hoge kwaliteit moet beginnen met . Deze tag informeert de webbrowser die het HTML-bestand een HTML-bestand is.
  • Titel afbeelding 2627945 11 1
    3. Wijzigingen aanbrengen in een HTML-bestand. Plaats in het venster Teksteditor de cursor tussen de tags en ga "Hallo, vrede binnen!". Vernieuw de pagina in de browser zodat de ingevoerde tekst op de achtergrond van de afbeelding wordt weergegeven.
  • Titel afbeelding 2627945 12 1
    4. Denk aan wat de tags in HTML en CSS zijn. HTML-code bestaat uit het openen en sluiten van tags. Bijvoorbeeld tag is ook open - sluitend. Op elke openingstag moet de bijbehorende sluitlabel op de webpagina correct hebben geladen.
  • Titel afbeelding 2627945 13 1
    vijf. Denk aan tag . Het bevat tekst die wordt weergegeven in de titelbalk van de browservenster, evenals de tekst die op het tabblad Browser wordt weergegeven.
  • Titel afbeelding 2627945 14 1
    6. Denk aan tag Het geeft de inhoud van CSS aan. Alles wat tussen tags is
  • Titel afbeelding 2627945 15 1
    7. Denk aan tag . Elke tekst tussen tags , wordt weergegeven als ingevoerd (als het geen HTML- of CSS-code is).
  • Titel afbeelding 2627945 16 1
    acht. Wijzigingen aanbrengen in een HTML-bestand. Plaats in het venster Teksteditor de cursor tussen de tags en ga "Hallo, vrede binnen!". Vernieuw de pagina in de browser zodat de ingevoerde tekst op de achtergrond van de afbeelding wordt weergegeven.
    • Deel 5 van 5:
    Hoe CSS-code te begrijpen
    1. Titel afbeelding 2627945 17 1
    een. Bereken CSS-code. In het indexbestand.HTML CSS-code tussen tags
  • Titel afbeelding 2627945 18 1
    2. Bekijk CSS-code.
    • 3
    Lichaam {Achtergrond-afbeelding: URL ("achtergrond.jpg") -}
  • Titel afbeelding 2627945 19 1
    4. Onthoud CSS-codeonderdelen. CSS-stijlen bestaan ​​uit twee delen: selector en aankondigingen.
      In ons voorbeeld Lichaam - Dit is een selector, en
      Achtergrond-afbeelding: URL ("achtergrond.jpg") - Dit is een aankondiging.
      De selector kan een HTML-tag zijn.
      Advertenties bestaan ​​altijd in krullende beugels {}.
  • Titel afbeelding 2627945 20
    vijf. Onthoud wat CSS-aankondiging. CSS-advertentie bestaat uit twee delen: eigenschappen en waarden. Inhoud in krullende beugels
    achtergrond afbeelding is een eigendom als URL ("achtergrond.jpg") is een betekenis.
      De woning beschrijft het onderwerp (in ons voorbeeld is het een achtergrondpatroon) en de waarde is de stijl van het item (in ons voorbeeld is het een foto met een foto).
      Eigenschap en waarde worden altijd gescheiden door een dikke darm (:).
      CSS-advertenties eindigen altijd met een puntkomma (-).
    • Deel in het sociale netwerk:
    Vergelijkbaar