Thuis-Software downloaden-Maak de code online leesbaar. Uitlijning van tekst

Maak de code online leesbaar. Uitlijning van tekst

De belangrijkste taak van opmaak is om de tekst leesbaar en begrijpelijk te maken in zijn structuur. Er zijn zelfs hele handleidingen over het opmaken van codes, waarin details zoals het aantal spaties of de inspringing van accolades worden beschreven. In feite is alles veel eenvoudiger: het is voldoende dat de code visueel leesbaar is, en spaties of tabulators zijn een ondergeschikte kwestie.

Het punt dat ik echter wil maken is dat als je code voor andere mensen gaat posten, je je aan een soort 'basisstandaard' moet houden.

Blokvulling

Elk genest blok moet een grotere linkermarge hebben dan het bovenliggende blok.

Dat wil zeggen: we bouwen een visuele hiërarchie van tags waarin gemakkelijk kan worden genavigeerd. Vergelijk met "platte stijl":

Moderne teksteditors, bijvoorbeeld Notepad++, laten automatisch inspringen met Enter, waardoor het probleem van het handmatig rangschikken volledig wordt geëlimineerd. Meestal maken codeerders eerst een openings- en sluitingstag en splitsen deze vervolgens op in regels met behulp van Enter. Dit zorgt ervoor dat de openingstag altijd een sluittag heeft.

Blokken "sluiten".

Het kan voorkomen dat er in uw code een situatie voorkomt waarbij blokken elkaar altijd direct opvolgen. In dit geval hoeft u ze niet onderling te splitsen en geen extra streepje te maken.

In dit voorbeeld bevat div.layout-center-wrap altijd een direct onderliggend kind van div.layout-wrap, zonder onderbreking. Dergelijke blokken kunnen visueel als één geheel worden bekeken. Hier is nog een voorbeeld waarbij blokken op hetzelfde niveau kunnen worden geplaatst.

Titel

Het belangrijkste hier is om het niet te overdrijven: je moet niet meer dan 2-3 blokken op één lijn/niveau plaatsen. Als tekst of code tussen blokken wordt geplaatst, moeten deze zeker op verschillende regels worden geplaatst.

Tekst

Deze opmaak is niet geschikt. De juiste manier zou zijn:

Tekst

Spatie of tab

Maakt niet uit. Gebruik wat jij het fijnst vindt. Voor zover ik weet, gebruiken bijna alle programmeurs de tabulator, simpelweg omdat je hiervoor maar één keer op de Tab-toets hoeft te drukken.

Als je het met spaties doet, moet je voor elk streepje 4 spaties indrukken. Een veel voorkomend probleem is dat u per ongeluk niet op 4, maar op 3, 5 of een ander getal kunt drukken, en in dit geval moet u de toetsaanslagen tellen of het resultaat visueel controleren.

In dit opzicht is de tabulator veel “betrouwbaarder”. Vanuit technisch oogpunt maakt het niet uit of het een tabulator of spaties is (de HTML-code wordt nog steeds gecomprimeerd).

Het gebruik van meerdere spaties is het simuleren van een tabulator. Deze vraag ligt dus op het gebied van bruikbaarheid. Maar als u besluit spaties te gebruiken, moeten er voor elke inspringing vier tekens zijn, anders verliest de tekst de leesbaarheid. Er zijn handleidingen waarin het wordt aanbevolen om 2 spaties te plaatsen, maar voor mij is dergelijke code visueel “slordig”.

Hoofdletters en kleine letters

Als we het over HTML hebben, moeten alle tags in kleine letters staan. Technisch gezien maakt het opnieuw niet uit, maar de hoofdletters zijn moeilijk te lezen. Daarom worden alle tags en hun attributen strikt in kleine letters geschreven.

Als we het over programmeertalen hebben, zijn deze in de regel hoofdlettergevoelig, dus hoofdletters worden alleen gebruikt waar dat nodig is.

Enkele en dubbele aanhalingstekens

Er worden bijna altijd dubbele aanhalingstekens gebruikt. Bij het insluiten van JS-code in een HTML-pagina kan er een situatie ontstaan waarin twee soorten aanhalingstekens vereist zijn:

