[Tutorial] Learn xHTML/HTML and CSS

Cheers again mate.

On the code indentation, do you suggest one tab or six spaces? Or no matter

Is the indentation important to the function of the code or is it just standard practice?

Honestly these tutes are like aha moments.
 
Advertise on BHW
one tab is the correct format for indentation.

the indentation makes no difference to function at all, it is just standard practice but it really does help. You should try read a completed page's code when it has no indentation, its impossible.

its a good thing to know about this indentation standard because it is common across all coding languages.

rob1977 said:
Cheers again mate.

On the code indentation, do you suggest one tab or six spaces? Or no matter

Is the indentation important to the function of the code or is it just standard practice?

Honestly these tutes are like aha moments.
Click to expand...
 
Great tutorials, looking forward to the more advanced stuff, have a good general idea about code in html/css but have never been formally taught any of it. Will be nice to see the meaning behind different areas. Great share!
 
Thanks man, glad this is helping others.
istalior said:
thanks for the tutorial it help a lot :)
Click to expand...

Some of the best coders at any language are self taught people, it just helps people out if you can get them to learn the general stuff quickly. That way they have a good understanding of the language and then learning the advanced stuff is made a whole lot easier.

I am self taught this kind of stuff. Only formal education i have is not in this field. Read alot of books and that is where i got my knowledge from. Really all i am doing is cutting out all the bs from the books. If the books were written correctly would only take 2-3 weeks to learn html and css
Execute said:
Great tutorials, looking forward to the more advanced stuff, have a good general idea about code in html/css but have never been formally taught any of it. Will be nice to see the meaning behind different areas. Great share!
Click to expand...
 
Document type

​
Document types tell the browser which format that the page is written in. It does this so that the page will be displayed correctly across all browsers and platforms. It is essential to put the document type at the top of every page so that obeys the rules of xHTML/HTML and also that the browser will display it correctly.

I am Breaking this here down to xHTML coding and HTML depending on which you are trying to learn, since that is what this tutorial is called. I will first do xHTML, then the second coding part will be HTML.

First xHTML 1.0

Steps:


  1. Open skeleton.html in notepad
  2. Above the <html> tag type as follows:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">[INDENT]<head> [/INDENT]
[INDENT=2]<title> Skeleton </title>[/INDENT]
[INDENT]</head>[/INDENT]
[INDENT]<body>[/INDENT]
[INDENT]</body>
[/INDENT]
</html>

3.Save the file.

Now you have a skeleton.html which has the minimum required tags for a xHTML document. You will never need to write any of these again.

I will not be doing a breakdown on document types. As you actually do not need to know what it is to create a website.


Second HTML 4.01

Steps:
  1. Open skeleton.html in notepad
  2. Above the <html> tag type as follows:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>[INDENT]<head>[/INDENT]
[INDENT=2]<title> Skeleton </title>[/INDENT]
[INDENT]</head>
[/INDENT]
[INDENT]<body>[/INDENT]
[INDENT]</body>
[/INDENT]
</html>

3. Save the file.
Now you have a skeleton.html which has the minium required tags for a HTML document. You will never need to write any of these again.


I will not be doing a breakdown on document types. As you actually do not need to know what it is to create a website.
 
Sorry guys taking a break tonight, will have lots for you to learn tomorrow. Thanks so far for your support.
 
Span, Divs and Frames
​


These tags don't really come into use without CSS. Notice how plain your coding before all this was? Well we are starting to introduce CSS, but to do that you will need to know span, divs and frames first. CSS will be introduced in the next post.


What are frames
Frames divide the browser window into different pieces. Each piece containing a separate XHTML/HTML document. A collection of frames is known as a frameset.

When to use frames
One of the key advantages that frames offer is that you can then load and reload single pieces without having to reload the entire contents of the page.


I will not go into to much detail about frames as they are not supported in HTML 5 and also by some browsers.

Frames require a different document declaration and also each frame is a separate document. I will not be doing each document as you should be able to do that by yourself by now. just remember to match the names up with header_frame.htm and so on. You can choose which ever name you want.

Frames are just like a table, in how the are displayed and coded.

Splitting here for xHTML and HTML. First will be HTML and second will be xHTML. Both are the same but the declaration is different.

One HTML
Steps:


  1. Open notepad
  2. Save as frames.html
  3. Type as follows:

    Code: 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 

