Chapter 15 CS6 - Revision history

Robin at 19:41, 14 February 2013

2013-02-14T19:41:03Z

Robin: /* Exercise 1: Hello World! */

2013-02-12T18:34:03Z

Exercise 1: Hello World!

Robin at 18:33, 12 February 2013

2013-02-12T18:33:22Z

Show changes

Robin: /* Exercise 4: Images */

2013-02-11T20:20:28Z

Exercise 4: Images

Robin: /* Exercise 4: Images */

2013-02-11T20:20:05Z

Exercise 4: Images

Robin: /* Exercise 1: Hello World! */

2013-02-11T17:30:21Z

Exercise 1: Hello World!

Robin: /* Exercise 1: Hello World! */

2013-02-11T17:28:27Z

Exercise 1: Hello World!

Robin: /* Exercise 5: Formatting Type */

2013-02-11T17:27:49Z

Exercise 5: Formatting Type

Robin: /* Exercise 4: Images */

2013-02-11T17:27:17Z

Exercise 4: Images

Robin: /* Exercise 3: Hyperlinks */

2013-02-11T17:26:44Z

Exercise 3: Hyperlinks

@@ Line 29: / Line 29: @@
 [[File:Fig15_Ex1_01a_CS6.png]]
-Click TextEdit Menu > Preferences. In the New Document dialog box, click on the "Plain text" radio button. In the Open and Save dialog box, check "Ignore rich text commands in HTML files," <span style="color:red"><strike>check "Delete the automatic backup file",</strike></span> and uncheck "Add '.txt' extension to plain text files." These preferences will be in effect on new documents, so close any open documents in TextEdit and click File > New to start on a new document.
+Click TextEdit Menu > Preferences. In the New Document dialog box, click on the "Plain text" radio button. In the Open and Save dialog box, check "Ignore rich text commands in HTML files," and uncheck "Add '.txt' extension to plain text files." These preferences will be in effect on new documents, so close any open documents in TextEdit and click File > New to start on a new document.
 [[File:Fig15_Ex1_01b_CS6.png]]&nbsp;&nbsp;&nbsp; [[File:Fig15_Ex1_01c_CS6.png]]
@@ Line 62: / Line 62: @@
 . Open a web browser, click File > Open and find the helloworld.html file. We opened Safari, clicked File > Open File... and browsed to Desktop > Chapter 15 > helloworld.html. Notice that Hello World! is the only part of the code that is displayed.
-In the browser, click <span style="color:red"><strike>View</strike>Develop > Show</span> Page Source to see all of the code.
+In the browser, click Develop > Show Page Source to see all of the code.
 [[File:Fig15_Ex1_06_CS6.png|1000px]]
@@ Line 84: / Line 84: @@
 In this exercise, we will modify the file we just made. We will "save on top of the file," meaning we will make changes to the existing file. We will not "Save As." You should have only one file in your folder at the end of this exercise.
-. Open Dreamweaver from the Dock or Applications Folder. In Dreamweaver click File > Open and open the helloworld.html file. We will click File > Open then Desktop > <span style="color:red"><strike>c</strike>C</span>hapter15 > helloworld.html
+. Open Dreamweaver from the Dock or Applications Folder. In Dreamweaver click File > Open and open the helloworld.html file. We will click File > Open then Desktop > Chapter15 > helloworld.html
 [[File:Fig15_Ex2_01a_CS6.png|400px]]&nbsp;&nbsp;&nbsp; [[File:Fig15_Ex2_01b_CS6.png|400px]]
@@ Line 181: / Line 181: @@
 To add an image to the HTML page, you need to have an image prepared for online viewing. Review Chapter 12 for exercises on creating a JPEG or GIF. For this exercise, we will search for an image on Flickr.com. In Chapter 2 we explained that Flickr.com is an online photo sharing website where viewers can search for images by tags. In this exercise we will use an image that has been place in the public domain with a creative commons license.
-. Go to Flickr.com. <span style="color:red"><strike>If you are not signed in, the search field is vertically centered on the right half of the page. If you are signed in,</strike></span> use the search field in the top <span style="color:red"><strike>left</strike>right</span> corner. Search for "Hello World."
+. Go to Flickr.com. Use the search field in the top right corner. Search for "Hello World."
 [[File:Fig15_Ex4_01_CS6.png|1000px]]
@@ Line 200: / Line 200: @@
-. <span style="color:red">CTRL+Click on the image and select "Medium 500". In the new window,</span> CTRL+Click on the image<span style="color:red">again</span> and select "Copy Image Address" (in Safari, in Firefox the language is "Copy Image Location"). This copies the URL. The URL is the path to the location where the image file is saved on the server. The next time you use Edit > Paste in any text field this address will be pasted. We will use this in Dreamweaver in the next step.
+. CTRL+Click on the image and select "Medium 500". In the new window, CTRL+Click on the image again and select "Copy Image Address" (in Safari, in Firefox the language is "Copy Image Location"). This copies the URL. The URL is the path to the location where the image file is saved on the server. The next time you use Edit > Paste in any text field this address will be pasted. We will use this in Dreamweaver in the next step.
 [[File:Fig15_Ex4_05_CS6.png|1000px]]
