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 2, tags and their functions

0 Members and 1 Guest are viewing this topic.

***
Rep:
Level 88
http://www.rukinet.com
Welcome back!
I'm back and now it's time for Kesshomaru school, lesson 2, tags and functions! We are still working with HTML and today we will learn the most frequent markup tags and common functions on a HTML-based website. Does it sounds hard? It's not! But if you're not entirely sure you are ready, and maybe don't know what HTML is-go back to lesson 1, introduction! Let's start!


Spoiler for Markup tags:
You're probably thinking, "what's a markup tag!?", are you not? Or at least on how it works, eh? What? You already know? Well well, but still, maybe there's someone out there that DOESN'T know? No answers? Well anyway, I'm still gonna do this!

A markup tag...
...is what you paste into a HTML-script so that something's actually going to happen! I'm not actually to good at describing a few things... This might be one of them.
You don't know what markup tag is? Then google it, for crying out loud! How hard can it be?

Tag list...
...can you find under another spoiler!

Spoiler for Basic tags:
Headings
A text can be assigned heading-tags to make-that's right-a heading. You can use <h1> to <h6> where <h1> is the largest and <h6> implies a very small text.4

Code: [Select]
<h1>the largest heading</h1>
<h2>a larger heading</h2>
<h3>a large heading</h3>
<h4>a small heading</h4>
<h5>a smaller heading</h5>
<h6>the smallest heading</h6>

Note4: The sizes of these tags can be changed at anytime by using a CSS-Cascading Style Sheet. This must first be linked by the website you want the new settings to occur. Read more about this in Kesshomaru's CSS school (coming soon).

Paragraphs
Paragraphs are used when your putting text to your website.5 A paragraph starts with a <p>-tag and ends with a </p>. This tag isn't much useful as it works just fine by just typing directly into the code, but the code looks more organised and you will easier find them when you need to change the text! And also, if you want to change the text's values in CSS, you will have to use paragraphs as the new settings won't occur while typing directly-without any tags at all!

Code: [Select]
<p>a simple paragraph</p>
<p>another paragraph</p>

Spaces and comments
There are several types of spaces-that is, regular space and line jumping space. Also there's comments which are only visible in the HTML-file. First of all, spaces!

A space is, simply enough, made by pressing the-that's right-space button! :o :O x3
But one thing about scripting HTML is that the space is used in many ways. (Is it, really?)
First of all, the scripting space! Many scripters put in several spaces before writing the actual scripts-and that's on almost every line (!)-just to make the script more organised. This is a good thing-if you're willing to spend hours and hours of putting the extra bother to put in several spaces every now and day-which I really think you should think about doing BEFORE you start scripting!
Second of all you can use them as regular spaces in paragraphs-although you can only post on space at a time. To print more than just one space you will have to write something before you do, or simply put in a piece of of code.

Code: [Select]
&nbsp;

Just don't forget the ; at the end-if you don't type it, the code won't work!
Also, nbsp stand for no breaking space.

Also, there's a "space" when you jump to another row. But to do this, it's not really like a regular space where you can type one regular space but then ahve to put in a code-now you must do it for just even one! Just simply put in the following piece of code to make a row-jump.

Code: [Select]
<br>

In regular HTML-up to the version 4.0-you didn't have to input an ending tag. But, in the latest version-XHTML, which stand for eXstensible Hyper Text Markup Language-it's important that all tags is ended. "What? But the row-jump-tag doesn't have an ending tag! What should I do know!?" Is that what you're thinking right now? Don't panic! It's simple enough that a baby could do it! Just make an ending tag in the regular tag. Do you get it? Well, if you don't, look at it this way-after the r you have to put in a regular space (Did you hear!?) and then a slash. Let's try it, now:

Code: [Select]
<br />

Well done! That wasn't too hard, was it? See, I told you! Scripting HTML is easy! Just if you listen and learn!

Now, let's try a different kind of row-jumping. In this version you will be able to do the same as the tag we just went through-just a tiny difference of appearence. Instead of just jumping down a row, like the tag before, this will first jump down a row, then make a long, horisontal ruler through the entire site (or at least the current frame, read more of this later in the HTML school) and then jump even one more row. Isn't this amazing!? (Actually no, but you're still just n00bs yet... -_-') Now you're probably wondering how to do this, right? Well, don't worry, just look at the code box underneath!

Code: [Select]
<hr>

Isn't it betuiful? *crying happy tears* x3
Well well, just as the tag before you will have to have an ending tag fused into it. You remember what we did?

Code: [Select]
<hr />

Now you have your own horisontal ruler!

Back to reality! It's time to go over the functions of a comment. What is it? What does it do? Is there even a point with it? Of course it is! A comment can come in very handy when you have to remember what a piece of code actually does. Not so many n00bs or so does actually use this, but lots of talented scripters use this function!
So now, wondering how to insert a comment to a code? Don't worry-here it comes!

Code: [Select]
<!-- insert comment here -->

Just do as the example says and insert your comment instead of the text and then you have a comment! This won't be seen by anyone other than you or who may possibly use your script.

Spoiler for Tag list:
Here comes what you've all been waiting for... *drum-solo* ...the entire tag list with all the tags... that I can remember right now!

NN: indicates the earliest version of Netscape that supports the tag
IE: indicates the earliest version of Internet Explorer that supports the tag
DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset

Code: Tag Description NN IE DTD [Select]

