In this article, you will learn how to create a website in HTML.
HTML (Hypertext Markup language) is a standard language used to structure documents displayed on web Browsers. Compared to other languages such as XML, learning HTML can be easy to learn when you have the right references or materials.
If you are reading this article, maybe you are a beginner who wants to get started or an advanced learner with a desire to tighten the nuts on the already acquired knowledge.
You may be asking why I should learn how to create HTML in 2020 when I can build a website through drag-drop technology without writing any code. There are many reasons why you should learn this language.
First, HTML is a standard language that supports all compatibility (cross-compatibility, forward-compatibility, and backward compatibility) and helps you build highly responsive and fast loading websites.
The online resources contain necessary resources but the majority are not beginner-friendly with more technical terms that are somehow scary.
Second, HTML is a simple though powerful language. The language contains approximately 120 tags. Also, HTML easily embeds other languages such as Twitter bootstrap, JavaScript, PHP, CSS, font-awesome etc. to help you create a fancy, dynamic and well-looking website.
You don’t need to learn all these to create a website in HTML. Enough of introduction!
Let’s get started.
How to create a website in HTML
Tools required:
Before I show you how to create a website in HTML, the following tools are required:
- A text editor such as notepad or preferably sublime text which supports auto-completion.
- Browsers such as Firefox or Chrome.
- Html syntax:
- Html tags are case insensitive i.e. <small>, <SMALL>, <SmALL> and <sMALL> are all interpreted to be the same. By convention, lowercase is recommended.
- An opening tag must be followed with a corresponding closing tag except for a few which are self-closing such as <input/> </br>.
For example
<p> hello, world! </p>
- The closing tag should contain a forward slash preceding the tag name
- Special characters (characters with special meaning in HTML language) must be escaped.· Comments are added using <! – – your comment goes here –>.A comment is additional information added on HTML that is not interpreted by browsers. The text is used for informative purposes to readers of your code
Some of the basic HTML tags.
An HTML tag contains the tag name and attributes
Html document can be seen as a two-section document i.e. head and body
The head defines the upper look of the page while the body contains the actual content of the website.
<Head> tags </head> parents other tags in the head section.
<title> </title> displays the text mostly seen at the top of the browser in the tap
<link “rel”
Media display.
· <img src=”path to image” /> is used to display the image. This can be image with extension .jpg, .PNG or .gif.
<video width=”300” height=”400”>
<source src=”path to video” type=”media type”/>
<! - - add as many as you want - ->
</video>
<Audio controls>
<source src=”path to video” type=”media type”/>
<! – – add as many as you want – ->
</audio>
Tags that change the display of text.
- Heading tags. Html defines 6 types of heading that can be used in a document. The size of the text in the header decreases as you move down the heading. <h1> displays the largest text while <h6> displays the smallest text of all headings.
- <i> text </i> displays text in italics while <small> </small> and <strong> </strong> show emphasis of text by changing the size of text displayed. <b>text</b> show emphasis by making text bold.
- <p> paragraph goes here</p>. This defines a text displayed a paragraph
- <blockquote> </blockquote> display a block of text
Tags that are used for input:
- <Form> </form> this is a root tag where other input tags are defined.
- <input type=”file/email/password/text/button/radio” placeholder=”text to be displayed” name =”name of input” /> used to input files or text of certain type from the users.
- <select> <option > option </option> <!- -more options can be definer–> </select> Defines a list of options
List tags.
Html contains two main ways to declare a list
a) Ordered list <ol> <li> your item goes here </li> </ol>. Displays numbered list items
b) Unordered list <ul> <li>your item goes here </li> </ul>. No numbering
Other tags include:
<a> </a>
Known as an anchor tag.
It’s used to link other pages of a website or for navigation to other pages.
For example, users can navigate to another by clicking the image on your website i.e.
<a href=”https://google.com”> <img src=”youtube.com”/> </a>
The following screenshot shows the basic structure of the document declared in sublime text
Having the above background information is pivotal in this tutorial on how to create a website in HTML. I’m going to show you how to create a website in HTML that contains all these tags. Follow the steps to set your environment.
- Open your favorite browser
- Open a text editor of your choice.
- Create a new file and save with an extension of .html. For instance, index.html.
Add your HTML content into the file. Check the screenshot.
- Run
If you are using a sublime text, you can right-click and select open in a browser. If using notepad, you can type the absolute path of your file in the browser and it will open your page.
You should be able to see your page load.
Check this.
Conclusion
Learning HTML sets the base and it’s a prerequisite as you advance in your web development career. As noted earlier, creating a dynamic website requires proficiency in other languages and frameworks.
Creating a stylist page requires an understanding of CSS, Twitter bootstrap, or font Awesome. Having a strong understanding requires practice.
This article discusses only the basic tags and attributes and may require digging deeper such in official documentation to gain a deep understanding.
If you have been wondering how to create a website in HTML, then this article touches on every pretty basic topic in a simplified format to help you learn.