Learn html and css pdf free download

View all articles by Ian Lloyd Se t t in g Up Sh op Before you dive in and start to build your web site, we need to take a little tim e to get your com puter set up and ready for the work that lies ahead. It will, however, m ean that som e of the suggested downloads or uploads m ay take longer to com plete, but you probably knew that already.

N o t e : Pla n n in g , Sch m a n n in g At this point, it m ight be tem pting to look at y our m otives for building a w eb site. Do y ou have a project plan? W hat objectives do y ou have for the site? As this is y our first w eb site and it w ill be a fairly sim ple one, w e can overlook som e of the m ore detailed aspects of site planning.

W hen that tim e com es, proper planning w ill be a far m ore im portant aspect of the job. So, what tools do you need? Any instructions and screen shots will be with Vista in m ind. Windows com es with a very sim ple text editor called Notepad. Many professional web designers who use com plicated software packages first started out m any years ago using Notepad; indeed, m any professionals who have expensive pieces of software that should be tim e -savers still resort to using Notepad for m any tasks.

It also loads m uch m ore quickly than fully-featured web developm ent program s. Bells and whistles are definitely not featured. Tip: Shortcut to Notepad To save y ourself navigating to this location each tim e y ou w ant to open N otepad, create a shortcut on y our desktop.

W hen y ou release the m ouse button, a shortcut to the application w ill appear on y our desktop. Notepad is the m ost basic of applications, as you can see below. Internet Explorer sits right there in the Start m enu, also in the Pro gram s folder accessed via All Pro gram s from the Start m enu , in the Qu ick Lau n ch area bottom left of the Start m enu, near the Windows logo , and a shortcut m ay also lurk on your desktop.

These tools are virtually equivalent to the Windows program s m entioned above. Unlike Notepad, TextEdit works as a rich text editor by default, which m eans we can work with fonts, m ake text bold and italic, and so on. The next tim e you create a new file in TextEdit, it will be a plain text docum ent. You can usually find Safari in the d o ck the dock is the bar of icons at the bottom of your screen , but you can also access it through the Applications folder.

To add a program to the dock, just drag its icon from the Applications folder onto the dock, and presto! The application is now easily accessible w henever y ou need it. If you are using a slightly older Mac, you m ay also have a copy of Internet Explorer installed. Our advice for Internet Explorer for Mac? Send it to Trash. It also bears no real resem blance to its Windows counterpart, for those m ore com fortable using IE.

Be yon d t h e Ba sic Tools You can certainly m ake a good start using the tools m entioned above. Countless other text editors and web browsers are available for download, and m any of them are free. Fire fo x As m entioned in the Preface, Firefox is a very popular alternative to Internet Explorer and, as we proceed through this book, it will be our browser of choice for a num ber of reasons. As with NoteTab, Firefox offers a tabbed interface that helps keep your com puter free from window clutter.

However, there are a few program s that you m ight like to consider as you m ove beyond the basics. As with NoteTab for Windows, TextWrangler can tidy up your workspace by allowing several text files to be open for editing at the sam e tim e the docum ents are listed in a pull-out drawer to one side of the interface, rather than in tabs.

Fire fo x Firefox is popular not just am ong Windows users, but also with Mac users, m any of whom prefer to use it instead of Safari often because of the extra features—known as ad d -o n s —that can be bolted on to the browser. A web page viewed in Firefox should display the sam e regardless of whether the browser is installed on a PC running Windows XP or Vista, on a Mac running OS X, or on Linux, a free, open source operating system generally favored by highly technical people who like to tinker with their com puters a lot.

The predictability of Firefox is a welcom e change from the bad old days of endless browser com petition, and is one very good reason why we will m ainly use Firefox in the exam ples included in this book.

A professional im age editing program , like Photoshop or Fireworks, costs hundreds of dollars. If you already have a copy of one of these, or a sim ilar im age editing program , by all m eans use it and experim ent with it. Keep an eye open for free im age editors that are included on disks attached to the covers of Internet, com puting, and design m agazines. Software vendors often give away older versions of their software in the hope that users m ight be tem pted to upgrade to a new version at a later date.

Look out for Paint Shop Pro, or any im age editor that supports laye rs —a way to construct an im age by stacking 2 or m ore layers, one on top of the other. Ta k in g t h e Big Bo y s fo r a Sp in The m ost com m only used im age editing packages are available for trial dow nload.

They are large dow nloads hundreds of m egaby tes and m ay need to be left to dow nload overnight, even on a broadband connection. How ever, those 30 day s m ight just be enough tim e for y ou to use the softw are w hile y ou w ork through this book.

Ad o be Ph o to s h o p A trial of the latest version of Photoshop is available for download [7]. Ad o be Fire w o rks You can download a trial version of Fireworks from the Adobe web site [10 ]. W in dow s Tools A standard Windows install has not always been blessed with im age editing software.