<html>[INDENT]<head>[/INDENT]
[INDENT=2]<title>Frames example</title>[/INDENT]
[INDENT]</head>[/INDENT]
[INDENT]<frameset rows="10%,80%,10%">[/INDENT]
[INDENT=2]<frame src="/html/header_frame.htm" />[/INDENT]
[INDENT=2]<frame src="/html/main_frame.htm" />[/INDENT]
[INDENT=2]<frame src="/html/footer_frame.htm" />[/INDENT]
[INDENT=2]<noframes>[/INDENT]
[INDENT=3]<body>[/INDENT]
[INDENT=4]<p>Your browser does not support frames.</p>
[/INDENT]
[INDENT=3]</body>[/INDENT]
[INDENT=2]</noframes>[/INDENT]
[INDENT]</frameset>
[/INDENT]
</html>
  4. Save again
  5. Create the separate docs for each frame. Name the docs as seen above.


Second xHTML
Steps:


  1. Open notepad
  2. Save as frames.html
  3. Type as follows:

    Code: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

<html>[INDENT]<head>[/INDENT]
[INDENT=2]<title>Frames example</title>[/INDENT]
[INDENT]</head>[/INDENT]
[INDENT]<frameset rows="10%,80%,10%">[/INDENT]
[INDENT=2]<frame src="/html/header_frame.htm" />[/INDENT]
[INDENT=2]<frame src="/html/main_frame.htm" />[/INDENT]
[INDENT=2]<frame src="/html/footer_frame.htm" />[/INDENT]
[INDENT=2]<noframes>
[/INDENT]
[INDENT=3]<body>
[/INDENT]
[INDENT=4]<p>Your browser does not support frames.</p>
[/INDENT]
[INDENT=3]</body>
[/INDENT]
[INDENT=2]</noframes>
[/INDENT]
[INDENT]</frameset>
[/INDENT]
</html>
  4. Save again
  5. Create the separate docs for each frame. Name the docs as seen above.

What are spans
Span element divides a section of the HTML into a group. This is useful when it comes to CSS.

When to use spans
Spans are in-line element that are used for a small chunk of HTML inside a line such as inside a paragraph. You would use them to, say if you had a sentence in a paragraph and you want it to be a different colour and you will be doing this more than once, then you would wrap that sentence in span tags.

What are divs
The div tag is much like the span but it takes in a whole block of code.

When to use divs
The div tag can be used for a few things, but it is used to wrap around a whole block of code, which can be the body if wanted. It helps with having to divide the page into sections and also helps with CSS, which you will see in the next post.

Steps:


  1. Open skeleton.html in notepad
  2. Save the file as div_span.html
  3. Inside the body tags type as follows:

    Code: 
    <body>[INDENT]<div style="background-color:grey;">[/INDENT]
[INDENT=2]<p>This is my web page.</p>[/INDENT]
[INDENT]</div>

[/INDENT]
[INDENT]<div>[/INDENT]
[INDENT=2]<p>This is the <span style="color:blue;">nicest</span> page I?ve made yet.</p>[/INDENT]
[INDENT]</div>

[/INDENT]
[INDENT]<div="background-color:black;">[/INDENT]
[INDENT=2]<p>Here is some text on my page.</p>[/INDENT]
[INDENT]</div>
[/INDENT]
</body>
  4. Save the file.
  5. Open in browser to see what it looks like so you can see the divs and span.

Breakdown:

There is not much to breakdown here, but please note that i used styling in that example so that you can better see which divs are which and the span.

Play around with the code. You learn more from your mistakes.
Starting from the next post I really suggest messing with the code, cause to learn css quickly that is the only way.

"In life, there are no mistakes, only lessons."
? Vic Johnson, Day by Day with James Allen
 
CSS

​
Welcome to the lovely world of CSS. We have finally learned HTML and now we can move onto the more interesting part of the web, CSS. As said before for HTML there will be terminology here that is unfamiliar to you but by the end of this tutorial you will be able to build a website using HTML and CSS.


What is CSS?
CSS means Cascading Style Sheets. CSS styles a webpage but does not display a webpage, where HTML displays a webpage it cannot style a page. CSS has a hierarchy which it uses to determine which styles will be displayed. The hierarchy is as follows:
  • In-line CSS Rules
  • Internal CSS
  • External CSS
  • Browser defined styles

These above state in which order the rules will be displayed and also if any rules will be over-ridding (Why its called cascading) . If none of the CSS you wrote is used for styling then the browser will determine how it should be styled. For example if you do not say how a table is to be styled the browser will take control and style it.

What is In-line CSS rules?
In-line CSS is where the styling is in line with the HTML code. It is the first step in the hierarchy and over-rides all other styles. It takes a long time to style a page using In-line but it does have its advantages, say if you want to style only 1 piece of the page and you will not be using this style again then In-line is great for this.

What is Internal CSS?
Internal CSS is where the styling is written in the same document as the HTML code but the styling is at the top of the document. You would use this if you had 1 page in your site that you want to have a different styling for, or if you want to change a lot of a single pages styling to be different from the rest.

What is External CSS
External CSS is like internal only that its in an entire different document to the HTML. External CSS is in its own document with nothing else. This is the most common use for CSS and is also the biggest advantage of using CSS. If you have styles that must be repeated in every page or most pages then you would put that style in the external CSS file.

Using external CSS allows you to create a common look across all pages and you only would have to write it once, also if you want to edit a small portion of your website you would only need to edit it once and the change would be seen across all pages. Saving you time writing it in the first place and also editing.



First off we will learn In-line CSS, as the is always the starting point for CSS and also it really shows you why CSS has internal and external. Also it allows you to see what CSS is capable of.

A good website uses a combination of all the different ways to write CSS, the difficult part is figuring out how you want to style the page and also if it should be an Internal style, In-line or External.

In-line CSS
​

In-line CSS Rules are written slightly differently than external and internal. But don?t let that put you off learning it, as it is only a small difference and also you may need to use In-line sometime.

In-line rules cant be over-ridden by any other CSS styles, cause it is at the top of the hierarchy. Best way to learn CSS is to see it in work, so here we go.

With in-line we will be learning majority of CSS, that way you will only have to learn the different syntax for Internal and External and you will fully understand CSS.

Styling Text Using CSS
Today we will be learning the syntax for in-line styles and also we will be learning some of the most commonly used styles for text.

Steps:


  1. Open Skeleton.html in Notepad
  2. Save file as styling_text.html
  3. Type as follows in body:

    Code: 
    <body style="font-family:"Times New Roman"Georgia,Serif;">

[INDENT]<h1  style="color:blue; text-align:center;">This heading is blue and also  it is centered. You can set basic colors using the name of the colors,  but you are limited to choice</h1>

[/INDENT]
[INDENT]<h2 style="color:rgb(255,0,0); text-align:left;"> This heading is red and is left aligned</h2>

[/INDENT]
[INDENT]<h3  style="color:#669900; text-align:justify;"> This heading is using  hexadecimal and is the most common way of coloring text or anything else  in CSS.</h3>
[/INDENT]
[INDENT]<br />[/INDENT]
[INDENT]<h4  style="text-decoration:underline; text-transform:uppercase;"> This  is how you underline text and also how to make it all  uppercase.</h4>

[/INDENT]
[INDENT]<h5  style="text-decoration:line-through;text-transform:capitalize;">  This is how to strike a line through the text and also change the first  letter of each word to uppercase.</h5>

[/INDENT]
[INDENT]<h6  style="text-decoration:overline;text-transform:lowercase;"> This is  how to put an overline above the text and also to make all the text  lowercase.</h6>[/INDENT]
[INDENT]<hr />
[/INDENT]
[INDENT]<p  style="text-indent:50px;text-shadow: 2px 2px #ff0000;"> This  paragraph is indented by 50px and it is also got a shadow.</p>
[/INDENT]
</body>
  4. Save file
  5. Open stying.html in browser to see your styled page


Breakdown:

  • The body tag is declaring which font will be used for the text. The browser will display from left to right in the list, depending on which one the visitor of the page has on the computer.
  • The ?<h1>? tag is set to be blue using the most basic way of styling the color of the text; by just writing the name of the color. The CSS that achieves this is ?color:blue;?.
  • The ?<h1>? is also centered. This achieved by using the property text-align and setting its value to center as shown here ?text-align:center;?
  • The ?<h2>? tag is set to red using rgb. This provides more selection of colors than is provided for the color changing used in the h1 tag. It is wrote like this ?color:rgb(255,0,0);?
  • H2 is also aligned to the left of the page using the text-align property, by setting its value to left.
  • ?<h3>? is using the hexadecimal color system and is the most common color system used on the web. It is wrote like this ?color:#669900;?
  • ?<h3>? is also aligned using the justify value for the property text-align. Wrote like this text-align:justify;.
  • <h4> introduces how to decorate the text using the property text-decoration. h4 is underlined and this is how it is writing text-decoration:underline;.
  • H4 is also the intro for the property text-transform. h4 is all in uppercase.
  • H5 and H6 just show other values for the property text-decoration and text-transform.
  • The paragraph tag has an indent and also shadowing. this was achieved by using text-indent:50px; for the indent, 50px is the distance it is indented and 2px and 2px is the size of the shadow effect applied to the paragraph, the hexadecimal just chooses which colour the shadow will be. text-shadow: 2px 2px #ff0000;.

