DEVTOME.COM HOSTING COSTS HAVE BEGUN TO EXCEED 115$ MONTHLY. THE ADMINISTRATION IS NO LONGER ABLE TO HANDLE THE COST WITHOUT ASSISTANCE DUE TO THE RISING COST. THIS HAS BEEN OCCURRING FOR ALMOST A YEAR, BUT WE HAVE BEEN HANDLING IT FROM OUR OWN POCKETS. HOWEVER, WITH LITERALLY NO DONATIONS FOR THE PAST 2+ YEARS IT HAS DEPLETED THE BUDGET IN SHORT ORDER WITH THE INCREASE IN ACTIVITY ON THE SITE IN THE PAST 6 MONTHS. OUR CPU USAGE HAS BECOME TOO HIGH TO REMAIN ON A REASONABLE COSTING PLAN THAT WE COULD MAINTAIN. IF YOU WOULD LIKE TO SUPPORT THE DEVTOME PROJECT AND KEEP THE SITE UP/ALIVE PLEASE DONATE (EVEN IF ITS A SATOSHI) TO OUR DEVCOIN 1M4PCuMXvpWX6LHPkBEf3LJ2z1boZv4EQa OR OUR BTC WALLET 16eqEcqfw4zHUh2znvMcmRzGVwCn7CJLxR TO ALLOW US TO AFFORD THE HOSTING.

THE DEVCOIN AND DEVTOME PROJECTS ARE BOTH VERY IMPORTANT TO THE COMMUNITY. PLEASE CONTRIBUTE TO ITS FURTHER SUCCESS FOR ANOTHER 5 OR MORE YEARS!

HTML5 Programming Tutorials

Introduction

Hello, my name is TheDischarger, yes an alias, but we’ll use that anyway. Now, i’m going to assume that you are new to this whole programming and coding biz (which are both the same) so don’t expect anything very useful if you have previous experience with coding beforehand. So with that introduction, lets get started.

Installing your software

HTML is an acronym for Hyper-Text-Markup-Language. Essentially, its existence is the main reason that you’re viewing this page right now. All web elements, like texture, pictures, videos, animation, sound or simply a button exist because of HTML. HTML is non-arguably the world’s most popular markup language (which is a system for annotating a document in a way that is easy to read even in the environment). HTML is encoded even within the first version of netscape, so as simply as installing your favorite browser, you can create HTML documents and websites. Markup-language is different than other programming languages, like C and Java. It’s quite a popular thing, as we also use it to navigate through web pages, play games, watch videos or chatting with friends. Rather than computing numbers, data with complex algorithms, HTML would rather display text and data in a stylish or organized manner (depending on how the programmer designs it). In order to created a HTML document, create any file (literally, any file), renaming the extension to ‘.html’ (make sure you have unchecked the box for ‘Hide extensions for known file types’ in ‘Folder Options’ for Windows 7). I then open it up with my favorite text editor (Notepad ++ or Sublime Text are great programs), and get coding right away! To view your document, all you have to do is double click it (assuming it opens with your default web browser). It’s important to know that there are different versions of HTML that web browsers use, so if you haven't updated it in a while, I suggest you do it now, as we are focusing on HTML5. Now, it’s finally time to get working on our code!

Hello World!

All programmers first tries to output the text “Hello World!” to the compilers console. “Hello World” is the most basic of all code, telling the basic syntax of a language. In this case, we aren’t working with a console since everything we do is all encoded into Windows itself (or essentially any modern day operating system). Like I’ve said in the previous section, all you have to do to view your final product is open up the ‘.html’ file with your default web browser, refresh the page everytime you want to preview your changed code. The following is what standard HTML looks up.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

