無論您是尋找餐飲推薦、訂購雜貨、閱讀您最喜愛的博客，還是購買節日禮物，互聯網都是我們獲取信息和便利的首選。自然地，最好的公司能夠在潛在客戶走進大門之前通過專業和無縫的網站吸引他們的注意力。談論成都小程序設計很容易，但如果您是小企業主或初出茅廬的企業家，則很難知道從哪里開始。幸運的是，我們已經將如何編寫網站代碼的過程分解為幾個簡單的步驟。在我們深入探討之前，我想花點時間回答許多初次建站者遇到的兩個常見問題。
答：這取決于您網站的復雜程度。例如，與構建一個收集用戶送貨信息和處理付款的在線訂購門戶相比，啟動包含您公司地址、聯系信息和社交媒體帳戶鏈接的基本主頁所花費的時間要少得多。
但是，僅僅因為您在開始時節省了時間并不意味著不值得使用更高級的功能。這取決于您的業務。如果您只是想吸引客流量到您的商店，那么在線訂購就沒有意義。
也就是說，您可能會錯過那些不想開車去實體店但會通過您的網站購買的客戶。如果您沒有足夠的帶寬將商品運送給您的客戶，那么這是繼續創建電子商務網站的另一個很好的理由。
簡單的回答：沒有。雖然在Internet的早期每個人都在手動編碼他們的網站，但現在許多網站都是使用內容管理系統 (CMS)構建的。CMS通過提供可視化界面來構建網頁和構建您的網站，從而消除了編碼的需要。許多CMS提供拖放功能，以便您可以輕松地將元素（例如按鈕）放置在頁面上您想要的位置。CMS模板庫甚至可以幫助創建無需編碼即可兼容所有設備類型的響應式網站。
我們的團隊編制了一份最佳CMS列表，如果您不想使用自定義編碼路線，我建議您閱讀這些內容。如果您準備好學習一些代碼，讓我們一起完成這個過程。
代碼編輯器是新開發人員的絕佳工具，因為它們提供了許多使我們的生活更輕松的功能。例如，Visual Studio Code（我的選擇）將提供語法建議，這樣您就可以避免簡單的拼寫錯誤導致代碼出現問題。最重要的是，它會自動完成HTML的結束標記，并為您的文件添加視覺標記，以便您可以輕松區分不同的代碼片段。
您可以在下面看到常規文本編輯器和代碼編輯器之間的區別。代碼在兩個文檔中的工作原理相同，但是一個比另一個更容易一目了然。
正如我之前所說，Visual Studio Code是我的首選工具，但也有許多免費的代碼編輯器可供您選擇。Visual Studio Code具有向編輯器添加額外功能的擴展（例如從深色模式切換到淺色模式）和不斷創建更多功能的專用用戶群，但最重要的是您擁有用于這些后續步驟的代碼編輯器。品牌并不重要。
注意：我將分享來自Visual Studio Code的屏幕截圖，因此當我們在下一步深入編碼時，可以很容易地使用這個工具。
HTML代表超文本標記語言。如果這現在沒有意義，請不要擔心。少關注定義，多關注這張圖片：我們正在蓋房子。最自然的起點是地基、墻壁和屋頂，因為在您擔心室內裝飾或油漆之前，每個房子都需要這些。
使用HTML，我們能夠為我們的網站構建這種結構。這是我在領導HTML和CSS培訓時使用的一個比喻，因此我們也將在本教程中重新使用它。
既然我們擁有適合這項工作的正確工具并了解我們的目標，那么是時候深入探討您來這里的原因了：編碼。
創建HTML文檔。
我們所有的編碼都將發生在我們保存到本地機器的不同文件中。我們將創建的第一個文件是我們的HTML文檔。首先，為您的網站文件創建一個新文件夾。由于我正在演示，我創造性地將我的命名為“演示”。
現在在代碼編輯器中打開該文件夾。接下來，創建一個名為“index.html”的文件，我們現在已經準備好了第一個HTML文件。請注意，您不需要將文件命名為“index”，但需要匹配“.HTML”文件擴展名。這會告訴我們的計算機（以及后來的網絡瀏覽器）這是一個HTML文檔，而不是JPG、PDF等。
我們的文件目前是空白的，所以讓我們添加HTML文檔結構。我已經在下面的代碼片段中列出了所有內容，因此您可以復制并粘貼到您的文件中（或寫出來）。
讓我們回到上一節的比喻。我們現在有了房子的結構。但是您可能已經注意到——就像剪貼畫中的房子圖形一樣——我們的HTML是統一的并且沒有顏色。我們可以看到所有這些，但很明顯，與默認顯示相比，HTML可以完成更多的工作。我們將求助于CSS來為我們的“房子”增光添彩。
CSS代表層疊樣式表。如果您不熟悉CSS，我建議您從我們的CSS指南開始，復習屬性、語法、選擇器和特異性的細節。我們將在下面介紹如何實現 CSS。
創建CSS文檔。
正如我們創建“index.html”文件一樣，我們現在將創建“style.css”文件來存儲我們的CSS規則。同樣，文件的名稱無關緊要，但您必須包含“ .CSS”擴展名。
添加CSS規則。
現在，我們將專注于向我們的CSS文件添加一條規則。在這種情況下，我希望所有段落都顯示為紅色文本。
選擇器“p”告訴CSS我們要定位HTML中的所有段落并應用方括號 ({}) 中列出的屬性。在這種情況下，我們有一個屬性“顏色”，我們已將其設置為值“紅色”，但我們可以根據需要在規則下添加任意數量的屬性。
在將此CSS規則添加到文件后，您可能會注意到頁面上沒有任何反應。那是因為我們需要將我們的HTML和CSS鏈接在一起，我們將在下一節中展示。
為了讓我們的CSS影響我們的HTML，我們需要告訴瀏覽器應用 CSS。執行此操作的過程很簡單。我們只需要添加一個元素到我們的。
我們又一次看到了HTML屬性的作用。添加沒有“rel”和“href”屬性的 標簽不會產生任何結果，因為瀏覽器不知道鏈接類型（樣式表）和鏈接到的位置（style.css）。請注意，如果您以不同方式命名CSS文件，則應更新引號 (" ") 內的 href 屬性值以匹配您的文件名。否則，瀏覽器將無法找到您的樣式表。
更多CSS規則
現在我們的HTML和CSS已鏈接，我將添加更多規則以使我們的頁面看起來不那么普通。
為了理解網絡響應，我們將再次使用比喻。一方面，我們有一個池塘。池塘里的水總是一樣的形狀，因為池塘的邊緣永遠不會改變。另一方面，我們有一個流。溪流的邊緣在流動時總是在變化，水總是在膨脹和縮小以適應這種形狀。
我們可以用同樣的方式來思考靜態網站和響應式網站。靜態網站不會對瀏覽器大小的變化做出反應。它的內容將始終是相同的形狀。同時，響應式網站不斷適應不同的瀏覽器和屏幕尺寸。
為什么響應很重要？根據StatCounter的數據，到2023年，移動流量現在占互聯網所有流量的85%以上。如果您的網站無法容納從小屏幕到智能電視的流量，那么您就會失去潛在客戶。此外，谷歌將移動友好性列為其在搜索結果中顯示頁面的決定的一部分，因此您也可能會失去有機流量。
到現在為止，我們已經創建了一個靜態網站。默認情況下，文本元素將調整大小，但其他元素將保持其原始形狀和大小，無論顯示如何變化。在下方，我們可以看到笑臉的右側被截斷了，因為視口現在比其 300 像素的固定寬度窄（請注意，我們的段落已將其文本換行以適合）。
我們將（你猜對了）帶回我們的朋友這個部分的比喻。想象一下，您正站在街上閱讀磚墻上的吉他課程傳單。你感興趣，傳單上說要撥打一個號碼進行注冊。
這就是我們認為的簡單網站。它顯示有關某事的信息，甚至可能要求您采取行動，但閱讀是您（用戶）在網站上可以做的事情的范圍。請記住，您需要撥打它在您手機上提供給您的號碼。
我們回到了磚墻。現在，有一個關于吉他課程的標志和一扇門，如果您有興趣，可以進入錄音室進行注冊。墻上仍在顯示信息，但現在您可以與其互動以采取下一步行動。這就是我們認為的交互式網站。看看這個名字是從哪里來的？
JavaScript簡史課
到目前為止，我們一直在構建一個簡單的網站。我們正在向我們的用戶顯示信息，但這就是網站所做的范圍。有一次，早期的互聯網也是如此。您可以從各種網站訪問信息，但網站無能為力。
JavaScript于1995 年發明，旨在為網頁添加交互性。JavaScript是與HTML和CSS相結合的第三種Web開發基礎語言。到目前為止，我們學習的這兩種語言都是標記語言，但JavaScript是一種編程語言。編程是計算機根據預定義的邏輯執行操作的過程。
例如，假設用戶點擊了我們的笑臉。網頁隨后會在注冊該面孔已被單擊時打印問候語。該頁面知道這樣做是因為我們已經告訴它要注意這種交互并以特定方式做出反應。
你的第一個JavaScript程序
不幸的是，深入研究JavaScript的語法和機制超出了本課的范圍。相反，我將提供一個預先編寫的程序，以便我們可以專注于在我們的網站上實施它。
如果您已經做到了這一點，那么請花點時間祝賀自己。您已經從以前可能從未編寫過代碼到擁有響應式和交互式網站的基礎。我們已經涵蓋了HTML和CSS中不同概念之間的許多基礎知識，甚至還涉及了編程。這是您Web開發之旅中重要的第一步。
當然還有很多東西要學。當您繼續構建您的Web開發工具箱時，我已經概述了幾個需要關注的領域。
HTML和CSS比我們今天介紹的要復雜得多。這些語言構成了您網站的可見面孔，對您的用戶體驗至關重要。成都小程序設計已經將基礎指南重新鏈接到下面的HTML和CSS，并添加了一些指向更高級CSS主題的鏈接。