Play around with the code. You learn more from your mistakes, espically when it comes to CSS. Its all about just trying stuff out.

"In life, there are no mistakes, only lessons."
? Vic Johnson, Day by Day with James Allen
 
The last part of this post is the most important. Practice, practice CSS is art and can only get better with practice guys. You need to experiment to see what works. I know that this post only really deals with text but even text can be art. Look at the amount of tattoos that are just text but each is a piece of art.
 
rob1977 said:
As per usual mate, awesome have really enjoyed it so far
Click to expand...
Thanks man. This is only the beginning. The next few will be basic CSS, near the end of this tutorial I will be going into more advanced CSS and how to efficiently write CSS.

Hope you keep following and also hope you learn how to code like a professional. After this tut is done am sure plenty of people will find it easier to learn xHTML5 and CSS3, because the books that are out now aren't great and hard to follow.


Black.Cat said:
Really good stuff. I like the way the material is presented too.
Click to expand...
Thanks was messing around for a while till i could figure out how to present it.

"In life, there are no mistakes, only lessons."
? Vic Johnson
 
Outstanding thread OP. Thank you for giving back. Hopefully this helps breed a nice little batch of web designers on here.

Wish you the best of luck and continued success on your ventures.
 
sn0rt said:
Outstanding thread OP. Thank you for giving back. Hopefully this helps breed a nice little batch of web designers on here.

Wish you the best of luck and continued success on your ventures.
Click to expand...

Thanks for your kind words. I hope this thread helps a lot of ppl.
 
Styling the Background
​

Today I will be showing you how to style the background of a web page. Always remember to keep the background and the color of the text in contrast, to make sure the page is easily read. Backgrounds can either be an image or just be a plain ordinary color. Backgrounds help to make the site more appealing to visitors.

First I will be showing you how to make a webpage?s background just a single color. I will also be doing:
rbg and hex for color choice,
an image,
gradient, repeat background, background position



Single Color

Steps:


  1. Open skeleton.html in notepad
  2. Save file as background_plain.html
  3. Type as follows inside of the opening body tag:

    Code: 
    <body style="background-color:blue">
  4. Save file
  5. Open in a browser to see the whole page is blue


Steps:


  1. Open skeleton.html in notepad
  2. Save file as background_rgb.html
  3. Type as follows inside of the opening body tag:

    Code: 
    <body style="background-color:rgb(0,0,255)">
  4. Save file
  5. Open in a browser to see the whole page is blue


Steps:


  1. Open skeleton.html in notepad
  2. Save file as background_hex.html
  3. Type as follows inside of the opening body tag:

    Code: 
    <body style="background-color:#b0c4de">
  4. Save file
  5. Open in a browser to see the whole page is light blue


Breakdown for the 3 different pieces of code above:

Above we are using background-color with all the different methods for setting colors.



Image

Steps:


  1. Open skeleton.html in notepad
  2. Save file as background_image.html
  3. Type as follows inside of the opening body tag:

    Code: 
    <body style="background-image: url(https://cdn1.iconfinder.com/data/icons/metro-uinvert-dock/256/Coding_App.png)">
  4. Save file
  5. Open in a browser to see the whole page is the image now


Breakdown:

We are using an image as our background, we archive this by using the background-image followed by the url.



Gradient

Steps:


  1. Open skeleton.html in notepad
  2. Save file as background_gradient.html
  3. Type as follows inside of the opening body tag:

    Code: 
    <body  style="background-image:url(http://idowns.net/uploads/090219/1_235818_1_lit.jpg);  background-repeat:repeat; background-position:right top">
  4. Save file
  5. Open in a browser to see the whole page is small gradient repeated.


