CSS

26 09 2008

Let’s make the web site’s design better. In very first, we need to call our .css file in head tag of source.

To do that, to add this single tag somewhere in <head> tag. The “href” is pointing to your css, so I named my css file “mycss” at same place with index.html

<link rel=”stylesheet” href=”mycss.css” type=”text/css” />

There is three ways we can declare CSS tags.

1. Specify HTML tag:

We can change most role of HTML tags. Which means, when we use that tag, that tag works as we changed or specified.

For example:

body {

background-color: #E9FEA0; /*background color of body*/
font: 11px “Lucida Sans Unicode”, “Lucida Sans”, verdana, arial, helvetica; /*font of body*/
color: #60615c; /*font color of body*/

}

2. CSS class:

I mostly use this CSS class. For writing the css class,

.NameOfClass {

–what the class do, goes here–

–Such as–

background-color: #ffffff;

font: 11px “Lucida Sans Unicode”, “Lucida Sans”, verdana, arial, helvetica;

color: #3fa2d5;

}

usage: put in class=”nameofclass” in tag use want to use with. E.g

<table class=”NamOfClass”>/* everything in this table is directed by the class*/ </table>

3. Action Id:

Sometimes, it’s helpful. We can use the function only once in a page. Often, developers use for separate objects. For example:

#nameID {

width: 564px;
text-align: left;
height: 609px;

}

usage: put in id=”nameofclass” in tag use want to use with. E.g

<table id=”NamOfClass”>/* everything in this tag is directed by the action*/ </table>

Now, let’s start to change the look of our web site that we made last time.

Open the mycss.css Click Here to take a look at. Hopefully, you can understand what it’s doing and if you go to source code of the index.html, you can find to know how it’s used. Then look at the web site we’re developing.

If you have question or think I did confusing job, let me know.

Thanks :)


Comments : Leave a Comment »

Categories : Uncategorized

Home page

19 09 2008

Let’s start to develop a web page design.

We need to create a folder in somewhere for the web page. I created a folder which is named myweb on Desktop. Then, open Dreamweaver-> blank page HTML, and save it in the created folder myweb. I named the first page index.html and page that is named as index, automatically set as start page. For example, when we visit a HTML web site while typing without pointing any specific page name, browsers open the page named “index” first (e.g www.colostate.edu is same as www.colostate.edu/index.html).

For using Dreamweaver, there is a very nice tool, that draw table, named “Layout table”. Click on Layout button (1) then change size of the table on properties window(2). I wanted width of 800px and height of the table is not necessary to specify.

Make sure when using layout table tool:

  1. You are in Design View (View > Design).
  2. You are in Layout mode, not Standard mode (View > Table Mode > Layout Mode or alt+F6).

After we create a Layout table, position the cross hair (+) pointer where you want to start the cell on the page, and then drag to create the layout cell (3). Advantage of layout table and cell is that we can change size and position after we put some objects(images and text) in.

I decided to have a header of 800px width and 200px height, so I made a image with that size. The header background picture is in myweb->images->header.png

I don’t know how to set layout cell background picture while using Dreamweaver, but I just type it in source code. To do that, Switch to code view (click “code” button from view choices), then: type background=”images/header/png” in the opening cell tag (td).

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Home Page</title>
</head>
<body>
<table width=”800″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<!–DWLayoutTable–>
<tr>
<td width=”800″ height=”200″ valign=”top” background=”images/header.png”><!–DWLayoutEmptyCell–>&nbsp;</td>
</tr>
<tr>
<td height=”417″>&nbsp;</td>
</tr>
</table>
</body>
</html>

Now, we need a menu, that includes links to pages-Home, About Me, Resume etc. When I create the header pic, I made left of the picture darker because I wanted a menu there. We can make this menu by unordered list.


<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Home Page</title>
</head>
<body>
<table width=”800″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<!–DWLayoutTable–>
<tr>
<td width=”800″ height=”200″ valign=”top” background=”images/header.png”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>Profile</a></li>
<li><a href=”#”>My Resume</a></li>
<li><a href=”http://manlai302.wordpress.com” target=”_blank”>My Blod</a></li>
</ul> <!–currently, we’ve not made other pages, so left # on link>
</td>
</tr>
<tr>
<td height=”417″>&nbsp;</td>
</tr>
</table>
</body>
</html>
Of course, you may want the menu on other positions like button of header, top of header etc.

We may want to set background color to the table and overall page. To easily set background of the layout table, switch to design view and click on created layout table (make sure it’s not layout cell). Then, click on bg button of properties window(4) -> choose color from pop up color choice window or if picture background, do same thing on source code(we did once on header bg).

To set overall page background, Modify->Page Properties-> background color (if color based) or background picture(if picture).

I divided main content in 3 pieces. You can also play with it and try what you know.

Ok, that’s all for today. Hopefully, you got it easily, if not just try this easy thing.

If you want to see what we made today, visit to: http://www.business.colostate.edu/manlai.bat-orshikh07/myweb

and if you go to view->page source (of browser), you can see HTML code there.

Next time, I’ll post about CSS. After work with CSS, you’ll see much better designed page instead of this poorly looking page.


Comments : 1 Comment »

