Scribd
Upload
11 views

HTML Basics

Uploaded by

kingdevil837
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

HTML Basics

Uploaded by

kingdevil837
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

Introduction to HTML:

It is the standard markup language used to create web pages.

Features of HTML..
1.HTML is highly flexible
2.HTML is user friendly
3.HTML is an open technology
4.HTML is consistent and efficient
5. It takes less time to load the web pages

Limitations of HTML:
1. It can create only static and plain pages
2. Need to write lot of code
3. Security features are not good in HTML.

Versions of HTML
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1998
XHTML 1999
HTML5 2008-2014 (W3C + WHATWG)
HTML5.1 2016

HISTORY of HTML :(Web-1.0)


As per W3C standards:
First time, Sir Tim Berners Lee implemented
1989 GML ==> Generalized Markup Language
1991 SGML ==> Standard Generalized Markup Language
1994 HTML ==> Hyper Text Markup Language
1998 ==> XML+HTML=XHTML => Extended Hyper Text Markup Language, features are: SMS,
MMS, Email, Web-Services,

After 10 Years(Web2.0)
www.whatwg.org (Mozilla+Apple+Opera)
Web Hypertext Application Technology Working Group
2008 => HTML5 ==> Advanced Hyper Text Markup Language for Better webApps.

After 8 Years
2016 ==> HTML5.1, Advanced Hyper Text Markup Language for all Gadgets and Widgets
(Small E-Devices or Smart Components)

PYTHON+Django+NLP+ML+DL+AI
Web-3.0 ==> Web BOTS (Automation)

Define a Tag:
The text placed between left angular brace " < " and right angular brace " > " is
called as TAG.

Syntax: <------>
Example: <html>

Tags are classified into two types:


1. Paired Tags:
The tags that have both opening and closing tags are called as paired tags.

Examples:
<html>-----------------</html>
<body>-----------------</body>

Note:The closing tag starts with a forward slash("/")

2. Non-Paired Tags:
The tags that have only opening tags but no closing tags are called as Non-paired
tags.
Examples:
<br> or <br/> <hr> or <hr/> <img> or <img/>

1. Empty Tags 2. Self-Closed Tags 3. Forcefully Closed Tags

Structure of html:
<html>
<head>
<title>---------</title>
</head>
<body>
----------
----------
</body>
</html>

HTML Elements/Tags
An element consists of three basic parts:
1. Opening tag
2. Element's content
3. Closing tag.

Essential HTML Tags


There are four sets of HTML tags that form the basic structure needed for every
HTML file:

1 <html></html>
2 <head></head>
3 <title></title>
4 <body></body>

Definition - <html> </html>


This basically defines the document as web page. All other tags must fall between
the html tags.

Header - <head> </head>


The header contains information about the document that will not appear on the
actual page, such as the title of the document.

Title - <title> </title>


The title tag defines the title that will appear in the title bar of your web
browser. The title must appear between the head tags.

Body - <body> </body>


The body tags contain all the information and other visible content on the page.
All your images, links and plain text must go between the <body> and </body> tags.

HTML Tags
HTML tags are element names surrounded by angle brackets:

Syntax:
<tagname>content goes here...</tagname>
NOTE: The start tag is also called the opening tag, and the end tag the closing
tag.

HTML editors
There are many software packages available to develop HTML. The software packages
can be grouped into two main categories:

1 text-based (or code-based) Editors


2 WYSIWYG (what you see is what you get) Editors

1 text-based (or code-based) Editors


You can create web pages with a basic text editor like Windows Notepad, Unix VI,
Linux ViM etc..!!
VI ==> VIsual Editor
ViM ==> Visually Improved Editor

2 WYSIWYG (what you see is what you get) Editors:


There are several popular WYSIWYG editors available:
1 Macromedia Dreamweaver
2 Microsoft FrontPage
3 Adobe Go Live
4 WebStorm
5 PyCharm
6 SublimeText
7 Brackets
8 Edit++, Notepad++
9 ATOM
10 Visual Studio Code

How to Create a WebPage?


Step1: Launch any Text Editor or IDE
Step2: Write Required HTML source code
Step3: Save the file with .htm or .html extension
Step4:Right click on the saved file, open with any Web Browser or Double Click on
the saved file.

Shortcut Keys-In Web Browsers:


The following shorcut keys frequently we are using to complete task quickly..!!
Ctrl+N==> Open a new window
Ctrl+T==> Open a new tab
Ctrl+W==> Close the current window/tab
Ctrl+R or F5 ==>Refresh Web Page
Ctrl+u ==> View Source code
Esc ==> Stop the loading the web page
Alt+<-- Backward History
Alt+--> Forward History
Alt+Home Go to your homepage
Alt+D focus to the address bar to type new URL
To zoom in, increasing the size Ctrl ++
To zoom out, decreasing the size, Ctrl+-
To reset size back to normal Ctrl+0
Bookmark This Page Ctrl + D
Complete .com Address Ctrl + Enter

HTML Comments
The comment tag is used to insert comments in the source code. Comments are not
displayed in the browsers.
You can use comments to explain your code, which can help you when you edit the
source code at a later date. This is especially useful if you have a lot of code.

In HTML, a comment begins with <!-- And ends with -->.

Example of a single line comment:


<!--This is a small comment-->

Example:
<!-----This comment will not appear in the Web Page---->

Example:
<html>
<head>
<title>
Welcome to HTML
</title>
</head>
<body>
<!-- Naresh i Technologies, Leader in IT Training-->
</body>
</html>

Parts in HTML Document:


Generally HTML document has the following 3 parts:
1. Version Information
2. Head Section
3. Body Section

1. HTML version information


The <!DOCTYPE> declaration must be the very first thing in your HTML doc, before
the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction
to the web browser about what version of HTML the page is written in.

NOTE:
The <!DOCTYPE> declaration is NOT case sensitive

Example:HTML-4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Example:HTML-5.0
<!doctype html>

Head Section:
It contains general information, meta-information and document type information.
The <head> Tag inside Elements should not display in body section of a webpage.

Head Section Tags:


1. <title>
2. <link>
3. <meta>
4. <style>
5. <script>

<title> Tag:
The <title> tag is required in all HTML documents and it defines the title of the
document. It is a paired tag.
Syntax:
<title>........................ </title>

Example:
<!doctype html>
<html>
<head>
<title>
Welcome to Web Page
</title>
</head>

<link> Tag:
It defines a link between a document and an external resource. It is used to link
to external style sheets. It is non-paired tag.

Syntax:
<link> or <link/>

Syntax:
<link href="PathOfResource" rel="Relation of Resource" type="Type Of Resource"/>

You might also like