Showing posts with label Latest Tutorials. Show all posts
Showing posts with label Latest Tutorials. Show all posts

Monday, 18 November 2013

00:54

Html Class 9: Learn The Basic Html Frame In This Class

Mind Master    No comments
Html Class 9: Learn The Basic Html Frame In This Class

Do You Really Want Them?

Scroll down the page, see what happened? The top part of the page remained stationary while the rest of the page moved. That's what's called frames. A webpage with frames may look interesting but it can pose problems, not all browsers support frames, some search engines ignore web pages with frames, and HTML 5, the newest version of HTML code that's in the works, won’t support frame tags. But if you still want to know how they are made read on.

More Than One Page

A web page with frames is actually made up of several pages put together into one. This page for example is made of three pages: One for the top, another for the main section, and a third one which brings them together. You can see that this page has two frames, the top frame containing the page with the title, and the bottom frame containing the page with the sidebar and main content. Webpages within the frames are written just like any other html file but the page which brings them together has it's own set of html tags. Here's how the code looks for this page:

Notice that the html file starts out just like any other web page except there are nobodytags. In their place are the opening and closing frame set tags. The rows attribute in the frame set tag makes horizontal frames, vertical frames are made with the cols attribute. The numbers determine how much of the web page the frames will take up, in the example the top frame takes 30% and the second frame 70% of space. The percentages need to be distributed so that they add up to 100% and notice they are enclosed in quotation marks. Each percentage is separated by a comma. Next come the framet ags, they are single tags so have no closing tag. The src attribute is telling the browser which web page is to display in the frame by default (when the visitor arrives on the web page). In the example the first frame holds a web page with the file name"title.html"and the second frame holds a web page named"main.html". More frames can be put on a web page by adding more frame tags to the code. To remove frame borders add theborder="0" attribute into the opening frame set tags like so:

To get links working properly on framed web pages, each frame needs to be named so that the anchor tags will know into which frame to send the destination web page when a link is clicked. This is done by putting thenameattribute into theframetags like so:

The name of the frame can be anything, once the frame is named, the link is directed to it through the tar get attribute in the anchor tags:

The tar get attribute told the link to send the web page into a frame named myframe. The tar get attribute can also force links to break out of frames completely and load like a regular web page when its value is set to"_top"like so:

And that's how a web page with frames is made. So do you still want them?
Read More
00:16

Html Class 8: Learn The Basic Table In This Class

Mind Master    No comments
make table in html

Making A Table

We’re talking here tables for holding data not the dinner table. Tables are useful in laying out the design of web pages so it’s well worth the time to learn how to make them. A table starts and ends with the table tag:

It stands for“table row”and will make up one row across the table. Between the tr tags are found the td tags:

The td stands for“table data”it forms one box called a“cell”which contains content seen on the web page such as text or graphics. Here’s how the table code is put together:

Putting aborder attribute in the table tag will help you see how the table and cells are formed, setting the border attribute to"0"will remove the borders altogether. Take a close look at the code, this table will have 2 rows with 2 cells in each row. The stuff between the opening and closing td tags is what will be in each cell. Note that each row is finished off with the closing tr tag. Finally the table is finished by ending it with the closing table tag. Result:
Result 1 Result 2
Result 3 Result 4
Remember the style attribute from class 4? Put it into the opening td tags with a CSS padding command to add some space around the content of the cells:

We can make a table larger by putting the style attribute into the opening table tag and giving it a CSS width command:

Result:
Result 1 Result 2
Result 3 Result 4
Add the a CSS vertical-align command to a td tag and the content of that cell will start at the top of the cell:

Let's change the color of a cell with CSS background command:

And that folks is how a table is put together. By now you have all the tags you need to put together a website, I hope you enjoyed the lessons enough to buy my book, HTML Made Easy with a free bonus CSS tutorial.
Read More

Sunday, 17 November 2013

23:34

Html Class 7: Learn The Basic Html Lists In This Class

Mind Master    No comments
learn html lists

Making a Bulleted List

There may come a time when you would like to add a list to a web page, or may be not, but just in case here is how to make a list. A list starts and ends with the"unordered"list tags:

