Scribd
Upload
131 views8 pages

Lab Session 01

The document provides an overview of Web Engineering Lab Session 01, which aims to study HTML tags, elements, and lists. It defines web engineering and markup languages, explaining that HTML is the most widely used markup language. It describes the basic structure of an HTML document and how to create and save web pages. Finally, it provides examples of HTML tags and elements, and exercises related to key concepts covered.

Uploaded by

Khizar Nadeem Syed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
131 views8 pages

Lab Session 01

The document provides an overview of Web Engineering Lab Session 01, which aims to study HTML tags, elements, and lists. It defines web engineering and markup languages, explaining that HTML is the most widely used markup language. It describes the basic structure of an HTML document and how to create and save web pages. Finally, it provides examples of HTML tags and elements, and exercises related to key concepts covered.

Uploaded by

Khizar Nadeem Syed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Web Engineering Lab Session 01

Lab Session 01
OBJECTIVE
To study about Web Engineering
 HTML Tags
 HTML Elements
 HTML List

Definition
Web engineering is basically all about designing and promoting web based systems. Web Engineering is
concerned with the establishment and use of sound scientific, engineering, and management principles
and disciplined and systematic approaches to the successful development, deployment, and maintenance
of high quality Web-based systems and applications.
Web Engineering is the use of scientific, engineering and management principles and systematic
approaches with the aim of successfully developing, deploying and maintaining high quality Web-based
systems and applications.

Needs of Web Engineering


Before evolution of web, in those days, there was different information on different
computers, but you had to log on to different computers to get at it. Also,
sometimes you had to learn a different program on each computer.
Tim Berners-Lee invented the World Wide Web in 1989.

What is a markup language?


Markup
 Markup languages are the foundation of the web—where it all started
 Text added to the data of a document to convey information about the document; for
example: tags, processing instructions, and hyperlinks.
Markup Language
 A language that describes a document’s structure and content.
 Most markup languages are human readable because the illustrations are written in a way to
distinguish them from the text.
 Markup languages are designed for the processing, definition and presentation of text. The
language specifies code for formatting, both the layout and style, within a text file. The code
used to specify the formatting are called tags. HTML is an example of a widely known and
used markup language.
 HTML is the most widely used markup language.

Example of Markup Language:


 HTML
 XML
 XHTML
 DHTML
 LaTeX
Syntax:
<p>
this is a paragraph of text written in HTML
</p>

Page 1
Web Engineering Lab Session 01

Web Development Languages

What is HTML?
 HTML stands for Hyper Text Markup Language.
 HTML is a computer language that is used to create documents on the World Wide Web.
 HTML is very simple, and logical. It reads from left to right, top to bottom and uses plain text.
 HTML is NOT a programming language, but a mark-up language that uses <Tags> like this.
 The websites you view on the internet are actually text files that consist of HTML Tags.

What is Web Page?


 A web page is a document commonly written in Hyper Text Markup Language (HTML) that is
accessible through the Internet or other network using an Internet browser.
 A web page is accessed by entering a URL address and may contain text, graphics, and hyperlinks to
other web pages and files.

HTML Editors
 Notepad
 Notepad ++
 Front Page
 Dreamweaver

HTML Features
 HTML is the basic building blocks of all websites and web pages.
 HTML is case insensitive.
 There is no error in HTML code.

What is Hypertext?
 Hypertext - text with hyperlinks
 Hypertext is text that links to other information. By clicking on a link in a hypertext document.
 A user can quickly jump to different content.
 Though hypertext is usually associated with Web pages, the technology has been around since the
1960s.
 Textual data which is linked within itself or across multiple documents.

Page 2
Web Engineering Lab Session 01

Version/History of HTML

Is HTML is Case Sensitive?


 HTML is not a case sensitive language
- but it is a recommended that you use the lower case for HTML
- it is also recommended by the World Wide Web Consortium (W3C).

Basic Structure of HTML Document?

