1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[Tutorial] Learn xHTML/HTML and CSS

Discussion in 'Web Design' started by buckybrendan, Sep 23, 2013.

  1. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    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
     
    • Thanks Thanks x 21
  2. roach

    roach BANNED BANNED

    Joined:
    Sep 8, 2009
    Messages:
    740
    Likes Received:
    395
    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. :)
     
    • Thanks Thanks x 1
  3. t0mmy

    t0mmy Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jun 5, 2011
    Messages:
    6,252
    Likes Received:
    12,482
    Location:
    Ireland
    Home Page:
    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
     
    • Thanks Thanks x 1
  4. rob1977

    rob1977 Power Member

    Joined:
    Mar 25, 2013
    Messages:
    773
    Likes Received:
    666
    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 Thanks x 1
  5. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    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.
     
  6. gullsinn

    gullsinn Jr. VIP Jr. VIP Premium Member

    Joined:
    Dec 24, 2009
    Messages:
    2,429
    Likes Received:
    2,210
    Gender:
    Male
    Occupation:
    Jobless :D
    Location:
    Graveyard
    Home Page:
    Great start Op. I am looking forward for some advance tuts on html5 and ccs3.
     
  7. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    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.

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

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,364
    Likes Received:
    5,425
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    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 :)
     
    • Thanks Thanks x 1
  9. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    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.

     
  10. nanavlad

    nanavlad Jr. VIP Jr. VIP Premium Member

    Joined:
    Dec 2, 2009
    Messages:
    2,420
    Likes Received:
    892
    Gender:
    Male
    Occupation:
    SEO Consultant
    Location:
    Proxy Central
  11. tompots

    tompots Elite Member Premium Member

    Joined:
    Dec 11, 2011
    Messages:
    4,352
    Likes Received:
    3,955
    Gender:
    Male
    Occupation:
    Full Time Bot Developer
    Location:
    Professional Botters
    Home Page:
  12. Dakarois

    Dakarois Regular Member

    Joined:
    Jun 3, 2013
    Messages:
    224
    Likes Received:
    122
    Location:
    Une poutine avec ça
    I am the same way. Will definitely follow this thanks
     
  13. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    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
     
    • Thanks Thanks x 4
  14. rob1977

    rob1977 Power Member

    Joined:
    Mar 25, 2013
    Messages:
    773
    Likes Received:
    666
    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: Sep 24, 2013
  15. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    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.
     
  16. buckyaustin

    buckyaustin Newbie

    Joined:
    Aug 27, 2013
    Messages:
    32
    Likes Received:
    24
    Occupation:
    Web Developer
    Location:
    Ireland
    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.
     
  17. Solozzo

    Solozzo Newbie

    Joined:
    Sep 25, 2013
    Messages:
    18
    Likes Received:
    2
    Home Page:
    Thank you for this valuable content mate. :)
     
  18. buckyaustin

    buckyaustin Newbie

    Joined:
    Aug 27, 2013
    Messages:
    32
    Likes Received:
    24
    Occupation:
    Web Developer
    Location:
    Ireland
    Welcome to BHW. Brendan will be posting even more, so make sure you don't miss out on the future posts.
     
  19. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    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
     
    • Thanks Thanks x 4
  20. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    This is a correction for the first post in this thread.