Not familiar with the Internet and Web design? No Problem! With eManagerSite CMS you can know only the basics and still be able to easily manage or alter the content on your company’s webpage.
Behind the scenes of the eManagerSite tool, HTML is being written to make the changes you want to see. HTML (Hypertext Markup Language), is simply the standard markup language that creates web pages.
Many of the elements used in this language are written in tags that consist of enclosing the element in angle brackets like <html>. Tags like <html> usually will come in pairs. For example if you wanted to write the title to your webpage in HTML, you would use a opening tag of <title> and end your title with a closing tag of </title>. In between the two tags is where you’ll write your title.
Luckily, eManager does most of that for you without you ever having to see the Source code, which is a collection of all the HTML instructions your browser receives. If you are feeling bold, go ahead and open the source code (open up the right-hand toolbar and going down to the “View Source” option). You can make changes by going into the source code and writing your own HTML!
Here are five easy to digest HTML tricks to help you use eManagerSite more efficiently:
- If you wanted to create a space between either two images or two paragraphs, you have two options: press the shift and enter key at the same time to create a break in between the two elements or go inside the source code and insert a line break element literally in between the two elements. The line break element is abbreviated in HTML, and is “br” instead. The line break tag is an empty tag which means there is no ending tag to it. All you’ll need is <br>. So put the line break tag in there, if you dare!
- You can also easily align images or texts with an align element. If you want to align a paragraph on your webpage you can put the align element right in your paragraph element. The paragraph element is represented by the letter “p”. Go to that element in your source code. In the opening tag of the p element, which should look like this: <p>, add a space after the letter p and write the word “align”. Then place an equal sign (=), and finally you can choose where you’d like the paragraph to shift towards.<p align=left> This is my paragraph. Yay! </p>
- Want your title to be twice as big as your paragraph’s font size? You can add a style onto your title element and be able to do that in less than a minute. To do this find the title element you want to make twice as big as your paragraph. Like we previously did, create a space after the word “title” in the opening tag of your title tag. After the space write the word “style” and enter in an “em” element. The em element is used as a relative measure of font size. 0.5em is half the size, 2emis twice the size and so forth.<title style=font-size:“2em”> This is my title </title> <p> This is my paragraph. </p>You might have noticed the quotation marks for the 2em value. It is so that the HTML can understand that the font-size has to be this amount or value. Without the quotation marks the HMTL is unsure of the value.
- Sometimes you might run into the trouble with your paragraphs and photos over lapping. You can easily add as much space in between your elements as you want. You can use the marginelement to do so! Like we did before, we can simply go into the code and go right to the image element. The image element will look like this: <img src=“photo.jpg”/>. Right after the image’s name is written out, put the word “style” and give the style a value. Like this: <img src=“photo.jpg” style=margin:“5px”/>.You can add margins to the top, left, bottom, or right of the image or paragraph. Just be sure to specify the direction of the margins. Like this: Style=“margin-top:5px;margin-bottom:5px;” If the paragraphs and images on your webpage are overlapping, you might need to use a trial and error method to find the perfect amount of space in between.
- If you want to create different margin for each side, you have to separate each of the style values by a semicolon (;)! And also remember to put quotation marks (“ “) before and after the whole line of styling.Ex: <img src=“photo.jpg” style=“margin-top: 5px; margin-bottom: 10px;” />And another note: the abbreviation “px” immediately following the number stands for pixels. Pixels are considered to be the smallest controllable element of a picture represented on the screen. Pixels in this case are a great tool of measurement.
Alright, I hope this was an easy enough introduction to HTML. If you want to learn more about HTML and other pieces of web design, go to http://www.codecademy.com/learn where you can learn and try to code for yourself!
— By Anna Fong, Web Design and Marketing Intern for eManagerSite
Image from NinjaCrunch.com