Declarations of HTML Web Page


 <!DOCTYPE html> Document Type Declaration or DTD

Page 3
Web Engineering Lab Session 01

 This declaration defines that the document that we are writing in HTML is basically of version
HTML5.

 <html>

 The opening <html> marks the start of an HTML document, & the closing </html> indicates the
end of the HTML document.

 An HTML document is divided into two sections: the head & the body.

 <head>

 The opening <head> element is a container for all the heads elements and the closing </head>
defines also that head has closed.

 It must include the title of the document, styles, links etc

 The content of the head element describes the HTML document but is not displayed by the
browser directly.

 <title>

 The <title> tag is used inside the <head> tag to mention the document title.

 <body>

 The body element contains all of the content to be displayed in the Web page.

 including hyperlinks, images, tables, text, etc

How To Create & Save HTML web page?


 If you want to create Web Page in HTML do the following:
 Create a file in text editor for example “Notepad “ write your code in it.
 Save the file with “.html” or “.htm” extension.
 When HTML was first developed, mot PCs were running Windows 3.1 or DOS OS, which
allowed only three-character file name extensions.
 However, current versions of Windows allow more
characters in the extension so the common usage has
switched to .html (Recommended).

How To Create & Save Web Page HTML?


To Save your Web Page:
 Once you have created your web page , choose File>Save
As from your text editor.
 Give the document the “.html” or “.htm” extension.
 Choose the folder in which to save web page.
 Click Save

Page 4
Web Engineering Lab Session 01

How To Create & Save Web Page HTML ?


After saving the file with this extension the simple “TEXT file” will become an “HTML file”.

How To Open a Web Page?

Or you can write URL shown at your browser screen.

Elements in HTML
 A distinct object in the document
 An element is made up of an opening tag and a closing tag, and everything in between.
 The whole document can also be considered as an element.
 Examples: paragraph, heading , or the page’s title
 Element look likes:
<p> ………………….. </p>
Tag in HTML

Page 5
Web Engineering Lab Session 01

 Core building block of HTML is tag , which marks each element in the document.
 Element refers to an object in a Web page, & tag refers to the HTML code that creates the object
Tags are used to mark up the start and end of an HTML element.
A start tag consists of an opening angle bracket (<) followed by the element name, zero or
more space separated attribute/value pairs, and a closing angle bracket (>).
< p> </p>
 As another example, whereas
 “<title>” and “</title>” are tags,
 “<title>This is My Title</title>” is a title element

Types of Tag
 Two Sided Tag
- Having beginning and ending tags or opening and cl osing tags.

 One Side Tag


- Having no contents they are also called EMPTY Elements.
<tagname/>
Line Break
 line break
 <br> is an empty element without a closing tag (the <br> tag defines a line break).
 Empty elements can be "closed" in the opening tag like this: <br />.

white space matter in HTML?


White space is any string of text composed only of spaces, tabs or line breaks.
Syntax:
<p>&#160;1&nbsp;2&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;!<p
Exercise:
Q1. Which of the following is the correct proper HTML document?
a. <html>
<head>
<title>Page Title</title>
</head>
<body>My first paragraph.</body>
</html>
b. <html>
<head>
<title>Page Title
</head>
<body>My first paragraph.</body>
</title>
</html>

Q2. Create an HTML document having title is “Lab 01” and heaving
body “My First Attempt”?

Page 6
Web Engineering Lab Session 01

Q3. Create an HTML document having title is “Web Engineering” and heaving body “Second Semester”?

Q4. What should be the first tag in any HTML document?


A. <head> B. <title>
C. <html> D. <document>

Q5. What is Web Engineering?

Q6. What is markup language?

Page 7
Web Engineering Lab Session 01

Q7. What are the different versions of HTML?

Q8. Which version of HTML is currently used?

Q9. Write the advantages and disadvantages of HTML?

Q10. Differentiate between tag and element along with example?

Page 8

You might also like