Day_2 Web html 初開始 with vscode(上)

2023 iThome 鐵人賽

DAY 2

Modern Web

三十天持續努力挑戰py系列第 2 篇

15th鐵人賽

clevens1008

團隊NUTC_IMAC_WEB_桑貝比

2023-09-17 01:20:59

481 瀏覽

分享至

今天要介紹的是要怎麼開始寫自己的第一個web，使用的文本編輯器(編譯器)是Visual Studio Code(vscode)，目前十分強大的編譯器之一。
在編譯器內部新建一個文件，並將其保存為以'.html'的副檔名檔案，
基本的HTML結構有html、head、body。

<!DOCTYPE html>
<html>
<head>
    <title>網頁標題</title>
</head>
<body>
    <!-- 這裡放置網頁內容 -->
</body>
</html>

但我們可以使用vscode的功能，打一個!跑出以下圖片時，直接按下Enter。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

這樣可以少輸入很多東西。
主要寫入的內容是在body裡面，語法是:

<p>Lorem, ipsum.</p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <h2>Lorem, ipsum.</h2>
    <a href="www.youtube.com">Lorem, ipsum.</a>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7TVwjjjxSYr4-Ibegd4YU-GORlReBpnQej2C5ju8ouA&s" alt="pun">

<p>是一般的文字輸入。<h1>、<h2>是指標題數字越大字體越小。<a>是超連結可以在裡面新增連結。<img>是插入圖片可以找圖片的網址，貼上去即可使用。

    <div style="color: blue;">
        <p>Lorem ipsum dolor sit amet.</p>
        <h2>Lorem, ipsum.</h2>
    </div>

<div>是一種容器，可以把它想像成數學式中的括號()，我想要4+2我想要都乘以6，所以變成6x(4+2)，html中也是同理，我把裡面字體的顏色都改成藍色。
<div>是一個很重要的東西，基本概念不難，但因為可以套很多層所以會很複雜。主要是跟樣式(css)一起使用的，一層包一層位置怎麼擺，顏色怎麼變，都需要花上心思處理。
這邊順便教學樣式(css)，一個跟html一起的東西，有html就有css，沒有css的話不如使用記事本就好，基本用法就像上面那樣，直接在後面加上style=""，之後裡面打上要更改的屬性，上面那堤就是color的屬性要更改成blue，還有很多屬性能做更改我這邊不多贅述。
css還有辦法更好輸入，我放在下篇，以及html裡面也很重要的javascript，也會放在下篇一起講述。