In dit voorbeeld wordt het html-attribuut omgeven door dubbele aanhalingstekens, en in de js-code worden al enkele aanhalingstekens gebruikt. Het is onmogelijk om slechts één type te gebruiken.

Daarom is de regel voor aanhalingstekens in HTML en CSS eenvoudig: de hoofdaanhalingstekens zijn dubbel, en als ze ontbreken, gebruiken we enkele aanhalingstekens.

HTML-verfraaier en formatter

URL laden URL laden

HTML-formatter

Voer uw rommelige, verkleinde of versluierde HTML in het veld hierboven in om deze op te schonen en mooi te maken. De bovenstaande editor bevat ook nuttige regelnummers en syntaxisaccentuering. Er zijn veel opties om de verfraaiing aan te passen aan uw persoonlijke opmaaksmaak.

Wanneer gebruik je HTML Viewer, HTML Formatter, HTML Formatter

Vaak kunnen bij het schrijven van HTML uw inspringing, spatiëring en andere opmaak een beetje ongeorganiseerd raken. Het is ook gebruikelijk dat meerdere ontwikkelaars aan één project werken en verschillende opmaaktechnieken gebruiken. Deze tool is handig om de opmaak van een bestand consistent te maken. Het is ook gebruikelijk dat HTML wordt verkleind of versluierd. U kunt deze tool gebruiken om de code er mooi en leesbaar uit te laten zien, zodat deze gemakkelijker te bewerken is.

Voorbeelden

De verkleinde HTML hieronder:

Wordt dit verfraaid:

De uitlijning van tekst bepaalt het uiterlijk en de richting van de alinearanden en kan links, rechts, gecentreerd of uitgevuld zijn. In tabel Figuur 1 toont opties voor het uitlijnen van een tekstblok.

Tafel 1. Manieren om tekst uit te lijnen

Links uitlijnen	Rechtse uitlijning	Uitlijning midden	Rechtvaardiging
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

De meest gebruikelijke optie is links uitgelijnd, waarbij de tekst aan de linkerkant naar de rand wordt geduwd terwijl de tekst aan de rechterkant gekarteld blijft. Uitlijning rechts en midden wordt voornamelijk gebruikt in koppen en subkoppen.

Houd er rekening mee dat er bij het gebruik van uitvulling grote spaties tussen woorden in de tekst kunnen verschijnen, wat niet erg aantrekkelijk is.

De paragraaftag wordt doorgaans gebruikt om de tekstuitlijning in te stellen

Met het align-attribuut, dat de uitlijningsmethode specificeert.

Het is ook mogelijk om een tekstblok uit te lijnen met behulp van een tag

met een soortgelijk uitlijningskenmerk, zoals weergegeven in de tabel. 2.	Tafel 2. Tekst uitlijnen met behulp van de align-parameter
	HTML-code
Tekst	Beschrijving
Tekst	Voegt een nieuwe alinea tekst toe, standaard links uitgelijnd. Kleine verticale inspringingen worden automatisch voor en na alinea's toegevoegd.
Tekst
Tekst	Uitlijning van de breedte.
Tekst	Schakelt automatische regelterugloop uit, zelfs als de tekst breder is dan het browservenster.
Tekst	Hiermee kan de browser een regel op de opgegeven locatie onderbreken, zelfs als er een tag wordt gebruikt .
Tekst	Beschrijving
Tekst	Voegt een nieuwe alinea tekst toe, standaard links uitgelijnd. Kleine verticale inspringingen worden automatisch voor en na alinea's toegevoegd.
Tekst	Rechtse uitlijning.
Tekst	Uitlijning van de breedte.

De linkeruitlijning van elementen is standaard ingesteld, dus u hoeft dit niet opnieuw op te geven. Dus align="left" kan worden weggelaten.

Verschil tussen alinea (tag

) en labelen

is dat er een verticale inspringing verschijnt aan het begin en einde van de alinea, wat niet het geval is bij het gebruik van een tag

Het align-attribuut is vrij universeel en kan niet alleen op de hoofdtekst worden toegepast, maar ook op kopjes zoals