The ul stands for“unordered list”, it will get you bulleted text, you know, a dot beside the text. The opening ul tag starts the list and the closing ul tag ends the list, in between goes the text surrounded by the opening and closing"list item"tag:

Result:
  • Home
  • About Us
  • Contact Us
Any number of items can be added to the list as long as they are enclosed by the opening and closing li tags. And that's how to make a list, let's now move on to making tables, don't worry no carpentry skills required. Next: lesson 8.
Read More
23:22

Html Class 6: Learn The Basic Html Links In This Class

Mind Master    No comments
link insert

Putting It All Together Links,

This is what the web is all about and it’s simple to do with anchor tags:

The anchor tag comes with the href attribute. It means“h per text reference”. This attribute tells the browser where to find a link. A link to a web page within the same directory (folder) of the website would look like this:

The href attribute contains the file name of the destination web page. The file name is enclosed in quotation marks and it includes the html extension. The text between the opening and closing a tag is the link people will click. To keep things simple, for now place all your web pages in the same folder (directory). Linking to another website is done by putting the entire website address (url) into the href attribute:

Be sure that http:// is included in the website address. Turning an image into a link is done by surrounding the img tag with the opening and closing a tags:

Replace filename.html with the file name of the page or website address, and replace filename.jpg with the file name of your picture. By default image links have a blue border around them, the border can be removed by adding the style attribute with a CSS border command:

Email Link Putting an email link on web pages is done by entering the email address in the href attribute preceded by a mail to: command like so:

Notice there is a colon between mailto and the email address and that they are enclosed in quotation marks. By the way, in case you haven’t noticed by now, there is a space between the a and the href attribute. And that's how to make links, next we're going to make a list in lesson 7.
Read More
23:07

Html Class 5: Learn The Basic Html Graphics In This Class

Mind Master    No comments

Putting A Picture On The Web Page

Making a website is not complete without adding graphics to make it look nice and pretty. Placing a picture on a web page is done with the img tag. The img tag is a single tag so does not require a closing tag:

The img stands for"image",srcis an attribute, it tells the browser where to find the picture. The stuff in the quotation marks is the file name of the graphic, replace filename. jpg with the file name of your picture and be sure it’s between the quotes.
Note The file name of the picture must also include its format, e.g. jpg as in the above example. More on image format later in this class.
To keep things simple, for now store your pictures in the same place as your web pages, for example if you keep your HTML files in a folder called "my pages", put your pictures there too. Every picture on a web page has its very own img tag:

If animgtag is enclosed between the opening and closing p tags, the other image will start on a new line:

Give your pictures a description by adding an alt attribute to the img tag like so:

The alt attribute will make the description appear if a browser does not display images. In some browsers the description will also pop up when a mouse pointer is moved over the picture.
Image Format Pictures on the web are usually either in gif or jpg format. The gif format is mostly used for pictures with solid blocks of color such as charts, or when an image requires a transparent background. The jpg format is suitable for pictures with subtle color changes such as photos.
In addition to the proper format, images on websites also need to be optimized, that is, the picture's file size needs to be lowered so that it won't take too long to load. For more info see Optimizing Graphics.
Next we're going to make links in lesson 6.
Read More
20:59

Html Class 4: Learn The Basic Html Attributes In This Class

Mind Master    No comments
Attributes tags

Telling Tags What To Do

We can change the way tags display things on web pages by putting what’s called an"attribute"into an opening tag. Many of the things that were done with attibutes are now done with CSS, so this lesson will show you how to put CSS code into tags by the use of the style attribute:

The style attribute’s job is to hold CSS code, that’s the stuff in the quotation marks. In the above example it's telling the h1 tag to center the text on the web page. Notice that there is a colon between text-align and center and at the end of center there is a semi colon. This is how CSS commands are structured. The text in our example can further be changed by adding another CSS command to the style attribute:

The result would be red text centered on the web page. An unlimited amount of CSS commands can be added to the style attribute as long as they are enclosed between the quotation marks and each command ends with a semi colon. The style attribute can be put in any opening tag to change some aspect of the tag, for instance when used with the body tag, all the text on a web page can be displayed in a different font:

