How to Post HTML Text in a Scroll Box
You may create different kinds of scroll boxes in HTML, including using a div element that sets the overflow property to "scroll," or by using a text area tag, which automatically creates a scroll bar even if its contents are empty. If you try to display HTML as text in scroll boxes, the browser either interprets the code as HTML, or the page doesn't validate if you use an HTML checker. This happens because the "<" and ">" signs are reserved characters in HTML. Use character entities to display HTML as text in scroll boxes as a work-around.
Other People Are Reading
Instructions
-
-
1
Open an HTML file. Insert the cursor where you want to create a scroll box.
-
2
Type the following:
<div style="height:120px; width:500px; overflow:scroll;">
<a href="mysite.html">Go to my site!</a>
<br/>
Some extra text.
</div>
This creates a box 120 pixels tall and 500 pixels wide. The scroll bars are disabled unless you add more text that does not fit without scrolling. In this case, the anchor tag appears as text. The visitor sees "<a href="mysite.html">Go to my site!</a>" in the box, but the browser interprets the line break tag as HTML and inserts a new line.
-
-
3
Type the following:
<textarea rows="5" cols="50">
<a href="mysite.html">Go to my site!</a>
<br/>
Some extra text.
</textarea>
This code creates a text area that has five rows and 50 columns. Only a vertical scroll bar is displayed, but it is disabled unless the text within the box does not fit without scrolling. None of the text in the box converts to HTML and remains displayed as text. This does not pass as valid HTML, because HTML checkers do not allow other tags within text area tags. Change "<br/>" to "<br/>" and it validates correctly.
-
4
Save the HTML file.
-
1