.

Voorbeeld 1 laat zien hoe u in een dergelijk geval de uitlijning instelt.
Voorbeeld 1: Tekstuitlijning

Uitlijning van tekst

Hoe een leeuw vangen?

Brute force-methode

We verdelen de woestijn in een aantal elementaire gebieden, waarvan de grootte samenvalt met de totale afmetingen van de leeuw, maar kleiner is dan de grootte van de kooi. Vervolgens bepalen we door eenvoudig zoeken het gebied waarin de leeuw zich bevindt, wat automatisch leidt tot de vangst ervan.

Dichotomie methode

We verdelen de woestijn in twee helften. In het ene deel is er een leeuw, in het andere is er geen.

We nemen de helft waarin de leeuw zich bevindt en verdelen deze opnieuw in tweeën. Dit herhalen we totdat de leeuw gepakt is.

Het resultaat van het voorbeeld wordt getoond in Fig. 1.

Rijst. 1. Lijn tekst rechts en links uit

In dit voorbeeld wordt de kop uitgelijnd op het midden van het browservenster, wordt de gemarkeerde alinea rechts uitgelijnd en wordt de hoofdtekst links uitgelijnd.

Tot nu toe hebben we de elementen alleen links uitgelijnd. Om precies te zijn, jij en ik hebben dit helemaal niet gedaan, en de browser zelf lijnt elementen standaard links uit. Het zou natuurlijk te saai zijn om alles links uit te lijnen. Daarom zijn er verschillende manieren om te centreren en rechts uit te lijnen.

Het uitlijnen van elementen is iets dat u alleen moet weten wanneer u dit doet. Het eerste dat u hoeft te doen, is een eenvoudige pagina typen.

Er was eens een label
:

Ik raad je af om het nu te gebruiken, vanwege de beschikbaarheid van modernere methoden, maar ik kan het niet laten om het te vermelden. Het is heel, heel eenvoudig te gebruiken. Alles wat je nodig hebt om gecentreerd te zijn, plaats je in deze tag. Hier lijnen we bijvoorbeeld de kop van het eerste niveau uit naar het midden.

Je kunt een afbeelding toevoegen, ook uitgelijnd in het midden, laten we ook naar de volgende regel gaan met behulp van de tag

Kop van 1e niveau, gecentreerd uitgelijnd Het was een etiket bestaat simpelweg niet. Laten we zeggen standaard links uitgelijnd, gecentreerd uitgelijnd met tag , maar hoe zit het met de juiste?

Om dit probleem op te lossen, bedachten de ontwikkelaars een universele manier om elementen uit te lijnen HTML. De methode is om zogenaamde containers te gebruiken, die met behulp van de tag worden gemaakt

. Dat wil zeggen dat alles wat in een specifieke container moet worden geplaatst, in de tag wordt geplaatst

. En deze tag heeft al het attribuut " uitlijnen", waarvan de waarde de positie van deze container bepaalt. Er zijn drie waarden: " links", "centrum", "rechts". Standaard is dit " links“Maar ik denk dat dit je niet verbaast.

Laten we nu hetzelfde schrijven HTML-code, maar laten we met behulp van containers bovendien niet in het midden, maar aan de rechterkant uitlijnen.

Zoals je ziet werkt alles. Ik raad u aan om ook de waarden van het attribuut te wijzigen " uitlijnen" om te kijken naar andere typen uitlijning van containerinhoud.

Een andere manier om elementen uit te lijnen HTML- dit zijn tabellen, maar dit onderwerp verdient een aparte discussie, dus we zullen erover praten in een van de volgende artikelen.

Voorlopig zou uw pagina er als volgt uit moeten zien:

Ik raad je af om het nu te gebruiken, vanwege de beschikbaarheid van modernere methoden, maar ik kan het niet laten om het te vermelden. Het is heel, heel eenvoudig te gebruiken. Alles wat je nodig hebt om gecentreerd te zijn, plaats je in deze tag. Hier lijnen we bijvoorbeeld de kop van het eerste niveau uit naar het midden.

Kop van 1e niveau, rechts uitgelijnd

