HTML basics : getting started coding

Discussion in 'Tutorials' started by sankalpgarud98, May 6, 2011.

  1. sankalpgarud98

    sankalpgarud98 New Member

    Messages:
    108
    Likes Received:
    0
    Trophy Points:
    0
    Ever wanted to make your own site and dont know how to do it, its quite easy just you need to know the basics...
    The following article is an excerpt from http://adobewhatisit.com/and teaches how to get started with html
    Visit the site to learn more...

    Are you guys excited? Well if you are and you promise me that you will read this article and future articles (http://adobewhatisit.com/ )word by word, then I’ll make a promise to you that I can make you comfortable with this language.
    For starters, open your favorite text editor(for more info on text editors, look at article no.2 in the same title.). It is a general practice while learning a new language to render out the hello world page. That is, you are going to learn how to create a html page that displays the text “hello world”.
    Once you have your text editor open, delete everything what is there. Some text editors provide with basic HTML template, as that is pretty good, we want to learn what’s actually going on , so just clear the text area. Now, each and every HTML document consists of tags. What are tags, they are html specific words enclosed within angle brackets OR <> .
    To let your browser know to treat our document as an HTML file we need to declare it for the browser. To do that, type in
    <html>
    In your plain text area. Most of the HTML tags (Atleast all basic tags) need to be closed. We need to declare when the tag is closing. To avoid the remembrance of closing the html tag we just typed, we will close it right now. Any tag in HTML is closed in the following manner. </ tagname>
    So this should be our code up till now.
    <html>
    </html>

    At this point please note these small yet important things. In html, the browser ignores all white spaces (in tags, not in text) . So starting or closing a tag may not harm at any cost. There is no compulsion whether you should close your tag on the same line or so. You may have several new lines. Its just a matter of getting your code organized so that after months when you look at the code, you may be able to identify what thing does what. Another thing is that HTML tags are not case sensitive. Meaning the above tags can also be <HTML> or <HtMl> or so…

    Next lets create the body of the text. Today we are just going to do basic stuff so, it is not as easy as this. But for today, now lets add the opening and closing body tags. Here is the code up till now.

    <html>
    <body>
    </body>
    </html>

    The body tags decide what things are to be displayed in the main browser screen. And if you have guessed that there may be a head tag and a leg tag as well, then congratulations there is a head tag with which you set a page title but sadly no leg tag [​IMG] . Anyways we are not goinna do it today. For now just type in hello world after the first body, it might be on a new line as blank spaces are ignored. Remember there should be no angle brackets this time. You want to display your text as it is, right? Code we have managed to get to :


    <html>
    <body>
    Hello World! <br> This is my first webpage
    </body>
    </html>

    Notice ive also typed this weird thing (<br>) . Well what that is doing is pressing enter or return for you because you what, HTML ignores blank spaces… I just explained it to you. If you are not getting what Im trying to say, then Ive probably caught you napping, you may consider re-reading the article [​IMG] . Anyways, you can add multiple <br>’s to get as many line breaks as desired.
    Now the final thing to do is save the file and in the dialog box, save the file as a .html extension . If you’re using notepad for instance, then its default is .txt , so you need to change it to .html . Now open this file in your browser and you must see “hello world ! and on the next line This is my first webpage”.

    Notice all the tags have just vanished, well that’s html for you. You can always check the html of any site by right clicking on the site and then choosing view source .

    If you are not getting your results, then try comparing your code with mine. May be some typo . That’s it from me, adios.
     
  2. totaln6414

    totaln6414 New Member

    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    Thank you for this tutorial. Sometimes its better to start from the beginning in learning something.
     
  3. sankalpgarud98

    sankalpgarud98 New Member

    Messages:
    108
    Likes Received:
    0
    Trophy Points:
    0
    yes man its always good...
    whats the use of cutting a tree when the saw aint sharpened? :D
     
  4. catkluge51

    catkluge51 New Member

    Messages:
    6
    Likes Received:
    0
    Trophy Points:
    0
  5. denzil

    denzil New Member

    Messages:
    134
    Likes Received:
    3
    Trophy Points:
    0
    In XHTML the <br> tag must be closed and looks like this <br />
     
  6. sankalpgarud98

    sankalpgarud98 New Member

    Messages:
    108
    Likes Received:
    0
    Trophy Points:
    0
    tthats true, but in xhtml ... :D
     
  7. denzil

    denzil New Member

    Messages:
    134
    Likes Received:
    3
    Trophy Points:
    0
    lol didn't mean to hi-jack your tutorial ^^, just thought I'd throw in some pointless info.
     
  8. Interscopia

    Interscopia x10 Caffeine Addict Prime Account

    Messages:
    180
    Likes Received:
    3
    Trophy Points:
    18
    It isn't pointless, a good piece of advice if you ask me.
     
  9. alduhoo

    alduhoo New Member

    Messages:
    14
    Likes Received:
    0
    Trophy Points:
    0
    if you´re gonna learn html, i recommend taking a look at XHTML too..
     
  10. misson

    misson Community Paragon Community Support

    Messages:
    2,572
    Likes Received:
    72
    Trophy Points:
    48
    <br/> is hardly ever semantic. Use <p> for paragraphs (which are styled by default to have 1em top and bottom margins), or set CSS margins for other elements. This "tutorial" leaves out many other essential aspects of HTML, such that HTML is used to define the structure of a document and that structure is a tree structure, so that elements must be nested, never interleaved (e.g. no "<span>lorem <em>ipsum</span> dolor</em>").
     
  11. callumacrae

    callumacrae not alex mac Community Support

    Messages:
    5,257
    Likes Received:
    97
    Trophy Points:
    48
    I don't like the way you're formatting your code. How about using one of the many freely available syntax highlighter plugins?

    EDIT: <font> is deprecated, please don't use it!
     
    Last edited: Jul 22, 2011
  12. seanpdoyle1676

    seanpdoyle1676 New Member

    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
  13. soulflare3

    soulflare3 New Member

    Messages:
    41
    Likes Received:
    0
    Trophy Points:
    0
    Good post, will be useful for those just starting out.

    I think a lot of people are scared off from HTML, XHTML, JavaScript, CSS, etc. because it looks really hard, but they don't realize that once you get started, it's actually quite easy :)
     
  14. misson

    misson Community Paragon Community Support

    Messages:
    2,572
    Likes Received:
    72
    Trophy Points:
    48
    Bad post, because it gets people started on the wrong foot, conceptually, so they end up producing bad code.
     
  15. sankalpgarud98

    sankalpgarud98 New Member

    Messages:
    108
    Likes Received:
    0
    Trophy Points:
    0
    hey mates,
    i appreciate the comments but i think you are taking it more conceptually. However i have not produced this code to take it conceptually, this post should be taken thematically. I am aware of the structure and semantics, just wanted to make a basic guide. If i were to take care of all the semantics, then the guide would no longer would have been amateur specific.
    anyways,
    thanks again.
     
  16. callumacrae

    callumacrae not alex mac Community Support

    Messages:
    5,257
    Likes Received:
    97
    Trophy Points:
    48
    Would you consider it acceptable to sell someone who is building a car as a hobby dodgy parts?
     
  17. LostHorizon

    LostHorizon Member

    Messages:
    42
    Likes Received:
    1
    Trophy Points:
    8
    Hi all,

    With the utmost RESPECT to the author of the original post (I don't mean to step on anybody's toes here), I'd like to add my own TWO CENTS in this tutorial in regarding to the basic HTML codes in the thread's first post:

    Code:
    <html>
    <body>
    Hello World! <br> This is my first webpage
    </body>
    </html>
    

    ********

    1. First of all, the VERY FIRST LINE in every HTML document SHOULD be <!DOCTYPE ...> to let the browser know specifically what version of HTML, namely the Document Type Definition (DTD), is used in the document (the DTD defines the syntax of the HTML markup constructs). This will also help the page(s) to be rendered/displayed exactly the same in ALL modern browsers with the exception of the spacing used in the HTML elements' margin and padding.

      For HTML 4.01, currently, there are 3 Document Type Definitions:

      • The HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

      • The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation). For documents that use this DTD, use this document type declaration:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

      • The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well. For documents that use this DTD, use this document type declaration:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

      (http://www.w3.org/TR/html4/struct/global.html#version-info)

      For new beginners to HTML, I would strongly advise the use of the "strict.dtd" since it'll prevent the "accidental/unwitting" use of any HTML element that's going to be deprecated in future HTML versions.

    2. Second, ALWAYS declare the encoding of your document, i.e., each HTML document SHOULD/IS REQUIRED to specify explicitly (in the <HEAD> section via the <META> HTML tag) its document's character encoding (to promote servers/user agents' interoperability, and to ensure proper HTML page interpretation). For example:

      <META http-equiv = "Content-Type" content = "text/HTML; charset = UTF-8">

    3. And third, use block-level container elements like <P></P>, <DIV></DIV>, <H1></H1>, ... in the <BODY> section to wrap around your text.

    Oh yeah! (I almost forgot) Indentation of the codes would HELP too (at least for the readability part).

    With all this being said, putting them together, hence the VERY LEAST basic HTML codes for a very basic "Hello World!" HTML document should resemble something like this:

    Code:
     1     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/[COLOR="red"]strict.dtd[/COLOR]">
     2     <HTML>
     3
     4     <HEAD>
     5        <TITLE>Hello World!</TITLE>
     6        <META http-equiv = "Content-Type" content = "text/HTML; charset = [COLOR="red"]UTF-8[/COLOR]">
     7     </HEAD>
     8
     9     <BODY>
    10        [COLOR="red"]<P>[/COLOR]Hello World!<br>This is my first webpage.[COLOR="red"]</P>[/COLOR]
    11     </BODY>
    12
    13     </HTML>
    
    OUTPUT:

    Hello World!
    This is my first webpage.


    NOTE: To all beginners, since you're new to HTML, I just thought that you ought to start on a RIGHT NOTE.


    ********
    You can find a full document on the current HTML 4.01 specification at:
    http://www.w3.org/TR/html4/
     
    • Like Like x 1
  18. callumacrae

    callumacrae not alex mac Community Support

    Messages:
    5,257
    Likes Received:
    97
    Trophy Points:
    48
    Tag names should be lowercase :p

    I would never recommend the use of HTML4. I personally use HTML5, but if you don't want to use that, XHTML.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Hello World!</title>
    </head>
    <body>
    	<p>Hello world!</p>
    	<p>This is my first webpage.</p>
    </body>
    </html>
    If you do use the break element, it should be closed: <br />. However, as explained by Misson earlier in the thread, the break element should not be used in this context. Use two paragraph elements, and if required, reduce the margin.

    ~Callum
     
  19. sankalpgarud98

    sankalpgarud98 New Member

    Messages:
    108
    Likes Received:
    0
    Trophy Points:
    0
    okay now i think we are in for a debate sorta thing. Some people like this style and some not. For those who liked this post, thank u. For those who didnt, thank you for your comments. Next time ill make a semantically appropriate tut.
    @ last horizon.
    thank you for the comment. But if you are so specific with the doctype, let me tell you that the above mentioned system of doctype is no more with the release of html5 . Incase you care, the doctype is as simple as <!doctype html> and thats it.

    Thank you,
     
  20. callumacrae

    callumacrae not alex mac Community Support

    Messages:
    5,257
    Likes Received:
    97
    Trophy Points:
    48
    It's not a "style", it's literally invalid and probably doesn't even work in quite a few browsers.


    Yeah, but you're not using HTML5 ;)
     

Share This Page