The font-family command changes the text font, in this example it’s in Arialstyle.Adding a CSS background command in the body tag changes the page's background color:

That would give your web page a red background (you don’t really want a red web page do you?). Colors can be specified by either using the name of the color or its color code, for example #ff0000 is the color code for red:

The result would look like this: I’m biggerthan you Size of text is determined by the number, the larger the number the bigger the text,px stands for "pixels". As we move along in the tutorial you will be introduced to other attributes such as the src attribute which helps a tag put a picture on the web page. So let's head on over to lesson 5..
Read More
20:23

Html Class 3: Learn The Basic Html Inline Tags In This Class

Mind Master    No comments
html Inline Tags

Formatting Text

Words within a sentence or paragraph can be made bold with the strong tag like so:

Did you pick "guess"? Then you passed the grade, give yourself a pat on the back. Italicized words are made by enclosing them in em tags:

The strong and em tags belong to a group of tags known as“inline”tags, these kind of tags don’t force text to start on a separate line the way block tags do. They can be used together to make text both bold and italicized:

It doesn’t matter which tag is used first but it is important to note that when using combination of tags their corresponding closing tag should be listed in the correct order, if the order starts with the opening em tag, it should end with the closing em tag, for example:

The span tag alone doesn’t do anything but when combined with CSS it can change the appearance of text within a sentence, so let's see how we can add some CSS code to our tags in lesson 4.
Read More
19:00

Html Class 2: Learn The Basic Html Block Tags In This Class

Mind Master    No comments
Html Class 2: Learn The Basic Html Block Tags

Making Headings

Let’s make the web page a little more eye catching by adding a large, bold heading using the heading tags:

Remember from the previous lesson, things which appear on web pages are enclosed between the opening and closing body tags, that also includes other tags which affect how things are seen on web pages:

The number 1 beside the letter h determines how large the heading will be. Any number from 1 to 6 can be used,1makes the largest heading, and 6 makes the smallest.

Heading tags belong to what are called“block”tags.

These kind of tags don’t allow any outside text to line up beside them, you will see the effect in a moment but first let’s see how our HTML file is shaping up:

Open your web page and this is what it should look like: My First Webpage

Learning HTML

Look Ma, I'm making a webpage! See how the text outside the h1 tags is on a separate line? This is what block tags do, they force the stuff they don’t enclose to be on a separate line. Another block tag is the paragraph tag:

Any text put between the opening and closing p tags makes one paragraph. Hitting the “Enter” key has no effect on web pages, to start a new line within a paragraph the br tag is needed:

The br tag is one of the few HTML tags which does not have a corresponding closing tag. These kind of tags are called“single”tags. Here is an example of how the br tag can be used in a paragraph:

The result would look like this:

Look Ma,
I’m making a webpage!

Try it out yourself in the HTML file you made.
Read More
08:53

Html Class 1: Learn The Basic Html Tags In This Class

Mind Master    No comments

Opening and Closing Tags

HTML code is most commonly referred to as tags. The majority of tags have both an opening tag and a corresponding closing tag. Every HTML file begins with this opening tag:

Every HTML file ends with the corresponding closing tag:

Notice the/in the closing tag?

All closing tags must have this slash. You know why? Because it's a closing tag, that's why. Below the opening html tag come the opening and closing head tags:

The head tag doesn't have any affect on what appears on the web page, it's job is to hold certain other types of tags, one being the title tag:

Ah, look at that, there's some text between the opening and closing title tags, this is where the title of a web page is entered, Next comes the closing head tag. Remember, a closing tag has a slash this thing. So this is what the code should look like so far:

Now let's get to putting something on the web page. Everything that is seen on web pages is found between the opening and closing body tags:

Example:

Look Ma, I'm Making my first webpage

Notice in the example that the closing html tag was added to the code. This means we are finished (at least for now), so save your code following the instructions given in the introduction of this tutorial.

Curious to see how the webpage looks?

Open the webpage in your browser and have a look. See? The text between the body tags is what shows on the web page. In the next lesson you will be introduced to more tags and what they do.
Read More
Subscribe to: Posts (Atom)

 

Copyright @ 2013 The Best World's Blog About All Kind Of Information.

Designed by Mind Master | TheBestPcSoft