I am new to website design and am taking a course at the local community college. One of our tasks is to use pre-formatting in one section. I want to use tabs to align information and also keep word wrap functioning. My problem is with white space. Here is my basic layout:
Topic header
(tab) a. (info with web link)
(tab) b. (info with web link)
(tab) c. Just text info
I am also trying to keep some consistency between the way my coding (in Notepad++) and the actual website will look (knowing where lines will actually wrap in the site vs. in the code.)
The best way to do something like this is with the ordered list element. Here is a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
ol {list-style-type: lower-alpha }
</style>
</head>
<body>
<ol>
<li><a href="">Info with web link</a></li>
<li><a href="">Info with web link</a></li>
<li>Just text info</li>
</ol>
</body>
</html>
However, you can’t just cut and paste text from Notepad to do that. If you really want to do it that way (which is not really how to build a web page, but anyhow …) you could just copy the text from Notepad, paste it into your web page, and wrap <pre> tags around it (which “preserve” the formatting):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<pre>
a. (info with web link)
b. (info with web link)
c. Just text info
</pre>
</body>
</html>
That won’t create active links, though, so you’d have to type in the <a> tags as I did in the first example.