Web Programming with HTML and CSS

by Greg Chiponda Published by Webisa 2012

Overview The web, Web disciplines The book About the Author Greg Chiponda is a Zimbabwean Web Scientist, he is the Executive Director of Webisa (Web Institute of Southern Africa) a research institute based in Pretoria, South Africa focused on web technologies and CEO of BMG (Business Mobility Group). Web programming with HTML and CSS is his first book, Greg can be found online at www.greg.co.zw . About Technical Reviewer We want to hear from you As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we're doing right, what we could do better, what areas you'd like to see us publish in, and any other words of wisdom you're willing to pass our way. When you write, please be sure to include this book's title and author as well as your name and phone or email address. I will carefully review your comments and share them with the author and editors who worked on the book. Who Should Read This Book? This book is also intended for a wide range of nontechnical professionals interested in building websites. The good news is you don't have to be a rocket scientist to understand it but if you are, it'll work out for you, too! Reader Services Visit our website and register this book at www.webisa.net/register for convenient access to any updates, downloads, or errata that might be available for this book. Acknowledgments I would like to thank my God, my family and my friends for their patience with me as I tried to find my way in life. Thanks Webisa staff, stakeholders and sponsors for making this book a reality. Copyright Web Programming with HTML and CSS First Edition Copyright 2012 by Webisa 150 pages All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein. Printed in the South Africa First Printing: May 2012 Trademarks All terms mentioned in this book that are known to be trademarks or service marks have been appropriately

capitalized. Webisa cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark. Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an "as is" basis. The author and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book. Bulk Sales Webisa offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales. For more information, please contact South African Sales southafrica@webisa.net International Sales international@webisa.net Publishing team Project Editor Proof reader Technical Editor Interior and Cover Designer

Table of Content 1. Introduction to the Internet and web What is the web Brief history of the web Internet governance, laws and ethics. Browsers (rendering, detection, browsers wars, grading browsers & development browser) Mobile web HTML data types 2. Web programming 101 Basic Computer literacy pre-requisites (directory) & web terminology Web programming tools & softwares The DOM, Structure, Semantics, Behavior & Style of web documents HTML syntax (elements, tags & attributes) CSS syntax (rules, selectors, properties & values) 3. Global structure of a web page : Your 1st web page Components of a web document (HTML, head, metadata & body) Declaring & identifying web documents, saving and viewing web documents 4. CSS Box Model Inline elements, block level elements, replaced elements & non-replaced elements) Box dimensions (Margins, Borders, and Padding) Margin collapsing, positioning, Floats, and Z-index 5. Text Inline elements, block level elements, presentational elements & phrase elements Editing text, grouping text, lines & special characters Typography, text formating, color & backgrounds Internationalization (language support & direction)

6. List and Links Lists (ordered, un-ordered lists, definitions lists & drop-down menus ) Links (inter-page, intra-page, absolute links, relative links, link effects, tool-tips & email links) 7. Organizational elements Tables Forms (form attributes, form controls, structuring forms, labels & focus) Validating and processing form data 8. Frames No-frames, nested frames, floating frames & i-frame 9. Multimedia: Audio, Images & Videos Images (styling images, image captions, image links, background images & image maps) Multimedia plug-ins and players Audio on the web (streaming & non-streaming) Interactivity on the web (animation, photo gallery & image side shows) 10. Page Layout & navigation

Page size & resolution Wire frames & structured pages Liquid layouts, elastic layouts & faux columns) Navigation (single column & multi column navigation, breadcrumb navigation)

11. Putting it all together : Your first website Domain registration, web hosting, testing, web publishing and web maintenance Web project management 12. Web Programming 102 Deprecated & browser specific mark-up Usability engineering, search engine optimization & rounded corner techniques Web standards, accessibility & browser detection Hacks, work-arounds and filters (drop shadows, image replacement, rollovers) Troubleshooting & debugging HTML and CSS Serve Side Includes

Chapter 1 : Introduction to the Internet

What Is the Internet? The Internet is a network of computer networks around the the world, that allows the sharing of information and various other resources. What is the web The web (World Wide Web) is a network of computers able to exchange text, graphics, and multimedia information via the Internet. History of the Internet. It was started by researchers at ARPA (Advanced Research Projects Agency) in the USA who created ARPAnet, which became the first WAN. Initially to find information on the Internet, you had to know where it was stored and then navigate through the network to find the data you were looking for. Later on the Gopher protocol was introduced as a precursor to the web. Gopher was a search tool that allowed the user to search hierarchical archives of textual documents. It enabled Internet users to easily search, retrieve, and share information. In the late 1980's a new protocol called HTTP (Hypertext Transfer Protocol) was created by Tim-Berners Lee in Switzerland at the . HTTP allowed you to jump from one page to another by pointing and clicking. The information on computers in the network had now to be stored as HTML documents (Hypertext Markup Language) bringing to birth the web ( World Wide Web). Todays World Wide Web is capable of delivering information via any number of mediumtext, audio, video. The content can be dynamic and even interactive. How the Internet works The Internet is based on the Internet Protocol which is a predefined set of rules used to enable computers to communicate with each other, regardless of which operating system they are running. You can view information in a HTML document using a using a Web browser like Internet Explorer, Google Chrome, Firefox, Opera, that interprets the format of the information after you receive the page. You look for information on the web by using HTTP, the storage computer, or server, then sends the new Web page (as a plain text file) back to your computer using the same HTTP. Your browser sees the new Web page and interprets the text and HTML tags to show you the formatting, graphics, and text that appear on the page. The computers that make all these Web pages available are called Web servers. On any computer thats connected to the Web, you can run an application called a Web browser. Technically, a Web browser is called a Web clientthat is, a program thats able to contact a Web server and request information. When the Web server receives the requested information, it looks for this information within its file system, and sends out the requested information via the Internet. They all speak a common language, called HyperText Transfer Protocol (HTTP). (HTTP isnt really a language like the ones people speak. Its a set of rules or procedures, called protocols, that enables computers to exchange information over the Web.) Regardless of where these computers resideChina, Norway, or Austin, Texasthey can communicate with each other through HTTP. The following illustrates how HTTP works (see Figure 1-1): Most Web pages contain hyperlinks, which are specially formatted words or phrases that enable you to access

another page on the Web. Although the hyperlink usually doesnt make the address of this page visible, it contains all the information needed for your computer to request a Web page from another computer. When you click the hyperlink, your computer sends a message called an HTTP request. This message says, in effect, Please send me theWeb page that I want. The Web server receives the request, and looks within its stored files for the Web page you requested. When it finds the Web page, it sends it to your computer, and your Web browser displays it. If the page isnt found, you see an error message, which probably includes the HTTP code for this error: 404, Not Found. Client computer running browser Server HTTP request Returns page or error message Figure 1-1: The client requests the page. Then the server evaluates the request and serves the page or an error message. Web technology infrastructure HTML is a markup language, not a programming language that allows you format documents that display text, images, sound and movie files, and almost any other type of electronic information. Internet governance, law and ethics W3C (World Wide Web Consortium) is a members organization involved in the development of the protocols that make up the World Wide Web. ICANN, Afrinic, ISP, Ministry, Department of , Industry associations Internet Service Provider (ISP) : A company that provides you with access to the Internet. Intranet : This is like your own private Internet in that it uses the same HTTP as the World Wide Web, but it is accessible only by people within your own network. Web Host : A company that stores (hosts) information that can be accessed from the Internet using the HTTP. A Web host may also be called a Web Presence Provider (WPP).