Tekst vet maken met HTML

Schrijver: Marcus Baldwin
Datum Van Creatie: 16 Juni- 2021
Updatedatum: 24 Juni- 2024
Anonim
Learn HTML code: bold text
Video: Learn HTML code: bold text

Inhoud

Met de HTML-opmaaktaal kunt u zonder problemen tekst vet maken, en zelfs op meerdere manieren tegelijk. Het is echter beter als u een paar minuten besteedt aan het bestuderen van de basisregels van trapsgewijze stylesheets - CSS, en deze aan het document toevoegt zodat u er later aan kunt werken. Het komt erop neer dat het veel gemakkelijker is om het uiterlijk van een webpagina vanuit CSS te regelen, ook wanneer iets vetgedrukt moet worden gemarkeerd.

Stappen

Methode 1 van 2: Maak vetgedrukte tekst met HTML

  1. 1 sterk> Gebruik de tag sterk / sterk>. In HTML5 is dit volgens de specificatie de beste manier om tekst te markeren. Deze tag maakt de tekst bijna altijd vetgedrukt.
    • Plaats de tekst die u wilt markeren binnen de tags: sterk>hier/ sterk>.
  2. 2 Gebruik koppen indien van toepassing. Meestal worden ze bovenaan de pagina of aan het begin van een nieuwe sectie geplaatst. Standaard worden koppen groter en vetter weergegeven dan normale tekst, hoewel er ook hier enkele subtiliteiten zijn. Er zijn zes koppen, van 1 tot 6: h1> - h6>. Volg deze richtlijnen bij het gebruik ervan:
    • De h1 kop is als volgt geschreven: h1> eerste niveau kop / h1>, en dit is de belangrijkste, grootste kop van de pagina.
    • h2> Kop h2 / h2> - voor de tweede belangrijkste kop, enzovoort tot aan de h6> kop h6, de kleinste van allemaal / h6>.
    • U moet koppen zorgvuldig en met mate gebruiken, uitsluitend om de inhoud van de pagina te ordenen. De gebruiker moet de titel zo snel mogelijk kunnen zien om te begrijpen of de gewenste inhoud eronder staat.
    • Bij het maken van subkoppen is het de moeite waard om slechts één niveau per keer naar beneden te gaan. Met andere woorden, het is niet nodig om na h1> onmiddellijk h3> te plaatsen. Op deze manier zal de pagina-opmaak niet mislukken bij het converteren naar een ander formaat.
  3. 3 b> Gebruik als laatste redmiddel de b / b>-tag. De b>-tag wordt nog steeds ondersteund in HTML5, maar veel beter. U kunt b> gebruiken wanneer de tekst is gemarkeerd voor stilistische, niet-semantische doeleinden - bijvoorbeeld om trefwoorden of woordenschatwoorden, productnamen, enzovoort te markeren.
    • Zoals de meeste tags, is b> een paar dat de / b>-tekst bestuurt die erin wordt geplaatst.

