This is the text that will show up in the tab when you view a website in a browser as shown below. 8.You are then prompted to give the file a name and location to save it to. Use the file browser to navigate into F:/cs1033/lab04/act1and name this file index.html. 9.The main Document Window is where you will enter the webpage's content. Click into the top of this Document Window so that you see the cursor blinking there. 10.Type the words "Bob's Bakery". 11.Hit Enter twice to leave some empty space.
Subscribe to view the full document.
6 12.Then type the slogan "Providing delicious sweets since 1972!" 13.Hit Enter twice more. 14.In the top menu, click Insert > Image. 15.This will bring up the Image pop-up window: a.Image locationis the filepath of the image you want to insert b.The Make URL relative to page locationcheckbox is important for making relative paths rather than absolute paths c.Titleis the tooltip text that will show up when you hover on the image d.Alternate textshould be a description of the image that will show up if the image cannot load
7 16.Click the little folder icon beside the Image locationbox. 17.Navigate to cs1033/lab04/act1/imagesand select cake.jpg. Push Open. 18.This will auto-fill the Image location textbox with the filepath. However, it will likely add the full, absolute path by default. You will likely see something like this: 19.This kind of path is NOT acceptable because it will only work on your computer but not online when you upload it. Check the relative URLcheckbox and notice that the filepath now looks shorter and cleaner. This is called a relative path because it indicates the image location relative to the HTML file where you are inserting the image. 20.For the Titletextbox, enter "Yummy cake" and for Alternate text, enter "Tasty cake". 21.Push OK to finish inserting this image into your webpage. 22.Your webpage should now look like this:
Subscribe to view the full document.
8 23.In the Edit Mode Toolbar at the bottom of your window, click on the "Source" tab: 24.The Source mode shows you the underlying HTML code of your webpage rather than showing you the visual editor. Briefly look over this code and then click the "Wysiwyg" tab to return to the visual editor mode. 25.Click File > Save. 26.Go into the Windows File Explorer and navigate to cs1033/lab04/act1. Right-click on index.html and click Open With > Google Chrome (or choose another web browser in this list). 27.The webpage in the browser should look the same as the preview you see in BlueGriffon. 28.Look in the browser tab. The text shown there is the title property you set earlier. 29.Go back to BlueGriffon and hit Enter after the cake image. 30.Repeat almost exactly the same steps you just used to insert a second image below your current cake image. In this case, browse to the SAME cake image, use the SAME Titleand Alternate textas before, BUT now leave the relative URLcheckbox un-checked. Push OK.
As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.
Temple University Fox School of Business ‘17, Course Hero Intern
I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.
University of Pennsylvania ‘17, Course Hero Intern
The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.
Tulane University ‘16, Course Hero Intern
Ask Expert Tutors
You can ask 0 bonus questions
You can ask 0 questions (0 expire soon)
You can ask 0 questions
(will expire )