Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Can I learn HTML in 2 Weeks?
A basic understanding of HTML is required if you want to work in web design or web development, or if you simply want to know how to create great web pages. Fortunately, the fundamentals of HTML are relatively simple for the average learner to grasp. It should roughly take you about one to two weeks to grasp the fundamental concepts of HTML.
Because of the internet and the wealth of online options available, self-study may be all you need to learn HTML. But, if you're like most people, you'll find it difficult to impose self-discipline when it comes to creating a study plan. In such a situation a roadmap could be of great help.
Week 1
This week will begin with a fundamental understanding of HTML, followed by knowledge of its structure and commonly used elements. After this, you proceed to learn about tags, attributes, block-level and inline elements. Then, you can move on to some more important concepts like forms, buttons, lists and tables.
Definition
HTML or Hyper Text Markup Language is the standard markup language for documents intended to be displayed in a web browser. It is made up of a number of elements that instruct the browser on how to display the content.
Basic Structure
A HTML document is divided into three sections:
a line with HTML version information
a header section that is declarative
a body that contains the actual content of the document
<!DOCTYPE HTML>
<head>
<title>HTML document<title>
</head>
<body>
<p>Sample Text</p>
</body>
</html>
Basic Elements
<!DOCTYPE> |
This property specifies the document type. |
<html> |
The definition of an HTML document. |
<head> |
Contains the document's metadata/information. |
<title> |
Defines the document's title. |
<body> |
Defines the body of the document. |
<h1> to <h6> |
HTML headings are defined here. |
<p> |
A paragraph's definition. |
In two or three days you will get a proper idea of the basics and you will be all set to create your first web page. Try implementing this knowledge and write programs using the basic elements to create simple webpages.
Tags and Attributes
HTML tags are short hidden keywords used to build web pages. They include an opening tag, content, and closing tag. There are numerous tags in HTML and it’s not possible to learn all of them in one go so, a knowledge of basic tags is enough
An attribute defines an element’s properties in HTML, it is placed within the element's opening tag and enclosed within quotes. Every attribute has two parts: a name and a value.
Forms and Buttons
Html forms are used to collect user input. Typically, user input is sent to a server for processing. A form is a container for various types of input elements such as text fields, checkboxes, radio buttons, submit buttons, and so on.
The <button> tag defines a clickable button. Text (and tags like <i>, <b>, <strong>, <br>, <img>, and so on) can be placed inside a <button> element which is usually not possible in a button created using input element.
Lists and Tables
HTML Lists enable web developers to organize a collection of related items into lists. There are a total of three types of lists:
Ordered Lists <ol>- Items are displayed in numerical order, such as 1,2,3,....,n.
Un-Ordered List <ul>– Bullet points are used to display content in an unordered format.
Description List <dl>- A description list is a list of terms that each have a description. In this case, the <dt> tag defines terms and the <dd> tag describes each term.
HTML tables enable us to divide data into rows and columns. A table in HTML is made up of one <table> element and one or more <tr>, <th>, and <td> elements. The <tr> element represents a table row, the <th> element a table header, and the <td> element a table cell.
Block-level and Inline elements
A block-level element always begins on a new line, and browsers add some space (a margin) before and after the element by default. It always occupies the entire width available. The two most common block elements are <p> and <div>.
An inline element does not begin on the next line. It takes up only the amount of space required. <span> is the most common example of an inline element.
At the end of week 1 you will have a brief understanding of all the important and commonly used tags, elements and attributes. In order to have a clear picture about them it is very important to implement them by writing a longer and more complex code than the previous one.
Week 2
In this week you will move on to the slightly advanced topics like Canvas elements, event attributes, DOM, MathML, audio and video etc.
Canvas Elements
To draw graphics, HTML Canvas employs JavaScript. It has a variety of methods for drawing boxes, texts, circles, paths, and images.
Event Attributes
HTML Event Attributes respond to the system by using event actions. It is compatible with HTML elements. It allows events to trigger browser actions. When a browser responds to a user action, such as clicking the submit button, event attributes can be used to display the information requested.
DOM
The HTML DOM is a collection of objects. It describes all HTML elements' methods, events, and properties.
MathML
MathML is an abbreviation for Maths Markup Language, which is used in web browsers to represent mathematical equations for machine-to-machine communication. It is an XML application that is used to integrate mathematical formulae into World Wide Web (WWW) pages.
Audio and Video
HTML Audio and Video is a web page element that allows you to add audio/video to your page. The HTML DOM (Document Object Model) Audio/Video contains the audio/methods video's and properties.
At the end of second week, you will be capable to experimenting and creating some projects by using the basic knowledge and advance concepts together. You can try creating challenging projects like a portfolio or ecommerce website to get some hands-on practice and enhance your practical knowledge.
56 Views