@@ Line 215: / Line 215: @@
 </table>
-. Go back to Dreamweaver and view the helloworld.html file in Code View. Type a new paragraph tag. <span style="color:red"><strike>Note that Dreamweaver automatically closes the tag.</strike></span>  Now add an image tag like this, &lt;img src=“url”/>. Replace "url" with the URL that you copied from flickr.com by pasting it into that area.
+. Go back to Dreamweaver and view the helloworld.html file in Code View. Type a new paragraph tag. Now add an image tag like this, &lt;img src=“url”/>. Replace "url" with the URL that you copied from flickr.com by pasting it into that area.
 [[File:Fig15_Ex4_06_CS6.png|1000px]]
-<span style="color:red"><strike>The image tag closes itself.</strike></span>  The "space slash bracket" or space/> at the end of the tag signifies a closing tag.
+  The "space slash bracket" or space/> at the end of the tag signifies a closing tag.
 . Save the file and refresh the page in your browser. The image appears on the page, with a paragraph break between it and the link we made in Exercise 3.

@@ Line 27: / Line 27: @@
 . In Text Edit, check the preferences to make sure it is set to Plain Text. If you see rulers in the work document when you launch the application, your document is not set to Plain Text.
-[[File:Fig15_Ex1_01a_CS6.png|400px]]
+[[File:Fig15_Ex1_01a_CS6.png]]
 Click TextEdit Menu > Preferences. In the New Document dialog box, click on the "Plain text" radio button. In the Open and Save dialog box, check "Ignore rich text commands in HTML files," <span style="color:red"><strike>check "Delete the automatic backup file",</strike></span> and uncheck "Add '.txt' extension to plain text files." These preferences will be in effect on new documents, so close any open documents in TextEdit and click File > New to start on a new document.

@@ Line 189: / Line 189: @@
 [[File:Fig15_Ex4_02_CS6.png|800px]]
-<span style="color:red"><strike>''Note: The directions and screen shots for the Flickr.com interface is accurate at the time of writing this book. Web interface design changes often. It is likely that by the time you are reading this these specific directions will be out of date.''</strike></span>
+''Note: The directions and screen shots for the Flickr.com interface is accurate at the time of writing this book. Web interface design changes often. It is likely that by the time you are reading this these specific directions will be out of date.''
 . Scroll down and check the boxes next to “only show creative commons licensed photos”. Creative Commons is an alternative licensing schema to the standard US copyright laws. All photographs uploaded to flickr.com are automatically copyrighted, preventing other people from using or building upon them. Creative commons allows you to post your work online and license it openly, allowing others to use it in their work. Online culture is a culture of sharing, remixing, and collaboration. Creative Commons licensing enables and empowers this culture.

@@ Line 181: / Line 181: @@
 To add an image to the HTML page, you need to have an image prepared for online viewing. Review Chapter 12 for exercises on creating a JPEG or GIF. For this exercise, we will search for an image on Flickr.com. In Chapter 2 we explained that Flickr.com is an online photo sharing website where viewers can search for images by tags. In this exercise we will use an image that has been place in the public domain with a creative commons license.
-. Go to Flickr.com. <span style="color:red"><strike>If you are not signed in, the search field is vertically centered on the right half of the page. If you are signed in,</strike></span> use the search field in the top left corner. Search for "Hello World."
+. Go to Flickr.com. <span style="color:red"><strike>If you are not signed in, the search field is vertically centered on the right half of the page. If you are signed in,</strike></span> use the search field in the top <span style="color:red"><strike>left</strike>right</span> corner. Search for "Hello World."
 [[File:Fig15_Ex4_01_CS6.png|800px]]

@@ Line 62: / Line 62: @@
 . Open a web browser, click File > Open and find the helloworld.html file. We opened Safari, clicked File > Open File... and browsed to Desktop > Chapter 15 > helloworld.html. Notice that Hello World! is the only part of the code that is displayed.
-In the browser, click View > Page Source to see all of the code.
+In the browser, click <span style="color:red"><strike>View</strike>Develop > Show</span> Page Source to see all of the code.
 [[File:Fig15_Ex1_06_CS6.png|800px]]

@@ Line 64: / Line 64: @@
 In the browser, click View > Page Source to see all of the code.
-[[File:Fig15_Ex1_06_CS6.png|400px]]
+[[File:Fig15_Ex1_06_CS6.png|800px]]
 In exercise two we will be returning to this file in the web browser, so leave it open if you are going to work on that exercise next.

@@ Line 228: / Line 228: @@
 . The header tag will transform Hello World! into a headline. Insert the tag as demonstrated in this illustration.
