The basics of HTML by Mist

Discussion in 'Member Articles & Tutorials' started by Black Mist, May 30, 2011.

  1. Black Mist

    Black Mist Regular Member

    Joined:
    May 6, 2011
    Messages:
    45
    Likes Received:
    5
    Location:
    Maryland
    Let's talk about HTML, HyperText Markup Language, the base language for those who want to be Web-Programmers/Web-Designers.
    It's also good to study a bit os PHP and JavaScript, but never without HTML.
    To start coding, you'll need an editor, but no compiler. The site is the source itself. You can choose between lots, and even use the famous Notepad. I prefer using Notepad++ or Dreamweaver (If you are gonna go futher than HTML). Also a browser that reads '.html' and '.htm' extensions, like IE and Firefox. So, let's start!
    NOTE: HTML is not Case-Sensitive, meaning that it doesn't differ bettwen capitals and non-capitals.
    1 - HTML Tags.
    When a page is opened by a browser, it reads the text, and starts looking for symbols around the code. Those symbols are called tags, and are the base of HTML code. They can define colors, fonts, sizes, images, titles, etc... Tags are not visible on the browser, but everything you see on a stylised and 100% HTML page was defined by tags.
    The tags are identifyed by the signals "< >" or "< />". Between "<>" you have a call to a tag, and, sometimes, it's properties. Between "< />" you put the end of the tag. You can see it works just like on forums, when you use, for example, [ b]Blablabla[ /b] to write something bold. So tags are called this way:
    Code:
    <tag name>Text on tag</tag name> Text outside tag.
    We must remember that there are tags that don't need to be closed, they simply add something to the page, like <br>, that is used to create a new line for text, and <hr>, that draws an horizontal line on the page where it is called.
    Tag Parameters
    Some tags may accept certain parameters, which will define how it's going to behave. A parameter is especified inside the tag start, and it's value may vary depending on the parameter type. It might be, for example, a link, a number, a name, etc...
    Eg.:
    Code:
    <body bgcolor=\"black\" text=\"white\">Boom Boom Boom</body>
    This way, the backgrpund color will now be black, instead of white, and the text color will be white, instead of black.
    2 - HTML Structure
    The structure of an HTML page, just like other languages that have a basic structure, identify parts of the page written in HTML.
    The Commands
    <html> Is the basic command. It defines the end and the start of an HTML page. It's used with </html>, to define the end.
    <head>, used with </head>, is used to define things like page's Title and some addons (Like a link to some .css sheet). <title>, used with </title>, is the main command inside <head>, and everything inside <title> will be the Page's title on the browser (Like, in this case, Html, Php, Xml, Css, ... - Post New Thread ).
    <body> is the tag that defines what is going to be on the page itself, and everything from text to the page's format must be in it, if we're talking of a single .html page with no addons like .css.
    In General, the structure of an HTML page looks like this:
    [code<html>][/code]

    Code:
    <head>
<title>Hello, World!</title>
</head>
<body>Hello, World!
</body>
</html>
    HTML Hello, World!
    Main Elements of the HTML Page.
    An HTML page is basically compounded by titles, texts, paragraphs, images and links. All these things are placed on a page by the use of expecific comands of the language.
    Special Characters
    In HTML, the texts must be represented by special symbols to be shown on the screen. These symbols are always started by '&' and finished by ';'.
    Eg.:
    " - (")
    &reg; - Registered Mark (®)
    &copy; - Copyright (©)
    On a page:
    Code:
    <html>
    Code:
    <head>
<title>Sync-a-licious</title>
</head>
<body>
<h2>\"Sync&reg; is SeXeH\"</h2>
<hr>
<h3>Don't ya think so?</h3>
<p>If you don't, then DIE, you are a l0z3r!<br>lol, jok. :P</p>
<hr>
Copyright &copy; Sync.
</body>
</html>
    Run this page to see the output .
    Text Format
    Just as on an editor, you may create series of effects on the document, modifying size, font, etc... All the commands that change the text format must be opened and so closed.
    The main styles are:
    Eg.:

    Code:
    <html>
    Code:
    <head>
<title>Sync-a-licious</title>
</head>
<body>
<h2><marquee>\"Sync&reg; is SeXeH\"<marquee></h2>
<hr>
<h3>Don't ya think so?</h3>
<p>If you don't, then <b>DIE</b>, you are a <big>l0z3r!</big><br>lol, jok.</p>
<hr>
<small><small>Copyright &copy; Sync.</small></small>
</body>
</html>
    Run it.
    Lists
    Are simply commands to make lists like that:
    We have two kinds of lists, ordened and unordened. The diference is that ordened lists use numbers on each item of the lists, and unordened use only the '•' signal to differ the items.
    To create ordened lists, we use the comand <ol>, that must be closed to end the list. To create unordened lists, we use <ul>, that also must be closed. To indicate the list items, we must wrap the tag <li> around each item.
    Eg.:

    Code:
    <html>
    Code:
    <head>
