Kesshomaru's HTML school! Lesson 4, first webpage

Lesson 4, everybody!
And oh-hi! Welcome back. It's our 4th lesson and it's time to create our first webpage! GET READY-HERE IT COMES!!

Spoiler for Planning:

This is not to necessary as this only is for you to learn HTML. But, if this weren't just a first try and actually your first true website-you should plan! I know this is not necessary right now-as I told you before-but still I'm going to give a few hints on how to plan a simple website!

Main idea
First of all you will need inspiration and a main idea. So, before we actually begin you will have to ask yourself: "What do I like? What do I want to make a website about?" When this is done you need to fix the preparations.

Preparations
Do I got an editor? Do I got enough material? Do I have the team I need and want? This might be the questions to think about before you begin so I'll just ask: "Well, do you?"
About the editor, use notepad if you want to do the practises and now what I'm really talking about as the editor I am using is-that's right-notepad. Enough material? What do you need exactly? Mostly website material is simply images of the stuff the website is dedicated to. Material could also be other stuff to put on your website-what do you say about some text about, if the thing your website is about truly is pokémon, pokéballs.
Do you have the team you want and need...? WTF!? You're still just an early beginner, and you're thinking about a team for the website? Calm down, already! Just focus on the learning-HTML-part of this and we will go over this in a later lesson ... maybe in a few years! x3 No no, don't worry. It will all come, just calm down till that moment, please! Now, let's move on.

