search

zilongxuan001 / LearnFreecode

0 stars 0 forks source link

chapter2: 深入了解HTML的HT #332

Closed zilongxuan001 closed 6 years ago

zilongxuan001 commented 6 years ago

制作lounge页面

创建三个页面：lounge.html，directions.html，elixir.html。其中lounge.html为主页，放在lunge文件夹下，directions.html放在about文件夹下，elixir.html放在beverages文件夹下，图片放入images文件夹下。 文档结构如下 image

image image image

制作步骤

1.首先制作网页 2.加上链接 3.网页和图片放入文件夹 4.修改链接

正确的建立网站步骤

1.规划文档结构

2.设计页面内容

zilongxuan001 commented 6 years ago

lounge.html

代码

<html>
  <head>
    <title>Head First Lounge</title>
  </head>
  <body>
    <h1>Welcome to the New and Improved Head First Lounge</h1>
    <img src="images/drinks.gif">
    <p>
       Join us any evening for 
       refreshing  <a href="beverages/elixir.html">elixirs</a>, 
       conversation and maybe a game or two of 
       <em>Dance Dance Revolution</em>.
       Wireless access is always provided;  
       BYOWS (Bring your own web server).
    </p>
    <h2>Directions</h2>
    <p>
      You'll find us right in the center of downtown Webville.   
      If you need help finding us, check out 
      our <a href="about/directions.html">detailed directions</a>. 
      Come join us!
    </p>
  </body>
</html>

浏览显示 image

zilongxuan001 commented 6 years ago

directions.html

代码

<html>
  <head>
    <title>Head First Lounge Directions</title>
  </head>
  <body>
    <h1>Directions</h1>
    <p>Take the 305 S exit to Webville - go 0.4 mi</p>
    <p>Continue on 305 - go 12 mi</p>
    <p>Turn right at Structure Ave N - go 0.6 mi</p>
    <p>Turn right and head toward Structure Ave N - go 0.0 mi</p>
    <p>Turn right at Structure Ave N - go 0.7 mi</p>
    <p>Continue on Structure Ave S - go 0.2 mi</p>
    <p>Turn right at SW Presentation Way - go 0.0 mi</p>
  </body>
</html>

浏览器显示 image

zilongxuan001 commented 6 years ago

elixir.html

代码

<html>
  <head>
    <title>Head First Lounge Elixirs</title>
  </head>
  <body>
    <h1>Our Elixirs</h1>

    <h2>Green Tea Cooler</h2>
    <p>
      <img src="../images/green.jpg">
      Chock full of vitamins and minerals, this elixir
      combines the healthful benefits of green tea with
      a twist of chamomile blossoms and ginger root.
    </p>
    <h2>Raspberry Ice Concentration</h2>
    <p>
      <img src="../images/lightblue.jpg">
      Combining raspberry juice with lemon grass,
      citrus peel and rosehips, this icy drink
      will make your mind feel clear and crisp.
    </p>
    <h2>Blueberry Bliss Elixir</h2>
    <p>
      <img src="../images/blue.jpg">
      Blueberries and cherry essence mixed into a base
      of elderflower herb tea will put you in a relaxed
      state of bliss in no time.
    </p>
    <h2>Cranberry Antioxidant Blast</h2>
    <p>
      <img src="../images/red.jpg">
      Wake up to the flavors of cranberry and hibiscus
      in this vitamin C rich elixir.
    </p>
    <p>
        <a href="../lounge.html">Back to the Lounge</a>
    </p>
  </body>
</html>

浏览显示

image