HTML & CSS Design and Build Websites

how to design a website using html css and javascript and how to design responsive website in html and css pdf free download
OliverFinch Profile Pic
Published Date:15-07-2017
Your Website URL(Optional)
HTML & CSS DeSign anD buiLD WebSiTeS Published by ©2011 by John Wiley & Sons, Inc., Indianapolis, Indiana John Wiley & Sons, Inc. ISBN: 978-1-118-00818-8 10475 Crosspoint Boulevard Manufactured in the United States of America Indianapolis, IN 46256 Published simultaneously in Canada 10 9 8 7 6 5 4 3 2 1 No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748- 6011, fax (201) 748-6008, or online at Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or website may provide or recommendations it may make. Further, readers should be aware that Internet websites listed in this work may have changed or disappeared between when this work was written and when it is read. For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Library of Congress Control Number: 2011932082 Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.Is It hard to Learn? Many books that teach HTML and CSS I've focussed on the code you need to use 90% of the time resemble dull manuals. To make it easier for and omitted the code that you you to learn, we threw away the traditional would rarely see even if writing websites is your full time job. By template used by publishers and redesigned the end of the book, if you come this book from scratch. across the other 10% you will be able to Google it to find out what it means quickly and easily. At work, when people look Understanding HTML and CSS I have also added practical at my screen and see it full of can help anyone who works information on topics I am code, it's not unusual to get a with the web; designers can commonly asked about, such as comment about it looking very create more attractive and how to prepare images, audio complicated or how clever I must usable sites, website editors can and video for the web, how to be to understand it. The truth create better content, marketers approach the design and build is, it's not that hard to learn how can communicate with their of a new site, how to improve to write web pages and read audience more effectively, and your rankings in search engines the code used to create them; managers can commission (SEO), and how to use Google you certainly don't have to be a better sites and get the best out Analytics to learn about visitors "programmer." of their teams. to your site. 5 INTRODUCTIONthe structure of thIs Book In order to teach you about creating web pages, this book is divided into three sections: 1: htML 2: css 3: PractIcaL We will spend the first chapter We start this section with a We end up with some helpful looking at how HTML is used to chapter that explains how CSS information that will assist you in create web pages. You will see uses rules to enable you to building better websites. that you start by writing down control the styling and layout the words you want to appear of web pages. We then go on to We look at some new tags that on your page. You then add tags look at the wide variety of CSS will be introduced in HTML5 to or elements to the words so properties you can use in your help describe the structure of that the browser knows what is CSS rules. These properties your pages. HTML5 is the latest a heading, where a paragraph generally fall into one of two version of HTML (still under begins and ends, and so on. categories: development at the time of writing). Before learning about The rest of this section Presentation: How to control these elements, you need a good introduces the tags you have things like the color of text, the grasp of how CSS is used to at your disposal to create web fonts you want to use and the control the design of web pages. pages, grouped into chapters on: size of those fonts, how to add There is a chapter that talks you text, lists, links, images, tables, background colors to pages (or through a design process that forms, video audio and flash, and parts of a page), and how to add you might like to follow when miscellaneous elements. background images. creating a new website. I should warn you that the Layout: How to control where Finally, we end up looking at examples in the first nine the different elements are topics that will help you once chapters are not exciting to look positioned on the screen. You you have built your site, such at, yet they are the foundation of will also learn several techniques as putting it on the web, search every web page. The following that professionals use to make engine optimisation (SEO) and chapters on CSS will show you their pages more attractive. using analytics software to track how to make your pages look a who comes to your site and what lot more interesting. they are looking at. INTRODUCTION 6how PeoPLe access the weB Before we look at the code used to build websites it is important to consider the different ways in which people access the web and clarify some terminology. Browsers weB servers screen readers People access websites using When you ask your browser for Screen readers are programs software called a web browser. a web page, the request is sent that read out the contents of a Popular examples include across the Internet to a special computer screen to a user. They Firefox, Internet Explorer, Safari, computer known as a web are commonly used by people Chrome, and Opera. server which hosts the website. with visual impairments. In order to view a web page, Web servers are special In the same way that many users might type a web address computers that are constantly countries have legislations into their browser, follow a connected to the Internet, and that require public buildings link from another site, or use a are optimized to send web pages to be accessible to those with bookmark. out to people who request them. disabilities, many laws have also been passed that require Software manufacturers Some big companies run their websites be accessible to those regularly release new versions own web servers, but it is more with disabilities. of browsers with new features common to use the services of and supporting new additions a web hosting company who Throughout this book you will to languages. It is important, charge a fee to host your site. see several references to screen however, to remember that readers. These notes will help many computer owners will not ensure that the sites you create devIces be running the latest versions are accessible to people who use of these browsers. Therefore People are accessing websites such software. you cannot rely on all visitors to on an increasing range of devices your site being able to use the including desktop computers, It is interesting to note that latest functionality offered in all laptops, tablets, and mobile technologies similar to those browsers. phones. It is important to employed by screen readers are remember that various devices also being used in other areas You will learn how to tell which have different screen sizes and where people are unable read a browsers visitors use to access some have faster connections to screen, such as when they are your website in Chapter 19. the web than others. driving or jogging. 7 INTRODUCTIONhow weBsItes are created All websites use HTML and CSS, but content management systems, blogging software, and e-commerce platforms often add a few more technologies into the mix. what you see how It Is created htML5 & css3 When you are looking at a Small websites are often written Since the web was first created website, it is most likely that just using HTML and CSS. there have been several versions your browser will be receiving of HTML and CSS — each HTML and CSS from the web Larger websites — in particular intended to be an improvement server that hosts the site. The those that are updated regularly on the previous version. web browser interprets the and use a content management HTML and CSS code to create system (CMS), blogging tools, or At the time of writing this the page that you see. e-commerce software — often book, HTML5 & CSS3 were make use of more complex still being developed. Although Most web pages also include technologies on the web server, they had not been finalized, extra content such as images, but these technologies are many browsers were already audio, video, or animations and actually used to produce HTML supporting some features of this book will teach you how to and CSS that is then sent to the these languages and a lot of prepare them for use on the web browser. So, if your site uses people were using the latest and then how to insert them into these technologies, you will be code on their websites. I have your web pages. able to use your new HTML and therefore chosen to teach you CSS knowledge to take more these latest versions. Some sites also send JavaScript control over how your site looks. or Flash to your browser, and you Because HTML5 and CSS3 will see how to add JavaScript Larger, more complex sites like build on previous versions of and Flash in your web pages. these may use a database to these languages, learning these Both of these technologies are store data, and programming means you will also be able to advanced topics that you can go languages such as PHP, ASP.Net, understand the earlier versions on to learn more about once you Java, or Ruby on the web server, of them. I have added clear notes have mastered HTML and CSS, if but you do not need to know when the code is new and also you want to. these technologies to improve when it might not work in older what the user sees. The skills browsers. you'll learn in this book should be enough to help you on that road. INTRODUCTION 8We come across all kinds of documents every day of our lives. Newspapers, insurance forms, shop catalogues... the list goes on. Many web pages act like electronic versions of these documents. For example, newspapers show the same stories in print as they do on websites; you can apply for insurance over the web; and stores have online catalogs and e-commerce facilities. In all kinds of documents, structure is very important in helping readers to understand the messages you are trying to convey and to navigate around the document. So, in order to learn how to write web pages, it is very important to understand how to structure documents. In this chapter you will: ● See how HTML describes the structure of a web page ● Learn how tags or elements are added to your document ● Write your first web page 13 STRUCTUREHow PageS uSe Structure Think about the stories you The structure is very similar Now think about a very different read in a newspaper: for each when a news story is viewed type of document — an story, there will be a headline, online (although it may also insurance form. Insurance forms some text, and possibly some feature audio or video). This is often have headings for different images. If the article is a long illustrated on the right with a sections, and each section piece, there may be subheadings copy of a newspaper alongside contains a list of questions with that split the story into separate the corresponding article on its areas for you to fill in details or sections or quotes from those website. checkboxes to tick. Again, the involved. Structure helps readers structure is very similar online. understand the stories in the newspaper. 15 STRUCTUREStructuring word documentS The use of headings and This might be expanded upon On the right, you can see a subheadings in any document under subheadings lower down simple document in Microsoft often reflects a hierarchy of on the page. When using a word Word. The different styles for information. For example, a processor to create a document, the document, such as different document might start with we separate out the text to give levels of heading, are shown a large heading, followed by it structure. Each topic might in the drop down box. If you an introduction or the most have a new paragraph, and each regularly use Word, you might important information. section can have a heading to have also used the formatting describe what it covers. toolbar or palette to do this. 17 STRUCTUREHtmL deScribeS tHe Structure of PageS In the browser window you can see a web page that features exactly the same content as the Word document you met on the page 18. To describe the structure of a web page, we add code to the words we want to appear on the page. You can see the HTML code for this page below. Don't worry about what the code means yet. We start to look at it in more detail on the next page. Note that the HTML code is in blue, and the text you see on screen is in black. html body h1This is the Main Heading/h1 pThis text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.p h2This is a Sub-Heading/h2 pMany long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings)./p h2Another Sub-Heading/h2 pHere you can see another sub-heading./p /body /html The HTML code (in blue) is made up of characters that live inside angled brackets — these are called HTML elements. Elements are usually made up of two tags: an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags. STRUCTURE 20HtmL uSeS eLementS to deScribe tHe Structure of PageS Let's look closer at the code from the last page. There are several different elements. Each element has an opening tag and a closing tag. Code html body h1This is the Main Heading/h1 pThis text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.p h2This is a Sub-Heading/h2 pMany long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings)./p h2Another Sub-Heading/h2 pHere you can see another sub-heading./p /body /html 21 STRUCTURETags act like containers. They tell you something about the information that lies between their opening and closing tags. desCription The opening html tag indicates that anything between it and a closing /html tag is HTML code. The body tag indicates that anything between it and the closing /body tag should be shown inside the main browser window. Words between h1 and /h1 are a main heading. A paragraph of text appears between these p and /p tags. Words between h2 and /h2 form a sub-heading. Here is another paragraph between opening p and closing /p tags. Another sub-heading inside h2 and /h2 tags. Another paragraph inside p and /p tags. The closing /body tag indicates the end of what should appear in the main browser window. The closing /html tag indicates that it is the end of the HTML code. STRUCTURE 22a cLoSer Look at tagS CharaCter p right-angle braCket (More-than sign) left-angle braCket (less-than sign) opening tag The characters in the brackets For example, in the tags above The closing tag has a forward indicate the tag's purpose. the p stands for paragraph. slash after the the symbol. 23 STRUCTURECharaCter /p right-angle braCket (More-than sign) left-angle braCket (less-than sign) forward slash Closing tag The terms "tag" and "element" Strictly speaking, however, an tag and the closing tag and any are often used interchangeably. element comprises the opening content that lies between them. STRUCTURE 24attributeS teLL uS more about eLementS Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign. attribute naMe p lang="en-us"Paragraph in English/p attribute Value The attribute name indicates The value is the information Here an attribute called lang is what kind of extra information or setting for the attribute. It used to indicate the language you are supplying about the should be placed in double used in this element. The value element's content. It should be quotes. Different attributes can of this attribute on this page written in lowercase. have different values. specifies it is in US English. 25 STRUCTUREHTML5 allows you to use uppercase attribute names and omit the quotemarks, but this is not recommended. attribute naMe p lang="fr"Paragraphe en Français/p attribute Value The majority of attributes can Most attribute values are The value of the lang attribute only be used on certain either pre-defi ned or follow a is an abbreviated way of elements, although a few stipulated format. We will look specifying which language is attributes (such as lang) at the permitted values as we used inside the element that can appear on any element. introduce each new attribute. all browsers understand. STRUCTURE 26body, Head & titLe /chapter-01/body-head-title.html HTML body html You met the body element head in the first example we created. titleThis is the Title of the Page/title Everything inside this element is /head shown inside the main browser body window. h1This is the Body of the Page/h1 pAnything within the body of a web page is displayed in the main browser window./p /body head /html Before the body element you will often see a head element. This contains information Resu LT about the page (rather than information that is shown within the main part of the browser window that is highlighted in blue on the opposite page). You will usually find a title element inside the head element. title The contents of the title element are either shown in the top of the browser, above where you usually type in the URL of the page you want to visit, or on the tab for that page (if your browser uses tabs to allow you to view multiple pages at the same time). 27 STRUCTUREAnything written between the title tags will appear in the title bar (or tabs) at the top of the browser window, highlighted in orange here. Anything written between the body tags will appear in the main browser window, highlighted in blue here. You may know that HTML page to another quickly and page, we add code around the stands for HyperText Markup easily. A markup language allows original text we want to display Language. The HyperText part you to annotate text, and these and the browser then uses refers to the fact that HTML annotations provide additional the code to display the page allows you to create links that meaning to the contents of a correctly. So the tags we add are allow visitors to move from one document. If you think of a web the markup. STRUCTURE 28creating a web Page on a Pc To create your first web page on a PC, start up Notepad. You can 1 1 find this by going to: Start All Programs (or Programs) Accessories Notepad You might also like to download a free editor called Notepad++ from Type the code shown on the right. 2 2 29 STRUCTUREarticLe Go to the File menu and select Save as... You will need to save 3 3 the file somewhere you can remember. If you like, you could create a folder for any examples that you try out from this book. Save this file as first-test. html. Make sure that the Save as type drop down has All Files selected. Start your web browser. Go to the File menu and select Open. 4 4 Browse to the file that you just created, select it and click on the Open button. The result should look something like the screen shot to the left. If it doesn't look like this, find the file you just created on your computer and make sure that it has the file extension .html (if it is .txt then you need to go back to Notepad and save the file again, but this time put quote marks around the name "first- test.html"). S ST TR RU UCTU CTUR RE E 30 30

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.