Free html books for beginners pdf

No fee costs no downloading costs, the only thing which is needed your pc and our free samples. Because we teach through live examples right at our site and you the experts of different php languages.

So now learning is not a tough job any more. Phptpoint is going to be your new learning point where you can explore your knowledge and choose from different tutorial samples.

This has the best examples to feed your requirements of learning. The term applies to raster digital images. Higher resolution means more image detail. A raster image is an image consisting of the array of pixels. A pixel is the basic element of the two-dimensional digital image.

At the same time, a pixel is also the physical element of the display matrix. In the raster format images are displayed on the most of the image output devices: monitors, printers, cell phones, etc. The width and height of the image in pixels are the image size. And the number of pixels per inch PPI is the resolution of the image. The higher is the resolution, the more pixels are located in one inch.

And the smaller a single one will be. Thus, the more precise will be the details of the image. High definition images are a consequence of a greater resolution.

Resolution determines the clarity of the objects and text on the monitor. At high resolution objects on the screen become smaller and look sharper. Monitors usually have standard 4: 3 or widescreen 9 and dimensions.

This is the screen ratio. The number of pixels horizontally and vertically is the screen size. In printing the resolution is measured in DPI, dots per inch. For the photo to be of a normal quality, a resolution must be at least dpi. For example, to print a photo on the A4 piece of paper xmm or 8x11 inches, we need to multiply 8 by and 11 by And get xpx.

This should be the minimum size of the picture for printing on A4 sheet. If the size will be smaller, the printed image will be fuzzy and blurry. RGB color model stands for Red, Green and Blue is an additive color model in which those three main colors are mixed together to create other colors. RGB color system is suited for surfaces that produce their own light. The screen surface of a computer monitor or a TV set is originally dark, so its original color is black.

All other colors are obtained by using a combination of the three main colors, which in their mixture must create a white color. Experimentally it was proven that red, green and blue are the most suited for human eyes. As we know, the surface of the screen is not solid, it consists of small dots called pixels.

Each pixel consists of three blocks, red, green and blue. By varying the brightness level of each block we can get different colors. The information about the brightness level is encoded using binary code. For example, the most common for modern displays bit True Color system uses three bytes with values from 0 to for each pixel on the screen. Absolutely red color will have a value This means that the amount of red color is full, of the green is 0 and of the blue is also 0.

Absolutely blue color will have a value of 0. With different combinations different colors are formed: bright-violet is RGB color can also be encoded with the help of the hexadecimal system. Here are some standard colors:.

This color system is called additive. In other words, we take black color no color and add primary colors to it, mixing them all the way up to white. This way we can encode 16 colors, which is more than enough for human eyes. In a word, alt tag is an abbreviation of what is essentially an alt attribute on an image tag showing a nature or a content of its image. That is why each image on any successful website has its alt tag that describes what is actually on it.

As a result, various screen readers will make the image from your website accessible while reading out this alternative text.

To illustrate the situation, that is an example of a complete HTML image tag:. So, why does one need alt text for their images? As it has already been mentioned, the alt text literally tells what an image depicts as well as describes the main function of this image on the web page.

Generally speaking, you just propose a person to use some services or buy some products that you provide with the help of this button. Thus, its alternative text simply explains what the button is used for. As you can see, there is nothing complicated. Here is another simple example of using alt text. As you can see from the screenshot below, this blue call-to-action button lets a person get a shown website template right now.

What is more, talking about the image buttons, you could also put some extra call to action text to it. Actually, it is quite popular policy, so I am sure that you have seen such things a plenty of times while surfing through the web space.

Below you can see the next example of this function. Keep in mind that every image you want to use for your online project should have its own alternative text. In point of fact, visually impaired and blind visitors of your site will also use alt in order to figure out what an image or a button is for. What else should you know about it? Ok, now you know a lot of information about the pluses of alternative text.

Still, I know what you are thinking about right now: what should you do in case your image does not have a clear purpose? Without a doubt, it is a logical question, so let me tell you a couple of words.

Addin g I n lin e St yle s Open about. Refer to the previous exam ple as you create the style. Does the m arkup for your paragraph look like this? It should appear like the page shown below. You can do this using a span elem ent, which can be wrapped around any content you like.

Unlike p , which m eans paragraph, or blockquote , which signifies a quotation, span has no m eaning. A span is little m ore than a tool for highlighting the start and end of a section to which you want to apply a style. Em bedded sty le sheets are a logical step up. An em bedded sty le sheet is a section you add to the start of a web page that sets out all the styles that will be used on that page.

The selector instructs the browser to apply all the declarations between the curly braces to certain elem ents. For this reason, an em bedded style sheet is a m arked im provem ent over inline styles.

But what if you have a web site that com prises m any pages? If you want to m ake your changes across the whole site, using em bedded style sheets in the way I dem onstrated above is still not quite the perfect solution. The best solution is to use an external style sheet. Every page needed 20 or m ore different tweaks, and each tweak had to be applied consistently to every page of the site. Inevitably, som e pages were m issed and eventually the redesign plan was uncerem oniously dropped.

