Writer's Cafe Wizardry - Lesson 10

Make rounded boxes directly from HTML, have custom background images for your writing, and learn how to add superscript, subscript, and strikethrough directly into your text. Bonus, process manager.

Writer's Cafe Wizardry - Ch 10   Want to read this in a different language ? Change the TO field to your own country and click the TRANSLATE button after going HERE LESSON TEN - August 13th 2013 < > Good afternoon, class ! Let's begin. Last week you were introduced to the ability to change the background color of the page in your writing. But wouldn't it be more interesting to have TEXTURES to your page ? so that it appears like cloth or old paper ? To do so, you need once again to create a new HTML table: <center><table cellpadding="0" cellspacing="0" border="0" width="688px"><tr> Now instead of a background color you want a background IMAGE so tack on to the end of that: <td style="background:url('http://image.png');"> Change the http://image.png to the URL address of a background image. You can either provide your own or use one from a nice collection provided HERE: Simply right-click on any of these seamless patterns (they are much bigger than they appear), and select Copy Image Location. Then replace that http://image.png with the URL you copied (CTRL-V). So for instance, if you chose the 4th background pattern across and 3rd down, you would type in toto: <center><table cellpadding="0" cellspacing="0" border="0" width="688px"><tr> <td style="background:url('http://www.unsigneddesign.com/Seamless_background_textures/thumbs/seamlesstexture16_1200.jpg');"> Then type out whatever you want to appear in this area. Then when you are ready to return to your default white page, close it up with: </td></tr></table> And you are done ! Remember you must SAVE your page and re-edit it again in order to have your changes appear. * * * This next part deals with adding rounded boxes to your writing WITHOUT have to draw them in a paint program. Believe it or not, current HTML is quite ready and capable of creating rounded frames and it doesn't even need CSS or Javascript to do so ! Nice Rounded box ! To make this amazing thing, type out the following: <div style="padding:16px;border-radius:24px;border:12px solid #BDF;"> As you should know HTML pretty well by now, you can see that we've given 16-pixels padding inside the rounded area and the hexadecimal color of a nice shade of aqua. As for the border and radius, to keep the nice roundiness, always have the border-radius at twice the level of border. You can experiment of course, but I have found this keeps a good adjustment level. Once you've defined your DIV type out whatever text you want to have appear in that rounded box. Finally close it up with: </div> Remember as always, you must SAVE your page than re-edit it AGAIN in order for the HTML to click into place. * * * Superscript, subscript, and strikethrough are standard ways of adjusting your text. Unfortunately these very 3-elements are missing from Writer's Cafe, so - once again, it is up to HTML to rescue us ! In order to have subscripted text, just type; <sub>text</sub> which will appear: Subscript To have superscript, type out: <sup>text</sup> which will appear: Superscript To have strikethrough, type: <strike>text</strike> and this will show: strikethrough Save and show your changes by SAVING your page and re-editing it. * * * The last item is a bonus, a useful utility provided by SysInternals Inc. It is a Freeware utility called Process Explorer and is considerably more powerful and useful than the default Task Manager you are provided with. You can download a copy of it right HERE. If you need to unpack this .ZIP file you are welcome to use 7Zip, a marvelous .ZIP unpacking program found HERE. To turn off the ugly lime bar in the middle of Process Explorer, choose from the menu View, and deselect Show Column Heatmaps. That concludes today's lessons. * * * That concludes all the lessons in advanced HTML coding. If you have missed any of the classes and want to make up your work, or feel you need further instruction in any of these areas, you are more than welcome to sit in on any of these lectures: [ATTEND CLASS] [ Lesson # 1] [01] Correct your page margins in the Writer's Cafe editor. [02] Save your work and re-edit it to have anything appear. [03] Make use of Firefox's own Seamonkey HTML and WYSIWYG editor. [04] Make a link that opens a new tab instead of replacing the current one. [05] Extra credit work, frequently asked questions answered by the staff of Writer's Cafe. [Lesson # 2] [06] Choose any color for your writing, outside of what Writer's Cafe limits you to. [07] Become familiar with hexadecimal color codes. [08] Edit pages in Seamonkey with exact margins as Writer's Cafe pages. [09] Vertically center images. [10] Backup any web page including comments to your hard-drive. [ Lesson # 3] [11] Build HTML tables with custom colored frames. [12] Embed a Youtube video in your post. [13] Upload images wider or taller than 500-pixels across. [14] Familiar with unusual restrictions and tabulation used in user profile entries. [ Lesson # 4] [15] Basics of using raw HTML to build a custom profile for yourself. [16] Backtrack from reading new posts without losing your place. [17] BONUS: Download excellent Firewall, ZoneAlarm, this version. [ Lesson # 5] [18] Add images to your profile (revisited) [19] Add a webpage counter to your profile [20] Have an image change when the mouse hovers over it. [ Lesson # 6] [21] Have a pop-up message appear when you have over an image. [22] Become familiar with Writer Cafe's unique Headers. [23] Make a HTML table where the text is on the left and the image is on the right. [ Lesson # 7] [24] Add an animated .GIF to your posts since Writer's Cafe prohibits this. [25] Insert colored horizontal lines in your writing. [26] NEVER lose another posted message again. [ Lesson # 8] [27] Increase the comment area for bigger messages. [28] Advanced methods of playing Youtube videos in posts including autoplay. [29] Write your posts with fonts not provided by Writer's Cafe [ Lesson # 9] [30] Write your posts and messages with different background colors for your page. [31] Insert special ASCII codes into your writing including arrows and other symbols. [32] Insert unique UNICODES into your writing including a full list of Emoticons. [33] Force an upload file box to read the file from an Online server. [34] BONUS: Download very useful Minute Timer for all your timing needs. [ Lesson # 10] [35] Write your posts and messages using a custom background image for the page. [36] Create rounded boxes and frames using only simple HTML raw coding. [37] Insert subscript, superscript, and strikethrough text directly in your posts. [38] BONUS: Download comprehensive Process Explorer to track all processes. CLASS DISMISSED ! Return HOME   You are Earth Visitor #