Minecraft Blogs / Tutorial

HTML Part 1: Basic Tags - Dozentorials

  • 320 views, 1 today
  • 3
  • 1
  • 5
Diamonddozen's Avatar Diamonddozen
Level 55 : Grandmaster Baconator
157
Again before we start I am sorry about the image. I'm still a little new to Photoshop. I'm sorry about the spoilers. Apparently you can't put <> tags. So I'll substitute them for {}


tythpng
HTML, or more common known to the website design world as Hyper Text Markup Language. To all those foreign to the subject HTML is for creating websites. Cyprezz used HTML when creating Planet Minecraft. Mark Zuckerburg used HTML when creating Facebook. HTML is all around you, but you just don't know. ever since I found out about HTML it has changed my life, and I am here to change yours. Now before you start adding in the code make sure you make a folder named 'My Site' or something along those lines on the desktop.

stwpng



tdwpng
The most basic tags you will ever use are the simple ones. They are the tags that define the regions of the site. Treat tags like a family tree. Say you are making a site. The first thing you are going to do is the {html} tag. {html} is like the great-great grandfather that moved from Whateverstan to Canada or America.
Code so Far
{html}
Something you must remember is that you have to close every tags (with some exceptions that I am going to address later). Before you start freaking out: "How do I close a tag TELL ME NOW!!!" I am going to tell you. It's as simple as putting a slash in front of whatever you say. So all you have to do is type {/tag}.
Code so Far
{html}
{/html}
Now for the next important tags. These are like the sons of {html}. The Head and body tag. The head will contain all of the useless information, like the title and the favicon (which you will learn about in Part 3: Pictures). So let's add that into the code.
Code so Far
{html}
{head}
{/head}
{/html}
So now that you have your head tag we need to put stuff in it. For now I'll start with something easier, the title. The title is what describes what you are looking at on the screen at the moment. If you upload stuff at all you will see the title says Editing. How do you add that you ask? Simple. Like we did with you have to put in between the opening and closing . If you don't put it in between nothing will change, but it will help in the long run.
Code so Far
{html}
{head}
{title}{/title}
{/head}
{/html}
Now you have to put something in between the two title tags. What you put in between is what you want as your site title. For the sake of the tutorial I am just putting it as My First Site.
Code so Far
{html}
{head}
{title}My First Site{/title}
{/head}
{/html}
Now it's time to add the body tag. The body is what your main site is going to behold. On Planet Minecraft is shows all the submissions in the body. With CSS you can style it to make it look nice, but that's another tutorial.
Code so Far
{html}
{head}
{title}My First Site{/title}
{/head}
{body}
{/body}
{/html}

That's it for the basic tags which also means end of part 1. If you want to keep up to date on this tutorial then subscribe to me and I will show up in your sub box. Also I will be keeping track of everything we add.

Thank you for reading! If you liked this tutorial give it a diamond or even a favourite. As I said before if you want to keep up to date on this or any tutorials then subscribe. If you would like to contact me on places other then PMC have some links: @DiamondBlogPMC (Twitter), DiamondBlog (Facebook), Diamondblogifacation (Youtube), notsoromanianreviews (Skype), and TanPics (DeviantArt). Again I am deeply sorry for forgetting the PMC at the end of the twitter username. And as always I'm Diamonddozen, appy mining to you.
If you want to view the entire series have a link:
Part 1: Basic Tags <-- You are reading this
Part 2: Colours and Text
Part 3: Images and Borders <-- Not out yet
Tags

1 Update Logs

Update #1 : by Diamonddozen 09/02/2012 4:11:48 pmSep 2nd, 2012

Fixed the <>tag problem.

Create an account or sign in to comment.

holdensaunt
09/02/2012 11:59 pm
Level 44 : Master Geek
holdensaunt's Avatar
Nice! I like the family tree analogy. Makes it all make more sense.
1
hornet5517
09/02/2012 4:45 pm
Level 19 : Journeyman Dragon
hornet5517's Avatar
This is pretty cool! What program do you type this on? And how do you transform the code to the website?
1
Diamonddozen
09/02/2012 5:31 pm
Level 55 : Grandmaster Baconator
Diamonddozen's Avatar
You can type it on any program. I prefer notepad++ or Programmer's Notepad, but if you don't want to download anything you can just use regular notepad. As for transforming the code you just need to save it as .htm or .html. Also could you leave a diamond for the effort?
1
hornet5517
09/02/2012 6:08 pm
Level 19 : Journeyman Dragon
hornet5517's Avatar
I have a Mac so I'll use TextEdit (like notepad), sure I'll leave a diamond!
1
Diamonddozen
09/02/2012 6:13 pm
Level 55 : Grandmaster Baconator
Diamonddozen's Avatar
To keep up to date I would suggest subscribing. A new HTML Tutorial everyday until the series is over.
1
Planet Minecraft

Website

© 2010 - 2024
www.planetminecraft.com

Welcome