Langbiang: Web front-end (16) - HTML - Hình ảnh

Bài trước: Web front-end (15) - HTML - Hiển thị ảnh linh hoạt

-----

1.1.1 Bài tập và thực hành

Bài tập 1. Viết lại các đoạn mã trong phần lý thuyết.

Bài tập 2. Adding an SVG to a page.

In this exercise, we’ll add some SVG images to the Black Goose Bistro page that we worked on in Chapter 4. The materials for this exercise are available online at learningwebdesign.com/5e/materials or at [https://drive.google.com/file/d/11GFULoxJ4vAzQfeMQeTTD_1UmAv5GqmA/view?usp=sharing]. You will find everything in a directory called ch07\Exercise 07-02\svg. The resulting code is provided with the materials.

This exercise has two parts: first, we’ll replace the logo with an SVG version, and second, we’ll add a row of social media icons at the bottom of the page.

Part I: Replacing the logo

1. Open blackgoosebistro.html in a text editor. It should look just like we left it in Chapter 4.

2. Just for fun, let’s see what happens when you make the current PNG logo really large. Add width="500" height="500" to the img tag. Save the file and open it in the browser to see how blurry bitmapped images get when you size them larger. Yuck.

3. Let’s replace it with an SVG version of the same logo by using the inline SVG method. In the svg folder, you will find a file called blackgoose-logo.svg. Open it in your text editor and copy all of the text (from <svg> to </svg>).

4. Go back to the blackgoosebistro.html file and delete the entire img element (be careful not to delete the surrounding markup). Paste the SVG text in its place. If you look closely, you will see that the SVG contains two circles, a gradient definition, and two paths (one for the starburst shape and one for the goose).

5. Next, set the size the SVG should appear on the page. In the opening svg tag, add width and height attributes set to 200px each.

<h1><svg width="200px" height="200px" …

Save the file and open the page in the browser. You should see the SVG logo in place, looking a lot like the old one.

6. Try seeing what happens when you make the SVG logo really big! Change the width and height to 500 pixels, save the file, and reload the page in the browser. It should be big and sharp! No blurry edges like the PNG. OK, now put the size back to 200 × 200 or whatever looks good to you.

Part II: Adding icons

7. Next we’re going to create a footer at the bottom of the page for social media icons. Below the Location & Hours section, add the following (the empty paragraph is where we’ll add the logos):

<footer>

<p>Please visit our social media pages</p>

<p> </p>

</footer>

8. Use the img element to place three SVG icons: twitter.svg, facebook.svg, and instagram.svg. Note that they are located in the icons directory. There are also icons for Tumblr and GitHub if you’d like extra practice. Here’s a head start on the first one:

9. Save the file and open it in the browser. The icons should be there, but they are huge. Let’s write a couple of style rules to make the footer look nice. We haven’t done much with style rules yet, so just copy exactly what you see here inside the style element in the head of the document:

footer {

border-top: 1px solid #57b1dc;

text-align: center;

padding-top: 1em;

}

footer img {

width: 40px;

height: 40px;

margin-left: .5em;

margin-right: .5em;

}

10. Save the file again and open it in the browser. Go ahead and play around with the style settings, or even the code in the inline SVG, if you’d like to get a feel for how they affect the appearance of the images. It’s kinda fun.

Bài tập 3. Sử dụng Developer tools của trình duyệt web và lệnh window.devicePixelRatio của JavaScript, cho biết giá trị device-pixel-ratios của một số thiết bị: laptop, iPhone 12 Pro, iPad Air, Samsung Galaxy?

[Hướng dẫn làm bài tập]

Bài tập 2.

[blackgoosebistro.html]

<!DOCTYPE html>

<html>

<head>

<title>Black Goose Bistro</title>

<style>

body {

background-color: #faf2e4;

margin: 0 10%;

font-family: sans-serif;

}

h1 {

text-align: center;

font-family: serif;

font-weight: normal;

text-transform: uppercase;

border-bottom: 1px solid #57b1dc;

margin-top: 30px;

}

h2 {

color: #d1633c;

font-size: 1em;

}

footer {

border-top: 1px solid #57b1dc;

text-align: center;

padding-top: 1em;

}

footer img {

width: 40px;

height: 40px;

margin-left: .5em;

margin-right: .5em;

}

</style>

</head>

<body>

<h1>

</radialGradient>

</svg><br>Black Goose Bistro</h1>

<h2>The Restaurant</h2>

<p>The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.</p>

<h2>Catering</h2>

<p>You have fun. <em>We'll handle the cooking.</em> Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.</p>

<h2>Location and Hours</h2>

<p>Seekonk, Massachusetts;<br>

Monday through Thursday 11am to 9pm; <br>Friday and Saturday, 11am to midnight</p>

<p>Please visit our social media pages</p>

<p>

</p>

</footer>

</body>

</html>

[Kết quả trên trình duyệt]

– Xem hướng dẫn cách làm trong phần Hiển thị ảnh linh hoạt.

– Kết quả tham khảo:

laptop – 1x

iPhone 12 Pro – 3x

iPad Air – 2x

Samsung Galaxy S8+ - 4x

1.1.2 Câu hỏi ôn tập

Câu 1. Phát biểu nào không đúng, khi nói về phần tử img?

A. Img là phần tử kiểu inline

B. src và alt là 2 thuộc tính bắt buộc phải có

C. Trong mọi trường hợp, bạn nên thiết lập sẵn kích thước cố định cho ảnh

D. Bạn có thể sử dụng tính chất cache hình ảnh của trình duyệt, để tăng tốc độ hiển thị trang web.

Câu 2. Trong thuật ngữ “ảnh SVG”, từ SVG là viết tắt của?

A. Satify Vector Graphics

B. Static Vector Graphics

C. Scalable Vector Graphics

D. Scalable Vertical Graphics

Câu 3. Trong phần hiển thị ảnh SVG, có nói tới kĩ thuật “fallbacks”, nó là cái gì?

A. Là kĩ thuật làm mờ ảnh

B. Là kĩ thuật làm rõ ảnh

C. Là kĩ thuật “cache ảnh” trong trình duyệt

D. Là giải pháp dự phòng, trong trường hợp không tải được ảnh SVG

Câu 4. Responsive web design is a type of web design that allows web pages to __(1)___ to the screen size of the device that they are being viewed on. This means that whether a user is viewing a web page on a desktop computer, a tablet, or a smartphone, the page will be able to adjust its ___(2)___ in order to provide the best possible experience for that particular device.

A. (1) adapt, (2) HTML document

B. (1) display, (2) HTML document

C. (1) disappear, (2) colors

D. (1) adapt, (2) layout and content

Đáp án: 1 (C), 2 (C), 3(D), 4(D)

-----

Cập nhật: 12/5/2024

Bài sau: Web front-end (17) - HTML - Table 1

-----

Tải tài liệu đầy đủ: Tự học HTML căn bản

-----

LIÊN HỆ TÁC GIẢ

Menu

Tìm kiếm trong Blog

Web front-end (16) - HTML - Hình ảnh_Bài tập

1.1.1 Bài tập và thực hành

1.1.2 Câu hỏi ôn tập