Tim Berners-Lee developed HTML in 1990, and it is abbreviated as HyperText Markup Language. The electronic documents known as pages are created using HTML and are displayed on the World Wide Web. The pages are linked together through hyperlinks. A web page on the internet can be developed in any version of HTML.
HTML code is used to format the text and images properly so that the internet browser may display those pages in the correct manner as they are intended. HTML actually tells the browser how the elements should be placed on the web page. If there were no HTML, then the browser would not know how the text and images as elements should be placed on the web page (WHATWG, n.d.). The basic structure of the page is defined by the HTML.
HTML tag:
Almost every HTML tag consists of an opening tag and a closing tag. The opening tag has a tag name and attributes while the closing tag has a forward slash and the tag name. Some HTML tags don’t have a closing tag, so the best practice is to end the tag with a forward slash.
Every tag is enclosed in the less-than and greater-than symbols, and anything between those symbols is displayed and affected according to the nature and working of the tag. For example, let’s look at how links are created using HTML tags.
<a href=”www.google.com”>Google</a>
In the above HTML code, the < a> tag creates a link called “Google” that is linking to a web page, i.e., www.google.com.
HTML Tag Attributes:
The attributes of tags allow users to customize the behavior of tags, and they are contained within the opening tags. For example, < p align=”center” > Any text < /p >
The value of an attribute is assigned using the equal sign “=,” such as height=”50%” or cell-padding=”0”. There are some attributes that are declared within the tag such as < hr noshade>.
Most attributes are optional and can only be utilized when there is a need to change the default behavior of the tag. Many tags have some required attributes, such as the “src” and “alt” attributes of the image tag. Such attributes are required by browsers for the proper functioning of the tag.
HTML Example:
< !DocType html >
< html >
< head> < title>My Website </title> </head>
< body>
<h1> Starting HTML code </h1>
<p> Hello World! This is the First HTML page </p>
</body>
</ html >
The HTML code written above has key components for designing a web page. The starting line mentions the HTML version in which the code is written. The browser interprets the HTML version and the text from the first line (DOCTYPE). The next line of the HTML code has the HTML tag; the internet browser identifies that it is reading HTML code. After the HTML tag, there is a HEAD tag that contains information about the web page, such as the website’s title, meta tags, and the location of the CSS file and JavaScript file. The body tag contains all the elements that are viewed in the browser. In the end, the closing tags of the elements wrap the elements for proper syntax.
How to create HTML and view it:
The HTML can be written in any text editor as it is a markup language. It is important to save the file with a.htm or.html extension. However, there are specific HTML editors available. After creating a file with the.html extension, it can be uploaded to any web server and viewed online through an internet browser.
CSS:
CSS stands for Cascading Style Sheets. It is a language used for styling the documents written in a markup language. It is used to design and style web pages. CSS is used to design the user interfaces developed in HTML. CSS is one of the vital technologies of web design, along with HTML and JavaScript. CSS is mostly used by websites to create eye-catching, attractive web pages, UI for web applications, and UI for mobile applications (MDN Web Docs, n.d.).
CSS was developed to separate the presentation part from the content of documents. The separation of presentation and content enhances content accessibility, contributes to greater resilience and control over the requirements of the presentation’s properties, permits many HTML pages to utilize the formatting by defining the particular CSS in separate files, and results in less complexity and redundancy in the content structure.
Due to the separation of presentation, the same HTML code will be presented in different styles for multiple rendering methods. The CSS can also display the web pages according to the page size or viewing device. Users can also utilize another style sheet stored on their personal computer instead of using a style sheet specified by the author.
Modification in the design of the document can be implemented easily and quickly by changing a few lines in the CSS file instead of modifying the HTML code.
There is a priority scheme defined by the CSS specifications to examine which rules should be applied if more than one rule is present for a particular element. So, the elements are prioritized based on the calculated weight, so that there are predictable outcomes.
The World Wide Web is responsible for maintaining the CSS specifications. The W3C provides a free CSS validation service for CSS documents or web pages.
Web programs apply CSS guidelines to a web page to affect the appearance of the content on the web page. A CSS control is shaped from:
A set of properties that specifies how the HTML content would look by determining the values, for instance, I need my component’s width to be half of its parent component, and its background appears to be red.
A selector, which chooses the element(s) to which you need to apply the refreshed property values. For instance, I need to apply my CSS control to every one of the passages in my HTML archive.
CSS is a collection of rules that are placed or written within the template and specify how the web page should look.
CSS Example:
The above depictions could conceivably have seemed well and good, so we should ensure things are clear by showing a quick example. As a matter of first importance, we should take a basic HTML report, containing a < h1> and a < p>.
HTML file:
< !DocType html >
< html >
< head> < title>My Website </title> </head>
< link rel=”stylesheet” href=”style.css”>
< body>
<h1> Starting HTML code </h1>
<p> Hello World! This is the First HTML page </p>
</body>
</ html >
CSS file:
h1 {
color: red;
background-color: red;
border: 15px solid black;
}
p {
color: blue;
}
The CSS starts with the h1 selector containing three properties. These properties will be applied to the h1 element in the HTML document. Each property has a property name and value; this property/value pair is known as a declaration.
- The first property sets the color of the content.
- The second property sets the color of the background of the content.
- The third property puts a border around the content that is 15px thick and black; however, the appearance of the border should be solid, not dotted.
JavaScript:
JavaScript is an interpreted language with a C-like syntax. While numerous individuals forget about the language as simply a program scripting language, it really bolsters numerous exceptional ideas, for example, object-oriented programming, recursion, lambda, and closures. It’s an extremely agreeable language for the novice that rapidly scales to be as intense a device as your aptitudes permit.
Client-Side JavaScript:
Client-Side JavaScript is a commonly used language. JavaScript is inserted in the HTML document to be understood by the browser. By adding JavaScript, the HTML page becomes a dynamic page as it includes code snippets that interact with end users, handle browser behaviour, and can create content dynamically. There are many advantages of client-side JavaScript. JavaScript is used for validation. For example, JavaScript can validate whether the user has entered the correct email address or not. The JavaScript code is processed when the user submits the form, and if all the entries are validated by JavaScript, only then is the form sent to the web server.
JavaScript is an event-driven language. These events are triggered when a user clicks a button or navigates through a link.
Advantages of JavaScript:
- JavaScript allows less interaction with the server. User input can be validated by JavaScript before sending the page to the web server. This results in lower server traffic and less load on the web server.
- JavaScript immediately responds to users. Users don’t need to wait for the pages to refresh and display a message regarding incorrect input.
- JavaScript enhances the attractiveness of the web page as it reacts when the user hovers over it.
- It provides a richer interface for users, such as drag-and-drop components.
Limitations of JavaScript:
JavaScript cannot be treated as a strong programming language. It has some limitations:
- It does not provide file-reading and file-writing functionality.
- There is no support for networking applications.
- It does not have multi-threading capabilities.
In-Line JavaScript:
You can put these script blocks anyplace on the page that you wish; there are a few standards and conventions in any case. In the event that you are creating dynamic content as the page loads, you will need the script blocks to show up where you need their output to be. For example, on the off chance that I needed to state “Hi World!” I would need my script piece to show up in the < body> zone of my page and not in the < head> area.
Unless your scripts are producing output as the page loads, good practice says that you should put your scripts at the very bottom of your HTML. The explanation behind this is that each time the program experiences a < script> label it needs to delay, order the script, execute the script, and at that point proceed with creating the page. This requires significant investment, so on the off chance that you can escape with it, ensure the program hits your scripts toward the finish of the page rather than the beginning.
External JavaScript:
External JavaScript is where things get interesting. Whenever you have a code snippet that you will need to use on several different web pages, you should put that piece in an external JavaScript file. The clock on the upper right-hand corner of this page is a decent illustration. The clock shows up on nearly every page on this site, so it is incorporated into my “common.js” file. Each page on the website will load this file, so the clock is accessible to most of my site pages.
References
WHATWG. (n.d.). HTML living standard. https://html.spec.whatwg.org/
MDN Web Docs. (n.d.). HTML: HyperText Markup Language. https://developer.mozilla.org/en-US/docs/Web/HTML
Academic Master Education Team is a group of academic editors and subject specialists responsible for producing structured, research-backed essays across multiple disciplines. Each article is developed following Academic Master’s Editorial Policy and supported by credible academic references. The team ensures clarity, citation accuracy, and adherence to ethical academic writing standards
Content reviewed under Academic Master Editorial Policy.
