Web Design 101

Web Design InfoWeb Design Info
I want my own web site!I want my own web site!

What is it?
1. What is a web site?
2. Why do I need one?
3. How do I make one?
1. A website is a collection of web
pages, images, videos or other
information that is hosted on one or
more web servers accessible via the
internet.
2. If you have any kind of business, or
service you sell these days it is
important that you advertise it and
the web is the most
efficient/effective way of getting
information to your potential
customers
3. Ahhh this is what we will touch on
with this program….
I will help you with cheat sheets along the way
REMEMBER:
Write the code exactly as shown or it won’t work

html
HTML, means HyperText Markup Language, is the predominant language for most web
pages. It provides a means to describe the structure of text-based information in a
document — by denoting certain text as links, headings, paragraphs, lists, and so on —
and to supplement that text with interactive forms, embedded images, and other
objects. HTML is written in the form of tags, surrounded by angel brackets.
Example: <body background>
I know what your thinking…HUH ???
This means it is how all the information gets on those web pages you see!
Such as: text, pictures, moving text, music, colors, borders, and just about everything
you see and hear on the internet.
Every web site starts with a blank sheet, and the designer “Paints the page with words”
The words translate to everything you are seeing on the page!

Fist things first
My dog is the <B>world</B> to me.
sentence one.<br>
sentence two.<br>
sentence three.<br>
sentence four.
<i>Italic words</i>
My dog is the world to me
sentence one.
sentence two.
sentence three.
sentence four.
Italic words

Font Sizes & Kinds
<FONT SIZE=1> a very small font
<Font size=3> a medium font
<FONT SIZE=6> really big font
<FONT FACE=“put the type of font you want in here">
These are some types of fonts:
Times, Arial, Calligrapher, Verdana

Indents
<dd> To indent the first line ONLY
Hi there I am an intended paragraph
And I think this is cool
<ul> To indent whole paragraph left margin ONLY
wow now I am learning something and I think I can design a cool web site for
myself and my small company
Hanging indent
<p style='text-indent:-25'> (the 25 is up to you)
Oh no I thought I was a pro now I’m not so sure of this.
I was getting the hang of this thing but now I am thrown for a loop.
YIKE I sure hope she shows me more!
I sure hope she gives me some cheat sheets!

Bullets & lines
<LI>Me
<LI>Myself
<LI>I
• Me
• Myself
• I
<HR SIZE=1 WIDTH=100%>
this puts a thin line across 100% of the page
<HR SIZE=5 WIDTH=50%> this puts a thicker line 50% across the page
<HR SIZE=25 WIDTH=25%> this puts a really thick line across 25% of
the page

Adding pictures
<IMG SRC=“where my picture is hosted at">
There are pictures every where on the net, but the key is finding them or having a place
to host them. A couple of places are:
photobucket.com
Myspace.com
hostdrjack.com
profilestyling.com
And many other places that have the html code for pictures

Aligning Pictures
Make it go left: <img src=" where my picture is hosted at " align="LEFT">
Make it go right: <img src=" where my picture is hosted at " align="RIGHT">
Make it align with the top of my text:<img src=" where my picture is hosted at " align="TOP">
Make it go in the middle of my text:<img src=" where my picture is hosted at"
align="ABSMIDDLE">
Make it align with the bottom of my picture: <img src=" where my picture is hosted at "
align="BOTTOM">
Here are some samples picture alignment

Picture Boarders
<IMG style="border-style:outset; border-color: orange; border-width:5px;"width=" 375 "
height=281 src=" where my picture is hosted at">
so if your pictures html code looks like this:
<img src=" where my picture is hosted at " width="375" height="281“>
Make sure that you change the size to match the size of your picture!!!

Marquees
Ok I got that….. but I want to make my words move!
<marquee>Text or Image </marquee>
<marquee direction="right">Text or Image </marquee> Going right
<marquee direction="left">Text or Image </marquee> Going left
<marquee behavior="alternate"> Text or Image </marquee> Going back and forth across page
<marquee direction="up"> Text or Image </marquee> going up
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">Text or
Image</marquee></MARQUEE> going crazy
<marquee onmouseover='this.stop()' onmouseout='this.start()'>
text here </marquee> marquee stops if you put your mouse over it
Here are some samples: marquees

Links
Text links:
<a href=“the place where your link or url is ">what you want your text to say </a>
To make a picture a link:
<a href=" the place where your link or url is "><img src=" the place where your
picture is "></a>

