RMRK is retiring.
Registration is disabled. The site will remain online, but eventually become a read-only archive. More information.

RMRK.net has nothing to do with Blockchains, Cryptocurrency or NFTs. We have been around since the early 2000s, but there is a new group using the RMRK name that deals with those things. We have nothing to do with them.
NFTs are a scam, and if somebody is trying to persuade you to buy or invest in crypto/blockchain/NFT content, please turn them down and save your money. See this video for more information.
Kesshomaru's HTML school! Lesson 5, organising
Pages: [1]

0 Members and 1 Guest are viewing this topic.

pokeball RukishouOfflineMale
***
Rep:
Level 88
http://www.rukinet.com
#1 • Mar 24, 2007
    • Organise your code
    ... so that you-and other who will be reading your html file-can find what you are looking for easier. And also-it looks good! But actually... this is more like the extras, as the most important to this lesson will be the sections where I explain on where certain tags are supposed to go.

    Spoiler for The three main tags:
    The most important tags are the three obligatory ones:

    Code: [Select]
    <html>  </html>
    <head>  </head>
    <body>  </body>

    Now for an explanatory of these. As I guess you know, a web browser is going to read you HTML-file and then use it's content to draw the visuals of your webpage. This is simple enough for you to understand, right? But still, for the web browser to know that it's content is supposed to be read as a HTML-file, you need to put in a beginning html-tag as the first tag in the entire script and an ending one as the last tag of the entire script. Now the web browser know that the content is describing a webpage.
    Secondly we got the head-tag. This is the least important of the three, but still necessary. Between the head-tags all the hidden-invisible for the naked eye-like meta-tags and the, actually not hidden, title-tag.
    Lastly we've got the body-tag, which is the most important one for the web page's visible content. Between the body-tags everything visible (and comments, which are invisible) to be displayed in big window in the middle of the browser. You know-where this text is located, right now.
    Now that we've settled the three main tags so that you know all of them, it's time to go over where the different tags is supposed to be, a little bit more detailed.

    Spoiler for Where to go:
    Okay, I already know about the three main tags and the basic facts of which tags to go where, but what about the rest? What about all of the tag in the tag list? (See the "Tag list"-section in lesson 2, tags and their functions.) Hang on, it's about to be uncovered in just a second!

     ...

    Between the HTML-tags
    Yes, between the HTML-tags everything else is inserted...!

    Between the head-tags
    Here goes all the invisible information about the page and the title (which will be shown in the namelist of the web browser). For example, the, kind-of, important meta-tags which define stuff like search tags and search info.

    Note: We will go over meta-tags in later lessons.

    Betwenn the body-tags
    This is practically every tags that I haven't mentioned yet is supposed to go. The stuff inserted here is what you will see in the web browser-that's right-body. Do you get it? This is where all the stuff that you're supposed to see on the webpage is supposed to go.

    Spoiler for Let's create a "torso":
    Does it sound weird? Well this, however, is the head and the body (it's not an intern expression, just a way for me to tell you that it's both head and body). Let's begin-this will be your first webpage!

    Head
    First off, let's fill the head with content. How do we do this? It's easy! Just-simply-put in the head-info between the head-tags as following:

    Code: [Select]
    <head>
    INSERT YOUR HEAD-CONTENT HERE!
    </head>

    Doesn't that make a picture, eh? However, this isn't very good code, it's just "INSERT YOUR HEAD-CONTENT HERE!", and we don't want that, eh? Let's piff it up a little bit-let's make a title:

    Code: [Select]
    <head>
     <title>My First Webpage!</title>
    </head>

    This will effect the web browser in that way so that the name-list (the bar where the "_ ? X"-minimise, maximise, close window) will display your word in stead of "Internet Explorer" or what it, to a default, would say. You could also say that the title-tag defines the webpage's name.
    Now, all we got to do is to save this file with an html extension. Name the file

    Code: [Select]
    index.html

    and we can continue.

    Note: Did you notice the space before the title-tag? This is a kind of organising which are often used by scripters to easier figure out to what it belongs and stuff. More about this in a later section.

    Now, open up your saved file and look at the browsers name-list. Can you see your own text? Can you see

    Code: [Select]
    My First Webpage!

    or not? Hope so! If it didn't, you must have made something wrong. Maybe you forgot to save it with the right extension-although, if that were the problem, you probably wouldn't have been able to open it up in the browser at all.
    However, this is how it should look on an IE (Internet Explorer) browser.


    Goody goody, eh? Now it's our own title displayed in the name-list! However, this was all for now on this point-let's continue with the in-between the body-tags.

    Body
    Everything has a body-even a website! As you should already know, the body is where all the visible content is (plus, of course, comments) and also where most of the work is done. Let's start with putting in one or two paragraphs of "Lorem Ipsum" and see what happens. Are you ready?

    First of all, open up your HTML file again-unless it's already up:

    Code: [Select]
    index.html

    Now let the title-tag in the head stay and go directly to the body. Fill in one paragraph of "Lorem Ipsum"

    Code: [Select]
    <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>
    </body>

    and then save the file and open it in your web browser again. How does it look? You can see the tex, right? Although, it's not very nice to look at as it's only text on a plain white background, right? Want to fix this? Well, FORGET IT! At least for a couple of lessons. We'll come to designing with just HTML and with CSS-but not just yet! Okay, I know it won't make much difference, but as I said earlier, we're going to insert TWO "Lorem Ipsum" paragraphs, and not just one. So let's arrange this by putting in the next paragraph to:

    Code: [Select]
    <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>

    Now we have inserted one more paragraph so that the "Lorem Ipsum" has become a bit bigger. Now let's take another look. Do you see what the paragraph-tags do to the text? You see it makes a row-jump without even having to input a tag for it!



    Now you know what a what a head and a body is in HTML and what's supposed to go in them. In the head, put important stuff that's non-visible for the visitors of your page, and in the body, put stuff to be seen on the page! Now, let's move on-it's time to learn a bit about organising your script!

    Spoiler for Organising:
    Now it's time to go over how to best organise your script! Let's begin with row-jumpings and sections of your code.

    A section is between to main tags-e.g., between the html-tags or the body-tags (or, to name them all, the head-tags). I always make one row-jump between to different sections. Look at this:

    Code: [Select]
    <html>

    <head>
    </head>

    <body>
    </body>

    </html>

    Note: The html-tags are for the entire script and are start and end-tags for the file. So these will not touch eachother as the other section-tags.

    Then when a tag comes after another tag as a new branch, always make one extra space before each row for every branch you have gone through. Look at these examples:

    Code: Only one branch [Select]

    <head>
     <title>My First Webpage!</title>
    </head>


    Code: [Select]
    <body>
     <p>Types of soda</p>
     <ul>
      <li>Coca-cola</li>
      <li>Fanta</li>
      <li>Sprite</li>
     </ul>
    </body>

    You get the organising ways? For each new branch an extra space adds before each line belonging to the branch. And also, when a branch ends the extra space shouldn't be added anymore and so one.

    Note: If you think about it, for all of you that actually use RPG Maker and actually IS eventing your game you should be familiar with this as when you look at an event you can see this branch-organising there to. This is really good and effective when you need to know which tag the following belongs to. Do you see? Well, let's just check that in the following TDS!

    Spoiler for TDS 5:
    Well, now it's time to try yourself again in TDS no 5! Let's begin!

    Which three of the following are "main tags"?
    • <html>
    • <p>
    • <body>
    • <head>
    • <torso>
    • <footer>
    • <title>

    What is supposed to go in the first main tag?
    • Nothing
    • Everything
    • Everything that's visible
    • Everything that's non-visible

    What is supposed to go in the second main tag?
    • Nothing
    • Everything
    • Everything that's visible
    • Everything that's non-visible

    What is supposed to go in the last main tag?
    • Nothing
    • Everything
    • Everything that's visible
    • Everything that's non-visible

    What should you do when you make a new branch?
    • Add one extra space
    • Add one extra row-jump
    • Add one extra horisontal ruler

    What happens in a web browser when this occur in a script?

    Code: What will happen? [Select]

    <body>
     <p>This is the first paragraph</p>
     <p>This paragraph comes right after the first one</p>
    </body>


    • The texts will flow like in one sentence
    • The second paragraph will jump a row (without a row between the paragraphs)
    • The second paragraph will jump two rows (with a row between the paragraphs)
    • One of the paragraphs will disappear from the final results (in the browser)

    Don't forget to check your answers in the next spoiler!

    Spoiler for TDS 5 Ans.:
    Here are the answers to TDS 5! How many right will you have?

    Which three of the following are "main tags"?
    • <html>
    • <p>
    • <body>
    • <head>
    • <torso>
    • <footer>
    • <title>

    What is supposed to go in the first main tag?
    • Nothing
    • Everything
    • Everything that's visible
    • Everything that's non-visible

    What is supposed to go in the second main tag?
    • Nothing
    • Everything
    • Everything that's visible
    • Everything that's non-visible

    What is supposed to go in the last main tag?
    • Nothing
    • Everything
    • Everything that's visible
    • Everything that's non-visible

    What should you do when you make a new branch?
    • Add one extra space
    • Add one extra row-jump
    • Add one extra horisontal ruler

    What happens in a web browser when this occur in a script?

    Code: What will happen? [Select]

    <body>
     <p>This is the first paragraph</p>
     <p>This paragraph comes right after the first one</p>
    </body>


    • The texts will flow like in one sentence
    • The second paragraph will jump a row (without a row between the paragraphs)
    • The second paragraph will jump two rows (with a row between the paragraphs)
    • One of the paragraphs will disappear from the final results (in the browser)
    « Last Edit: March 25, 2007, 11:10:35 AM by Kessiah »


    Rukinet. - the dot's included!
    pokeball ahrefOfflineMale
    *
    Resident Cloud
    Rep:
    Level 91
    #2 • Apr 27, 2007
    • first i have seen of these the tests are a great idea  ;8
    pokeball RukishouOfflineMale
    ***
    Rep:
    Level 88
    http://www.rukinet.com
    #3 • Apr 27, 2007
    • thank you! ;8

    you may have noticed that I haven't made the 6th lesson done yet... well I haven't found my time and I don't really have got enough energy for it now... but It'll come! Just as my other schools... xP (I can be sooo bored at times...)


    Rukinet. - the dot's included!
    pokeball 6shotOffline
    **
    Rep:
    Level 88
    #4 • May 7, 2007
    • pokeball RukishouOfflineMale
    ***
    Rep:
    Level 88
    http://www.rukinet.com
    #5 • May 7, 2007
    • Quote from: 6shot on May 07, 2007, 03:47:28 PM
    www.w3schools.com....

    yeah I know, I used to learn from there, but what are you saying with that...? -__- You're not saying that I'm copying from that site, right? 'Cause that is so not true!


    Rukinet. - the dot's included!
    pokeball KokowamOfflineMale
    *
    A Random Custom Title
    Rep:
    Level 96
    wah
    #6 • May 7, 2007
    • That site seems a bit more professional. I think Kesshomaru is dumbing it down for us at the RMRK. Thanks for the site because I might wanna learn from there. :D
    pokeball RukishouOfflineMale
    ***
    Rep:
    Level 88
    http://www.rukinet.com
    #7 • May 7, 2007
    • it's alrgith... I'm, kinda, not making these anyumore... at least for now... I'm way too busy with school and stuff ^^'


    Rukinet. - the dot's included!
    pokeball 6shotOffline
    **
    Rep:
    Level 88
    #8 • May 14, 2007
    • i didnt think you were copying...its just much easier to learn from that IMO...
    pokeball ahrefOfflineMale
    *
    Resident Cloud
    Rep:
    Level 91
    #9 • May 24, 2007
    • having someone on a forum that they know teaching them in the simplest terms possible may be the best option for some people as they can get pretty much instant support by the members by posting their problems
    pokeball SirJackRexOfflineMale
    *
    Crew Slut
    Rep:
    Level 93
    You'll love it!
    For taking a crack at the RMRK Wiki
    #10 • Jun 27, 2007
    • Quote from: mastermoo420 on May 07, 2007, 07:30:40 PM
    That site seems a bit more professional. I think Kesshomaru is dumbing it down for us at the RMRK. Thanks for the site because I might wanna learn from there. :D

    Yeah, I learned from W3, it's really good.
    pokeball LeventhanOfflineMale
    ********
    Shadow Knight
    Rep:
    Level 91
    Ruin that brick wall!
    Project of the Month winner for October 2008
    #11 • Jun 29, 2007
    • I mastered HTML with help from w3.
    It's really cool, you know.
    Be kind, everyone you meet is fighting a hard battle.
    Pages: [1]