• xhtml RSS Feed

    by Published on 03-05-2010 10:11 PM
    1. Categories:
    2. Html,
    3. Css

    So far throughout our XHTML tutorials we have learnt the basics of how to structure our XHTML files. This article will introduce CSS so that you can start applying designs to your websites.

    We will use the code from the XHTML div example and expand upon it adding the CSS code.

    If you have no prior knowledge of CSS then you may wish to consult the CSS tutorials section and then come back to this guide for implementing XHTML and CSS.

    There are various ways to apply CSS to your XHTML, a simple way is to add the code directly to the tags with the style attribute, this is useful when drafting work but can make your code look extremely messy when you start to add more complicated code. Keeping all of the CSS in one place allows us to see it more clearly and know which part needs editing in the future to make changes easy.

    The method we shall be using will be applying the CSS straight to the tag names, if we have two of the same tags but only wish to apply the CSS to one of those tags then we can add an id attribute to the tag as such:

    HTML Code:
    <div id="header"></div>
    ...
    by Published on 01-06-2010 02:37 PM
    1. Categories:
    2. Html

    This brief tutorial will give you an overview of how the div tag can be used. The div tag is used for grouping information more clearly and for applying designs and styles to web pages. To keep things simple we will introduce you to using divs for layout here and then come back to the designs part in a few tutorials time.

    How to use the Div tag

    HTML Code:
    <div>You can then place content within.</div>
    Unlike previous tags the Div tag supports using other tags within it such as links, images, lists, etc. A new attribute that now becomes very useful is the id attribute. This attribute let's us name content within the page, we can then reference and talk to those parts of code to apply more advanced code or styles with css.

    Here is an example of how you would use the ...
    by Published on 01-01-2010 10:42 PM
    1. Categories:
    2. Html
    Article Preview

    Another important feature of websites is the ability to use media such as images, So far all XHTML tags have basically been shortened words of what the actual tag stands for. The image tag is no exception to this and is very simple to use, the following is an example of how to include an image within the same folder of your XHTML file that we setup in the first tutorial.

    HTML Code:
    <img src="mypicture.jpg" alt="My Picture" />
    The above example would show an image called mypicture.jpg that is located within the same folder as the XHTML page. You will note that the tag needs one attribute which is src.

    src simply stand for Source, so you are telling the img tag where to look for the image, this source can reference any image location on the internet but if you are supplying a source that is not in your folders and somewhere else then you must use a full url.

    In this web standard and alt attribute is required, alt simply means alternative content incase that image fails to load, For our example we'll just make up a title for the image, this is good practise because ...
    by Published on 12-31-2009 12:26 PM
    1. Categories:
    2. Html

    Today we shall be teaching you some more advanced XHTML tags, you'll be able to implement these into the code you have already learnt to being optimizing the layout of your site.

    The first XHTML tag to be explained in this article is the:

    Break Tag

    HTML Code:
    <br/>
    This tag is a break tab, if you think when you write text that the text is all in one line, but you wish to break the content into two lines then ...
    by Published on 12-24-2009 10:48 PM
    1. Categories:
    2. Html

    As you have previously been introduced to basic XHTML tags and how a XHTML file should be formatted we can expand your knowledge of tags and progress onto more advanced tags. Hundreds of different tags exist and in my 8 years or so of coding I've probably not even used half of them as they can be for very specific tasks.

    At the moment you know how to open and close html and body whilst also creating headers. Lets get onto how to insert more content in the actual body along with the headers.

    Another simple tag is the paragraph tag, you can use this to insert a paragraph of which you can insert any amount of text into. The code for this is simply:

    HTML Code:
    <p>Text Here</p>
    So if we expand the html file you have created in the last two tutorials then you could now have something like this:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    ...
    by Published on 12-23-2009 08:24 PM
    1. Categories:
    2. Html

    Congratulations on getting through the first tutorial, so far everything that you've learnt has been simple, This tutorial will teach you how to create a basic XHTML page and the general use of some XHTML code.

    Firstly you need to find that html page you created in the first page or if you are already familiar with filetypes then create an empty html file.

    When you have found the html file you created, Right Click the file and select Open With, In the list that appears look for Notepad and if there then select this, else you must select the Choose deafult program, this will then open another menu where you till have to look for Notepad.

    You should now have a blank Notepad page that allows you to type within it, if so you are ready to get coding.

    The very first part of any XHTML page is the DTD, this tells the browser the syntax of the document and how it should be read, We will be using transitional as that is the best doctype to begin coding with. To begin your file copy the following onto the first line.

    HTML Code:
     
    ...
    by Published on 12-22-2009 10:51 PM
    1. Categories:
    2. Html

    Here is the most important page of information that you will learn if you are a complete newcomer to Creating Websites. Within this article we will cover everything needed to allow you to create your very own functioning website page.

    I advise you now to Bookmark/Favourite this page so you ...

  • Stay Updated