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.

Inhoud

Stappen

Deel 1configureer de bestanden
Deel 2schrijf het html-bestand
Deel 3toon het html-bestand
Deel 4begrijp de html-code
Deel 5begrijp de css-code

stappen

Deel 1
Configureer de bestanden

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.

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.

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

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

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.

Sla het HTML-bestand op.

Deel 3
Toon het HTML-bestand

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.

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

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.

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.

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.

Leer de title-tag te gebruiken. Het label wordt weergegeven in de titelbalk van het browservenster en wordt ook weergegeven in de browsertabbladen.

Leer de stijltag te gebruiken. Het label

Leer de body-tag te gebruiken. Alle tekst die verschijnt tussen de labels wordt weergegeven zoals geschreven, tenzij het HTML- of CSS-code is.

Deel 5
Begrijp de CSS-code

Leer de CSS-code gebruiken. In het index.html-bestand, alle CSS-code gevonden tussen de tags

Neem de volgende CSS-code in acht.

body {background-image: url ("imagendefondo.jpg") -}

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 ({}).

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