intro

Using notepad;

there are several places to test out your html. the most common one among here is, of course, AFF! but, the easiest one is notepad. it's an application that everyone should already have. how to use it?

1. open the application
2. type up all of your html coding in there
3. hit 'save as'
4. title it, add '.html' at the end, and make sure you save it in the correct place
5. it should be an icon if your default internet browser. click on it. to open it in notepad again and edit it:
a. right-click
b. hit 'open with'
c. click 'notepad'

ending an element;

when you want to change the style of something, you can end the element and start a new one or overlap the first element with another one.

i'm going to be teaching you how to end your element.

When you want to end an element, simply put a slash ('/') after the first bracket and before the tag.

example:

*there is a space after the first bracket ('<') simply because if the space is removed, the code will be converted to html. normally, there should be no space.*

important html words;

element - everything from the start tag to the end tag

example:
sample text

start tag - the first tag to an element

example:
< span style="font-family: times new roman; font-size: 12px; color: #4f4f4f;"/>sample text

end tag - the closing tag to an element

example:
sample text< /span>

tag - keywords surrounded by brackets

example:
< span style="font-family: times new roman; font-size: 12px; color: #4f4f4f;"/>sample text< /span>

attribute - provides additional information about an element

example:
sample text

however, typing it all out that way hasn't been working ever since html4 (aff is html5) so in the end, the only attribute that we really use is 'style'.

example:
sample text

additional info;

for those of you who are absolutely new to coding and don't know how it should look like, here's some pictures to help you.

*right-click the image and hit 'open in new tab' to view full image or drag to new tab.*

before (when you first put in all the coding):

during (after you exit the source and preview it):

after (when you go back into source to edit):

take note of how everything looks like. notice the changes from when you first put it in to the time you went back into the source to edit it.

see the changes? the first time you will put in the code, it should work just fine, but when you go back, it will look different.

don't be alarmed. it simply changed because there may be some things that you forgot to add while you were coding it. aff has/will automatically add those in for you.