1 / 18

Introduction to Web Application Design

Introduction to Web Application Design. Objectives. Where do you begin? Components of web application User interface design Development of the logic Adding style/look and feel HTML5 (Hyper text markup language) CSS (cascading style sheets) JS ( javascript ) Lets create a simple web page

harveyc
Download Presentation

Introduction to Web Application Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Web Application Design

  2. Objectives • Where do you begin? • Components of web application • User interface design • Development of the logic • Adding style/look and feel • HTML5 (Hyper text markup language) • CSS (cascading style sheets) • JS (javascript) • Lets create a simple web page • All you need is an editor: lets pick notepad++ • And a browser to view your web application: Lets pick Google Chrome

  3. The Internet Here is the definition from Wikipedia: The Internet is the global system of interconnected computer networks that use the Internet protocol suite (TCP/IP) to link billions of devices worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks of local to global scope, linked by a broad array of electronic, wireless, and optical networking technologies. The Internet carries an extensive range of information resources and services, such as the inter-linkedhypertext documents and applications of the World Wide Web (WWW), electronic mail, telephony, and peer-to-peernetworks for file sharing.

  4. The Web The web (or world wide web) is an application that runs on the Internet. One of the ways information can be shared over the Internet. It allows documents (containing information) to be linked via hypertext link It commonly uses a protocol called Hyper Text Transfer Protocol (HTTP: also the prefix for most links) More recently HTTPS: HTTP Secure for accessing web pages that require authentication

  5. Web Servers Web servers are computers that host or “store” the web documents. Each device connected to the Internet has an address called the IP address. Web server has an IP address that is usually codified into a meaning sequence of words: http://www.amazon.com http://www.castor.cse.buffalo.edu has an IP address of 128.205.36.29

  6. Web Browser The information server up by a web server is consumed/processed by a web browser. Web browser is an application that runs on the Internet. Examples of web browser are: Internet Explorer, Mozilla Firefox, Google Chrome

  7. Basic Elements of Web Application webpage Web browser Firefox, Safari Style files .html file displays interprets image and audio files Prepare/edit files

  8. HTML

  9. Required Tags • Every Web page is composed of a headand abody • There are three HTML tags required for every Web page: • <head> and </head> enclose the head • <body> and </body> enclose the body • <html> and </html> to enclose those two parts

  10. Required Tags <head><title>Starter </title>other stuff goes here…that will come later </head> The head section contains the beginning material like the title and other information that applies to the whole page

  11. Required Tags <body>the main content of the page goes here </body> The body section contains the content of the page. All of these tags are required

  12. Configure Your Computer for Writing HTML • Check that two programs are installed: • A browser (check for Google Chrome) • A text editor (Notepad++ for Windows or Text Wrangler for Macs) • Both programs are free

  13. Hello, World! • To produce your first HTML page, follow these instructions: • In your text editor, open a New document instance. • Carefully type in your text head, body and all • Remove the preliminary material goes here nothing will replace it, yet • Replace the main content of the page goes here with: <p>Hello, World!</p> • Save the file as starterPage.html • Open the file with the browser

  14. Open with Double-Click • As HTML is written, files must be opened in two applications: • the text editor, to make changes • the browser, to see the changes made • Double-click on the file to open it with the default application (your browser)

  15. Save This Page All HTML files have the same structure as the starterPage.html file just created Use it as a template for future HTML coding Set up a new folder to keep your HTML files in Using your new page as a template ensure that all pages will have the correct form

  16. Headings in HTML • Documents tend to have headings, subheadings • HTML provides several levels of heading tags: • <h1> and </h1> level one • <h2> and </h2> level two • … • <h6> and </h6> level six • Headings display content on a new line • Headings are bold and go lower in size as the level number increaes.s.

  17. HTML Format Versus Display Format HTML source code tells the browser how to produce the formatted page based on the meanings of the tags The source’s form is unimportant HTML is written in a structured format to make it easier for people to understand Indenting is frequently used to emphasize the tags’ meanings

  18. Summary Lets “author” or write a simple web page and “browse” it Today we will use Notepad++ and Chrome We studied some simple HTML tags and how to write a simple web page

More Related