Learn HTML with Hashir

خدا نے آج تک اس قوم کی حالت نہیں بدلی

نہ ہو جس کو خیال آپ اپنی حالت کے بدلنے کا

God has not changed the condition of that nation till today

The nation which does not bother to change her destiny

HTML Editors
A simple text editor is all you need to learn HTML. Learn HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
We believe in that using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
________________________________________
Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".
Then open a new document to place the code.
Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:




My First Heading

My first paragraph.


Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you. But , when you type as url address, both files are different.

You can have separate index.htm and index.html

So do not be surprised , it File Not Found Error comes…. If you typed abc.htm instead of abc.html
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
The result will look much like this:

HTML Element Reference
Tag Description

Defines a comment

Defines the document type

Defines a hyperlink

Defines an abbreviation or an acronym

Not supported in HTML5. Use instead.
Defines an acronym

Defines contact information for the author/owner of a document

Not supported in HTML5. Use or instead.
Defines an embedded applet

Defines an area inside an image map

Defines an article

Defines content aside from the page content

Defines embedded sound content

Defines bold text

Specifies the base URL/target for all relative URLs in a document

Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document

Isolates a part of text that might be formatted in a different direction from other text outside it

Overrides the current text direction

Not supported in HTML5. Use CSS instead.
Defines big text

Defines a section that is quoted from another source

Defines the document's body

Defines a single line break

Defines a clickable button

Used to draw graphics, on the fly, via scripting (usually JavaScript)

Defines a table caption

Not supported in HTML5. Use CSS instead.
Defines centered text

Defines the title of a work

Defines a piece of computer code

Specifies column properties for each column within a element

Specifies a group of one or more columns in a table for formatting

Adds a machine-readable translation of a given content

Specifies a list of pre-defined options for input controls

Defines a description/value of a term in a description list

Defines text that has been deleted from a document

Defines additional details that the user can view or hide

Specifies a term that is going to be defined within the content

Defines a dialog box or window

Not supported in HTML5. Use instead.
Defines a directory list

Defines a section in a document

Defines a description list

Defines a term/name in a description list

Defines emphasized text

Defines a container for an external application

Groups related elements in a form

Defines a caption for a element

Specifies self-contained content

Not supported in HTML5. Use CSS instead.
Defines font, color, and size for text

Defines a footer for a document or section

Defines an HTML form for user input

Not supported in HTML5.
Defines a window (a frame) in a frameset

Not supported in HTML5.
Defines a set of frames
to
Defines HTML headings

Contains metadata/information for the document

Defines a header for a document or section

Defines a thematic change in the content

Defines the root of an HTML document

Defines a part of text in an alternate voice or mood

Defines an inline frame

Defines an image

Defines an input control

Defines a text that has been inserted into a document

Defines keyboard input

Defines a label for an element

Defines a caption for a element

Defines a list item

Defines the relationship between a document and an external resource (most used to link to style sheets)

Specifies the main content of a document

Defines an image map

Defines marked/highlighted text

Defines metadata about an HTML document

Defines a scalar measurement within a known range (a gauge)

Defines navigation links

Not supported in HTML5.
Defines an alternate content for users that do not support frames

Defines an alternate content for users that do not support client-side scripts

Defines a container for an external application

Defines an ordered list

Defines a group of related options in a drop-down list

Defines an option in a drop-down list

Defines the result of a calculation

Defines a paragraph

Defines a parameter for an object

Defines a container for multiple image resources

Defines preformatted text

Represents the progress of a task

Defines a short quotation

Defines what to show in browsers that do not support ruby annotations

Defines an explanation/pronunciation of characters (for East Asian typography)

Defines a ruby annotation (for East Asian typography)

Defines text that is no longer correct

Defines sample output from a computer program

Defines a client-side script

Defines a section in a document

Defines a drop-down list

Defines smaller text

Defines multiple media resources for media elements ( and )

Defines a section in a document

Not supported in HTML5. Use or instead.
Defines strikethrough text

Defines important text

Defines style information for a document

Defines subscripted text

Defines a visible heading for a element

Defines superscripted text

Defines a container for SVG graphics

Defines a table

Groups the body content in a table

Defines a cell in a table

Defines a container for content that should be hidden when the page loads

Defines a multiline input control (text area)

Groups the footer content in a table

Defines a header cell in a table

Groups the header content in a table

Defines a specific time (or datetime)

Defines a title for the document

Defines a row in a table

Defines text tracks for media elements ( and )

Not supported in HTML5. Use CSS instead.
Defines teletype text

Defines some text that is unarticulated and styled differently from normal text

Defines an unordered list

Defines a variable

Defines embedded video content

Defines a possible line-break

HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.
________________________________________
HTML Elements
The HTML element is everything from the start tag to the end tag:
Content goes here...
Examples of some HTML elements:
My First Heading
My first paragraph.
Start tag Element content End tag
My First Heading
My first paragraph.
none none
Note: Some HTML elements have no content (like the element). These elements are called empty elements. Empty elements do not have an end tag! Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (, , and ):




My First Heading
My first paragraph.


Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:



This is a paragraph
This is a paragraph


However, never rely on this! Unexpected results and errors may occur if you forget the end tag! HTML is Not Case Sensitive
HTML tags are not case sensitive: means the same as .
The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

HTML Basic Examples

HTML Documents
All HTML documents must start with a document type declaration: .
The HTML document itself begins with and ends with .
The visible part of the HTML document is between and .
Example




My First Heading
My first paragraph.



The Declaration
The declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The declaration is not case sensitive.
The declaration for HTML5 is:

HTML Headings
HTML headings are defined with the to tags.
defines the most important heading. defines the least important heading:
Example
This is heading 1
This is heading 2
This is heading 3
HTML Paragraphs
HTML paragraphs are defined with the tag:
Example
This is a paragraph.
This is another paragraph.
HTML Links
HTML links are defined with the tag:
Example
This is a link to w3schools.com website
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.

HTML Images
HTML images are defined with the tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Example


How to View HTML Source?
Have you ever seen a Web page and wondered "Hey! How did they do that?"
View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

W3Schools Free Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

First Web Page in HTML

HTML Tutorial
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
Example



Page Title



This is a Heading
This is a paragraph.


Test Yourself With Exercises
Exercise:
Add a "tooltip" to the paragraph below with the text "About W3Schools".
W3Schools is a web developer's site.

HTML is the standard markup language for creating Web pages.
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.




Page Title



My First Heading
My first paragraph.

First HTML page

Code is here




Page Title



This is a Heading
This is a paragraph.

I am learning from w3schools.com

It is from the first lesson.

HTML Tutorial

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!