Welcome To My Online earning Tutarial And Artical Based Web Portal

Wellcome to My Online Earning Tutorial and Article Based Web Portal

Web design Tutorials Lesson 5.( Part 4)

A Simple One Column Layout with HTML5

 The easiest layout to implement with CSS may be a one column layout. this can be simply a series of boxes stacked one on high of the opposite. We'll have a Header space, a horizontal navigation menu a district for the contents of the page and at last a Footer The layout we'll style feels like this:


As you'll see it's fairly straightforward: Header space at the highest navigation bar page content then Footer.

The first issue to try to to is that the HTML The CSS will then be superimposed on high of this.

Have a glance within the templates folder that you simply transfer with this course (extra files templates), (If you haven't got the additional files however the transfer location is here underneath the heading net style  New Course : transfer the additional Files required for this course (You do not would like the downloads for the previous course.)

Open up the model referred to as template one coltxt you ought to see the subsequent HTML:


There area unit quite few tags here that you simply haven't met before These tags area unit unaccustomed HTML5 and don't seem to be gift in this previous versions.

HEADER
NAV
SECTION
ARTICLE
FOOTER

In previous versions of HTML you simply used the DIV tags in situ of those on top of The new ones area unit referred to as linguistics tags they do not truly do something by themselves  they're simply there to create things clearer for you (and maybe search engines) If you employ DIV tags for everything then page code will get terribly untidy and confusing.

Let's have a glance at our code though.

Starting at the highest, we've a HEADER tag:



Top Header



The HEADER tag isn't simply at the highest of the page, If you look additional down the page you'll see that we've another combine of them:



Section Title



The HEADER tag ought to be used after you desire a nice heading for various sections of your page. Our initial HEADER is for a few H1 text Since it's at the terribly high of our page however we have a tendency to might replace the H1 tags with say a picture to use as a website banner.

Our second HEADER is encompassing a combine of H2 tags this might be the title of a piece that we wish individuals to click on.

After the highest HEADER tags we've a combine of NAV tags.


 These area unit encompassing associate degree unordered list that we wish to use as a navigation bar Previously we have a tendency to had DIV tags encompassing our unordered list Now it's abundant clearer what this list is getting used for.

The next linguistics tag is SECTION we've 2 pairs of those the primary combine area unit at the highest and bottom of the page:


These SECTIONS tags hold the most content of the location.

In between the primary combine of SECTION tags we've a piece tag. because the name suggests, these area unit used for after you need to separate a piece of text from the remainder of your website. you will well have over one article within which case you'll use another combine of ARTICLE tags. Like this, for example:


Here, we've 2 articles on the page. every combine of ARTICLE tags incorporates a HEADER and a district The HEADER tags are was hyperlinks whereas the SECTION tags area unit used for the headline of the story.

Save your model as a HTML file. reserve it in an exceedingly new folder referred to as layouts. For the file name, kind html.

When you load the page in an exceedingly browser you will see this:


Because we have a tendency to used solely HTML tags the page appearance quite basic.

One last item to try to to before we have a tendency to get to the CSS Add the subsequent ID attributes to your HTML code:


So there area unit 5 ID attributes to feature, highlighted in daring on top of (Incidentally these is category selectors instead of ID selectors if you like. mistreatment ID implies that you'll discuss with them in an exceedingly scripting language like JavaScript, yet as mistreatment CSS.)In succeeding half you will find out how to vogue your HTML five layout.

Web design Tutorials Lesson 5.( Part 3)



The CSS Float Property


 Another way to govern the conventional, static flow of your sites is with the float property. you have got already used this property during a previous section to wrap text around pictures. however you'll be able to additionally use the float property to own columns of text aspect by aspect. you'll be able to even use float to own navigation bars on the left and right of your pages. (We'll use float in our page layouts, that area unit developing shortly.)

As associate degree example of column floating, have a glance at the image below, taken from a browser:


So we've got 2 columns of text side-by-side. the primary one contains a gray background therefore you'll be able to see the column higher. It additionally contains a ten pel margin. Here's the CSS:


And here's the hypertext mark-up language:For the HTML,


 we've simply used the DIV tags for 2 paragraphs of text. the primary paragraph has the CSS category applied thereto.

Notice 2 things concerning the CSS code, though. the primary factor to note is that we've got used float: left. The second factor to note is that we've got set a breadth for the column of two hundred pixels.


 If you do not set a breadth then any text you have got for your column can merely be due left to right.

There is a haul with our approach, however. Have a glance at the columns within the browser once more. though they give the impression of being nicely side-by-side, this is often solely as a result of we tend to manipulated the browser. we tend to deliberately created it smaller in order that the text resized itself. If we tend to create the browser larger, here's what happens:


The text within the second column can stretch from left to right to fill the on the market area.

To stop it doing that, you'll be able to add the category to the second DIV, as well:


Now each paragraphs of text area unit floated left, and have a breadth of two hundred pixels. The browser will currently be resized and also the 2 columns can keep in situ.

To start text on a brand new line beneath the columns, you'll be able to use the clear property in CSS, remember:

.clear

This clears the float price and returns you to the conventional, static flow. (You will replace left with right or each betting on your desires.)In successive lesson, you will see the way to produce a straightforward one column layout.This will introduce you to the new HTML5 components.

Web design Tutorials Lesson 5.( Part 2)

Adding Comments to CSS Code

 When you are experimenting with the CSS, you'll be able to use comments rather than replacement or deleting code for Examine the following:

/* background-color: blue; */
background-image: URL(../images/gradient 1.jog)

The comment symbols ar these:

/* */

The new symbols can flip any code into comments that means the browser can ignore the road. you'll be able to comment out a lot of lines by moving the left or right comment symbols Love this:


An example of CSS comments

In the code higher than,


the last 3 lines are commented out, so that they are unheeded.

Comments ar quite helpful for reminding yourself what a specific rule will For example,


An example of CSS comments other to code Try to add comments where attainable once you come to your code a couple of weeks down the road  it'll create a lot of sense if you've got other comments.



In the next lesson you will learn the way to position things with CSS.

Web design Tutorials Lesson 5.( Part 1)

CSS Positioning - the box model

 In this section you may find out how to get out your sites exploitation CSS positioning Before doing therefore, however it helps to find out regarding one thing known as the CSS Box Model.

The CSS Box Model

An hypertext markup language page is considered a series of boxes stacked one on prime of the opposite. These boxes will hold text in paragraphs images kind objects etc every box is split up into four areas: a margin, a border, some artifact and eventually the content itself:


The margin is clear and goes round the border you cannot set a color for margins It is massive as within the image higher than or set to zero and snuggle right up against the border.

The border goes round the artifact and therefore the content. It will take a color, a size, and a border kind (dotted, solid, etc).

The artifact is that the house between the content and therefore the border. It takes an equivalent color because the background for the complete box.

The content is things like text and pictures - the entire purpose of the box.

All four areas will have their sizes set. within the code below, we've established 2 paragraphs of text:

CSS code for 2 paragraphs lightness in the box model

All we're doing is setting a height and dimension for 2 and therefore the artifact (We've additionally further a color therefore you'll be able to see what it's like within the browser.) Here's the result:


Notice the scale of the margins encompassing the border. the primary margin is thirty pixels on all four sides you'll be able to set you want:

margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 40px;

By simply exploitation margin, though, you are setting the margin for all four sides an equivalent is true for border and padding: you'll be able to set all four right away or simply set individual values by adding prime right bottom or left.

To get the whole size of the box you add up all four parts: margin border padding content for instance within the code higher than we've got a dimension of three hundred pixels for the primary paragraph (the dimension refers to the content area).


The margin is thirty pixels on either side giving a complete margin dimension of sixty pixels The border is one pel on the left and one pel on the correct. The artifact is twenty pixels on the left and twenty pixels on the correct the whole dimension of the complete box is therefore:

Left margin thirty
Right margin thirty
Left border one
Right border one
Left artifact twenty
Right artifact twenty
Content dimension three hundred

Total box dimension = 402 pixels

So though we have a tendency to given a dimension worth of three hundred pixels the dimension of the box round the entire paragraph was truly 402 pixels. you wish involved this in mind once setting values like this particularly after you float components left and right. for instance, if you've got a navigation space floated left then it is a sensible plan to line the dimension worth and every one of the others values: simply bear in mind to feature up all the various sizes once shrewd the general size In the next lesson you may find out how to a add comments to your CSS code.

Web design Tutorials Lesson 4.( Part 7)



Adding captions to images

 Two new parts area unit the HTML5 tags FIGURE and FIG CAPTION. the primary one, FIGURE, is nice for things like pictures and different graphics, whereas FIG CAPTION is employed to inform folks what they're observing As Associate in Nursing example, take a glance at the subsequent code:




A read of royalty cathedral from a street.



Here, we've enclosed the IMG code with 2 FIGURE tags. FIG CAPTION tags area unit then place beneath the image. this is often be} what the higher than code seems like during a browser:


You can have the FIG CAPTION tags higher than the image.



A read of royalty cathedral from a street.




Notice, though, that the FIGURE and FIG CAPTIONS tags aren't getting formatted for you - you have got to try and do that yourself with some CSS:

FIG CAPTION

Because FIGURE and FIG CAPTION area unit new HTML5 tags, older browsers will not apprehend what they're. so that they get rendered on the page as inline tags.


 What this suggests is you will not get Associate in Nursing automatic line break for your figure captions: they'll simply be side-by-side with the pictures. the answer is to use the CSS property show with a worth of block. Like this:



FIGURE, FIG CAPTION

The CSS higher than tells the browser to render FIGURE and FIG CAPTION tags as block-level parts as a result of block level parts area unit stacked one on high of the opposite, your caption can then be within the right place - higher than or below your pictures. (You'll learn additional concerning block-level parts within the CSS positioning chapter later within the course.)

But we'll leave pictures there. within the next section, we'll take a glance at hyperlinks.

Web design Tutorials Lesson 4.( Part 6)



Background Images and Background Positions


You can set your backgrounds to be pictures, if you favor. The CSS property to use is background-image. For the worth, you specify the placement of your image. This goes between spherical brackets and when the word uniform resource locator. The image name is enclosed with quotation mark marks:

BODY

The same rules on image referencing you learned earlier apply here.The higher than code, therefore, references a picture within the same folder because the current online page. 


you may place your background pictures during a folder referred to as backgrounds. The code would then be:



BODY

The default for background pictures is for them to be perennial. for instance, if your background image is one hundred pixels by one hundred pixels this image are going to be derived till the entire of the screen is stuffed. This coating will look awful. The image below shows this:


he background image we have a tendency to used higher than was a two hundred by two hundred gradient. it's OK going from left to right (the X direction) however happening (in the Y direction) the coating appearance terrible!

To give you a lot of management of background coating, the CSS property background-repeat is employed. The property will take four values repeat-x, repeat-y and no-repeat For our gradient higher than, we wish it to solely tile from left to right, within the X direction. therefore we want repeat-x:

BODY

Our background would then appear as if this 


Which is way superior!Background Position

You can specify an edge for background pictures. For that the CSS property background-position is employed. This property takes the subsequent values:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

But you'll be able to additionally use pixels with X and Y values. it is also potential to use a page proportion. As a sensible example, suppose you needed a emblem within the prime right of your page you may fuck like this:

BODY {

background-image: URL ('backgrounds logo brolly.gif');
background-position: prime right;
background-repeat: no-repeat;

}

The impact would be this:


Notice that we've used background-repeat with a price of no-repeat, otherwise we'd get a page filled with brollies!

Here area unit some samples of the opposite values you'll be able to use:

background-position: 300px 100px;

background-position: eightieth 0%;

With the pel values (px) the X direction comes initial followed by the Y direction is an area separates the 2. identical is true of the share values: X direction initial, then Y direction, an area because the setup.

Try them out for yourself. you will find the background pictures within the further files that came with this course, within the extra_files/backgrounds folder. (If you haven't got the additional the transfer location is here, below the heading internet style - New Course : transfer the additional Files required for this course (You do not would like the downloads for the previous course.)



In the next lesson, you will find out about image captions.

Web design Tutorials Lesson 4.( Part 5)



Images and CSS

Before we have a tendency to begin, make certain to repeat our smaller pictures over to your york_images pictures folder, as explained earlier. There ought to be five of those within the files you downloaded for this course: (If you haven't got the additional files nonetheless, the transfer location is here, beneath the heading internet style - New Course : 


transfer the additional Files required for this course (You do not would like the downloads for the recent course.)

york_minster.jpg
york_minster_2.gif
york_minster_3.gif
york_minster_4.gif
york_minster_5.gif

The smaller ones square measure all GIF pictures.

In HTML5, image alignment is finished victimization CSS. However, if you simply wish basic left, right or centre alignment then the DIV tag is kind of helpful. The DIV tag is associate degree general-purpose tag. It's somewhat just like the P tag in this you get a line break once you employ it.

To see the DIV tag in action, amend your markup language code to the present (we've disregarded the DOCTYPE tag at the top):


Here, we're employing a try of DIV tags: . once an area, we've more the attribute ALIGN="right". this may apply to something between the gap and shutting DIV tags. For us, this can be the second of the House of York cathedral GIF pictures.

Save your work and reload the net page in your browser. you ought to see this:


The different 2 horizontal values for the ALIGN attribute square measure left and center (American spelling). strive them out by deleting "right" and replacement it with 1st  then . Save your work and see what the results square measure in your browser. (If you simply wish left alignment then you do not would like the DIV tags in the least, as a result of left is that the default alignment.)

The ALIGN attribute may also be used with the P tag:


 Again, this may apply to something between the 2 tags, together with tex

Now add some text on top of and below the 2 DIV tags:When you save your work and look at the results, you ought to see this with a left aligned image:


Notice that the DIV tags has place some house on top of and below itself: you do not ought to add a P tag for the text. however you'll if you wish - it is often smart apply to own your text between P tags.In the next lesson, you will see the way to wrap text around a picture with CSS.




Web design Tutorials Lesson 4.( Part 4)



Image Attributes

When you use IMG you're employing a hypertext mark-up language tag. The SRC half is termed Associate in Nursing attribute. There square measure immeasurable different attributes you'll be able to boost the IMG tag. Here square measure the image attributes in hypertext mark-up language 5:

ALT
SRC
HEIGHT
WIDTH
USEMAP
ISMAP

In previous versions of hypertext mark-up language, you furthermore may had these:

ALIGN
BORDER
HSPACE
VSPACE

However, these have currently been deprecated. you'll be able to still use them though that, however the hypertext mark-up language five method is to use these with CSS. you will see the way to do this shortly.


The elevation Attribute

The first attribute is elevation. you employ it like this:



ALT means that "alternative text". If the image doesn't show then users can see the text between the quote of elevation. Try it out. modification your hypertext mark-up language code to this:



Here, we've modified the name of the image. currently save your work and refresh your page within the browser you ought to see this (Internet human) Internet Explorer 


has intercalary the elevation text when the red X.

You should continuously add some elevation text to your IMG tags because it is useful to blind and part quick-sighted users: the elevation text are scan out elevation text is additionally helpful for search engines, particularly Google's image search.


Height and breadth Attributes

Another issue you'll be able to do with the Image tag is specify a replacement height and breadth. This one is sort of simple. modification your image tag to the current (we've left the elevation tag off):



The original image was 2048 pixels high by 1536 pixels wide. By ever-changing the peak and breadth, we are able to decrease the scale of the image. The image itself can still take a similar quantity of your time to load into a browser as a result of we've not modified the scale of the JPEG file. All we've done is to vary the peak and breadth attributes of the IMG tag.

This, however, wouldn't be sensible on the web, as a result of the scale of the JPEG file would not modification. All you may do is assign a lot of transfer time to induce a smaller image. thus once ever-changing image size with the peak and breadth attributes, go up in size and not down, as we've got done here. If your pictures square measure too massive, use image redaction code to scale back the peak and breadth.

The USEMAP Attribute

The USEMAP attribute is employed to show specific areas of a picture into clickable links. Take the image below, for instance. we do not wish the total of the image to be a link, simply the colored shapes.


If you hold your mouse over the gray areas then nothing happens - your mouse pointer will not modification. Hold your mouse over a form however and also the mouse pointer changes to point that it is a link. this can be all through with the USEMAP attribute The hypertext mark-up language code with a USEMAP attribute appears like this:



After the attribute USEMAP comes Associate in Nursing equal sign, then the name of your map, preceded by a hash/pound image. The name of the map are often something you prefer.

Once you've got a map name, you wish a map to travel with it Take a glance at this code, that  the map for our shapes image above:So you've got 2 MAP tags a begin associated an finish one of the primary MAP tag takes a reputation attribute. this is often the USEMAP name from your IMG code. In between the 2 MAP tags you would like a minimum of one space tag. the realm tag takes attributes of its own form COORDS, and HREF. The shapes you'll be able to have area unit RECT (short for rectangle), CIRCLE, and POLY (short for polygon). 


every form wants some coordinates For any rectangular space of your image you would like the coordinates of the highest left corner in pixels. Ours was thirty seven and twenty five. this implies thirty seven pixels from the left fringe of the image itself (the X direction), and twenty five pixels down from the highest of your image (the Y direction). the lowest right of our parallelogram was 137 pixels within the X direction and seventy two within the Y direction.

For a circle, you would like the X and Y values for the centre of your circle You live from the left of the total image not the left fringe of the circle For the Y direction, you live from the highest of your image The third coordinate you would like for a circle is that the radius (half the diameter).

For a polygonal shape, you would like X and Y coordinates for every purpose. Our polygonal shape could be a triangle therefore has associate X and Y worth for every of the 3 points.

The HREF attribute is that the online page a traveller is taken to once a region on the map is clicked. We've written a # image. this implies "don't go anyplace - be a similar page".



In the next section, you'll find out how to govern pictures with CSS.

Web design Tutorials Lesson 4.( Part 3)



More on Inserting Images

In the previous section, you study relative file referencing during this section we'll continue the lesson with some sensible work.



Navigate to wherever on your drive you saved your HTML pages. For us, this was a folder known as HTML inside the HTML folder  produce 2 additional. decision one in every of the folders pictures and therefore the alternative pages. If you are employing a Windows pc your someone window can then seem like this (Windows 7):


Double click your guide document and add the subsequent HTML image code:


Click File > Save As and save your guide as a HTML file. however reserve it in your new pages folder, and decision it pictures.HTML. remember to vary the Save as sort box to all or any Files if you are victimization Windows:




 Once you've got saved your guide as a HTML website, double click it to open it up in your browser. you ought to see this, if you're victimization Firefox::




If you're victimization net someone, however, you ought to see this:


In each cases, the image has not displayed. Firefox displays a broken file icon, and net someone displays a red X icon. the rationale is that the browser cannot realize the file thus if you see either of these icons in future, simply keep in mind that the browser is telling you "Image File Not Found".

To solve this drawback, we've some files for you. The file you wish is within the extra_files folder that came with this:




course. (If you haven't got the additional files nonetheless, the transfer location is here, below the heading internet style - New Course : transfer the additional Files required for this course (You do not want the downloads for the previous course.)

Double click the extra_files folder, then double click it into your HTML/pages folder. Your pages folder can then seem like this:The image and therefore the website square measure within image we'd wish to appear


 into this.

Once you've got derived. you ought to see the image appear:

If you do not see a picture, however still have the "Image File:

SRC="york_minster.jpg"

Note the minuscule orthography, and therefore the 2 double quote marks. a typical error is to spell SRC as SCR. Make sure, too, that the image and therefore the website square measure within the same folder.

Once you get the image displayed within the browser, produce another folder within the pages folder. decision this one york_images. Your someone window ought to then seem like this:


Now move someone window can then seem like this:


Reload your website in your browser. you ought to see the "Image Not Found" icon once more.

Go back to your HTML code and alter the IMG line to this:



So we've accessorize within the same directory because the HTML page. once the forward slash, we've the image name. What we're language here is, "In constant folder because the pictures.HTML page, explore for a folder known as york_images.

Save your work and reload the photographs.HTML website in your browser. you ought to see the image re-emerge.Advanced file referencing

Previously, you created Associate in Nursing pictures folder and a pages folder. This:For neatness sake, this is often an honest idea: you'll be able to have most of your HTML pages within the pages folder, and every one your photos within the pictures folder. 


(We say most of your HTML pages as a result of there's Associate in Nursing exception known as the index.HTML page. you may study this a little later.)

One issue concerning this approach is that file referencing becomes lots more durable. Suppose we have a tendency to affected the york_images folder inside the photographs folder. If we did, the code we have a tendency to wrote before would now not work. This line:



That's as a result of there would now not be a folder known as york_images within the same location because the pictures.HTML file. The image is currently one folder up from the pages folder. The code would thus be this:



After SRC we have a tendency to currently have 2 dots and a forward slash. 2 dots and a forward slash mean "go up one folder from the photographs.HTML page, wherever the code is.) The browser can then explore for a folder known as pictures. it'll search this folder for one known as york_images. Then it'll explore for the image such.

Don't worry if all that's not too clear: we'll keep pictures and image folders along, only for simplicity's sake. however if you are still unsure concerning file referencing, we've made a video for you here: File Referencing Video.



In the next lesson, you may study Image Attributes.

Web design Tutorials Lesson 4.( Part 2)


Inserting images into a web page

 So you have got your image file, either a GIF file or a JPEG. however does one twig into an internet page you are doing therefore with the IMG tag in hypertext markup language. the fundamental IMG tag appears like this:



There are not any closing tags for the IMG tag. therefore you do not do this:



In between a try of angle brackets, you kind the letters IMG (short for image, of course). once an area, you kind SRC. This stands for supply and means that the placement of your image. once AN sign, you kind the name of your image between a try of quotation mark.

It's essential that you just get the SRC half right, though. To do that, you wish to grasp regarding Absolute versus Relative file referencing.


Absolute Referencing

Take a glance at this file reference:

C:\Users\Owner\Documents\HTML\some_image.gif

Starting from the right-hand facet, this says that there's a picture referred to as some_image.gif. This has been saved into a folder referred to as hypertext markup language. The hypertext markup language folder is within the Documents folder. The Documents folder is in an exceedingly folder referred to as Owner. The Owner folder is in an exceedingly folder referred to as Users, that is on the C drive.this is often AN Absolute file reference. It points to a particular location on your C drive.

This would be no sensible on the web, however. though you'll have of these folders on your C drive, someone else viewing your online page will not. however that person's browser can attempt to hunt for of these folders. after all it will not be able to realize them, as a result of all the folders area unit on your pc and not theirs that the image you such as to use in your online page will not be showed anybody else however you.

Another example of AN Absolute References is this:

http://www.homeandlearn.co.uk

That's AN absolute regard to an internet page on the web. utterly OK, and you will see a way to add links to sites later however Absolute References and not really sensible once it involves you own pictures and your own hypertext markup language pages.


Relative References area unit far better.Relative Referencing

With Relative Referencing, the start line isn't your own PC, however the image file or hypertext markup language file itself With Absolute Referencing, the browser starts the seek for the image on the mitt side:

Example of AN absolute file reference

With Relative Referencing, the browser starts the seek for the image on the correct hand side:

Example of AN relative file reference

So with a Relative reference, the browser starts yearning for a file referred to as "some_image.gif," If you simply place this:



the browser can hunt for the get into identical folder wherever you saved your online page. If it's there, no problem; the browser can show the image. you do not ought to add the rest, as a result of the browser can stop looking out once the image has been found. In fact, the sole place the browser can look is within the same folder wherever you saved your online page.

So with Relative Referencing, if you place all of your pictures and sites within the same folder, the browser can recognize wherever to seek out everything And once you are asking the browser to show a picture or another online page you merely want the name of the image or online page. you do not ought to do this:



You can simply do this:



On an expert level, though, merchandising everything into one folder is frowned upon. If you created a folder referred to as "web_site" you'd be expected to make different folders within this one. A folder referred to as "images" to store all of your image files; a folder referred to as "scripts" to store any external code; and a number of different folders similarly.

If you are doing that, Relative Referencing gets a little bit trickier. for instance, suppose you have got an internet page referred to as index.HTML. you've got place this online page inside a folder referred to as data processor. you've got created another folder inside your data processor folder. you've got referred to as this new folder pictures. therefore your file and folder structure appears like this


 Of course, you'll have placed all of your pictures within the pictures folder. Now, if you would like one among those pictures on the index.HTML page, you could not do this:



If you tried that, the image would not show. that is as a result of you haven't told the browser this folder referred to as pictures. you'd need to do this:



The forward slash means that "look for a folder referred to as that's within the same folder because the current file" during this case, hunt for a folder referred to as "images". (The current file is index.HTML, that is wherever you would like the image to seem.)

If you wished to purpose to a picture that was outside the "web_site" folder, then life simply got even trickier still. (You'll see a way to solve this later). however as a beginner, if you retain everything within the same folder - pictures and sites - then this type of relative referencing ought to work:



In case all this file referencing isn't too clear we'll do some sensible add subsequent section.

Web design Tutorials Lesson 4.( Part 1)

Image Types

 You bear in mind at the start of this course we've an inclination to talked regarding file extensions, and you learn what the .HTML file extension was? you're presently going to study a pair of new file extensions: JPEG and GIG.

Just like web page and word technique documents have file extensions, so too do footage have file extensions. There unit an honest vary of file extensions used for footage the two most well likeable file extensions used on web page unit JPEG and GIG. (PING is another modish image format. It's like GIG, so we have a tendency to cannot discuss it.)


GIG Images

GIG stands for Graphics Interchange Format, and was developed by CompuServe It uses one issue observed as a LOW compression algorithm to reduce the size of the file. the size of your footage on web page could also be a vital issue for people victimization slower connections. If you have got got an image that is one MB in size, which i only have a a try of unit of activity affiliation speed then it's going to take regarding four seconds to load the image on the page. which is able to not seem a long time, but if my speed drops to 5 hundred kilobits per second then it will take sixteen seconds to appear. I'm not planning to attend that long for your image to load!

So pressure the size of an image is sensible on the net. If you've taken a photograph then saved it to your pic note of the file extension used. The software package package you utilize to seem at the image will presumably give you the prospect countless|to avoid wasting} lots of the get in another format. Saving the file as a GIG image will greatly reduce the size of the file.

There is a down facet but in ever-changing to a GIG. the quantity colors|of colors} in your image is capped at 256 colors. For realistic photos, this is {often|this can be} often not nearly enough. And although your file size is greatly reduced so too could also be the quality of your image.


JPEG

JPEG is that the various modish image format used on web page. It stands for Joint Photographic specialists cluster, and permits you to possess footage with quite 256 colors.


In fact, millions further. Again, your original image is compressed once you change to a JPEG image, so some loss of quality is inevitable. If you'd prefer to indicate off your photos in their best light-weight, ever-changing to JPEG rather than GIG is that the most effective alternative for the net. the size of the file could also be slightly higher on the opposite hand so will the quality.

The balk to JPEG footage is that JPEG could also be a Loss Compression format. this suggests that image quality goes down (rapidly) the extra times you compress and uncompressed the image. This happens once you save the file over and every one yet again. GIG on the alternative hand could also be a Loss less Compression format which means they're going to be no loss of quality once you compress and uncompressed the image.

Another issue you can not do with JPEG footage is have a transparent background, so if your image was this:


and you required to urge obviate that black background, you'll set the black color as a transparent color, if you save as a GIG. With a JPEG, you're crust the black background. (You could animate GIG footage, that you just cannot do with JPEG footage.)

In general, if your image may be a smaller quantity than 256 colors, then save the image as a GIG; if the image is kind of 256 colors, and quality is extremely necessary, then save the image as a JPEG. (Modern digital cameras and mobile phones generally save your footage inside the JPEG format.)

Web design Tutorials Lesson 3.( Part 9)

Font Style, Font Weight, Font Variant

Font-Style

There area unit solely 3 font designs to settle on from: traditional, italic, and oblique. Of course, the default is traditional, therefore you do not ought to use font-style unless you would like italic or oblique text. you utilize them like this:

Example of CUSS font-style

There's not a good deal of distinction between italic and oblique, though. If you would like to envision the distinction use a sans-serif font, with an oversize font size.


Font-Variant

Font-Variant is employed once you need tiny caps for text:

Example of CUSS font-variant

And here's what it's like during a browser:


 Font-Weight

The weight of a font is however thick it's. There area unit countless values you'll use here the foremost common one is daring however you'll even have Bolder and Lighter similarly because the named weight you'll conjointly use variety from a hundred to 900. It's higher to stay with spherical numbers though because the distinction between a hundred and one hundred fifty is much not possible to envision. Here's the way to use font-weight:

Example of CUSS font-weight

Add a second paragraph of text between your BODY tags and take a look at it out:


Here, we've set all paragraph tags to own daring text.


Then we've additional a category Selector referred to as Change_Font_Weight, that we've set to lighter. We've then used this category on the second paragraph.

Save your work and refresh your browser to envision what impact it's.


Exercise
Try a number of the amount font weights to envision however they work. however completely different is a hundred from 900?



We'll take an opening from CUSS, now, however return to that later. within the next section, you may learn the way to insert pictures into an internet page.

Web design Tutorials Lesson 3.( Part 8)


Font Size with CSS

 There square measure lots of ways that to vary the font size with CCS.

You can amendment the dimensions of your page fonts with the font-size property. The values for the property, however, will be to a small degree difficult. Take a glance at these values for font-size:

font-size: 200%;
font-size: 32px;
font-size: 2em;
font-size: xx-large;

They are truly an equivalent size! strive them get in your code. Add the subsequent highlighted CUSS Style:



Save your changes and refresh the page in your browser. you must see the paragraph of text amendment size.

Now strive the opposite 3 sizes: two hundredth, 32px, and 2em. you must notice that they're all an equivalent size (or close to enough).

Which one you utilize is up to you. In older browsers, however, mistreatment the fastened sizes values of post exchange and em suggests that your users might not be ready to increase the dimensions of your fonts. This matters to those whose sight might not be good, and so want a much bigger font once reading your text. however browsers permit you to center and out by holding down the CTR L key and pressing + or -. (You reset by pressing CTR L then zero.) thus font-size values don't seem to be that necessary. lots of pros, though, can set the BODY tag's font-size to 100 percent, then use em because the price. Like this:

Style sheet showing example of multiple font sizes

This means that every one the font sizes between the 2 BODY tags square measure set to the browser's default size of 100 percent. In pixels, the default size in browsers is 16px. this can be up to 1em. The P tag higher than is setting the font-size to at least one and 0.5 times the default, whereas the category Channelization is setting the font-size to 2 times the default.

The other sizes square measure rarely used. however here they are:

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger

Try them out and see what happens.



In the next half, you may study styling fonts.

Web design Tutorials Lesson 3.( Part 7)

Font Colors

 We've created a video to travel with this lesson. It's recommended that you simply} just scan the text below equally, although That The video is here:

Web Color Values

There unit of measurement quite ton of various font styles you will be able to use in your CUSS. We'll begin with font colors. (Strictly speaking, though, COLOR is not a font vogue - it'll be used regarding anywhere to color varied numerous things.):

You can have regarding any font color you'd like for your text (British English users, note the missing "u" once the second "o". the yank writing system is used in markup language and CUSS). To specify a color, you will be able to use one in each of three formats:

    The name of a color spelled out
    The name of a color as a system of numeration price
    The name of a color as a RGB price

There is a rather long and exotic list of color names you will be able to use, things like beginner Blue, Ghost White, Lemon Chiffon. but you will be able to put together use a simple color name like red or blue. The CUSS code is this:

H1 someone New, Courier, Mono;
color: red;

}

So you kind the word "color" followed by a colon. You then kind the name of your color.There unit of measurement seventeen common colors, and 100 thirty not thus common.
 The common colors you will be able to use are: atomic number 27 blue, black, blue, gray, green, lime, maroon, navy, olive, red, teal, white and yellow.

For a full list of all the color names you will be able to use, see this Wikipedia page:

Wikipedia - web colors
Hexadecimal values

Hexadecimal values unit of measurement used quite ton in web vogue If you have got never detected of them before they use the number zero to 9, and so the letters A to F (Base 16). In Base 16, the letters unit of measurement used instead of the numbers 10, 11, 12, 13, 14 and 15. So A = 10, B=11, C=12, etc. If you'd wish to represent the number 256 in system of numeration then it's FF.

Three color values unit of measurement used, one for Red,


 one for inexperienced, and one for Blue. each color price has two system of numeration place-holders. as an example, here's the color Red:

#FF0000

Here's the color Green:

#00FF00

And here's the color Blue:

#0000FF

So red has two letter F's inside the Red position, two zeros inside the inexperienced position, and a couple of zeros inside the blue position. in several words, switch the red price full on, and switch the inexperienced and blue values off.

Green has two zeros, two F's, then two zeros all over again. Blue has four zeros then two F's.

Black merely has half-dozen zeros, which suggests switch Red, inexperienced and Blue off.

Note that you simply} just need to use the hash/pound image ( # ) before the six place-holder values.

You can combine the system of numeration selection and letter values:

#2F0B99

Try them out for yourself in your code:

H1 someone New, Courier, Mono;
color: #2F0B99;

}



Exercise
Change the values inside the six positions, exploitation the numbers zero to 9, and so the letters A to F. What unit of measurement the following colors?

color: #1BAA12;

color: #1087AC;

color: #451DE2;


RGB values

You can use RGB values in your CSS, if you wish. (RGB stands for Red, Green, Blue.) Again, place-holders unit of measurement used for the assorted color values. This time, you use the number zero to 255. you use them like this:

color: RGB(255, 0, 0);

Note that the number unit of measurement typed between a attempt of spherical brackets, and unit of measurement separated by comas.



Exercise
Play around with the RGB values. What unit of measurement the following colors?

color: RGB(0, 255, 0);

color: RGB(125, 125, 0);

color: RGB(255, 255, 10);


Instead of experimenting to urge the color you'd sort of a straightforward because of get the right system of numeration or RGB color is to kind the words "color picker" into a groundwork engine like Google. you will then have several websites that give you're the right values to kind simply by kidding with color sliders.
In the next lesson, you will study font sizes.