<!-- INSERT COMMENT HERE --> Defines a comment 3.0 3.0 STF
<!DOCTYPE>  Defines the document type     STF
<a> Defines an anchor 3.0 3.0 STF
<abbr> Defines an abbreviation 6.2   STF
<acronym> Defines an acronym 6.2 4.0 STF
<address> Defines an address element 4.0 4.0 STF
<applet> Deprecated. Defines an applet 2.0 3.0 TF
<area> Defines an area inside an image map 3.0 3.0 STF
<b> Defines bold text 3.0 3.0 STF
<base> Defines a base URL for all the links in a page 3.0 3.0 STF
<basefont> Deprecated. Defines a base font 3.0 3.0 TF
<bdo> Defines the direction of text display 6.2 5.0 STF
<big> Defines big text 3.0 3.0 STF
<blockquote> Defines a long quotation 3.0 3.0 STF
<body> Defines the body element 3.0 3.0 STF
<br> Inserts a single line break 3.0 3.0 STF
<button> Defines a push button 6.2 4.0 STF
<caption> Defines a table caption 3.0 3.0 STF
<center> Deprecated. Defines centered text 3.0 3.0 TF
<cite> Defines a citation 3.0 3.0 STF
<code> Defines computer code text 3.0 3.0 STF
<col> Defines attributes for table columns    3.0 STF
<colgroup> Defines groups of table columns   3.0 STF
<dd> Defines a definition description 3.0 3.0 STF
<del> Defines deleted text 6.2 4.0 STF
<dir> Deprecated. Defines a directory list 3.0 3.0 TF
<div> Defines a section in a document 3.0 3.0 STF
<dfn> Defines a definition term   3.0 STF
<dl> Defines a definition list 3.0 3.0 STF
<dt> Defines a definition term 3.0 3.0 STF
<em> Defines emphasized text  3.0 3.0 STF
<fieldset> Defines a fieldset 6.2 4.0 STF
<font> Deprecated. Defines text font, size, and color 3.0 3.0 TF
<form> Defines a form  3.0 3.0 STF
<frame> Defines a sub window (a frame) 3.0 3.0 F
<frameset> Defines a set of frames 3.0 3.0 F
<h1> to <h6> Defines header 1 to header 6 3.0 3.0 STF
<head> Defines information about the document 3.0 3.0 STF
<hr> Defines a horizontal rule 3.0 3.0 STF
<html> Defines an html document 3.0 3.0 STF
<i> Defines italic text 3.0 3.0 STF
<iframe> Defines an inline sub window (frame) 6.0 4.0 TF
<img> Defines an image 3.0 3.0 STF
<input> Defines an input field 3.0 3.0 STF
<ins> Defines inserted text 6.2 4.0 STF
<isindex> Deprecated. Defines a single-line input field 3.0 3.0 TF
<kbd> Defines keyboard text 3.0 3.0 STF
<label> Defines a label for a form control 6.2 4.0 STF
<legend> Defines a title in a fieldset 6.2 4.0 STF
<li> Defines a list item 3.0 3.0 STF
<link> Defines a resource reference  4.0 3.0 STF
<map> Defines an image map  3.0 3.0 STF
<menu> Deprecated. Defines a menu list 3.0 3.0 TF
<meta> Defines meta information 3.0 3.0 STF
<noframes> Defines a noframe section 3.0 3.0 TF
<noscript> Defines a noscript section 3.0 3.0 STF
<object> Defines an embedded object   3.0 STF
<ol> Defines an ordered list 3.0 3.0 STF
<optgroup> Defines an option group 6.0 6.0 STF
<option> Defines an option in a drop-down list 3.0 3.0 STF
<p> Defines a paragraph 3.0 3.0 STF
<param> Defines a parameter for an object 3.0 3.0 STF
<pre> Defines preformatted text 3.0 3.0 STF
<q> Defines a short quotation 6.2   STF
<s> Deprecated. Defines strikethrough text 3.0 3.0 TF
<samp> Defines sample computer code 3.0 3.0 STF
<script> Defines a script 3.0 3.0 STF
<select> Defines a selectable list 3.0 3.0 STF
<small> Defines small text 3.0 3.0 STF
<span> Defines a section in a document 4.0 3.0 STF
<strike> Deprecated. Defines strikethrough text 3.0 3.0 TF
<strong> Defines strong text 3.0 3.0 STF
<style> Defines a style definition 4.0 3.0 STF
<sub> Defines subscripted text 3.0 3.0 STF
<sup> Defines superscripted text 3.0 3.0 STF
<table> Defines a table 3.0 3.0 STF
<tbody> Defines a table body   4.0 STF
<td> Defines a table cell 3.0 3.0 STF
<textarea> Defines a text area 3.0 3.0 STF
<tfoot> Defines a table footer   4.0 STF
<th> Defines a table header 3.0 3.0 STF
<thead> Defines a table header   4.0 STF
<title> Defines the document title 3.0 3.0 STF
<tr> Defines a table row 3.0 3.0 STF
<tt> Defines teletype text 3.0 3.0 STF
<u> Deprecated. Defines underlined text 3.0 3.0 TF
<ul> Defines an unordered list 3.0 3.0 STF
<var> Defines a variable 3.0 3.0 STF
<xmp> Deprecated. Defines preformatted text 3.0 3.0


Source: w3schools.com

This was the end of this lesson. But come back for the next one as we will discuss what programs and stuff to use and maybe begin on "your first website!"  See you then!
« Last Edit: March 25, 2007, 11:21:42 AM by Kessiah »


Rukinet. - the dot's included!

*
I love Firerain
Rep:
Level 97
=D
Good job, hastey.
Arlen is hot.