[Tutorial] Learn xHTML/HTML and CSS

B

buckybrendan

Registered Member
Joined
Aug 6, 2013
Messages
64
Reaction score
72
I''m sick of most of these website development tutorials, they promise the moons and the stars while delivering nothing. Well I won't be doing that here. I will give you the understanding of xHTML 1.0/HTML 4 and CSS from the foundation up until the house is built, that will get you on your long road to website development success.

?Any fool can know. The point is to understand.?
? Albert Einstein

There will terminology unfamiliar to you, but by the end it will be part of your daily vocabulary.

What is HTML?

HTML stands for Hypertext Markup Language and xHTML stands for Extensible HTML. These are markup languages with predefined tags.

A markup language, what does this mean?

Well a markup language is a language that is based on tags (example '<html>') nested in each other, that are valid and well formed. Valid means that the script obeys the rules for the specific language in this case xHTML. Well formed means that it is easily read by any machine with a browser and is correctly nested.

What are Tags?

Tags are special words inside of angle brackets(greater than > and less than <). There are opening tags such as this '<html>' and closing tags e.g. '</html>'. Each tag must be closed in order to be valid.Other tags such as '<hr />' and '<br />', these tags are wrote like this because they have no closing tags and in xHTML all tags must close.

What the hell is nested?

Nested means that there is a root tag, that all other tags are stored within. Tags that hold other tags within them are the nests. Tags that are in a nest are said to be nested.

Example:
HTML: 
<html>
        <head> </head>
</html>

Head is nested in the HTML tags. If this is unclear, you will start to understand it when you begin coding.

I will be adding a few posts each day until completed. I choose to do this because this will give you time to research/ask questions on any concepts that may be confusing to you and also in other posts it will provide you with time to play around with the code and practice.

A skeleton HTML
​

A skeleton is the bare-bones with no flesh. In HTML the bare-bones is a HTML file that displays nothing on the clients browser. Lets create your first website. For now it does nothing, because it is a skeleton.

Steps:

  1. Open notepad and save the file as skeleton.html
  2. Type the following code.
    HTML: 
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html>
            <head> 
                <title> Skeleton </title>
            </head>
            <body>
            </body>
        </html>
  3. Save the file again
  4. Right click on the file and open with your browser [firefox, chrome, safari or Internet Explorer]

Breakdown:
I'll explain doctypes in the last post. Saving the file as .html tells the operating system that this file is a HTML file. The ?<html>? ?</html>? tag is the root tag, with all other tags nested in it. This root tag tells the browser to interpret the code as HTML.The head section tells the browser information about the website like the keywords, the scripts to use as well as CSS. Title is nested in head, this is just the title of this page, it will be displayed not on the page but on the tab, or top of the browser, depends on your browsers interpretation of HTML.Body is not nested in head, but is nested in HTML. This is where the web page as you see it will be, The text, the images, everything.

Tip: Make sure to use correct indentation as I have above. It makes it easier to read your HTML and did you notice the nesting? Also makes it easier to read your HTML for debugging and for the next person who has to look at your code.

Remember as you go along mess around with the code. You learn more from your mistakes.

?In life, there are no mistakes, only lessons.?
? Vic Johnson, Day by Day with James Allen
 
Advertise on BHW
Hey thanks for taking the time to help the community. I am sure several noobs will find this info very useful. I appreciate you sharing. I just wish more people would share and stop begging.. LOL once again, thanks OP. :)
 
Nice one Brendan looking forward to reading the follow ups!

I know Brendan and his brother IRL they have plenty of knowledge to share, no doubt this is just the beginning
 
Agreed nice simple informative post my experience of html et al comes from butchering ready made code. I don't know why it works the way it does. I just know it does so this has been an interesting wee intro
 
Thanks guys. Was kinda nervous that this post would end up being a waste of time. Just glad it will be of some help to others.
 
Great start Op. I am looking forward for some advance tuts on html5 and ccs3.
 
Thanks appreciate the support.

I might do that depending on how well this thread goes. If no body seems interested in this then it wont be easy to teach them HTML5 and CSS3. Plus xHTML5 came out this year so learning xHTML1.0 will help ppl learn xHTML5.

gullsinn said:
Great start Op. I am looking forward for some advance tuts on html5 and ccs3.
Click to expand...

?In life, there are no mistakes, only lessons.?
? Vic Johnson, Day by Day with James Allen
 
Very nicely done OP. Only thing I can critique is the colour of the font you've used for your code. I can't read it without highlighting it.

Otherwise, great job. I look forward to more tutorials from you :)
 
