Website-indeling: hoe u een achtergrond in html maakt

Veel beginners die alleen het hart krijgen van het creëren van websites, vragen zich vaak af hoe in html de achtergrond een foto maakt. En als sommige mensen dit probleem kunnen begrijpen, zijn er nog steeds problemen bij het uitrekken van de afbeelding naar de volledige breedte van de monitor. Tegelijkertijd wil ik dat de site op alle browsers gelijkmatig wordt weergegeven, zodat aan de vereiste compatibiliteit van de browser moet worden voldaan. U kunt de achtergrond op twee manieren instellen: HTML-tags en CSS-stijl gebruiken. Iedereen kiest voor zichzelf de meest optimale optie. Uiteraard is de CSS-stijl veel handiger, omdat de code in een apart bestand is opgeslagen en geen onnodige kolommen in de hoofdletters van de site nemen, maar voordat we een eenvoudige methode voor het installeren van een afbeelding op de achtergrond van de site overwegen.

Basis HTML-tags voor het maken van een achtergrond

Dus, laten we doorgaan met de vraag hoe u een achtergrondafbeelding in html op het hele scherm kunt maken. Om de site mooi uit te zien, moet u een belangrijk genoeg detail begrijpen: het is voldoende om alleen een achtergrondverloop te maken of een zwart-wit kleur te maken, maar als u een foto op de achtergrond wilt invoegen, strekt het zich niet over de gehele breedte van de monitor uit. De afbeelding moet in eerste instantie worden geselecteerd of zelfstandig een ontwerp gemaakt met een dergelijke uitbreiding, waarin u een pagina van de weergegeven website zal hebben. Pas nadat de achtergrondafbeelding klaar is, brengen we het over naar de map met de naam 'Afbeeldingen'. Daarin zullen we alle gebruikte foto's, animaties en andere grafische bestanden opslaan. Deze map moet in de hoofdmap zijn met al uw html-bestanden. Nu kunt u naar de code gaan. Er zijn verschillende mogelijkheden voor het schrijven van code, waarmee de achtergrond verandert in een foto.

1. Schrijf het attribuut van de tag.
2. Door CSS-stijl in HTML-code.
3. Schrijf de CSS-stijl in een apart bestand.

Net als in HTML, om een achtergrond een foto te maken, besluit je, maar ik wil graag een paar woorden zeggen over hoe het het meest optimaal zou zijn. De eerste methode met behulp van het schrijven van het label kenmerk is al lang verouderd. De tweede optie wordt in zeer zeldzame gevallen gebruikt, enkel omdat u veel dezelfde code krijgt. En de derde optie is het meest voorkomende en effectieve. Hier zijn HTML voorbeelden van tags:

1. De eerste manier om te schrijven via het lichaam attribuut in het index.htm bestand. Het is geschreven in deze vorm: (body background = "Folder_name / Picture_name.extension") (/ body). Dat wil zeggen, als we een foto genaamd "Picture" en een uitbreiding van JPG hebben en we de map als "Afbeeldingen" noemen, dan ziet de HTML-code er zo uit: (body background = "Images / Picture.jpg") ... (/ body) .
2. De tweede schrijfwijze beïnvloedt de CSS-stijl, maar is geschreven in hetzelfde bestand genaamd index.htm. (Body style = "background: url ('../ Afbeeldingen / Picture.jpg')").
3. En de derde manier van opnemen is in twee bestanden gedaan. In het document genaamd index.htm wordt de volgende tag in het hoofdletter geschreven: (hoofd) (link rel = "stylesheet" type = "tekst / css" href = "http: // site / artikel / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_file ") (/ hoofd). En in het stijlbestand met de naam style.css schrijven we al: lichaam {achtergrond: url (Afbeeldingen / Picture.jpg ')}.

Net als in HTML om een achtergrondafbeelding te maken, zijn we gedemonteerd. Nu moet u begrijpen hoe u de foto over de breedte van het volledige scherm kunt uitrekken.

Manieren om de achtergrondafbeelding op de breedte van het raam uit te breiden

Laten we ons scherm als een percentage voorstellen. Het blijkt dat de gehele breedte en lengte van het scherm 100% x 100% zal zijn. We moeten de foto naar deze breedte uitbreiden. Voeg toe aan de afbeelding invoer in de style.css bestand een tekenreeks die het beeld strekt naar de volledige breedte en lengte van de monitor. Hoe is het in de CSS-stijl geschreven? Het is simpel!

lichaam

{

Achtergrond: url (Afbeeldingen / Picture.jpg ')

Achtergrond-grootte: 100%; / * Dit item is geschikt voor de meeste moderne browsers * /

}

Dus we hebben uitgevonden hoe u een achtergrondafbeelding in html op het hele scherm kunt maken. Er is ook een manier om te schrijven in het index.htm bestand. Hoewel deze methode verouderd is, is het nodig voor beginners om het te leren kennen en te begrijpen. In de tag (hoofd) (stijl) div {background-size: cover; } (/ Style) (/ head) dit record betekent dat we een speciaal blok voor de achtergrond selecteren die over de gehele breedte van het venster worden geplaatst. We hebben gekeken naar 2 manieren om de achtergrond van de site een html-afbeelding te maken, zodat het beeld over de gehele breedte van het scherm in een van de moderne browsers kan strekken.

Hoe maak je een vaste achtergrond

Als u besluit om de foto te gebruiken als achtergrond van een toekomstige webbron, dan moet u gewoon leren hoe u het vastzet, zodat het niet lang uitstrekt en het esthetische uiterlijk niet verwend maakt. Het is gewoon genoeg om HTML-code te gebruiken om deze kleine add-on te schrijven. U moet een frase toevoegen in het style.css bestand na de achtergrond: url (Afbeeldingen / Picture.jpg '); Of in plaats van een aparte regel na de semikolonpositie toe te voegen: vast. Op die manier wordt je achtergrondfoto stil. Tijdens het scrollen van de inhoud op de site ziet u dat de tekstlijnen verhuizen, en de achtergrond blijft op zijn plaats. Zo leerde u hoe u op verschillende manieren een achtergrond in html kunt maken.

Werken met een tafel in HTML

Veel onervaren webontwikkelaars, wanneer ze worden geconfronteerd met tafels en blokken, begrijpen vaak niet hoe je een foto in een html-achtergrond een tafel maakt. Net zoals alle HTML- en CSS-style commando's , is deze webprogrammeertaal vrij eenvoudig. En de oplossing voor dit probleem zal een paar regels van code schrijven. U moet al weten dat het schrijven van tabelrijen en kolommen respectievelijk aangeduid wordt als tags (tr) en (td). Om de achtergrond van de tabel als een afbeelding te maken, moet u een eenvoudige zin toevoegen aan de tag (tabel), (tr) of (td) met de link naar de afbeelding: achtergrond = URL van de afbeelding. Voor de duidelijkheid geven we een paar voorbeelden.

Tabellen met een foto in plaats van een achtergrond: HTML voorbeelden

Laten we de 2x3-tabel trekken en het achtergrondfoto maken dat opgeslagen is in de map Afbeeldingen: (tabel achtergrond = "Afbeeldingen / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (Td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabel). Dus onze tafel zal over geschilderd worden op de achtergrond van de foto.

Trek nu dezelfde tabel met de maat 2х3, maar we zullen de foto in de staven invoegen bij nummer 1, 4, 5 en 6. (tabel) (tr) (td achtergrond = "Afbeeldingen / Picture.jpg") 1 (/ td) (td) 2 (Td) 3 (/ td) (/ tr) (tr) (td achtergrond = "Afbeeldingen / Picture.jpg") 4 (/ td) (td achtergrond = "Afbeeldingen / Picture.jpg") 5 / Td) (td achtergrond = "Afbeeldingen / Picture.jpg") 6 (/ td) (/ tr) (/ tabel). Na het bekijken zien we dat de achtergrond alleen verschijnt in de cellen waarin we hebben geregistreerd, maar niet in de hele tabel.

Cross-browser site

Er is nog steeds zoiets als cross-browser bron van een web resource. Dit betekent dat de pagina's van de site op dezelfde manier worden weergegeven in verschillende typen en versies van browsers. Tegelijkertijd moet u de HTML-code en de CSS-stijl aanpassen voor de vereiste browsers. Daarnaast proberen in de moderne tijd van de smartphone-ontwikkeling veel webontwikkelaars sites te maken die zijn aangepast voor zowel mobiele versies als een computerweergave.