-[[File:Fig15_Ex5_01_CS6.png]]
+[[File:Fig15_Ex5_01_CS6.png|800px]]
 . Formatting type in Dreamweaver is like formatting type in other Adobe programs. Bold and italic styles are one click away, but do notice the code that is added to the html file so that the styles are displayed properly in the browser. Click on Split View. Make the word "first" bold by selecting it and clicking the "B" button in the Properties Palette. Dreamweaver will surround the word with the strong tag.
-[[File:Fig15_Ex5_02_CS6.png]]
+[[File:Fig15_Ex5_02_CS6.png|800px]]
 . Select the word "any" and click the italicize button in the Properties Palette. Dreamweaver uses the em tag to italicize the word.
-[[File:Fig15_Ex5_03_CS6.png]]
+[[File:Fig15_Ex5_03_CS6.png|800px]]

@@ Line 183: / Line 183: @@
 . Go to Flickr.com. <span style="color:red"><strike>If you are not signed in, the search field is vertically centered on the right half of the page. If you are signed in,</strike></span> use the search field in the top left corner. Search for "Hello World."
-[[File:Fig15_Ex4_01_CS6.png|400px]]
+[[File:Fig15_Ex4_01_CS6.png|800px]]
 . On the results page, click on “Advanced Search”.
-[[File:Fig15_Ex4_02_CS6.png|400px]]
+[[File:Fig15_Ex4_02_CS6.png|800px]]
 <span style="color:red"><strike>''Note: The directions and screen shots for the Flickr.com interface is accurate at the time of writing this book. Web interface design changes often. It is likely that by the time you are reading this these specific directions will be out of date.''</strike></span>
@@ Line 193: / Line 193: @@
 . Scroll down and check the boxes next to “only show creative commons licensed photos”. Creative Commons is an alternative licensing schema to the standard US copyright laws. All photographs uploaded to flickr.com are automatically copyrighted, preventing other people from using or building upon them. Creative commons allows you to post your work online and license it openly, allowing others to use it in their work. Online culture is a culture of sharing, remixing, and collaboration. Creative Commons licensing enables and empowers this culture.
-[[File:Fig15_Ex4_03_CS6.png|400px]]
+[[File:Fig15_Ex4_03_CS6.png|800px]]
 . Click on an image that you found within the Creative Commons "Hello World" search. Now the image appears on the page maintained by its author (as opposed to a general results page).
-[[File:Fig15_Ex4_04_CS6.png|400px]]
+[[File:Fig15_Ex4_04_CS6.png|800px]]
 . <span style="color:red">CTRL+Click on the image and select "Medium 500". In the new window,</span> CTRL+Click on the image<span style="color:red">again</span> and select "Copy Image Address" (in Safari, in Firefox the language is "Copy Image Location"). This copies the URL. The URL is the path to the location where the image file is saved on the server. The next time you use Edit > Paste in any text field this address will be pasted. We will use this in Dreamweaver in the next step.
-[[File:Fig15_Ex4_05_CS6.png|400px]]
+[[File:Fig15_Ex4_05_CS6.png|800px]]
@@ Line 217: / Line 217: @@
 . Go back to Dreamweaver and view the helloworld.html file in Code View. Type a new paragraph tag. <span style="color:red"><strike>Note that Dreamweaver automatically closes the tag.</strike></span>  Now add an image tag like this, &lt;img src=“url”/>. Replace "url" with the URL that you copied from flickr.com by pasting it into that area.
-[[File:Fig15_Ex4_06_CS6.png]]
+[[File:Fig15_Ex4_06_CS6.png|800px]]
 <span style="color:red"><strike>The image tag closes itself.</strike></span>  The "space slash bracket" or space/> at the end of the tag signifies a closing tag.

@@ Line 155: / Line 155: @@
 Press the return key and it will change the selected text from body copy to a hyperlink. This is important: ''save the file.'' Remember, without saving the file, viewing the refreshed page in the browser will be disappointing.
-[[File:Fig15_Ex3_01_CS6.png]]
+[[File:Fig15_Ex3_01_CS6.png|800px]]
@@ Line 169: / Line 169: @@
 . Go to the browser and refresh the helloworld.html page.  The link should function in the browser. Return to Dreamweaver and inspect the code that was created.
-[[File:Fig15_Ex3_02_CS6.png]]
+[[File:Fig15_Ex3_02_CS6.png|800px]]
 In the code, the “a” stands for anchor. “Href” is the modifier, it tells the browser where the hypertext reference points.  The value for that property is inserted after the equal sign. In this case, the value is the URL. The anchor tag is closed with slash-a, or &lt;/a>. Notice that the href tag starts just before the word, "the" and the tag closes just before the period at the end of the sentence. This part of the sentence becomes the link.
@@ Line 175: / Line 175: @@
 . Move the closing anchor tag to just after the word “learn”.  The link will be shortened to include only the text that is between the opening and closing tags.
-[[File:Fig15_Ex3_03_CS6.png]]
+[[File:Fig15_Ex3_03_CS6.png|800px]]
 = Exercise 4: Images =