Once your website is up and running, you may find yourself wanting to make some small additions or edits. Contacting your designer or a webmaster for every little change can become tedious (not to mention expensive), which is why it’s so helpful to understand some basic HTML. HTML is the language that most websites are coded in – it drives the layout, fonts, colors and other formatting and functionality aspects of your website. You may be thinking, “That’s great! But I don’t know any HTML.” If you’re in this position, this short cheat sheet will serve as a guide to making basic HTML changes to your website. This way, if you’d like to change some minor formatting on a page, you can quickly make these changes yourself. What is an HTML tag? An HTML tag is a snippet of code that tells the website how to read or format your content. HTML tags are surrounded by the < > characters. All HTML tags must be closed with corresponding tags. This tells your website where your formatting changes begin and end. Where do I make HTML changes? Before we get started, it’s important to note where these changes get made. In most content management systems (CMSs), you’ll find that each page has two views. One is a design or visual view. This lets you see the page as it will look when it’s posted to your website. The other view is often referred to as the text, code or HTML view, depending on which CMS you are using. HTML changes should all be added to the text, code, or HTML view. To enter a change, you’ll need to find the section of the page you’d like to change. Simply scroll until you see the text you’d like to alter or the space where you’d like to add new content. There, you can add the appropriate tags. After this, make sure to check the design view or preview the page to make sure everything looks the way you’d like it to. Make text bold using HTML To make text on a web page bold, use the HTML tag . For example, if you wanted to make the sentence, “This is important” bold, it would look like this: This is important Make text italic using HTML To make text on a web page italic using HTML tags, you would use the HTML tag . This is short for emphasis. For example, if you wanted to make the sentence “This is important” italic, it would look like this: This is important Add a link using HTML Adding a link is somewhat trickier than simply changing the formatting of your text to be bold or italic. If you’d like to add a link, you’ll use the HREF tag. HREF tags tell the website what text should be linked, where the link should go, and how the link should be opened. For example, if I wanted the text “Google” to be linked to the Google website, it would look like this: Google For contrast, if I wanted the text “Yahoo” to link to the website for Yahoo, it would look like this: Yahoo Additionally, if you’d like your link to open in a new window or tab so that users aren’t directed away from your site, you can add some additional information to the HREF tag. For this example, you would tell the code that you’d like to open the link in a new window by indicating that the target is blank. In this instance, the HTML code would look like this: Yahoo Add a picture using HTML Adding imagery is a great way to help users connect with your content and become more interested in what you have to say. To add an image, you’ll first need to host that image somewhere online, either on your CMS or on another service. Once you’ve uploaded the image to the place where you’re hosting it, simply add an image tag. As an example, an image tag should look like this: Images are somewhat unique because they do not always have an end tag. The code does not need to know where the image ends – the image itself can dictate that. However, you can link images to a web page. For instance, if you wanted to link your image to your home page, it would look like this: You’ll notice that, in this case, the code for the image simply replaces the text in the HREF tag. Obviously, these few tweaks only scratch the surface of full HTML coding. However, simply knowing how to handle these simple changes on your own can save you big money by minimizing the need to contact your web designer every time edits must be made. Start with these HTML 101 steps and continue to grow your coding skills as you go!
-
Recent Posts
Recent Comments
Archives
- September 2019
- August 2019
- July 2019
- June 2019
- May 2019
- April 2019
- March 2019
- February 2019
- January 2019
- December 2018
- November 2018
- October 2018
- September 2018
- August 2018
- July 2018
- June 2018
- May 2018
- April 2018
- March 2018
- February 2018
- January 2018
- December 2017
- November 2017
- October 2017
- September 2017
- August 2017
- July 2017
- June 2017
- May 2017
- April 2017
- March 2017
- February 2017
- January 2017
- December 2016
- November 2016
- October 2016
- September 2016
- August 2016
- July 2016
- June 2016
- May 2016
- April 2016
- March 2016
- February 2016
- January 2016
- December 2015
- November 2015
- October 2015
- September 2015
- August 2015
- July 2015
- June 2015
- May 2015
- April 2015
- March 2015
- February 2015
- January 2015
- December 2014
- November 2014
- October 2014
- September 2014
- August 2014
- July 2014
- June 2014
- May 2014
- April 2014
- March 2014
- February 2014
- January 2014
- December 2013
- November 2013
- October 2013
- September 2013
- August 2013
- July 2013
- June 2013
- May 2013
- April 2013
- March 2013
- February 2013
- January 2013
- December 2012
- November 2012
- October 2012
- September 2012
- August 2012
- July 2012
- June 2012
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- March 2011
- November 2010
Categories
Meta