1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Creating HTML document

Discussion in 'Web Design, HTML And CSS Tutorials' started by Sanskruti, May 7, 2007.

  1. Sanskruti

    Sanskruti New Member

    Creating an HTML document is easy. To begin coding HTML you need a simple-text editor. Notepad is the most basic of simple-text editors and you will probably code a fair amount of HTML with it. HTML has not been around for many years. November 1990 marks the day of the first web page and back then there were little to no HTML standards to be followed. A group called the World Wide Web Consortium was then formed and have since set the standards that are widely accepted and we will base our teachings around them. Web pages have many uses. Here are some important facts about why web pages are so useful.
    • A cheap and easy way to spread information to a large audience.
    • Another medium to market your business.
    Tag - Used to specify ("mark-up") regions of HTML documents for the web browser to interpret. Tags look like this: <tag>
    Element - A complete tag, having an opening <tag> and a closing </tag>.
    Attribute - Used to modify the value of the HTML element. Elements will often have multiple attributes.

    For now just know that a tag is a command the web browser interprets, an element is a complete tag, and an attribute customizes or modifies HTML elements.An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag.
    1. <p> - opening paragraph tag
    2. Element Content - paragraph words
    3. </p> - closing tag
    Every (web)page requires four critical elements: the html, head, title, and body elements.

    The <html>...</html> Element

    <html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document.

    If you haven't already, open up Notepad and have a new, blank document ready to go. Copy the following HTML code into your text editor.
    Now save your file by Selecting Menu and then Save. Click on the "Save as Type" drop down box and select the option "All Files". When asked to name your file, name it "firstpage.html", without the quotes. Double check that you did everything correctly and then press save. Now open your file in a new web browser so that you have the ability to refresh your page and see your changes.If you opened up your firstpage.html document, you should be starring at your very first blank (white) web page!

    The <head> Element

    The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag and your web page content (<body>), you're golden. The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers. Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next.
    As of yet, we still have nothing happening on the web page. All we have so far is a couple of necessary elements that describe our document to the web browser.

    The <title> Element

    Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Here's the html code:
            <title>My First WebPage!</title>
    Save the file and open it in your browser. You should see "My First WebPage!" in the upper-left, as the window's title.

    The <body> Element

    The <body> element is where all content is placed. As the menu on the left suggests, we will be looking at each of these elements in greater detail as the tutorial progresses. For now, it is only important to understand that the body element will encapsulate all of your webpage's viewable content.
            <title>My First WebPage!</title>
        <body>Hello World! All my content goes here!</body>
    A web browser reads an HTML document top to bottom, left to right. Each time the browser finds a tag, it is displayed accordingly (paragraphs look like paragraphs, tables look like tables, etc). Tags have 3 major parts: opening tag(s), content(s), and closing tag(s). Recall that a completed tag is termed an element. By adding tags to an HTML document, you signal to the browser "Hey look, I'm a paragraph tag, now treat me as such."As you will learn, there are probably hundreds of HTML Tags. Tables, images, lists, forms, and everything else being displayed on an web page requires the use of a tag or two.
    <p>A Paragraph Tag</p>
    Tags should be lower-case letters if you plan on publishing your work. This is the standard for XHTML and Dynamic HTML. Here's quick look at some HTML tags.

    <body>Body Tag (acts as a content shell)
        <p>Paragraph Tag</p>
        <h2>Heading Tag</h2>
        <b>Bold Tag</b>
        <i>Italic Tag</i>
    Tags Without Closing Tags

    There are a few tags that do not follow the mold above. In a way, they still have the 3 parts (opening/closing and content). These tags however do not require a formal </closingtag> but rather a modified version. The reason being that these tags do not really require any content. Rather some of them just need a source URL and this is enough information for the web browser to display the tag properly (image tags)
  2. billharry

    billharry New Member

    good article. This really a helpfull for freasher.
  3. yujiro1982

    yujiro1982 New Member

    thanks that was very insightful. I'm trying to create my own forum and i really don't have much of a grasp of where to start hopefully this will help.
  4. haileyjonathan

    haileyjonathan New Member

    Your ideas is great .. You have given a html coding briefly explain this thread.. keep it up....thank you...
  5. sv.pradeep

    sv.pradeep New Member

    great article fro a beginner...Thanks buddy..!!
  6. TechnoDemon

    TechnoDemon New Member

    The HTML script itself is easy if you first design the page in a designing application such as CorelDRAW, then type the script in notepad. You know, it's difficult to set the parameter if you don't have the draft.
    The only mistake you can make is by forgetting to add a slash " / " before the ending tag.
  7. gkumar

    gkumar New Member

    Thanks very much.It is very nice post and very helpful every one.
  8. gkumar

    gkumar New Member

    In this way we can create HTML document.
    1. Start Microsoft Word.
    2. In the New Document task pane, click Blank Web Page under New.
    3. On the File menu, click Save.

    NOTE: The Save as type box defaults to Web Page (*.htm; *.html).
    4. In the File name box, type the file name that you want for your document, and then click Save.

Share This Page