One of the most used languages for creating Web Pages and their content is HyperText Markup Language (HTML).To make Web Pages more aesthetically pleasing and user-friendly, HTML uses various tags, elements, graphics, and modern components. The visual style of a web page can be simply altered with the use of simple CSS. The HTML markup language was created by Tim Berners-Lee in 1990 while he was a researcher at the European Organization for Nuclear Research (CERN). On August 6, 1991, the first website ever published used HTML as one of the primary revolutionary technologies. Although HTML has seen tremendous expansion and modification since that time, its fundamental function of formatting and structuring a web page
To teach a browser how to display and interpret the content of a page, HTML is used to mark up the document. For example, The best has not changed.
Learn to create an HTML document
To teach a browser how to display and interpret the content of a page, HTML is used to mark up the document. For example, the Browser is instructed by HTML, as to which text content should be read as a heading and which as a paragraph. In addition, HTML is used to add links to text and add images. HTML tags, which look like this: <tagname>, are used to convey these directives. Although not all tags, the majority of them wrap the material they are meant to modify in an opening tag and a closing tag.
Let's look at some HTML code to get an idea of how these tags are utilized(refer: Interview Questions). The HTML code below demonstrates how to format text, add links, and insert images using HTML elements. If you don't instantly comprehend the tags, don't worry.
<!DOCTYPE html>
<html>
<head>
<title>HTML Page </title>
</head>
<body>
<h1>My First HTML</h1>
<p>This code demonstrates how HTML should be written.</p>
<p>The text is formatted using HTML tags.</p>
<p>It uses HTML to add a <a href="URL.com/Index">link</a>.</p>
<p>Additionally, it adds an image using HTML:</p>
<img src="/downloads/emoji.jpeg"/>
</body>
</html>
Output -
The creation of an HTML document is the first stage in constructing a web page. Any text editor, even a notepad, can be used to build an HTML document. Thus, creating an HTML file can be done using any text editor. We only need to append the .html / .htm extension. We think that learning HTML is best accomplished by utilizing a basic text editor. There are some scenarios that outline the HTML web page design process. These are what they are:
● Editor: In this example, we'll use the editor to type some HTML code. Today, there are many editors accessible, like TextEdit, Notepad++, and brackets.
● HTML code: Enter HTML code in this location in the tag and element formats according to your web page layout and the syntax discussed.
● Save File: Once you have finished writing the HTML code, save the entire document. This should be saved in the required location with the.html extension.
● In the browser, launch a web page: In this stage, we'll launch our HTML page in a browser to examine the results.
Simple HTML web page creation procedures:
Step 1: Launch your text editor of choice, such as Notepad, Sublime Text, etc.
Step 2: Then write your first HTML code
Example:-
<!DOCTYPE html>
<html>
<head>
<title>MY First HTML file</title>
</head>
<body>
Hello Buddy!!. Good to see you again
</body>
</html>
Step 3: Save your file with a file name index.html
Step4: open the HTML file you've saved in your preferred browser (double click on the file, or right-click - and choose "Open with").
The outcome will resemble this:
Output -
Hello Buddy!!. Good to see you again
Thus, this is how we construct a basic HTML document.
Following are some fundamental processes for creating web pages using HTML:
● Layout Design: It is important to create a quick overview of your web page before you begin to design it. This makes it easier for the user to arrange the parts as needed. Each web page should have a header, a body, and a footer.
● Create a code: First, make a single folder in which to put all of your web pages. Simply create the style.css file if you wish to add external code to your HTML webpage, and create a simple index.html page to test the code's functionality.
● Building the elements: Create the "head" and "body" sections first, followed by the "main" , "sections" and at last "footer" component of the web page. It should be a collection of several tags, including <p>, <b>, <h1> to h6> heading tags, <title>,<sub>,<ol>, <ul>, <a herf="">, <section>, <img> and elements like <table>, <nav>, <button>, <textarea>.
● Some CSS code for your layout: In order to position elements correctly, some CSS code must be used. Try to draw attention to your most significant elements.
● Customize your website: By doing this, we can make our website appear and feel better. It involves things like giving your website a backdrop image, including video material to interest users, and giving your website links, lists, and comments.
Understanding and Using HTML Elements:
HTML elements are used to create HTML documents.The majority of HTML elements include HTML tags that instruct browsers how to interpret material such as text, images, heading, or paragraphs. Different sections of an HTML text can be formatted and given structure using HTML elements.
Example:
<strong>My strong text</strong>
Surrounding the content in a pair of opening and closing <strong> tags adds strong formatting. Keep in mind that forward slashes (/) are always used to indicate closing tags.
Understanding how these elements occupy space on a website is crucial when organizing items in an HTML text. On the webpage, some items may occupy much more room than the content they contain. You can anticipate how certain elements will affect other elements' positions on the page by understanding their behavior.
We must become familiar with the HTML tags and attributes in order to construct a website in HTML. Tags in HTML are a few instructions encased in angle brackets. These tags will allow us to create an HTML page that is more visually appealing. The following are some crucial tags to use:
● HTML tag: This element at the document's root indicates that it is an HTML file.
<html> Statements... </html>
● Head tag: The HTML file's head tag is used to group together all of the head elements. It includes the tags for the title, style, meta, etc.
<head> Statements... </head>
● Body tag: The body tag is used to specify the HTML document's body. It includes graphics, tables, lists, and more.
<body> Statements... </body>
● Title tag: An HTML document's title is defined by the title tag.
<title> Statements... </title>
● Heading tag: The heading tag is used to specify a document's heading in HTML.
<h1> Statements... </h1>
<h2> Statements... </h2>
<h3> Statements... </h3>
<h4> Statements... </h4>
<h5> Statements... </h5>
<h6> Statements... </h6>
● Paragraph tag: It is used to specify the content of paragraphs in HTML documents.
<p> Statements... </p>
● Anchor tag: A page can be linked to another page using an anchor tag.
<a href="..."> Statements... </a>
● List tag: Content is listed using the list tag.
<li> Statements... </li>
● Image tag: Image components are added to HTML pages using the image tag.
<img>
● Link tag: Link tags are used to connect content from outside sources.
<link>
● Table tag: A table is created on an HTML page using the table tag.
<table> Statements... </table>
● Form tag: To build an HTML form for the user, use the form tag.
<form> Statements ... </form>
● Input tag: The input tag is used to capture user input.
<input>
● Dropdown tag: To choose an option from a drop-down list, use the dropdown tag.
<option> Statements ... </option>
Example of a simple web page:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Title</title>
</head>
<body style="background-color: #d5f5e3">
<img
src="https://URL.svg"
style="display: block; margin-left: auto; margin-right: auto; width: 10%"
/>
<h1 style="color: green; text-align: center"><strong>Your LOGO</strong></h1>
<h1><strong>Table of Content</strong></h1>
<h2><strong>What is Lorem Ipsum?</strong></h2>
<div>
Lorem Ipsum is only the typesetting and printing industry's equivalent of dummy text.
Since the 1500s, when an unidentified printer jumbled a type galley to create a type specimen book,
Lorem Ipsum has served as the industry's de facto standard dummy text.
It has endured five centuries and the transition to electronic typesetting while virtually remaining unchanged.
Letraset sheets with portions from Lorem Ipsum were first released in the 1960s, and more recently,
desktop publishing programmes like Aldus PageMaker have copies of Lorem Ipsum.
</div>
<h3><em>Some of its topic are given below:- </em></h3>
<ul>
<li><a href="https://www.example.org">Basics</a></li>
<li><a href="https://www.example.org">Why do we use it?</a></li>
<li><a href="https://www.example.org">Where does it come from?</a></li>
<li><a href="https://www.example.org">Where can I get some?</a></li>
</ul>
<h1 style="text-align: center">Thank You</h1>
</body>
</html>
The output will be:
Making Web page Responsive
Making websites that look well across all devices is the goal of responsive web design. Different screen widths and viewports will be automatically accommodated by a responsive web design. Using HTML and CSS to automatically resize, conceal, shrink, or grow a website so that it looks excellent on desktops, tablets, and phones is known as responsive web design. The technique combines adaptable grids and layouts, graphics, and a clever application of CSS media queries. The website should immediately transition to account for resolution, image size, and scripting capabilities as the user moves from their laptop to an iPad.
How Can I Make My Website Responsive?
● Your HTML document should contain responsive meta tags.
● Your layout should use media queries.
● Responsiveness of inserted films and photos.
● Make sure the typography is readable on mobile devices.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
}
div {
border: 2px solid #2ecc71;
margin-left: 6px;
}
@media screen and (max-width: 768px) {
body {
flex-direction: column;
background-color: #333;
color: #3498db;
}
.container-two{
margin-top: 5px;
}
.container-three{
margin-top: 5px;
}
}
}
</style>
</head>
<body>
<div class="container-one">
<p>
Lorem ipsum dolor sit mollitia, consequuntur aliquid amet consectetur adipisicing elit. Quisquam
nobis vitae soluta maiores expedita ipsam
delectus molestiae!
</p>
</div>
<div class="container-two">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
architecto enim neque nemo doloribus deserunt laborum asperiores illum saepe,
consectetur molestias unde fugit dolorum alias temporibus expedita dolor amet nostrum quam! Voluptates nam
voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>
</div>
<div class="container-three">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis dicta quis dignissimos labore repellendus.cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
</div>
</body>
</html>
Save the above code using the .html extension and then run it. After that, resize the browser window to see the magic.
Conclusion
A strong page design is crucial for modern Web development. A poor design will result in fewer visits, which may result in less revenue. A good page layout should generally satisfy the fundamental components of a good page design. How to make a basic HTML page was covered on this page. The blog talked about
● Considering file names and directory structures for your website
● The several web page editors available
● How to use tags to construct a simple HTML page
● What META tags are used for and why
