Web Programming PDF

Web Programming Rehab Elswaah INTRODUCTION TO WEB PROGRAMMING CHAPTER OBJECTIVES Learn the basics of creating a website. Learn the basics of HTML—elements, tags, attributes. Use structural elements (html, head, body) to form the framework of a web page. Fill in a head container with...

Web Programming Rehab Elswaah INTRODUCTION TO WEB PROGRAMMING CHAPTER OBJECTIVES Learn the basics of creating a website. Learn the basics of HTML—elements, tags, attributes. Use structural elements (html, head, body) to form the framework of a web page. Fill in a head container with title and meta elements. Fill in a body container with h1, hr, p, br, and div elements. Learn the basics of Cascading Style Sheets. Learn how HTML, the Web, and web browsers originated. Use the W3C’s Markup Validation Service. INTRODUCTION World Wide Web (web): is a collection of documents, called web pages, that are shared (for the most part) by computer users throughout the world. Different types of web pages do different things, but at a minimum, they all display content on computer screens.  The web page address is the location where the web page resides on the Internet. Internet: It’s a collection of several billion computers connected throughout the world.  The Web Programming Triangle HTML Use HTML to define the content of web pages Web Programming CSS JavaScript Use CSS to specify the layout of web pages Use JavaScript to program the behavior of web pages  BASIC WEB PROGRAMMING HTML CSS JavaScript For more Dynamic Web Programming we use e.g., ASP.NET SQL AJAX PHP etc. 1.2 CREATING A WEBSITE A website is a collection of related web pages that are normally stored on a single web server computer. A web server is a computer system that enables users to access web pages stored on the web server’s computer. The term “web server” can refer to the web page-accessing software that runs on the computer, or it can refer to the computer itself. To create a website, you’ll need these things: (1) a text editor, (2) an upload/publishing tool, (3) a web hosting service, and (4) a browser. We’ll describe them in the upcoming paragraphs.  Text Editors There are many different text editors, with varying degrees of functionality. Microsoft’s Notepad is free and provides no special web functionality. To use it, the web developer simply enters text, and the text appears as is. Web Page Uploads: After you enter your web page text on your local computer with your favorite integrated development environments (IDE), you’ll probably want to publish it. Publishing means that you upload your web page to a web server computer so other users can access it on the Web. Some IDEs, like Dreamweaver, provide built-in uploading capabilities, but other IDEs, like Visual Studio, do not. For IDEs that do not provide built-in uploading capabilities, you’ll need to use a separate file upload tool. There are lots of file upload tools. On this book’s website, we provide a tutorial for learning how to install and use a free and intuitive file upload tool called WinSCP.  Web Hosting Service: For a file upload tool such as WinSCP to work, you need to have a web server computer on which to store the uploaded files. For the uploaded files to be accessible as web pages on the Web, your web server computer needs to have a web hosting service in place. all web hosting services need to have a mechanism for receiving uploaded files from a file upload tool. Typically, that mechanism is an FTP (file transfer protocol) server, which is a program that runs on the web server computer.  Browsers: is a piece of software that enables a user to retrieve and view a web page. According to http://gs.statcounter.com, The most popular browsers for computers are Google Chrome, Microsoft’s browsers (Microsoft Edge and Internet Explorer), and Mozilla2 Firefox, with Google Chrome at#1. Other browsers are Safari (for Mac devices), Opera, and Android’s default browser. Safari and Android are particularly popular with mobile devices. G  WEB PLATFORM The Web Browser creates the visual web page you see in the browser based on the HTML code My First Heading HTML, CSS, JavaScript My first paragraph. Client-side Web Browser The code runs on the server and converted to Web Page (HTML) HTML before sending to client (Web Browser) ASP.NET, PHP,... Web Server Server-side Internet Information Services (IIS), Apache, etc.  1.3 WEB PAGE EXAMPLE Uniform Resource Locator(URL): the website address value http://teach.park.edu/~jdean240/lecture/weather.html The http refers to the hypertext transfer protocol, where a protocol is a set of rules and formats for exchanging messages between computers. After http comes a delimiter, ://, and then the name of the web server computer that stores the web page. For this example, the web server computer is teach. Next comes the domain that describes how the web server can be found on the Internet. For this example, the domain is park.edu. Next, there’s a sequence of directories and subdirectories (also called folders and subfolders) that indicate where the web page is stored on the web server computer. That’s called the path. For this example, the path is ~jdean240/lecture. The ~ (tilde) at the left indicates that the directory is a home directory for a user’s account. There’s no requirement that you use a ~ for a user’s home directory. It’s a standard convention at universities, where users (students and teachers) like to do their own thing, but most businesses do not use ~’s. In the example, after the ~jdean240 home directory, there’s a / and then lecture. The term lecture is a subdirectory of the home directory, and the / is a delimiter that separates the home directory from the subdirectory. 1.3 WEB PAGE EXAMPLE  The h1 element is used to implement a web page heading, with the “h” in h1 standing for “heading.” The hr element is used to implement a horizontal line, with the “h” and “r” standing for “horizontal” and “rule,” respectively. The p element is used to implement a paragraph. Finally, a div element is used to group words together as part of a division within a web page. HTML TAGS To implement an element for a web page, you’ll need to use tags. The use of tags is the key characteristic of a markup language. Why is it called “markup”? A markup language “marks up” a document by surrounding parts of its content with tags. Web pages are implemented with HTML, which stands for Hypertext Markup Language. The “hyper” in “Hypertext” refers to HTML’s ability to implement hyperlinks. A hyperlink (or link for short) is where you click on text or an image in order to jump to another web page. So HTML is a language that supports markup tags for formatting and the ability to jump to other web pages.  Most, but not all, HTML tags come in pairs with a start tag and an end tag. For example, the following code uses an start tag and an end tag: Today's Weather The h1 heading tags cause the enclosed text (“Today’s Weather”) to display like a heading. That usually means that the enclosed text will be boldfaced, large, and surrounded by blank lines. Besides h1, there are other heading elements—h2 through h6. The element h1 generates the largest heading, and h6 generates the smallest.  The first entity inside a tag is the tag’s type. In the previous example, the tag’s type is h1. In this simple example, there’s only one entity inside the tags—the tag’s type. When a tag is discussed in general, without reference to a particular tag instance, it is called an element and it is written without the angled brackets. For example, when discussing the tag in general, refer to it as the h1 element. There are two types of elements—container elements and void elements. A container element (usually called simply a “container”) has a start tag and an end tag, and it contains content between its two tags. For example, the h1 element is a container. On the other hand, a void element has just one tag, and its content is stored within the tag. We’ll see an example of that when we get to the meta element. 1.3 WEB PAGE EXAMPLE 1.5 STRUCTURAL ELEMENTS  The doctype construct is considered to be an instruction, not an element, and it goes at the top of every web page. The html, head, and body elements form the basic structure of a web page, so we’ll refer to those elements as structural elements. The doctype instruction plus the structural elements form the skeleton code shown in FIGURE 1.5.  After the doctype instruction comes the html element. It’s a container, and it contains/surrounds the rest of the web page. Its start tag includes lang="en", which tells the browser that the web page is written in English. The head and body elements are also containers. The head element surrounds elements that provide information associated with the web page as a whole. The body element surrounds elements that display content in the web page. Container elements must be properly nested, meaning that if you start a container inside another container, you must end the inner container before you end the outer container. Because the body element starts inside the html element, the end tag must come before the end tag. In Figure 1.5, note how the head and body elements are properly nested within the html element. 1.6 TITLE ELEMENT The head element contains two types of elements—meta and title. In your web pages, you should position them in the order shown in Figure 1.6, meta and then title. But in the interest of clarity, we’ll discuss the title element first. 1.6 TITLE ELEMENT The title element’s contained data (e.g., “K.C. Weather”) specifies the label that appears in the browser window’s title bar. 1.7 META ELEMENT The meta element is a void element (not a container), so it does not have an end tag. Many web programmers end their void elements with a space and a slash. For example: 1.7 META ELEMENT Void elements (including the meta element) have no end tags, so they can’t provide information that way. Instead, they provide information using attributes. In the following example, charset is an attribute for a meta element: 1.7 META ELEMENT meta name Element: Common values for the meta name attribute are author, description, and keywords. Here’s an example with an author value for a name attribute: 1.9 BODY ELEMENTS: HR, P, BR, DIV The hr element is used to render/ display a horizontal line. The hr element is a void element, so it uses just one tag,. 1.9 BODY ELEMENTS: HR, P, BR, DIV 1.9 BODY ELEMENTS: HR, P, BR, DIV The p element is a container for a group of words that form a paragraph. Normally, browsers will render a p element’s enclosed text with a blank line above the text and a blank line below it. A div element is also a container for a group of words, but it’s more generic, so the words don’t have to form sentences in a paragraph. div stands for division because a division can refer to a part of something that has been divided, and a div element is indeed a part of a web page. Normally, the div element causes its enclosed text to have single line breaks above and below it. If a div element’s enclosed text is greater than one line, then proper style suggests putting the tags on separate lines and indenting the enclosed text.