Html Complete Study Package

Transcript

Internet Programming (Basic HTML Programming) What is Internet programming? Internet programming includes broad variety of technologies spanning such diverse areas such as protocols for communication networks, interfacing to databases, programming of graphical user interfaces, or structuring information. Examples: 1. C I, !"# and "ervlets all serve the same basic function. $hey perform server% side processing. &. "imilarly C'()!, *C'+ and enterprise ,ava )eans specify how to talk to distributed ob-ects. .. /ikewise 0+/, 1$+/, " +/, 0"/ and C"" are all similar tools for marshaling and displaying data across a network. What is web application? Essentially, all web applications do pretty much the same things: 1. #rovide a 2uery Interface % 3eb !pplications provide users with an interface for entering data. &. $ransmit 4ser%*efined 2uery % 'nce collected, the user%data is sent to a web server. .. #erform "erver "ide #rocessing % $he web server processes the user%data using some sort of 5middleware5. 6. 5+assage5 *ata % #rocessing almost always involves playing with data on the server. 7. $ransmit 2uery (esults % $he processed data is now returned to the client. 8. #erform Client "ide #rocessing % 9inally, the returned data is displayed to the user. *isplay might be as simple as interpreting 1$+/, or as complex as performing calculations, sorting, or other manipulations of the data. Data on the Web $he most basic part of a web application is the data itself. !ll web applications allow a user to submit instructions on how the web application should massage a bit of data on the web server. $his might involve searching a database, creating a shopping cart of products, or emailing some information to someone, or simply do nothing as in presenting an ordinary text file. 1 (egardless, the data which is being manipulated all has some basic characteristics. 1. *ata have values &. *ata have types .. *ata have descriptions 6. *ata have formats !ll of the web technologies at the *ata /ayer define, describe, or standardi:e one or more of these characteristics. Some data t pes (aw *ata: (aw data is perhaps the most basic form of data and often the best choice. !s raw data are considered a plain !"CCI text, images, sound, etc. 1$+/: ! markup language. It is an essence of 3orld 3ide 3eb. 0+/: !nother markup language. HTML ! H perte"t Mar#$p Lang$age 1$+/ has a central role in the 3eb • • • • • ! simple format for describing the structure of hypertext or hypermedia documents % plain text ;!"CII< files with embedded codes for logical markup =ot designed to be the language of a 3>"I3> word processor such as 3ord or 3ord#erfect 9ormally an " +/ ;"tandard enerali:ed +arkup /anguage< application 9rom nothing to a global information utility in -ust ? years 3e are seeing an explosion of new ways to get connected: *igital $@s, 1andhelds, #hones, Cars,... %bo$t HTML&'HTML 1$+/ ;1yper $ext +arkup /anguage< and its more recent incarnation, 01$+/ ;Extensible 1yper $ext +arkup /anguage< is the central core on which all 3eb pages are built. !lthough there are new types of technology and coding options, including #1#, !"#, 0+/ and others, traditional markup language is the place where 5all 2 things 3eb5 starts. "ome 3eb editing software publishers claim that it is not necessary to know 1$+/ if you use their programs to build 3eb pages. 1owever, this is rarely the case. In almost every instance at least some knowledge of 1$+/ and 01$+/ is helpful. In this tutorial we will guide you through the basics of writing 1$+/A01$+/ code. It is important to reali:e that there is no better way to learn and understand the code than to actually write and use it. $his tutorial will get you started on your first steps toward becoming knowledgeable about the code. Techni($e +any people try to write 3eb page code as if they were creating a term paper. $hey start at the beginning and continue on through the middle to the end in a linear fashion.1$+/A01$+/ code consists of two types of tags. $here are the container tags and the single part tags, often called 5noncontainer5 tags. Container tags have an opening part and a closing part with the 5stuff5 that the tag controls inside. !n example is the tag that creates bold text, BstrongCBAstrongC. is the opening part and is the closing part. If we write a code snippet it might look like this, 5BstrongC$his is boldBAstrongC5 and you can see the bold text in between the tag parts. !n example of a singlepart tag is the line break, Bbr AC which merely stops a line of text at a specific point. $his is used where a line must end after a particular word. Tools 3riting 1$+/ and 01$+/ code can be done simple word processor. )ut it is important to note the average code write should never use a processor such as 3ord, 3ord#erfect, 'pen'ffice, or similar. $hese 5high end5 word processors are too smart and will try to insert their own formatting codes. $he best software to use is also the most basic. =otepad is a perfectly suitable tool for writing 1$+/. "ome programs that are specifically designed to create 3eb pages, such as *reamweaver, have special 1$+/ writing functions that allow you to create straight code. $here are also programs such as 1$+/Dit that function as 5code insertion5 programs where the user doesnEt necessarily write the code, but rather instructs the program to insert blocks of 1$+/ or 01$+/. Even though these programs make writing code easier, it is still necessary to know the code. =ote #ad tool would be used for programming in 1$+/. 3 )etting Started $o get started with you 3eb pro-ect you need to set up your site with the proper structure. "ite structure is very simple. >our pro-ect has a 5root folder5 that contains all of the files associated with the site. Inside the root folder ;which, by the way, can have any name you wish, it doesnEt have to be called 5root5< will be sub folders for specific types of files. 3hile the 1$+/ 3eb pages will be 5loose5 in the root folder, all the images will be in an image folder, #*9 files in a #*9 folder, and so on. $he diagram on the right illustrates a standard 3eb site structure with three 1$+/ pages and two sub folders. 'ne you have your site set up on your computer with a root folder and the necessary sub folders you can start to build your first 3eb page. $his will probably be your home page. 4nless instructed otherwise, your home page will have one of these names: inde"*htm inde"*html de+a$lt*htm de+a$lt*html $he exact name will be specified by your 3eb master maintaining the host server for your site. +ost 3eb hosting servers have a hierarchy of names. 3hen a site visitor types into his or her browser the 4(/ of a 3eb site, the browser is directed to the host server. $he host server automatically looks for the name of the home page based on the order of the list, and when it is found it sends the page and all of its associated files to the visitorEs computer where the browser assembles it on the screen. If the server doesnEt find the preferred home page name in the collection of 1$+/ files it automatically looks for the second file name in the hierarchy. If that page isnEt found it looks for the third page name, and so on. It is helpful to give your home page the preferred home page name on your host server so that the time lost to the search process is reduced. 'pen a new document with =ote#ad ;or whichever program you decide to use< and then save it in your root folder with one of the home page names noted above 4 Setting ,p the Basic -ode ! 3eb page consists of two parts, the head and the body. $he head contains information about the page, such as +eta tags, when it was made, and the specifications of the code itself. $he body contains the material that is seen when the page is viewed. $he data in the head is not visible, although it may specify how the 5stuff5 in the body is displayed. !ll the tags, including the head and body tags, are located inside what can be called the 5ultimate container tags,5 BhtmlCBAhtmlC, which tell the browser that everything inside them is for a 3eb page. "tart by typing the opening and closing 1$+/ tags BhtmlCBAhtmlC as shown in the illustration on the right. BhtmlC BAhtmlC BhtmlC BheadC BAheadC BAhtmlC =ow add the opening and closing tags for the head of the 1$+/ page so that the code looks like the example on the right. =ow add the body tag. "ave the file. BhtmlC BheadC BAheadC BbodyC BAbodyC BAhtmlC BhtmlC BheadC BAheadC BbodyC $his is my first 3eb pageF BAbodyC BAhtmlC =ow add some text into your 3eb page so that you have something to see when you test it. It must be typed in the body, between the opening and closing body tags. =ow you can start your 3eb browser, Internet Explorer, 9irefox, +o:illa, "afari, 'pera, or whatever your favorite is. 'pen your new 3eb page and view the file. In most browsers you will click 9ileC 'pen ;or 'pen 9ileou will see your pageEs title at the very top of the browser. BhtmlC BheadC BtitleC+y 3eb #ageBAtitleC BAheadC BbodyC $his is my first 3eb pageF BAbodyC BAhtmlC NOTE: It isn't necessary to follow the File> Open sequence every time you view a saved page !ust ma"e sure your page is saved then clic" the #efresh or #eload $utton %depending on which $rowser you are using %dding and .ormatting Te"t In this next series of steps you will discover how to add next to your 3eb page and format for appearance. >ou will start by adding a paragraph tag to the body of your 3eb page. $he code is illustrated on the right. #aragraphs are one of the elements that 1$+/ is designed to identify. =otice that paragraphs are specified with the p tag, BpCBApC. NOTE: &hat is that te't( The te't illustrated in the e'ample on the right is often called ) *T+, ) from the first two words in this often quoted sample BhtmlC BheadC BtitleC+y 3eb #ageBAtitleC BAheadC BbodyC BpC HTML (Hyper Text Markup Language) and its more recent incarnation, XHTML(Extensi !e Hyper Text Markup Language) is t"e centra! core on #"ic" a!! $e pages are ui!t% &!t"oug" t"ere are ne# types o' tec"no!ogy and coding options, inc!uding (H(,&)(, XML and ot"ers, traditiona! markup !anguage is t"e p!ace #"ere *a!! t"ings $e * starts% .BApC BAbodyC BAhtmlC =o doubt by now you have noticed a pattern to the way container tags are formed. $he closing part of a container tag always has a forward leaning slash, A, to it. $his slash is what tells the browser that the use of the tag has ended and is closed. /etEs format your text a little bit by adding some simple bold to the first few words of the paragraph. Insert the strong tag as shown on the right. 1ow will this look when viewed in a browserG "ave the file and test it with your browser. =otice that only the words inside the strong tag show up as bold. $his is how container tags work. BhtmlC BheadC BtitleC+y 3eb #ageBAtitleC BAheadC BbodyC BpCBstrongC HTML BAstrongC (Hyper Text Markup Language) and its more recent incarnation, XHTML(Extensi !e Hyper Text Markup Language) is t"e centra! core on #"ic" a!! $e pages are ui!t%.BApC BAbodyC BAhtmlC !nother container tag is the emphasis tag that is used to display text as italics. $hat tag is BemCBAemC. $ry applying it to a section of text other than the part you bolded earlier. $he example on the right will how you how this might be done. >ou can see a real 3eb page using the emphasis tag by clicking here. BhtmlC BheadC BtitleC+y 3eb #ageBAtitleC BAheadC BbodyC BpCBstrongC HTML BAstrongC (Hyper Text Markup Language) and its more recent incarnation, XHTML(Extensi !e Hyper Text Markup Language) BemCis t"e centra! core on BAemC, #"ic" a!! $e pages are ui!t%. BApC BAbodyC BAhtmlC /esting Tags =esting tags refers to the order in which the opening and closing parts of tags appear when multiple tags are applied to a single segment of text or another ob-ect. 9or instance, a portion of text can be both bold and in italics. #roper nesting of the strong and emphasis tags would look like this: -strong>-em>This is $old and italics-.em>-.strong> $he strong tag is on the 5outside5 while the emphasis tag is on the 5inside5 and the text is in the middle. >ou could also make the tags nest thusly: -em>-strong>This is $old and italics-.strong>-.em> Improperly nested tags will not have the outsideinsidemiddle seHuence. !n example of an improperly nested set of tags is: -strong>-em>This is $old and italics-.strong>-.em> In the 5old days5 of the 3eb improperly nested tags usually did not make much difference. )ut, as the 3orld 3ide 3eb evolved it became increasingly important for browsers to adhere to common standards. %d0anced Te"t .ormatting In addition to creating bold and italici:ed text, you can also use 1$+/ to control the appearance in more advanced ways. Included is the ability to display text in color, control the font, and set the text si:e. 9ont presentation is controlled using the font tag, BfontCBAfontC. In the example on the right, font si:e is specified at .. 9ont si:es are specified 1 through I BhtmlC BheadC BtitleC+y 3eb #ageBAtitleC BAheadC BbodyC BpCBfont si:eJ5.5C$his text is font si:e ..BAfontCBApC BAbodyC BAhtmlC with 1 as the smallest and I the largest. "i:e . is the default si:e. $hat is the si:e that is 5normal5 for most browsers under most circumstances. >ou can experiment with the font si:es by changing the value using 1 through I. $he list below shows what these si:es look similar to what is shown below. (emember, actual font si:e will depend on many factors, including the si:e of the monitor screen. 9ont si:e 1 9ont si:e & 9ont si:e . 9ont si:e 6 9ont si:e 7 9ont si:e 8 9ont si:e I It is also possible to specify font si:es relative to the settings in the browser. $his is done using font si:e attributes that are placed with 5K5 or 55. !n example is on the right where the si:e K& is used. $his means that the font should be displayed & si:es larger than the browserEs default si:e. !ccording to the rules for 1$+/, these font si:es should override the settings that are set in a visitorEs browser. In other words, if a visitor to your 3eb page has customi:ed his or her font si:es in the browser, the use of the si:e attribute in the font tag will 5take over5 and the text should appear as you, the page builder, desire. $he example on the right illustrates how a Lfont Ksi:eM attribute could be applied. BhtmlC BheadC BtitleC+y 3eb #ageBAtitleC BAheadC BbodyC BpCBfont si:eJ5K&5C$his text is font si:e 8.BAfontCBApC BAbodyC BAhtmlC "o, what is a 5K5 or a 55 exactlyG >ou canEt tellF )ecause each browser could have any font si:e set for default, it is not possible to determine exactly what the text will look like because it can vary from machine to machine. $he examples below will give you some idea, but to see how the appearance you may wish to visit this page later with another browser setting of another machine. $his is font si:e K1 $his is font si:e K& $his is font si:e K. $his is font si:e K6 $his is font si:e K7 $his is font si:e K8 $his is font si:e KI $his is font si:e 1 $his is font si:e & $his is font si:e . $his is font si:e 6 $his is font si:e 7 $his is font si:e 8 $his is font si:e 8 It is possible that several of the above examples look identical. $his is because some browsers will limit -ust how large or small font can be displayed. $here is really no point in creating text that is unreadable, which can happen if it is too big or too tiny. !nother way to format text is by using color. Color can be specified by using names, such as red, blue, or 9orest reen. $hey can also be defined using their ( ) ;Red, Green, Blue< values. $he most common way for colors to be specified on the 3eb is by their hexadecimal values. Examples of each method are below. -font color/)red)>This is red specified as a color name -.font> Bfont colorJ5&77,N,N5C$his is red specified as an ( ) value.BAfontC Bfont colorJ5ffNNNN5C$his is red specified in hexadecimal.BAfontC -olor and the Web Color plays an important part of 3eb page design. It can be used for decorative purposes, such as to make something look stylish or flashy, or it can be used to indicate an action or function. 9or instance, the links on these pages are blue, and that makes them easier to identify. Color can be applied to text, backgrounds, and certain kinds of borders. It is important to understand both the benefits and pitfalls that color can present. 3hile a 3eb page with a black background and grey letters may look sophisticated, it will be difficult to read. $he attribute value type 5color5 ;OColorP< refers to color definitions as specified in Q"( )R. ! color value may either be a hexadecimal number ;prefixed by a hash mark< or one of the following sixteen color names. $he color names are case%insensitive. -olor names and S1)B 0al$es 0lac" / )1222222) 3reen / )1224222) 5ilver / )1626262) ,ime / )122FF22) 3ray / )1424242) Olive / )1424222) &hite / )1FFFFFF) 7ellow / )1FFFF22) +aroon / )1422222) Navy / )1222242) #ed / )1FF2222) 0lue / )12222FF) 8urple / )1422242) Teal / )1224242) Fuchsia / )1FF22FF) 9qua / )122FFFF) $hus, the color values 5S?NNN?N5 and 5#urple5 both refer to the color purple. Headings 1eadings one of the ob-ects on a 3eb page that 1$+/ and 01$+/ are intended to identify. 1eadings tags that are used to specify importance and are defined by using the 5h5 tag. $here are six heading tags ranging from 1 to 8 with 1 being the most important and 8 being the least important. Imagine that you are making a traditional outline for a paper or article you are writing. It might look something like this: I Introduction 9 &elcome II +ain +essage 9 8art : &hat I did on my summer vacation : 3etting to the airport ; Flying on the airplane a This is heading *:-.h:> 3hen the h1 tag is used in a 3eb page, the code will resemble the example on the right. BhtmlC BheadC BtitleC+y 3eb #ageBAtitleC BAheadC BbodyC Bh1C$his is an example of the h1 tag.BAh1C BAbodyC BAhtmlC It a simple 3eb page the h1 tag would resemble the illustration on the right. Lists /ists are also ob-ects that 1$+/ and 01$+/ are intended to define. $he code allows you to specify two types of lists, ordered lists and unordered lists. $he primary difference between the types is that the ordered lists indicate importance and unordered lists only indicate that the data is a list, no importance is intended. $he list tags are container tags, but they each have two parts. #art one indicates whether the list is ordered or unordered. #art two is the item in the list itself. )elow is an example of an ordered list. 1. *inner at ?:NN pm. &. /unch at noon. .. "nacks at 11:NN am. $his list indicates that the most important item is dinner at ?:NN pm, the second most important is lunch at noon, and the least important item is snacks at 11:NN am. $he code snippet for this list is shown below. -ol> -li>>inner at 4:22 pm -.li> -li>,unch at noon -.li> -li>5nac"s at :::22 am -.li> -.ol> =otice that each item is inside the list item tag, BliCBAliC and that the whole set of list items is within the ordered list tag BolCBAolC. !n example of an ordered list is below.    !pples 'ranges grapes $his unordered list does not indicate which fruit is most important. $he code snipped for this list shown below. -ul> -li>9pples-.li> -li>Oranges-.li> -li>grapes-.li> -.ul> $he unordered list tag is BulCBAulC, and as with the ordered list, each item is within the list item tag, BliCBAliC. +any people will use the ordered and unordered list tags for presentational purposes. In other words, when they are not interested in actual lists, but want a group of items with bullets in front of them they will use the unordered list tag. 3hen they want numbers instead of bullets they will use the ordered list. $his is not good 3eb practice. /ist tags are specifically intended to specify lists and not how something looks. $his may seem like a trivial point, but there are situations ;such as with search engines< that using a list tag incorrectly can cause problems. In the examples above, if the ordered list tag is used inappropriately, the code would be telling a search engine that oranges are the most important thing on the list when that is perhaps not the message that was desired. It may be that the page designer merely wanted a set of lines with numbers in front of each and had no intention of indicated the importance of oranges. $his could cause the page to come up unsatisfactorily when a search is performed. Lin#s /inks are the most important part of the 3eb. In fact, the whole premise of the 3orld 3ide 3eb is the ability to link from one document to another. =ow, of course, links lead from one site to another, and to specific points within a site. $here are two types of links, absolute and relative. !ll link tags are container tags. $he way to think of an absolute tag is that it tells exactly where a browser should go by following all the necessary paths. $hey are used when you link from one 3eb site to another. (elative links ;sometimes called 5local links5< -ust tell the shortcuts. /etEs say that we want to make an absolute link to the 4niversity at !lbanyEs 3eb site. $he link is inside the ! tag and would look like this: -a href/)http:..www google com)>,in" to google-.a> (oughly translated the link says that the browser should use hypertext transfer protocol to go to the 3orld 3ide 3eb and find the 3eb site of called 5albany.edu.5 3e wanted to find the home page of a specific department on the 4niversityEs 3eb site. !n absolute link to the Communication *epartmentEs home page is: -a href/)http:.. www ptu ac in.Inde' html )>,in" to the 6ommunication >epartment home page-.a> $his link says that the browser should use hypertext transfer protocol to go onto the 3orld 3ide 3eb and find the 4niversityEs 3eb site, then find the Communication *epartmentEs site within the 4niversityEs site, and finally present the page called 5inde' html ) (elative links leave out all the 5http stuff.5 $hey say that instead of going to the 3orld 3ide 3eb the browser should -ust stay 5in the neighborhood5 and get a page. ! good example is a link to the previous page of this tutorial. $his is page 7, and letEs say that you want to create a link to page for. It would be: -a href/)page? html)>8revious 8age-.a> $his relative link tells the browser to go to 5page6.html5 without going 5out5 to the 3eb and coming back into the 4niversityEs 3eb site. >ou can also link internally to a 3eb page by using the anchor tag. $he anchor tag allows you to -ump to a point on a page. 3e have an anchor called 5top5 installed on this page. $he code for the anchor point is: -a name/)top)>-.a> $he link to it is: -a href/)1top)>3o to the top of this page-.a> $he example on the right shows how this might be coded into a 3eb page. Note: 9n anchor tag always has a )1) at the $eginning BhtmlC BheadC BtitleC+y 3eb #ageBAtitleC BAheadC BbodyC Ba nameJ5top5CBAaC BpC3elcome to my 3eb page. >ou can go to the top of the page by Ba hrefJ5Stop5Cby clicking hereBAaCBApC BAbodyC BAhtmlC >ou can add include an anchor point in an absolute or relative link. $he relative link to this pageEs top anchor point is: -a href/)page@ html1top)>Top of 8age @-.a> La o$t and Tables $he layout of a 3eb page is important. #lacing components, such as text, images, and headings is critical to not only the appearance of a page, but also how well the visitor understands the information presented. ! poor layout will look bad, and it will also make the information on the page hard to find and understand. 3eb pages 5want5 to be displayed with all components aligned vertically on the left side of the page. Center and align right attributes can be applied to many ob-ects.but even these alignments do not allow for careful and specific placement of page components. $he illustration on the right shows a 3eb page with no formatting of any kind. 4sing attributes to align ob-ect left, center, or right can help establish the position of ob-ects on a 3eb page. !n example is on the right. 3e will be learning about position attributes and the center tag in detail later in this tutorial. $ables are the solution to the problems that caused by the default left alignment of standard 1$+/ and 01$+/ code. 'riginally intended to present data in 5tabular5 form, that is columns and rows, tables Huickly became the 3eb page designerEs 5best friend5 by allowing accurate placement ob-ects on a page. 'n the right is an example of a 3eb page that uses a table to control placement of ob-ects. $he table is invisible. 'n the right is the same page, but this time the tableTs borders are shown. $he tableEs borders are easily seen and you will be able to observe how it is used to position ob-ects on the page. $he table tag is a container tag with three main parts. $ables consist of rows and cells, and there are tags for each. $ables must have all the tags written in the proper order for them to work. $he tags are:    $he table tag BtableCBAtableC $he table row tag BtrCBAtrC $he table cell tag BtdCBAtdC )elow is an example of a simple table. $his table has three rows and three columns. $o begin building the table we will start with the opening and closing table tags. -ta$le>-.ta$le> $o make it easier to add the rest of the tags we will put the opening and closing table tags on two lines. -ta$le> -.ta$le> =ow we add the first table row tags. -ta$le> -tr>-.tr> -.ta$le> $he row is not complete until the three table cells are added. -ta$le> -tr>-td>-.td-td>-.td>-td>-.td>-.tr> -.ta$le> =ow the table is built like this: If you are using =otepad, it is a simple 5cut and paste -ob5 to install the other two rows. -ta$le> -tr>-td>-.td-td>-.td>-td>-.td>-.tr> -tr>-td>-.td-td>-.td>-td>-.td>-.tr> -tr>-td>-.td-td>-.td>-td>-.td>-.tr> -.ta$le> =ow the table has this structure: 3here is the tableG $he table is really there. )ut we did not apply any attributes to the table, so although it exists, it is invisible. $o make the table appear an the screen, we must define how it will look. $he first step will be to add borders. $ype in EborderJ515E into the opening table tag as shown below. $his creates table borders 1 pixel thick. -ta$le $order/):)> -tr>-td>-.td-td>-.td>-td>-.td>-.tr> -tr>-td>-.td-td>-.td>-td>-.td>-.tr> -tr>-td>-.td-td>-.td>-td>-.td>-.tr> -.ta$le> $he table is now visible. )ut it looks very small because we have not applied any si:e attributes. In addition, there is a curious feature of 1$+/ and 01$+/ that will cause the table to look odd. 4nless there is an ob-ect of some kind in a table cell, most browsers will not display the cell or the border around it. $his can cause some peculiar effects. "ome browsers will not show the cell, others will. In the table below there is an ob-ect in all cells except the center one. *epending on the browser you are using, you may or may not see the center cell correctly. $ext 'b-ect $ext 'b-ect ='$E: *o you see a center cell, or do you see a 5pillowlike5 effectG $ry viewing this page with another browser. 3hat do you see thenG 'b-ects in cell can be text, images, or even other tables. $hese are called 5nested tables.5 'b-ects can also be special pieces of code. $he most commonly used one for this purpose is the 5nonbreaking space.5 $he nonbreaking space is a true ob-ect that is invisible. It is used to create additional spacing in lines of text and as invisible ob-ects in table cells so that the cells are visible in all browsers. $he nonbreaking space is installed by typing a simple !"CII code into the table cell. =ote: !"CII codes are numerical representations of characters that are found on a keyboard and other characters for which there are no keys. In computers and the 3eb they are used to cause a character to display on the screen when either there is no key or it is not desirable to use the actual keystroke character. "ometimes !"CII codes are used to hide email addresses from 3eb robots that collect the addresses for spamming. *etails and a list of !"CII codes can be found at www.asciitable.co m. $he !"CII code for a non breaking space is An$spB )y placing a nonbreaking space in the center table cell, it will appear correctly on the 3eb page as shown below. $ext 'b-ect $ext 'b-ect !s with the previous example, this will depend on your browser. In some instances you may not see any change at all because the cell was always properly displayed. 4sing ob-ects such as the nonbreaking space assures that you tables will always appear on the page as you intend. 3e can add nonbreaking spaces to the table on which we have been working so that the code looks like this: -ta$le $order/):)> -tr>-td>An$spB-.td-td>An$spB-.td>-td>An$spB-.td>-.tr> -tr>-td>An$spB-.td-td>An$spB-.td>-td>An$spB-.td>-.tr> -tr>-td>An$spB-.td-td>An$spB-.td>-td>An$spB-.td>-.tr> -.ta$le> $o cause the table to be displayed larger we will give it a width attribute of .NN pixels. $he example below shows how to do this. -ta$le width/)=22)$order/):)> -tr>-td>An$sp-.td-td>An$sp-.td>-td>An$sp-.td>-.tr> -tr>-td>An$sp-.td-td>An$sp-.td>-td>An$sp-.td>-.tr> -tr>-td>An$sp-.td-td>An$sp-.td>-td>An$sp-.td>-.tr> -.ta$le> $he 5.NN5 refers to the width of the table in pixels. 4nless specified otherwise, the default measurements are always in pixels. %d0anced Table .ormatting >ou are not limited to formatting a table by specifying only its si:e and borders. $here are many options that you can use to make a table appear the way you want it to. Cell padding and cell spacing are important attributes that can be assigned to a table. Cell padding is the space between an ob-ect in a table cell and the sides of the table cell. )elow are two examples that demonstrate what this means. $here is a table with no cell padding $here is a table with a cell padding attribute of 1N pixels. =otice that in the second example there is more space around the text. It is easier read and has a more pleasing appearance. $he padding attribute is placed in the opening table tag. $he code for the table is: -ta$le width/);4?) $order/):) cellspacing/)2) cellpadding/):2)> -tr> -td align/)center)>There is a ta$le with a cell padding attri$ute of :2 pi'els -.td> -.tr> -.ta$le> Cell spacing refers to the space between cells. 1ere is an example of a table without cell spacing: =ow here is the same table with 1N pixels of cell spacing. 3hile this looks like the borders have increased in si:e, in actuality they have not. $o see what thicker borders look like in a table without cell spacing, examine the sample below: $o make the difference between cell spacing and borders as clear as possible, here is the same table with 1N pixels cell spacing and 7 pixels for the table borders. 4sing different combinations of cell padding, cell spacing, and borders allows you to control the appearance of your tables so that they can be as useful as possible. 1ere is a table that combines all three attributes: Cell #adding ? pixels Cell spacing is $able borders are 6 pixels $he table is .NN 1N pixels pixels wide $he code for this table is: -ta$le width/)=22) $order/)?) cellspacing/):2) cellpadding/)4)> -tr> -td>6ell 8adding 4 pi'els-.td> -td>Ta$le $orders are ? pi'els-.td> -.tr> -tr> -td>6ell spacing is :2 pi'els-.td> -td>The ta$le is =22 pi'els wide-.td> -.tr> -.ta$le> =ote: $he .d effect of standard table borders is an old fashioned style. +any 3eb page builders today want to use table borders, but not the oldfashioned 5picture frame5s that we see above. It is possible to create borders in several styles using Cascading "tyle "heets. )ut, the use of C"" is beyond the scope of this tutorial. =ote: C"" tutorial I will provide you later. Color is added to tables in three different ways: 1. $able background color &. Cell background color .. )order color )elow is a table with the background color of SUU..NN. It has standard 1 pixel borders. $he code for the table is: -ta$le width/)=22) $order/):) cellpadding/)2) cellspacing/)2) $gcolor/)1CC==22)> -tr> -td>An$spB-.td> -td>An$spB-.td> -.tr> -tr> -td>An$spB-.td> BtdCVnbspPBAtdC BAtrC BAtableC )ecause the table background color is an attribute that affects the entire table, the color is specified within the opening part of the table tag. 1ere is a table in which one cell has the background color of SUU..88: $he code for that table is: -ta$le width/)=22) $order/):) cellpadding/)2) cellspacing/)2)> -tr> -td $gcolor/)1CC==DD)>An$spB-.td> -td>An$spB-.td> -.tr> -tr> -td>An$spB-.td> -td>An$spB-.td> -.tr> -.ta$le> =otice that the background color for the table is in the opening part of the table cell tag. 3e can create a table that has a background color and a cell that has a different background color, such as: Examine the code for this table closely: ta$le width/)=22) $order/):) cellpadding/)2) cellspacing/)2) $gcolor/)1CC==22)> -tr> -td $gcolor/)1CC==DD)>An$spB-.td> -td>An$spB-.td> -.tr> -tr> -td>An$spB-.td> -td>An$spB-.td> -.tr> -.ta$le> >ou will see that the background color is applied to the entire table, but the background color is specified for only one cell. $his is a very important concept that can be further illustrated with the table below. $he code for this table is: -ta$le width/)=22) $order/):) cellpadding/)2) cellspacing/)2) $gcolor/)1CC==22)> -tr> -td $gcolor/)1CC==DD)>An$spB-.td> -td>An$spB-.td> -.tr> -tr> -td $gcolor/)1FF66==)>An$spB-.td> -td $gcolor/)12222FF)>An$spB-.td> -.tr> -.ta$le> $hree of the cells have colors specified, one cell does not. $he cell without a color allows the table background color to show through. $he background cell colors, on the other hand, have priority over the table background color. $hus, even though the table background color is specified, the cell background colors are displayedF $he example below illustrates this a bit better. Cell )ackground Color Cell )ackground Color $able )ackground Color Cell )ackground Color )ackground images follow the same priority rules as color. )oth tables and table cells can have background images. 1ereEs a table with a clock photograph for a background: =otice that the image repeats. $his repetition is called 5tiling5 because the placement of the image is similar to how tiles are laid. )elow is a similar table with two rows and two columns. =ow one of the cells has a toy duck in the background. It also tiles, but only inside the cell. $he code for this table is: -ta$le width/);DE) $order/)2) cellpadding/)2) cellspacing/)2) $ac"ground/)images.cloc"FD2 Gpg)> -tr> -td width/):E:) $ac"ground/)images.duc"Fsmall Gpg)>An$spB-.td> -td width/)CD)> -.td> -.tr> -tr> -td>An$spB-.td> -td>An$spB-.td> -.tr> -.ta$le> $he backgrounds in both the table and the table cell are added as attributes. $he last point about tables that must be touched on here is that there are four alignment attributes for tables. $hey are default, left, center, and right. $he default causes the table to be aligned to the left side of the page unless the visitorEs browser causes it the table to be aligned otherwise. /eft alignment mandates the table appear on to the left side of the page. Center specifies centering. (ight causes the table to be aligned to the right side of the page. $hese attributes are placed in the opening part of the table tag. $he syntax is: -ta$le align/)left)> -ta$le align/)center)> -ta$le align/)right)> *efault alignment does not reHuire an attribute. Images Images are important parts of 3eb pages. 1$+/ and 01$+/ allows you to place images in a 3eb page and assign attributes to control si:e and placement. In this next section you will learn about image and image coding. $he image source tag is a singlepart tag. It is: -img src/)nameofyouimage gif) .> 1ereEs an example of simple image placement: $he code for the image is: -img src/)images.dogonhat Gpg) alt/)) width/);2@) height/):E2) .> $he information in the code tells us that the image name is 5dogonhat.-pg5 and that it is located in the images folder of the 3eb site. $he code also specifies that the si:e of the image is &N7 pixels wide and 1IN pixels high. NOTE: There are three image file types that can $e used on the &e$ They are !83 %!oint 8hotographers E'periment 3roupHI 3IF %3raphics Interchange FormatHI and 8N3 %8orta$le Networ"s 3raphicsH For more information a$out these three types of file formats visit 9ppendi' : at the end of this document Image dimensions are specified as attributes. "pecifying dimensions assures that the browser will display the image as you wish. In addition, you can use the dimension attributes to manipulate an image to your advantage. 9or instance, below is a very small image displayed in its 5natural5 si:e, & pixels wide by & pixels high: Can you see itG $he image is so small that on some monitors it is nearly invisible. 1owever, we can cause it to be displayed much larger by changing its dimensions. 1ere it is 6N pixels wide by 6N pixels high: $he code for image is: -img src/)images.orangedot gif) alt/)Orange dot ?2 ' ?2) width/)?2) height/)?2) .> )ecause in both instances the same image is being displayed, there is no delay caused by multiple downloads or by having a larger file si:e. 1ere is the same orange dot displayed as a line: $he code is: -img src/)images.orangedot gif) alt/)Orange dot as line) width/)=22) height/)?) $order/)2) .> =ote: Changing an imageEs dimensions in the 1$+/ code does not actually change the image itself. >ou are only telling the browser how to display the image. Causing a small image to be displayed large does not increase file si:e or download time. Conversely, give a large image smaller dimensions does not improve download times for file si:e. )eware when manipulating photographs, certain types of drawings, and any image that has fine lines, fades, feathering, or other subtle effects. +aking a small image to be displayed larger than itEs default si:e reHuires 5spreading5 the data ;in the form of pixels< of the image over a broader area. $he result will be loss of detail and pixillation. 'n the right is a photograph that is displayed at its default dimensions, 17N pixels wide by 1NN pixels high. 1ere is the same photograph with the dimension attributes set to 6NN pixels wide by &8I pixels high. =ote that the image is highly pixilated. Images can have the alignment attributes of left and right. $he syntax for the alignment is: -img src/)yourimage gif) alt/) align/)left) .> -img src/)yourimage gif) alt/) align/)right) .> !lt tags are special attributes that are applied to images to explain what the image is and what it is about. Individuals who are visually impaired often rely upon a screenreading 3eb browser to 5read5 the text of a 3eb page to them out loud. !n imageEs alt tag will be read by the browser. $his makes in imperative that alt tags were wellformed. +any search engines also use alt tags as an component in their algorithms that calculate result placement. !s with screen reading browsers, search engines rely on properly written alt tags. )elow is an image that has an alt tag applied to it. $he alt tag for this image is 5 reen 1U6N 9ord *eluxe hot rod automobile5 and it the entire image tag is: -img src/)images.green?2 Gpg) alt/)3reen :C?2 Ford >elu'e hot rod automo$ile) width/)=22) height/);D:) .> P$tting It %ll Together In this section of the tutorial you will assemble a simple 3eb page. !mong the tasks you will perform will be placing an image, placing and formatting text, creating a table, and assigning attributes to various ob-ects. $he illustration on the right shows what the page should look like when completed. $hinking back to the beginning of this tutorial, you will remember that you should create a root folder for your pro-ect. *o that now. "tart =ote#ad, if you have not already started it, and create a new file. =ame it 5index.htm5 and save it in the root folder. =ow type in the opening and closing 1$+/ tags. $hey are shown below. -html> -.html> !n important component of the opening 1$+/ tag is the doctype ;document type< statement. $he doctype statement 5tells5 the browser important details about the 3eb page and the code that is used to make it. 3hile it looks complicated, it really isnEt. !dd a doctype statement -ust before the opening 1$+/ tag so that the code looks like this: -J>O6T78E html > -html> -.html> 'ne last technical detail will help make sure your 3eb page is rendered properly by the browsers. !ll you have to do is add an attribute to the opening 1$+/ tag that refers to 5name space.5 -J>O6T78E html > -html 'mlns/)http:..www w= org.:CCC.'html)> -.html> =ow all the preparations are completed and you can start 3eb page building. !dd your opening and closing head tags. $he new code should look like: -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'html:.>T>.'html:transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -.html> =ow add the opening and closing body tags: -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'html:.>T>.'html:transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -.$ody> -.html> If this begins to look confusing, add some spaces between the opening and closing tags of the head and body. $his will help clarify where you will be adding code. -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'ht ml:.>T>.'ht ml: transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -.$ody> -.html> "ave your new 3eb page. >ou could view the page in your browser at this point, however because you have not added any viewable data, the page will appear blank. $o test this, start your browser, click 9ile, and then select 'pen 9ile or 'pen, depending on which browser you use. =avigate to your new 3eb page, then click 'D or 'pen. ! blank 3eb page will appear on your screen. %dding %n Image $he next thing that you will do is to add a header image to your page. >ou must first download and save the image into your images folder. o to (ight click on the image in your browser, then click "ave Image or "ave #icture !s ;again, depending on your browser< to save the image in the images folder in your pro-ectEs root folder. >ou will want the header image to appear in the center of your 3eb page. !dd the center tag as shown below: -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'html:.>T>.'html:transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -center>-.center> -.$ody> -.html> =ow add the img src ;image source< tag that will place the header image into your page. )ecause you have saved that image into your images folder, the code will look like this: -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'html:.>T>.'html:transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -center>-img src/)images.garageheader Gpg) .>-.center> -.$ody> -.html> $he image is ?NN pixels wide and &N? pixels high. !dd the dimensions attributes to the img src tag. *onEt forget to add an alt tag, too. ! suggestion is 5"ammyEs arage.5$he code will now look like this: -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'html:.>T>.'html:transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -center>-img src/)images.garageheader Gpg) alt/)5ammy's 3arage) width/)422) height/);24) .>-.center> -.$ody> -.html> %dding % Simple Table =ow you will add a simple table without borders and limited attributes. $his table will be used to accurately place the hours of operation for "ammyEs arage on the 3eb page. >ou will also apply some text formatting. !dd the table tag, table row tag, and table cell tag to your 3eb page as shown here: -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'ht ml:.>T>.'ht ml: transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -center>-img src/)images.garageheader Gpg) alt/)5ammy's 3arage) width/)422) height/);24) .>-.center> -ta$le> -tr> -td>-.td> -.tr> -.ta$le> -.$ody> -.html> !dd the text to the table cell that tells about "ammyEs hours of operation. -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'html:.>T>.'html:transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -center>-img src/)images.garageheader Gpg) alt/)5ammy's 3arage) width/)422) height/);24) .>-.center> -ta$le> -tr> -td>*ours: +onday through Friday 4:22 am to D:22 pm-$r .> 5aturday 4:22 am to :;:22 noon -.td> -.tr> -.ta$le> -.$ody> -.html> >ou can save your page now and view it with your browser. >ou will notice that the text and table are on the left side of the screen and does not have a particularly pleasing appearance. $he next step is to add some attributes to the opening table tag so that it is centered. $hen set the table to be ?NN pixels wide and add 8 pixels of cell padding. $he borders should be set to N pixels as should the cell spacing. $he code should look like this: -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'html:.>T>.'html:transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -center>-img src/)images.garageheader Gpg) alt/)5ammy's 3arage) width/)422) height/);24) .>-.center> -ta$le width/)422) $order/)2) align/)center) cellpadding/)D) cellspacing/)2)> -tr> -td>*ours: +onday through Friday 4:22 am to D:22 pm-$r .> 5aturday 4:22 am to :;:22 noon -.td> -.tr> -.ta$le> -.$ody> -.html> >ou can save and view your page to see how adding these attributes have change the appearance of the table and text. >ou have not formatted the text yet. $hat will be your next step. !dd the opening and closing font tags 5around5 the text with the attribute to cause the text to be displayed in !rial. !dd the line break tag, Bbr AC so that the line ends after 58:NN pm5 $he code will look like this: -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'html:.>T>.'html:transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -center>-img src/)images.garageheader Gpg) alt/)5ammy's 3arage) width/)422) height/);24) .>-.center> -ta$le width/)422) $order/)2) align/)center) cellpadding/)D) cellspacing/)2)> -tr> -td>-font face/)9rial>*ours:+onday through Friday 4:22 am to D:22 pm-$r .> 5aturday 4:22 am to :;:22 noon-.font>-.td> -.tr> -.ta$le> -.$ody> -.html> !dd the strong tag around the word 51ours.5 -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'html:.>T>.'html:transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -center>-img src/)images.garageheader Gpg) alt/)5ammy's 3arage) width/)422) height/);24) .>-.center> -ta$le width/)422) $order/)2) align/)center) cellpadding/)D) cellspacing/)2)> -tr> -td>-font face/)9rial>-strong>*ours:-.strong>+onday through Friday 4:22 am to D:22 pm-$r .> 5aturday 4:22 am to :;:22 noon-.font>-.td> -.tr> -.ta$le> -.$ody> -.html> If you save and view your page now you will discover that the text is off to the left. !dd the align center attribute to the table cell to cause the text to appear in the center. $he code so far is: -J>O6T78E html 8K0,I6 )..&=6..>T> L*T+, : 2 Transitional..EN) )http:..www w= org.T#.'html:.>T>.'html:transitional dtd)> -html 'mlns/)http:..www w= org.:CCC.'html)> -head> -.head> -$ody> -center>-img src/)images.garageheader Gpg) alt/)5ammy's 3arage) width/)422) height/);24) .>-.center> -ta$le width/)422) $order/)2) align/)center) cellpadding/)D) cellspacing/)2)> -tr> -td align/)center)>-font face/)9rial>-strong>*ours:-.strong>+onday through Friday 4:22 am to D:22 pm-$r .> 5aturday 4:22 am to :;:22 noon-.font>-.td> -.tr> -.ta$le> -.$ody> -.html> Main Bod In+ormation In this series of steps you will add the main table for the page that has the important information about "ammyEs arage. $he table will have these attributes:        ?NN pixels wide 1 pixel border 1N pixel cell padding N pixel cell spacing white background color centered on the page $he table cell align attributes should be 5left5 and 5top5 Btable widthJ5?NN5 borderJ515 alignJ5center5 cellpaddingJ51N5 cellspacingJ5N5 bgcolorJ5S9999995C BtrC Btd alignJ5left5 valignJ5top5CBAtdC BAtrC BAtableC "ee if you can add the necessary code to make that table appear on your page. If you are not sure what the code should be, check the box on the right. =ow you can add the text to the table and format it for appearance, with a list, h1 heading, and links. $he illustration below shows how the text should look. o ahead and try it. If you are not satisfied with the results you can check the code in !ppendix &. .inishing To$ches $here is very little left to do to complete the pro-ect. ! simple paragraph at the bottom of the page with the address of "ammyEs arage will finish it. )e sure to center the paragrah, apply the strong tag to the text, and make the font !rial. $he code is: -p align/)center)>-strong>-font face/)9rial>5ammy's 3arage AampB #estoration 5hop-$r .> :;=? 9irport 9venue-$r .> ,os 9ngelesI 69 [email protected]>-.strong>-.p> !ll 3eb pages should have a title. $his title displays on the top bar of the browser and may appear in the bookmarks, depending on the browser. It is also used by search engines. !dd a title tag to the head part of the 3eb page. $he code is: -title>5ammys 3arage >emo page for I+6 *T+,.L*T+, Tutorial-.title> $o see the code for the entire page visit !ppendix .. "ave and view your page in your browser. $hatEs itF 1ow does your page lookG /e"t topics a+ter HTML -SS 2a0a Script Tutorials for these topics will $e provided you later 9ppendi' : +mage ,i!e ,ormats $here are three types of image files formats that are used on the 3eb. $hey are J# ;,oint #hotographers Experimental roup<, GI9 ; raphics Interchange 9ormat<, and P= ;#ortable =etworks raphics. ;!lthough the )+# file format is displayed by most browsers, it is not used on the 3eb for practical reasons.< ,# and I9 are the oldest of the three formats. $he ,# is a compressed format. *ata is lost as the file is saved. $he degree of compression is set by the image editing software, such as #hotoshop or #aint"hop #ro. ,# is best suited for photographs because of the way that it handles colors. +any thousands of colors can be displayed, although the actual number of colors will vary by image depending on how much compression has been chosen. $he ,# photograph on the right has been prepared using very little compression. $he color is good and there is a high level of detail in the shadows. $he same image is displayed on the right. )ut, in this example it has been highly compressed. >ou will notice small 5artifacts5 that some times appear as dots or ghosting. +ore compression results is smaller file si:es and Huicker downloads. It is necessary to select a compression level that balances Huality with file si:e and download times. $he I9 image format is designed for images that have solid colors, such as drawings and logos. It is limited to no more than &78 colors, although most software allows the user to select less colors for small file si:es and Huicker downloads. $he I9 format does not handle photographs well because of the limited number of colors. 1owever, it does handle solid colors extremely well. $he image on the right is a I9. =otice that the there are no artifacts of pixilation in the solid colors. $he photograph on the right has been saved as a I9. =otice that there is a banding effect in the sky. )ecause I9 images are limited to no more that &78 colors, many of the colors in a typical sky photo will not be viewable. $hose colors will be substituted by the closes available I9 color. $he result will often be banding, stripes, or occasionally a 5moire5 or 5wateredsilk5 effect. $he #= format was originally intended to replace the I9 format. 1owever, that did not come to pass. #= images handle solid colors as well as I9s do, and they also manage the photographic color well. =otice that in the photograph on the right that the colors are accurate and the sky does not display any of the banding effect that appears in the I9 example above. 9ppendi' ; Bh1 alignJ5center5C3elcome to "ammyEs arage 1ome #ageBAh1C BpCBstrongCBfont colorJ5SUUNNNN5 si:eJ565C"ammyEs arage VampP (estoration "hopBAfontCBAstrongC has been in business since 1U7I. 3e started in a small building -ust off of /a Cienega )oulevard with only one bay and lift. $oday we occupy a .7,NNN sHuare foot building that is centrally located near the "anta +onica !irport. =o matter what your automotive needs are, we do it allFBApC BulC BliC9ull automobile restorationBAliC BliC"tandard vehicle serviceBAliC BliC"howHuality detailingBAliC BliC!ccident repairBAliC BAulC BpC!lthough we service nearly all makes and models, our restoration shop speciali:es in !merican Iron. Included are modern manufacturers, such as Ba hrefJ5http:AAwww.ford.com5C9ordBAaC, Ba hrefJ5http:AAwww.gm.co m5C eneral +otorsBAaC, and Ba hrefJ5htt p:AAwww.chrysler.com5CChryslerBAaC. /onggone marHues such as !merican +otors, 3illys, 1udson, and "tudebaker also find careful attention here at "ammyEs.BApC BpCBemC>ou are invited to inspect our shop anytime during normal business hours.BAemCBApC 9ppendi' = BF*'C$>#E html #4)/IC 5AA3.CAA*$* 01$+/ 1.N $ransitionalAAE=5 5http:AAwww.w..orgA$(Axhtml1A*$*Axhtml1transitional.dtd5C Bhtml xmlnsJ5http:AAwww.w..orgA1UUUAxht ml5C BheadC BtitleC"ammys arage *emo page for I+C 1$+/A01$+/ $utorialBAtitleC BAheadC BbodyC BcenterCBimg srcJ5imagesAgarageheader.-pg5 altJ5"ammyEs arage5 widthJ5?NN5 heightJ5&N?5 ACBAcenterC Btable widthJ5?NN5 borderJ5N5 alignJ5center5 cellpaddingJ585 cellspacingJ5N5C BtrC Btd alignJ5center5CBfont faceJ5!rial5CBstrongC1ours:BAstrongC +onday through 9riday ?:NN am to 8:NN pmBbr AC "aturday ?:NN am to 1&:NN noonBAfontCBAtdC BAtrC BAtableC Btable widthJ5?NN5 borderJ515 alignJ5center5 cellpaddingJ51N5 cellspacingJ5N5 bgcolorJ5S9999995C BtrC Btd alignJ5left5 valignJ5top5CBh1 alignJ5center5C3elcome to "ammyEs arage 1ome #ageBAh1C BpCBstrongCBfont colorJ5SUUNNNN5 si:eJ565C"ammyEs arage VampP (estoration "hopBAfontCBAstrongC has been in business since 1U7I. 3e started in a small building -ust off of /a Cienega )oulevard with only one bay and lift. $oday we occupy a .7,NNN sHuare foot building that is centrally located near the "anta +onica !irport. =o matter what your automotive needs are, we do it allFBApC BulC BliC9ull automobile restorationBAliC BliC"tandard vehicle serviceBAliC BliC"howHuality detailingBAliC BliC!ccident repairBAliC BAulC BpC!lthough we service nearly all makes and models, our restoration shop speciali:es in !merican Iron. Included are modern manufacturers, such as Ba hrefJ5http:AAwww.ford.com5C9ordBAaC, Ba hrefJ5http:AAwww.gm.co m5C eneral +otorsBAaC, and Ba hrefJ5htt p:AAwww.chrysler.com5CChryslerBAaC. /onggone marHues such as !merican +otors, 3illys, 1udson, and "tudebaker also find careful attention here at "ammyEs.BApC BpCBemC>ou are invited to inspect our shop anytime during normal business hours.BAemCBApCBAtdC BAtrC BAtableC Bp alignJ5center5CBstrongCBfont faceJ5!rial, 1elvetica, sansserif5C"ammyEs arage VampP (estoration "hopBbr AC 1&.6 !irport !venueBbr AC /os !ngeles, C! UN6N7BAfontCBAstrongCBApC BAbodyC BAhtmlC