Writer's Cafe Wizardry - Lesson 3

Learn about how to create real HTML tables with boxes and lines, post your first video, create an account with Google Sites (for hosting larger images), basics in adding raw HTML to your profile.

Writer's Cafe Wizardry - Ch 03   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 THREE - Jun 25th 2013 < > Good afternoon, Class ! Let's begin. Now you may have noticed in some of my writing titles at the top include a colored rectangle that appears around text. Well, you can actually have several of them linked together, like SO: One Two Three Four Five Six This is called a TABLE and is standard on several pages you can find on the Internet for aligning data and to give a bit of a nice appearance to text. The code for it is as follows: <table style="border-color: #ff00ff; border-width: 4px; "cellspacing="2" align="center" border="2" cellpadding="2"><tbody> <tr><td>One</td> <td>Two</td> <td>Three</td></tr> <tr><td>Four</td> <td>Five</td> <td>Six</td> </tr></tbody></table> Phew ! I know that's a bit to stomach, especially if you're new to HTML, but let's try and go through it, shall we ? First off as you know or should ALL HTML commands begin with < and end with > . So the first command says we are going to define a table, remember that colors are entered via hexadecimal codes (previous lesson), so in this case it's a simple VIOLET color derived from 255 for Red, 0 for Green, and 255 for Blue. The next is the border-width. Since by default tables are 3-dimensional in appearance, that is the top-left-hand corners are lighter in appearance than the bottom-right-hand corners to give them an illusion of depth, you want it to be fairly thick for a nice view. In this case 4-pixels. You are giving the space INSIDE each table cel 2-spaces, you are centering horizontally the whole table, you are giving 2-pixels spacing between the frame and the border, and you are giving 2-more pixels-space for the padding. Then using <tr> this denotes that you are starting a new Table Row. It must be typed first or the table won't appear correctly. For columns, you define that with <td> . Then you can enter in whatever data you want for that single table cel. You close up that single table cel as with all HTML commands using a / inside the command, in this case, </td> . If you want another cel directly and horizontally BESIDE the next one, you do another <td> . If instead you are finished with this column by adding </td> and are now ready to add a row OR to end the whole table itself, you need to add </tr> . If you want more data on the next row, then you'll need the <td> once again and then type in whatever data you want on that next row. To close up completely at this point, after having typed </td> to finish that single table's cel, you type: </tr></tbody></table> and you are done ! There are indeed more advanced methods to creating tables, but this should give you a good idea on how to build them for now. Naturally if you are using Mozilla Firefox's Seamonkey (covered in the previous chapter), then you can create tables automatically using their own system, but they may not be colored, thus requiring you to use this method in direct HTML creation if you want neato colors to appear for their frames. * * * The next item is how to add a video to your posts. The easiest way is once you have a video playing on your screen that you are interested in. Go ahead and stop it. If you are in full-screen viewing mode, press [ESC] to exit. Then press ALT-D, CTRL-C, and in the post you want it to appear, press CTRL-V. You might have something like this: https://www.youtube.com/watch?v=A-tAbfwr6RU What you want to do is take out the S in HTTP and change the text of watch?v= to embed/ and put quotes around the whole thing so you have this: "http://www.youtube.com/embed/A-tAbfwr6RU" Now, add these items around it so it appears as follows: (blue ink represents unchanged text) <iframe width="640" height="480" src="http://www.youtube.com/embed/A-tAbfwr6RU" frameborder="0" allowfullscreen></iframe> And there you have it ! Remember for Writer's Cafe, in order to have HTML appear, you must save your post first, then edit again - then save AGAIN ! And then it will finally appear properly. * * * This next step is a bit more complex. If you are content with uploading images that are 500 pixels or less horizontally or vertically, you can skip this lesson entirely. But if you want something BIGGER, than you'll have to link images outside what you can upload in Writer's Cafe, and that can be done with Google's own Google Sites - where you can host your own images ! Okay, as with any site you can store elements, you need to have an account and password. If you already have an account in Youtube videos, there's a good chance you are already known so you can skip directly to http://sites.google.com seen below. If you bring up: http://www.google.com You may notice a red button in the top-right-hand corner of your screen that says, SIGN IN. Go ahead and click on it. If you don't already have a Google account (and you may not) look once again in the top-right-hand corner of your screen and it should say, SIGN UP. Go ahead and click on that now. It will ask you for your name, go ahead and enter what you want here. Choose a username (up to 6-characters). Create a password. Confirm it (type it again). Give your birthdate as you like, gender, select other. For now skip mobile phone. And your current Email address. Click YES you agree to the Google Terms Of Service & Privacy Policy Now click NEXT STEP. Phew ! After all that you should get the nice, "Welcome ! You're now ready to search, create, and collaberate across lots of Google products." Remember your new Email address and password. and click GET STARTED. And you're back to Google. Now go HERE: http://sites.google.com You will see another sign in, the password they have highlighted is incorrect, so delete it and type in the one you chose for this account and then click on SIGN IN. If you're in Firefox, click on Remember Password and you are now in Google Sites. First off you may be asking yourself what exactly is this place ? Google Sites is quite a bit like any other good blogging site with the exception there are no community pages. You could blog here if you want but you will have few to no visitors unless you tell others where exactly to find you. So - I use it for image storage myself. Click on CREATE in the top-left-hand corner of your screen. Then select Blank template. Type in the field for Name your site, perhaps your alias. Type in the captcha code and press ENTER. A pleasant yellow notice will appear at the top that says, "Creating your site." Give it a moment. And you're in ! Now, because this is a real site you are in, you need to create a page. So click the button that looks like the small piece of paper with the + in it for New page. Name it Images if you like, don't press ENTER just yet ! Now, this is important, Click the gray Web Page button and change that to File Cabinet. Now click back in the name area and press ENTER to save this. OKAY ! You now have a NICE little area now, 100mb of storage on the Internet to put your files, including images, with no worries of odd notices or expectations of payment like you might get with other servers dedicated for storing and displaying images. So let's upload your first image ! Click Add file and select a picture from your computer, preferably one bigger than 500 pixels across or down as that was the point in creating all this. Give it a moment and there it appears ! Think of this place as a little 100mb thumb-drive you can link files to from any other site on the Internet. Okay, now if you just click VIEW you'll get a really long messy address. No, what you wanna do is right-click on VIEW and select Copy link location. Then back in Writer's Cafe, to insert that image, click on the icon to add an image and then click in the URL field. Press CTRL-V to paste the image URL address but remove the ending, "?attredirects=0" on the end. Now, there is a catch to all this. IF YOU LOG OUT OF GOOGLE, then all the links you have to here will suddenly not work, no images will appear and so forth. Google never logs you out unless you log out yourself so there are no worries here. If you are using multiple Youtube accounts this could cause a problem, otherwise you should be in the clear. As always if you have any questions, feel free to enter them below. * * * This next part is pretty simple but needs to be understood. While you can indeed enter raw HTML into your profile to have your video and images appear, they are doing something a little unusual. Normally you type > to give yourself a clean line break. However, in their system, any carriage-return at all counts as a line break. Therefore any raw HTML you type in must not have any carriage-returns in it at all unless you want them to visually appear there. While you can indeed use > you can also just press ENTER so be aware of this when building your profile HTML to ensure you don't get confused as to where all the blank lines are coming from. * * * In the next lesson we'll learn about some HTML limitations for your profile entry, a sneaky way to examine who wrote you in Writer's Cafe without leaving footprints, and an introduction to a wonderful Freeware Firewall application that gets permission from YOU anytime a program tries to access the Internet for maximum safety - exceeding all other Firewalls security measures. See you next week ! Return HOME   You are Earth Visitor #

Author's Note

Any questions, class ?

Reviews

[Random Peter]

:Facepalm: OMG are you kidding me? Yeah, I understand that it is HTML language and I know how to make websites, but still, :Another Facepalm: I, I, I, I, ammmmm amazed...

[dw817]

Well I'm glad you are enjoying these ! ☑ The next chapter deals not just with HTML entry methods but a favored Firewall program I have grown to love. Since I know I have one (apparently serious) dedicated student, I'll definitely focus more on advanced HTML, like some of the methods I've used in my profile for instance.