Lesson 1: Getting Familiar with Microsoft Word 2007 for Windows
Microsoft Word is a word processing software package. You can use it to type letters, reports, and other documents. This tutorial teaches Microsoft Word 2007 basics. Although this tutorial was created for the computer novice, because Microsoft Word 2007 is so different from previous versions of Microsoft Word, even experienced users may find it useful.
This lesson will introduce you to the Word window. You use this window to interact with Word. To begin this lesson, open Microsoft Word 2007. The Microsoft Word window appears and your screen looks similar to the one shown here.
Note: Your screen will probably not look exactly like the screen shown. In Word 2007, how a window displays depends on the size of your window, the size of your monitor, and the resolution to which your monitor is set. Resolution determines how much information your computer monitor can display. If you use a low resolution, less information fits on your screen, but the size of your text and images are larger. If you use a high resolution, more information fits on your screen, but the size of the text and images are smaller. Also, Word 2007, Windows Vista, and Windows XP have settings that allow you to change the color and style of your windows.
The Microsoft Office Button
In the upper-left corner of the Word 2007 window is the Microsoft Office button. When you click the button, a menu appears. You can use the menu to create a new file, open an existing file, save a file, and perform many other tasks.
The Quick Access Toolbar
Next to the Microsoft Office button is the Quick Access toolbar. The Quick Access toolbar provides you with access to commands you frequently use. By default Save, Undo, and Redo appear on the Quick Access toolbar. You can use Save to save your file, Undo to rollback an action you have taken, and Redo to reapply an action you have rolled back.
The Title Bar
Next to the Quick Access toolbar is the Title bar. The Title bar displays the title of the document on which you are currently working. Word names the first new document you open Document1. As you open additional new documents, Word names them sequentially. When you save your document, you assign the document a new name.
The Ribbon
You use commands to tell Microsoft Word what to do. In Microsoft Word 2007, you use the Ribbon to issue commands. The Ribbon is located near the top of the screen, below the Quick Access toolbar. At the top of the Ribbon are several tabs; clicking a tab displays several related command groups. Within each group are related command buttons. You click buttons to issue commands or to access menus and dialog boxes. You may also find a dialog box launcher in the bottom-right corner of a group. Clicking the dialog box launcher gives you access to additional commands via a dialog box.
The Text Area
Just below the ruler is a large area called the text area. You type your document in the text area. The blinking vertical line in the upper-left corner of the text area is the cursor. It marks the insertion point. As you type, your text displays at the cursor location. The horizontal line next to the cursor marks the end of the document.
The Vertical and Horizontal and Vertical Scroll Bars
The vertical and horizontal scroll bars enable you to move up, down, and across your window simply by dragging the icon located on the scroll bar. The vertical scroll bar is located along the right side of the screen. The horizontal scroll bar is located just above the status bar. To move up and down your document, click and drag the vertical scroll bar up and down. To move back and forth across your document, click and drag the horizontal scroll bar back and forth. You won't see a horizontal scroll bar if the width of your document fits on your screen.
The Status Bar
The Status bar appears at the very bottom of your window and provides such information as the current page and the number of words in your document. You can change what displays on the Status bar by right-clicking on the Status bar and selecting the options you want from the Customize Status Bar menu. You click a menu item to select it. You click it again to deselect it. A check mark next to an item means it is selected.
Understanding Document Views
In Word 2007, you can display your document in one of five views: Draft, Web Layout, Print Layout, Full Screen Reading, or Online Layout.
Draft View
Draft view is the most frequently used view. You use Draft view to quickly edit your document.
Web Layout
Web Layout view enables you to see your document as it would appear in a browser such as Internet Explorer.
Print Layout
The Print Layout view shows the document as it will look when it is printed.
Reading Layout
Reading Layout view formats your screen to make reading your document more comfortable.
Outline View
Outline view displays the document in outline form. You can display headings without the text. If you move a heading, the accompanying text moves with it.
You should use Draft view for these lessons. Before moving
Click
During the lessons that follow, you will be asked to "click" items and to choose tabs. When asked to click:
Point to the item.
Press your left mouse button once.
If you are asked to double-click an item:
Point to the item.
Quickly press your left mouse button twice.
If you are asked to right-click:
Point to the item.
Press your right mouse button.
If you are asked to choose a tab, click the tab.
Create Sample Data and Select Text
If you type =rand() in your Word document and then press Enter, Word creates three paragraphs. You can use these paragraphs to practice what you learn. Throughout these lessons, you will be asked to select text. The following exercise teaches you how to create data and how to select data. You can select by using the arrow keys or by clicking and dragging. When using the arrow keys, use the up arrow to move up, the down arrow to move down, the left arrow to move left, and the right arrow to move right. When using the mouse, press the left mouse button and then drag in the direction you want to move.
EXERCISE 1
Create Sample Data
Type =rand().
Press Enter. Three paragraphs appear in your document.
Select with the Shift and Arrow Keys
Place your cursor before the word "On" in the first paragraph.
Press and hold down the Shift key, which serves as an "anchor" showing where text you wish to select begins or ends.
Press the right arrow key until the first line of text is highlighted.
Press the down arrow key until the first paragraph is highlighted.
Click anywhere outside the highlighted area to remove the highlighting.
Select with the Mouse
Place your cursor before the word "You" in the second paragraph.
Press and hold down the left mouse button.
Drag the mouse until you have highlighted the second paragraph.
Click anywhere outside the highlighted area to remove the highlighting.
Place the Cursor
During the lessons, you will often be asked to place the cursor at a specific location (the insertion point) on the screen. You place the cursor by moving the cursor to the specified location and pressing the left mouse button or by using the arrow keys to move to the specified location.
EXERCISE 2
The Arrow Keys
Use the down arrow key to move down your document.
Use the right arrow key to move to the right.
Use the up arrow key to move up.
Use the left arrow key to move to the left.
Cursor
Move around you document by using you mouse and clicking in a variety of location.
Click in a location and type. Note what happens.
Execute Commands with Keyboard Shortcuts
There are many methods you can use to accomplish tasks when using Word. Generally, you choose an option by clicking the option on the Ribbon. However, you can also use shortcut keys. A key name followed by a plus and a letter means to hold down the key while pressing the letter. For example, Ctrl+b means you should hold down the Ctrl key while pressing "b." A shorthand notation of the above would read as follows:
Press Ctrl+b
Typists who are slowed down by using a mouse usually prefer using keys.
Start a New Paragraph
When you type in Microsoft Word, you do not need to press a key to move to a new line. To start a new paragraph, press the Enter key.
Exit Word
You have completed Lesson One. Typically, you save your work before exiting.
EXERCISE 3
Close and Save—Windows Vista
Close and Save—Windows XP
Click the Microsoft Office button. A menu appears.
Click Exit Word, which is in the bottom-right corner.
You will be prompted: "Do you want to save changes to Document1?" To save your changes, click Yes. Otherwise, click No. If you click Yes, the Save As dialog box appears.
Specify the correct folder in the Save In box.
Name your file by typing Lesson One.doc in the File Name field.
Click Save. Word saves your file.
miercuri, 23 iulie 2008
Image Pipes Tutorial
Intention
GIMP 1.2 introduced a lot of new features that have been further improved in version 2.0, including the ability to use full color "pixmap brushes". In addition, you can also combine single frame pixmap brushes into a "image pipe". A GIMP Image Pipe allows you to spray out series of full color pixmaps. To make it more flexible, the order the images are painted onto the canvas can depend on direction, angle, speed, or other factors.
This effect can be used in many ways, from a simple way to paint repeated images, or as sophisticated texture generation. The flexibilty in the way images are sequenced and composited to the canvas on the image can make creating a image pipe to do what you want seem difficult. However, for almost all common image pipes it is easy to set them up.
Taking a set of images and making a image pipe out of them is a common configuration. The easiest way to do this is to create each indivual image as a separate layer in an image, much like you would if you were going to save an animated image. And in fact this is often a convient way to think of image pipe creation. As designing an animation of which snapshots are going to be composited to the canvas. Let's start with a simple example image, an 8 layer image. In this case, with the numbers 1-8 on each layer. This will help to make it more obvious what the various "ranks" do.
GIMP versions older than 2.0 could not reload gih files (GIMP image pipes), so I include the source xcf images here. The example image.
To start creating a image pipe, you will need to save the file in the ".gih" extension. To use the brush immediately, you probabaly want to save it in the brushes/ subdir of your GIMP directory (probabaly ~/.gimp-2.4). To save the image you will be presented with a save dialog for the GIH plugin. (Image above)
For a simple image like this, the only values you usually need to change are "Spacing", The "Number of Cells", the number of "Ranks", and the "selection" for each rank. Spacing is pretty much the same as for regular brushes. It indicates what percentage of a brush width or height that the cursor moves between each time the shape is pasted.
Ranks indicates how many levels of variation to use by the Selection values. For this image, the value of ranks should be equal to the number of images in the stack. Since it is possible to have multi-dimensional pipes, there needs to be a way to set more than one rank.
For this example, we are going to choose to select from the rank using method "incremental". This essentially means that the images will be selected in the order they are in the layer stack.
Other options include:
Random: selects the images in a random order.
Angular: selects the images based on the angle the brush is moving at.
Velocity: selects the images based on the velocity the brush is moving at.
Pressure: selects the images based on the pressure of the brush (requires a pressure sensitive tablet)
xtilt: selects the images based on the xtilt (also requires a tablet)
ytilt: selects the images based on the ytilt (also requires a tablet)
After saving the image, you can "refresh" the brush list and then select the new image. For an example of what this can do, tale a look at the example image above (also making use of the fun gradient brushes).
Example 2
Tater Tots!
This pipe is a good example of making a image pipe out of a series of images. Each layer has a a bit of an image cut out and placed on a transparent background. Any areas that are transparent in the image will be transparent in the brush as well.
To add a bit more of a "3D" effect, a slight drop shadow was added to each layer in the image. Save this image as gih with the parameters as indicated in the following screenshot.
An example of a two dimensional pipe
A interesting use for image pipes would be to simulate a natural media saturation. For example, maybe a brush that has ten different versions that correlate to tablet pressure.
For this example, I'll use a somewhat contrived example for simplicity sake. It will use the "angular" parameter in for per layer dimension, and a "random" parameter to select which of the multiple images to use. I use this in a couple of brushes to "humanize" the output. Instead of having the same image stamped out over and over, it varies a little randomly.
There are lots of "Image Tubes" created with and for Paint Shop Pro available on the internet. GIMP can load these files and save them as GIMP image pipes.
Unfortunately, unless you really like pictures of teddy bears, puppy dogs, and unicorns, finding good PSP Tubes isnt so easy. There is a .tub loader plugin in GIMP that you can use to load .tub files you find on the net. Then you can turn around and save these files as a .gih file.
We are going to start with a .tub file available from Hood's PSP Tubes, in this case the Fireball example. Hood's site is not available anymore but you may be able to find "HFireball.zip" or "H Fireball.tub" on several sites distributing PSP Tubes.
The file needs to be loaded as a regular image, then saved as a gih image. Sometimes you may need to make some best guesses as to the save parameters. An example of what the image window will look like after initially loading the .tub file is shown above.
GIMP 1.2 introduced a lot of new features that have been further improved in version 2.0, including the ability to use full color "pixmap brushes". In addition, you can also combine single frame pixmap brushes into a "image pipe". A GIMP Image Pipe allows you to spray out series of full color pixmaps. To make it more flexible, the order the images are painted onto the canvas can depend on direction, angle, speed, or other factors.
This effect can be used in many ways, from a simple way to paint repeated images, or as sophisticated texture generation. The flexibilty in the way images are sequenced and composited to the canvas on the image can make creating a image pipe to do what you want seem difficult. However, for almost all common image pipes it is easy to set them up.
Taking a set of images and making a image pipe out of them is a common configuration. The easiest way to do this is to create each indivual image as a separate layer in an image, much like you would if you were going to save an animated image. And in fact this is often a convient way to think of image pipe creation. As designing an animation of which snapshots are going to be composited to the canvas. Let's start with a simple example image, an 8 layer image. In this case, with the numbers 1-8 on each layer. This will help to make it more obvious what the various "ranks" do.
GIMP versions older than 2.0 could not reload gih files (GIMP image pipes), so I include the source xcf images here. The example image.
To start creating a image pipe, you will need to save the file in the ".gih" extension. To use the brush immediately, you probabaly want to save it in the brushes/ subdir of your GIMP directory (probabaly ~/.gimp-2.4). To save the image you will be presented with a save dialog for the GIH plugin. (Image above)
For a simple image like this, the only values you usually need to change are "Spacing", The "Number of Cells", the number of "Ranks", and the "selection" for each rank. Spacing is pretty much the same as for regular brushes. It indicates what percentage of a brush width or height that the cursor moves between each time the shape is pasted.
Ranks indicates how many levels of variation to use by the Selection values. For this image, the value of ranks should be equal to the number of images in the stack. Since it is possible to have multi-dimensional pipes, there needs to be a way to set more than one rank.
For this example, we are going to choose to select from the rank using method "incremental". This essentially means that the images will be selected in the order they are in the layer stack.
Other options include:
Random: selects the images in a random order.
Angular: selects the images based on the angle the brush is moving at.
Velocity: selects the images based on the velocity the brush is moving at.
Pressure: selects the images based on the pressure of the brush (requires a pressure sensitive tablet)
xtilt: selects the images based on the xtilt (also requires a tablet)
ytilt: selects the images based on the ytilt (also requires a tablet)
After saving the image, you can "refresh" the brush list and then select the new image. For an example of what this can do, tale a look at the example image above (also making use of the fun gradient brushes).
Example 2
Tater Tots!
This pipe is a good example of making a image pipe out of a series of images. Each layer has a a bit of an image cut out and placed on a transparent background. Any areas that are transparent in the image will be transparent in the brush as well.
To add a bit more of a "3D" effect, a slight drop shadow was added to each layer in the image. Save this image as gih with the parameters as indicated in the following screenshot.
An example of a two dimensional pipe
A interesting use for image pipes would be to simulate a natural media saturation. For example, maybe a brush that has ten different versions that correlate to tablet pressure.
For this example, I'll use a somewhat contrived example for simplicity sake. It will use the "angular" parameter in for per layer dimension, and a "random" parameter to select which of the multiple images to use. I use this in a couple of brushes to "humanize" the output. Instead of having the same image stamped out over and over, it varies a little randomly.
There are lots of "Image Tubes" created with and for Paint Shop Pro available on the internet. GIMP can load these files and save them as GIMP image pipes.
Unfortunately, unless you really like pictures of teddy bears, puppy dogs, and unicorns, finding good PSP Tubes isnt so easy. There is a .tub loader plugin in GIMP that you can use to load .tub files you find on the net. Then you can turn around and save these files as a .gih file.
We are going to start with a .tub file available from Hood's PSP Tubes, in this case the Fireball example. Hood's site is not available anymore but you may be able to find "HFireball.zip" or "H Fireball.tub" on several sites distributing PSP Tubes.
The file needs to be loaded as a regular image, then saved as a gih image. Sometimes you may need to make some best guesses as to the save parameters. An example of what the image window will look like after initially loading the .tub file is shown above.
Html charset tutorial
If you view the HTML source code of a web page, you may see the following bit of text (or something very similar), located somewhere between the and tags:
A tag that starts with
In this tutorial, we are focusing on the meta tag shown earlier (the one that begins with
This tutorial will attempt to give you an understanding about what this all means, and why it's important you include it in the HTML code of your web page.
If you don't correctly use this charset stuff in your HTML code, then there is a good chance that the words, numbers or symbols used on your webpage could look different, or even change, when different people are viewing your website. This is especially true for visitors to a web page who are in different parts of the world. For example, a sentence you've written as "That's cool!" could change in to "That?s coolA'" when someone is looking at it in their web browser. You may have seen similar things like this happen when someone sends you an email from another country. You may have seen it happen when you copy and paste text from one place to another. Something's obviously going wrong, somewhere, for this to happen.
To understand why this happens, and to make sure it doesn't happen to your web page, you first need to understand how computers store information.
And to make it easier to understand exactly how computers store information, I'll give an example.
Let's say that Mark wants to write a message, on a piece of paper, to Larry. However, Mark is only allowed to write the numbers 1 and 0 in his message. Mark can not use any letters of the alphabet, any numbers other than 1 or 0, or any other symbols. Could Mark still write a meaningful message to Larry?
Yes, he could. Mark could create a type of "code" that converts the 1s and 0s in to meaningful letters and symbols. For example, Mark could come up with a list of all the letters and symbols he might like to use in his message, and assign all of these "characters" to a sequence of 1s and 0s. A sample of this list might be:
H = 00100001
E = 11000110
L = 01001100
O = 11100010
! = 10011110
Using this code, Mark could write "Hello!" to Larry by writing down 1s and 0s in the following way:
00100001 = h
11000110 = e
01001100 = l
01001100 = l
11100010 = o
10011110 = !
What Mark has done here is "encoded" his message using his special list of characters and codes. His list contains a set of characters (in this case, all the letters of the english alphabet, plus the exclamation mark), and each character has been assigned a "code" (a string of 1s and 0s). Mark could give his list of characters and codes a name: "Mark's super character list". In technical terms, "Mark's super character list" is a "character set", and can also be known as a "character repertoire".
Larry can decode the message, as long as he knows which character set Mark used to encode the message.
By grouping the 1s and 0s together to represent different characters, Mark can still write his message.
Well, guess what? This is exactly how computers store, and even send, information - as strings of 1s and 0s. In computer terms, these 1s and 0s are known as "binary digits", or "bits" for short.
It's therefore also how a computer saves a web page. Every time a web designer, who is working on a web page, clicks "save" in whatever program they are using to create their web page, the computer will save the web page file as a very long string of 1s and 0s. The way it does this is to take each character that appears in the HTML code of the web page, and assign it to a specific sequence of 1s and 0s - exactly the same way that Mark encoded his message to Larry. So for example, it might encode each opening tag "<" as 10110100, and each letter "p" as 01011100. The computer will convert each character of HTML in to 1s and 0s by using a specific character set - just like the character set Mark created. In fact, in the world of computers, there are hundreds of different character sets. Some contain many thousands of characters, some contain only a few. Different character sets sometimes encode the same symbol in a different way. For example, The sequence of 1s and 0s that is used to represent the letter 'e' in one character set, could be used to represent the '@' symbol in another character set.
So although you may not realise it, every time you have "saved" a web page that you've been working on, your computer has chosen a character set, and encoded your web page in to 1s and 0s. How can you tell which character set your web page is encoded with when you save it? Well, this depends on which software you are using to build your web page. In the text editor that I use, Crimson Editor (version 3.70), I can select which character set I'd like to use by clicking 'Document' from the main menu, and then clicking 'Encoding type' (see below).
If you are using different software to build your web page, just click around for anything that says "encoding type" or "charset", you should be able to find it.
With the software I'm using, there's only about 5 different character encoding options. (You may notice I have two UTF-8 options; "with BOM" and "without BOM". If you encounter this with your own HTML editor, just choose "without BOM").
UTF-8 is a good character set, and is recommended by many as a good one to use. Unless your webpage is going to include letters or symbols that are very rare, UTF-8 should do the job for you. This is because it contains over 10,000 characters, from almost every language in the world. Examples of websites that use this character set include Facebook and Yahoo. If you're looking for a character set to use for your web page, you should try UTF-8 first.
So, once you know which character set your web page has been encoded with, you then need to put that information in to your HTML code, so that a web browser can find it. How do you do that? First, just copy and paste the following meta tag in to your HTML code (you should put it somewhere between the and tags).
Then, make sure that you change utf-8 to whichever character set you saved your web page with when you were building it!
One common misunderstanding about this charset stuff, is that some people think you can change the character set of your web page, just by changing what's written in the meta tag.
NO!
The character set of your web page is determined when you save your web page to your computer when you are building it. It is up to you to make sure that you write the correct charset information in to your HTML code.
You should hopefully now know which character set was used to encode your web page. So, let's say you upload your web page to the internet, and then someone else comes along and views your web page. Their web browser will begin downloading the long stream of 1s and 0s that your web page has been encoded with, and once it's done that, will begin to decode those 1s and 0s, in to readable HTML code. In order for the web browser to know which character set to use for the decoding process, it will look for a
So what happens if you don't include this meta tag in the HTML code of your web page, and hence, don't include any charset information?
Well, the web browser is then forced to guess which character set has been used. The way a web browser makes this guess will vary from browser to browser.
The other thing that could happen, is if you put this meta tag in to your HTML code, but specify the wrong character set (by writing the wrong thing next to charset=), then the web browser could start decoding the web page using the wrong character set!
This explains why you sometimes might see strange things appear on a website, such as "That?s coolA`" when you can probably tell it should say "That's cool!". The web browser displaying the page was either given incorrect charset information in the meta tag, or, it wasn't given any charset information and was forced to make a guess. The web browser has decoded the 1s and 0s using the wrong character set, and that's what causes the weird "That?s coolA`" stuff to appear on a web page.
As long as you include correct charset information in the appropriate
One last thing:
Even though you might put the wrong character set information in to your HTML code, a smart web browser will sometimes be able to correct your mistake, and display a web page properly. The reason it can do this is because when a web browser gets sent a web page from a server, the web browser actually receives more information than what you can see in the HTML code. In fact, before a web server starts sending the HTML, it sends this other thing called a HTTP header. A HTTP header contains technical information that the web browser can use. Some web servers will send the name of the character set for the web page in this HTTP header, and if it does, your web browser will most likely ignore any charset information that appears in the HTML code, and just use whichever character set was specified in the HTTP header. However, not every web server will do this, so the safest thing is to make sure that the correct charset information is included in your HTML code.
A tag that starts with
In this tutorial, we are focusing on the meta tag shown earlier (the one that begins with
This tutorial will attempt to give you an understanding about what this all means, and why it's important you include it in the HTML code of your web page.
If you don't correctly use this charset stuff in your HTML code, then there is a good chance that the words, numbers or symbols used on your webpage could look different, or even change, when different people are viewing your website. This is especially true for visitors to a web page who are in different parts of the world. For example, a sentence you've written as "That's cool!" could change in to "That?s coolA'" when someone is looking at it in their web browser. You may have seen similar things like this happen when someone sends you an email from another country. You may have seen it happen when you copy and paste text from one place to another. Something's obviously going wrong, somewhere, for this to happen.
To understand why this happens, and to make sure it doesn't happen to your web page, you first need to understand how computers store information.
And to make it easier to understand exactly how computers store information, I'll give an example.
Let's say that Mark wants to write a message, on a piece of paper, to Larry. However, Mark is only allowed to write the numbers 1 and 0 in his message. Mark can not use any letters of the alphabet, any numbers other than 1 or 0, or any other symbols. Could Mark still write a meaningful message to Larry?
Yes, he could. Mark could create a type of "code" that converts the 1s and 0s in to meaningful letters and symbols. For example, Mark could come up with a list of all the letters and symbols he might like to use in his message, and assign all of these "characters" to a sequence of 1s and 0s. A sample of this list might be:
H = 00100001
E = 11000110
L = 01001100
O = 11100010
! = 10011110
Using this code, Mark could write "Hello!" to Larry by writing down 1s and 0s in the following way:
00100001 = h
11000110 = e
01001100 = l
01001100 = l
11100010 = o
10011110 = !
What Mark has done here is "encoded" his message using his special list of characters and codes. His list contains a set of characters (in this case, all the letters of the english alphabet, plus the exclamation mark), and each character has been assigned a "code" (a string of 1s and 0s). Mark could give his list of characters and codes a name: "Mark's super character list". In technical terms, "Mark's super character list" is a "character set", and can also be known as a "character repertoire".
Larry can decode the message, as long as he knows which character set Mark used to encode the message.
By grouping the 1s and 0s together to represent different characters, Mark can still write his message.
Well, guess what? This is exactly how computers store, and even send, information - as strings of 1s and 0s. In computer terms, these 1s and 0s are known as "binary digits", or "bits" for short.
It's therefore also how a computer saves a web page. Every time a web designer, who is working on a web page, clicks "save" in whatever program they are using to create their web page, the computer will save the web page file as a very long string of 1s and 0s. The way it does this is to take each character that appears in the HTML code of the web page, and assign it to a specific sequence of 1s and 0s - exactly the same way that Mark encoded his message to Larry. So for example, it might encode each opening tag "<" as 10110100, and each letter "p" as 01011100. The computer will convert each character of HTML in to 1s and 0s by using a specific character set - just like the character set Mark created. In fact, in the world of computers, there are hundreds of different character sets. Some contain many thousands of characters, some contain only a few. Different character sets sometimes encode the same symbol in a different way. For example, The sequence of 1s and 0s that is used to represent the letter 'e' in one character set, could be used to represent the '@' symbol in another character set.
So although you may not realise it, every time you have "saved" a web page that you've been working on, your computer has chosen a character set, and encoded your web page in to 1s and 0s. How can you tell which character set your web page is encoded with when you save it? Well, this depends on which software you are using to build your web page. In the text editor that I use, Crimson Editor (version 3.70), I can select which character set I'd like to use by clicking 'Document' from the main menu, and then clicking 'Encoding type' (see below).
If you are using different software to build your web page, just click around for anything that says "encoding type" or "charset", you should be able to find it.
With the software I'm using, there's only about 5 different character encoding options. (You may notice I have two UTF-8 options; "with BOM" and "without BOM". If you encounter this with your own HTML editor, just choose "without BOM").
UTF-8 is a good character set, and is recommended by many as a good one to use. Unless your webpage is going to include letters or symbols that are very rare, UTF-8 should do the job for you. This is because it contains over 10,000 characters, from almost every language in the world. Examples of websites that use this character set include Facebook and Yahoo. If you're looking for a character set to use for your web page, you should try UTF-8 first.
So, once you know which character set your web page has been encoded with, you then need to put that information in to your HTML code, so that a web browser can find it. How do you do that? First, just copy and paste the following meta tag in to your HTML code (you should put it somewhere between the and tags).
Then, make sure that you change utf-8 to whichever character set you saved your web page with when you were building it!
One common misunderstanding about this charset stuff, is that some people think you can change the character set of your web page, just by changing what's written in the meta tag.
NO!
The character set of your web page is determined when you save your web page to your computer when you are building it. It is up to you to make sure that you write the correct charset information in to your HTML code.
You should hopefully now know which character set was used to encode your web page. So, let's say you upload your web page to the internet, and then someone else comes along and views your web page. Their web browser will begin downloading the long stream of 1s and 0s that your web page has been encoded with, and once it's done that, will begin to decode those 1s and 0s, in to readable HTML code. In order for the web browser to know which character set to use for the decoding process, it will look for a
So what happens if you don't include this meta tag in the HTML code of your web page, and hence, don't include any charset information?
Well, the web browser is then forced to guess which character set has been used. The way a web browser makes this guess will vary from browser to browser.
The other thing that could happen, is if you put this meta tag in to your HTML code, but specify the wrong character set (by writing the wrong thing next to charset=), then the web browser could start decoding the web page using the wrong character set!
This explains why you sometimes might see strange things appear on a website, such as "That?s coolA`" when you can probably tell it should say "That's cool!". The web browser displaying the page was either given incorrect charset information in the meta tag, or, it wasn't given any charset information and was forced to make a guess. The web browser has decoded the 1s and 0s using the wrong character set, and that's what causes the weird "That?s coolA`" stuff to appear on a web page.
As long as you include correct charset information in the appropriate
One last thing:
Even though you might put the wrong character set information in to your HTML code, a smart web browser will sometimes be able to correct your mistake, and display a web page properly. The reason it can do this is because when a web browser gets sent a web page from a server, the web browser actually receives more information than what you can see in the HTML code. In fact, before a web server starts sending the HTML, it sends this other thing called a HTTP header. A HTTP header contains technical information that the web browser can use. Some web servers will send the name of the character set for the web page in this HTTP header, and if it does, your web browser will most likely ignore any charset information that appears in the HTML code, and just use whichever character set was specified in the HTTP header. However, not every web server will do this, so the safest thing is to make sure that the correct charset information is included in your HTML code.
Colors for perfect html design
The right colors can captivate our attention, elicit a variety of emotions, increase
conversion rates, increase memory, improve readership, and increase brand recognition. In fact, A study by the University of Loyola, Maryland found that color increases brand recognition by up to 80 percent.
Lots of research has gone into the art and combination of colors. Here are the basics.
The color wheel is the foundation for combining colors. It was first invented by Isaac Newton in 1666 to show the relations of colors.
The color wheel is composed of three different types of colors: primary, secondary, and tertiary.
Primary colors include Red, Yellow, and Blue. All other colors are derived by combinations of these colors.
Secondary colors include Orange, Green, and Purple.
Tertiary colors are created by mixing primary and secondary colors. They include
red-orange, red-violet, yellow-orange, yellow-green, blue-violet and blue-green.
Today’s most common version of the color wheel contains all 12 of the preceding colors.
As a designer, color is one of the most important elements of anything you create. It doesn’t matter whether you’re designing a logo or an entire website.
Using the color wheel, you can arrange color schemes that complement your design.
Color schemes come in many forms. We will be covering some of the most common ones, including Analogous, Complimentary, Triad, and Monochromatic.
Analogous colors are those that are adjacent to each other on the color wheel. You can pick any range of colors between two points of either triangle on the color wheel (ie yellow to red, red to orange, orange to violet, red to blue, etc) and you will have an analogous color scheme.
Using an analogous color scheme can help you to create vibrant designs that are pleasing to the eye.
These combinations make each color look more vibrant. In fact, when placed next to each other, a phenomenon known as simultaneous contrast occurs.
Some websites that use Complementary color schemes include:
http://www.ufl.edu/ (University of Florida)
http://www.federatedmedia.net/ (Red and green are complementary colors.)
Triad colors are those that are three hues equidistant on the color wheel. They are evenly spaced around the color wheel to form a triangle. This combination will give you a design that is colorful but balanced at the same time.
A monochromatic color scheme is almost always visually appealing, but lacks color contrast. While using a purely monontone chromatic color scheme can get a bit boring, using it with white or black, white, or gray can create a very attractive design.
You can see an example of this color scheme at Neatorama.com, which sports a
variety of shades of gray. Another good example can be found at ColourLovers.
Fortuanately, in today’s high technology world, you don’t have to create color schemes all by yourself. There are a number of excellent online resources available to help you pick the perfect color scheme for your next design.
http://kuler.adobe.com/ - This color scheme tool will allow you to quickly create analogous, complementary, monochromatic, and triad color schemes.
Color Schemer Online is an application that will quickly and easily create perfectly matching color schemes. All you do is select a color to start with, and it will immediately output an attractive color scheme.
It also allows you to lighten or darken the scheme simply by pressing a button….one of my favorite features
ColorBlender is an online tool that will help you to create matching colors and palette designs. Once you’ve have created a color scheme that you like, you can then save it to your computer.
To check out a large gallery of color schemes, go to http://www.colourlovers.com/.
conversion rates, increase memory, improve readership, and increase brand recognition. In fact, A study by the University of Loyola, Maryland found that color increases brand recognition by up to 80 percent.
Lots of research has gone into the art and combination of colors. Here are the basics.
The color wheel is the foundation for combining colors. It was first invented by Isaac Newton in 1666 to show the relations of colors.
The color wheel is composed of three different types of colors: primary, secondary, and tertiary.
Primary colors include Red, Yellow, and Blue. All other colors are derived by combinations of these colors.
Secondary colors include Orange, Green, and Purple.
Tertiary colors are created by mixing primary and secondary colors. They include
red-orange, red-violet, yellow-orange, yellow-green, blue-violet and blue-green.
Today’s most common version of the color wheel contains all 12 of the preceding colors.
As a designer, color is one of the most important elements of anything you create. It doesn’t matter whether you’re designing a logo or an entire website.
Using the color wheel, you can arrange color schemes that complement your design.
Color schemes come in many forms. We will be covering some of the most common ones, including Analogous, Complimentary, Triad, and Monochromatic.
Analogous colors are those that are adjacent to each other on the color wheel. You can pick any range of colors between two points of either triangle on the color wheel (ie yellow to red, red to orange, orange to violet, red to blue, etc) and you will have an analogous color scheme.
Using an analogous color scheme can help you to create vibrant designs that are pleasing to the eye.
These combinations make each color look more vibrant. In fact, when placed next to each other, a phenomenon known as simultaneous contrast occurs.
Some websites that use Complementary color schemes include:
http://www.ufl.edu/ (University of Florida)
http://www.federatedmedia.net/ (Red and green are complementary colors.)
Triad colors are those that are three hues equidistant on the color wheel. They are evenly spaced around the color wheel to form a triangle. This combination will give you a design that is colorful but balanced at the same time.
A monochromatic color scheme is almost always visually appealing, but lacks color contrast. While using a purely monontone chromatic color scheme can get a bit boring, using it with white or black, white, or gray can create a very attractive design.
You can see an example of this color scheme at Neatorama.com, which sports a
variety of shades of gray. Another good example can be found at ColourLovers.
Fortuanately, in today’s high technology world, you don’t have to create color schemes all by yourself. There are a number of excellent online resources available to help you pick the perfect color scheme for your next design.
http://kuler.adobe.com/ - This color scheme tool will allow you to quickly create analogous, complementary, monochromatic, and triad color schemes.
Color Schemer Online is an application that will quickly and easily create perfectly matching color schemes. All you do is select a color to start with, and it will immediately output an attractive color scheme.
It also allows you to lighten or darken the scheme simply by pressing a button….one of my favorite features
ColorBlender is an online tool that will help you to create matching colors and palette designs. Once you’ve have created a color scheme that you like, you can then save it to your computer.
To check out a large gallery of color schemes, go to http://www.colourlovers.com/.
Learn Html
What is an HTML File?
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor
Do You Want to Try It?
If you are running Windows, start Notepad.
If you are on a Mac, start SimpleText.
In OSX start TextEdit and change the following preferences: Open the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above!
Type in the following text:
Title of page
This is my first homepage. This text is bold
Save the file as "mypage.htm".
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is . This tag tells your browser that this is the start of an HTML document. The last tag in your document is . This tag tells your browser that this is the end of the HTML document.
The text between the tag and the tag is header information. Header information is not displayed in the browser window.
The text between the tags is the title of your document. The title is displayed in your browser's caption.
<br />The text between the <body> tags is the text that will be displayed in your browser.
<br />The text between the <b> and </b> tags will be displayed in a bold font.
<br />HTM or HTML Extension?
<br />When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions.
<br />With newer software we think it will be perfectly safe to use .html.
<br />Note on HTML Editors:
<br />You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file.
<br />However, if you want to be a skillful Web developer, we strongly recommend that you use a plain text editor to learn your primer HTML.
<br />Frequently Asked Questions
<br />Q: After I have edited an HTML file, I cannot view the result in my browser. Why?A: Make sure that you have saved the file with a proper name and extension like "c:\mypage.htm". Also make sure that you use the same name when you open the file in your browser.
<br />Q: I have edited an HTML file, but the changes don't show in the browser. Why?A: A browser caches pages so it doesn't have to read the same page twice. When you have modified a page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to reload the page.
<br />Q: What browser should I use?A: You can do all the training with all of the well-known browsers, like Internet Explorer, Firefox, Netscape, or Opera. However, some of the examples in our advanced classes require the latest versions of the browsers.
<br />Q: Does my computer have to run Windows? What about a Mac?A: You can do all your training on a non-Windows computer like a Mac.
<br />
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Publicat de
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta content='https://www.blogger.com/profile/07018472287517671957' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/07018472287517671957' rel='author' title='author profile'>
<span itemprop='name'>etutorials</span>
</a>
</span>
</span>
<span class='post-timestamp'>
la
<meta content='http://i-tutorial.blogspot.com/2008/07/learn-html.html' itemprop='url'/>
<a class='timestamp-link' href='https://i-tutorial.blogspot.com/2008/07/learn-html.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2008-07-23T06:41:00-07:00'>06:41</abbr></a>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='https://www.blogger.com/comment/fullpage/post/8320826949765837296/5273022274854237773' onclick=''>
Niciun comentariu:
</a>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1118911741'>
<a href='https://www.blogger.com/post-edit.g?blogID=8320826949765837296&postID=5273022274854237773&from=pencil' title='Editați postarea'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
</div>
</div></div>
</div>
<div class='blog-pager' id='blog-pager'>
<a class='home-link' href='https://i-tutorial.blogspot.com/'>Pagina de pornire</a>
</div>
<div class='clear'></div>
<div class='blog-feeds'>
<div class='feed-links'>
Abonați-vă la:
<a class='feed-link' href='https://i-tutorial.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Postări (Atom)</a>
</div>
</div>
</div></div>
</div>
<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'><div class='widget Text' data-version='1' id='Text1'>
<h2 class='title'>Welcom to i-Tutorial</h2>
<div class='widget-content'>
i-Tutorial meens for Internet Tutorials .<br/>Here you can learn some tricks and tips in any domain.<br/>Html , photoshop , macromedia , adobe , dreamweaver, yahoo, seo etc.<br/>Tutorials are in English.<br/><br/>Have a nice day and thanks for visit !<br/>
</div>
<div class='clear'></div>
</div><div class='widget Poll' data-version='1' id='Poll1'>
<h2 class='title'>How good are our tutorials ?</h2>
<div class='widget-content'>
<iframe allowtransparency='true' frameborder='0' height='180' name='poll-widget4260236294380757805' style='border:none; width:100%;'></iframe>
<div class='clear'></div>
</div>
</div><div class='widget Subscribe' data-version='1' id='Subscribe1'>
<div style='white-space:nowrap'>
<h2 class='title'>Abonare la tutoriale</h2>
<div class='widget-content'>
<div class='subscribe-wrapper subscribe-type-POST'>
<div class='subscribe expanded subscribe-type-POST' id='SW_READER_LIST_Subscribe1POST' style='display:none;'>
<div class='top'>
<span class='inner' onclick='return(_SW_toggleReaderList(event, "Subscribe1POST"));'>
<img class='subscribe-dropdown-arrow' src='https://resources.blogblog.com/img/widgets/arrow_dropdown.gif'/>
<img align='absmiddle' alt='' border='0' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/>
Postări
</span>
<div class='feed-reader-links'>
<a class='feed-reader-link' href='https://www.netvibes.com/subscribe.php?url=https%3A%2F%2Fi-tutorial.blogspot.com%2Ffeeds%2Fposts%2Fdefault' target='_blank'>
<img src='https://resources.blogblog.com/img/widgets/subscribe-netvibes.png'/>
</a>
<a class='feed-reader-link' href='https://add.my.yahoo.com/content?url=https%3A%2F%2Fi-tutorial.blogspot.com%2Ffeeds%2Fposts%2Fdefault' target='_blank'>
<img src='https://resources.blogblog.com/img/widgets/subscribe-yahoo.png'/>
</a>
<a class='feed-reader-link' href='https://i-tutorial.blogspot.com/feeds/posts/default' target='_blank'>
<img align='absmiddle' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/>
Atom
</a>
</div>
</div>
<div class='bottom'></div>
</div>
<div class='subscribe' id='SW_READER_LIST_CLOSED_Subscribe1POST' onclick='return(_SW_toggleReaderList(event, "Subscribe1POST"));'>
<div class='top'>
<span class='inner'>
<img class='subscribe-dropdown-arrow' src='https://resources.blogblog.com/img/widgets/arrow_dropdown.gif'/>
<span onclick='return(_SW_toggleReaderList(event, "Subscribe1POST"));'>
<img align='absmiddle' alt='' border='0' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/>
Postări
</span>
</span>
</div>
<div class='bottom'></div>
</div>
</div>
<div class='subscribe-wrapper subscribe-type-COMMENT'>
<div class='subscribe expanded subscribe-type-COMMENT' id='SW_READER_LIST_Subscribe1COMMENT' style='display:none;'>
<div class='top'>
<span class='inner' onclick='return(_SW_toggleReaderList(event, "Subscribe1COMMENT"));'>
<img class='subscribe-dropdown-arrow' src='https://resources.blogblog.com/img/widgets/arrow_dropdown.gif'/>
<img align='absmiddle' alt='' border='0' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/>
Comentarii
</span>
<div class='feed-reader-links'>
<a class='feed-reader-link' href='https://www.netvibes.com/subscribe.php?url=https%3A%2F%2Fi-tutorial.blogspot.com%2Ffeeds%2Fcomments%2Fdefault' target='_blank'>
<img src='https://resources.blogblog.com/img/widgets/subscribe-netvibes.png'/>
</a>
<a class='feed-reader-link' href='https://add.my.yahoo.com/content?url=https%3A%2F%2Fi-tutorial.blogspot.com%2Ffeeds%2Fcomments%2Fdefault' target='_blank'>
<img src='https://resources.blogblog.com/img/widgets/subscribe-yahoo.png'/>
</a>
<a class='feed-reader-link' href='https://i-tutorial.blogspot.com/feeds/comments/default' target='_blank'>
<img align='absmiddle' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/>
Atom
</a>
</div>
</div>
<div class='bottom'></div>
</div>
<div class='subscribe' id='SW_READER_LIST_CLOSED_Subscribe1COMMENT' onclick='return(_SW_toggleReaderList(event, "Subscribe1COMMENT"));'>
<div class='top'>
<span class='inner'>
<img class='subscribe-dropdown-arrow' src='https://resources.blogblog.com/img/widgets/arrow_dropdown.gif'/>
<span onclick='return(_SW_toggleReaderList(event, "Subscribe1COMMENT"));'>
<img align='absmiddle' alt='' border='0' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/>
Comentarii
</span>
</span>
</div>
<div class='bottom'></div>
</div>
</div>
<div style='clear:both'></div>
</div>
</div>
<div class='clear'></div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Arhivă blog</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='https://i-tutorial.blogspot.com/2008/'>
2008
</a>
<span class='post-count' dir='ltr'>(5)</span>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='https://i-tutorial.blogspot.com/2008/07/'>
iulie
</a>
<span class='post-count' dir='ltr'>(5)</span>
<ul class='posts'>
<li><a href='https://i-tutorial.blogspot.com/2008/07/microsoft-word-tutorial.html'>Microsoft Word Tutorial</a></li>
<li><a href='https://i-tutorial.blogspot.com/2008/07/image-pipes-tutorial.html'>Image Pipes Tutorial</a></li>
<li><a href='https://i-tutorial.blogspot.com/2008/07/html-charset-tutorial.html'>Html charset tutorial</a></li>
<li><a href='https://i-tutorial.blogspot.com/2008/07/colors-for-perfect-html-design.html'>Colors for perfect html design</a></li>
<li><a href='https://i-tutorial.blogspot.com/2008/07/learn-html.html'>Learn Html</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget Profile' data-version='1' id='Profile1'>
<h2>Despre mine</h2>
<div class='widget-content'>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/07018472287517671957' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
etutorials
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/07018472287517671957' rel='author'>Vizualizați profilul meu complet</a>
<div class='clear'></div>
</div>
</div></div>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div>
<!-- end content-wrapper -->
<div id='footer-wrapper'>
<div class='footer section' id='footer'><div class='widget AdSense' data-version='1' id='AdSense1'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-6386954204313476";
google_ad_host="pub-1556223355139109";
google_ad_host_channel="00000";
google_ad_width=468;
google_ad_height=60;
google_ad_format="468x60_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="204063";
google_color_url="8FACC8";
google_color_text="477FBA";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='clear'></div>
</div>
</div></div>
</div>
</div></div>
<!-- end outer-wrapper -->
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2591855913-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5SpchVKla2Yj3PbLyx0hKtIaiqlg:1730935816759';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8320826949765837296','//i-tutorial.blogspot.com/','8320826949765837296');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8320826949765837296', 'title': 'Free Tutorials Worldwide', 'url': 'https://i-tutorial.blogspot.com/', 'canonicalUrl': 'http://i-tutorial.blogspot.com/', 'homepageUrl': 'https://i-tutorial.blogspot.com/', 'searchUrl': 'https://i-tutorial.blogspot.com/search', 'canonicalHomepageUrl': 'http://i-tutorial.blogspot.com/', 'blogspotFaviconUrl': 'https://i-tutorial.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'ro', 'localeUnderscoreDelimited': 'ro', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Free Tutorials Worldwide - Atom\x22 href\x3d\x22https://i-tutorial.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Free Tutorials Worldwide - RSS\x22 href\x3d\x22https://i-tutorial.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Free Tutorials Worldwide - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8320826949765837296/posts/default\x22 /\x3e\n', 'meTag': '\x3clink rel\x3d\x22me\x22 href\x3d\x22https://www.blogger.com/profile/07018472287517671957\x22 /\x3e\n', 'adsenseClientId': 'ca-pub-6386954204313476', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/6eb7ce967db05cf0', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Solicita\u021bi un link', 'key': 'link', 'shareMessage': 'Solicita\u021bi un link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Trimite\u021bi c\u0103tre Facebook', 'target': 'facebook'}, {'name': 'Posta\u021bi pe blog!', 'key': 'blogThis', 'shareMessage': 'Posta\u021bi pe blog!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Trimite\u021bi c\u0103tre Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Trimite\u021bi c\u0103tre Pinterest', 'target': 'pinterest'}, {'name': 'E-mail', 'key': 'email', 'shareMessage': 'E-mail', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27ro\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Citi\u021bi mai multe', 'pageType': 'index', 'pageName': '', 'pageTitle': 'Free Tutorials Worldwide'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edita\u021bi', 'linkCopiedToClipboard': 'Linkul a fost copiat \xeen clipboard!', 'ok': 'Ok', 'postLink': 'Posta\u021bi linkul'}}, {'name': 'template', 'data': {'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Free Tutorials Worldwide', 'description': 'Best Tutorials in the world. Free Tutorials for everyone. Just try our tutorials.', 'url': 'https://i-tutorial.blogspot.com/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': true, 'isArchive': false, 'isLabelSearch': false}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/386988468-lbx__ro.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text1', 'sidebar', document.getElementById('Text1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PollView', new _WidgetInfo('Poll1', 'sidebar', document.getElementById('Poll1'), {'pollid': '4260236294380757805', 'iframeurl': '/b/poll-results?pollWidget\x3dPoll1\x26txtclr\x3d%23204063\x26lnkclr\x3d%23599be2\x26chrtclr\x3d%23599be2\x26font\x3dnormal+normal+100%25+Helvetica,Arial,Verdana,\x27Trebuchet+MS\x27,+Sans-serif\x26hideq\x3dtrue\x26purl\x3dhttps://i-tutorial.blogspot.com/'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_SubscribeView', new _WidgetInfo('Subscribe1', 'sidebar', document.getElementById('Subscribe1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Se \xeencarc\u0103\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense1', 'footer', document.getElementById('AdSense1'), {}, 'displayModeFull'));
</script>
</body>
</html>
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor
Do You Want to Try It?
If you are running Windows, start Notepad.
If you are on a Mac, start SimpleText.
In OSX start TextEdit and change the following preferences: Open the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above!
Type in the following text:
This is my first homepage. This text is bold
Save the file as "mypage.htm".
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is . This tag tells your browser that this is the start of an HTML document. The last tag in your document is . This tag tells your browser that this is the end of the HTML document.
The text between the tag and the tag is header information. Header information is not displayed in the browser window.
The text between the