Web Design 101


Published on

Web Design 101

1 Comment
  • Hi ,Vegdwk
    I am participating in a contest and your slide I liked very much,because in my company we work with web design and SEO, so I invited, to visit my slide and if it likes, please addme to your favorites, thank you very much.

    Check out this SlideShare


    Please Addme to your favorite ’♥’ bye bye
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design 101

  1. 1. Web Design InfoWeb Design Info I want my own web site!I want my own web site!
  2. 2. 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
  3. 3. 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!
  4. 4. 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
  5. 5. 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
  6. 6. 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!
  7. 7. Colors
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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!!!  
  12. 12. 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
  13. 13. 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>
  14. 14. 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.
  15. 15. 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
  16. 16. Don’t steal my site! <script language=JavaScript> <!-- var message="Ah Ah Ah, no stealing!"; function click(z) { if (document.all) { if (event.button == 2) { alert(message); return false; } } if (document.layers) { if (z.which == 3) { alert(message); return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; // --> </script> Copy this into the HEAD of your site so people can not steal your pictures or text buy right clicking on your page!
  17. 17. 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
  18. 18. 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
  19. 19. 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 Horizontial line attribute that makes the line the percentage of the window <HR WIDTH="75%">27. Home Rule Width Horizontial line attribute that makes the 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
  20. 20. 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. <HR SIZE="15" WIDTH="95%" 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. <HR SIZE="15" WIDTH="95%" COLOR="#FFFFFF" STYLE="BORDER: GROOVE 5PX #6495ED"> 33. Home Rule Style Groove line. Change #FFFFFF to the same color as your background to make it look 3-D. <HR SIZE="15" WIDTH="95%" 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. <TABLE BORDER CELLPADDING=10 STYLE="BORDER: DASHED 10PX #00CCCC"> 79. Cell BG Image <TABLE BORDER CELLPADDING=10 STYLE="BORDER: INSET 10PX #00CCCC"> 78. Row BG Image <TABLE BORDER CELLPADDING=10 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%"> 73. 3-D effect border 6 FOR IMAGE: <IMG SRC="TEXAS.GIF" BORDER=0 STYLE="BORDER: RIDGE 10PX #00CCCC" HEIGHT=134 WIDTH=132> 72. 3-D effect border 5 STYLE="BORDER: OUTSET 10PX #945C49" COLS=2 WIDTH="75%"> 71. 3-D effect border 4 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" 68. 3-D effect border 1
  25. 25. 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)" HEIGHT=88 WIDTH=382> JavaScript Makes an inset border around a picture or table<IMG SRC="NAV_NMSUA.GIF" STYLE="FILTER:ALPHA(STYLE=3)" HEIGHT=88 WIDTH=382> 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 <TABLE BORDER CELLPADDING=10 STYLE="BORDER: SOLID 10PX #00CCCC"> 81. Image Filter Makes a colored 3-D border around a picture or table<TABLE BORDER CELLPADDING=10 STYLE="BORDER: GROOVE 10PX #00CCCC"> 80. Image Height & Width
  26. 26. 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
  27. 27. 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> <!--<a href='http://s27.sitemeter var message="CALL ME NOW!"; function click(z) { if (document.all) { if (event.button == 2) { alert(message); return false; } } if (document.layers) { if (z.which == 3) { alert(message); return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; // --> </script><center>
  28. 28. <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>
  29. 29. <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>
  30. 30. 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