Thursday, January 21

Web-designing For Beginners: Learn HTML Web Design Codes

[Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Read More:]

With the Invention of the Internet, people started to get connect with each other across the globe. But ways of sharing didn’t get invented with the invention of the Internet but when people developed (World Wide Web) them and connect it with others with the help of the Internet. Even to some people, the web is just another word for the internet.

In 1990, Tim Berners Lee developed the HTML (Hyper Text Markup Language) since then HTML is working as a core source of web pages to run them on the browser, and with the help of this language, with the use of HTML web design codes, they’re able to display on World Wide Web. Without HTML, without the HTML web design codes, an internet browser (Chrome, Firefox, Safari, and so on) would not realize how to show the text as tags or fetch pictures or different elements. HTML is not actually technically a programming language they’re more of just page structure, and style information container text files.

In this session, we will discuss HTML web design codes, specific HTML code tasks that are used by developers while developing a web page. First, you have to understand how HTML codes work in a browser. And it would be better if you choose a professional code editor before starting Web Designing.

How HTML works?

With the making of HTML and the internet browsers that reached it anybody with a Computer and a Mobile Phone with an internet connection could browse the web. HTML works as an interpreter for how two computers speak to each other over the Internet and the Web sites are what they stored. There’re two terms that work together to run a website:

  1. 1. Server-Side: A server or host stores, control and distributes websites over the Internet. This website stored on a server.
  2. 2. Client-Side: The client (i.e. Browser) is used by the person surfing over the internet, just like the device you’re using right now.

Xampp would help you in this to make your computer act like a host which is called the localhost. In it, you can store your HTML files and ready to write some code.

What you write (the HTML)

So, now we know HTML is the key to make a browser to display our web pages, but what exactly does HTML look like? Let’s run a little scenario to start:

Imagine we have to create a web page to advertise some educational Institutes includes some descriptions, Directions, and an Image. Here’s what you’d write in HTML:

RELAX! We don’t expect you to understand HTML code yet.

Now you should simply be discovering what HTML resembles. We will cover everything in detail in a piece. Until further notice, study the HTML and perceive how it gets spoken to in the program on the following page. Make certain to give cautious consideration to each letter explanation and how and where it is shown in the program.

So, what is HTML?

HTML isn’t a programming language. It is more known as a markup language that characterizes the structure of your content to display. HTML works with the series of elements, which you use to encase, or wrap, various pieces of your content to cause it to seem a specific way or act a specific way. Let’s take this example:

You want to display this line of text (content): “This Website is very helpful!”

We could specify our text that it is a paragraph by enclosing it in

named as paragraph tags:

Anatomy of an HTML element:

This will help to explore this paragraph element a bit further.

The main parts of any element are as follows:

The Opening tag: This comprises the name of the Element (for this situation, p), enveloped by opening and shutting edge sections. This states where the tag starts or begins to produce results — for this situation where the passage starts.

The closing tag: This is like an end to the Opening tag, then again, actually it incorporates a forward slice before the tag name. This states where the tag closes — for this situation where the section closes. Neglecting to include an end tag is one of the standard novice blunders and can prompt abnormal outcomes.

The Content: This is the content of the element which is, in this case, is “This Website is very helpful!”.

The Element: The opening tag, the closing tag, the content, and its other attributes together makes an element.

HTML elements also have attributes look like this:

Attributes contain additional data about the tag that you would prefer not to show up in the real element.

An attribute ought to consistently follow these rules:

  • A space among it and the element name (or the past characteristic, if the tag as of now has at least one ascribes).
  • The attribute name followed by an equivalent sign.
  • The attribute esteem wrapped by opening and shutting quotes.

Nesting elements:

You can put HTML elements inside other tags tooth, called nesting. If we want to write “This website is very Useful!,” we could wrap the word “very” in a ) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.”>tag, which means that the word will be strongly emphasized:


Empty elements:

Some elements have no content to display but some attributes with values and are called empty elements. Take the element embeds an image into the document.”>tag that we already have in our Web page:


Essential Elements of HTML:

This section will help you to cover some of the essential HTML tags you’ll use for marking up the text.

1. Headings:        

Heading elements allow us to specify that certain parts of our content are headings subheadings. Similarly, that a book has the fundamental title, part titles, and captions, an HTML archive can as well.

HTML contains 6 heading tags,<h1>  to <h6>,it’s up to you in which size you want to display your content:

2. Paragraphs:

The element represents a paragraph.”>

tags for containing paragraphs of text. You’ll use these mostly when marking up paragraph type text content as we did above.

3. Lists:

A ton of the web’s content is records and HTML has unique tags for these. Increasing records consistently comprise of in any event 2 tags. The most well-known rundown types are requested and unordered records:

  • Unordered Lists:

    are for records where the request for the things doesn’t make a difference, for example, a shopping list. These are enclosed by a

  • Ordered Lists:

    are for records where the request for the things does make a difference, for example, a formula. These are enclosed by a


Everything inside the rundowns is put inside a <li> (list thing) tag.

For instance, on the off chance that we needed to transform the aspect of the accompanying passage part into a rundown:

We could make it look more organized by using lists elements:

4. Links

Connections (Links) are very Important. They are what makes the web a web! To include a connection, we have to utilize a basic tag<a> — “a” being the short structure for “anchor”.

Here’s the Example with appropriate tags you have to use for a working link:

5. HTML Forms:

HTML forms are one of the primary concerns of communication between a client and a site or application. Structures permit clients to enter information, which is commonly shipped off a web worker for preparing and capacity (see Sending structure information later in the module), or utilized on the customer side to quickly refresh the interface here and there (for instance, add another thing to a rundown, or show or conceal a UI highlight).

A web structure’s HTML is comprised of at least one structure controls (in some cases called gadgets), in addition to some extra tags to help structure the general structure — they are regularly alluded to as HTML structures. The controls can be single or multi-line text fields, dropdown boxes, catches, checkboxes, or radio fastens, and are generally made utilizing the <input>tag, in spite of the fact that there are some different tags to find out about as well.

This Example will help you to understand more practically:

  • Assessments to Practice:

    The following problems will test your understanding of the basics of HTML Web Design Codes covered in the Article above.

    1. a. Marking up a Letter
    2. b. Structuring a page of content

    Next Guide:

    Web Designing is not just limited to HTML and its elements but a lot of vast topics and technologies to learn you got ahead of yourself. HTML is just the first and basic step to take when it comes to learning web development. HTML Web Design Codes interact with other languages and a new era of programming languages. We welcome you to learn from our website and complete your journey with us here.

    [The article is written by Hasnat M.]

Leave a Reply

Your email address will not be published. Required fields are marked *