How to Use Notepad as an Alternative to Word
Use Notepad and HTML to Imitate a Rich Text Editing Program
New computers and tablets often come with only a trial version of rich text editing programs MS Word. Although Open Office is a freeware open-source substitute for Microsoft Office and Word, you don't strictly need anything other than a plain text editor (such as Notepad) and a web browser (such as Chrome) to create documents that look like they were made in Word. And you don't need an internet connection to pull it off.
You're probably wondering how this is possible when plaint text editors like Notepad and TextEdit can only make documents that look like this:
But using Notepad or TextEdit to create an HTML page, you can make printable Word-like documents like the short sample resume below.
Believe it or not, the document in the image above was created with nothing more than the program Notepad, a web browser, and knowledge of HTML. To be fair, it does take a little more work to create Word-like documents this way, but with practice and some of the copy-paste templates given in this tutorial, anyone can create richly formatted printable documents.
Step 1: Basic HTML Skeleton
To make a document with the same formatting available in Word, first paste the following code skeleton into the plain text editor. This is the outline for a simple essay.
<html> <body style="width:100%px;padding-left:10%;padding-right:10%;padding-top:10%;padding-bottom:10%"> <h1 style="text-align:center;font-family:serif;font-size:24px;">Your Title Here<h1> <h2 style="text-align:center;font-family:serif;font-size:20px;">Your Name Here</h2> <br><br> <p style="font-family:serif;font-size:15px;line-height:150%"> 1st paragraph here <br><br> 2nd paragraph here <br><br> 3rd paragraph here </p> <br><br> <h2 style=text-align:center;font-family:serif;font-size:20px;">References</h2> <p style="font-family:serif;font-size:15px;line-height:150%"> Reference 1 <br><br> Reference 2 <br><br> Reference 3 </p> </body> </html>
Fill in the title, byline, paragraphs, and references with your actual content. Then save the document as "whatever.html" using quotes to force it to save as an html file type, rather than as a ".txt" file which is the default. Next, close the document, right click on it wherever you have saved it, and select "Open With" to open the document with a web browser such as Chrome, Safari, or Firefox. This will open the file as a webpage.
Now you will see the document as a local webpage on your web browser. Right click on the screen to access the print menu.
In Chrome and other browsers you can change the margins from the browser's print menu. When you are satisfied with the margins of the document, hit Print (or Save to PDF if you prefer that option)
More Rich Formating
HTML makes it possible to add other rich formatting to your documents such as tables, bulleted lists, columns, inserted images, different font sizes and colors, and more.
How to Include a Bullet Point List
To make a list with bullets or numbers, use the following codes:
<ul> <li>first item of a bulleted list</li> <li>second item</li> <li>third item</li> </ul> <ol> <li>first item of a numbered list</li> <li>second item</li> <li>third item</li> </ol>
How to Include a Table
To make a table with 4 rows and 3 columns, use the following code. The number of "tr" tags is the number of rows of the table, and the number of "td" tags within each "tr" set is the number of columns.
<table> <tr> <td>blah</td> <td>blah</td> <td>blah</td> </tr> <tr> <td>blah</td> <td>blah</td> <td>blah</td> </tr> <tr> <td>blah</td> <td>blah</td> <td>blah</td> </tr> <tr> <td>blah</td> <td>blah</td> <td>blah</td> </tr> </table>
To change the borders, padding inside cells, and alignment of text inside cells, you can adapt the following code elements.
<table width=100% cellpadding=6px cellspacing=0px border=1px style="border-collapse:collapse"> <tr> <td align=right width=25%>blah</td> <td align=center width=25%>blah</td> <td alight=left width=25%>blah</td> <td width=25%>blah</td> </tr> <tr> <td valign=top>blah</td> <td valign=center>blah</td> <td valign=bottom>blah</td> <td>blah blah blah blah blah blah blah blah</td> </tr> </table>
Specifying the width of the cells in the top row as percents will allow you to make all the column widths equal regardless of the length of the text inside the cells. You can just as easily change the percents to make some columns narrower or wider than others.
You can use a one-row two-column table with no border to produce text that fills two columns on the page, like a newspaper or newsletter.
To insert an image, first save the image you want embed in the same directory or folder as your text document. Let's say the name of the image is "mypicture.jpg" and its size is 300 pixels wide by 400 pixels tall. If you embed the image with the following code, it will have the same size on your screen.
However, if you decide that the image is too large and you want to make it smaller, you can rescale it with the following code that reduces both the height and the width by 50%.
<img src="mypicture.jpg" style="width:150px; height:200px">
You can make the width and height any number of pixels you want, but to maintain the same aspect ratio, the ratio of specified width to specified height in the html must be equal width-to-height ratio of the original image. If you make a different ratio, you will stretch or shrink the image in one direction. If you make the width and/or height larger than the original, you will lose resolution and the image on the screen will look blurry or pixelated.
Fonts, Font Sizes, Colors, Bold, Italics, Underlines
Font size can be specified in pixels or ems (16 pixels equal 1 em). To set a font size for a particular HTML element, use the style attribute like this:
<p style="font-size:14px"> this is a paragraph with font size 14 pixels </p> <table style="font-size:2em"> <tr> <td>this is a one-cell table with font size 2 ems</td> </tr> </table>
To change the font to Arial, Times, Georgia, Courier, -- or heaven forbid, Comic Sans -- you use the style attribute in a similar manner as above. If the name of the font is more than one word, use ' ' quotes around it. In case a font is not available on the device, you should also specify the font type (serif, sans-serif, or monospace) as a back up so the page will render in the closest default available.
<p style="font-family:'Times New Roman', serif">Times New Roman font</p> <p style="font-family:'Comic Sans', sans-serif">Comic Sans font</p> <p style="font-family:'Trebuchet MS', sans-serif">Trebuchet font</p> <p style="font-family:'Lucida Console', monospace">Lucida Console font</p> <p style="font-family:Verdana, sans-serif">Verdana font</p> <p style="font-family:Arial, sans-serif">Arial font</p> <p style="font-family:Georgia, serif">Georgia font</p>
To change the color of text or the background of a table, use the hexadecimal color codes for the most precision. The default color for text is black with code #000000; the default background color for tables is white with code #FFFFFF.
<p style="color:#3F3F3F"> This is a paragraph written in dark gray text. </p> <p style="color:#0E7022"> This is a paragraph written in dark green text. </p> <table style="background-color:#E9E9E9"> <tr> <td>This is a one-cell borderless table with a light gray background color. </td> </tr> </table>
To make bold, italics, underlines, superscripts, subscripts, and strike-throughs, use the following HTML tags.
<b>This is bold.</b> <strong>This is also bold.</strong> <i>This text is italicized.</i> <em>This text is also italicized.</em> <u>This text is underlined.</u> <strike>This text has a line through it.</strike> <p>Here is a superscript <sup>2</sup>.<p> <p>Here is a subscript <sub>3</sub>.</p>
Combining Rich Text Formatting Elements
Using in-line CSS you can combine multiple styles to customize the text. For example to make the top row of a table have a light gray background, bigger font, and different font from the rest of the document, you could use the following code.
<table border=1px cellpadding=6px style="border-collapse:collapse"> <tr style="background-color:#E4E4E4;font-size:30px;font-family:Georgia;"> <td>blah</td> <td>blah</td> <td>blah</td> <td>blah</td> </tr> <tr> <td>blah</td> <td>blah</td> <td>blah</td> <td>blah</td> </tr> </table>
In HTML with in-line CSS, there are multiple ways to achieve the same effect. For example, if you want to make the items in a bullet point list italicized in red, any of the following codes will work.
<span style="color:#E01111;font-style:italic"> <ul> <li>item</li> <li>item</li> <li>item</li> </ul> </span> <ul style="color:#E01111;font-style:italic"> <li>item</li> <li>item</li> <li>item</li> </ul> <i style="color:#E01111"> <ul> <li>item</li> <li>item</li> <li>item</li> </ul> </i>
Where to Learn More HTML
Anyone can teach themselves how to code simple webpages in HTML (and CSS for customization of fonts and such), and in turn use NotePad as a makeshift rich text editor like MS Word. A good way to learn which commands produce various effects is to look at the source codes of webpages. There you can see the raw HTML code for each element on the page. Three other good resource are W3Schools, Tizag, and Mozilla's developer page of HTML tags.