Hosting
You need a webhotel? Then there is many choices-some good, some bad. Webhotel can both be free (and probably not to good) or expensive (probably a better version. Altough, the best version should be a little cheaper one but that still has its cost. Even though we could spend the entire lesosn to talk about webhotel, I don't think we should talk about this now since it will come back as a later issue.

Spoiler for Test:

Now we've reached the point where we will start making a true website... Although wait a minute! First we will make a test version.

Creating a new file
Are you ready? If so, then open up notepad and fill in the standard tags for a website.

Code: [Select]

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

Does that seem to hard? Not exactly, but still, it may be a bit confusing-let's organise this code a little bit.

Code: [Select]

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

Is it still to messy and confusing? If that's true, then just, simply enough, make one more row-jump between every tag. Like this:

Code: [Select]

<html>

<head>

</head>

<body>

</body>

</html>

Now it can't possible be too hard, can it? Well, if it is-try to learn it anyway! This is standard for a HTML-file and will occur in every single file you see!

Now, save your file-with an html extension! And as this is a test-let's name the file "test":

Code: [Select]

test.htm

Code: [Select]

test.html

Note: I used to use the .htm extension but mostly use the .html nowadays. But don't you worry, it doesn't make any big difference-just that you may have to think of which extension you have used to all the files when you make links and stuff (which is why I recommend you using the same extension for every file you get).

How does it look?
Now, you have made your first script and saved it somewhere on your computor. Go to the test.html's location and double-click it. A new webpage will open up. It's our test-page! Unfortunately, it's totaly empty, right? Now, exit the webpage by clicking the X-button in the upper right corner or leave it be (if you exit it now you will have to open it again, later, while just having to "reload page" when made changes to your script). Now, go back to the files location, again. Right-click the file and open it with notepad. Now let's do some actual changes to your script!

Create some content
...is exactly what we are going to do right now! As I told you lastly in the earlier paragraph-how does it look?-open up your file with notepad. Done? Good! Now let's make some content for your test-page. What should we put in? Why don't we use the traditional hello world and maybe also Lorem Ipsum:

Code: Hello World! [Select]


<html>

<head>
<title>Hello World!</title>
</head>

<body>
<p>Hello World!</p>
</body>

</html>

Seem okay? Now check your webpage again-go to where the file is located and double-click it. A new webpage will open up and-yes-it's yours! Now can you see something? Of course! It says "Hello World". Now let's go over to something a little bit more complicated-Lorem Ipsum, that is.

Note: Did you notice <title> -tags between the <head> -tags? This is what will appear in the namelist of the web browser (if you look now it will probably say something about RMRK.net). Cool? This allows you to make the site your site.
------
Note: Do you remember the <p> -tags? I hope so-paragraphs are kind of important to a website! (If you don't remember you can check Kesshomaru's HTML school! Lesson 4, tags and their functions.)

Okay, here comes the harder bit-the traditional Lorem Ipsum. (Actually this is kind of unnecessary as the site doesn't even have layout yet-it's just letters and words.)

Code: Lorem Ipsum, easy version [Select]


<html>

<head>
<title>Lorem Ipsum</title>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet fermentum tellus. Mauris egestas nisl quis purus. Vivamus laoreet nibh iaculis dui. Suspendisse pulvinar, metus ac condimentum suscipit, mauris lectus ultrices ligula, vitae cursus neque felis et wisi. In hendrerit turpis ut quam. Nam id sapien eu metus gravida dictum. Suspendisse mattis consequat turpis. Nullam eleifend, eros sit amet faucibus rhoncus, justo tortor scelerisque nulla, eget mollis urna dolor et diam. Aliquam dui eros, euismod ac, scelerisque non, pharetra eu, ligula. Ut id felis. Ut in pede sed ante lobortis commodo. Morbi aliquam consectetuer ante. Quisque tempus mattis orci. Aenean fringilla, tortor ac pharetra interdum, sapien neque ultrices mauris, eget pharetra odio quam non enim. Fusce venenatis lacus. Sed scelerisque tortor et eros. Suspendisse tempor, est et venenatis hendrerit, est tortor auctor pede, eu ultricies magna eros eget quam.</p>
<p>Proin eu felis. Curabitur ipsum tortor, auctor sit amet, sollicitudin eu, lobortis sed, leo. Suspendisse a odio vel pede commodo mollis. Sed sagittis nibh id ante. Integer iaculis lacus. Proin ut pede eu lectus tristique porttitor. Duis sed sapien. Aenean risus nulla, facilisis ut, placerat eu, convallis et, pede. Etiam odio odio, suscipit eget, bibendum a, venenatis et, urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel mauris. Nam at lectus eget ante lobortis lobortis. Cras erat nulla, dictum nec, placerat aliquet, semper ut, turpis. Ut condimentum. Vivamus est tellus, rhoncus at, lacinia euismod, adipiscing vestibulum, turpis. Sed sed lectus. Mauris pellentesque interdum ante. Curabitur ut magna quis nunc vehicula pellentesque.</p>

</body>

</html>

Note: Is it weird? Don't understand what it says? Well well, I'll tell you a little bit, for now-the rest will be uncovered in later lessons, believe me. Lorem Ipsum is something in latin, I don't really know what (yet) so I can't tell you that. There are many, many paragraphs (of which I only know 10) and are often used by scripters needing some "pure crap" to fill their paragraphs with when they're making new layouts or maybe just need something to put in-maybe it feels to empty otherwise. As I said-more of this will be explained in the later lesson dedicated entirely to "Lorem Ipsum".

Now, you got a lot of content (at least if you chose "Lorem Ipsum), so what do you say about saving your file and checking it's new appearence? How does it look? Does it look good? Well, maybe not yet... But soon! I promise!"

Spoiler for First webpage:

Now it's really, really time for us to make our first webpage! is it okay? Goody, goody!

Creating a new file
Do just as I explained earlier in the test-section-fill in the standard tags:

Code: [Select]

<html>

<head>
</head>

<body>
</body>

</html>

and save it with an HTML extension (I recommend using ".html" as that's the one I'm using throughout this school). Done? Good, but you don't need to check it this time-unless, of course, you want to. Now fill in whatever you want the page to say (don't forget using <p> -tags) and save it again. Now you should check it and see that it got like you wanted it to.

Did it go right? Did your first webpage look the way you wanted it to? If it didn't, check out the next lesson where we'll be going over the right formation of a code and, also, how to make your script more organised and better looking. I hope I'll see you then, my friends! Bye bye!

Author Topic: Kesshomaru's HTML school! Lesson 4, first webpage (Read 2206 times)