Start Web Dev With Basic Html
Let’s Make Our Step Toward Web Development.
Learning HTML helps you build the structure of any website, isn’t it awesome? let’s go through it.
Now, Before Starting Our Programming Journey, We need an editor to write our code. (We can write it in notepad as well, but that will make our developer life challenging)
so, Let’s choose a code editor, below I am writing down some good options.
- Sublime Text: A popular, cross-platform code editor with a vast library of plugins and a minimalistic UI.
- Atom: An open-source, hackable code editor developed by GitHub, with a large plugin ecosystem and customizable interface.
- Visual Studio Code:(We will be using it) A free, open-source code editor developed by Microsoft, with support for debugging, version control, and embedded Git.
- vim: A powerful, terminal-based code editor known for its efficient keyboard shortcuts and steep learning curve.
- IntelliJ IDEA: A proprietary code editor developed by JetBrains, with a focus on developer productivity and intelligent code assistance.
- Eclipse: A widely-used, open-source code editor for Java development with a large ecosystem of plugins and extensions.
- TextMate: A proprietary code editor for macOS, with a “bundle” system for extending its features.
You can choose any of the above code editors (Remember not to love or hate any of them, as each one of them has its pros and cons)
Now we can start with HTML in the code editor:
Create a file and name it index.html or index.htm, as you have understood we can use both .html and .htm extensions for HTML files, but generally, we use .html.
now we can write anything here we want and if we open this file in browser we will see that in the browser.
But we will write it in proper structure and will use the power of HTML.
Now generally emmet comes installed in the code editor, so if we will type ! and press enter. we should be able to see the boiler plate code of HTML.
if it is not working for you, just copy and paste the below code, (we will understand what it is one by one.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
</body>
</html>
This is a basic HTML document that sets up the structure of a web page.
The first line, <!DOCTYPE html>
, is a document type declaration, which tells the web browser that this is an HTML document.
The <html>
element is the container for all the other elements on the page, and it has a lang
attribute set to "en" for English.
Inside the <html>
element, we have the <head>
element, which contains information about the document that is not visible to the user. Inside the <head>
element, we have several <meta>
tags. The first one <meta charset="UTF-8">
specifies the character encoding for the document, which is set to UTF-8.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
is a compatibility mode tag, this will force Internet Explorer to use the latest rendering engine rather than an older one.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
helps make the website look good on all devices (i.e. responsive design), by setting the width of the viewport to the width of the device and setting the initial scale to 1.0.
The <title>
element contains the text that appears in the browser's title bar or tab. The text inside the <title>
element "Document" is used as the title of the web page.
The <body>
element contains the visible content of the web page. Currently, it is empty, but this is where you would put the main content of your webpage like text, images, links, etc.
Finally, the </html>
closing tag indicates the end of the HTML document.
In summary, this code sets up the basic structure of a web page, including the head section with metadata such as the character encoding, viewport and a title; and the body section where the main content of the webpage will reside.
Let’s see how it is looking in browser
Let’s first replace Document with name Vivek and see how it changing in browser.
As you can see title changed to Vivek in the browser as well, but there is nothing in the body of the browser. because there is nothing in the body tag of HTML as well.
The <body>
tag is an essential element in HTML as it represents the content that will be displayed on the webpage. It's where you put all the visible elements such as headings, paragraphs, images, links, and more.
Speaking of headings, there are six different levels of heading tags in HTML, ranging from <h1>
to <h6>
. Each heading level decreases in size as you go from <h1>
to <h6>
. For example, <h1>
is the largest heading size and it's typically used for the main title of a webpage.
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
Paragraph tags, or <p>
, are used to add text and other types of content to a webpage. You can add a title attribute to a paragraph tag, as in <p title="viv">Vivek News</p>. This title attribute will appear as a tooltip when a user hovers over the paragraph.
<p title="viv">Vivek News</p>
Hyperlinks, or links, can be added to a webpage using the anchor tag, or <a>
. The href
attribute is used to specify the destination URL of the link. It's a good practice to use descriptive link text that accurately describes the destination webpage. For example
<a href="./research.html">Learn more about our News research</a>
The <img>
tag is used to add images to a webpage. The src
attribute is used to specify the URL or file path of the image, and the alt
attribute provides alternative text for the image in case it can't be displayed. You can also add attributes such as srcset
, sizes
and width
where srcset is used to define different size of images, sizes attribute which defines how the image will be displayed on the webpage, and width which is used to define the width of the image on webpage.
<img src="./news.png" alt="A Imp News" width="400" height="300" class="featured-image" title="Imp News">
In summary, the body tag is an essential element in HTML and it’s where you put all the visible elements of a webpage. The heading tags, paragraph tags, anchor tags, and image tags are some of the most commonly used elements within the body section. Each tag has its own specific attributes that can be used to customize the appearance and behavior of the elements on the page.
Here is all the code we have written
<!DOCTYPE html>
<html lang="en">
<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>Vivek</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p title="viv">Vivek News</p>
<a href="./research.html">Learn more about our News research</a>
<img src="./news.png" alt="A Imp News" width="400" height="300" class="featured-image" title="Imp News">
</body>
</html>
Let’s see what our web page looks like now :
See, how easy it was to make our first web page.
GitHub Link for Learning Html: https://github.com/viveksinra/FSJS_LEARNING/tree/master/html_only
GitHub Link for Learning FSJS:
https://github.com/viveksinra/FSJS_LEARNING
Hope this article helped you learn something. Please consider to follow me