What would the internet be without links? Its the links that keep the World Wide Web running smoothly so that visitors can jump from one site to another. Without links, we might as well have printed books. Links in HTML are created through href tags. Why they arent called link tags, I dont know. Heres an example of how to code a link:
h1Title of Article/h1 img style=margin: 10 float: left; alt=keyword src=images/path/image-name.jpg width=400 height=350 / pThis article builds on a href= article/a that was previously published./p h2Subheader/h2 pI really want this text bbold/b./p h3Another Subheading/h3 pI really want this text emin italics/em./p
So, if you see that in your HTML, dont remove it. That code serves a very special purpose and must remain in place.
Hopefully, this article will help you move past the Rookie mistakes and you can reach the rank of Beginning HTML expert. That will undoubtedly look good on your resume and its something you can mention the next time you are looking for new freelance work.
The margin attributes allow for 10px (pixels) of space around the image so that text does not bump up into it. The float attribute keeps the image flushed aligned left or right. The alt attribute is for SEO, so use good keywords here. The srcis where the image is stored. And width and height are self-explanatory. For more information on images, you cansee my previous article.
pThis is a sentence formatted with the HTML paragraph tags./p
Now, lets get into a little SEO (search engine optimization) to help visitors find your articles through search results on Google, Bing and so on. Header tags are treated as important text within an article and search engines read this to help determine content on a page and search results. Typically, the title of your article will be enclosed within h1 tags, which is the highest level for headers. Then comes h2, h3 and sometimes even h4 tags. Most likely, the subheads in your articles will be h2 and h3 tags, but check with your editor and publisher to see what they use for subheaders. Here are some examples that show how to use header tags in conjunction with p tags.
IT Solutions BuilderTOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD
h3Another Subheading/h3
Application Security Testing: An Integral Part of DevOps
Also, your publisher might use modules to insert the same content into each article. For my site, these modules appear at the beginning of the article and at the very end. If the site you are writing for uses this method for inserting content, its a good bet they are using modules. These modules will each have their own name. To insert the module into your article, you use this code:
Some of the main issues come into play when a writer starts off in Word or another type of word processing tool. When a writer copies text from Word and then pastes it into a CMS, a ton of proprietary MS code is copied along with it. This can mess up the default CSS (cascading style sheet) and formatting for a site. The remedy is to copy from Word, paste into Notepad or another type of plain text editor, and then copy and paste that into the CMS. However, that still does not always do the trick.
By submitting your information, you agree that m may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with theQuinstreet Privacy Policy.
Now that youve learned a few more tags, lets see how they look all put together.
pA paragraph of text./p
Searching our resource databaseto find your matches…
h1Title of Article/h1
In my experience, I have seen all sorts of strange code appearing when a writer submits an article into the Joomla! CMS that I use for my site. Everything from extra div tags to p tags showing up after each and every line instead of each paragraph and span tags that have no purpose in the code other than to fool the default CSS formatting. The extra div tags can be especially dangerous because they can alter the appearance of columns and suddenly the bottom footer is appearing in the right-hand column.
img style=margin: 10 float: left; alt=keyword src=images/path/image-name.jpg width=400 height=350 /
pIntroduction paragraph goes here./p
pThis will be the beginning of a new paragraph./p
By learning the p tags, the header tags, how images are formatted, how links work and how to do basic formatting like bold and italics, you are improving your skill set as both a writer and editor. Next time you are asked about your HTML knowledge, you can confidently say that you understand the basics.
a href= Linked Text Here/a
Sometimes writers like to put emphasis on certain words. Using bold or italics can accomplish this trick. Chances are, when you copy your article from your word processing software to the CMS, youre going to lose this type of formatting. To add it back in, the easy way is to probably find the bold and/or italics icon in the CMS text editor. But if you want to learn the HTML code for it, you simply use a b tag for bold and em for italics. Dont forget to close these tags with /b and /em.
Ill leave you with a few more takeaways that you can use the next time someone asks if youre familiar with Joomla! Most Joomla! content sites show a blurb of text on the front page with a Read More button that takes visitors to the full article. The code that inserts that Read More button and tells the CMS where to break the text is this:
Again, that is special for Joomla! Youll have to ask your editor or publisher if they use this, and if so, what the names of the modules are.
pA paragraph of text./p
Lets start with the absolute basics. In HTML, you work with tags, which are identified with carrots. Each tag has an opener and a closer. To format a paragraph, you use a p tag at the start of a new paragraph. You most likely will not have to be concerned with font, size, color and the rest because the CSS in the CMS takes care of that for you. You also need to close the paragraph with a closing /p tag. You will notice the difference between an opening tag and a closing tag is the slashmark. Heres an example paragraph using p tags:
In the majority of CMS, there is most likely an icon in the WYSIWYG (what you see is what you get) text editor. You can identify the HTML icon because it probably has a couple of carrots () on it. If you click the HTML editor icon from the text editor, you can see what your article looks like in HTML. From here, you can look for any extra code that was carried over from Word or whatever software you used to write your article. By removing the extra code, and making certain that only clean code is in place, you will be saving your editors and publishers a vast amount of work.
These days though, if youre a freelance writer, you are probably being asked to submit your articles through some kind of CMS (content management system), whether it be WordPress, Joomla! or a proprietary content management system. Regardless, they all treat HTML the same and learning a little HTML now can help writers a long way down the road.
Last, every writer loves to read comments on their article. It shows that the visitors cared enough to leave a message. In Joomla!, the code that allows comments to be left on your article looks like this:
You must start the href tag with the letter a. The URL within the quotes is where you want the visitor to go. The text, Linked Text Here can be whatever you want but should be simple enough so that people understand where that link will take them. You must close this tag with /a, otherwise, the entire rest of the page will appear as a link. You can add in one more bit of code to an href so that when the visitor clicks the click, the new page will open in a window, which is nice if the link takes the visitor off your site. If the link is to another page within your site, then this extra code is not advised.
For some of you, HTML (hyper-text markup language) is as foreign a language as when you first learned to read and write. This article is for you. For those of us who have been working with HTML for over 10 years, this article will not apply. However, there is a growing number of writers and contributors to content sites that have never spent time with HTML, because their expertise is in writing and editing, and not necessarily formatting articles for online publication.
Its a good bet that the CMS you use to submit articles has some kind of image icon that you can click to upload and insert an image. However, once that image is in your article, you should know how to format it so that the image flows with the text. Within the img tag you can set all sorts of parameters to format your images and help with SEO. The img tag is one of the rare tags that does not require a closing tag. Heres some example code: