We hebben allemaal de beroemde teksteditor Word gebruikt. En we weten dat het heel gemakkelijk is om het lettertype, de grootte en de kleur van de tekst te wijzigen. In html kun je deze parameters dus ook zonder veel moeite instellen. Hier is een label voor . Hij is gekoppeld en heeft daarom een sluittag, omdat de browser moet begrijpen waar het begin en einde van de tekst is waarvoor we de parameters wijzigen. Label heeft drie attributen: gezicht, grootte en kleur, die respectievelijk het lettertype, de grootte en de kleur van de tekst specificeren. In deze tutorial gaan we dieper in op lettertypen.
Naar verander het lettertype in html– bestand, we moeten de tekst in tags omsluiten En en solliciteer zeker gezicht attribuut. Het ziet er zo uit:
onze tekst
Lettertypenamen kunnen worden bekeken in de Word-editor. Er is een behoorlijk lange lijst. Laten we een voorbeeld nemen van hoe u het tekstlettertype in HTML kunt wijzigen en de volgende code kunt schrijven:
Deze tekst wordt in het standaardlettertype geschreven
Deze tekst wordt geschreven in het Batang-lettertype
Deze tekst wordt geschreven in het lettertype Comics Sans MS
Laten we het bestand onder een willekeurige naam opslaan en kijken wat er gebeurt:
Zoals we kunnen zien, werkte alles: de eerste alinea heeft het standaardlettertype, in de tweede alinea stellen we het Batang-lettertype in en in de derde wordt de tekst weergegeven in het Comic Sans MS-lettertype. In principe is alles gemakkelijk en begrijpelijk, maar er is één opmerking. Omdat het opgegeven lettertype niet in het HTML-bestand wordt opgeslagen, is er geen garantie dat het in de browser zoals verwacht wordt weergegeven. We kunnen er niet 100% zeker van zijn dat de computer van de bezoeker het door ons opgegeven lettertype heeft, vooral als dit lettertype niet standaard is. Daarom is het beter om in het face-attribuut ongeveer drie lettertypenamen aan te geven, die gescheiden door komma's worden weergegeven, zodat er zeker één ervan wordt weergegeven. Laten we eens kijken naar een voorbeeld:
Deze tekst zou in Batang of Comic Sans MS moeten verschijnen, of zeker in Arial.
Laten we eens kijken naar het resultaat:
De tekst werd weergegeven in het Batang-lettertype, dat we als eerste specificeerden in het face-attribuut. Werkt dit lettertype niet in de browser van de bezoeker, dan werkt het tweede lettertype - Comic Sans MS, en werkt dit lettertype niet, dan wordt de tekst zeker in het lettertype Arial weergegeven.
Andere lettertype-opties
En laten we om te beginnen eens kijken naar andere lettertype-opties. In de eerste les hebben we al gekeken naar tags die vet en cursief zijn, dit zijn tags En respectievelijk. Laten we nog een paar tags bekijken die de stijl van het lettertype bepalen:
Laten we de tekst onderstrepenLaten we dit gedeelte doorstrepen
en stel het superscript in op het woord bovenkant
Laten we het resultaat bekijken:
We hebben de gehele tekst ingesteld op het lettertype Comic Sans MS, de eerste regel is onderstreept met behulp van de tag , onthoud uit de eerste les dat de tag
maakt een nieuwe regel, de tweede regel wordt doorgestreept dankzij de tag en in de laatste regel plaatsen we het woord "top" in het superscript. Niets ingewikkelds! Met de rest van de tags kun je zelf experimenteren. Als alles je duidelijk is, kun je doorgaan naar de volgende les, waarin we bekijken hoe je de tekstgrootte instelt, maar als je vragen hebt, bekijk dan de gedetailleerde video van deze les.
Een hoogwaardige website-indeling heeft als hoofddoel om de informatie op de pagina zo leesbaar en gemakkelijk mogelijk te maken voor de gebruiker. En het werken met tekst met behulp van HTML is de belangrijkste en basisvaardigheid die u moet hebben bij het werken met websites. In dit artikel wordt beschreven hoe u de tekstgrootte kunt wijzigen met Web Markup Language.
Tekst opmaken met HTML - het is heel eenvoudig
Iedereen die minstens één keer de noodzaak is tegengekomen om websites te maken of te bewerken, was het eerste wat hij vroeg hoe de tekst zo moest worden opgemaakt dat deze aan de gewenste eisen voldoet. Er zijn veel manieren om deze taak te volbrengen, en de eenvoudigste manier is om dit rechtstreeks in het raamwerk van de site zelf te doen met behulp van opmaaktaal. Als u eenmaal weet hoe u de lettergrootte in HTML kunt wijzigen, zal dit in de toekomst geen problemen opleveren.
In dit materiaal zullen we in detail praten over hoe lettertypen worden opgemaakt in HTML-documenten.
Algemene principes voor het bewerken van tekst op webpagina's
Eerst moeten we begrijpen welke mogelijkheden HTML ons biedt voor het opmaken van tekst. Er zijn drie hoofdkenmerken van een lettertype: lettertype (een kenmerk dat de weergave van letters en tekens bepaalt), kleur en grootte. De leesbaarheid van elk document hangt af van hoe goed deze kenmerken worden gecombineerd.
De kenmerken van tekst in HTML-opmaak worden gewijzigd met behulp van tags en attributen. Een tag is het hoofdonderdeel van de taal, de belangrijkste logische eenheid, en het attribuut wordt gebruikt om een specifieke waarde in te stellen voor elk pagina-element dat met de tag is gemarkeerd.
Het is ook noodzakelijk om te onthouden dat de weergave van tekst kan variëren bij gebruik van verschillende browsers. Voordat u het werk op de site voltooit, moet u er dus voor zorgen dat de informatie correct wordt weergegeven in alle belangrijke gebruikte browsers. Zo kan de lettergrootte in html bij gebruik van oudere versies van Internet Explorer afwijken van nieuwe versies.
Label
De belangrijkste tags die worden gebruikt bij het opmaken van tekst op een webpagina zijn En .
Gekoppelde tag is verantwoordelijk voor alle kenmerken van opgemaakte tekst, die worden gespecificeerd met behulp van de overeenkomstige attributen. Deze tag is het meest begrijpelijk en handig om te gebruiken bij het opmaken van pagina's.
Omdat we vooral geïnteresseerd zijn in het wijzigen van de lettergrootte in HTML, zullen we het size attribuut moeten gebruiken.
Het ziet er zo uit:
Tekst komt hier
De waarde van de HTML-lettergrootte wordt gespecificeerd in numerieke eenheden van 1 (kleinste) tot 7 (grootste). Traditioneel wordt aangenomen dat de gemiddelde waarde 3 is (overeenkomend met maat 13,5 in het Times New Roman-lettertype).
Als u dus de volgende code aan de hoofdtekst van het document toevoegt, ziet u wanneer u de pagina in de browser opent, hoe de tekstgrootte verandert afhankelijk van de ingestelde waarde.
Lettergrootte 1
Lettergrootte 2
Lettergrootte 3
Lettergrootte 4
Lettergrootte 5
Lettergrootte 6
Lettergrootte 7
Naast absolute numerieke waarden kunnen ook relatieve waarden worden gebruikt. Deze tag wordt hiervoor ook gebruikt. De html-lettergrootte, zoals hierboven vermeld, is standaard ingesteld op 3, dus op basis hiervan kunt u gehele numerieke waarden optellen of aftrekken om het gewenste resultaat te krijgen. Dit is hoe het eruit ziet:
Tekst komt hier
Met deze waarde wordt de lettergrootte ingesteld op 6. U kunt in uw browser testen hoe dit werkt en experimenteren met verschillende combinaties van numerieke waarden.
Een label gebruiken U kunt de lettergrootte en kleur in HTML wijzigen. Om de kleur te wijzigen, gebruikt u het kleurattribuut en de hexadecimale kleurcode.
Om de noodzakelijke wijzigingen aan te brengen, volgen de attributen elkaar op volgorde in de hoofdtekst van één tag , is het niet nodig om ze van elkaar te scheiden met leestekens.
Label
Deze tag heeft een breder scala aan mogelijkheden en kenmerken dan . Het wordt meestal gebruikt in combinatie met CSS om bepaalde delen van het document te bewerken en op te maken.
Voor deze tag worden waarden ingesteld met behulp van het stijlattribuut. Zo ziet het eruit in code:
Tekst komt hier
Zoals u kunt zien, wordt hier de CSS-code (lettergrootte) gebruikt en wordt de grootte ingesteld met behulp van punten (pt, punt). De standaardwaarde is 12pt, die kan worden gewijzigd door deze met een geheel getal te verhogen of te verlagen.
De lettergrootte wijzigen bij het opmaken van koppen
Vaak moet u de lettergrootte in HTML verkleinen of vergroten wanneer u kopteksten bewerkt. In dit geval is het niet alleen de taak om de grootte te wijzigen, maar ook om logisch een bepaald deel van de tekst te selecteren en dit als titel voor het tekstblok toe te wijzen.
In dit geval is het raadzaam om tags te gebruiken
— . Label - Dit is de kop van het eerste niveau. Het wordt het grootst weergegeven in de browser en tags uit naar gebruikt om subkoppen te markeren.
- Dit is de kop van het eerste niveau. Het wordt het grootst weergegeven in de browser en tags uit naar gebruikt om subkoppen te markeren.
gebruikt om subkoppen te markeren.
Koptekst van het eerste niveau
Specifieke parameters voor deze tag worden ingesteld met behulp van CSS - op deze manier kunt u een specifieke tekstgrootte, kleur en lettertype instellen.
We hebben dus gekeken naar de belangrijkste manieren om de lettergrootte in HTML te wijzigen. Deze informatie is voldoende om een overzichtelijke webpagina te maken die gemakkelijk te lezen is.
Houd voor uw gemak rekening met de volgende aanbevelingen:
- Bij het ontwerpen moet je je niet beperken tot HTML. Zodra u de basisbeginselen van het bouwen van een website onder de knie heeft, kunt u beginnen met het leren van CSS. Dit opent nieuwe horizonten bij het maken van webpagina's.
- Het testen van de voltooide website in verschillende browsers en op verschillende platforms mag niet worden verwaarloosd. Zoals hierboven vermeld, kunnen tekstparameters aanzienlijk verschillen, vooral bij gebruik van verouderde versies van browsers.
- Gebruik altijd spaties en tabs bij het schrijven van code. Dit maakt het gemakkelijker om te lezen en te begrijpen.
- Codecommentaar is niet alleen een hulpmiddel voor gemakkelijk begrip, maar ook een teken van goede manieren onder ontwikkelaars.
Hoe de lettergrootte in HTML op een website te wijzigen.
Ons leven bestaat uit alledaagse kleine dingen die op de een of andere manier ons welzijn, ons humeur en onze productiviteit beïnvloeden. Ik heb niet genoeg geslapen - mijn hoofd doet pijn; Ik dronk koffie om de situatie te verbeteren en op te vrolijken, maar ik werd prikkelbaar. Ik wil heel graag alles voorzien, maar dat lukt gewoon niet. Bovendien geeft iedereen in de buurt, zoals gewoonlijk, advies: gluten in brood - kom er niet in de buurt, het zal je doden; Een chocoladereep op zak is een directe weg naar tandverlies. We verzamelen de meest populaire vragen over gezondheid, voeding en ziekten en geven er antwoorden op, zodat u beter begrijpt wat goed is voor uw gezondheid.
Gebruik een tag om het lettertype te wijzigen met het FACE-attribuut. U kunt het lettertype opgeven op naam (Arial, Tahoma, Verdana) of type (bijvoorbeeld monospace). Het is raadzaam om meerdere lettertypenamen op te geven om te voorkomen dat de gebruiker het vereiste lettertype niet geïnstalleerd heeft. Ik raad aan om minimaal één van de algemeen geaccepteerde lettertypen te gebruiken (bijvoorbeeld Arial). Ik raad af om meer dan 2-3 verschillende lettertypen op één pagina te gebruiken, anders ziet de pagina er onhandig en onprofessioneel uit.
Voorbeeld:
De lettergrootte van een HTML-pagina wijzigen
Gebruik het SIZE-attribuut om de lettergrootte te wijzigen. Hoe groter het lettertype, hoe gemakkelijker de tekst leesbaar wordt. Met een klein lettertype kunt u echter meer informatie op het scherm passen. Dit attribuut gebruiken met een tag
U kunt het lettertype wijzigen met behulp van tags En . vergroot het lettertype van het opgegeven fragment ten opzichte van de vorige tekst, en vermindert dienovereenkomstig.
Door de grootte van individuele letters te veranderen, kunt u interessante effecten bereiken. Op deze manier kunt u bijvoorbeeld een sierhoofdletter krijgen: een grote hoofdletter aan het begin van een alinea.
Voorbeeld:
De letterkleur van een HTML-pagina selecteren
Het weergeven van gedeelten van de tekst van een webpagina in verschillende gekleurde lettertypen maakt het aantrekkelijker.
Het TEXT-attribuut gebruiken in de context van een tag
, kunt u de volledige tekstkleur van een webpagina wijzigen. Het COLOR-attribuut toepassen met een tag (heeft een hogere prioriteit) biedt u de mogelijkheid om te communiceren met de weergave van een enkel stuk tekst.Om de tekstkleur te wijzigen, moet u de naam van de kleur of de hexadecimale code ervan kennen. De code bestaat uit het hekje # en een getal dat de intensiteit van de rode, groene en blauwe componenten van de kleur vertegenwoordigt. Er kunnen slechts 16 standaardkleuren bij naam genoemd worden.
Kleurnaam Code aqua ##00FFFF zwart ##000000 blauw ##0000FF fuchsia ##FF00FF grijs ##808080 groen ##008000 limoen ##00FF00 kastanjebruin ##800000 marineblauw ##000080 olijf ##808000 paars ##800080 rood # #FF0000 zilver ##C0C0C0 blauwgroen ##008080 wit ##FFFFFF geel ##FFFF00
98,9KIn HTML speelt de lettergrootte een belangrijke rol. Hiermee kunt u de aandacht van de gebruiker vestigen op belangrijke informatie die op de sitepagina wordt geplaatst. Hoewel niet alleen de grootte van de letters belangrijk is, maar ook hun kleur, dikte en zelfs familie.
Tags en attributen bij het werken met HTML-lettertypen
Hypertext-taal heeft een breed scala aan hulpmiddelen voor het werken met lettertypen. Tekstopmaak is immers de hoofdtaak van html.
De reden voor de creatie van de HTML-taal was het probleem van het weergeven van tekstopmaakregels in browsers.
Laten we eens kijken naar de tags die worden gebruikt om met lettertypen in HTML te werken en hun attributen. De belangrijkste is de tag . Met behulp van de waarden van de attributen kunt u verschillende kenmerken van het lettertype instellen:
- kleur – stelt de tekstkleur in;
- grootte – lettergrootte in conventionele eenheden.
Positieve attribuutwaarden van 1 tot 7 worden ondersteund.
- gezicht – gebruikt om de tekstlettertypefamilie in te stellen die in de tag zal worden gebruikt . Er worden verschillende waarden ondersteund, gescheiden door komma's.
Alleen de tekst die zich tussen de delen van de gekoppelde lettertypetag bevindt, wordt opgemaakt. De rest van de tekst wordt weergegeven in het standaard standaardlettertype.
Ook in HTML zijn er een aantal gepaarde tags die slechts één opmaakregel specificeren. Deze omvatten:
- — stelt vet lettertype in html in. Label vergelijkbaar in actie met de vorige;
- — het formaat is groter dan de standaard;
- — kleinere lettergrootte;
- — cursieve tekst (cursief). Gelijkaardig label ;
- — tekst met onderstreping;
- doorgestreept;- — tekst alleen in kleine letters weergeven;
- - in hoofdletters.
Platte tekst
Vette tekst
Vette tekst
Meer dan normaal
Minder dan normaal
Cursief
Cursief
Met onderstrepingsteken
Doorgestreept
Mogelijkheden voor stijlkenmerken
Naast de beschreven tags zijn er nog verschillende manieren om het lettertype in html te wijzigen. Eén daarvan is het gebruik van het generieke stijlattribuut. Met behulp van de waarden van de eigenschappen kunt u de weergavestijl van lettertypen instellen:
1) font-family – de eigenschap stelt de lettertypefamilie in. Het is mogelijk om meerdere waarden op te geven.
Het wijzigen van het lettertype in html naar de volgende waarde zal plaatsvinden als de vorige familie niet op het besturingssysteem van de gebruiker is geïnstalleerd.
Syntaxis schrijven:
lettertypefamilie: lettertypenaam [, lettertypenaam[, ...]]
2) lettergrootte – de grootte is ingesteld van 1 tot 7. Dit is een van de belangrijkste manieren waarop u het lettertype in HTML kunt vergroten.
Syntaxis schrijven:
lettergrootte: absolute grootte | relatieve grootte | betekenis | interesse | erven
U kunt ook de lettergrootte instellen:
- In pixels;
- In absolute termen ( xx-klein, x-klein, klein, middelgroot, groot);
- In procenten;
- In punten (pt).
Lettergrootte: 7
Lettergrootte: 24px
Lettergrootte: x-groot
Lettergrootte: 200%
Lettergrootte: 24pt
3) lettertypestijl – stelt de schrijfstijl van het lettertype in. Syntaxis:
lettertype: normaal | cursief | schuin | erven
Waarden:
- normaal – normale spelling;
- cursief – cursief;
- schuin – lettertype schuin naar rechts;
- inherit – neemt de spelling van het bovenliggende element over.
Een voorbeeld van hoe u het lettertype in HTML kunt wijzigen met behulp van deze eigenschap:
lettertypestijl: overnemen
lettertype: cursief
lettertype: normaal
lettertype: schuin
4) lettertypevariant – converteert alle hoofdletters naar hoofdletters. Syntaxis:
lettertypevariant: normaal | smallcaps | erven
Een voorbeeld van hoe u het lettertype in html met deze eigenschap kunt wijzigen:
lettertypevariant: overnemen
lettertype-variant:normaal
lettertypevariant: small-caps
5) font-weight – hiermee kunt u de dikte van de tekst (verzadiging) instellen. Syntaxis:
lettertype-gewicht: vet|vetder|lichter|normaal|100|200|300|400|500|600|700|800|900
Waarden:
- vet – stelt het HTML-lettertype in op vet;
- brutaler – brutaler ten opzichte van normaal;
- lichter – minder verzadigd ten opzichte van normaal;
- normaal – normale spelling;
- 100-900 – stelt de letterdikte in numeriek equivalent in.
lettertypegewicht:vet
lettertypegewicht: vetter
lettertypegewicht: lichter
lettertypegewicht: normaal
lettertypegewicht:900
lettertypegewicht: 100
html-lettertype-eigenschap en letterkleur
Lettertype is een andere containereigenschap. Binnen zichzelf combineerde het de waarden van verschillende eigenschappen die bedoeld waren voor het wijzigen van lettertypen. lettertype syntaxis:
lettertype: lettergrootte lettertypefamilie | erven
De waarde kan ook worden ingesteld op de lettertypen die door het systeem worden gebruikt in de labels op verschillende bedieningselementen:
- bijschrift – voor knoppen;
- pictogram – voor pictogrammen;
- menu-menu;
- message-box – voor dialoogvensters;
- small-caption – voor kleine bedieningselementen;
- statusbalk – statusbalklettertype.
De lettertypekleur op de site kan worden ingesteld met behulp van HTML-code. Hier is een label voor lettertype. Per definitie een label lettertype dient als een soort “wrapper” of “container” voor tekst, door de eigenschappen te controleren waarvan u het ontwerp van de tekst kunt wijzigen.
Label lettertype geldt als volgt:
Websitebouwer "Nubex"
De eenvoudigste manier om de kleur van het lettertype in HTML te wijzigen, is door het attribuut te gebruiken kleur label lettertype:
Websitebouwer "Nubex"
Hiermee wordt de kleur blauw ingesteld voor het woord omgeven door de tag lettertype.
Maar naast de kleurparameter heeft de tag nog andere attributen.
FONT-tagkenmerken
Label lettertype heeft slechts drie kenmerken:
- kleur- stelt de tekstkleur in;
- maat- stelt de tekstgrootte in;
- gezicht- specificeert de lettertypefamilie.
Parameter kleur kan worden gespecificeerd door een kleurnaam (bijvoorbeeld “rood”, “blauw”, “groen”) of een hexadecimale code (bijvoorbeeld #fa8e47).
Attribuut maat kan waarden aannemen van 1 tot 7 (de standaardwaarde is 3, wat overeenkomt met 13,5 punten voor het Times New Roman-lettertype). Een andere optie voor het specificeren van het attribuut is “+1” of “-1”. Dit betekent dat de maat ten opzichte van de basis respectievelijk 1 meer of minder wordt gewijzigd.
Laten we eens kijken naar het gebruik van deze attributen in ons voorbeeld:
Websitebouwer "Nubex"
We hebben de tag toegepast lettertype voor één woord hebben we het ingesteld op maat 6, oranje kleur en de lettertypefamilie "Serif".
Tekstkleur instellen met CSS
Als u specifieke opmaak moet toepassen (bijvoorbeeld de tekstkleur wijzigen) op verschillende tekstgedeelten, dan is het geschikter om CSS-code te gebruiken. Hiervoor bestaat een kleurattribuut. Laten we eens kijken hoe we het in ons voorbeeld kunnen gebruiken:
Constructeur sites "Nubex"
Hier stellen we een blauwe kleur in voor het woord “Designer” (de grootte is standaard 100% van de basis), een groene kleur en een grootte van 125% voor het woord “sites”, een oranje kleur en een grootte van 150% voor het woord “Nubex”.
