HTML? WTF?

[andi]

Ok... here are the basics of HTML, explained as simply as possible (I think... I've been working with HTML for years now so I don't really remember what it was like to not know it...). If you need more help or any clarification, feel free to post. :O

First of all, saying that you'll need to know everything about HTML to format any sort of article on ZU is a bit of a misnomer. ZU actually uses a content management system (CMS) called Joomla! that makes sure the entire document is placed in the proper area of the site and has a decent title. Every time you see the basic ZU page format, with the banner at the top and the indexes on the side, they're all put there by Joomla! Basically, this means nothing to you - there's still the large green area in the middle of every page on the main site that can always be edited with basic html stuff, and that's your own personal canvas! :3

HTML, normally, is the language where you create an entire webpage - you use html to write everything from the title to putting in images to separating the page into different sections to getting it to show up properly in a search engine. It, basically, is the entire meat and potatoes of any page. If you want any of your writing or any part of the page to be centered, have color, have size, or have different spacing, you have to use an html tag to command a computer to read the text that way. If you don't do any of that, your page will simply be hideous. :3

When you guys write in HTML, you'll only have to use the language to define the styling of the text itself - all of the page stuff is already predefined on the site by Joomla! and can't be changed. Mainly, you'll be using HTML for two basic purposes - text and image formatting (which is easy as hell) and table creation (a bit more difficult). :3

Formatting is just, well, writing out text and images and tweaking everything about them. You can do a lot with text and images- change text color and font, make both so that they link to something else, change where they're located on the page, separate them into different paragraphs, etc, etc.

To do this, you use html tags. :O They're honestly just about the same as the formatting on the forums, but instead of [ and ], you use < and >. Therefore, <*b> and <*/b> are the equivalent of [*b] and [*/b]. This page gives you an example of almost all of the things you can do to text alone - from font color change to style change to everything else. In general, you'll probably only need a few of these <b> and </b>, <i> and </i>, and possibly a few others like <align=center(or right or left)> and </align>. But if you want, you can always use other things too when you feel them necessary. :3

Links are a bit more difficult -you can insert them into anything, be it text or an image or a random section of a page. To do this, you use an "anchor" tag, which is labeled as <a> and </a>. You can use the <a> tag to create places to link to on a page, choose where to link to on the web or on your own computer, and to also set a target for the link. Setting the links is fairly basic - just use <a href=http://...> to set the location you want to link to. Setting the target of the page is a bit more complex - the target basically defines how the page is opened - it can be opened in a new window or the main one, and different <a target=> designations will cover all the different options. Put everything you want to become a link inside the <a> tag, and close it off with an </a> tag.This page covers most of this stuff about anchor tags and gives you some examples to play around with. :3

Now, images are fairly simply in theory, but you can edit them in so many ways to get them to basically do whatever you want. The basic tag to insert an image is <img> (with no need for any sort of </img> tag, since an image is clearly already limited in its size :3), but from this basic format you can edit a ton of stuff about it. You can obviously put any of the <a> tags around it, to turn the image into a link, you can give it a border, you can restrict its height and width, you can create some text that will appear if the image itself doesn't load, you can turn different parts of the image into links to different places (see the image heading at the top of this page - all of the links to "home" and "articles" and such are all links made inside the image itself). :3 <img src=http://...> will define where the image is coming from, and <img src=http://... align=right> will define the same image and align it on the right side of the page. :3

If you want to break up all of the formatting on your page into different sections, you traditionally use the <p> and </p> tags to mark off every paragraph. This tag will, well, create a paragraph, since pressing "enter" when you're writing html will create a new line in the coding but it won't tell another computer to create a new line in the text. In the old days, people would use <br /> to create new lines, but that's obsolete now and runs into a lot of problems with modern coding when the code can break up almost anything on an entire line of the page. <p> keeps things much more confined and won't impact any of the other nearby coding. If you want to create any sort of blank paragraph for formatting purposes or anything, feel free to use <p>&nbsp;</p>. &nbsp; creates a symbol that tells a computer to create a nonbinding space - a space that can never be squished down or moved. Thus, writing <p>&nbsp;</p> creates a paragraph that essentially contains nothing but, unlike other paragraphs, can't be condensed down by a computer for efficiency's sake. :3 Also, if you want to indent something easily, you can use all the &nbsp; s you want to do it. :3

Another way to indent things and create organized bodies is with a list tag - list tags allow you to create bullet points or romanized numbers and the like to organize stuff in a list however you want. OL is the symbol for an ordered list, one that will number itself, and UL is the one that will make an unordered list with just bullet points and the like. Check them out fully [url=http://www.mountaindragon.com/html/lists.htm]here[url]. :3

And now, the bane of most html editors... the table. :3

Essentially, a table is a webpage-in-a-webpage. You can insert any other tags inside a table - image tags, link tags, text with different colors - you can even change the background color of tags. :3 Inside these tags, you can even use the dreaded <br /> to break up section and move text to a new line - since a table is essentially self-contained, it won't affect anything outside of itself. :3

The power of a table doesn't lie in its basic function - all a table really does is subsection off a piece of information on a site. What a table is *really* useful for is the fact that you can create tables within tables. :3 Thus, you can line stuff up well and create isolated sections devoted to specific stuff - the races of hyrule section of the site shows what tables are useful for.

Besides doing the normal things you could do to a page, with tables you can create borders around tables, add space between a table's edges and its contents, and line stuff up very easily by adding captions and restricting the size of each part of a table as you see fit. :3 Getting used to tables, quite honestly, will just take time and effort. If you want to use them, you're more than welcome to - they tend to make things look nicer and better organize, but they're not necessary unless a need obviously pops up for them, in which case I'll be more than willing to help you out in depth. :3 If you want more info, go here for the basics and here for some slightly more advanced stuff.

Those are most of the basics if you want to handcode something. Essentially, that's all you really need. If you've got a What You See Is What You Get website creation program like Dreamweaver, it will automatically convert whatever you make into html for you, but will add in a lot of tags that you won't need when you're working on ZU itself. Also, you'll have to remember to calibrate everything so that it doesn't make the page larger than 424 pixels wide, since that's ZU's constant standard for the green part of every page. As long as you do that, though, you're more than free to edit a page however you want. Dreamweaver makes it a lot easier for someone to create a page with little knowledge, but if you want to make sure everything's perfect or if your pages will mostly be containing text, a basic html editing program like wordpad is definitely the way to go, in my opinion.:3


x....X ow, so much typing.

Well, that's it. If you've got more questions or if part of this was just poorly-written, feel free to post here and I'll be more than happy to clarify anything. <3 Also, if you want to see the html formatting of any page of ZU or want to know exactly how it works, feel free to ask and I'll dig it right up for you. :3

[the_Predator]

Well this sure is great help But I think I will first write out everything normally what I need for my part and then I will return to read this. ^^