Not too bad, eh? Of course, this is confusing at first, but allow me to explain all of this:

  • Notice how we start off with a tag (which is anything encased in ‘< >’ ) and we closed that tag with a slash ‘ / ‘ formatted behind the word, but still inside the carrots ‘< >’. This tells HTML that we are opening and closing the tag, certain tags has to be in other tags, like <body> is where you put headers, paragraphs in, but <head> is where you put all of your character sets and declarations in.
  • We start off with ‘<!DOCTYPE html>’, which tells HTML that we are initializing a HTML document.
  • <html lang=“en”> is not the same as </html>, but still is opening and closing. the ‘lang=”eng”’ part is so that your code tells HTML that we are running an english document.
  • ‘<head>’ is where we put our page settings in, ‘<meta charset=“utf-8”>’ tells HTML what character set to use (officially, utf-8 supports almost every single character is all major languages, so I’d say we’re good for now. ‘<title>Hello World</title>’ is where our page name goes (Look at the top of your browser or tab, and see how it says “Hello World”? Whatever you put in the ‘<title>’ tag will declare what the page name the browser displays will be.
  • We close ‘<head>’ and start an entire new tag category called ‘<body>’, this is where all real typing goes into. Any text in our ‘<h1>’ tag is our first header, you can use also use ‘<h2>’ tags which stand for a second header, and you can keep on incrementally going upwards. (note that the text will be smaller for every header you make, but there is a limited of them before they start going crazy like). An example of doing this what be:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <h2>This is the Second Header</h2>
        <h3>This is the Third Header</h3>
        <h4>This is the Fourth Header</h4>
        <h5>This is the Fifth Header</h5>
        <h6>This is the Sixth Header</h6>
    </body>
</html>

However, six is the maximum before you’ll notice that if you go pass the sixth header, your header text will no longer work, and will default to normal text like so:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <h2>This is the Second Header</h2>
        <h3>This is the Third Header</h3>
        <h4>This is the Fourth Header</h4>
        <h5>This is the Fifth Header</h5>
        <h6>This is the Sixth Header</h6>
        <h7>This is the Seventh Header</h7>
        <h8>This is the Eighth Header</h8>
        <h9>This is the Ninth Header</h9>
        <h10>This is the Tenth Header</h10>
    </body>
</html>

Now that we got the basic syntax on HTML5, feel like we can do some more?

HTML Meta Tagging

Meta Tags are information inside a web page, but not exactly content it would show. Think of it like a helper to other programmers and web designers looking at your document. When creating a ‘<meta> tag, it does not require to be closed (‘/meta>’) but instead, it requires a forward slash ‘ / ‘ (Like this ‘ />’ ) at the end. I will tell you the meta tags that are commonly used (I suggest you do not try any of these without exactly knowing what they will do) :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="TheDischarger" />
        <meta name="revised" content="TheDischarger, 10/4/2013" />
        <meta name="description" content="Learn how to make delicious soup!" />
        <meta name="keywords" content="soup, food, drinkable, eatable, spices, flavouring, slurp, hot" />
        <meta http-equiv="refresh"
         content="3; url=http://devtome.com/doku.php?id=start" />
        <title>Discharger's Soup</title>
    </head>
    <body>
        <h1>Welcome to TheDischarger's Soup Website!</h1>
    </body>
</html>
  • ‘<meta name=“author” content=“AUTHOR_NAME_HERE” />’ designates the original creator of the webpage.
  • ‘<meta name=“revised” content=“REVISED_BY, MONTH/DAY/YEAR” />’ designates the last revision/update of the webpage.
  • ‘<meta name=“description” content=“TYPE_DESCRIPTION_HERE” />’ designates the information/descriptions on the webpage
  • ‘<meta name=“keywords” content=“KEYWORD_SEPERATED_BY_COMMAS” />’ designates keywords to web page. This is important if you want users to find your web pages easily through web search engines. So if I had a tag saying ‘soup’, and a user searches the keyword ‘soup’, they would be able to see our website (for at least a few hundred pages in google)!
  • ‘<meta http-equiv=“refresh” content=“TIME_IN_SECONDS; url=WEB_PAGE_URL” />’ tells the web page to refresh every X amount of seconds, and after the the time, the page will force the browser to go to a specified url (if you only just want to have the page refresh every X seconds, just remove the entire ‘; url=WEB_PAGE_URL’ part).

Meta Tagging is very useful and important to building an efficient website. With enough effort, designing a website for your company will give a great first impression! We’ll move on to the next part on the real stuff. Ciao!

Programming


QR Code
QR Code html5_programming_tutorials (generated for current page)
 

Advertise with Anonymous Ads