The HTML stands for Hyper Text Markup Language. It is a basic web programming language which is used to make webpages.
Before developing HTML the data sharing is very difficult among different nature of computers, Computers were available in so manv different screen sizes, operating systems, and system structures. That means one computer environment did not supported easily to another computer environment.
Such problem faced by Sir Tim Berners-Lee. He is best known as the inventor of the World Wide Web, he was a researcher scientist at CERN (The European Council for Nuclear Research) laboratory in Geneva, Switzerland.
In 1989, Berners-Lee developed the hypertext system that could be used as an interface to access scientific information and this information displayed equally well on different computers as like Macintosh systems, NeXT Workstations, IBM PCs with Windows OS. This system was based an software technology which was worked on a various server computers available in network.
Berners-Lee developed the first versions of HTML, at first he concentrate on sharing the content and structure of the system and then later he considered the presentation. Hence, first webpage had become as static webpage. Hypertext documents are navigating using Hyperlinks.
Berners-Lee developed a system to access multiple data to visit single web page, that system later called as World Wide Web.
In 1989: Developed hypertext system.
In 1990: Developed a text mode browser to access hypertext system. In 1991: Hypertext system was implemented officially at CERN.
In 1992: Hypertext system named as WWW (World Wide Web) In 1993: Graphical browser Mosaic used to run www.
In 1994: Mast Popular Browser Netscape Navigator used to run www. In 1995: Microsoft’s Internet Explorer used to run www.
WebPage:
Definition: “A webpage is a computer file document commonly written in HTML that is accessible
throughout the Internet (www) or other network using Internet browser sofiware.”
A web page is accessed by entering a URL address and mav contain text, graphics, and hyperlinks to other web pages and files.
Web Page content:
In web page there are two king of information stored—
1. Visible information:
That means a data which is visible to user, there are normally five different categories of data can displayed in webpage Such as 1) Text 2) Images/Photos 3) Audio 4) Video S) Other (MS Word, MS Excel, PDF Documents and software)
2. Hidden information:
The hidden information on web pages includes HTML tag elements, Programming language coding.
How to open a web page?
To view a web page requires a browser (e.g., Internet Explorer, Firefox, or Chrome). For example, you are reading this web page using a browser. Once in a browser, you can open a web page bv entering the URL in the address bar. For example, typing “https://www.Example.com” opens the webpage of Example.com website. If you don’t know the URL of the website you want to visit, you can use a search engine (www.google.com) to find the web page or use the search on the website containing the web page.
Website:
Definition: “Website is a collection of interlinked and interrelated webpages that can access throughout
the internet (www).”
A website is collection of more than one web page. Each website has its own address known as URL.
For example, http://www.example.com/home.html
0 When someone gives you their web address, it generally wants to takes you to their website’s home page, which should introduce you to what that site offers in terms of information or other services.
& Why Do People Visit Websites?
Generally, people look at websites far two primary reasons:
- To find information: Now a day people used internet for getting information about anything, someone wants to read news, watching knowledgeable videos, to know something new.
- To complete a task: This means doing work on internet such as, email, purchasing online product, filling scholarship form, online booking, creating online account in any website.
0 Websites have many functions; a website can be a personal website, a commercial website, a government website or a non-profit organization website. Websites can be the work of an individual, a business or other organization, and are typically dedicated to a particular topic or purpose.
E) A website is stored an a computer system known as a web server, also called as HTTP server.
Types of website:
1 Static Website: Static websites contain static text that is displayed on the screen; it just shows data content but does not calculate or processed depending upon user input. It has basic presentation and database. Ex: College
* **Y• amic Website: A dynamic website changes or customizes itself behavior frequently and automatically such as user registration form, login form, online shopping websites, Interactive database oriented e-
commerce websites, web-banking websites.
Ex: googIe.com, facebook.cam, yautube.com, amazon.in, snapdeaI.com, fIipkart.com etc.
Website has .html file extension. For example, the file name “Home.html”.
Structure of HTML document and Basic Tags:
- Below program is Structure of HTML:
- <html>
- <head>
- <titIe>Home</titIe>
- </head>
- <body>
- This is a basic structure HTML page.
- </body>
- </htmI>
There are four basic tags: 1.<HTML>, 2.<HEAD>, 3.<TITLE>, 4.<BODY>
<HTML>:
- tag is a main tag contains all other tags which is a structure and skeleton of HTML code.
- The first tag in your html document is <html>.T g tells your browser that this is the start of anhtml document. The last tag in your document is </html>.
- This tag tells your browser that this is the end of the html document. This is the standard structure tag of an HTML. Make sure that you use <HTML> element at once in whole html page it never repeatand placed in between code more than one time.
- It is compulsory kind of tag to make web page. Html contains all other basic tags which is head, title,body.
•›• <HEAD> :
- The element is just a container for all other header elements. It should be the first thing to appear after the opening tag. element should contain a
element indicating the title of the document. - Other tag under head: <script>, <styIe>,<Iink>.
• <TITLE> :
<TITLE> tag is used to display webpage title name. Page titles are very useful to know just whatsubject data is on your website. There can only be one title per page.
Please note triat this is one of the tags that will go within the HEAD tags. It displays at the very
top ofa browser window.
• <BODY> :
The <body> element appears after the <head> element and contains the part of the Web page thatyou actually see in the main browser window, which is sometimes referred to as body
content.
All tags which apply some effects to text, image or anything that means everything you seen andappearing an web page that are placed between under <body> tag and </body> tag.
HTML – Attributes of the body tag
bgcolor: This attribute sets the background color of webpage. Ex: <body bgcolor=”yeIIow”>
text: This attribute sets the text color for the webpage. Ex: <body text=”red” >
Paragraph Tag.<P>
0 The paragraph tags are used to define a block of text as a paragraph.
0 When a block of text is surrounded by the paragraph tags, the browser automatically adds new line before and after the paragraph text. 0 The <p> element offers a way to structure your text. Each paragraph of text should go in between an
opening <p> and closing </p> tag
<p>The contents of the paragraph.</p>
If you are using an empty paragraph tag like this <p> </p> it will create new line
Whenever you write <p> tag after paragraph tag automatically single new line will appear means if you use two <p> tag one after one then two paragraph appear on new line. Also, if you have extra spaces in between your words the browser ignores that, extra spaces are automatically ignored throughout the html except appeared in <pre> tag.
Paragraph tag is basic text formatting tag which specifically used to create multiple line of text.
Paragraph Tag Attributes
- align — Align is used to apply aligning to the text as left, right, center.
- Ex: <p aIign=”right”>Text</p>
• ListagTs:
Introduction to lists
List tag is to create lists in web page. HTML offers some tags for specifying lists of information. All lists must contain one or more list elements (items)
There are three types of lists are present:
Ordered List- <OL>
A XJ fi RUC MM € Ltd LII k ^• W E•4
3) Definitions- <DL>
Lists are especially useful in web pages to draw attention to short pieces of information. Keep that in mind when you create your lists, and try to include short phrases, instead of long sentences, in each list item.
1] Ordered List- <OL> tag:
An ordered list is one in which each item is presented by a number or letter. Ordered list always represent data in sequence or order either it is number or alphabet.
Program: | Output: |
<htmI> <head> <titIe>Font Size Example</title> | Courses: I. BCA |
</head> | II. BSc(CS) |
<body> <oI type=”I”>Courses: <Ii> BCA </Ii> <li> BSc(CS)</Ii> <li> BSc(SE)</Ii> <li> BBA</Ii> </oI> </body> </htmI> | BSc(SE)BBA |
Values of TYPE Attribute | Numbering Style | Example |
1 | Numbers | 1, 2, 3, 4, 5, 6 |
a | Lowercase Alphabet | a, b, c, d, e, f |
A | Uppercase Alphabet | A, B, C, D, E, F |
i | Lowercase Roman Numbers | i, ii, iii, iv, v, vi |
I | Uppercase Roman Numbers | I, II, III, IV, V, VI |
2] Unordered List- <UL> tag:
The second type of list is similar to the first, except unordered lists don’t use numbers or letters. As the
name suggests, unordered lists means it is not follow order (Number sequence) for elements of list.
ULlists use bullet symbol to represent each list item. As OL lists UL also use <LI> tags to
represent each listitems.
The following is an example of an unordered list:
Program:
<HTML>
<head>
<titIe>Font Size Example</title>
</head>
<body>
<uI type=”square”>Name of the colors:
<Ii>red</Ii>
<Ii>green</Ii>
<Ii>bIue</li>
</ul>
</body>
</htmI>
Output:
Name of the colors:
0 Red
O Green
O Blue
In the above example we used square value to TYPE attribute hence list will appear with square bulletsymbol, if user want to change the bullet svmbol then user can use following options.
Three possible options exist for bullet style:
<ULTYPE=”disc”>
disc Usually displayed as a small, filled-in circle
<UL TYPE=”disc”>
circle Usually displayed as an open circle
<UL TYPE=”circIe”>
0 square Usually displayed as an square.
Definition Lists <DL> tag
The third type of list you can create in HTML is called a definition list. As its name suggests, you might use a definition list to shaw terms and their definitions. For example, in the following list, the term is listed on thefirst line, and then the definition is on the line below the term.
<DL> Definition List, <DT> Definition Title,
<DD> Definition DescriptionCode:
<dI>
<dt>HTML</dt>
<dd>Hypertext Markup Language is the web scripting language used to create documents for the WarldWide Web.</dd>
</dl>
•°• HorizontaIRule-<hr>
The HTML <hr> element represents the page break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section). In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.
HTML:
Hypertext Markup Language is the web scripting language used to create documents for th‹ World Wide Web.
- it is an empty element.
- Tag <hr> must have start tag, but must not have an end tag.
Attributes:
This element includes the global attributes.
Color Sets the color of the rule through color name or hexadecimal value.
Size Sets the height, in pixels or percentage, of the rule.
width Sets the length of the rule on the page through a pixel or percentage value.
Align Sets the alignment of the rule on the page. If no value is specified, the default valueis center.
Note: Do not use align when width of rule line is 100%.
Example:
<p>This is the first paragraph of text. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. </p>
<hr coIor=”red“ size=“10%” width=”50%” align=”right”>
<p>This is second paragraph of text. HyperText Markup Language, commonly referred to as HTML, is the standard markup language used tocreate web pages.</p>
Output:
This is the first paragraph of text. HTML elements form the building blocks of all websites. HTML allowsimages and objects to be embedded and can be used to create interactive farms.
This is second paragraph of text. HyperText Markup Language, commonly referred to as HTML, is thestandard markup language used to create web pages.
Heading tag– ‹h? TText://h?
One of the earliest means of formatting text was the heading tag. It is available in six levels of importance from
<h1>down to <h6>, If you have documents with genuine headings, then there are HTML tags specifically designedjust for them.
They are h1, h2, h3, h4, h5 and h6, h1being the biggest of headings and h6 being the smallest