CS118-Web Engineering (D, E ) 2019 Sir Syed University of ... · Web viewA start tag consists of an...

Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

LAB SESSION 1(a)

Object: To study web engineering introduction, its need & importance and study about an HTML document Structure, style, formatting & tags.

Introduction:

Web engineering is way of developing and organizing knowledge about Web application development and applying that knowledge to develop Web applications, or to address new requirements or challenges. It is also a way of managing the complexity and diversity of Web applications. A Web-based system is a living system. It is like a garden — it continues to evolve, change, and grow. A sound infrastructure must be in place to support the growth of a Web-based system in a controlled, but flexible and consistent manner. Web engineering helps to create an infrastructure that will allow evolution and maintenance of a Web system and that will also support creativity. Web engineering is application of 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 (Murugesan et al., 1999).

Needs of Web EngineeringBefore 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

Prepared by ms.ramsha sohail 1

Syntax:



this is a paragraph of text written in HTML



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.

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

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

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: ………………….. 

Tag in HTML

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 (>).

 

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 is an empty element without a closing tag (the tag defines a line break). Empty elements can be "closed" in the opening tag like this: .

white space matter in HTML?

White space is any string of text composed only of spaces, tabs or line breaks.

Syntax:

 1 2 3 !<p

Exercises



Note: Every CODE & Output should contain your ROLL Number for copyright.

1-Write an html program which shows your name, class, section, subject and roll.

2- Create a webpage that prints the numbers 1 - 10 to the screen.

3- Write an html program which print the squares of the numbers 1 - 20.

LAB SESSION 1(b)

Object: To study about an HTML font tag & list.


TAG

Fonts play a very important role in making a website more user friendly and increasing content

readability. Font face and color depends entirely on the computer and browser that is being used to

view your page but you can use HTML tag to add style, size, and color to the text on your

website. You can use a <basefont> tag to set all of your text to the same size, face, and color.

The font tag is having three attributes called size, color, and face to customize your fonts. To change

any of the font attributes at any time within your webpage, simply use the tag. The text that

follows will remain changed until you close with the tag. You can change one or all of the font

attributes within one tag.

HTML List:

1. HTML Unordered Lists An unordered list is a collection of related items that have no special order or

sequence. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

Syntax:<ul >

<li>Apple</li>

<li>Banana</li> <li>Orange</li> <li>Grapes</li>

</ul>

Attribute Type of Unordered List:

Defines which marker you want to use.Type Description Syntax

Disc Display item list in round marker bullets <ul type = "disc">Circle Display item list in circle bullets <ul type = "circle">square Display item list in square bullets <ul type = "square">

2. HTML Unordered Lists It will display item list into a numbered form instead of bullets. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Syntax:<ol>

<li>Apple</li> <li>Banana</li> <li>Orange</li> <li>Grapes</li>

</ol>

Attribute Type of Ordered List:

Defines which number you want to use.Type Syntax

Default-Case Numerals <ol type="1">Upper-Case Numerals <ol type="I">Lower-Case Numerals <ol type="i">

Lower-Case Letters <ol type="a">Upper-Case Letters <ol type="A">

3. HTML Description Lists Description list where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value

list. Definition List makes use of following three tags. <dl> - Defines the start of the list <dt> - A term <dd> - Term definition

</dl> - Defines the end of the list Syntax:

<dl> <dt>Engineering</dt> <dd>- Implementation of whatever technology in mind </dd> <dt>Medical</dt> <dd>- operation of human being</dd></dl>

HTML Style and Formatting:

HTML Style:

HTML Style is used to define style information for an HTML document. By using HTML style we can give following usefulness to our document/web page:

It gives adding color to text, heading. It gives change color to text, heading. It gives different font size for text, heading. It can change background color.

Syntax:<tagname style="property:value;">Content</tagname>

HTML Formatting:

Following tags are used for formatting an HTML document.

Tag Name description Syntax Bold text This text is bold

 Italic text This text is italic

 Underline text The following word usesunderlined typeface.

 Subscript Text This is subscript typeface. Superscript Text This is superscript typeface.<big> Large Text The following word uses a <big>small</big>

typeface. Small Text The following word uses a

small typeface.

Exercises

Note: Every CODE & Output should contain your ROLL Number for copyright.

1-Write a program which uses all marquee and shows “your name and roll no” in different directions.

2-Write a code which shows following page along with your RollNO.

3-Write a code which shows following digits in different colors.

1 2 3 4 5 6 7 8 9 10

4-Write an html program which uses listing and shows following result along with your roll no.

CS118-Web Engineering (D, E ) 2019 Sir Syed University of ... · Web viewA start tag consists of an...

Documents

Transcript of CS118-Web Engineering (D, E ) 2019 Sir Syed University of ... · Web viewA start tag consists of an...