Web Engineering (Lecture 01) By: Kamran Ullah Lecturer (CS) Class BS(CS)-5 th semester
Web Engineering Definition 1: Web Engineering is the application of systematic and disciplined approaches to the design, production, deployment, operation, maintenance and evolution of Web-based software products. [Gaedke, 2000]
Definition 2
World Wide Web It is a collection of textual documents and other resources, linked by hyperlinks and URLs, transmitted by web browsers and web servers. It is also an application "running" on the Internet. Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser
WWW Structure Clients use browser application to send URLs via HTTP to servers requesting a Web page Web pages constructed using HTML (or other markup language) and consist of text, images, audio/video etc files Servers (or caches) respond with requested Web page Or with error message Client s browser displays Web page returned by server Page is written using Hyper Text Markup Language (HTML) Displaying text, graphics and sound in browser Writing data as well
Clients and Servers HTTP is a Protocol for client/server communication The Web is a client/server application: Web browsers are clients which send requests to Web servers, which send responses back. 7
Uniform Resource Locators (URLs) Without a universal addressing mechanism, it would be impossible to navigate to a site, and page linking would not be feasible Uniform Resource Locators (URLs) are used to identify Web pages basically a URL is a web address URLs have 3 components: A Prefix (usually http:// ) A Hostname: (such as www.aup.edu.pk) A Path: (such as /ibms/index.html) 8
Uniform Resource Locators (URLs) Example: http://www.aup.edu.pk/ibms/index.html Path Prefix Host name Identifies a particular computer somewhere on the Internet Identifies a file within a hierarchical directory structure on the server The transfer protocol required to request data from the server SM5312 week 5: web technology basics 9
IP Addresses and DNS Every computer connected to the Internet must have a unique IP address, no matter whether it s a client or a server (or both) An IP address is just a number that identifies a host on the Internet. Example: 212.171.218.34 or 144.214.5.218 The Domain Name System (DNS) is a database that matches IP addresses to host names
Server Software Just connecting a computer to the Internet and giving it an IP address does not make it a web server. Server computers have to run special web server software to open TCP connections and respond to HTTP requests. The two most common web server applications are: Apache (UNIX-based, open source) 50%* IIS - Internet Information Services (Microsoft) 36%* 11
WWW Working Browser resolves the server-name portion of the URL (en.wikipedia.org) into an Internet Protocol address using DNS. DNS or Domain Name System (DNS) is a globally distributed database. Returns an IP address such as 208.80.152.2. The browser then requests the resource by sending an HTTP request across the Internet to the computer at that particular address. The computer receiving the HTTP request delivers it to Web server software listening for requests on port 8080.
HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags
Best free web development IDE for JavaScript, HTML and CSS Notepad Notepad++ Atom webuilder Light Table Netbeans Brackets Komodo Edit
HTML Documents = Web Pages HTML documents are also called web pages The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. Example: Basic Structure of HTML page. <html> <head> <title> Page Title Goes Here </title> </head> <body> content goes here </body> </html>
Creating and saving Webpages Open Notepad (notepad++) Write your code Once you finished the content, click on File -> Save Give a file name e.g myfirstpage.html Click on Save Run your webpage where it is stored.
HTML Tags HTML Headings <h1>this is a heading</h1> <h2>this is a heading</h2> <h3>this is a heading</h3> HTML Paragraphs <p>this is a paragraph.</p> <p>this is another paragraph.</p> HTML Elements An HTML element is everything from the start tag to the end tag:
HTML Tags Nested HTML Elements - Most HTML elements can be nested - Example <html> <body> <p>this is my first paragraph.</p> </body> </html>
HTML Tags <b> bold text <big> big text <small> small <i> italic <em> emphasized <sub> subcripted <sup> superscripted <img src="smiley.gif" alt="html tutorial" width= 20" height= 20" /> <a href="http://www.yahoo.com/">yahoo</a>
Lab Task 01: Create Your C.V in HTML E.g Name Educational Qualification Your address Advantages of Web Engineering course
HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: color="blue The value can also be in single OR without quotes But if the value is multi word, it must be quoted
Common Attributes Few attributes can apply to every element: id, style, class, title The id makes the element unique in the document The style defines the inline CSS The class defines a group of elements Content of title attribute is displayed as hint when the element is hovered with the mouse Some elements have obligatory attributes <img src=logo.jpg>
Comments in HTML The tag <!-- --> is used for comments <! - Your comments --> <! - Comments can be given in single multi lines --> Comments can exist anywhere between the <html></html> tags
End Lecture 01 24