Methode 2 van 2: Maak vetgedrukte tekst met CSS

  1. 1 Onthoud wanneer je CSS moet gebruiken. CSS is een zeer krachtige en handige tool voor het bewerken van het uiterlijk van een pagina. Eigenlijk is CSS hoe de pagina "eruit ziet", terwijl HTML is wat het "betekent". Natuurlijk is er niets mis met HTML-tags, ze kunnen worden gebruikt, maar het is beter om met CSS te werken - je hebt meer controle over hoe je tekst eruit zal zien.
    • Open een eenvoudige HTML-pagina in verschillende browsers. Merk op hoe het er in elk iets anders uitziet? CSS kan helpen dit verschil tot een minimum te beperken.
  2. 2 Voeg een span>-tag toe aan de tekst. Als je nog geen CSS hebt, moet je beginnen met de zogenaamde "inline CSS" - "inline style sheets", als je wilt. Dit kan natuurlijk worden gebruikt om het uiterlijk van tags zoals p> of h1> te wijzigen, maar soms kunt u ook tekst wijzigen die nog niet in tags is opgenomen. De span> / span>-tag is als een wrapper die op zichzelf geen effect of effect heeft, maar ons de mogelijkheid geeft om de nodige wijzigingen aan de pagina aan te brengen. Hier is een voorbeeld:
    • span> Ik leer hoe ik tekst vet kan maken met inline CSS ./span>
  3. 3 Voeg het stijlkenmerk toe. Attributen in HTML worden direct in de tag geschreven, direct in de selectievakjes>. Het stijlkenmerk is vereist om CSS in een HTML-tag in te voegen, dus voeg in stijl = in de span-tag:
    • span style => Ik leer hoe ik tekst vet kan maken met inline CSS ../ span>
    • Waarom een ​​stijlkenmerk toevoegen als u de stijl zelf niet toevoegt? Denk goed. Maar hier zetten we alles stap voor stap uiteen!
  4. 4 Voeg de eigenschap font-weight toe. De CSS-eigenschappen worden toegevoegd als onderdeel van het attribuut, in dit geval als onderdeel van het stijlattribuut, namelijk "font-weight" (letterlijk gewicht). Deze eigenschap kan worden gebruikt om de stijl van een lettertype op te geven, niet alleen vet, maar ook extra vet, dun of normaal. Schrijf na het = teken "lettertype dikte:"... Het zou er ongeveer zo uit moeten zien:
    • span style = "font-weight:"> Ik leer hoe ik tekst vet kan maken met inline CSS ../ span>
    • Pauzeer voor nu, schrijf niets anders (en ja, er komt nog meer).
    • Vergeet niet om aanhalingstekens voor en na te plaatsen lettertype dikte:.
  5. 5 Voeg de vetgedrukte waarde toe. Wat is er over? Dat klopt, stel de eigenschap attribuut in op een waarde! Waar moet je het invoegen? Dat klopt, tussen lettertype dikte: en een afsluitend citaat. Deze eigenschap heeft verschillende varianten, die verschillen in vrijmoedigheid, en de gemakkelijkste manier is om de waarde te gebruiken stoutmoedig:
    • span style = "font-weight: bold"> Ik leer hoe ik tekst vet kan maken met inline CSS./span>
  6. 6 Experimenteer met andere waarden. CSS is veel krachtiger dan HTML, dus voel je niet gebonden aan handen en voeten. Hier zijn enkele alternatieven voor vet:
    • span style = "font-weight: bolder"> "Bolder" - op deze manier zal de tekst altijd dikker zijn dan het bovenliggende element, ongeacht hoe vet het is. / span> Als de hele alinea is geselecteerd met "bold", dan "bolder" zal helpen om nog meer gedurfd te markeren, laten we zeggen, een afzonderlijke zin die erin staat.
    • span style = "font-weight: normal"> "Normal" - dergelijke tekst ziet er zoals gewoonlijk uit, zelfs binnen een tag die de tekst vet maakt. / span>
    • span style = "font-weight: 900"> Om het gewicht van de tekst in te stellen, kunt u waarden gebruiken van 100 tot 900. 400 - normale stijl, vet - vanaf 700 en hoger. / span>

Tips

  • Gebruik bij het gebruik van numerieke waarden voor gewicht in CSS veelvouden van 100. Alle andere waarden worden nog steeds naar boven afgerond.
  • Een extern CSS-bestand is natuurlijk veel handiger dan wat in dit artikel wordt beschreven - op deze manier is het mogelijk om het uiterlijk van alle pagina's van de site vanuit één bestand tegelijk te regelen!
  • Je kunt een lettertype niet dikker maken dan oorspronkelijk bedoeld door typografen. Houd er bij het werken met CSS rekening mee dat het lettertype zal veranderen volgens de standaard. Dienovereenkomstig zult u het verschil tussen de twee vetgedrukte lettertype-opties niet zien (meer precies, u kunt het zien - maar het hangt al af van het lettertype).