Hur man skapar en kantlinje runt text i HTML

November 12

Hur man skapar en kantlinje runt text i HTML


När du arbetar med Hypertext Markup Language (HTML), lära sig att utföra vissa uppgifter, som att skapa en ram runt text, så att du har ännu mer kontroll över visningen av din sida. Cascading Style Sheets (CSS) arbetar med HTML för att skapa en kontur runt ditt innehåll. På så sätt har du möjlighet att lyfta fram viktiga data så att dina besökare inte missa det. Använda textredigerare som följde med datorn, öva skapa gränser runt din HTML-innehåll.

Instruktioner

1 Starta datorns textredigerare och börja ett nytt dokument.

2 Skriv in HTML-koden som skapar en webbsida:

<Html>

<Head>

<Title> Skriv in ett namn för din webbsida här </ title>

</ Head>

<Body>

</ Body>

</ Html>

3 Skriv in texten på din webbsida mellan "<body> </ body>" taggar.

4 Skriv in "<div> </ div>" taggar före och efter ditt innehåll. Dessutom anger "style =" i öppningen "<div>" taggen för att förbereda den för inline CSS-regel som skapar gränsen. Till exempel:

<Body>

<Div style = "">

Detta är den text som har en ram runt det.

</ Div>

</ Body>

5 Ange "bredd" och "höjd" beteckningar som anger mätningar av gränsen. Skriv in ett numeriskt värde i pixlar (px) efter "width" och "height" enligt följande:

<Div style = "width: 150px; height: 150px;">

Detta är den text som har en ram runt det.

</ Div>

6 Skriv in en "border" attribut för att tilldela utseendet på gränsen. Ange ett värde i pixlar för att ange bredden och skriva in namnet på en färg. Vidare anger en egenskap, såsom "fast" eller "prickad" för att ange hur linjen visas. Att illustrera:

<Div style = "width: 150px; height: 150px; kant: 3px fast rött;">

Detta är den text som har en ram runt det.

</ Div>

7 Spara filen med ett "HTM" eller "HTML" filändelsen (förlängning). Starta webbläsaren och välj "Öppna" eller "Open File" alternativ under menyn "File" för att öppna dokumentet och se gränsen runt din text.


        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2020 Astrixsoft.com | Contact us: webmaster# astrixsoft.com