Yeah i found that problem as well. but bhw has certain coding tags for html and that is the default colour for them. When i make the next post later today i will check out how to change the colour thanks for the advice.

Treeofl1 said:
Very nicely done OP. Only thing I can critique is the colour of the font you've used for your code. I can't read it without highlighting it.

Otherwise, great job. I look forward to more tutorials from you :)
Click to expand...
 
This is a great share for the members for BHW I will we watching and waiting for more great post on your thread.
 
rob1977 said:
Agreed nice simple informative post my experience of html et al comes from butchering ready made code. I don't know why it works the way it does. I just know it does so this has been an interesting wee intro
Click to expand...

I am the same way. Will definitely follow this thanks
 
Putting text on the page

​
Today we will learning to put text on a page. We will see all the different tags involved that can put text on the page.
We also we be learning to add Hyperlinks to a page.

Steps:

  1. Open up skeleton.html with notepad.
  2. Go to file and save as index.html.
  3. Saving it as index is the standard for the home page of websites. When the browser goes to the web server it will be looking for index.html, index.php,index.jsp or index.asp.
  4. Within the body tags type this out as follows below. You can use any text you want but use words and sentences not random letters, because you wont know which tag is which when you load the HTML in you browser.

Code: 
<body> 
    <h1> This is the biggest header </h1>
    <h2> This is the second biggest</h2>
    <h3> This is the third biggest</h3>
    <br />
    <h4> There is a break above this. Notice how these headers are getting
    smaller?</h4>
    <h5> This is the second smallest</h5>
    <h6> This is a tiny header</h6>
    <hr />
    <p> This is a paragraph. Above this is a horizontal rule. </p>
</body>

5. Open this in a browser and see what you have created.


Breakdown:


  1. ?<body>? tag, all content that is to displayed on a page is put here. So we have to nest all text tags inside of the body tag as demonstrated above.
  2. ?<h1>? through to ?<h6>?, these are the heading tags. The largest heading tag is the ?<h1>? and so on until ?<h6>? which is the smallest.
  3. ?<br />? tag is just a break point. It just means move onto the next line. Like entering enter at the end of a paragraph in word.
  4. ?<hr />? tag inserts a horizontal rule across the page, its just a line that goes through the page to separate the content on page.
  5. ?<p>? tag is the paragraph tag, and is clearly used to enter text for a paragraph. If you want the text in a paragraph just put that text in between the opening (?<p>?) and closing (?</p>?) tags.

Play around with the code. You learn more from your mistakes.

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

Links
​

Links as you all probably know, are what take you from one page to another page. They come in all shapes and sizes, from
text to images.


  1. Open up skeleton.html in notepad again
  2. Go to file and this time save it as links.html.
  3. Within the body tags again type this out;

Code: 
<body>
        <a href = "test.html#bottom"> Go to the bottom of the page.</a> 
        <a href = "test.html#img"> Go to the image.</a>
        <br />
        <a href = "http://www.google.com/"> Go to google.</a>

        <br />
        <p> Now to introduce how to implement images.</p>
        <a name = "img">
        <img src= "https://cdn1.iconfinder.com/data/icons/metro-uinvert-dock/256/Coding_App.png" />
        </a>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <p> This time with a link attached to it</p>
        <a href = "http://www.google.com/"> 
        <img src="https://cdn1.iconfinder.com/data/icons/metro-uinvert-dock/256/Coding_App.png" />
        </a>

        <a name = "bottom"> Well done. </a>
</body>

Save this and open it with a browser and see how each link works. Well that is everything you need to know about links.

Breakdown:


  1. Links are just the anchor tags, '<a> </a>'
  2. '<a = #bottom>' and '<a= #img>' are giving names to anchor tags, to distinguish them from others. They are paired with the '<a name = ?bottom?>' and '<a name= ?img?>'. You can use any name for the anchor tags as you please. Just make sure it pairs up.
  3. ?<a href? is then followed by the url that the link will redirect to.
  4. ?<a name?> is used to tell the <a =#??> tag where the link actually brings the user.
  5. I will explain images later in another post. But to link an image just put an anchor tag before and after the image tag.
  6. Normally you wouldn't put so many '<br />' tags in, but this is just a tutorial not a live website. There are ways to break down like that, just using php.

Play around with the code. You learn more from your mistakes.

?In life, there are no mistakes, only lessons.?
? Vic Johnson, Day by Day with James Allen
 
Really enjoying your tutorial mate. The amount of guff and chapters of books you would have to wade through to reach this point. Excellent.

I know you are planning html and css tut's but I would love to see how you put across JavaScript and php. I know your doing this as a favour so I'm asking a lot. But it is great how the penny Is finally dropping.

Thanks again.
 
Last edited:
rob1977 said:
Really enjoying your tutorial mate. The amount of guff and chapters of books you would have to wade through to reach this point. Excellent.

I know you are planning html and css tut's but I would love to see how you put across JavaScript and php. I know your doing this as a favour so I'm asking a lot. But it is great how the penny I as finally dropping.

Thanks again.
Click to expand...

I have a partner that will be putting up a tutorial soon, will talk to him about that. If it is in demand then it will certainly be an option.
 
Well this is a really well written out tutorial, interesting read. Hope mine comes out like this. Any questions on the tutorial guys would be very appreciated, Brendan and I will be available to answer any questions. If you have any suggestions please inform us in anyway you can, we will take all criticism as constructive.

Can't wait to do my tutorial soon guys. The feedback here has been astonishing.
 
Working with Images
​
In the last post I showed you how to call images, and I used an image that was small enough to look good on a screen. Resize images using PhotoShop or another image manipulating software. But for this tutorial, I would feel bad if I didn't show you how to work with images.


I will explain Background images when we get to CSS.

Steps:


  1. Open up skeleton.html in notepad again
  2. Notice how helpful skeleton was? You will never have to type that all out again.
  3. Go to file and save as
  4. Save it as images.html
  5. Within the body tags type this;

    Code: 
    <img src=     "https://cdn1.iconfinder.com/data/icons/metro-
uinvert-   dock/256/Coding_App.png"  alt="description of the image"
width="304" height="228"/>
  6. Save this and open it with a browser and see how image looks like.

Breakdown:


  • "<img>" is the tag the inserts the image.
  • src stands for source and it tells the browser where to find the image.
  • alt stands for alternate text. This is used when the image cant be displayed and also is used for people with bad eye sight, and use software to read the page for them. It also helps for seo to have this. Use a phrase that describes the image.
  • When creating an image you can size the image as required using the width and height attributes. I advise using an image manipulation software to resize the image and using them dimensions in the width and height attributes.This will ensure that all browsers show the image as intended.


Play around with the code. You learn more from your mistakes.

"In life, there are no mistakes, only lessons."
? Vic Johnson, Day by Day with James Allen
Lists and tables
​

List and tables are used to display information in a more user friendly way. Up until now you have been using single line codes, now lets add multi-line codes. There the same but, as you can tell I have put a lot more effort into planning this than even some books do.

In the past tables where used for layout of a page, this is no longer the case so use tables as they were intended.

Steps:


  1. Open skeleton.html in notepad
  2. Save the file as lists_tables.html
  3. Type the following code inside of the body tags:

    Code: 
    <body>
                <h5>This is a unordered list</h5>
                <ul>
                    <li>This is just a bullet list</li>
                    <li>You can put anything inside these lists</li>
                </ul>
                <h5>This is an ordered list<h5/>
                <ol>
                    <li>This is just a numbered list</li>
                    <li>Same as above can put anything in here even another list</li>
                </ol>
                <h5>This is a table</h5>
                <table border="1">
                    <tr>
                        <td>row 1, cell 1</td>
                        <td>row 1, cell 2</td>
                    </tr>
                    <tr>
                    <td>row 2, cell 1</td>
                    <td>row 2, cell 2</td>
                    </tr>
                </table>
            </body>
  4. Save the file again
  5. Right click on the file and open with your browser [firefox, chrome, safari or Internet Explorer]

Breakdown:


  • "<ul>" is the tag used to insert unordered lists.
  • "<ol>" is the tag used to insert ordered lists.
  • "<li>" means list item. This is used to put the content in the list.
  • "<table>" is used to insert a table in the page. I added a border so you can see the whole table.
  • "<tr>" stands for table row. It simply adds a row to the table and at least one is required.
  • "<td>" stands for table data. It adds the content to the table. The first "<td>" nested in the "<tr>" is the first
    cell in the table, the second "<td>" is the second cell and so on.


Play around with the code. You learn more from your mistakes.

"In life, there are no mistakes, only lessons."
? Vic Johnson, Day by Day with James Allen
 
This is a correction for the first post in this thread.

buckybrendan said:
  1. Code: 
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1
         /DTD/xhtml1-transitional.dtd">
        <html>
            <head> 
                <title> Skeleton </title>
            </head>
            <body>
            </body>
        </html>
Click to expand...
 
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