HTML Tips For Essays & Comments


— CONTENTS —

1) Hyperlinks

2) Text Formatting

3) Posting Pictures

4) Wrapping Text around Pictures

5) Posting Videos

    5.1) Centering Videos

    5.2) Shrinking Videos

6) Adjusting Text Display Size

— HYPERLINKS —

There are two ways to put hyperlinks in your articles or comments.

These examples will display your link as blue colored clickable hyperlink text.

1) Bracket method. SoapBlox sites like this one (& Scoop sites like DailyKos) provide an easy shorthand method.

To embed a hyperlink, type both the URL and the text you want to display as a link, enclosed in square brackets, and separate them with at least one space.

&#091https://thestarshollowgazette.com  Stars Hollow Gazette]  

=  Stars Hollow Gazette

&#091https://thestarshollowgazette.com/diary/2/  HTML Tips]  

=  HTML Tips

&#091http://www.CNN.com  CNN]  

=  CNN

2) HTML method. Other sites require HTML tags to display a hyperlink. This method will also work here.  The HTML code begins with the <A HREF=> tag and ends with the </A> tag as shown below.  The URL of the page you are linking to should be included in quotes immediately after <A HREF=>. The text that you want to appear in the link should be between the <A HREF=> and </A> tags.  

<a href=”https://thestarshollowgazette.com”>Stars Hollow Gazette</a>  

=  Stars Hollow Gazette



— TEXT FORMATTING —

To italicize, surround the text you want to italicize with <i> on the left and </i> on the right.

To bold, surround the text you want in bold with <b> on the left and </b> on the right.

To underline, surround the text you want underlined with <u> on the left and </u> on the right.

To blockquote, surround the text you want to blockquote with <blockquote&gt on the left and </blockquote> on the right.

To strike out text with a line through it, surround the text you want to strike out with <strike> on the left and </strike> on the right.

To center text on a page, surround the text you want to center with <center> on the left and </center> on the right.

To create a gray divider line in your article, like the gray lines between the sections of this Formatting Tips page, place an <hr> tag where you want the gray line to appear. The <hr> tag can be used by itself and is one of the few HTML tags that does not require a closing </hr> tag.

To create a line feed use a <br> tag. You can use two <br> tags in succession (<br><br>) to create a blank line, or multiple <br> tags in succession to create multiple blank lines. Like <hr> tags, <br> tags do not require closing </br> tags.


— POSTING PICTURES —



To post a picture in your article, you’ll need the URL (web address) of the picture.  

It’s best practice to upload pictures to Flickr or Photobucket or other image hosts rather than linking directly to a picture on someone else’s site (aka Hot Linking).  The image hosts make it easy to copy & paste the URLs of the pictures into your comment or essay.   Below each picture you will find the HTML code to include with your post.  There will be a box that says “copy/paste this code to your website” or something to that effect.  

Also be aware of copyright issues.   If you use someone else’s picture, provide a link to the page you found it on, if possible.  

The following line of code will display a picture in your article. Replace the URL in this example with the URL of the picture you want to display, and adjust the width to your preference (use “preview” to make adjustments). The height will be auto-calculated proportionally – you do not need to specify it.

<img src="http://i165.photobucket.com/albums/u65/vradul/Hillobama.jpg” width="200" align=”left”>

You can set the “align” parameter to “left” or “right”, to display your picture on either side of the article page.

NOTE: Please don’t post pictures wider than 500px. Images larger than 500px wide may be removed by Site Admins as they may adversely affect some browser displays.


— WRAPPING TEXT AROUND PICTURES —

TO MAKE YOUR ARTICLE TEXT “WRAP”, (display BESIDE and BELOW your picture), begin typing the text of your article immediately following the image code:  

<img src="http://i165.photobucket.com/albums/u65/Hillobama.jpg” width="200" align=”left”>START TYPING YOUR ARTICLE TEXT HERE…..

TO CENTER YOUR PICTURE and display your article text BELOW it, REMOVE the “align” parameter from the image code line, and enclose the entire image code line in center tags:

<center><img src="http://i165.photobucket.com/albums/u65/vradul/Hillobama.jpg” width="200"/></center>

START TYPING YOUR ARTICLE TEXT HERE…..



— POSTING VIDEOS —

YouTube videos are the most popular video format but there are others that will allow you to embed as well.  When you find a YouTube video that you’d like to post, obtain the “embed” code for that video by clicking on the YouTube logo at the bottom right corner of the video which will take you to the YouTube page for that video. Or click on “Menu” in the lower right corner of the video and it will display the embed code for you in the video image.

To the right of the video on the YouTube page you’ll see a box with the title “embed” beside it. Copy the code from that box and paste it into your essay or comment.

For example, most if not all of Keith Olbermann’s “Special Comments” on the MSNBC Countdown program are available at YouTube normally within a day or so of broadcast.

There is a search box at YouTube to help you find videos by searching by name or subject or keyword.

Here is Olbermann’s Special Comment on July 03, 2007 calling on George W. Bush to resign:

The “embed” code for that video (available by clicking the YouTube logo) looks like this, and if pasted into your article will display the video aligned against the left margin, as above:

<object width=”425″ height=”350″><param name=”movie” value=”http://www.youtube.com/v/-U3nhevWfro”></param><param name=”wmode” value=”transparent”></param><embed src=”http://www.youtube.com/v/-U3nhevWfro” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”350″></embed></object>

To post a video in your article centered on the page, simply enclose the “embed” code in center tags (the same as centering pictures, as described above):

<center><object width=”425″ height=”350″><param name=”movie” value=”http://www.youtube.com/v/-U3nhevWfro”></param><param name=”wmode” value=”transparent”></param><embed src=”http://www.youtube.com/v/-U3nhevWfro” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”350″></embed></object></center>

Posting that code in your article will display the video centered on the page:

You can also shrink videos by removing the height parameter in both places where it appears in the code and setting the width to a smaller amount of pixels.

<center><object width=”250″><param name=”movie” value=”http://www.youtube.com/v/-U3nhevWfro”></param><param name=”wmode” value=”transparent”></param><embed src=”http://www.youtube.com/v/-U3nhevWfro” type=”application/x-shockwave-flash” wmode=”transparent” width=”250″></embed></object></center>


— ADJUSTING TEXT DISPLAY SIZE —

You can make text on screen in your browser display at a larger size any time simply by hitting ‘Ctrl +‘ on your keyboard.

To shrink it hit ‘Ctrl –‘, to return to default ‘Ctrl 0‘.