10 Lab 3: Introduction to HTML Figure 3.2 – Missing image indication in different browsers 4 Remove the slash added in step 3. 5 Add the following and then test: <a href="images/large-central-park.jpg"> <img src="images/central-park.jpg" alt="Central Park" /> </a> This turns the Central Park image into a link (in this case, a link to a larger version of the Central Park image). 6 Add the following after the Central Park image: <a href="images/large-central-park.jpg"><img src="images/central- park.jpg" alt="Central Park" title="Central Park"/></a> <p>Share: <img src="images/social/email_16.png" alt="Email this to someone" /> <img src="images/social/rss_16.png" alt="Syndicated content" /> <img src="images/social/twitter_16.png" alt="Share this on Twitter" /> </p> Notice that images are by default inline content in that they exist in the same flow as text. 7 Remove the returns between each <img> tag, as shown below, and then test. Page 10 of 18
11 Fundamentals of Web Development <p>Share: <img src="images/social/email_16.png" alt="Email this to someone" /><img src="images/social/rss_16.png" alt="Syndicated content" /><img src= "images/social/twitter_16.png" alt="Share this on Twitter" /> </p> Notice that the browser interprets each (or multiple ones in a row) carriage return in the HTML as a single space, as shown in Figure 3.3. Figure 3.3 – Carriage return treated as a space 8 Modify the following and test. <p>Share: <br> The <br> tag adds a line break. L IST B ASICS Lists are a way of organizing information. HTML supports several different types of list: definition lists, ordered lists, and unordered lists. EXERCISE 3. 6 — M A K I N G A L I S T 1 Open lab03-exercise06.html and add the following bolded text: <body> <h1>Share Your Travels</h1> <h2>New York - Central Park</h2> <ul> <li>Description</li> Copyright © 2017 Randy Connolly and Ricardo Hoar
12 Lab 3: Introduction to HTML <li>Reviews</li> </ul> <h3>Description</h3> Remember: these labs use the convention of red bolded text to indicate content to change/enter/insert. This will add an unordered list to your page. Notice that it is a lowercase L not the number 1 in these new tags. Also, the indenting shown in the list above doesn’t affect the output in the browser. It is added to make the markup more readable for us, the developers. 2 Save and test. 3 Change the <ul> and </ul> to <ol> and </ol> and then test in browser. This will change the list to an ordered list. 4 Change the list back to an unordered list. It is common practice to create a list of related links. The next exercise demonstrates this technique. E X E R C I S E 3.7 — L I N K I N G W I T H L I S T S 1 Continue working with lab03-exercise06.html and add the following to the list and test: <ul> <li> <a href="#"> Description </a> </li> <li> <a href="#"> Reviews </a> </li> </ul> Notice the target for the links (i.e., href="#" ). The # simply indicates the current page (i.e., it goes nowhere). This is a common technique for showing links whose destinations are not yet known. 2 Modify the list as follows: Page 12 of 18
13 Fundamentals of Web Development <ul> <li> <a href="#description"> Description </a> </li> <li> <a href="#reviews"> Reviews </a> </li> </ul>
You've reached the end of your free preview.
Want to read all 18 pages?
- Fall '18
- central park, Ricardo Hoar, Randy Connolly