<title>Sync-a-licious</title>
</head>
<body>
<h3>Unordened List:</h3>
<h4>Some good Football Teams</h4>
<ul>
<li>Germany</li>
<li>France</li>
<li>Argentina</li>
<li>Brazil</li>
<li>Itally</li>
</ul>
<h3>Ordened List</h3>
<h4>Best Football Teams</h4>
<ol>
<li>Brazil</li>
<li>Itally</li>
<li>Argentina</li>
<li>France</li>
<li>Germany</li>
</body>
</html>
    Also try using lists inside lists. Specially the Unordened ones. You'll see a difference between the symbols depending on the item's scope.
    Links
    Links are the text entries that will connect the user to a new Page/document. When the user click on a link, a new document is sent automatically. Depending on the document, the browser may open it, or it will be downloaded. To make links, we use the tag <a>, which I don't know what means, but I use it :P. The target document is defined with the parameter 'href', and must be parsed as its value. The text inside the tag <a> will be shown, and, when clicked, will take you to the document. So, <a> must be closed by </a>.
    Eg.:

    Code:
    <html>
    Code:
    <head>
<title>SyncXor</title>
</head>
<body>
Is there anything you don't know?<br>
Yes? So <a href=\"http://www.google.com\">Google It</a>!
</body>
</html>
    Once again, it's for you to try.
    4 - Images
    To finish this starting guide, I'll teach you how to add Images. On forums, the code to add images is [​IMG], so, can you guess how it is in HTML? no, not <img>"Img add"</img>, I'm pretty sure you fell for this xD. The image address is parsed as a parameter of the <img> tag, which doesn't need to be closed. The parameter name is 'src', and the value is the address.
    Eg.:

    Code:
    <html>
<head>
<title>SyncXor</title>
</head>
<body>
Is there anything you don't?<br>
Yes? So <a href=\"http://www.google.com\">Google It</a>!<br>
<img src=\"http://tecnocratadigital.files.wordp...2/google1.jpg\">
</body>
</html>
     
    Black Mist, May 30, 2011
    #1
    Ashley.S. and Kaiser like this.
  2. Kaiser

    Kaiser Regular Member

    Joined:
    Nov 15, 2010
    Messages:
    6,744
    Likes Received:
    1,132
    Very nice, and letting you know that one of the images is broken.
     
    Kaiser, May 30, 2011
    #2
  3. Black Mist

    Black Mist Regular Member

    Joined:
    May 6, 2011
    Messages:
    45
    Likes Received:
    5
    Location:
    Maryland
    I know, I'm trying to get it fixed
     
    Black Mist, May 30, 2011
    #3
  4. Sefrotox

    Sefrotox Regular Member

    Joined:
    May 26, 2011
    Messages:
    16
    Likes Received:
    9
    Good job and quite a bit of effort here. :) I noticed, however, that your HTML code has back slashes before double quotes. I'm assuming you did not do this but the forum software did. So @Kaiser, does this forum remove those back slashes if PHP get magic quotes is on?

    Nonetheless if some copies this code it will be improper as the backslashes should be removed.
     
    Sefrotox, May 30, 2011
    #4
  5. Kaiser

    Kaiser Regular Member

    Joined:
    Nov 15, 2010
    Messages:
    6,744
    Likes Received:
    1,132
    No, it does not do that, he added them. Don't know why though.
     
    Kaiser, May 30, 2011
    #5
  6. euantor

    euantor Regular Member

    Joined:
    May 29, 2011
    Messages:
    138
    Likes Received:
    73
    Location:
    England
    Hm, ok tutorial I guess. You could do with structuring the code better and I noticed you never closed the <ol> tag. Also, nobody applies direct styling to the body like you did - that technique is massively outdated now.
     
    euantor, May 31, 2011
    #6
    Kaiser likes this.
  7. SpacewardAsh

    SpacewardAsh Lurking From Space

    Joined:
    Jan 2, 2011
    Messages:
    211
    Likes Received:
    683
    Location:
    Falmouth, Cornwall, UK
    First Name:
    Ashley
    Yea, some code within the post is outdated for example <hr> should now be entered as <hr /> to validate as XHTML but never the less, a good tutorial to help learn the basics, etc.
     
    SpacewardAsh, May 31, 2011
    #7
  8. euantor

    euantor Regular Member

    Joined:
    May 29, 2011
    Messages:
    138
    Likes Received:
    73
    Location:
    England
    I guess, yeah. All the guides I see nowadays are outdated though. It's a shame as it fosters bad practices on new developers.
     
    euantor, May 31, 2011
    #8
    Ashley.S. and Kaiser like this.
  9. Shole93

    Shole93 Regular Member

    Joined:
    May 8, 2011
    Messages:
    66
    Likes Received:
    12
    Nice tutorial for starters :D I even might use something from it.
     
    Shole93, Jun 1, 2011
    #9
Similar Threads

  1. [Photoshop Tutorial] Basics for CS4/CS5

  2. SEO - the Basics

  3. Hello, Mist here

  4. Host Mist VPS Deals | SEA | ATL | LA | DAL | DE | OpenVZ and Xen!

Loading...

Share This Page