Web Programming With HTML and Css

Download Web Programming With HTML and Css

Post on 05-Apr-2018




0 download

Embed Size (px)


<ul><li><p>8/2/2019 Web Programming With HTML and Css</p><p> 1/7</p><p>WebProgramming</p><p>with</p><p>HTML and CSSby</p><p>Greg Chiponda</p><p>Published by Webisa</p><p>2012</p></li><li><p>8/2/2019 Web Programming With HTML and Css</p><p> 2/7</p><p>Overview</p><p>The web,</p><p>Web disciplinesThe book</p><p>About the Author</p><p>Greg Chiponda is a Zimbabwean Web Scientist, he is the Executive Director of Webisa (Web Institute of SouthernAfrica) a research institute based in Pretoria, South Africa focused on web technologies and CEO of BMG</p><p>(Business Mobility Group). Web programming with HTML and CSS is his first book, Greg can be found online a</p><p>www.greg.co.zw .</p><p>About Technical Reviewer</p><p>We want to hear from you</p><p>As the reader of this book, you are our most important critic and commentator. We value your opinion and want to</p><p>know what we're doing right, what we could do better, what areas you'd like to see us publish in, and any other</p><p>words of wisdom you're willing to pass our way.</p><p>When you write, please be sure to include this book's title and author as well as your name and phone or email</p><p>address. I will carefully review your comments and share them with the author and editors who worked on the</p><p>book.</p><p>Who Should Read This Book?This book is also intended for a wide range of nontechnical professionals interested in building websites. The goo</p><p>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!</p><p>Reader Services</p><p>Visit our website and register this book at www.webisa.net/register for convenient access to any updates,</p><p>downloads, or errata that might be available for this book.</p><p>AcknowledgmentsI would like to thank my God, my family and my friends for their patience with me as I tried to find my way in lif</p><p>Thanks Webisa staff, stakeholders and sponsors for making this book a reality.</p><p>Copyright</p><p>Web Programming with HTML and CSS First EditionCopyright 2012 by Webisa</p><p>150 pages</p><p>All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any</p><p>means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the</p><p>publisher.</p><p>No patent liability is assumed with respect to the use of the information contained herein. Although every</p><p>precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for</p><p>errors or omissions. Nor is any liability assumed for damages resulting from the use of the information containedherein.</p><p>Printed in the South AfricaFirst Printing: May 2012</p><p>Trademarks</p><p>All terms mentioned in this book that are known to be trademarks or service marks have been appropriately</p>http://www.greg.co.zw/http://home/user1/bin/.chmsee/bookshelf/e0b259b6d690a140336c9d2c17f6c2df/067232878X/14021536.htmlhttp://www.greg.co.zw/</li><li><p>8/2/2019 Web Programming With HTML and Css</p><p> 3/7</p><p>capitalized. Webisa cannot attest to the accuracy of this information. Use of a term in this book should not be</p><p>regarded as affecting the validity of any trademark or service mark.</p><p>Warning and Disclaimer</p><p>Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness i</p><p>implied. The information provided is on an "as is" basis. The author and the publisher shall have neither liability n</p><p>responsibility to any person or entity with respect to any loss or damages arising from the information contained inthis book.</p><p>Bulk SalesWebisa offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales. For</p><p>more information, please contact</p><p>South African Sales</p><p>southafrica@webisa.net</p><p>International Salesinternational@webisa.net</p><p>Publishing team</p><p>Project EditorProof reader</p><p>Technical EditorInterior and Cover Designer</p>mailto:southafrica@webisa.netmailto:international@webisa.netmailto:international@webisa.netmailto:southafrica@webisa.netmailto:international@webisa.net</li><li><p>8/2/2019 Web Programming With HTML and Css</p><p> 4/7</p><p>Table of Content</p><p>1. Introduction to the Internet and web</p><p> What is the web</p><p> Brief history of the web</p><p> Internet governance, laws and ethics.</p><p> Browsers (rendering, detection, browsers wars, grading browsers &amp; development browser)</p><p> Mobile web</p><p>HTML data types</p><p>2. Web programming 101</p><p> Basic Computer literacy pre-requisites (directory) &amp; web terminology</p><p> Web programming tools &amp; softwares</p><p> The DOM, Structure, Semantics, Behavior &amp; Style of web documents</p><p> HTML syntax (elements, tags &amp; attributes)</p><p> CSS syntax (rules, selectors, properties &amp; values)</p><p>3. Global structure of a web page : Your 1st web page</p><p> Components of a web document (HTML, head, metadata &amp; body)</p><p> Declaring &amp; identifying web documents, saving and viewing web documents</p><p>4. CSS Box Model</p><p> Inline elements, block level elements, replaced elements &amp; non-replaced elements)</p><p> Box dimensions (Margins, Borders, and Padding)</p><p> Margin collapsing, positioning, Floats, and Z-index</p><p>5. Text</p><p> Inline elements, block level elements, presentational elements &amp; phrase elements</p><p> Editing text, grouping text, lines &amp; special characters</p><p>Typography, text formating, color &amp; backgrounds</p><p> Internationalization (language support &amp; direction)</p><p>6. List and Links</p><p> Lists (ordered, un-ordered lists, definitions lists &amp; drop-down menus )</p><p> Links (inter-page, intra-page, absolute links, relative links, link effects, tool-tips &amp; email links)</p><p>7. Organizational elements</p><p> Tables</p><p> Forms (form attributes, form controls, structuring forms, labels &amp; focus)</p><p> Validating and processing form data</p><p>8. Frames</p><p> No-frames, nested frames, floating frames &amp; i-frame</p><p>9. Multimedia: Audio, Images &amp; Videos</p><p> Images (styling images, image captions, image links, background images &amp; image maps)</p><p> Multimedia plug-ins and players</p><p> Audio on the web (streaming &amp; non-streaming)</p><p> Interactivity on the web (animation, photo gallery &amp; image side shows)</p><p>10. Page Layout &amp; navigation</p></li><li><p>8/2/2019 Web Programming With HTML and Css</p><p> 5/7</p><p> Page size &amp; resolution</p><p> Wire frames &amp; structured pages</p><p> Liquid layouts, elastic layouts &amp; faux columns)</p><p> Navigation (single column &amp; multi column navigation, breadcrumb navigation)</p><p>11. Putting it all together : Your first website</p><p> Domain registration, web hosting, testing, web publishing and web maintenance</p><p> Web project management</p><p>12. Web Programming 102</p><p> Deprecated &amp; browser specific mark-up</p><p> Usability engineering, search engine optimization &amp; rounded corner techniques</p><p> Web standards, accessibility &amp; browser detection</p><p> Hacks, work-arounds and filters (drop shadows, image replacement, rollovers)</p><p> Troubleshooting &amp; debugging HTML and CSS</p><p> Serve Side Includes</p></li><li><p>8/2/2019 Web Programming With HTML and Css</p><p> 6/7</p><p>Chapter 1 : Introduction to the Internet</p><p>What Is the Internet?</p><p>The Internet is a network of computer networks around the the world, that allows the sharing of information and</p><p>various other resources.</p><p>What is the web</p><p>The web (World Wide Web) is a network of computers able to exchange text, graphics, and multimedia informatiovia the Internet.</p><p>History of the Internet.</p><p>It was started by researchers at ARPA (Advanced Research Projects Agency) in the USA who created ARPAnet,which became the first WAN.</p><p>Initially to find information on the Internet, you had to know where it was stored and then navigate through thenetwork to find the data you were looking for. Later on the Gopher protocol was introduced as a precursor to the</p><p>web. Gopher was a search tool that allowed the user to search hierarchical archives of textual documents. It enable</p><p>Internet users to easily search, retrieve, and share information.</p><p>In the late 1980's a new protocol called HTTP (Hypertext Transfer Protocol) was created by Tim-Berners Lee in</p><p>Switzerland at the . HTTP allowed you to jump from one page to another by pointing and clicking. The informatio</p><p>on computers in the network had now to be stored as HTML documents (Hypertext Markup Language) bringing tobirth the web ( World Wide Web). Todays World Wide Web is capable of delivering information via any number o</p><p>mediumtext, audio, video. The content can be dynamic and even interactive.</p><p>How the Internet works</p><p>The Internet is based on the Internet Protocol which is a predefined set of rules used to enable computers to</p><p>communicate with each other, regardless of which operating system they are running.</p><p>You can view information in a HTML document using a using a Web browser like Internet Explorer, GoogleChrome, Firefox, Opera, that interprets the format of the information after you receive the page.</p><p>You look for information on the web by using HTTP, the storage computer, or server, then sends the new Web pag</p><p>(as a plain text file) back to your computer using the same HTTP. Your browser sees the new Web page and</p><p>interprets the text and HTML tags to show you the formatting, graphics, and text that appear on the page.</p><p>The computers that make all these Web pages available are called Web servers. On any computer thats connected </p><p>the Web, you can run an application called a Web browser. Technically, a Web browser is called a Web clientthais, a program thats able to contact a Web server and request information. When the Web server receives the</p><p>requested information, it looks for this information within its file system, and sends out the requested information</p><p>via the Internet.</p><p>They all speak a common language, called HyperText Transfer Protocol (HTTP). (HTTP isnt really a language</p><p>like the ones people speak. Its a set of rules or procedures, called protocols, that enables computers to exchange</p><p>information over the Web.) Regardless of where these computers resideChina, Norway, or Austin, Texastheycan communicate with each other through HTTP.</p><p>The following illustrates how HTTP works (see Figure 1-1):</p><p>Most Web pages contain hyperlinks, which are specially formatted words or phrases that enable you to access </p></li><li><p>8/2/2019 Web Programming With HTML and Css</p><p> 7/7</p><p>another page on the Web. Although the hyperlink usually doesnt make the address of this page visible, it contains</p><p>all the information needed for your computer to request a Web page from another computer.</p><p>When you click the hyperlink, your computer sends a message called an HTTP request. This message says, in </p><p>effect, Please send me theWeb page that I want.</p><p>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</p><p>an error message, which probably includes the HTTP code for this error: 404, Not Found. Client computer</p><p>running browser Server HTTP request Returns page or error message</p><p>Figure 1-1: The client requests the page.</p><p>Then the server evaluates the request and serves the page or an error message.</p><p>Web technology infrastructure</p><p>HTML is a markup language, not a programming language that allows you format documents that display text,</p><p>images, sound and movie files, and almost any other type of electronic information.</p><p>Internet governance, law and ethics</p><p>W3C (World Wide Web Consortium) is a members organization involved in the development of the protocols thatmake up the World Wide Web. ICANN, Afrinic, ISP, Ministry, Department of , Industry associations</p><p>Internet Service Provider (ISP) : A company that provides you with access to the Internet.</p><p>Intranet : This is like your own private Internet in that it uses the same HTTP as the World Wide Web, but it is</p><p>accessible only by people within your own network.</p><p>Web Host : A company that stores (hosts) information that can be accessed from the Internet using the HTTP. A</p><p>Web host may also be called a Web Presence Provider (WPP).</p></li></ul>