Transitions
That all well and good but I want my pages to have a really kool look to them when I go
from one page to another!
Add a transition effect to your page by adding the following to the HEAD section of your
web page: <meta http-equiv="Page-Enter" content="revealTrans (duration=2,
transition=12)" /> change this number to whatever number is below
1. Shrinking Box
2. Growing Box
3. Shrinking Circle
4. Growing Circle
5. Wipes Up
6. Wipes Down
7. Wipes Right
8. Wipes Left
9. Right-moving stripes
10. Downward-moving stripes
11. Right-moving boxes
12. Downward-moving boxes
1. Dissolve Screen
2. Horizontal Curtain Closing
3. Horizontal Curtain Opening
4. Vertical Curtain Closing
5. Vertical Curtain Opening
6. Wipe Away, Down and Left
7. Wipe Away, Up and Left
8. Wipe Away, Down and Right
9. Wipe Away, Up and Right
10. Horizontal Bars Dissolve Screen
11. Vertical Bars Dissolve Screen
12. Random Effect, for the Adventurous!
There is one other effect, a fade effect, but it's coded differently: <meta http-
equiv="Page-Enter" content="blendTrans(Duration=5)" /> The only to thing you can
change is the Duration. It gets added to the HEAD section like the others.

Tables
Ok I want to break my page up a bit!
<table style="width: 640px;"> this is how big the whole table is
<tr> <td style="width: 140px;" valign="top"> Cell 1 content </td>
<td style="width: 500px;" valign="top"> Cell 2 content </td></tr></table>
Here are some samples: Tables

Don’t steal my site!
<script language=JavaScript>

</script>
Copy this into the HEAD of your site so people can not steal
your pictures or text buy right clicking on your page!

Html Tags
(9 pages of tags!)
Makes a line break that's a smaller space
than the <P> tag
<BR>9. Line Break
Makes the text even on both the left and
right margins
<P ALIGN="JUSTIFY">8. Justify Text
Adds vertical spacing to the text that’s
larger than the line break.
<P> </P>7. Paragraph
Changes the size of the Font, goes from H1
(largest) to H6 (smallest)
<H1> </H1>6. Heading
Puts notes on the source page that can not
be seen on the actual Web page
5. Comment
Holds most of the page's information<BODY> </BODY>4. Body
Works with the HEAD tags to tell the
computer what to put in the header section
of the Web page
<TITLE> </TITLE>3. Title
Tells the computer what to put in the
header section (or title bar) of the page
<HEAD> </HEAD>2. Head
Tells the computer you are writing in
HTML
<HTML> </HTML>1. HTML
PurposeCodeTag Name

Changes the font sizes of the text inside the
tags, sizes range from 1 (largest) to 6
smallest.
<FONT SIZE ="3"> </FONT>18. Font Sizes
Changes the font faces of the text (Arial,
Garamond, Helvetica & Times New
Roman) inside the tags
<FONT FACE = "ARIAL"> </FONT>17. Font Face
Adds background color to the Web page<BODY BGCOLOR="COLOR NAME
OR #NUMBER"
16. Background Color
This lowers the text that is in the tags<SUB> </SUB>15. Subscript
This raises the text that is in the tags<SUP> </SUP>14. Superscript
This puts a line through the middle of the
text
<STRIKE> </STRIKE>13. Strike
This underlines all of the text between the
tags
<U> </U>12. Underline
This makes the text italic, which means the
text leans
<I> </I>11. Italic
This makes the text bold, or heavier and
darker
<B> </B>10. Bold

Horizontial line attribute that colors the line
(works only in IE)
<HR COLOR="#FFCC00">29. Home Rule Color
Horizontial line attribute that makes the
line align left, right or center
<HR ALIGN="LEFT">28. Home Rule Align
line the percentage of the window
<HR WIDTH="75%">27. Home Rule Width
line thin or thick (in pixels)
<HR SIZE="10">26. Home Rule Size
Creates a horizontal line<HR>25. Home Rule
Adds an image to the Web page. Height &
Width can be changed as well as
alignment by placing CENTER pr
tags around the code
<IMG SRC="1_TITLE.JPG">24. Insert Image
Adds background image to the Web page<BODY
BACKGROUND="1_TILE.JPG"
>
23. Background Tiles or
Bordered
Numbers information into a list. LI = list
item.
<OL> <LI> <LI> </OL>22. Ordered List
Bullets information into a list. LI = list
item.
<UL> <LI> <LI> </UL>21. Unordered List
Centers text across the page horizontally<CENTER> </CENTER>20. Center Text
Changes the font colors of the text inside
the tags
<FONT COLOR = "#FF3369" >
</FONT>
19. Font Colors