In Windows Vista, the Photo Gallery application has seen som e big im provem ents over its previous XP incarnation and now includes som e basic, but still useful, im age m anipulation tools, including cropping, color, and contrast adjustm ent.

The Photo Gallery application can be found directly in the Start m enu. With that in m ind, you m ight like to try out an excellent im age m anagem ent tool that Google offers for free download.

M a c OS X Tools The Mac has a reputation for being favored by designers and creative types, and the platform m akes m any tools available to the budding artist. However, they usually com e at a price, and often that price is higher than those of the Windows equivalents. So, what free software can we use on the Mac, assum ing that we want som ething m ore perm anent than a 30 -day trial version of Photoshop or Fireworks?

Grap h icCo n ve rte r GraphicConverter has m uch greater capabilities than its nam e suggests. Although this is prim arily a tool for converting graphic files, it can also be used for sim ple editing tasks. The next task we m ust tick off our to-do list before we go any further is to create a space for your web site on the hard drive. W in dow s The easiest and m ost logical place to keep your web site files is in a dedicated folder within the D o cu m e n ts folder or the My D o cu m e n ts folder in Windows XP.

The D o cu m e n ts folder can be found inside your user folder. Missing y our My Docum ents folder in XP? This is how y ou can return the folder to y our desktop: From the Start Me n u , select Co n tro l Pan e l. Vis ta u s e rs : choose Pe rs o n alizatio n and listed in the top left, under the title Tas ks is the option to Ch an ge D e s kto p Ico n s. You m ay now also close the Ap p e aran ce an d Pe rs o n alizatio n window.

XP u s e rs : select Ch an ge th e d e s kto p backgro u n d from the list of options, then click the Cu s to m ize D e s kto p … button at the bottom.

Check the My D o cu m e n ts option in the dialogue box that appears, then click OK. Close the Ap p e aran ce an d Th e m e s window also by pressing OK.

What do you do next? Oh, and did we m ention that all this friendly, helpful advice is free of charge? We thought that m ight encourage you! Finally, we m entioned som e m ore capable—and m ore expensive—options, such as Photoshop and Paint Shop Pro. You r Fir st W e b Pa ge s A wise m an once said that a journey of a thousand m iles begins with a single step. Elem ents tell the web browser what a particular item in the page is: a paragraph, a heading, a quotation, and so on.

There are som e things that are essential to the process of driving; others are m ere fashion item s. To drive the car you need to have wheels including the steering wheel , and a place to sit. The car m ust also have som e kind of chassis to which the bodywork can be bolted.

An engine is required to power the car, as is bodywork to which your nonessential, but spiffy trim can be attached. Anything less, and all you have is a collection of attractive—but useless! Like the car, your web page also needs to have a chassis: a basic structure upon which everything else can be built. But what does this hypothetical chassis look like? Position your cursor som ewhere on the page other than over an im age , and right-click Ctrl-click on a Mac.

You should be presented with a context m enu sim ilar to those shown below. A car enthusiast would call it a project—a solid foundation that needs a little extra work to turn it in to som ething usable. The sam e goes for a web page. It m ust be the first item on a web page, appearing even before any spacing or carriage returns.

Have you ever taken a docum ent you wrote in Microsoft Word 20 0 7 on one com puter, and tried to open it on another com puter that only had Word 20 0 0 on it? This is where the doctype com es in. The browser uses this inform ation to decide how it should render item s on the screen. Got all that? There are way too m any abbreviations for this paragraph.

You should, how ever, be aw are of its existence at the very least. W 3C W 3C is an abbreviation of the nam e W orld W ide W eb Consortium , a group of sm art people spread across the globe w ho, collectively , com e up w ith proposals for the w ay s in w hich com puting and m arkup languages used on the W eb should be w ritten.

The W 3C docum ents are the starting point, and indeed every thing in this book is based on the original docum ents. What com es next? Som e HTML! Rem em ber, elem ents are the bricks that create the structures that hold a web page together. But what exactly is an elem ent? What does an elem ent look like, and what is its purpose? Inside a tag, there is a tag nam e; there m ay also be one or m ore attributes.

The figure below shows what we have. Attributes appear only in the opening tag of any given elem ent. Back to the purpose of the htm l elem ent. There are two m ajor sections inside the htm l elem ent: the head and the body. Th e h e a d Ele m e n t The head [16] elem ent contains inform ation about the page, but no inform ation that will be displayed on the page itself.

As the figure below shows, it really pays to put som ething m eaningful as a title, and not just for the sake of those people who visit our web page.

It also appears in the dock on a Mac. If users decide to add the page to their bookm arks or favorites , the title will be used to nam e the bookm ark. Your title elem ent is used heavily by search engines to ascertain what your page contains, and what inform ation about it should be displayed in the search results. J ust for fun, and to see how m any people forget to type in a useful title, try searching for the phrase Untitled Docum ent in the search engine of your choice.

