IS 330 2111 HTML Tutorial
Creating a web page can be lots of fun, and you can get started in a few simple steps.
Make Your Own Web Page on Your Desktop
- You can use simple programs called text editors to create web pages. If you are on Windows, look for a program called "Notepad."
If you are on a Mac, look for a program called TextEdit.
- Once you have opened the program, click "File -- Save As" select your Desktop folder and type index.html. There will be a drop down box below the file name. Make sure you have selected All Files *.* instead of "txt" from the drop down list.
- Now if you go to your Desktop and double-click on the file you just created, a blank page should open in your browser.
Add HTML Elements and Content to Your Web Page
You will want to start with a template. Copy and paste the following code into your index.html file
You should notice a few things about this code. The text that gets displayed in your browser is always displayed by words or letters surrounded with angle brackets
(like < and >). These are called tags or elements. These tags are used to label and organize text in a web page. For example when < h1 <gt
and </ h1 > surround a word or sentance, it is labeled as a top-level or first-level heading, and the browser will format it with largetr font size and some appropriate
line spacing.
Next we have a paragraph, which is always identified with a < p > and can be used to label blocks of text. Paragraphs always have a blank line between them when
they are displayed in the browser. You can add all kinds of elements into your web page. You can add lists, pictures, tables, sound, and video.
Lists can be ordered (with numbers) like this:
- Step 1
- Step 2
- Step 3
Or lists can be unordered (without numbers) like this:
- Thing 1
- Thing 2
- Thing 3
You can add images like this:
Tables are useful for organizing data
| Heading 1 | Heading 2 |
|---|---|
| Row 1 Column 1 | Row 1 Column 2 |
| Row 2 Column 1 | Row 2 Column 2 |
Adding Style
After you have filled your page with these elements, you can begin adding a bit of style for color and borders and things. To do so, insert the following code
inside the
Adding Social Elements
Increasingly, when you create web pages, you will want to bring social connections into your web site. Social network providers like Facebook have made it
relatively simple to add social elements to your pages. Through the Facebook Connect program, you can add the Like button to any web site you create. To add the
Like button you see at the top of this page, I simply visited the Facebook "Like Button" page http://developers.facebook.com/docs/reference/plugins/like/
Fill out the form to include the address of the web page you would like to link the like button to 
.
After you complete the form, click the "Get Code" button, and a pop-up will display the code to paste into the window of your text editor.
You can view the code I used to create this simple page by right clicking on the web page in your browser and select view source code.
You can learn about each of these html elements and the styles by visiting the HTML and CSS tutorials at www.w3schools.com.