In short, the ugly web site rem ained ugly for a whole lot longer before dying a nasty death through sheer negligence indeed, there are m any such legacy docum ents littered around the Web today. This need not be the case though.

CSS gives you the power to set styling rules in one place. When you want to m ake changes to your web site, you m ake changes in that one place, and your whole web site changes autom atically to reflect those new styles. Happy Days! CSS Support Is Here The good news is that the large m ajority of web browsers in use today offer excellent support for CSS though this has not always been the case, which is why som e people were slow to adopt CSS-based design in the past.

Som e browsers can choke on a few of the m ore advanced CSS techniques, but, by and large, you can style your web pages using CSS and be confident that what you see on your screen is the sam e view that Open your text editor and enter the following: style1. Note that the first few lines we typed into our CSS file will not actually do anything.

Above, we used the com m ent sim ply to m ake a note about the purpose of the file, nam ely that it is the CSS for the Bubble Under site.

To do this, you need to add a link elem ent to the head of each and every web page that will be styled using CSS. Our site contains just three pages at the m om ent, so this will be nice and easy. The link elem ent sim ply links a file to the page on which the elem ent appears; in this case, the linked file is a style sheet.

The href attribute tells the web browser where the style sheet file style1. You should always include these im portant attributes when linking to a. Em pty Elem ent Alert! The link elem ent is another of those special em pty elem ents we discussed earlier in this article: it does not have separate start and end tags.

Then, try opening each one in your web browser. All of your paragraphs should now display in bold, blue text. If you change the color specified in your. Go ahead, give it a try. All we need to do is set som e styles. The nature of the way in which CSS is applied m eans that every elem ent contained in the body elem ent will take on the sam e font unless another font is specified for a given elem ent or elem ents within body —but m ore on that a little later. Great: Verdana it is! Failing that, please try using Helvetica and, failing that, Arial.

If none of the above are installed, just use whatever sans-serif font is available. Type the above CSS into style1. Save the file, then open the hom epage index. If everything went to plan, your web page all three of them , actually should display slightly differently than they did before.

The figure below shows the appearance of our newly-styled hom epage. N ote that w hen y ou refer to a sans-serif font in CSS, y ou m ust hy phenate the tw o w ords, i. In your text editor, add the following to style1. All the first -level headings now display in the Trebuchet MS font, while everything else displays in Verdana. If y ou have saved the altered file, check that y ou ty ped the CSS exactly as described.

If y ou did, y ou m ay be experiencing a caching problem w ith y our brow ser. Caching is w hen y our brow ser accesses files previously saved to the hard drive w hen y ou visit a given w eb page, rather than dow nloading new files each tim e. For exam ple, y ou enter the URL, and the brow ser pulls the page stored in its cache.

This speeds up the process of display ing a w eb page that has been loaded before. Unfortunately , y our cache can soon becom e out-of -date, and w hen that happens, the page y ou visit m ight not display the m ost recent data.

This happens m ost frequently w ith im ages, but it can also occur using CSS files. Therefore, the am ount of space the cache takes up on y our hard disk before cached content is replaced w ith new er data can be adjusted. Copy the CSS below into your style1.

One is to use recognized color nam es such as navy , blue , red , yellow , and so on. These are easy to rem em ber and spell, but you can be lim ited by the range. Another way of referencing colors is to use a hexadecim al color specification. This obscure-looking reference e2edff translates to a light shade of blue.

You could not, as a beginner, begin to guess that this would be a light blue. Thankfully there are num erous tools on the Web that let you choose a color from a chart often called a color picker , then give you the code to m atch.

Colors in HTML are often w ritten as a hexadecim al color specification. You m ight rem em ber the hexadecim al counting sy stem from y our high school m ath class. Or m ay be y ou w ere asleep up the back of the room. N ever m ind. W ell, y ou do now! W ell, as y ou can see, after w e reach 9, instead of going straight to 10 as w e do w hen counting in decim al w e go through A, B, C, D, E, and F before w e finally hit That gives us six extra digits to use w hen w e count.

Sound confusing? W ell, as it so happens, com puters can count in hexadecim al far better than hum ans can! The key here is that all of those num bers that w e know and love in the decim al sy stem , like 2,, 15,0 0 0 ,0 0 0 , and 42, can be represented in hexadecim al. And Table 3. The values represent the proportions of red the ff part , green the first tw o zeros , and blue the second tw o zeros that are m ixed to create the specified color. Those three prim ary colors can be com bined to display any color on the screen, sim ilar to the w ay a television set uses different am ounts of red, green, and blue to create a single dot on its screen.

It m ay not surprise y ou, then, to learn that ff w ill give y ou the color red. The line-height property is an interesting one. Try tweaking this value, save your CSS file, and see how the new value affects the text on your web page. The padding property is used to provide space between the outside edge of the elem ent in question and the content that sits inside it.

