Today We will discuss HTML Coding (Hypertext markup language).
1989 ----Tim Berners-Lee invented www
1991---- Tim Berners-Lee invented HTML
1993-----Dave Raggett drafted HTML+
1995-----HTML Working Group defined HTML 2.0
1997-----W3C Recommendation: HTML 3.2
1999----W3C Recommendation: HTML 4.01
2000----W3C Recommendation: XHTML 1.0
2008--- WHATWG HTML5 First Public Draft
2012----WHATWG HTML5 Living Standard
2014----W3C Recommendation: HTML5
2016----W3C Candidate Recommendation: HTML 5.1
2017----W3C Recommendation: HTML5.1 2nd Edition
The use of a web browser is to read HTML documents and display them correctly.
<h1> is the main heading.
Headings Are Important most important for search engines (Google, Bing)
Search engines use the headings to index the structure and content of your web pages.
Each HTML heading has a default size.
Tag Description
<hr> Defines a thematic change in the content
<hr> use to thematic break in an HTML page (horizontal line)
<hr> It has no require end tag( closing tag)
Example
Example
<pre> element defines preformatted tex,displayed in a fixed-width font (preserves spaces and line breaks)
Example
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
<img> tag is used to embed an image in an HTML page.
Two ways to specify the URL in the src attribute
Example
Example:
This tag specifies the width and height of the image (in pixels):
Example
Example
lang attribute should be always inside the <html> tag.
<html lang="en">
<body>
...
</body>
</html>
Let’s start to learn,
1. History of HTML
1989 ----Tim Berners-Lee invented www
1991---- Tim Berners-Lee invented HTML
1993-----Dave Raggett drafted HTML+
1995-----HTML Working Group defined HTML 2.0
1997-----W3C Recommendation: HTML 3.2
1999----W3C Recommendation: HTML 4.01
2000----W3C Recommendation: XHTML 1.0
2008--- WHATWG HTML5 First Public Draft
2012----WHATWG HTML5 Living Standard
2014----W3C Recommendation: HTML5
2016----W3C Candidate Recommendation: HTML 5.1
2017----W3C Recommendation: HTML5.1 2nd Edition
2. What is HTML ?
HTML stands for Hypertext markup language.
It is the standard markup language.
It is used for creating Web pages
Element
Start tag content End tag
<tagname> Content goes here...</tagname>
HTML Elements:-
Heading tag ( include stating tag and closing tag)
Paragraph tag ( include stating tag and closing tag)
3. Applications of HTML
- Web pages development
- Game development
- Responsive UI
- Internet Navigation
4. Where can we learn HTML ?
Learn HTML Using Notepad for window pc Learn HTML Using TextEdit for Mac Follow the steps below to create your first web page with Notepad or TextEdit.
Step 1:
Open Notepad (PC)
Click window button +R
Type Notepad.
Step 1:
Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Step 2:
Write Some HTML Write or copy the following HTML code into Notepad:
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 files.
View in Browser
 |
| Page structure |
- The yellow area Section will be displayed in a browser, Which contents inside the <body> section
- The green area (title) Section will be displayed in a browser's title bar
5. Use of Web Browsers
The use of a web browser is to read HTML documents and display them correctly.
some browser-Chrome, Firefox, Safari
6. HTML Code for Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
7. HTML Code for Headings
Headings are characterized with the <h1> to <h6> tags.<h6> is the least important heading.
Example
Note:
Example
------------------------------------------
<h1> This is a Heading 1 </h1>
<h2> This is a Heading 2 </h2>
<h1> This is a Heading 1 </h1>
<h2> This is a Heading 2 </h2>
<h3> This is a Heading 3 </h3>
<h4> This is a Heading 4 </h4>
<h5> This is a Heading 5 </h5>
<h6> This is a Heading 6 </h6>
------------------------------------------
Browsers automatically add some white blank (a margin before and after a heading)
Headings Are Important most important for search engines (Google, Bing)
Search engines use the headings to index the structure and content of your web pages.
Headings play the main role in SEO ( Search Engine Optimization )
You can specify a size for any title with the help of the style attribute and CSS font-size property
Example
<h1 style="font-size:60px;">This is a Heading 1</h1>
8. HTML code for Paragraphs
< p > tag defines a paragraph.< p > is starting tag of paragraph
</p> is closing(ending) tag of paragraph
Example
Browsers automatically add some white blank (a margin before and after a paragraph.)
Example
------------------------------------------
<p> This is a paragraph.</p>
<p> This is 2nd paragraph.</p>
<p> This is a paragraph.</p>
<p> This is 2nd paragraph.</p>
------------------------------------------
- Some following tags, which is very important in paragraph
<hr> Defines a thematic change in the content
<br> Inserts a single line break
<pre> Defines pre-formatted text
(a). Describe <hr> tag
<hr> use to thematic break in an HTML page (horizontal line)
<hr> It has no require end tag( closing tag)
Example
------------------------------------------
<h1>This is heading 1</h1>
<p>paragraph some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>paragraph some other text.</p>
<hr>
<h1>This is heading 1</h1>
<p>paragraph some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>paragraph some other text.</p>
<hr>
------------------------------------------
(b). Describe <br> tag
<br> use to line break (without starting a new paragraph)
<br> It has no require end tag( closing tag)
<br> It has no require end tag( closing tag)
Example
-------------------------------------------------------------
<p>This is<br>a paragraph<br>with line breaks.</p>
<p>This is<br>a paragraph<br>with line breaks.</p>
-------------------------------------------------------------
Run code
This is
a paragraph
with line breaks
a paragraph
with line breaks
(c). Describe <pre> tag
<pre> element defines preformatted tex,displayed in a fixed-width font (preserves spaces and line breaks)
<pre> tag has require end tag( closing tag) </pre>
Example
------------------------------------------
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
------------------------------------------
Run code result
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
9. HTML Attributes
- href Attribute or HTML Links
- src Attribute or HTML Images
- alt Attribute
- width and height Attributes
- title Attribute
- style Attribute
- lang Attribute
(a). Href Attribute or HTML Links
<a> --tag use to defines a hyperlink.href --Specifies the URL of the page to which the link goes:
Example:
------------------------------------------------------------
<a href="https://www.pktric.club">pktric</a>
------------------------------------------------------------
(b). Src Attribute or HTML Images
src attribute specifies the path to the image to be displayed
Example
------------------------------------------------------------
<img src="img_girl.jpg">
<img src="img_girl.jpg">
------------------------------------------------------------
- This attribute Links to an image that is hosted within the website
- They will not break if you change the domain.
Example
--------------------------------------------------------------
<img src="https://www.pktric.club/images/img_girl.jpg">
---------------------------------------------------------------
In this attribute Links to an image that is hosted on another website
(c). Alt Attribute
Google is unable to read the photo. so we use alt tag to tell what is in the photo,
Example:
---------------------------------------------------------------
<img src="img_baby.jpg" alt="Baby with a chocolate">
---------------------------------------------------------------
(d). Width and Height Attributes
Example
---------------------------------------------------------------
<img src="img_baby.jpg" width="300" height="400">
<img src="img_baby.jpg" width="300" height="400">
---------------------------------------------------------------
(e). Title Attribute
(f). Style Attribute
This attribute is used to add styles to an element (color, font, size )Example
---------------------------------------------------------------
<p style="color:red;">This is a paragraph.</p>
<p style="color:red;">This is a paragraph.</p>
---------------------------------------------------------------
(g). lang Attribute
It is used to declare the language of the Web page
Example
------------------------------
<!DOCTYPE html><html lang="en">
<body>
...
</body>
</html>
------------------------------
Tags
Tutorial