De structuur van bijna elke website die we op internet vinden en gebruiken, is gemaakt met behulp van HTML, een gestandaardiseerd systeem voor het categoriseren van tekstbestanden. Pagina-einden, alinea's, sterke letters, cursief en andere functies worden allemaal toegevoegd met behulp van HTML. Door tags te gebruiken, die browsers instrueren hoe ze met inhoud moeten omgaan, helpt HTML deze structuur te creëren.
We plaatsen bijvoorbeeld een woord tussen de tags strong>bold/strong> om het vetgedrukt te laten lijken. De openingstag (/) geeft aan waar we het vet willen laten eindigen, terwijl de eerste tag (/) aangeeft waar we het vet willen laten beginnen. Het dient als basis voor de meeste webpagina's. Dit is dus de plek om te beginnen als je leert coderen.
Hoe u ruimte toevoegt in HTML
Afgezien van een enkele spatie tussen woorden, worden alle lege spaties die we in HTML-tekst invoeren om in een browser weer te geven, genegeerd. Als gevolg hiervan moeten we de lege ruimtes programmeren die we in ons document willen hebben. Aan elke tekstregel kan in HTML ruimte worden toegevoegd. We kunnen bijvoorbeeld spaties invoegen in tabel- en alinea-inhoud met behulp van het HTML-object. Omdat HTML geen toetsenbordletter heeft voor een lege spatie, moeten we de entiteit invoeren om elke spatie toe te voegen.
Het lijkt misschien eenvoudig, maar het toevoegen van ruimte aan onze HTML kan een uitdaging zijn. Er zijn minstens vijf verschillende benaderingen om hiervoor te zorgen.
Tijdens deze training zullen we veel voorbeelden zien. Het zal ook laten zien hoe je meer uitgebreide vormen van ruimte kunt gebruiken.
tat volledige vorm
Dit alles is mogelijk in gewone HTML zonder het gebruik van CSS. Maar houd er rekening mee dat het toevoegen van ruimte aan uw HTML het beste via CSS kan gebeuren.
Hoe ziet een ASCII-ruimte eruit?
De ruimte wordt weergegeven door het ASCII-symbool 20. Maar dit is slechts de geaccepteerde praktijk.
Er zijn vijf verschillende soorten spaties die u in HTML kunt gebruiken. Voor het ongetrainde oog lijken ze identiek, hoewel ze enigszins verschillende functies hebben.
Het tab-teken, dat het indrukken van de tab-toets op een toetsenbord simuleert, is een andere optie. En het Carriage Return-teken, dat het indrukken van de Enter-toets op een toetsenbord simuleert, is een ander voorbeeld.
Niet-brekende ruimte:
In de ruimte:
Em-ruimte:
Dunne ruimte:
Standaard ruimte:
Nieuwe regel (retour):
Tabbladteken:
De linkerkant vertegenwoordigt de karakter , en de rechterkant vertegenwoordigt de HTML code.
Hoe breed is een personage in de ruimte?
Voor spatietekens zijn er vier standaardbreedtes:
Wat betekent het spatieteken in HTML?
is de meest gebruikte HTML-entiteit.
arraylist java
Om deze tekst een spatie te laten vullen, probeer hem weg te gooien.
Laten we ons bijvoorbeeld voorstellen dat we twee spaties na een zin willen toevoegen, maar dat de website-rendering-engine zelf een van de spaties verwijdert. Als we twee spaties willen toevoegen, kunnen we misschien naar binnen
Witruimte: wat is het?
Tekens die niet zichtbaar zijn, worden witruimte genoemd. Ze bestaan uit:
- spaties,
- tabbladen, en
- regeleinden (regeleinden, regeleinden of beide),
Waarom is dit cruciaal?
Deze letters zijn bijvoorbeeld niet zichtbaar in een tekstverwerker, maar hebben wel invloed op de ruimte en opmaak van de tekst. De browser condenseert talloze witruimtetekens tot één enkele spatie in HTML, wat anders is dan andere opmaaktalen.
Er zijn verschillende spaties tussen de woorden in deze HTML, en elke regel eindigt met CRLF-tekens (carriage return, linefeed). Alle witruimtetekens worden door de browser samengevouwen.
Voorbeeld
Goede dingen kosten meer tijd.
Uitgang:
Spaties invoegen
- Gebruik het niet-afbrekende spatieteken ( ) van de tekst om meer ruimte te creëren.
- De CSS-opvullingseigenschap kan worden gebruikt om de ruimte binnen een element onder verschillende omstandigheden te vergroten.
- Met het CSS-marge-attribuut kan extra ruimte rond een element worden toegevoegd.
Hoewel niet-afbrekende spaties nuttig zijn, mogen ze niet overmatig worden gebruikt, omdat dit de manier kan verstoren waarop het materiaal in browsers wordt weergegeven. Gebruik bovendien geen vaste spaties voor stijldoeleinden, zoals het inspringen of centreren van een element op een webpagina; stilistische eisen moeten in plaats daarvan via CSS worden afgehandeld.
Naast de entiteit ondersteunt HTML ook de volgende aanvullende entiteiten voor talrijke aangrenzende lege ruimtes:
De karakterentiteit wordt gebruikt om een spatie weer te geven. En is een meeteenheid die overeenkomt met 8 pixels, of de helft van de breedte van een em (16 pixels).
De syntaxis voor een tussenruimte tussen inhoud is Hier is een voorbeeld van hoe u de HTML &ensp-entiteit gebruikt:
Hier is een voorbeeld voor de entiteit enspace.
Uitgang:
De entiteit wordt in het bovenstaande voorbeeld gebruikt om spaties aan HTML toe te voegen, en de breedte ervan is 8 pixels. Ze kunnen ook op verschillende aangrenzende locaties worden gebruikt.
Opmaak en spatiëring behouden
Als u de opgegeven opmaak en spatiëring wilt behouden, zijn er twee keuzes:
- HTML-opmaak en ruimte toevoegen
- Gebruik maken van een
tag.
Er wordt gebruik gemaakt van een 'pre'-tag
Deze resultaten komen voort uit het verwisselen van de
label voor de
tag:
Voorbeeld
pre> Good things take more time
Uitgang:
Ja de
tag keeps the formatting as it was originally, but it also switches to a monospaced typeface. All of these can be fixed; however, using the <pre> tag isn't always the best option. HTML spacing is a more popular method.</pre>
HTML-opmaak en ruimte toevoegen
Als alternatief kunnen we HTML-elementen en symbolen zoals de volgende opnemen:
Goede dingen zullen dat wel doen
neem meer tijd.
Uitgang:
Een regeleinde is vereist door de
element.
Actrice Sai Pallavi
Niet-brekende ruimte:
De browser vouwt geen spaties samen die zijn toegevoegd met het niet-afbrekende spatieteken ().
Bovendien voorkomt het, zoals de naam al doet vermoeden, dat de browser daar twee woorden breekt.
Goede dingen kosten meer tijd.
Uitgang:
In dit model worden 10 spaties toegevoegd aan het begin van de tekst. Een andere wordt tussen ' neemt ' die niet geïsoleerd zal zijn als de zin afloopt vanwege ruimtebeperkingen.
Het opvulkenmerk
De binnenruimte van een element wordt vergroot met het CSS-padding attribuut.
Er zijn waarden nodig die variëren van één tot vier, beginnend aan de boven-, rechter-, onder- en rechterkant.
De 'div' element heeft aan alle zijden een opvulling van 20 pixels.
Inner spacing is 20px with a div attribute
Uitgang:
Het Marge-attribuut
- Met het CSS margin attribuut wordt er extra ruimte rondom het element toegevoegd.
- Er zijn waarden nodig die variëren van één tot vier, beginnend aan de boven-, rechter-, onder- en rechterkant.
De 'div' element heeft aan alle zijden een marge van 40 pixels.
Outer spacing is 20px using the div and margin attribute
Uitgang:
Opvulling versus marge
- Opvulling en marge vergroten beide de ruimte van een element.
- Opvulling laat een leegte achter die wordt beschouwd als onderdeel van het element.
- Door marges gecreëerde ruimte wordt beschouwd als bestaand buiten de grenzen van het element.
- Het klikgebied, de achtergrondkleuren en andere kenmerken van de website worden door deze variatie beïnvloed.
Je zou kunnen geloven dat het toevoegen van spaties in HTML net zo eenvoudig is als het voortdurend op de spatiebalk drukken. Maar dat is gewoon niet hoe de dingen werken. Als u meer dan één keer op de spatiebalk drukt, worden er niet meer lege spaties in de buurt toegevoegd, zoals in een tekstdocument. De browser combineert alle nabijgelegen lege ruimtes tot één als we dit in HTML doen. Laten we een voorbeeld bekijken om aan te tonen wat er gebeurt als we meerdere spaties in HTML gebruiken:
Dus nadat we de spatiebalk vele malen hebben gebruikt, kunnen we geen spaties meer toevoegen
git-opdrachten voor push
Uitgang:
Door herhaaldelijk op de spatiebalk in HTML te drukken, zoals te zien in het bovenstaande voorbeeld, proberen we talloze opeenvolgende lege spaties in een webpagina in te voegen. Browsers geven echter meerdere aangrenzende lege ruimtes weer als één enkele spatie en negeren spaties vóór, na en buiten componenten. Het fenomeen staat bekend als het instorten van de witruimte. Hoewel het inklappen van witruimte soms vervelend kan zijn, zijn er verschillende technieken om meer spatiëring toe te voegen in zowel HTML als CSS (cascading stylesheets).
&
De karakterentiteit wordt gebruikt om de em-spatie weer te geven. De breedte van een em, namelijk 16 pixels, komt overeen met een emsp.
css-rand
De syntaxis voor em-spaties in de tekst is Hier is een voorbeeld van hoe u de HTML &emsp-entiteit gebruikt:
Hier is een voorbeeld voor em ruimte entiteit.
Uitvoer
De entiteit wordt in het bovenstaande voorbeeld gebruikt om spaties aan HTML toe te voegen, en de breedte ervan is 16 pixels. Ze kunnen ook in meerdere aangrenzende ruimtes worden gebruikt.
&verdunnen
De karakterentiteit wordt gebruikt om dunne ruimte weer te geven, ook wel bekend als smalle ruimte. Een zesde van een em is de breedte van a &
Dunne ruimte wordt geschreven als tusseninhoud in de syntaxis. Hier is een voorbeeld van hoe u de HTML-entiteit kunt gebruiken ''
Dit is een voorbeeld van een dunne ruimte-entiteit.
Uitvoer
De entiteit wordt in het bovenstaande voorbeeld gebruikt om dunne spaties aan HTML toe te voegen, en de breedte ervan is een zesde van een em. Ze worden ook gebruikt in verschillende aangrenzende ruimtes.
Hieronder ziet u een ASCII-kunstvorm van 'Hallo'. # # ##### # # # ##### # # # # # # # # #####
Uitgang:
De voordelen van het gebruik van witruimte
Waarom is witruimte belangrijk?
Witruimte is naar mijn mening als ontwerper de basisbouwsteen van goed ontwerp. Ontwerpers verwijzen naar negatieve ruimte, of de ruimte tussen stukken in een compositie, wanneer ze de term 'witruimte' gebruiken. Het is de lege ruimte tussen afbeeldingen, marges en rugmarges op een pagina die nergens mee gemarkeerd is. Het oog krijgt visueel ademruimte door de ruimte tussen kolommen, tekstregels en figuren.
Er is een dwingende reden waarom witruimte een cruciaal onderdeel van ontwerp is. Het kan een revolutie teweegbrengen in het ontwerp van onze website en verschillende voordelen bieden als het op de juiste manier wordt toegepast. We moeten lay-outs produceren en creëren die een lust voor het oog zijn en die de lezers aanmoedigen om door te gaan. Het is van cruciaal belang om voortdurend in gedachten te houden dat het leveren van een fantastisch product aan onze klanten onze prioriteit is wanneer we ontwerpen voor het internet.
Witruimte kan worden gebruikt om een lezer van het ene element naar het andere te leiden, harmonie en balans te creëren en een ontwerp te helpen brandmerken. Onze belangrijkste doelstellingen zijn om de website eenvoudig en duidelijk te laten lijken en om inhoud te bieden die onze gebruikers leuk zullen vinden en waarderen. Witruimte is niet zomaar een 'lege' ruimte; het is een ontwerpfunctie die het mogelijk maakt dat de items op de pagina bestaan. Het gebied zorgt voor een evenwicht en herinnert ons er voortdurend aan dat er prachtige ontwerpen bestaan. Om een duidelijke boodschap over te brengen, hoeven we geen lay-out te maken die overladen is met tekst en afbeeldingen.