Dash Line<HR SIZE="5" WIDTH="95%"
STYLE="BORDER: DASHED 6px
#0000FF">
39. Home Rule Style
Dashed Line in 2 colors<HR SIZE="15" WIDTH="95%"
COLOR="#CCCC00"
STYLE="BORDER: DASHED 5PX
#000000">
38. Home Rule Style
Ridge line with 2 colors. Repeat the same (i.e.,
#FF0000) to get the 3-D effect.
<HR SIZE="15" WIDTH="95%"
COLOR="#FFCC00"
STYLE="BORDER: RIDGE 5PX
#FF0000">
37. Home Rule Style
Ridge line with 2 colors. #FFCC00 is the inside
color of the line.
COLOR="#FFCC00"
STYLE="BORDER: RIDGE 5PX
#FF0000">
36. Home Rule Style
Inset line<HR SIZE="10" WIDTH="85%"
STYLE="BORDER: INSET 5px
#99CC66">
35. Home Rule Style
Grooved line with 2 colors<HR SIZE=15 WIDTH="95%"
COLOR="#6495ED"
STYLE="BORDER: GROOVE 5PX
#FF8C00">
34. Home Rule Style
Groove line. Change #FFFFFF to the same color as
your background to make it look 3-D.
COLOR="#FFFFFF"
#6495ED">
33. Home Rule Style
Groove line. Change #FFFFFF to the same color as
your background to make it look 3-D.
COLOR="6495ED" STYLE="BORDER:
GROOVE 5PX #FFFFFF">
32. Home Rule Style
Dotted line<HR SIZE="10" COLOR=CYAN
WIDTH="95%" STYLE="BORDER:
DOTTED 10px">
31. Home Rule Style
Dotted Line in 2 colors<HR SIZE="10" WIDTH="95%" COLOR=
"Red" STYLE="BORDER: DOTTED
#000099">
30. Home Rule Style

Active (Selected) Link Text Color, place it
in the <BODY>
VLINK="#FFCC00"49. VLINK
ALINK="#FF0000"48. ALINK
Link Text Color, place it in the <BODY>LINK="GREEN"47. Link
Email link, opens up an email program<A
HREF="mailto:youremail@msn.c
om">Email</A>
46. Email HREF
The target on the same page when you click
the link
<A NAME="Target"> </A>45. Name
Creates a link on the same page<A HREF="#Location">text </A>44. Hyperlink Reference
Creates a link to a new page<A
HREF="http://www.url.com">text
</A>
43. Hyperlink Reference
Tags for links<A> </A>42. Anchor Tag
Solid with 2 colors<HR SIZE="15" WIDTH="95%"
COLOR="#000000"
STYLE="BORDER: SOLID 5PX
#FF00CC">
41. Home Rule Style
Double Line<HR SIZE="15" WIDTH="95%"
STYLE="BORDER: DOUBLE
8px #FF6633">
40. Home Rule Style

Adds space between the cell border and the
cell contents in pixels, write tag in the
<TABLE>
<TABLE WIDTH="75%">59. Table WIDTH
Adds space between cells in pixels, write
tag in the <TABLE>
<TABLE CELLPADDING=" ">58. Cell Padding
Aligns the table CENTER, LEFT or
RIGHT
<TABLE CELLSPACING=" ">57. Cell Spacing
Specifies how many rows of the table this
cell should span
<TABLE ALIGN=" ">56. Table Alignment
Specifies how many columns of the table
this cell should span
<TD ROWSPAN=" ">55. Row Span
Adds a visible border around a table in
pixels
<TD COLSPAN=" ">54. Column Span
Adds cells to a table<TABLE BORDER="1">53. Table Border
Adds rows to a table<TD> </TD>52. Table Data
Adds a table to the web page<TR> </TR>51. Table Row
Followed (Visited) Link Text Color, place
it in the <BODY>
<TABLE> </TABLE>50. Tables

Adds background color to a row<TABLE
BORDERCOLOR="#000000">
67. Table Border color
Adds background color to a table<TD BGCOLOR="SILVER">66. Cell Color
Aligns the info in a table cell top, bottom or
centered
<TR BGCOLOR="#FF0000">65. Row Color
<TABLE BGCOLOR="BLUE">64. Table Color
Aligns the info in a table cell left, right or
centered
<TD VALIGN="CENTER">63. Vertical Cell Align
Aligns the info in a table row top, bottom
or centered
<TD ALIGN="CENTER">62. Horizontal Cell Align
Aligns the info in a table row left, right or
centered
<TR VALIGN="CENTER">61. Vertical Row Align
Makes the table __% of the screen, without
this, the table will auto fit to the
content in the cells
<TR ALIGN="CENTER">60. Horizontal Row Align

<TABLE BORDER CELLPADDING=10
STYLE="BORDER: DASHED 10PX
#00CCCC">
79. Cell BG Image
STYLE="BORDER: INSET 10PX #00CCCC">
78. Row BG Image
STYLE="BORDER: DOTTED 10PX #663366">
77. Table BG Image
FOR TABLE: <TABLE BORDER CELLPADDING=10
STYLE="BORDER: DOUBLE 20PX #FFCC00"
WIDTH="50%">
76. Insert Image into a Table Cell
STYLE= "BORDER: DOUBLE 20PX #FFCC00"
HEIGHT=134 WIDTH=132>
75. 3-D effect border 8
FOR IMAGE: <IMG SRC="TEXAS.GIF" BORDER=074. 3-D effect border 7
FOR TABLE: <TABLE BORDER CELLPADDING=10
STYLE="BORDER: RIDGE 10PX #00CCCC"
WIDTH="50%">
FOR IMAGE: <IMG SRC="TEXAS.GIF" BORDER=0
STYLE="BORDER: RIDGE 10PX #00CCCC"
STYLE="BORDER: OUTSET 10PX #945C49"
COLS=2 WIDTH="75%">
Makes a colored 3-D border around a picture or tableFOR TABLE: <TABLE BORDER=1070. 3-D effect border 3
Adds color to the table borderHEIGHT=134 WIDTH=132>69. 3-D effect border 2
Adds background color to a cellFOR IMAGE: <IMG SRC="TEXAS.GIF" BORDER=0
STYLE="BORDER: OUTSET 10PX #945C49"

Makes an solid border around a picture or table<TD HEIGHT=" ">89. Insert Sound
Makes an grooved border around a picture or table<IMG SRC="CESSNA.JPG"
STYLE="FILTER:BLUR(STRENGTH=30)
" HEIGHT=88 WIDTH=176>
88. Table Border Width wo px
Makes an dashed border around a picture or table<IMG SRC="SOCCER.GIF"
STYLE="FILTER:ALPHA(STYLE=2)"
JavaScript
Makes an inset border around a picture or table<IMG SRC="NAV_NMSUA.GIF"
STYLE="FILTER:ALPHA(STYLE=3)"
87. One Image Background
<IMG SRC="image_name.gif" HEIGHT="50"
WIDTH="50">
86. One Image Background
<TD BACKGROUND="image_name.gif">85. Cell Width
<TR BACKGROUND="image_name.gif">84. Cell Height
<TABLE BACKGROUND="image_name.gif">83. Image Filter
Makes a dotted border around a picture or table<TD><IMG SRC-"image_name.jpg"></TD>82. Image Filter
Makes a double color lined border around a picture or
table
STYLE="BORDER: SOLID 10PX
#00CCCC">
81. Image Filter
Makes a colored 3-D border around a picture or table<TABLE BORDER CELLPADDING=10
#00CCCC">
80. Image Height & Width

Makes a frame or border around the entire webpage (use the
same "styles" as for creating borders around tables, see
68 – 75 above)
Inserts a movie on a webpage
Inserts a sound on a webpage
Makes the width of the table border w/o pixels
Use 1 image as the background. Insert the code immediately
following the <BODY> tag itself. Change notebook.jpg
to reference your own background image.
Use 1 image as the background – does not tile image. Image
size: 1024 x 768
Describes the cell width in terms of pixels
Describes the cell height in terms of pixels
Makes the image blur (change the strength number to blur more)<BODY STYLE="BORDER:10PX RIDGE RED">
Makes the image faded and round< EMBED SRC ="movie_clip_name.mpeg" height="256"
width="320" controller="true" autoplay="true"
type="video/quicktime"></EMBED>
Makes the image faded and square<EMBED SRC="sound.mid" AUTOSTART="TRUE"
width="300" height="40">
Resizes the height and width of an imageBORDER-WIDTH: THIN (OR MEDIUM OR THICK)
Inserts a cell background image</script>
Inserts a row background image (works in NS only)document.body.style.background="url('notebook.jpg')
white center no-repeat fixed"
if (document.all||document.getElementById)
<script language="JavaScript1.2">
Inserts a table background image<BODY BGPROPERTIES="FIXED">91. Bordered/Framed Webpage
Inserts an image into the table cell<TD WIDTH=" ">90. Insert Movie Clip

A typical site code
(this code is 3 pages long)
<html>
<head>
<meta http-equiv="Page-Enter" content="blendTrans
(Duration=4.0)"><meta http-equiv="Page-Exit"
content="blendTrans
(Duration=4.0)">
<script language=JavaScript>

</script><center>

<body BACKGROUND="http://i.keen.com/listingphotos/18764992-1617664961.jpg"
bgpROPERTIES="fixed"style="border: 5px ridge #0066FF"><font color="white"><font size="6"><font
face="Garamond"><marquee direction="left" behavior="scroll" scroll="continuous"
scrollamount="3"><br><br>
I will be your guide on your journey toward Enlightenment ...
</marquee><br><br>
<TABLE ALIGN=center BORDER=3 CELLSPACING=0 CELLPADDING=5 WIDTH="85%"
BGCOLOR=#0066FF"
BACKGROUND="http://i.keen.com/listingphotos/18764992-2094283998.jpg"
bgpROPERTIES="fixed"style ="border: 5px ridge #0066FF"><TR><TD><BR><br>
<center>
<font size="5">
Chi is the Vital Energy of the Universe<br>
from which the world was created.<br><br>
and can be practically applied in life.<br><br>
<img src="http://i.keen.com/listingphotos/18764992-563667251.jpg" width="278" height="375"
border="0">
<br><br>
By using images of Tarot, and other methods that I have developed
I create a link to the source of Chi or Universe.
<br><br>
These connections bring me closer to the Universe<br>
to help me to clarify and straighten your path!<br><br>
The effect of this connection makes you<br>
mentally stronger, less confused<br>
and able to rectify mistakes of the past<br>
with a clear understanding of the Reality of Life.<br><br>
The stronger the connection between us and the Universe,<br>
the clearer the picture of the world and your place in it.<br><br>
<a href='http://www.keen.com/calls/PT_interimcall.asp?sid=7790798'><img border=0
src='http://www.keen.com/calls/callimage.asp?sid=7790798&ImageType=1'></a><br><br>

<TABLE ALIGN=center BORDER=3 CELLSPACING=0 CELLPADDING=5 WIDTH="75%"
BGCOLOR=#0066FF" BACKGROUND="http://i.keen.com/listingphotos/18764992-411028715.jpg"
bgpROPERTIES="fixed"style ="border: 5px ridge #0066FF"><TR><TD><BR><center>
<p><u><font color="black"><font size="4">About me:</u>
<br><br>
<li>Ph.D. in Metaphysics
<li>C.W.S. In Transpersonal Psychology
<li>C.W.S. In Anthropology
<li>C.W.S. In Humanities
<li>Black Belt in Taijiquan (Tai Chi Chuan)
<li>Member of The American Association of Psychics and Mediums
<li>Certified Reiki Master
<li>Certified Tarot Card Reader<br><br>
</TD></TR></TABLE>
<br><br>
<marquee direction="up" behavior="scroll" scroll="continuous" scrollamount="2"><font color=black><font
size="4"><i><center>
I am here to help you!<br><br>But If you are calling to be Combative or Negative<br>Please Move on!
<br><br>Please Be Respectful<br>The Future is not cut in stone<br>it is changable by you & your
thoughts<br>Leaving bad feedback will not help you!<br><br>I welcome "5 Star" Ratings & Written
Feedback</i><br><br></marquee><br><br>
Call Me Now So You can start on your path to Nirvana!<br><br><a
href='http://www.keen.com/calls/PT_interimcall.asp?sid=7790798'><img border=0
src='http://www.keen.com/calls/callimage.asp?sid=7790798&ImageType=1'></a><br><br>
<img src="http://i.keen.com/listingphotos/18764992-119138778.jpg" width="265" height="375"
border="0">
<br><br>
</td></TR></TABLE><font color="white"><font size="2"><font face="Garamond">
Page design by:<br><center><a href=http://www.keen.com/wonderwoman><font
color="white">WonderWoman<br><br>

Whew!
Oh my goodness this is to hard!
Can’t you just do this for me ???
Well yes I can ….
Just click here for my web site:
Wonderwoman
Or call me at: 330-431-3200

Web Design 101

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (9)

Semelhante a Web Design 101

Semelhante a Web Design 101 (20)

Web Design 101