Basics of Creating an HTML Website
Getting down to the basics of coding when creating a website helps you have a more in-depth understanding of how programming works. HTML is the foundation of programming and the most basic language you can learn to essentially carry out web-related tasks. And although you don’t necessarily need to learn HTML to create one, having the basic knowledge grants you a higher level of website control and customization. For wordpress website creation, you can proceed to this article: https://sortedhost.co.nz/blog/creating-a-website-wordpress.
What is HTML?
HTML stands for HyperText Markup Language. In a nutshell, it’s a series of codes used to create and design websites and web applications. HTML is the backbone of your content – you can make headings, paragraphs, format text, add images, create links, and more. You can also control how these elements appear by modifying sizes, colors, and positioning. When viewed in a browser, HTML code displays text and media that appears as how you put it in.
Basic Structure of an HTML Code
Your computer understands the difference between code and normal text through tags. Tags are essentially the instructions of how text and images should be displayed in a web browser. Content is enclosed in opening and closing tags.
<i>This is a sentence.</i>
<i> and </i> are the tags.
The opening and closing tags, together with the content in between.
<b>This entire line is an element.</b>
This appears as: This entire line is an element.
The tags and the sentence between them comprises the element. The <b> tag is for the bold format.
Attributes are additional instructions placed inside the opening tag to define the characteristics of your content. They are written in the format <tag attribute=”value”>Content</tag>
<p style=“color:blue”> This is a sentence.</p>
The <p> tag stands for paragraph, and the attribute will make it appear in blue color.
Creating headings for your website helps with structure and content hierarchy. With headings, viewers will find it easy to see the outline of what’s important in a web page. Furthermore, it also helps with indexing for SEO. However, headings are mostly for structure and not for formatting text to be bold or bigger in size.
HTML has six heading tags from <h1> to <h6>. The tag <h1> is for the most important heading, while <h6> is for the least important.
<h1>This is a very important heading.</h1>
<h2>This is a less important heading.</h2>
As previously mentioned, the <p> tag creates a block of text in your html document.
<p> Auckland, New Zealand is the City of Sails. It has the largest Polynesian population in the world. Auckland is visited by 2 million tourists annually. </p>
However, take note that you cannot simply press “Enter” if you want to make line breaks and make it appear like this:
Auckland, New Zealand is the City of Sails.
It has the largest Polynesian population in the world.
Auckland is visited by 2 million tourists annually.
For your text to appear like this, you must use the <br> tag which stands for line breaks. Like so:
<p> Auckland, New Zealand is the City of Sails. <br> It has the largest Polynesian population in the world. <br> Auckland is visited by 2 million tourists annually.</p>
Note: <br> is an empty tag, a close tag is not needed.
Ordered and Unordered Lists
Like headings, lists also help with organization and content hierarchy. Ordered lists are numbered, while unordered lists are bulleted.
For ordered lists:
Use the <ol> tag for an ordered list, and a <ul> tag for an unordered list. Then, use the <li> tag for every item under your list.
This will appear as:
- Web design
For unordered lists:
This will appear as:
- Web Design
In HTML, you can play around with text formatting – bold, underline, italicize, change color, change font, and more. Here are the basic tags you can use with text:
- <b> is used to make text bold. <b>This text is bold</b> will appear as This text is bold.
- <i> is used to italicize text. <i>This text is italicized.</i> will appear as This text is italicized.
- <u> is used to underline text. <u>This text is underlined.</u> will appear as This text is underlined.
- <sup> is used to superscript text. <sup>This is superscripted.</sup> appears as This is superscripted.
- <sub> is used to subscript text. <sub>This text is subscripted.</sub> appears as This is subscripted.
- <font> is used to set different attributes such as “color”, “size”, or “face”.
- <font color=”blue”>This is blue.</font> comes out with a blue color.
- <font size=”30”>This text is is in size 30.</font> comes out larger in size. Use this attribute to make text bigger, such as subheadings.
- <font face = “Arial”>Use Arial as the font.</font> displays your text in your chosen font. It’s recommended to use web-safe fonts such as Times New Roman, Verdana, and the like.
To link to internal or external web pages, use the <a href> tag like so:
<a href = “https://newzealand.com”>Click here.</a> will appear as: Click here.
You can add an image to your HTML document by using the <img> tag. This tag doesn’t need closing because it’s an empty tag. To add an image from the same source as an HTML document:
<img src=”webdesignphoto.jpg” alt=”Web design photo”>
The “alt” attribute serves as an alternative text just in case the image can’t be displayed on a browser.
Images can also be customized by inputting your desired width and height. Making use of the style attribute, it’s done like so:
<img src=”webdesignphoto.jpg” alt=”Web design photo” style=”width:250px;height:250px;”>
Now that you know the basics, it’s important to know that the codes listed above comprise only a small portion of HTML. Mastery of the language can take months, and if you want to build a website in days, consider using a website builder or hiring a professional web designer. Web design is one of the keys to successful business online (others include content delivery network, digital marketing and advertising). Nevertheless, HTML is a useful skill if you want to have more control over your website.