Met vriendelijke groet, Michail Roesakov.

P.S. Als je er meer over wilt weten HTML, kijk dan eens naar mijn gratis cursus met een voorbeeld van het maken van een website op HTML:

Ben je net zo dol op je CSS-code als ik? Als dat zo is, probeer er dan natuurlijk voor te zorgen dat hij zich niet alleen goed gedraagt en zich goed voelt, maar er ook leuk uitziet.
Ik hoop dat de hieronder beschreven hulpmiddelen ervoor zullen zorgen dat uw code dichter bij het ideaal komt.

1.Styleneat

Waarschijnlijk de eenvoudigste service die in de recensie wordt gepresenteerd.
De tool heeft niet veel opties:

Sorteer eigenschappen alfabetisch
Selectors alfabetisch sorteren (als “Veilig Organiseren” is aangevinkt, is deze optie niet beschikbaar)
Mogelijkheid om de opmaakstijl te kiezen: meerdere regels of enkele regels
Kan CSS-bestanden die zijn verbonden via import naar het hoofdbestand halen en ze genadeloos verwerken
U kunt code indienen voor verwerking door middel van: een tekstveld, het uploaden van een bestand of het verstrekken van een link naar CSS
Het resultaat kan worden verkregen als CSS-code of als bestand worden geüpload

2. FormatCSS

Ondanks zijn dreigende uiterlijk kan het instrument goed overweg met zijn functies, waar het ruimschoots over beschikt.
Je kunt veel configureren:

plaatsing van spaties/tabs/nieuwe regels,
sorteereigenschappen en selectornamen,
het converteren van eigenschapsnamen en selectors naar kleine letters, enz.

Wat ik vooral leuk vond aan deze service: de mogelijkheid om subregels op te maken met een “ladder” (ik vind dit een erg handige manier om stijlen te ordenen).

3. CleanCSS

Een redelijk krachtig hulpmiddel dat ons veel mogelijkheden biedt:

Je kunt CSS invoeren door te kopiëren en plakken in het veld “CSS-Code” of als link naar het stijlbestand
U kunt het resultaat als tekst of als bestand verkrijgen.
De gebruiker kan kiezen uit 4 soorten bronopmaak: de code kan worden geoptimaliseerd voor het kleinste formaat of juist voor een betere leesbaarheid. In het veld “Aangepaste sjabloon” is het mogelijk om een opmaaksjabloon in te stellen
In staat om regels te combineren en eigenschappen terug te brengen tot een korte vorm
Verwijder indien nodig opmerkingen en ongeldige definities
Net als de hierboven beschreven diensten, sorteert het met plezier alles wat uw hartje begeert alfabetisch en converteert het naar kleine/hoofdletters

Overigens is deze service gebaseerd op de “ ”-motor.- open source CSS-parser/optimizer. Iedereen kan dus vrijelijk zijn eigen schoonheid op de basis weergeven, met blackjack en schakelaars.
UPD> In de reacties suggereerden ze een link naar de tweelingbroer van deze dienst: CodeVerfraaier. De set functies is vrijwel identiek aan CleanCSS (de dienst draait ook op CSSTidy).

4. ProCSSor

Naar mijn ervaren mening is dit de handigste van allemaal die in deze review wordt gepresenteerd.
De dienst begroet de gebruiker met een prettige interface en zeer duidelijke pop-uptips waarmee je snel inzicht krijgt in de instellingen.
Zoals elke zichzelf respecterende verfraaiing accepteert ProCSSor de code van ons in het invoerveld, in de vorm van een bestand of link. Het resultaat wordt naar de browser verzonden en er wordt een link weergegeven om het bestand te downloaden.
De tool heeft voldoende instellingen om bijna elke gebruiker tevreden te stellen; het heeft niet veel zin om ze op te sommen - het is beter om het meteen te proberen.
Een leuk kenmerk van de service is mogelijkheid om uw instellingen op te slaan, zodat u de volgende keer de instellingsstap kunt overslaan en direct naar het verfijningsproces kunt gaan.
Een andere attractie - ProCSSor biedt een API, de documentatie is hier te vinden:

Categorieën