Basic HTML Part 2…


Ok as I promised, here’s my basic HTML course.  I’m also uploading a file to my website called HTMLExamples.html which is the same thing I will post here (just in the proper format so you can see what it looks like).  You can either click the link and open it, or you can right-click on the link and choose Save Target As… to save a copy to your computer..

I didn’t go into things like images, links, or CSS or other styling in this.  In fact, I probably won’t touch on styles except maybe some basic fonts and such.  CSS (Cascading Style Sheets) is more advanced than what I plan to teach here.

Here’s the code.  Note that I replaced the <>’s with {}’s for readability. 

{html}
{head}
{title}This is an example of a HTML Page{/title}
{/head}
{body}
{h1} There are four headings.  This is H1 {/h1}
{h2} This is H2 {/h2}
{h3} This is H3 {/h3}
{h4} This is H4 {/h4}
{p} This is a paragraph. As you can see it’s very similar to the paragraph in Word or other documents.  It can

be one sentence or twenty sentences long.  And you can have more than one paragraph.  The format automatically

puts a space after the end.{/p}
{p}Here is another paragraph.  If you want an empty line in the middle, you’ll put in a break {br /} This puts

one empty line right in the middle of the paragraph, or you can use it between paragraphs to make more

space.{/p}
{br /}
{br /}
{ol}This is an ordered list
{li}List Item 1{/li}
{li}List Item 2{/li}
{li}List Item 3{/li}
{/ol}
{br /}
{ul} This is an unordered list
{li} List Item 1{/li}
{li} List Item 2{/li}
{li} List Item 3{/li}
{/ul}
{p} Every format has an associated /.  This means that for every opening you do, you have to add a closing. 

The breaks are an exception to the rule in that the / is in the same format as the opening.  There are some

other format codes that you can use.  They will have a letter combination and a semi-colon (;) without any

spaces between them.  Such as lt ; (lt;) and gt ; (gt;) which print out the symbols that you surround your html

with (otherwise you’ll never see them).  Another is the nbsp ; (nbsp;) which puts a space in wherever you put

it. Finally you have the amp ; (amp;) which puts an ampersand in.  This is especially useful if your links

contain one.{/p}
{/body}
{/html}

 

Something else to point out.  You’ve probably heard of FrontPage and DreamWeaver.  Possibly you’ve heard of Expression Web Design (Microsoft’s FrontPage replacement).  The html file that I created for this example was done in notepad.  Yep, that’s right.  Notepad.  There are entire websites that are created strictly in Notepad. 

It takes longer to do them this way, but it’s free and built in.  So you don’t have to download an external program just to get the site.

Tomorrow I’ll touch on some more advanced subjects.

Have a great night:)

Patrick.

Leave a comment

Your email address will not be published. Required fields are marked *