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. The 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 will be no HTML then the browser would not know how the text and images as elements should be placed on the web page. The basic structure of the page is defined by the HTML.
HTML tag:
Almost every HTML tags consist of an opening tag and a close 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 any 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 are 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 to customize the behavior of tags and they are contained within the opening tags. For example < p align=”center” > Any text < /p >
The value to the attributes 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 attributes “src” and “alt” of the image tag. Such attributes are required by the browsers to display the proper working of the tag.
More Read: 3D Character Models
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 to design a web page. The starting line mentioned the html version in which the code is written. The browser interprets the HMTL version and the text from the first line(DOCType). The next line of the HTML code has the HTML tag, internet browser identifies that it is reading the html code. After the HTML tag, there is a HEAD tag that contains the information about the web page such as the website’s title, meta tags, and the location of css file and javascript file. The body tag contains all the elements that is viewed in the browser. In the end, the closing tag of each element wrap themselves 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 .htm or .html extension. However, there are specific HTML editors available. After creating a file with the .html extension, it can be uploaded on any web server and can be viewed online through an internet browser.
CSS:
CSS stands for cascading styles sheets. It is a language used for styling the documents written in a markup language. They are used to design and style web pages. CSS is used to design the user interfaces developed in HTML. CSS is one of the vital technology 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.
CSS is developed to separate the presentation part from the content of the documents. The separation of presentation and content enhances the content accessibility, contributing in more resilience and controlling the requirements of the presentation’s properties, permissive to many HTML pages to utilize the formatting by determining the particular CSS in separate files resulting in minimum 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 store in 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 1 is present against 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 to maintain 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 like 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) you need to apply the refreshed property estimations too. For instance, I need to apply my CSS control to every one of the passages in my HTML archive.
A CSS is a collection of rules that are placed or written within the template that specifies how the web page should look like.
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 set the color of the background of the content.
- The third property puts the border around the content which is 15px thick and the color will be black, however, the appearance of the border should be solid, not dotted.
JavaScript:
Javascript is a deciphered language with a C like a sentence structure. 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. The javascript is inserted in the HTML document to be understood by the browser. By adding javascript, the HTML page becomes the dynamic page as it includes the code snippets that interact with the end-users, handle the browser behavior, 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 acknowledged the form and if all the entries are validated by the Javascript only then it would be moved towards 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 server interaction. User input can be validated by Javascript before moving the page to the web server. This results in low server traffic resulting in less load on the web server.
- Javascript immediately responds to the users. Users don’t need to wait until the pages are refreshed and display the message regarding the wrong input by a user.
- Javascript enhances the attraction of the web page as it reacts when the user hovers over them.
- It provides a richer interface to the 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 reading and writing of file functionality.
- There is no support for networking applications.
- It is 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 traditions in any case. In the event that you are creating dynamic content as the page loads, you will need the script squares to show up where you need their yield 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 yield as the page loads, great practice says that you should put your scripts at the exceptionally base of your HTML. The explanation behind this is 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 the place things get fascinating. Whenever you have a code snippet that you will need to use on a few diverse website pages you should put that piece in an outside Javascript record. The clock on the upper right-hand corner of this page is a decent illustration. The clock shows up on relatively every page on this site thus it is incorporated into my “common.js” record. Each page on the website will stack this document thus the clock is accessible to the greater part of my site pages.
