Introduction to Web Application Design 4/7/2019
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 4/7/2019
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/7/2019
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 4/7/2019
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 4/7/2019
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 4/7/2019
Basic Elements of Web Application webpage Web browser Firefox, Safari .html file Style files displays interprets image and audio files Prepare/edit files
HTML 4/7/2019
Required Tags Every Web page is composed of a head and a body 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
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
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
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
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
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)
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
Headings in HTML <h1> and </h1> level one 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.
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
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