Introduction To HTML
HTML stands for Hyper Text Markup Language. It is used to insert content onto a page, such as links, images, or tables. All HTML goes between two triangular brackets called
Tags. To add something to a page, you use an
opening tag, which begins the coding, and a
closing tag, which tells the coding where to stop. The closing tag looks exactly like the opening tag, only with a backslash
/ after the first triangular bracket.
Text Basics
|
bold
|
|
italicize
|
|
strike
|
|
Line Break
Line Break |
|
New Paragraph
New Paragraph
|
|
Centers everything in between the opening and closing tag |
Altering Font
|
Change font style |
|
Change font size |
|
Change font color |
|
Change font style, size, and color at once |
Images & Links
|
Add an image |
|
Resize an image (If you change only the height or only the width, the image will adjust automatically) |
|
Make a link |
|
Link an image (i.e., link back button codes) |
Tables
A table is a box where you can arrange your content into parallel columns. A table is arranged into
rows of
cells. Below is an example of a simple table code.
|
| This is Row 1, Cell 1 |
This is Row 1, Cell 2 |
| This is Row 2, Cell 1 |
This is Row 2, Cell 2 |
|
Introduction To CSS
CSS stands for Cascading Style Sheets. It is used to change the appearance of certain features of the page, such as the page's background, the color of all the links, or the attributes of a specific div.
Inline Coding
The format of
Inline CSS is a bit simpler than a style sheet. It is added into the HTML code, and affects only that code.
|
This code would change the color of one link, even if the rest of the links on the page are a different color. |
Bypassing The Filters
Due to Neopet's coding filters, 'position' is no longer allowed inside the style sheets. So, in order to position anything on the page, you must use inline coding. All the properties outside of 'position:absolute;' can still be placed inside the style sheet.
Stylesheets
All css codes, except for inline coding, go between two
style tags, an opening tag and a closing tag.
Basic CSS Codes
|
Change the color of any bold font |
|
Change the color of any italicized font |
|
Change the color of the links |
|
Change the color of the links when you hover over them |
|
Change the size, style, and color of the text. This can also be written: body{font:9px arial;}
|
|
Change the page's background color |
|
Add a background image to the page |
|
Change the page's cursor. Other options are: default, crosshair, not-allowed, re-size, help, wait |
Divs
A div is a box where you can place content. You can give it a width, a background, and position it at a specific point on the page. Unless you are using inline coding, a div requires css to work.
Headers
Default headers are very plain, so most people choose to alter them. The code
h1{} will change all the h1 headers. To alter the h2 or h3 headers, you must change the code to
h2{}.
Header
Textareas
Navigation Links
Navigation link codes are fairly long. The first line of code,
display:block;, is what makes the links arrange into an orderly stack. All the rest of the lines change the appearance of the links, such as adding a background and border, otherwise they would just look like a column of ordinary text links.
Welcome to Storm, a premade css and coding guide site. This site offers a variety of simple, modern css layouts, and a complete HTML and CSS coding guide. Feel
free to edit the coding however you like, and please don't hesitate to send me a message if you have and questions, comments, or need any coding help. =)
text text text text text text text text text text text text text
