// Layout/Coding Thread A̶r̶t̶/̶G̶r̶a̶p̶h̶i̶c̶s̶ ̶T̶o̶o̶ //
Jul 29, 2016 14:35:29 GMT -5
Blizzardwolf likes this
Post by Невыносимая коммунизм on Jul 29, 2016 14:35:29 GMT -5
This is a thread created to assist others with layouts; etc...
I am eighteen, and have been coding, drawing, and editing for about seven years. Please don't be shy.
I will also be listing come coding FAQs here.
If anyone needs art advice, I can grant that as well
1. What is HTML?
HyperText Markup Language:
HTML is a plain text file with commands <markup tags> to tell the Web browsers how to display the file.
Tim Berners-Lee created HTML while at CERN, (the European Laboratory for Particle Physics) in Geneva.
2. How do I start?
Here's a basic HTML document layout:
<HTML>
<HEAD>
<TITLE>Comf's Stuff</TITLE>
</HEAD>
(Note: The words between the TITLE tags, in this case, "Comf's Stuff" will show up on the header line of browsers viewing the page; and also, it will be the default title when the page is added to a browser's favorites or bookmarks.)
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#cc0000" VLINK="#000066" ALINK="#ffff00">
<H1>Comf's Stuff</H1>
Type the "stuff" here.
<A HREF="http://etcetcetc/">Capitalist's</A>
</BODY>
</HTML>
That's the basic beginnings of writing an HTML file. You save it in notepad, word, whatever text editor, as yourfile.html (or .htm if your system doesn't allow 4 characters for the file type). Then you FTP the file to your server. [Your ISP (Internet Service Provider) will give you their FTP address of where to upload your files. If your service doesn't offer Web site space, there are several that offer free Web space.]
3. How do I change the color of my background or text?
Include the element "bgcolor" with a color code in your body tag:
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#cc0000" VLINK="#000066" ALINK="#ffff00">
BGCOLOR: is the color you want for the background
TEXT: the color you want to designate for regular text
LINK: the color for new text links (pages that have not been displayed by the reader's browser)
VLINK: the color for text links to pages that the reader's browser has already displayed
ALINK: the color a text link will change to during the process of choosing it (as it is clicked with the mouse)
* Color codes: Web Safe Color Chart and also Non-Dithering Colors by Hue
To change the color of a word, or sentence, you put <FONT COLOR="#cc0000"> before the text you want colored, and </FONT> at the end. (substituting the "cc0000" with the code for the color you want)
In the color code "#CC0000" - the "CC" position is red, center "00" position is green, and last "00" position is blue.
Web Safe Colors use lower numbers for darkest colors, going 00, 33, 66, and 99, then cc, and ff... with 'ff' being the lightest.
4. How do I use a picture as the background?
Include the element "background" with the name of the graphics file:
<BODY BACKGROUND="gumby.gif" BGCOLOR="#ffffff" TEXT="#000000" LINK="#cc0000" VLINK="#000066" ALINK="#ffff00">
(Note: the "bgcolor" element remained along with the added "background" element. This way, the browser will display the color you designate while the background graphic is loading. Not required, but using a color similar to the background file will ensure viewers can see your page well enough to begin reading while the background graphic is loading.)
5. How do I add music to my page?
Some people use the Netscape specific &/or Explorer specific code, however I recommend you make it a link and let the reader choose whether or not they want to hear music.
Like this...
<A HREF="http://www.snowhawk.com/sounds/hvnearth.mid">Heaven on Earth</A> would allow the reader to choose the link Heaven on Earth. Then the reader's software will open the link for them to hear the midi. Some people do use the other method, however it is only operational to that specific browser. (Like only Netscape users could hear it for Netscape's specific code.. or the same for Internet Explorer's code.)
6. How do I align text next to a graphic?
By including the "align" element in the "img" tag.
<IMG SRC="wflower.jpg" WIDTH="25" HEIGHT="25" ALIGN="top" BORDER="0" ALT="wildflower photo"> Photo of wildflowers in Texas</A>
(The align="top" would align the text "Photo of wildflowers in Texas" next to the graphic at the top. - Other options are "middle" or "bottom.")
7. How do I make a graphic a link?
Including the "img" tag between the "a href" tag and the "a" closing tag:
<A HREF="http://www.snowhawk.com/wildlife.html"><IMG SRC="leopard.jpg" WIDTH="25" HEIGHT="25" ALIGN="top" BORDER="0" ALT="link to wildlife"></A>
8. How do I make a new paragraph?
Inserting the <P> tag at the beginning of your paragraph will drop the text down two lines. (If you insert the <BR> tag, it will drop your text down one line.)
9. How do I make headings and text larger or smaller?
There are 6 sizes to the heading tags:
This is using the <H1> tag
This is using the <H2> tag
This is using the <H3> tag
This is using the <H4> tag
This is using the <H5> tag
This is using the <H6> tag
You would type this as follows:
<H1>Heading here, ending with the closing tag</H1>
The next text you type would then be displayed 2 lines below.
The Heading tags will default align to the left. If you want to center the heading, you would use:
<H3 align=center>Heading here</H3>
...to have the heading aligned to the right, you would use:
<H3 align=right>Heading here</H3>
To adjust the size of any text, use the <FONT SIZE="-1">to go smaller one size, ending with closing tag</FONT> And <FONT SIZE="+1">for text one size larger.</FONT>
To center any text, or image, you begin the line with the center tag:
<CENTER><FONT SIZE="-1" COLOR="#009900">text</FONT></CENTER>
Always close the last tag first... such as "font" was closed before "center" above; otherwise the browsers have a "field day" with your text.
10. Where can I find graphics to use on my page?
There are many sites offering free use of graphics, although most will require a link to them, showing credit. You can do a search at any of the search engines and get thousands of places to look. You can also buy CDs with graphics on them. Check to be sure they state "royalty free" on the CDs. Here's my collection of graphics links, which includes how to make your own graphics, and where to find graphics offered by folks for public domain.
11. How do I make text show as bold?
Placing the <B>tag before the text will make everything bold, until you close the tag with</B> (Or using <STRONG>tags</STRONG > will do the same.)
12. How do I make text show in italics?
Placing the <I>tag before the text will make everything in italics, until you close the tag with</I> (Using <EM>emphasis tags</EM > will do the same.)
13. How do I know if my HTML is correct?
It's good to validate your HTML. Just because you can see the Web page ok on your browser doesn't mean every browser will show it that way, or even be able to access the Web page. Browsers attempt to "work around" HTML errors, and the differences can be subtle or drastic. That's why the folks at WC3 have worked up the specifications of what works for every browser. Although some may display it a little different, at least you know they can access your page. (The different browser programs have their own set of "whistles and bells" that just won't do the same... especially Microsoft Internet Explorer and Netscape Navigator.)
You can check your HTML by entering the page URL at validator.W3.org/.
First, at the very top of your HTML page, before the <HTML> tag, add the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
Then when you check it at the validator, it knows that you are checking for "HTML 4.0 Transitional."
Note** I understand that these can also be accessed from the hotbar. I never said that this would be a forum tutorial. This is a coding FAQ, and can be referenced at anytime, mainly when one is coding from scratch. W3 Schools is a more indepth site that can give better info then I can.
insert code here
