CS118-Web Engineering (D, E ) 2019 Sir Syed University of ...



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 Engineering46672504292590Before 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?MarkupMarkup languages are the foundation of the web—where it all startedText added to the data of a document to convey information about the document; for example: tags, processing instructions, and hyperlinks.Markup LanguageA 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 LaTeXSyntax:<p> this is a paragraph of text written in HTML </p>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 EditorsNotepadNotepad ++Front PageDreamweaver 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 hyperlinksHypertext 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 HTMLIs 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.41135306170930<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, etcHow 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?43395903681730Or you can write URL shown at your browser screen. Elements in HTMLA distinct object in the documentAn 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 HTMLCore 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 objectTags 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 element422338533153350Types of TagTwo 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;!<pExercisesNote: 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.<FONT> TAGFonts 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?<font>?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 <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag.HTML List:HTML Unordered ListsAn 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.TypeDescriptionSyntaxDiscDisplay item list in round marker bullets<ul type = "disc">CircleDisplay item list in circle bullets<ul type = "circle">square Display item list in square bullets<ul type = "square">HTML Unordered ListsIt 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.TypeSyntaxDefault-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">HTML Description ListsDescription 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 NamedescriptionSyntax<b>Bold text <b>This text is bold</b> <i>Italic text<i>This text is italic</i> <u>Underline text<p>The following word uses<u>underlined</u> typeface.</p><sub>Subscript Text<p>This is <sub>subscript</sub> typeface.</p><sup>Superscript Text<p>This is <sup>superscript</sup> typeface.</p><big>Large Text<p>The following word uses a <big>small</big> typeface.</p><small>Small Text<p>The following word uses a <small>small</small> typeface.</p>ExercisesNote: 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?104-Write an html program which uses listing and shows following result along with your roll no. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download

To fulfill the demand for quickly locating and searching documents.

It is intelligent file search solution for home and business.

Literature Lottery

Related download
Related searches

©2024 5y1.org, Inc. All rights reserved.