In the previous sessions, we said that the main skeleton of a website and web app is written in HTML and decorated using CSS, then the back end is written using programming languages such as JS.
HTML stands for HyperText Markup Language and it is the standard markup language for creating web pages. It can describes the structure and content of a web page using elements, which are tags that tell the browser how to display the text, images, links, tables, lists, etc.
HTML is easy to learn and you can create your own website with it. In this article, we will show you how to code a simple HTML page with a general explanation of the concepts of this language from the beginning along with the code. We will also briefly explain its function in the development of progressive web applications.
HTML Elements
At the first step, you must choose a text editor such as Notepad, Note Box or VS Code.
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here… </tagname>
The HTML element is everything from the start tag to the end tag:
<h1> My First Heading </h1>
<p> My first paragraph. </p>
Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!
HTML Page Structure
A typical HTML page has the following structure:
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Let’s explain what each part means:
- The
<!DOCTYPE html>declaration defines that this document is an HTML5 document. It must be the first line of code in your HTML file. - The
<html>element is the root element of an HTML page. It contains all other elements inside it. - The
<head>element contains meta information about the HTML page, such as the title, keywords, description, style sheets, scripts, etc. - The
<title>element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab). - The
<body>element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
HTML Example
Now that we have learned the basic structure of an HTML page, let’s see an example of how to code a simple HTML page with some common elements.
<!DOCTYPE html>
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1> Welcome to My Website </h1>
<p> This is a paragraph of text. </p>
<p> This is another paragraph of text. </p>
<img src="image.jpg" alt="My Image" width="300" height="200">
<a href="https://www.bing.com">Visit Bing</a>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
</body>
</html>
Source on GitHub
Let’s explain what each element does:
- The
<h1>element defines a large heading. You can use<h2>to<h6>elements for smaller headings. - The
<p>element defines a paragraph of text. You can use<br>elements to create line breaks within a paragraph. - The
<img>element defines an image. You need to specify the source (src) attribute with the URL or path of the image file. You can also use the alt attribute to provide an alternative text for the image in case it cannot be displayed. You can also use the width and height attributes to specify the size of the image in pixels. - The
<a>element defines a hyperlink. You need to specify the href attribute with the URL or path of the destination page. You can also use the target attribute to specify how to open the link (such as _blank for a new tab or window). - The
<ul>element defines an unordered list. You need to use<li>elements inside it to define each list item.
HTML Function in Progressive Web Applications
HTML is the foundation of any web page or web app, including PWAs. HTML defines the structure and content of a web page using elements, which are tags that tell the browser how to display the text, images, links, tables, lists, etc.
HTML is also used to provide some metadata and configuration information for a PWA. For example:
- The
<link rel="manifest" href="manifest.json">element links to a manifest file that contains information about the PWA, such as its name, icons, theme color, orientation, etc. This file is used by browsers and app stores to display and install the PWA on devices. - The
<meta name="viewport" content="width=device-width, initial-scale=1.0">element sets the viewport of the web page to match the device’s screen size and scale. This ensures that the PWA is responsive and adapts to different screen sizes and orientations. - The
<script src="service-worker.js"></script>element registers a service worker for the PWA. A service worker is a JavaScript file that runs in the background and handles network requests, caching, offline functionality, push notifications, etc. for the PWA.
HTML is also used to create an app shell for the PWA. An app shell is a minimal user interface that is loaded as soon as possible and then cached for subsequent visits. The app shell provides a native-like experience for the user and can work offline. The app shell usually contains the header, navigation bar, footer, and other static elements of the PWA. The dynamic content of the PWA is then loaded into the app shell using JavaScript and web APIs.
HTML is essential for creating PWAs that are fast, reliable, and engaging. HTML provides the basic structure and content of a web page or web app, and also enables some advanced features and configurations for PWAs. HTML works together with CSS, JavaScript, and web APIs to create PWAs that can run on any platform with a standards-compliant browser.
To complete the HTML training course, you can refer to W3Schools, Codecademy and MDN. We have used these three sources as educational references.
Have you any questions? Ask it on our Reddit.
3 Responses