Are you the one who enjoys creating things, and adding colors to them? If yes. Here’s a way you can showcase your skill which is demanding and also pays you well. Web Development!!!
A profession that is ever-demanding and full of possibilities for the future. We have talked about web development a lot But, What is its foundation? Wanna know the answer? It’s HTML (Hyper Text Markup Language). Yes, HTML is the answer.
Now, moving in a very fast-growing world, it becomes necessary for you to move ahead with the flow. You also might be wanting to learn things very fast. When it comes to HTML, it is a very easy scripting language that even people from a non-IT background can learn. Now, comes the question, in how many days? Can I Learn HTML in 2 weeks? is the most searched question. To answer this, YES, you can learn HTML in 2 weeks.
But, you need to have a roadmap to understand how to divide your days as per the concepts in HTML required. Let’s begin this journey of learning HTML in 2 weeks.
Week 1
Beginning with HTML, here are some pointers you must definitely go-through
- What is HTML?
- Structure of HTML
- Basic Elements
- Tags
- Attributes
- HTML Forms and Buttons
- HTML Lists and Tables
- HTML Block and Inline Elements
Start With the Basics of HTML
What is HTML?
HTML (HyperText Markup Language) is the scripting language for making web pages and is the foundational language for building wonderful websites. You can also add functionalities to it. and it is a way to describe the layout of a website using markup.
Structure of HTML
The structure of HTML, also known as the boilerplate follows this:
<!DOCTYPE html><html>
<head>
<title>GeeksForGeeks</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
Default code has been
loaded into the Editor.
</p>
</body>
</html>
|
Basic Elements of HTML Documents
- <!DOCTYPE HTML>: It is the beginning line of the HTML code (not a tag/element) which defines that this is an HTML5 document (describing the version of HTML). It does not include any content within it and is not case-sensitive.
- <HTML>: It is the root element (top-level element) of an HTML document.
- <head>: It is an element that contains meta-information about the page, and also contains the links, fonts, and JavaScript code.
- <title>: It tells about the title for the page which is visible at the page’s tab or the browser’s bar.
- <body>: It contains other visible elements like images, hyperlinks, headings, tables, paragraphs, etc. Only one body element exists in an HTML document.
- <h1>: It defines the heading element with sub-heading <h2> to <h6> whose font-size reduces as the <h> tag increments.
- <p>: It defines the paragraph element.
In your first two days, understand the basic format of writing an HTML code. Make a simple web page containing all the required elements mentioned above. Make use of the practice portal and try your own default messages getting printed on a web page.
When you get clear with the flow of writing an HTML default code, let’s continue our journey by learning about tags.
Tags in HTML
HTML tags are short hidden keywords that are used to create web pages. It contains the opening tag, content, and closing tag. It has an opening and closing tag <>. The start of the tag begins with a <> and ends with </>. Also, some tags don’t have a closing tag. There are various tags in HTML which allow you to render their properties. Each tag has its own purpose and properties. It becomes a bit complex to know all the tags, so it is recommended to learn the most commonly used tags in HTML.
For this, refer to the article – Most commonly used tags in HTML.
Attributes in HTML
HTML Attributes are the keywords that provide additional information and define the characteristics of an HTML element. It contains two parts: the attribute name and the value. It is written in a quote(” “). It has a name and value pair. These attributes can include hidden, id, context_menu, data, dir, style, title, and class.
Syntax:
<element attribute_name="value">content</element>
HTML Forms and Buttons
HTML Form is an element to collect data in form of text, numbers, email, values, and passwords, also control fields like radio buttons, submit buttons, etc. Forms can be used to collect data from users when you apply for a company, you have to submit all your data in the form. <form>
HTML Button <button> tag is used to perform an action. When you apply for a job, you need to submit all your personal details, so there’s a SUBMIT button at the end which after getting clicked, saves all the details. Different browsers support different default types.
HTML Lists and Tables
Lists are used in HTML to group information and make them in order. Also, can be used for ranking and designing, and layout formatting. For example, lists can be used to list a menu of a restaurant.
There are three types of lists in HTML:
- Ordered Lists – Items are displayed in an ordered form like 1,2,3,….,n.
- Un-Ordered List – Items are displayed in an unordered form such as bullet points.
- Description List – The description list is a list of terms having a description of each term. Here, <dt> tag defines terms and <dd> tag describes each term.
Tables are expressing the data in Excel format i.e., rows and columns. It can be used while differentiating between two or more topics.
HTML Block and Inline Elements
A Block level element in HTML stretches to the left and right as far as it can go. It starts with a new line and the height is equal to the content’s height.
An inline element does not start with a new line and has the required width. You need to write the statement in a <span> statement </span>
You can read about HTML Block and Inline Elements more briefly.
Here’s a demo example for you to have a hands-on which describes some basic concepts and gives you an idea of how to write an HTML code:
<!DOCTYPE html><html lang="en">
<!-- Head Section Content -->
<head>
<!-- Page title -->
<title>Basic form design using HTML</title>
</head>
<!-- Body Section Content -->
<body>
<!-- Heading Content -->
<h1>GeeksforGeeks</h1>
<h3>Basic form design using HTML</h3>
<!-- Creating a from -->
<form action="#">
<fieldset>
<legend>Personal Details</legend>
<!-- Label and input field -->
<p>
<label>First name : <input name="firstName" /></label>
</p>
<p>
<label>Last name : <input name="lastName" /></label>
</p>
<!-- Label and radio button field -->
<p>
Gender :
<label><input type="radio" name="gender"
value="male" /> Male</label>
<label><input type="radio" name="gender"
value="female" /> Female</label>
</p>
<p>
<label>Email : <input type="email"
name="email" /></label>
</p>
<p>
<label>Date of Birth : <input type="date"
name="birthDate"></label>
</p>
<!-- Label and textarea field -->
<p>
<label>Address :
<br />
<textarea name="address" cols="30"
rows="3"></textarea>
</label>
</p>
<!-- Creating a button -->
<p>
<button type="submit">Submit</button>
</p>
</fieldset>
</form>
</body>
</html>
|
HTML Code Example
If you want to learn Advance HTML then don’t forget to explore the best affordable course: Advanced HTML – Self Paced
Week 2
When you’re all done with the basics of HTML, let’s explore the advanced HTML:
Explore the Advance HTML
HTML Canvas Elements
HTML Canvas uses JavaScript to draw graphics. It has different methods for drawing boxes, texts, circles, paths, and adding images. The graphics can be created using <canvas>, which allows for scriptable and dynamic rendering of 2D shapes and bitmap images.
Event Attributes in HTML
HTML Event Attributes use event actions to respond to the system. It can be used with HTML elements. It lets events trigger actions in a browser. Event attributes can be used when a browser reacts to a user action example, clicking on submit button displays the information asked for.
HTML DOM
The browser automatically creates a (Document Object Model) DOM of the page when a web page is loaded. The HTML DOM is actually a tree of objects. It describes a method, events, and properties for all HTML elements.
HTML Audio and Video
HTML Audio and Video is an element used to add audio/video to the web page. The HTML DOM (Document Object Model) Audio/Video contains the methods and properties of the audio/video.
HTML5 MathML
MathML is abbreviated as Maths Markup Language which is used to represent the mathematical equation in web browsers for machine-to-machine communication. It is an XML application for describing mathematical notations, used to integrate mathematical formulae into World Wide Web (WWW) pages.
This HTML Cheat Sheet – A Basic Guide to HTML will surely guide to the path which discovers major points you need to cover in order to start learning HTML as a beginner.
Here’s a demo that demonstrates the advanced HTML concepts:
<!DOCTYPE html><html>
<head>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Event Attribute</h2>
<p>Choose Subject:</p>
<select id="GFG" onchange="Geeks()">
<option value="Data Structure">Data Structure
<option value="Algorithm">Algorithm
<option value="Computer Network">Computer Network
<option value="Operating System">Operating System
<option value="HTML">HTML
</select>
<p id="sudo"></p>
<script>
function Geeks() {
var x = document.getElementById("GFG").value;
document.getElementById("sudo").innerHTML =
"Selected Subject: " + x;
}
</script>
</body>
</html>
|
Demo of Advance HTML
Here are some projects you must practice to get hands-on Top 10 Projects For Beginners To Practice HTML and CSS Skills