lesson2 practice

From: https://www.storm.mg/article/4850671 HTML + CSS

by Pansen

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>

  <body>

    <h1>
      歷史有什麼用？《島嶼歷史超展開》選摘（1）
    </h1>

    <a class="editor" href="https://www.storm.mg/authors/229561/%E9%84%AD%E7%B6%AD%E4%B8%AD">鄭維中</a> 2023-08-14 05:10

    <img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2023/01/30/20230130-055738_U26750_M826080_cc7c.png?itok=cWTc_D5a">

    <div>
      《島嶼歷史超展開》撰寫形式受到《希臘羅馬名人傳》的啟發，圖為羅馬希臘咖啡館 Antico CaffGreco。（陶在樸提供）
    </div>
    <hr>
    <p class="article">
      以敘事方式流傳的人類經驗，或是故事，必然帶有真實再現的成分。涉及判斷人類狀況的再現，不可能割捨過去連貫的經驗。也因此，對人類集體經驗的回溯，既然以敘事為載體，就必然對於真實再現有所要求，以作為判斷的基礎。要言之，判斷力源於真實，這使得歷史脫離單純的故事範疇，成為特定再現標準下的敘事。
    </p>
    <br>
    <a class="article" href="https://www.storm.mg/line/notify/login">[啟動LINE推播] 每日重大新聞通知</a>
    <p class="article">
      歷史著作之用，在於提升讀者對於所處人間存在條件的判斷力。除了嚴格立基於事實的敘事成分之外，往往還需參照人物的行動，給予一貫性的詮釋，並以後見之明，採取全知角度，來評估這些作為的成敗。故事主人翁所面對的不確定性，來自於他所不能掌握的自然與社會環境。這一切構成了其命運與其作為之間的往復辯證。在這存在境況當中，欲提升人性的堅韌品質，所仰賴的即是在命運轉換關頭，即刻決策的判斷力。因此，歷史敘述需要同時包含人與時代兩方面，並且要能促使讀者適當詰問自身在面對不可知的偶然性時，如何以整體人格（integrity）的眼光，看透時代，來表現其品德（virtue）。
      本書出於對人與時代的關心，不採取當前學術寫作的體例，而模仿羅馬歷史學者普魯塔克（Plutarch）所著《希臘羅馬名人傳》（Vitae parallelae）的雙人合傳對比模式，以便於使用最少的篇幅，呈現環繞著早期臺灣歷史（16世紀晚期至18世紀初期），引動、發揮或受制於巨大影響力的人或人們，在時代變化關頭的決策。除第一章、第二章與第五章外，本書大致按照年代順序，每一章節通常並列兩個人物或人群，以對比的方式，來描述世界範圍內，與各章主角人物、人群交織的歷史結構，以及他們在歷史洪流當中，做出（當時已知或未認知的）重大決定的可能理由，及其實際作為（或不作為）所導致的可知或當時尚不可知的後續效應（consequences）。
    </p>
    <p class="article">在各章節的敘述中，將以對象人物所面對的時代難題為核心，講述多面向的歷史發展如何導致該人物在歷史中，站上了必須做出回應的位置。本書與《希臘羅馬名人傳》不同之處在於，本書擇定作為「合傳」的對象，並非如普魯塔克由希臘、羅馬時代各取1名，而是以大約40年為1世代，探討16世紀晚期以來，幾個前後世代範圍之內，因循相當不同的發展路徑，而對臺灣歷史與東亞海域歷史發生重要影響（或遭受重大衝擊）的人物。本書雖然也探討歷史人物本身的經歷，但不以傳記為目標，而是僅僅擇定他們與同時代臺灣以及東亞海域歷史重要發展緊密交織的那個側面，加以描繪。藉由人物與事例間相互對比參照的的寫作方式，刻劃出17世紀的快速變化，以及局勢轉變的衝擊與個人對應方式既可能正打歪著、也可能歪打正著的弔詭情形。
    </p>
    <p...

CSS

body {
  font-family: "Gill Sans", sans-serif;
  padding: 10px;
}

h1 {
  text-align: center;
  padding: 5px;
}

a {
  color: blue;
  margin: 0px;
  padding: 0px;
}

a:hover {
  color: red;
}

div {
  font-size: 100%;
  color: grey;
  opacity: 0.6;
  text-align: center;
}

p {
  padding: 15px;
  margin: 20px;
}

img {
  width: 100%;
  height: 100%;
}

.article {
  padding: 15px;
  margin: 20px;
}

.editor {
  padding: 10px;
  margin: 10px;
}