Using HTML to Save Time and Create Great Websites

HTML
Image from Wikipedia

*New! View this recommend video tutorial in order to learn the basics of HTML & CSS, quickly and easily:
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/

One of the most flexible features of Web Manager is the ability to directly edit the source code, or HTML code, of the content placed in the Page Content area. While it is not possible to edit content outside of the center space of your page using HTML (such as the skin or template), a working knowledge of basic HTML tags will save time, offer more flexibility, and enable you to gain knowledge of the innerworkings of websites.

Every website is comprised of text in the form of HTML codes, or tags, that fit together to display what you see in your browser. On any given website, you can view the HTML code either by clicking on "View -- > Page Source" in Firefox, or right clicking on a page and selecting "View Source" in Internet Explorer. Feel free to take a look at the source code of a few of your favorite websites. Do you notice any similarities? Any common HTML tags?

If you were to look at the HTML tags of a page, you'll notice that the entire page is made up of either raw text (such as what you are reading now) or lines that begin and end with "<>" signs and contain words and symbols such as - " " + ; { } - etc.


Why Use HTML?

In order to use HTML tags in your page, it isn't necessary to know what each line of code means in a website. Fortunately, Web Manager is set up to create and handle most of these for you. However, it can be helpful to make modifications to the HTML tags when needing to make changes such as:

- Slightly altering a link without deleting and re-inserting it
- Changing the width or border size of a table without deleting and re-inserting it
- Changing the properties of images - alignment, border, spacing - without having to delete and re-insert them
- Moving the content of pages from one place to another, without having to re-create the whole page (by copying and pasting the whole HTML code)


HTML Tags Most Commonly Used

Images

HTML tags that reference images in your Web Manager page will look like this at their simplest state:
< img src="/images/USC.www_usc_YOURSITE/YOURIMAGE.png" /> - spaces added

However, within this same line of code, it is possible to specify details such as border size, alignment, a description of the image, etc - simply by adding that description to the tag.

To add a border, you would add border="X" to that code after the image URL, where X would be the number of pixels wide you'd like the border to be.

To change or add an alignment specification, you would add align="left", "right", "center", "default", etc to the tag after the image URL.

To add a description, type alt="YOURDESCRIPTION".

With this in mind, let's look at what a complete HTML tag for an image would look like with each of these options specified:

< img src="/images/USC.www_usc_YOURSITE/YOURIMAGE.png" border="0" align="left" alt="Test Image" />

Tables

For tags that make up tables, it is best in most cases to stick with small edits. Some of the main tags for your table may look something like this:

< table border="0" cellspacing="3" align="center" >
< tbody >
< tr valign="top" >
< td class="readmore" width="144">

In most cases, it will only be necessary to change the border size, width, alignment, or cellspacing. This can be done by locating that specification in your table's HTML tags and simply editing it. Note that each of the numeric properties are measurements in pixels.

Links

An HTML tag for a link will have two pieces to it. The first will be the tag for the link itself:

< a href="http://www.YOURLINK.com" >

After this first line, you might see a word, a line of text or even an HTML tag for an image. This represents what is actually being linked. In order to specify that you want the link to stop, you'll see this 2nd piece of code:

< /a>

This means that in order for this word to be a link, the code would have to look like this:

This means that in order for < a href="http://www.usc.salvationarmy.org">this word to be a link, the code would...


Editing the HTML Code

In order to explore and edit the HTML code available in your own page, the Web Manager tool provides an "HTML" button - html- that, once clicked, pops open a new window showing all of the HTML tags that make up the content in that page's Page Content window. From there, making changes is a matter of finding the tags you would like to edit, and carefully making those changes.

*NOTE - Making changes to HTML code can greatly affect your page, and should be done with care.


Finding Specific HTML Tags

- Using CTRL+F to search the tags for a specific word, either near or apart of the HTML tag that you are looking for

- Scanning for pieces of the certain tag you are looking for. Editing an image? Look for any tag with "img src=" in it, or "a href=" if editing a hyperlink tag.

 


Print version





Search

Enter your search terms below and hit the 'go' button



Site Map Site Map

Find a Center

Enter your zip code to find your nearest Salvation Army

Donate

Donate

Events

November, 2014
SMTWTFS
      01
02 03 04 05 06 07 08
09 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30

Email Newsletters

Subscribe to our email newsletters.