Site

HTML is used to build webpages. Think of HTML as a body.
HTML is made up of elements. Think of elements as the body's different systems.
Elements are made of start tags, content, and end tags. Think of these as the different cells of the system.

Let's "dissect" the bold element. The opening tag is <b>. The content is whatever you want to be bold. The end tag ends the element: </b>.

Text Formatting
Lists
Attributes
Links
Images
Font
Forms
Conclusion

Text Formatting

Bold

To make text bold, use this code:

= TEXT

Italic

To make text italic, use this code:

= TEXT

Underline

To underline text, use this code:

= TEXT

Line Breaks: <br>

Using <br> inserts a line break.

ExampleExampleExample

Example
Example
Example

Lists

Bulleted Lists

Bulleted lists are lists that use little circles called bullets instead of numbers. The <ul> code opens the list, the <li> code makes a bullet, and the <ul> code closes the list. Here's the code:

TEXT
TEXT

Numbered Lists

Numbered lists are like bulleted lists except they use numbers instead of bullets. The <*ol> code opens the list, the <*li> code makes a number, and the <*/ol> code closes the list. Here's the code:

TEXT
TEXT

HTML Attributes

Some HTML elements have attributes. These are always used in the opening tag, and give futher information about the element. The HTML I've listed so far have only been single elements - elements that don't require or have attributes.

The following elements have attributes - some more than one - which they use to futher specify something.

Links: The <a> tag

Links

If you've ever been on the internet, you've no doubt encountered a link. You probably used a link to get to this very page. Links, put simply, are gateways to another webpage. All links require this code:

The link's URL can be any URL on the internet. The link text is what actually shows up on the webpage.

Click here to go to AobaruNet!

Additionally, if you want the user to open a new window when they click your link, add the target="_blank" attribute to the <a> tag:

Click here to go to AobaruNet!

Page Anchors

Anchors are useful links that, unlike regular links that take you to a different page, take you to a different part of the current page. This is handy for really long pages that may take forever to get to a certain part. They use the name attribute.

Place that code where you want the user to jump to. Place the following code where you want the user to click:

Jump to the top!

Mailto

If you want the user to email you just by clicking a link, use mailto:, then the email address, in your link. (Note: mailto isn't an attribute, you use it in the link)

Email Aobaru-kun!

Images: The <img> tag

Insert an Image

To insert an image into your site, you need the <img> tag, plus the src attribute, which tells the element the URL of the image. And, unlike other tags, the <img> tag doesn't require an end tag. Here's an example code:

You can also use an image as a link. Simply treat the image code like text between the two <a> tags.

Alternate Text

Alternate text is the text you see when you roll your mouse over an image. Its attribute code is alt. Insert it after the src attribute.

Height and Width

By default, the height and width of your image is its acutal height and width. However, you can adjust the height and width (in pixels) of your image with the height and width attributes.

Forms: The <form> tag

To make a form, which includes stuff like text fields, radio buttons, checkboxes, and buttons. To begin a form use the <form> tag, then the <input> tag (which doesn't require a clsing tag), followed by the type attribute and the form type. Text makes a textbox, radio makes a radio button, checkbox makes a checkbox, and submit makes a submit button. Additionally, you can use the name attribute to name an element, and the value attribute to edit the default text .