A little bit about webpages
Since every website is made up of individual web pages, it's no surprise that the path to creating a full site begins here, with the creation of a single web page. In technical terms, a web page is a type of document created using the HTML (HyperText Markup Language) programming language. Online pages are designed to be used in web browsers such as Internet Explorer, Google Chrome, and Safari. These browsers perform a straightforward but critical task: they read the HTML in a web page document and show the perfectly formatted result for you to read.
Save your time. Learn this in as little as 1 minute.
We’ve got 500+ bite-sized content to help you learn the smarter way.
Download the app
It's FREE
What does Html stand for
HTML stands for Hypertext Markup language. HTML is the most relevant web design standard—and the only one that you must learn to code Html if you want to make a web page.HTML is used to create a webpage. If your page contains a series of blog entries, a dozen pictures of your pet, or a heavily formatted screenplay, chances are it's an HTML page if you're viewing it in a browser.
HTML is important in web pages because it instructs browsers about how to view the contents of a page using special tags that tell the browser when to start a paragraph, italicize a word, or display an image. You'll need to learn how to use this tag family to make your web pages.
What HTML Looks Like:
For beginners examining how other people have coded their Html pages is a good way to learn. To do so, go to the "View" menu and select "Source." In browser. In certain browsers, you must instead choose "View Source" from the "File" tab. Try it with this page to see how this page is created. When several pages appear to be a jumble under the hood, you'll find yourself developing a critical eye.
HTML code resembles plain text in appearance. Angle brackets are the most recognizable feature of HTML code. The markup code that tells the browser how to view the document data is enclosed by these angle brackets. If we see closely and try searching for an outline of the document, we will find the following structure. Here’s an example of basic HTML code:
Code:
<!DOCTYPE html>
<html>
<head>
<title> Demo Title</title>
</head>
<body>
<h1>I am a heading.</h1>
<p>I am a paragraph.</p>
</body>
</html>
To create your web pages and code in Html, you need to learn to use several tags. We will cover some important HTML tags responsible for creating the structure of a web page and making it better. We will see what the above code results in, but first, let us see about tags.
HTML Tags
An HTML tag is a special word or letter enclosed in angle brackets < and >. Tags are used to construct HTML elements like paragraphs and links. Many elements have an opening and closing tag — a p (paragraph) element, for example, has a <p> tag, followed by the paragraph text, and finally a closing< /p> tag. Several elements do not have a closing tag. These are referred to as "empty elements."The 'br' part, for example, is simply written <br> and is used to insert line breaks. When working with XHTML, you use self-closing tags to create empty objects, such as <br />.
Let us see some important tags :
- <html> ….</html> — Root element tag
- <head> ….</head> — document head tag
- <title> ….</title> — page title tag
- <body> ….</body> — page’s content tag
- <h1> … </h1> —section heading tag
- <p> … </p> — paragraph tag
- <a> … </a> — hyperlink tag
- <img> — image tag
- <div> … </div> — block-level container tag for content
- <span> … </span> — inline container tag for content
1. <html> ….</html> — Root element tag
The HTML aspect is the foundation of all web pages. It's also known as the root element because it's at the top of the web page's tree of elements. You write an opening html> tag followed by a closing /html> tag to make an Html element. The rest of your web page is then sandwiched between these two tags:
Code:
<html>
(code for our hello world webpage)
</html>
2. <head> ….</head> — document head tag
In contrast to the content of the web page, the head element includes information about the web page. You can place a variety of elements inside the head element, including
title for page title which shows on the browser tab,
link which allows you to add style sheets and favicons to your page and add JavaScript code to the page,
meta, which allows you to define character sets, page descriptions, and keywords for search engines script.
Here's an example of a typical head element:
Code:
<head>
<title>Our Hello World Store</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="This is the best store.">
<meta name="keywords" content="best,helloworld,webpage ,store,onlinestore">
<link rel="stylesheet" type="text/css" href="/helloworldstyle.css">
<link rel="fav icon" href="/favicon.ico">
</head>
3. <title> ….</title> — page title tag
The page's title is contained in the title element. The title appears in the browser's title bar (the top bar of the browser window), as well as bookmarks, search engine results, and a variety of other locations. The title should accurately and succinctly define the page's content. Make an effort to give each page of your website its title.
Consider the following code:
Code:
<title>Our Hello World Webpage</title>
4. <body> ….</body> — page’s content tag
The body element appears on the page after the head element. It should include all of your website's content, including text, photographs, and other media. Except for frameset pages, which use frame elements instead of a single body element, all web pages have a single body element.
The body element's general format is as follows:
Code:
<body>
(page content goes here)
</body>
5. <h1> … </h1> —section heading tag
Headings allow you to divide the content of your page into manageable chunks. They work similarly to the headings and subheadings in a book or article.H1, h2, h3, h4, h5, and h6 are the six heading elements supported by HTML. The most important headings are designated as h1, while less important subheadings are designated as h2. If your page is extremely long and complex, you won't need to use more than h1, h2, and h3.
An example of an h1 heading feature is as follows:
Code:
<h1>Hello World Store</h1>
6. <p> … </p> — paragraph tag
The p tag allows you to build text paragraphs. The majority of browsers view paragraphs with a vertical distance between them, which helps to break up the text. Although you can build text "paragraphs" by using br> tags to insert blank lines between chunks of text, p elements are preferable. It's not only cleaner, but it also offers browsers, search engines, and other non-humans a clearer understanding of how the website is laid out.
An example of a paragraph is as follows:
Code:
<p>This is our Hello World Store</p>
7. <a> … </a> — anchor tag
The anchor tag is one of the most important elements on a web page because it allows you to connect to other content. The material can be on your website or a third-party website. To make a connection, wrap a> and /a> tags around the content you want to link to, then fill in the href attribute of the a> tag with the URL you want to link to.
To make any text that links to www.abc.com, write the following code:
Code:
<a href="http://www.abc.com/">ABC cloth store</a>
8. <img> — image tag
You can use the img tag to add photos to your web pages. To insert an image, first, upload it to your web server, then use the img> tag to refer to the filename of the image you just uploaded.
Consider the following code:
Code:
<img src=" https://www.shutterstock.com/image-vector/flat-design-modern-store-1727562304" alt="hello world photo">
9. <div> … </div> — block-level container tag for content
The div element is a generic container that you can use to give your page content more structure. For example, you might use a div element to group multiple paragraphs or headings that serve the same function. Div components are commonly used for items like:
- Headers and footers on pages
- Material columns and sidebars
- Inside the text flow, highlighted boxes
- Ad spots, for example, are areas of the page with a particular intent.
- Galleries of images
You may use CSS to style and location your div elements by adding class and/or id attributes to them.This is the starting point for CSS-based page templates. Here's an example of how to use a div to contain material for a page's navbar:
Code:
<div id="navbar">
<h1>Navbar Heading</h1>
<p>Navbar text</p>
<p>More navbar text</p>
</div>
10. <span> … </span> — inline container tag for content
The span element, like the div element, is used to organise your text.The distinction between div and span is that div is a block-level element and span is an inline element:
Block-level components, such as div, h1, and p, are used to hold relatively large or independent blocks of content, such as paragraphs of text. Every block-level element begins on a new line.
Smaller pieces of content — such as a few words or a sentence — are kept inside a larger block of content using inline elements like span, a, and img. The addition of an inline element does not result in the creation of a new line. Inline elements can contain block-level elements, but block-level elements cannot contain inline elements.
A span, like a div, is often given a class and/or id attribute so that it can be styled with CSS. The span elements are used in the following example to denote product names inside a paragraph.
CSS could then be used to illustrate these product names. The information generated by the span elements may also be used by a custom search engine to classify the items on the list.
Consider Following code:
<p>Some of the products include <span class="product">Widgets</span>, <span class="product">Gadgets</span>, and <span class="product">Wonderful Tools</span>.</p>
Putting it all Together
First, let see what our document outline shows us which we thought to see later.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Demo Title</title>
</head>
<body>
<h1>I am a heading.</h1>
<p>I am a paragraph.</p>
</body>
</html>
Gives us the following page:
It does show us a structure and a page, but it is not much. Let us use all of the tags we have learn’t about and create our basic HTML website of Hello World Store and its first page:
Code:
<html>
<head>
<title> Our Hello World Store </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content=" This is the best hello world store.">
<meta name="keywords" content="best,helloworld,webpage ,store,onlinestore">
<link rel="stylesheet" type="text/css" href="/helloworldstyle.css">
<link rel="fav icon" href="/favicon.ico">
</head>
<body>
<h1> Hello World Store </h1>
<div id="mainContent">
<p> This is our Hello World Store .</p>
<p>Here's a picture of our store:</p>
<img src=" https://www.shutterstock.com/image-vector/flat-design-modern-store-1727562304" alt="hello world photo">
</div>
<div id="navbar">
<h2>Buy our items!</h2>
<p>Some of the products include <span class="product">Widgets</span>, <span class="product">Gadgets</span>, and <span class="product">Wonderful Tools</span>.</p>
For cloths visit out other store <a href="http://www.abc.com/">ABC cloth store</a>
</div>
</body>
</html>
Above code gives us following page:
This may not be the fanciest storefront page you have ever seen, but it does show the use of tags we have just learned about.
This code works and gives us a page, but there are some issues with it. We need to validate our code with a W3C validator for standards.
W3C is a worldwide web Consortium that sets the standards for a web page, tags, and what will be globally accepted. Without this, the web pages would not be possible because everyone in this world would be creating pages according to what they understood as right. We need to go on w3c validator and when we validate we find the following issues:
We see that the validator requires a language to be added in the <html> opening tag. Why? Let us see this in W3C language:
Browsers and other applications can use information about the language of content to deliver to users the most appropriate information or to present information to users in the most appropriate way. The more content is tagged and tagged correctly, the more useful and pervasive such applications will become.
The second requirement is to declare a doctype. Why do we need to add this when the page works fine: Again in W3C language:
A DOCTYPE Declaration is mandatory for most current markup languages and without one it is impossible to reliably validate a document.
If you need to learn more about other validations, please follow this link.
We can see that our issues are resolved and our markup is validated.
Now that we have created and validated our first page, we can go ahead and start creating other pages and linking them together via <a>..</a> tag so they are interlinked. Isn’t it how the web works? Yes, and we have learned about the tags and can use them also in our basic Html tutorial. HTML does not require you to have any specific editor tool. You are good with your basic notepad editor to create a webpage. So, go ahead, create, validate and have fun.
Theoretically, we have summed up everything you need to know about HTML tags. Grab a chance to discover some new skills when you get some time off web development. Download the KoolStories- micro learning app now to discover, connect, learn and grow with like-minded people.
){kind=link}