In the exam ple above, the meta tag tells the browser which character set to use specifically, UTF-8, which includes the characters needed for web pages in just about any written language. Self-closing Elem ents The m eta elem ent is an exam ple of a self-closing elem ent or an em pty elem ent.

Even the m ost hardened and w orld-w eary coders w ould have difficulty rem em bering these elem ents exactly , so m ost do the sam e thing—they copy from a source they know to be correct m ost likely from their last project or piece of w ork. Fully -fledged w eb developm ent program s, such as Dream w eaver, w ill norm ally take care of these difficult parts of coding. But if y ou are using a hum ble text editor and need som e help, y ou need only rem em ber that there is a com pletely searchable HTML reference, accessible at any tim e at SitePoint.

Th e body Ele m e n t Finally, we get to the place where it all happens. However, to start to appreciate how everything fits together, you really need to see a sim ple page with som e actual content on it. Hopefully you will get to see how the markup that drives the page relates to the end result that you can see on screen.

Just to show how it works. Enter the filenam e as basic. Select UTF-8 from the Encoding drop -down list. Click Save. Find the Sites folder, enter the filenam e as basic. We want to save this file with an.

Because their com puter is set up to read Korean text, and y ours is set up to create English text. UTF-8 can handle just about any language there is including som e quite obscure ones and m ost com puters can read it, so UTF-8 is alw ay s a safe bet. Next, using Windows Explorer or Finder, locate the file that you just saved, and double-click to open it in your browser. The figure below shows how the page displays. The figure below shows a direct com parison of the docum ent displays.

In the sam e way, the p elem ents contain the text in the two paragraphs. All of our attribute nam es w ill be in low ercase, too. If we wanted to include a subheading beneath this heading, we would use the h2 elem ent. A subheading under an h2 would use an h3 elem ent, and so on, until we get to h6. The lower the heading level, the lesser its im portance and the sm aller the font size unless you have re-styled the headings with CSS, but m ore of that later in this article.

With headings, an im portant and com m onsense practice is to ensure that they do not jum p out of sequence. In other words, you should start from level one, and work your way down through the levels in num erical order.

The elem ent we use to deal with blocks of text is the p elem ent. An unordered list—known as bullet points to the average person—m akes use of the ul elem ent. In both types of list, individual points or list item s are specified using the li elem ent. So we use ol for an ordered list, ul for an unordered list, and li for a list item. Sim ple. To see this m arkup in action, type the following into a new text docum ent, save it as lists.

A lovely, concise little paragraph. Did you type it all out? Rem em ber, if it seem s like a hassle to type out the exam ples, you can find all the m arkup in the code archive, as I explained in the preface. When displayed in a browser, the above m arkup should look like the page shown below. Any guesses? All will be revealed in good tim e. The trouble is, if you had a reason to attach the hubcaps that way before, surely you should do it the sam e way again.

What a quandary. You m ight build a site then not touch it again for six m onths. Then when you revisit the work, you m ight find yourself going through the all-too-fam iliar head-scratching routine. Fortunately, there is a solution. XHTML—like m ost program m ing and m arkup languages—allows you to use com m ents. Handy one, that. Why not? Oh, and did you spot how we snuck another new elem ent in there?

Read that part to yourself now, and listen to the way it sounds in your head. Now you know when to use the em elem ent. Usin g Com m e n t s t o H ide M a r k u p fr om Br ow se r s Te m por a r ily There is no lim it to the am ount of inform ation you can put into a com m ent, and this is why com m ents are often used to hide a section of a web page tem porarily.

So, what can we do? Thankfully, we can use special little codes called entities in our text instead of these sym bols. None of the exam ples shown so far are worth keeping, though. Th e H om e pa ge : t h e St a r t in g Poin t for All W e b Sit e s At the very beginning of this chapter, we looked at a basic web page with nothing on it the car chassis with no bodywork or interior.

You saved the file as basic. The figure below shows what it should look like. You've passed your underwater navigation skills and successfully found your way to the start point - or in this case, our home page. Im portant: Hey! You should be looking at som ething like the display shown below. But what exactly is the site about?

Notice that, despite our inclusion of a couple of headings and a couple of paragraphs, there is little to suggest what this site is about.

Next, add the following text. Note that there is m ore than one paragraph. We arrange weekends away as sm all groups to cut the costs of accom m odation and travel, and to ensure that everyone gets a trustworthy dive buddy. Finally, add som e sim ple contact details as follows: "To find out m ore, contact Club Secretary Bob Dobalina on 0 7 or em ail bob bubbleunder.

We arrange weekends away as small groups to cut the costs of accommodation and travel and to ensure that everyone gets a trustworthy dive buddy. The im portant thing to focus on at this stage is what the content of your site should com prise, and how it m ight be structured.