Breakdown:


  • We are using a gradient here to be the background by simply using the same as background with a little bit more added.
  • That little bit more is background-repeat which we used to repeat the background.
  • If you wish to use the y axis or just the x axis just do repeat-y or repeat-x.
  • If you have a image you don?t want to repeat use no-repeat.
  • background-position is very self explanatory.




Play around with the code. You learn more from your mistakes, espically when it comes to CSS. Its all about just trying stuff out.

"In life, there are no mistakes, only lessons."
? Vic Johnson, Day by Day with James Allen
 
nice tutorials mate.. thanks.. i have repped u.. :)
 
innosoft said:
nice tutorials mate.. thanks.. i have repped u.. :)
Click to expand...

Thanks. I hope that this benefits a lot of the members here on bhw. Will soon have another post. I hope you will enjoy that post as much as the previous.
 
buckybrendan said:
Thanks. I hope that this benefits a lot of the members here on bhw. Will soon have another post. I hope you will enjoy that post as much as the previous.
Click to expand...

offcourse mate.. its surely gonna help.. looking forward for more tutorials.. :)
 
Internal CSS

​
Hello where you getting a bit sick of written out the same thing over and over again just to make a basic site. We are starting to reduce the amount of code you write and also increase the attractiveness of the site, that is the beauty of CSS.

Now is when we are going to learn the difference between In-line and Internal. The easiest way to learn this is to jump into a simple example with editing our skeleton.html.

Steps:


  1. Open skeleton.html in notepad
  2. Type as follows in the <head> tags:

    Code: 
    <style type="text/css">

body {[INDENT]background-color:#b0c4de;
[/INDENT]
} 
</style>
  3. Save file
  4. Open in a browser to see a light blue background.


Breakdown:

As you can see above by that is not the same way we wrote In-line but is not really all that different. Here just say what tag we are looking to style which is body, then we just open the curly bracket, type our style and close.

Trust me this makes everything easier especially if your working with a lot of HTML code. You will only do it once to style all specific tag/s such as paragraph tags.


Now we will see everything we have previously done up until now, don?t worry as I said there is not much of a difference between In-line and Internal.

Steps:


  1. Open skeleton.html
  2. Save file as txt_background_CSS.html
  3. Type as follow inside the head tags:

    Code: 
    <style type="text/css">

body{[INDENT]font-family:"Times New Roman", Times, serif;
[/INDENT]
[INDENT]background-image:url(http://idowns.net/uploads/090219/1_235818_1_lit.jpg);
[/INDENT]
[INDENT]background-repeat:repeat;
[/INDENT]
[INDENT]background-position:right top;
[/INDENT]
}

h1{[INDENT]color:blue;
[/INDENT]
[INDENT]text-align:center;
[/INDENT]
}
h2{[INDENT]color:rgb(255,0,0);
[/INDENT]
[INDENT]text-align:left;
[/INDENT]
}

h3{[INDENT]color:#669900;[/INDENT]
[INDENT]text-align:justify;
[/INDENT]
}

h4{[INDENT]text-decoration:underline;[/INDENT]
[INDENT]text-transform:uppercase;
[/INDENT]
}

h5{[INDENT]text-decoration:line-through;[/INDENT]
[INDENT]text-transform:capitalize;
[/INDENT]
}

h6{[INDENT]text-decoration:overline;[/INDENT]
[INDENT]text-transform:lowercase;
[/INDENT]
}

p{[INDENT]text-indent:50px;
[/INDENT]
[INDENT]text-shadow: 2px 2px #ff0000;
[/INDENT]
}

</style>
  4. Save file
  5. Open in a browser and see it is exactly what we have already covered with In-line.


Breakdown:

I flew threw this since we already covered it but it should help you remember this syntax as it will be used for the remainder of this tutorial. In the above code you can easily see every style rule you have written and see what style is applied to all tags.

There is a little bit more that will be covered on the syntax of Internal. Remember I did say less coding is involved well there is also much more styling options available.

See above in the code you wish to style a tag like say h6. You can see that below it is curly braces and that the rules are put inside the curly braces but on a different line, this is done for readability reasons.
By having the styles away from the HTML code we can easily read the styling and also add more content into the HTML without struggling to find where you exactly need it to be in the code.

In the next post we will be learning how to style links,tables and lists.


Please remember to change this code as you please. It will help you learn.
"In life, there are no mistakes, only lessons."
​
? Vic Johnson, Day by Day with James Allen
​
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top