Web Lab
Web Lab
Web Lab
1) Introduction to HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.
Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more interactive
and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated
by a web browser. A web page can be identified by entering an URL. A Web page can be of
the static or dynamic type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with the
help of styling, and which looks in a nice format on a web browser. An HTML document is
made of many HTML tags and each HTML tag contains different content.
Structure of html
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
Test it Now
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except <!
DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the
top of the browser window. It must be placed inside the head tag and should close
immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is visible to the
end user. This tag contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
Internet Explorer
Internet Explorer (IE) is a product from software giant Microsoft. This is the most
commonly used browser in the universe. This was introduced in 1995 along with
Windows 95 launch and it has passed Netscape popularity in 1998.
Google Chrome
This web browser is developed by Google and its beta version was first released on
September 2, 2008 for Microsoft Windows. Today, chrome is known to be one of the
most popular web browser with its global share of more than 50%.
Mozilla Firefox
Firefox is a new browser derived from Mozilla. It was released in 2004 and has
grown to be the second most popular browser on the Internet.
Safari
Safari is a web browser developed by Apple Inc. and included in Mac OS X. It was
first released as a public beta in January 2003. Safari has very good support for
latest technologies like XHTML, CSS2 etc.
Opera
Opera is smaller and faster than most other browsers, yet it is full- featured. Fast,
user-friendly, with keyboard interface, multiple windows, zoom functions, and more.
Java and non Java-enabled versions available.
You can use any of the online HTML editors on this website, or if you
prefer, you can download a commercial HTML editor for use on your own
computer.
Free Editor
This free HTML editor lets you create HTML codes for your website or
blog. Click on the "Source" button to view the generated code. Also see
the Full HTML Editor which has more buttons, and check out our range
of HTML Generators.
Source StylesFormat
◢
● HTML Editor
● HTML Text Editor
● HTML Bold Editor
● Text Color Editor
● HTML Link Editor
● Image Code Editor
Offline Editor
An offline editor allows you to create websites directly from your own
computer (as opposed to generating the HTML online, then copy/pasting
like an online editor). A good offline HTML editor will provide you with a
vast array of functionality that you can configure to your own personal
liking.
HTML Tags: Tags are the starting and ending parts of an HTML element.
They begin with < symbol and end with > symbol. Whatever written inside <
and > are called tags.
Example:
<b> </b>
HTML elements: Elements enclose the contents in between the tags. They
consist of some kind of structure or expression. It generally consists of a start
tag, content and an end tag.
Example:
This is paragraph.
Whatever written
HTML tag starts with < and HTML attributes are found
within a HTML tag are
ends with > only in the starting tag.
HTML elements.
5) Doctype Element
<!DOCTYPE html>
XHTML 1.1:
Examples
<!DOCTYPE html>
<!DocType html>
<!Doctype html>
<!doctype html>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
6) Comments
The comment tag is used to insert comments in the HTML code. It is a good
practice of coding, so that coder and the reader can get help to understand
the code. It is useful to understand steps of the complex code. The comment
tag is helpful while the debugging of codes.
● It is a simple piece of code that is wiped off (ignore) by web browsers i.e. ,
not displayed by the browser.
● It helps the coder and reader to understand the piece of code used for
especially in complex source code.
Syntax:
<!-- Comments here -->
Types of HTML Comments: There are three types of comments in HTML
which are:
● Single-line comment
● Multi-lines comment
● Using <comment> tag
<!DOCTYPE html>
<html>
<body>
<h1>LIMAT</h1>
</body>
</html>
<html>
<body>
</body>
</html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
<html>
<body>
</body>
</html>
8) Lists and Links
<!DOCTYPE html>
<html>
<body bgcolor="orange">
<h2><center>LIMAT</center></h2>
<h2>B.TECH BRANCHES</h2>
<ol>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
</ol>
<h2>M.TECH COURSES</h2>
<ul>
<li>CSE</li>
<li>AI</li>
<li>ML</li>
</ul>
</body>
</html>
IMAGE PROGRAM
<html>
<body>
<h2>HTML Image</h2>
<img src="p.png">
</body>
</html>
TABLE PROGRAM
<!DOCTYPE html>
<html>
<style>
table, th, td {
</style>
<body>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>