Categories : Uncategorized

Basic HTML tags

12 09 2008
I decided to create a new web site as a tutorial, and this way it’s easy to understand how we can use HTML, because there are thousands of good tutorials in online, but I observed there is no tutorial like it. I’ll start it with next blog post. For this post, we should know/remember some HTML tags.

To understand basic HTML tags:

Every tag has to begin with opening tag <tag name>, and end with closing tag </tag name>.

html — The html codes have to be written in this tag, any code outside the html tag would be an error and the browsers can not read. This tag tells to the browsers it’s the start and end of a HTML page.

head — for header information and the header information is not displayed in the browsers. The head tag includes tag title that is for title of your page which is displayed on the browser’s caption. The head tag includes few more tags, I’ll explain them later.

body — code between the body tag is displayed in the browsers.

<!-”comment”-> — code comment

div – the tag defines a division/section in your page.

h1 to h6 — Headings are defined with the tags. <h1> defines the largest heading. <h6> defines the smallest heading.

a — a (anchor) tag is used for create a link to other pages or files. The tag has several more roles.

Tags for Text Format:

<b> or <strong> – to make the text Bold.

<em> or <i> — to make the text Italic.

<p> — defines a paragraph.

Table

<table> — create a table.

<tr> — This tag defines table row, and written in table tag.

<td> — This tag defines a cell of rows, and written in tr tag.

Example:

<table>

<tr><td>First Cell of first row</td> <td>Second Cell of first row</td></tr>

<tr><td>First Cell of second row</td> <td>Second Cell of second row</td></tr>

</table>

First Cell of first row Second Cell of first row
First Cell of second row Second Cell of second row

List

<li> — Defines a list item, and this tag is written in following tags:

<ul> — unordered list.

<ol>– ordered list.

Example:

An Unordered List:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 2</li>
</ul>

An ordered List (numbered):

<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 2</li>
</ol>

An Unordered List:

  • list item 1
  • list item 2
  • list item 2

An ordered List (numbered):

  1. list item 1
  2. list item 2
  3. list item 2

I know you can find to know these tags and much more from internet, but these tags are enough to start. Apologies for people who know it before, bored or just don’t like it. I promise that next posts are going to be so fun.

If you want, you can find out all HTML tags from online such as:

http://www.w3schools.com/html/

http://www.htmldog.com/reference/htmltags/

http://www.quackit.com/html/tags/


Comments : 1 Comment »

Categories : Uncategorized

Introduction of Manlai’s blog for HTML Help

5 09 2008

Welcome to Manlai’s blog! In very first, thank you all for visiting to my blog. My name is Manlai Bat-Orshikh, and I’m in computer science major of Colorado State University. My hobby is web design, so I just decided to share with you my hobby.

I think, this blog will help to the people who are interesting to learn web design and/or quick review of HTML basic tags, CSS and tutorials advise (there are thousands of tutorials that are either good and bad) etc. Also, it would be a good shot for people who are just starting to learn web design with no idea. The reason why I choose HTML by the topic is that HTML is a base language of all other web developing languages such as VB, Ajax, PHP, and ColdFusion etc.

Let’s start with the text editors and tools because we need to choose a tool that is comfortable to use for you before start. We can use all kinds of text editors to write HTML code, so I’m suggesting…

Adobe Dreamweaver

Dreamweaver is a widely used web developing tool. Especially it’s more favor for creating design view for beginners. Of course, professionals use it a most because Dreamweaver has abilities to work with languages: PHP, Coldfusion, ASP, JavaScript, XML and JSP.

Advantages:

  • Code and design view or split them options
  • To create unjustified and playable table function (sometimes it’s confusing to create a table with merged cells)
  • You don’t have to know HTML in order to use Dreamweaver
  • Flexible to work with text format from any source (MS Word, Frontpage etc)
  • Web pages that created with Dreamweaver work well in a variety of web browsers (Internet Explorer, Netscape and Mozilla versions )

Only disadvantage I can say is CSS (Cascading Style Sheets) organize. While using Dreamweaver, the program automatically creates CSS tags in individual pages you are working in. For example, when you write a paragraph and colored by red, the program creates a CSS tag for that (e.g <style5>), that tag can only be used in the page that the tag created. So, when you reorganize or update multiple pages, you must update every single pages for design.

If you are interesting Dreamweaver, click here to visit adobe’s web site and download a trial version.

I found very good and simple tutorial, if you interest, click here or click Dreamweaver picture above.

Front Page

Similar to Dreamweaver, but less advantages. However, it’s one of Microsoft Office applications, which means it’s in everywhere. Sometimes we need to work in lab or with other computers, but not that much computers have the programs we need right? For that condition, we can use FrontPage which is in computers have MS office.

Some pro people use this, because FrontPage is more useful for creating database design.

Text Editors

As I know, every text editing programs can be used for HTML such as Notepad, Textpad, Emac, MS Office word etc. But the text editors are more useful when check, insert simple things (image, text), update pages that already created because those are efficient to work with (close, open and rename). If you like to type more, you can use text editors for create web sites but I would suggest you that you don’t need to waste your time.


Comments : 3 Comments »

Categories : Uncategorized

Next Entries »