在網頁設計的過程中，常常需要將圖片和文本進行組合來達到視覺效果和信息傳遞的目的。HTML提供了一種簡單的方式來實現這個需求，即將圖片和文本分別放置在一個HTML元素中，然后通過CSS的布局屬性來實現圖片和文本的位置關系。 下面是一段示例代碼，用于在HTML中左側放置一張圖片，右側放置一段文本：

<div class="container">
<img src="example.jpg" alt="example" class="image">
<p class="text">這里是放置在圖片右側的文本。</p>
</div>

在上面的代碼片段中，我們首先創建了一個名為container的div元素，用于包含圖片和文字。然后，我們使用img標簽來嵌入圖片，同時設置了圖片的alt屬性，用于在圖片無法正常顯示時提供一個文本替代品。最后，我們使用p標簽來創建一個段落元素，并將需要放置在圖片右側的文本放置在其中。 接下來，我們可以使用CSS來進一步調整圖片和文字的位置關系。例如：

.container {
display: flex;
align-items: center;
}
.image {
flex: 1;
margin-right: 20px;
max-width: 50%;
}
.text {
flex: 1;
max-width: 50%;
}

在上面的CSS代碼中，我們使用了flex布局來將圖片和文字放置在同一行，并使它們的垂直居中。然后，我們使用了flex屬性來指定圖片和文字的寬度比例，并使用margin-right屬性來設置圖片與文字之間的間距。 整個過程非常簡單，即使您不是專業的前端開發者，也可以輕松完成這個任務。如果您更進一步地學習HTML和CSS，您可以創建更復雜的頁面布局，并展示更豐富的信息。