HTML Coding Cover Photo

When building a small business website there are a lot of options to consider. For example, should you pay a graphic designer to assist in the layout, should you hire a company to program the site for you, or should you keep 100% control over the design and code by building your own website?

While we may be a bit biased, we think that having ownership of the look and feel of your small business website is essential to showing your brand and demonstrating your dedication to your business.

And while Webs is known as an easy drag-and-drop WYSIWYG tool to help those with limited coding knowledge, we do offer a Custom HTML Module for Premium customers to challenge themselves in learning HTML or adding a bit of customization to their webpage.

Today, we are sharing a quick HTML lesson for those of you who would like to expand your skill set. With a little help from online coding schools like W3Schools, CodeAcademy and Skillshare, we will share a few HTML basics and links to complete your HTML training and further customize your website’s design!

But first, what is HTML?
HTML stands for Hyper Text Markup Language. It is the language for describing web documents (or pages) that are translated into what is displayed on your computer screen.

Understanding and writing this language allows an individual to manipulate web pages so they can create a more customized web design or add additional elements.

What are HTML tags?
HTML tags are keywords surrounded by angle brackets: <tagname> content </tagname>

An HTML tag describes different document content and how it should be displayed on your computer.

HTML Basics Code

– The DOCTYPE declaration defines the document type to be HTML
– The text between <html> and </html> describes an HTML document
– The text between <body> and </body> describes the visible page content
– The text between <h1> and </h1> describes a heading
– The text between <p> and </p> describes a paragraph

The important thing to note is that when you open a tag <p> you must always close the tag when you are done filling in the content. </p>

How Can I Change Text?
Whether you want to bold, italicize, underline, or superscript your text, there are HTML tags that can command your text to appear a certain way on your webpage.

HTML Text Tags

You can also manipulate your font size and color to have it match your brand logo.
(Though this is not supported in HTML5)

HTML Font Text Tags

The red font color is found by using the HEX Color Code (#ff0000) to choose specific colors from the color wheel.

For more text formatting HTML tags (like changing your font type) check here.

How Do I Add Links?
If you want to cite a source or share the other webpages your fans will see you across the web, it is important to learn how to link your text to other webpages.

To do this you will use the <a href> tag which helps specify which webpage you want your users to visit when they click on that text. You can also use this tag to link an image or other HTML elements.

HTML Link Tags

How Can I Include Images?
Like the images we have inserted in this webpage to show you the proper HTML tagging, you can insert your own images to make your website more visually appealing.

First, you must save the image you wish to use on your computer. Keep it in a safe folder where you may keep all the images on your site. If you are using a web host, like Webs, they may require you to save your images within the builder to be able to reference the image source for the HTML.

This is because you will be using the <img src> tag.

<img src=url alt=text>

The ‘img’ is for the image you wish to share and the ‘src’ is the source from where you are providing the image. To display the image, it will be looking at the source (URL) to find and provide the image.

The ‘alt’ tag is to help your webpage’s SEO. Search engines need a description of the image to understand what you are showing on your website. Search enginges can’t see the image, they can only read what you provide in the alt text!

HTML Image Tags

For more information on adding images to your website check here.

What About Formatting?
Formatting can be especially tricky for newcomers to code. Therefore, we suggest actually enrolling in some of the code classes we mentioned earlier in the article to get your certification in building out your formats.

For example, you can add tables,  layouts, and more!

You may even want to try a hand at learning CSS which makes coding even more stylized than your basic HTML.

If you felt like all of this information was overwhelming, don’t forget that when you sign up with Webs you can build your website WITHOUT having to learn any code. When you upgrade, you will have the option to test the HTML skills you have acquired if and when you’re ready.

Happy website building!

About the Author: Deanna Zaucha is the Content Marketing Coordinator for Webs and Pagemodo, and also manages our social media presence. She can be found on a dance floor, or on her iPhone keeping up with trends in marketing and tech. Get more from Deanna on the Webs Blog and Twitter.

10 Responses

  1. Reply
    Apr 21, 2015 - 01:00 AM

    Why would you tell people to use the font tag? That’s deprecated! Use CSS instead!

    • Reply
      Deanna Zaucha
      Apr 22, 2015 - 02:14 PM

      We have made an update to our post letting users know that the font tag is not supported in HTML5! Thanks, Kyle.

      • Reply
        Anthony D Paul
        Apr 30, 2015 - 01:37 PM

        Also “i” and “b” tags are considered poor practice because they are non-semantic and instead speak to their display, like “center” does. Instead, italic should be using “em” for emphasis and bold should be using “strong” for strong emphasis. Screen readers, Braille readers, and other accessibility tools recognize emphasis, e.g., but ignore display markup like italic.

        • Reply
          Sarah Matista
          May 04, 2015 - 10:34 AM

          Interesting! Thanks for sharing that Anthony.

  2. Reply
    Apr 21, 2015 - 03:58 AM

    Your article inspires and reminds me of the good old days when I started learning HTML. Thanks

  3. Reply
    Apr 21, 2015 - 02:38 PM

    How can I change the currency sign in your template to my country currency sign

    • Reply
      Deanna Zaucha
      Apr 22, 2015 - 02:28 PM

      Hi Tom, at this time we do not fully support non-Latin based characters. Additionally, the way special characters or symbols appear on your website may vary based on what browser the visitor of your website is using. If you have any other questions, please feel free to reach out to our Support Team!

  4. Reply
    Jul 12, 2015 - 02:06 PM

    I appreciate the HTML language. I have been in HTML since webtv came out in 1998 or since then at least. I found some useful things with it.
    🙂 (y)

  5. Reply
    Web designing services in hyderabad
    Jun 20, 2016 - 03:44 AM

    Very helpful information.Thank you so much for sharing helpful information

  6. Reply
    web design amaravathi
    Oct 22, 2016 - 02:40 AM

    I appreciate this post. useful article

Leave a Comment


Layout Style

Header Style

Accent Color