Results 1 to 3 of 3
  1. #1
    Veteran Member SyncX's Avatar
    Join Date
    Feb 2007
    Location
    Recife, BR
    Posts
    733

    Lightbulb [Guide]Your First HTML Page.

    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, in my opinion.

    Create sites is, nowadays, a good way to have money (some live this way). You can sell basic sites (that you would spend 2 days making) for $100, and also sell web masterpieces to sell for... $2500? Woah! So, it's a good thing to learn. And to start... 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). 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:
    HTML 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.:
    HTML 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:
    HTML Code:
    <html>
    <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.:
    &quot; - (")
    &reg; - Registered Mark (
    )
    &copy; - Copyright ()

    On a page:
    HTML Code:
    <html>
    <head>
    <title>Sync-a-licious</title>
    </head>
    <body>
    &quot;Sync&reg; is SeXeH&quot;
    Copyright &copy; Sync.
    </body>
    </html>
    would appear:
    "Sync is SeXeH" Copyright Sync.

    See that even if there are 2 lines on the code, the page is has only one line. to break lines, we use the tag <br>, which, as already mentioned, doesn't need to be closed.

    Other characters are the accents (, , , , , , ...). They also need to be represented this way, otherwise, they must appear differently on other computers. Here is a table of characters:
    // The _ can be replaced by letters that accept the accents
    () - &_acute;
    (`) - &_grave;
    (^) - &_circ;
    (~) - &_tilde;
    () - &_uml;
    (/) - &ccedil;/&Ccedil; (Capital)
    3 - Text Layout

    Headers

    To first define a page's text layout, we need to define the headers. Thus lines will appear with different sizes, to differ from other lines and easily identify the parts of the page. HTML has 6 pre-defined header sizes, and to use one of then we use the command 'H'. it has the following syntax:
    <hn>Header Text</hn> - n Must be replaced by the number of the header style (1-6), where 1 is the bigger, and 6 the smaller.
    There are other ways to define headers, but the Header command is the easiest a fastest way.

    Paragraphs and Line Breaks
    In HTML, we can type the text the way we prefer. But... there are some things that can't be done without special commands. This is what happens when we want paragraphs or line breaks, we can't just type "Enter", when editing the code, to break lines.

    To create paragraphs, we use the tag <p>, and everything inside <p> is a paragraph. Since then, to end a paragraph, we use </p>. To insert a line between two paragraphs, you can use the comand <hr> after </p>.

    But, when we finish a <p> tag, it will imediatelly add a blank line between the next entry of text, and sometimes we want just to break one line, and restart the text right on the next line. For that, we use <br>, which i'll say, for the 3rd time :P, that doesn't need to be closed by a </br>.

    NOTE: When we close headers, we don't need to add a <br>, neither we need to wrap a <p> around it, to have a new line. When we close headers, they automatically add blank lines. The range depends on the size.

    Eg.:
    HTML Code:
    <html>
    <head>
    <title>Sync-a-licious</title>
    </head>
    <body>
    <h2>&quot;Sync&reg; is SeXeH&quot;</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:
    <b>Text</b> - Bold
    <i>Text</i> - Italic
    <u>Text</u> - Underline
    <strong>Text</strong> - Same as bold
    <tt>Text</tt> - Typewritter, leaves the text with regular spacement
    <big>Text</big> - Makes the text bigger (may be multiplied: <big><big>Text</big></big>, and so on)
    <small>Text</small> - The inverse of big. May also be multiplied.
    <marquee>Text</marquee> - Makes the text move. Default: slide from right to left.
    Eg.:
    HTML Code:
    <html>
    <head>
    <title>Sync-a-licious</title>
    </head>
    <body>
    <h2><marquee>&quot;Sync&reg; is SeXeH&quot;<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</p>
    <hr>
    <small><small>Copyright &copy; Sync.</small></small>
    </body>
    </html>
    Run it .

    Lists
    Are simply commands to make lists like that:
    Hot Girlz:
    Megan Fox
    Angelina Jolie
    Scarlet Johanson
    Gisele Bundchn
    Some from Brazil, Sweden, Denmark, Venezuela...
    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.:
    HTML Code:
    <html>
    <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.:
    HTML Code:
    <html>
    <head>
    <title>Sync-a-licious</title>
    </head>
    <body>
    Is there anything you don't know that you really wanna 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]"Image Address"[/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.:
    HTML Code:
    <html>
    <head>
    <title>Sync-a-licious</title>
    </head>
    <body>
    Is there anything you don't know that you really wanna know?<br>
    Yes? So <a href="http://www.google.com">Google It</a>!<br>
    <img src="http://tecnocratadigital.files.wordpress.com/2009/12/google1.jpg">
    </body>
    </html>
    Gogogo!



    Well, that's was my HTML Starting Guide. For more about it, google it, read books, etc...
    I hope I was helpfull.

    Peace,
    Sync.

    Quote Originally Posted by Book Forward
    Amazing! Youre actually reading this. That puts you into one of three categories: a student who is
    being forced to read this stuff for a class, someone who picked up this book by accident (probably
    because you have yet to be indoctrinated by the world at large), or one of the few who actually have an
    interest in learning assembly language.

  2. #2
    Senior Member sp00f's Avatar
    Join Date
    Aug 2006
    Location
    Lithuania
    Posts
    117

    Re: [Guide]Your First HTML Page.

    Great guide for beginners. HTML is not case-sensitive but if you're going to use capital letters in the tags, you are not going to pass W3C validation. So, i recommend using non capital letters for the tags.

  3. #3
    Veteran Member SyncX's Avatar
    Join Date
    Feb 2007
    Location
    Recife, BR
    Posts
    733

    Re: [Guide]Your First HTML Page.

    Ya indeed... anyhow, there's no purpose on typing them with capitals, that's not a good fashion...

    Quote Originally Posted by Book Forward
    Amazing! Youre actually reading this. That puts you into one of three categories: a student who is
    being forced to read this stuff for a class, someone who picked up this book by accident (probably
    because you have yet to be indoctrinated by the world at large), or one of the few who actually have an
    interest in learning assembly language.

Similar Threads

  1. [ VIDEO GUIDE]Free Undetected LVL hack and using Cheategine[/VIDEO GUIDE]
    By Baxy in forum Call of Duty 6: Modern Warfare 2 Cheats
    Replies: 7
    Last Post: August 24th, 2010, 06:15
  2. [GUIDE]Complete guide to VAC-Chaos..[/Guide]
    By HOLYSHIT in forum Call of Duty 6: Modern Warfare 2 Cheats
    Replies: 0
    Last Post: April 6th, 2010, 18:59
  3. Smart Html Guide-Part 1 for starts
    By sil#s in forum Html, Php, Xml, Css, ...
    Replies: 7
    Last Post: September 29th, 2007, 13:16
  4. Smart Html Guide-1 Expert.
    By sil#s in forum Html, Php, Xml, Css, ...
    Replies: 0
    Last Post: September 29th, 2007, 11:14

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •