Alles wat de bezoeker op de pagina's van de site ziet, wordt door de browser weergegeven op basis van gedetailleerde instructies die hem door de server worden gestuurd. Deze instructies worden de html-code van de pagina genoemd en bestaan uit afzonderlijke "tags" die het type, het uiterlijk en de locatie van elk element afzonderlijk beschrijven. Om een nieuw element (bijvoorbeeld een afbeelding) op een pagina te plaatsen, moet u een bijbehorende instructie - een tag - aan de broncode toevoegen. Overweeg de eenvoudigste manier om dit te doen.
instructies:
Stap 1
Als u een inhoudsbeheersysteem gebruikt, is het zeer waarschijnlijk dat het een pagina-editor bevat. Eerst moet u de gewenste pagina in deze editor openen. Verder - opties zijn mogelijk. In het beste geval heeft de pagina-editor een "visuele modus", met andere woorden - "WYSIWYG-modus" (What You See Is What You Get - "what you see is what you get"). In deze modus hoeft u zich helemaal niet bezig te houden met de originele html-code! De pagina in de editor ziet er hetzelfde uit als op de site, het is voldoende om de muis op de gewenste plaats te steken en op de knop "afbeelding invoegen" in het editorpaneel te drukken.
Stap 2
Als gevolg hiervan wordt een dialoogvenster geopend waarin u de gewenste afbeelding moet selecteren. Als je het nog niet hebt geüpload, is er ook een knop om een afbeelding op je computer te selecteren en naar de server te uploaden. Daarnaast kunt u in dit dialoogvenster de kleur en breedte van het kader rond de afbeelding instellen, de afstand en kleur van de vulling tussen het kader en de afbeelding, de tekst voor de knopinfo. Het is niet nodig om hier de afmetingen op te geven, maar om het laden van pagina's te versnellen en om vervorming van het ontwerp te voorkomen, is het toch beter om dit te doen. Wanneer alle vereiste velden van het dialoogvenster zijn ingevuld, klikt u op "OK" en slaat u de bewerkte pagina op.
Stap 3
Omdat er niet één standaard is voor besturingssystemen, kan de procedure voor het invoegen van een afbeelding in de visuele modus van uw systeem enigszins verschillen, maar het principe zal hetzelfde zijn. Om dezelfde reden wordt de WYSIWYG-modus mogelijk niet weergegeven in het beheersysteem van uw site. Dan moet je nog de broncode van de pagina in HTML bewerken (HyperText Markup Language - "hypertext markup language"). U moet een tag op de juiste plaats in de code invoegen die de browser vertelt om de afbeelding hier weer te geven. In zijn eenvoudigste vorm zou het er als volgt uit moeten zien: Hier is het "relatieve adres" van de afbeelding - op dit adres moet de browser contact opnemen met de server om het afbeeldingsbestand ervan op te halen. Als het adres relatief is, gaat de browser ervan uit dat het bestand zich in dezelfde servermap bevindt als de pagina zelf (of in een submap). Maar om u niet te vergissen, is het beter om het "absolute adres" op te geven - bijvoorbeeld als volgt: Om de server de afbeelding te laten vinden en naar de browser te sturen, moet deze natuurlijk worden geüpload naar de opgegeven plaats. De eenvoudigste manier om dit te doen is via de bestandsbeheerder, die in elk contentbeheersysteem zit, evenals in het configuratiescherm van uw hostingbedrijf. U kunt dit ook doen met het FTP-protocol (File Transfer Protocol - "file transfer protocol"), met een speciaal programma - FTP-client. Er zijn er veel, zowel betaald als gratis - bijvoorbeeld Cute FTP, FlashFXP, WS FTP, enz. Maar het installeren, beheersen en configureren van het programma kost natuurlijk tijd, dus een bestandsbeheerder voor het downloaden van alles wat je nodig hebt via een browser is een gemakkelijkere optie.
Stap 4
Naast het adres in de html-tag van de afbeelding, kunt u aanvullende informatie opgeven - "attributen" van de tag. Het attribuut alt="Image" bevat bijvoorbeeld de tekst voor de knopinfo die verschijnt wanneer u de muiscursor over de afbeelding beweegt: Het kan worden vervangen door het - title -attribuut: - De grootte van de rechthoek waarin de browser moet de afbeelding wordt weergegeven door de attributen width en height: - Het attribuut border specificeert de breedte van de rand rond de afbeelding (in pixels): Als er een link van de afbeelding wordt gemaakt, zal de browser er een blauwe rand omheen tekenen. Om er vanaf te komen, stelt u de grenswaarde in op nul: - De andere twee attributen bevatten informatie over de hoeveelheid inspringing van de afbeelding van aangrenzende elementen (van tekstregels, andere afbeeldingen, enz.) - hspace stelt de grootte van de afbeelding in inspringen horizontaal (links en rechts), vspace - verticaal (onder en boven):
