WEB DESIGN Means Planning, Creation and Updating of Websites
Total Page:16
File Type:pdf, Size:1020Kb
1 2 WEB DESIGN Means planning, creation and updating of websites. or Web design is a process of conceptualizing, planning and building a collection of files that determine the layout, colors, text styles, structure, graphics, images and use of interactive features that deliver pages to your site visitors 3 DEFINITION OF TERMS What is web site? Is a collection of related web pages, including multimedia content, typically identified by common domain name. 4 • OR - is a set of related web pages served from a single web domain accessible via network or Internet address known as a Uniform resource locator. Or Website is a collection of web pages that are accessed through the internet A webpage is a document, typically written in plain text interspersed with formatting instructions of Hypertext Markup Language (HTML). 5 What is the different between web page and web site? Web page A document which can be displayed in a web browser such as fire fox, Google chrome, internet explorer. These are called web pages or just “page” 6 Web server A computer that host a website on the internet 7 Search Engine A website that helps you to find other web pages, such as Google, Bing or Yahoo. 8 Browser Is a piece of software that retrieves and displays web pages. 9 How to design web Page Web page requires a strong understanding of the end users. He/she needs various platforms on which users will view the page. So a language is needed so as to design Web pages. 10 WEB SCRIPTING LANGUAGE Web scripting languages are used to develop or add functionalities on web pages. Web pages are hypertext documents created in language called Hypertext Markup Language (HTML) 11 The Language simply consists of Tags that are interpreted by the web browser software to display text when the HTML file is opened on the screen by a web browser software. 12 A Tag is a special word enclosed between the less than and greater than (<>) symbols and the browser can interpret it as a command. 13 For example, to start a HTML page, one must use the <HTML> tag at the very top of the document. Other languages like Extended HTML(XML) have been derived directly from HTML with the only difference being that XML allows the user to define their own tags instead of using the standard HTML tags. 14 Unlike other programming languages, HTML does not have the declaration part and control structures . Due to this reason , it is not considered as true programming language. 15 Due to its simplicity, HTML has many limitations and cannot be used alone when it comes to developing functional websites. Some special blocks of code known as scripts may be inserted in HTML pages using scripting languages like JavaScripting, VBScript and Hypertext Preprocessor (PHP) in order to add functionality to the HTML page. 16 A script is a small program fragment, written in different language other than HTML but inserted into the HTML program 17 Before writing your HTML program with a script inserted, make sure that you have the latest browser software installed on your computer. Older software may not have support for web design. 18 Most HTML tags have an opening tag and a closing tag. An opening tag is enclosed between <> while a closing one between </>.Text that is to be displayed on the screen is enclosed between an opening tag and closing tag. For example the statement <B>Hello</B> will display the word “Hello” in boldface on the 19 screen. WebPages are accessed and transported with the Hypertext Transfer Protocol (HTTP), The Http may optionally employ encryption (HTTP Secure, HTTPS) to provide security and privacy for the user of the webpage content. 20 A web page (or webpage) is a web document that is suitable for the World Wide Web and the web browser. A web browser displays a web page on a monitor or mobile device. The web page is what displays, but the term also refers to a computer file, usually written in HTML or comparable markup language, Whose main distinction is to provide hypertext that will navigate to other web pages via links 21 The user's application, often a web browser, renders the page content according to its HTML markup instructions onto a display terminal. What is a web browser ? A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. 22 What are examples of web browser ? K-Ninja for Windows Mozilla Firefox (formerly Firebird and Phoenix) Netscape Browser 8 to Netscape Navigator 9 (discontinued) Swiftfox Swiftweasel GNU IceCat, GNU's fork of Firefox Internet Explorer. 23 • What is domain name ? A domain name is an identification string that defines a realm of administrative autonomy, authority or control on the Internet. Domain names are formed by the rules and procedures of the Domain Name System (DNS). Any name registered in the DNS is a domain name. 24 Domain names are used in various networking contexts and application- specific naming and addressing purposes. In general, a domain name represents an Internet Protocol (IP) resource, such as a personal computer used to access the Internet, a server computer hosting a web site, or the web site itself or any other service communicated via the Internet. 25 Definitions . W W W – World Wide Web. HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web. HTML is a text formatting language. URL – Uniform Resource Locator. Browser – A software program which is used to show web pages. 26 . “Normal text” surrounded by bracketed tags that tell browsers how to display web pages . Pages end with “.htm” or “.html” . HTML Editor – A word processor that has been specialized to make the writing of HTML documents more effortless. 27 Tags . Codes enclosed in brackets . Usually paired <TITLE>My Web Page</TITLE> . Not case sensitive <TITLE> = <title> = <TITLE> 2811 Choosing Text Editor . There are many different programs that you can use to create web documents. HTML Editors enable users to create documents quickly and easily by pushing a few buttons. Instead of entering all of the HTML codes by hand. These programs will generate the HTML Source Code for you. 29 Choosing Text Editor . HTML Editors are excellent tools for experienced web developers; however; it is important that you learn and understand the HTML language so that you can edit code and fix “bugs” in your pages. For this Course, we will focus on using the standard Microsoft Windows text editors, NotePad. We may use also textpad. 30 Starting NotePad NotePad is the standard text editor that comes with the microsoft windows operating system. To start NotePad in windows 9x or XP follow the steps bellow: . Click on the “Start” button located on your Windows task bar. Click on “Programs” and then click on the directory menu labeled “Accessories”. Locate the shortcut “NotePad” and click the shortcut once 1431 HTML Page Creation & Editing In this chapter you will learn to create HTML pages with a standard text editor. Objectives Upon completing this section, you should be able to 1. Choose a Text Editor. 2. Create a Basic Starting Document. 3. Understand and set Document Properties. 4. View Your Resume in aBrowser. 1532 HTML page structure <html> <head> <title> </title> </head> <body> < </body> </html> 33 Creating a Basic Starting Document <HTML> <HEAD> <TITLE>AHMES SEC SCHOOL</TITLE> </HEAD> <BODY> This is what is displayed. </BODY> </HTML> 1634 Creating a Basic Starting Document . The HEAD of your document point to above window part. The TITLE of your document appears in the very top line of the user’s browser. If the user chooses to “Bookmark” your page or save as a “Favorite”; it is the TITLE that is added to the list. The text in your TITLE should be as descriptive as possible because this is what many search engines, on the internet, use for indexing your site. 1735 Setting Document Properties . Document properties are controlled by attributes of the BODY element. For example, there are color settings for the background color of the page, the document’s text and different states of links. 36 Color Codes • Colors are set using “RGB” color codes, which are, represented as hexadecimal values. Each 2-digit section of the code represents the amount, in sequence, of red, green or blue that forms the color. For example, a RGB value with 00 as the first two digits has no red in the color. 37 Main Colours 38 RGB Colour Model 39 16 Basic Colors 2240 Color Codes 1. WHITE 1. #FFFFFF 2. BLACK 2. #000000 3. RED 3. #FF0000 4. GREEN 4. #00FF00 5. BLUE 5. #0000FF 6. MAGENTA 6. #FF00FF 7. CYAN 7. #00FFFF 8. YELLOW 8.#FFFF00 9. AQUAMARINE 9. #70DB93 10. BAKER’S CHOCOLATE 10. #5C3317 11. VIOLET 11. #9F5F9F 12. BRASS 12. #B5A642 13. COPPER 13. #B87333 14. PINK 14. #FF6EC7 15. ORANGE msomibor1a.5co.m#FF7F00 2341 The Body Element • The BODY element of a web page is an important element in regards to the page’s appearance. Here are the attributes of the BODY tag to control all the levels: TEXT="#RRGGBB" to change the color of all the text on the page (full page text color.) . This element contains information about the page’s background color, the background image, as well as the text and link colors. 2442 Background Color . It is very common to see web pages with their background color set to white or some other colors. To set your document’s background color, you need to edit the <BODY> element by adding the BGCOLOR attribute.