Welcome back to Part 3 of the Website Series where I share information about building a website for your brand or business. If you are new to the series, check out [Part 1] How to Make a FREE Personal Brand Website and [Part 2] 8 Reasons You Need a Website for Your Personal Brand.
My major in Computer Science and I have been coding since I was fourteen years old. Throughout my career, I have realized that there are website owners that have no idea how to implement easy code to make their website exactly what they want.
Although you can create a website and content for a brand without ever using code, having the knowledge allows you to customize what you provide to your customers. To provide additional value, your website, email newsletters, consistent branding, and use of third party content require the use of HTML.
What is HTML?
HyperText Markup Language (HTML) is a standard language for web pages.
To give you some background Sir Tim Berners-Lee invented the World Wide Web in 1989. It started as a large network of documents written in HTML as one of the three technological foundations. Eventually text documents became websites with multiple pages, and HTML transformed into HTML and Cascading Style Sheets (CSS).
You can learn HTML further with:
YouTube
Here are 8 great and in-depth examples of HTML you should know.
1. Images
If you need to add an image in your content, use <img src=”[Image Link]”> with <img> as the tag and src as the source.
You can access an image link if it is published online by right clicking on the picture and “copy image address”. If the image you want is not published online already, you can put it on a hidden page in your site or just upload to the platform you are using.
<img src=”https://static.wixstatic.com/media/7a0e66_b3cdc751bf4e4f5a824b03ee83ab38fa~mv2.jpg/v1/fill/w_580,h_752,al_c,q_85,usm_0.66_1.00_0.01/Book%20Cover%20(Book).webp”>
2. Hyperlinks
Link
To add a link, you should use the <a></a> tag, like <a href=”[Link]”>[Link Text]</a>
<a href=”https://www.ayounglegend.com/book”>The Strategic Mind of A Young Legend</a>
Link to an email address
Have you ever hovered over a link that did not take you anywhere, but a link showed up in the bottom left corner with the email you were looking for? Here’s how to do just that.
<a href=”mailto:contact@ayounglegend.com”>How to contact me</a>
Link an image
Although the above line says how to link an image, this can apply to anything else you would like to link. You can link a button, video, box, etc.
<a href=”https://www.ayounglegend.com/book”>The Strategic Mind of A Young Legend
<img src=”https://static.wixstatic.com/media/7a0e66_b3cdc751bf4e4f5a824b03ee83ab38fa~mv2.jpg/v1/fill/w_580,h_752,al_c,q_85,usm_0.66_1.00_0.01/Book%20Cover%20(Book).webp”>
</a>
Developers indent like this for others to easily read and understand what this code is trying to do.
3. Text
Headers
Headers have six different sizes starting with h1 as the largest and h6 as the smallest. These are the exact sizes of each tag used.
Paragraphs
To create normal text, use the <p></p> tag.
<p>The Strategic Mind of A Young Legend</p>
Lists
If you want to have your text sequentially numbered (Ordered List) or bulleted (Unordered List), here’s how.
<ol>
<l1>How to Make a Website</l1>
<l2>8 Reasons to Have a Website<l2>
<l3>HTML You Should Know</l3>
</ol>
1. How to Make a Website
2. 8 Reasons to Have a Website
3. HTML You Should Know
<ul>
<l1>How to Make a Website</l1>
<l2>8 Reasons to Have a Website<l2>
<l3>HTML You Should Know</l3>
</ul>
How to Make a Website
2. 8 Reasons to Have a Website
3. HTML You Should Know
4. Text Styling
Bold
<strong>This is bold text</strong>
Italicize
<em>This is italic text</em>
Strikethrough
<strike>This is crossed out text</strike>
5. Break Up Content
Line Break
<p>Text displayed on line 1<br>Text displayed on line 2</p>
Horizontal Line
<hr>
7. Colors
In addition to storing colors as their name, you can record their rgb value or Hex Color Code number. For example the color black has a rgb of rgb(128, 128, 128)and Hex Color Code number of #00000
Consistency in the style of your brand is important for others to know when a product, service, or content comes straight from you based on what it looks like when it is delivered.
Grab a free branding workbook to easily store your brand’s color codes.
8. Embedding Content
I mentioned earlier that if you have elements from a third party company that you would like to add to your website or email, you have to code it in.
Two possible scenarios I have experienced are embedding my YouTube videos and embedding my MailChimp subscriber form as an automation in my business.
You’ve just read 8 ways of using HTML to leveling up your website content. As technology continues to evolve you have limited reasons to use code, but when you do you will know exactly how to do what you need.
Comment below a time you have needed to code something.
Comments