Psychotic Princess

The Ranting Tales of a Raving Lunatic...

What is HTML?

Webopedia defines HTML as -

Short for HyperText Markup Language, the authoring language used to create documents on the World Wide Web.

HTML defines the structure and layout of a Web document by using a variety of tags and attributes. The correct structure for an HTML document starts with <HTML><HEAD>(enter here what document is about) and ends with </BODY></HTML>. All the information you'd like to include in your Web page fits in between the <BODY> and </BODY> tags.

What exactly does that mean?

The most basic web pages have HTML in them. When you view a page, you're viewing the output of the HTML, not the HTML itself. If you want to see the actual HTML, go to any page, right click on it, and go to "View Source". You'll then see a whole bunch of rather intimidating gibberish. That's HTML.

Getting Started...

The most basic and easy way to edit or create HTML is through a text editor, such as Notepad for PC's or BBEdit for Macs. GUI (Graphical User Interface) editors such as Dreamweaver, Frontpage, or Trendy Flash are great, but it's a good idea to understand the fundamentals before using these tools. This way you can get the most out of the GUI editors once you do use them.

Since I'm not familiar with Macs, most of my instructions here will be for PC users.

Open notepad -
  1. Start --> Run
  2. type notepad (enter)

My First Page

In notepad type the following -

<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<BODY>
Welcome to My First Webpage
</BODY>
</HTML>

Go to File --> Save, and type in the file name test.html. Be sure to change the Save as type from txt to All Files(*.*) before saving your page.

What does it mean?

HTML - this tells the browser that this is an HTML document, and thus the browser knows how to interperet and display the remainder of the document
HEAD - contains information about the current document, such as title (which appears in the very top bar of your browser), keywords (for search engines), and other data that is not considered body content. The browser generally does not display the content that is placed in the HEAD. However, this information is very useful for search engines, and later, defining how the page looks through Cascading Style Sheets
TITLE - This is what appears in the top bar of your browser
/TITLE - the backslash (/) defines a closing tag. This tells the browser when to stop performing a specific action. For instance, in the above example, the title opening and closing tags tell the browser what text to show in the title bar
/HEAD - denotes the end of the header of the document
BODY - this is where the visible document begins. Everything below the body tag is displayed in the browser window
/BODY - denotes the end of the body
/HTML - denotes the end of the HTML page, and is always the last tag on your page

Formatting Text

Text can be formatted with a specific color, font, style, and size.

Font - although the use of the font tag is being phazed out in preference of styles, font is good for down and dirty html designing -

  • Color - Defines the color of the text in the font element. The proper way to select a font color is through it's Hexidecimal code. An excellent location for hexidecimal codes is through VisiBone.
    VisiBone Color Chart
  • Face - Defines the font of the text in the font element. Note, in order for the visitor to see the font on their computer, it must be installed. The basic fonts are Times Roman, Arial, Courier New. You may be able to use ones such as Comic Sans MS, and, MS Sans Serif as well.
  • Size - Defines the size of the text in the font element (A number from 1 - 7).

Font Example

<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<BODY>
<font color = "#000000 size = 4 face = "times roman">This is the style </font>
</BODY>
</HTML>

To Be Continued...

Welcome

Recent Photos

   

Upcoming Events

Friday, Aug 13, All day

Newest Members

Recent Blog Entries

by PsychoticPrincess | 0 comments
by PsychoticPrincess | 0 comments
by PsychoticPrincess | 2 comments
by PsychoticPrincess | 0 comments