HTML Basics

From DreamHost
Revision as of 08:52, 30 May 2010 by Javierrod (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Can I hide my HTML code?

Can I hide my HTML code so that people can't see it with 'View Source'?

There really is no way of doing this. If you put up a web page, the source code is visible. That's the nature of the Web.

Although there is no way to make your HTML code invisible to visitors, there are a few tricks you can do to make viewing it a little more work:

  • Use external style sheets (CSS) [what's that?] for formatting. Your formatting (text size, color, etc.) won't be visible in the source code, but the rest of your code will be.
  • Add lots and lots of carriage returns at the top of your HTML page. This will give the illusion of a blank page, when a visitor does 'View Source.' However, a scrollbar will appear on the visitor's page, and most people will know to just scroll down.
  • Use frames. However, the main page will contain reference to the component pages, which most people will know how to access outside of the frameset using their browser.

It's difficult to imagine what information might be so secret that you would want to protect it from your visitors. Chances are, those kinds of secrets shouldn't be written into the code of your web page in the first place.

HTML Basics

Introduction

HTML (Hypertext Markup Language) is a simple language used to create web pages. The language consists of tags placed before and after text to indicate how the text is to appear in a browser. Here are some examples:

<html> Everything between the tags is an html document. </html>

<b> Everything between the tags will appear in bold. </b>

<i> Everything between the tags will appear in italics. </i>

Basic HTML Tasks

Here are some basic HTML tasks you might encounter:

Creating your first HTML page

Back to menu

HTML files are text files. You don't need any special equipment to create them; any text editor will do: vi, emacs, EditPlus, Notepad, Wordpad ---even Microsoft Word!

Let's create a test file.

Open a new file in your editor. Type in the following:

<html>
<head>
<title>My first webpage</title>
</head>
<body>
<p>First HTML document!</p>
</body>
</html>

Now save this file as test.html

That's all there is to it!

Some editors, like Word and Notepad, will try to save your file with a default extension like .doc or .txt. Don't let this happen, or when you FTP your page to your website, it won't be visible on the web!

To avoid this, select the Save As option under the File menu, instead of Save.

Saveas.gif

Type in the file name as whatever.html, and use the drop down menu to select either '.html files', or, if that option is not available, select 'All files'.

Format.gif

Line Breaks

Back to menu

There are several ways to make a line break. They include:

  • Enclosing each paragraph between these two tags: <p> </p>.
  • Putting the following at the end of each paragraph: <br> <br>

Headlines

Back to menu

Headline tags are generally used at the top of the page, to create an emphasized title. However, they can be used anywhere on the page. Headline tags function exactly like paragraph tags <p> </p>, but in addition to setting apart a line or lines of text, headline tags also put the text in boldface, and define how large or small the text will be.

There are six sizes of headline text; 1 is the largest, and 6 is the smallest. The tags look like this:

<h1> Largest </h1>

<h2> Second largest </h2>

<h3> Medium </h3>

<h4> Small </h4>

<h5> Smaller </h5>
<h6> Smallest </h6>

Align Text

Back to menu

You can align your text to the left, center, or middle. This code goes inside the headline or paragraph tags:

<h1 align = "left"> headline aligned left </h1>

<p align = "center"> paragraph aligned center </p>

<h1 align = "right"> headline aligned right </h1>

Background Color and Images

Back to menu

Background color and image are specified inside the < body > tag:

<body bgcolor = "green"> There are 16 predefined colors that can be referred to by name [#colors [what are they?]].

<body bgcolor = "#218429"> You can create almost any color by referring to it by its hexadecimal code. A list of colors and codes are available here: Webmonkey Color Chart.

<body background = "./mycat.gif"> Remember that most browsers automatically tile background images.

If you don't designate a background color or image, the default color is white.

Fonts

Back to menu

Use the < font > < /font > tags to define font color, size, and face. If you don't designate font properties, the default font is black 12pt. Times New Roman.

< font size = "3" face = "Arial" color = "blue"> < /font >

Font size ranges from 1 to 7. The default size is 3, which corresponds to 12pt. font.

Remember that different browsers may display your text differently. If you choose an unusual font, it's likely that some of your visitors will not have the ability to view it; their browsers will revert to the default Times New Roman. "Times New Roman, Arial, and Courier are three very common fonts that most browsers will understand. If you work with these fonts, it's likely that most visitors will see your site as you intended it to appear.

Use the same hex color chart for font colors, as for background colors, or choose font colors with predefined names, as above.

Boldface

Back to menu

To make boldface text, enclose the text in these tags: <b> boldface text </b>.

Italics

Back to menu

To italicize text, enclose the text in these tags: <i> this stuff will be in italics </i>.

Horizontal Lines

Back to menu

To draw a horizontal line across the page, use this code, where "width" is the percentage of the window width you want the line to span.

<hr width = "100%">


You can change the color of a horizontal line by adding color = "whatever" to the hr tag. Choose between the 16 predefined colors [what are they?], and hundreds of other colors designated by their hex codes:

<hr width = "100%" color = "green">


Hyperlinks

Back to menu

Link your article to another page by adding this code:

<a href = "URL">Name of link</a>

Link one part of your article to another part of the same article by adding this code to the link:

<a href = "#1">Name of link</a>

and this code to the area you want the link to take you to:

<a name = "1">Text you want to link to</a>

Of course if you have more than one of these in an article, make sure each has a unique anchor reference/name (the part in quotes)!

Adding Images

Back to menu

To add an image (for instance, mycat.gif), insert this code into your page:

< img src = "./mycat.gif" >

"./mycat.gif" is called a relative link. That means, the code links to the image, which is located in the same directory as your webpage.

You can also use an absolute link. An absolute link gives the full URL where the image is located. Instead of giving the location of the image as "./mycat.gif", an absolute link would read:

< img src = "http://www.mydomain.com/mycat.gif" >

Both ways work equally well. However, using relative links makes it easier to build and edit your page (if you keep a copy of all of the images in a directory on your computer, as well as at your ftp site). In addition, if you want to move directories around, using relative links will spare you the trouble of changing all of the URLs in your img src tags every time you do so.

Numbered Lists

Back to menu

Want to make a numbered list, but not worry about formatting it? Use the following tags!

<ol> (ol stands for Ordered List)

<li>li stands for List Item</li>

<li>another list item</li>

<li>(the closing tag for list items is optional)</li>

</ol>

Bulleted Lists

Back to menu

<ul> (ul stands for Unordered List)

<li>li still stands for List Item</li>

<li>another list item</li>

<li>(the closing tag for list items is still optional)</li>

</ul>

Tables

Back to menu

Tables organize information into rows and columns. Here's an example of a table:

Principal Interest Time
$500.00 7.5% 10 years

Here's the code:

<table> Designates beginning of the table
<table border = "2" > Sets a table border of 2 pixels
<tr> Marks the beginning of a row
<td> Principal </td> <td> and </td> mark the beginning and end of a column
<td> Interest </td>
<td> Time </td>
</tr> End of row
<tr>
<td> $500.00 </td>
<td> 7.5% </td>
<td> 10 years </td>
</tr>
</table> End of table

Code

Back to menu

If you want code to show up as text, for example, if you're giving examples of HTML code, you must use special symbols to represent the HTML reserved characters. Here are some common ones. For a more complete list, go here:

Webmonkey Special Characters List

"Special characters" are a series of characters beginning with an ampersand (&). Here are some examples:

  • &lt; = <
  • &gt; = >
  • &#47; = /
  • &nbsp; = blank space
  • &amp; = &
  • &#09; = horizontal tab

... and so on

Style Sheets

Back to menu Style sheets define font and other properties for an entire page, or for several pages. This makes writing, updating, and maintaining your page easier.

Internal Style Sheets dictate the properties of a single page.

Cascading Style Sheets are separate documents that dictate the properties of all of the pages linked to them.

Editing and Viewing Your HTML Page Offline

Back to menu

To view the page you created before you FTP it to your website, fire up a browser (a Netscape or Explorer window, for example), and in the address bar, type in the address (disk, directory, and filename) where you saved your file:

<img src = "./images/illustrations/addresswindow.gif">

(if this is where you saved your file.)

To look at your code, select View from the browser toolbar, then Source from the subsequent drop-down menu. This will make the source code of the webpage visible.

<img src = "./images/illustrations/viewsource.gif">

This is also a good trick to know if you see something nifty on someone else's site, and want to know how they did it!

Posting Your Site to the World Wide Web

Back to menu

To make your html page available on the Internet, you must send it via FTP (file transfer protocol) to your directory on your server. For further instructions, see our FTP Frequently Asked Questions

Resources

Back to menu

Here are some places you can go to learn more about HTML:

Colors

The 16 predefined web colors (for backgrounds, fonts, etc.) are:

white silver gray maroon
green black navy purple
olive teal red lime
blue magenta yellow cyan

Which web authoring (HTML-generating) programs do you support?

HTML Software

HTML files are a kind of text file. It doesn't matter which software you use to create your HTML files --- we will support them! Some of the software you can use to make your pages include: Dreamweaver, Homesite, Notepad, Emacs, BBEdit, Ultra32, and Fireworks. You can even use good old Microsoft Word!

Some examples of imaging software for creating pictures for your site include: Photoshop, Fireworks, Illustrator, Image Ready, Paint, or anything else that can make GIFs or JPEGs.


Cold Fusion

We do not support ColdFusion.

Creating an index page

'I've uploaded my web site to your server, but whenever I try to view it at a given URL, I get a listing of the contents of the directory they are stored in - not the site itself.'

Index Pages

When you try to go to a website, such as http://www.mywebsite.com, your browser requests a given domain from the web server (the computer where your domain and web page files are located). The web server needs to know which page to send.

Since the URL http://www.mywebsite.com/ does not specify a certain page, the server will look for an index page --- that is, a page called index.html or index.htm (you can also have index.cgi, index.php, index.shtml, index.php3, etc.., but that's another story for another time.)

If there is an index page, that's the page the server will send. If there is not, your viewer will see a list of all of the files at that site. And you don't want that!

Making an index page is easy --- just create an .html document, and name it index.html. Ideally, this will be your main page, since it's the first one your visitors will see --- but you can make it say anything you want.

Note that filenames on Linux are case sensitive, and the name of your index document must be lower case.