HTML Basic

HTML Basics 2

You might notice that some websites have pattern background or a lot of colors, rather than a solid color background. How can we do that? You can make your own background style with Photoshop. Think of it like a tile in your bathroom. There is a small tile that you repeat all over the bathroom floor to create a seamless image. So, we can apply the same idea to creating your webpage background. You need to create a small tile (for example, 100 x 100 pixels) with Photshop, then this tile can go all over the web page. Creating a small images saves a lot of space because the user only has to download one small image rather than a huge image big enough to cover the whole screen.

To create a 100 x 100 pixel tile, first go to File/New and then you have an opportunity to input 100 and 100 as the width and height of the document.
Make a tile image however you want in Photoshop and then save it with a descriptive file name (I named the file as "tile.jpg")

Here is how to put your tile into your webpage using HTML

<body background="file name here">
HTML tag should be like this <body background="tile.jpg">
(Reminder) Don't forget there is space between body and background on HTML tag.

Here is the result on your web page.

Display Images
Now, we need to know how to bring an image file on the web page. Perhaps you wanted to know this as the first step in learing how to make website.
The tag you will use to display an image is <img src="file name">

Reminders:
1. there is space between img and src on this tag.
2. image file formats only can be jpg, gif, and png (this one is less popular) to display in the Web browers.

Here is an image, whose file name is cat.jpg. So the HTML tag should be <img src="cat.jpg">
Of course, there are a lot of tags for changing the display options for images. These are similar to some of the other tags we have seen.
Alignment: <img src="file name " align="top/bottom/middle/left/right">

Some of you might have a question like "How can I display an image from my facebook website?"
First you need to know where the image is stored on their server. It is easy to find out, if you right click on your mouse (with a PC) and you see the view image, then it will display just the image on a blank page and you will be able to see the address of the image on your address bar in the web browser. Now you can write the tag like this.

<img src="URL">

for example:

IMPORTANT:
You need to understand how you've managed your files in order not to make any mistakes in following these directions. These directions will work as long as you have stored your images in the same folder as the HTML page you're creating.

The code <img src="cat.jpg"> works because the HTML page is looking in the same directory for cat.jpg. But lets say you stored all your images in a folder within the one the HTML files are stored in.

For example, imagine your images are saved in a folder called "pictures" In this case, your code will change to <img src="images/cat.jpg"> If your file is located even deeper within a series of folders, you need to include every foldername in the hierarchy to the code.

Another example, <img src="images/animals/domestic/cats/cat.jpg">

So, you realize that you can be specific as you want in your file management, but it makes your code more complicated.

I already mentioned that you should create an images folder in your server. From now on, you should save all your image files in the images folder in your server and save the HTML files out of the images folder. Your image HTML tag should be "<img src="images/something.jpg(file name)">

Links

As an example, lets say you've made 2 web pages, but you need to know how to connect to each page, or you have a menu that can take users to your favorite websites. We need to give the computer a command to link your page to others on the Internet.

The link HTML tag is <a href="anotherdocumentname.html"></a> As you see, this Link tag also needs a close tag.

For example: you want to link to the Brockport website, the whole tag should be

<a href="http://visualstudies.buffalo.edu">Visual Studies Website</a>

It is the same thing when you link to your another page. For example, you have 2 web pages you created, and the HTML file names are main.html and the other is bio.html.

How we can link to the bio page from main page? The HTML tag should be <a href="bio.html">click to see bio</a> on your main HTML page.

Another tip for how to email <a href="mailto:username@domain"> link to someone's email.
<a href="mailto:sojung@buffalo.edu"> sojung@buffalo.edu

Another tips for Tables

Table Alignment: <table align="left/right/center">
Table Border: <table border="number">
Table Color: <table bgcolor="# hex number">
Desired Width Table: <table width=""> in pixels
Width Percent: <table width="%"> percentage of page

Table Cell Alignment: <td align="left/right/center" valign="top/middle/bottom">
TD Color: <td bgcolor="# hex number">
Desired Width: <td width=""> in pixels
Width Percent: <td width="%"> percentage of table