To use this address, a site visitor w ould need to copy and paste the address into an em ail m essage. The mailto: prefix tells the brow ser that the link needs to be treated as an em ail address that is, the em ail program should be opened for this link.

The content that follow s the mailto: section should be a valid em ail address in the form at username domain. Add this to the w eb page now , save it, then refresh the view in y our brow ser.

Try clicking on the underlined text: it should open y our em ail program autom atically , and display an em ail form in w hich the To: address is already com pleted. This is useful for blind visitors to your site, search engines, and users of slow Internet connections.

Go and grab divers-circle. The im age is shown below. Open index. It should look like the display shown below. Addin g St r u ct u r e Paragraphs? No problem. But what on earth is a div? A div is used to divide up a web page and, in doing so, to provide a definite structure that can be used to great effect when com bined with CSS. When you place content inside a div , it has no effect on the styling of the text it contains, except for the fact that it adds a break before and after the contained text.

Unlike a p elem ent, the div does not add any m argins or padding. This really is a golden rule. These are listed below. Rem em ber that attribute nam es should be written in lowercase, and their values should be contained within quotation m arks. Im portant: No Sharing id s id attributes are used in XHTML to uniquely identify elem ents, so no tw o elem ents should share the sam e id value.

N o t e : h1 , header , a n d head An id attribute set to header should not be confused w ith headings on the page h1 , h2 , and so on ; nor is it the sam e as the head of y our HTML page.

In the snippet below, that section has been changed to a div with an id attribute: Exam ple 2. This is called nesting. Nesting elem ents can help to logically group sections of a web page together, just as you m ight do in the real world by placing a selection of sm all boxes containing sim ilar item s inside a larger box. Indenting y our code can help resolve problem s later, as y ou can m ore clearly see w hich item s sit inside other item s.

It does not affect how the brow ser interprets or display s the w eb page. Notice that, in the m arkup above, com m ents appear after som e of the closing div tags. These com m ents are optional, but again, com m enting is a good habit to get into as it helps you fix problem s later. Adding som e com m ents here and there can really help you debug later.

Save it as index. Got that file ready? First, m ake two copies of the file: Click on the index. Repeat the process once m ore. You should now have three HTML files in the folder that holds your web site files. The index. Renam e one file as contact. Renam e the other one as about. If y our filenam e appears as just index in W indow s Explorer, y our sy stem is currently set up to hide extensions for files that W indow s recognizes.

To m ake the extensions visible, follow these sim ple steps: 1. Launch W indow s Explorer. Select the Vie w tab. Opening a file in TextEdit is a sim ilar process.

In your text editor, open each page in turn and edit them as follows rem em bering to save your changes to each before you open the next file : index. Now, each of the three files contains the content that suits its respective filenam e, but a further change is required for the two newly created files.

Open about. Next, open contact. If everything has gone to plan, you should have three files nam ed index. The m arkup for each should be as follows: index.

Try for yourself: open index. How will you get from one page to another? To enable site visitors to m ove around, we need to add navigation. Navigation relies on anchors, which are m ore com m only referred to as links. The a elem ent contains the link text that will be clicked which, by default, appears on the screen as blue, underlined text.

Our navigation is just a list of three links. A good position would be just after the header has finished, before the m ain body content starts. In the code below, the navigation block appears in position on the hom epage: index. Add the block of links to contact. It should be possible to flick between all three pages.

Th e blockquote W h o Sa id Th a t? Here are the lines: " Happiness is a dip in t he ocean followed by a pint or t wo of Old Speckled Hen.

You can quot e m e on t hat! Using styles, for example, it is possible to say that all the links, instead of being blue or purple as usual, must be gray; Or the text is still orange. In fact, the idea is that the browser scans the HTML document. When it encounters a tag, it asks the CSS how it should display it. The CSS knows nothing more than to say how to display this or that item on the web page.

In this we shift our focus to formatting and presenting information. To do this we use a W3C technology called Cascading Style Sheets CSS that allows document authors to specify the presentation of elements on a web page separately from the structure of the document.

This separation of structure from presentation simplifies maintaining and modifying a document's layout. This course is adapted to your level as well as all CSS pdf courses to better enrich your knowledge. All you need to do is download the training document, open it and start learning CSS for free.

This tutorial has been prepared for the beginners to help them understand basic CSS Web development. After completing this tutorial you will find yourself at a moderate level of expertise in CSS from where you can take yourself to next levels. This tutorial is designed for CSS students who are completely unaware of CSS concepts but they have basic understanding on Web development training.

Download free Responsive Web Design With fluid grids for desktop, tablet, and mobile, with example and exercises, course material, tutorial training, a PDF file under 30 pages by Tim Davison. Download free Node.