We m entioned pixels before, when we specified the size of an im age, but what is a pixel? Basically, one pixel is one of the tiny dots that m ake up what you see on the com puter screen. Font-size keywords range from xx-small to xx-large and offer a quick way to style text. There are so m any m ore from which you can pick and choose—too m any possibilities, in fact, for us to be able to list them all here.

However, this section lists som e of the basic properties and values with which you m ight like to experim ent. Feel free to try any of these in your CSS file. Be sure to provide options that users are likely to have on their com puters e. Arial, Verdana, etc. Relative font sizes are definitely the preferred option. Before y ou experim ent using the CSS properties above, it m ight be an idea to m ake a backup of y our CSS file, just in case y ou run into difficulties.

Rem em ber that y ou can dow nload all the exam ples used in this chapter from the code archive if y ou accidentally m angle y our CSS file. Our site now boasts a CSS file using a selection of attractive styles.

As you can see, em phasis elem ents appear in italics by default. Open style1. Does your page look like the figure below? Now, whenever you add an em elem ent to any web page of your site assum ing that page is linked to style1.

Presum ably, the default styles that browsers use were selected carefully; how can you be sure that redefining the styles is a good idea? They probably are. Perhaps a com prom ise is in order. W hy not? W ell, m arking text as i say s nothing about its m eaning; i only com m unicates how it should be presented on the screen.

Such elem ents are referred to as presentational HTML elem ents, and they should be avoided. Likew ise, the b elem ent for bold , another old HTML elem ent, should not be used.

The preferred option is to use strong or, if y ou just w ant to display headings in bold, use CSS. W hy is this im portant? It m ight not seem a big deal as y ou look at the italicized text in y our w eb brow ser. But im agine if y ou w ere blind, and y ou used softw are that read w eb pages aloud to y ou, instead of display ing them on the screen. This program called a screen reader m ight read text m arked up w ith an em elem ent using slight em phasis, and text m arked up w ith strong in a m ore pow erful voice though this, of course, depends on the screen reader being used.

But w hat w ould it do w ith text m arked up w ith i or b? W ell, these elem ents say nothing about the m eaning of the text, so it w ould not treat them in any special w ay —thus potentially losing the m eaning that y ou w ere try ing to convey.

A search engine e. One other presentational tag that y ou m ight see others use, but should never copy , is the u elem ent.

W rap this around som e text and needless underlining occurs that only serves to confuse users. A pen or a sheep? Well, the answer is either, depending on the context. After all, you spend m any hours a week rounding up herds of sheep into a big, solid pen.

Context can change a situation quite drastically, and we can use context to our advantage in CSS. We can style an elem ent in a num ber of different ways, depending on its position. Can you spot which one it is? The fact that this particular paragraph is contained within a specific div elem ent—which has an id attribute of tagline —can be useful. Your page should now look sim ilar to the one shown below. Perhaps a CSS-to-English translation is required. Con t e x t u a l Se le ct or s tagline p is known as a contextual selector.

Plus, once you have a lot of styles on the page, it is even m ore difficult to m aintain. You can! Edit your CSS file style1. You should be looking at a page like the one shown in Figure 3. That CSS really does kill several birds with one stone figuratively speaking, of course; I did say no anim als would be harm ed!

Not only do you have the convenience of being able to style m any pages from one central location your CSS file , but you have the added convenience of being able to style m any elem ents in one go. Your CSS file becom es easier to m anage and—a nice little side -benefit— sm aller, and therefore quicker to download. The nam e is deliberate. You m ight w ant to add another sty le to y our w eb site at a later date, and num bering is a basic w ay to keep track of the sty les y ou can apply to a site.

For exam ple, y ou can edit marine. But som ething interesting is happening in our CSS file: it appears that we m ay have a conflict in our rules. Or have we? Re ca ppin g Ou r Pr ogr e ss Tim e for another breather. What have we learned? That topic is links. St ylin g Lin k s Links are everywhere on the Web: they truly are the basis of everything you see online. Try adding that to your style1. In CSS, you can change the styling of all these link states using pseudo -classes, which sounds com plicated but really is fairly straightforward.

Adding pseudo-classes to your style sheet m eans the browser applies the rule when the elem ent is in the state specified by the pseudo-class. Try to rem em ber the letters LVHA. Save the CSS file. Open any of the three web pages in your browser or hit Reload to see how the styled links display.

Feel free to experim ent in the CSS file with the different foreground and background colors, and other text form atting styles that were detailed in the table earlier in this chapter. This is alm ost certainly the case w ith our three-page project site—the links in y our navigation list are probably all gray. Click on this and it w ill bring up a Delete Brow sing History dialog w ith m ore options, as show n in Figure 3.

Afterw ards, reload the w eb page. Any links y ou m ay have visited w ill now appear as unvisited. The process for clearing history in older versions is a little easier—just look for the button on the Internet Options dialogue that say s Clear History.

Figure 3. However, im plem enting broad -brush styles, such as coloring the text in all p elem ents navy, is very m uch a blanket approach to design. What if you want som e of those paragraphs or any elem ents, for that m atter to look a little different than the rest? Class selectors are the answer. A class selector lets you define a style that can be used over and over again to style m any different elem ents.