링크와 두 번째 페이지 · 마틴과 코딩하기

네 웹사이트는 단지 하나의 페이지가 아닙니다. 두 번째 것을 만들고 링크로 연결할 거야.

보여줄게: 링크

다른 곳으로 이동하는 클릭 가능한 링크는 다음과 같이 만들어집니다.<a>꼬리표:

<!-- A link to another page on your own website -->
<a href="lunch-menu.html">Lunch Menu</a>

<!-- A link out to somewhere else on the internet -->
<a href="https://www.si.edu">Our favorite museum's website</a>

href 링크가 어디로 가는지 알려줍니다.
사이의 텍스트<a>그리고</a>눈에 보이고 클릭할 수 있는 것야.

두 번째 페이지

네 웹사이트에는index.html지금까지. 두 번째 페이지를 추가해 보겠어. 이는 동일한 폴더에 있는 또 다른 파일일 뿐야.

VS Code에서 새 파일을 만듭니다. 다음과 같이 프로젝트에 따라 이름을 지정해.`lunch-menu.html`,`about-me.html`,`trips.html`, 또는`roster.html`. 다시 말하지만, 소문자이며 공백이나 악센트가 없어.

전체 페이지 뼈대(1과와 동일한 뼈대)를 붙여넣고 자체 뼈대를 부여해.``,`<h1>`, 그리고 일부 콘텐츠.</li> <li>링크로 페이지 연결: 켜짐`index.html`, 새 페이지에 링크를 추가하고 새 페이지에 다시 링크를 추가해.`<a href="index.html">Back home</a>`.</li> </ol>## 네 차례 💪 두 번째 페이지를 만들고 두 페이지를 함께 연결해. 인터넷 어딘가에 적어도 하나의 링크 지점을 만드해.<details>

🏫 학교 웹사이트 – 솔루션(lunch-menu.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lunch Menu – Riverside Elementary</title>
  </head>
  <body>
    <h1>This Week's Lunch Menu</h1>
    <ul>
      <li>Monday: tomato soup with pasta</li>
      <li>Tuesday: chicken with rice</li>
      <li>Wednesday: pancakes with syrup 🎉</li>
      <li>Thursday: beef stew with dumplings</li>
      <li>Friday: fish and potatoes</li>
    </ul>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

그리고 계속index.html, 추가하다:

<p><a href="lunch-menu.html">Check out the lunch menu</a></p>

🙋 개인 웹사이트 – 솔루션(about-me.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>More About Me – Jake</title>
  </head>
  <body>
    <h1>More About Me</h1>
    <p>I'm in 4th grade, I have a dog named Rocky, and I collect soccer cards.</p>
    <p>My favorite thing to listen to is <a href="https://www.youtube.com">music on YouTube</a>.</p>
    <p><a href="index.html">← Back home</a></p>
  </body>
</html>

🌍 여행 일지 - 솔루션(trips.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>All Trips – Where We've Been</title>
  </head>
  <body>
    <h1>All Our Trips</h1>
    <ol>
      <li>The mountains – a ridge hike</li>
      <li>Greece – island hopping</li>
      <li>Washington, D.C. – museums and monuments</li>
    </ol>
    <p>We plan our routes with <a href="https://maps.google.com">Google Maps</a>.</p>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

⚽ 클럽 웹사이트 – 솔루션(roster.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Roster – Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Team Roster</h1>
    <ul>
      <li>Jake – goalkeeper (captain)</li>
      <li>Matt – defense</li>
      <li>Owen – midfield</li>
      <li>Tom – forward</li>
    </ul>
    <p>Check the league schedule at <a href="https://www.ussoccer.com">ussoccer.com</a>.</p>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

✅

**직접 확인해 보세요:** 홈페이지의 링크를 클릭하면 → 두 번째 페이지가 열어. "뒤로"를 클릭하면 → 다시 집으로 돌아갑니다. 이제 네 웹사이트에 처음으로 두 개 이상의 페이지가 생겼어!

이번 수업에서 배울 점

링크:<a href="where">link text</a>.
웹사이트의 새 페이지 = 새 페이지.html같은 폴더에 있는 파일야.
자신의 페이지 사이의 링크는 파일 이름(lunch-menu.html); 다음으로 시작하는 링크https://.