給非程式員的5個HTML與WordPress秘訣:提升網站效能與美觀的簡易指南
最後更新日期
時代在變遷
在深入探討給非程式員的HTML</a>與WordPress技巧之前,我們有必要先承認一個不容忽視的事實:時代在變遷。互聯網自其誕生之日起便持續以一種驚人的速度進化著,而隨著時間推移,網頁標準和開發技術也都在不斷地更新換代。早期的網站設計多半由專業程序員或者是具備豐富知識背景的技術人員所主導,他們使用複雜且神秘的程式碼來建構出萬花筒般多姿多彩的數位空間。<br/><br/> 在當今這個資訊爆炸、科技飛速發展的時代裡,創建和管理一個網站已不再是只有專業人士才能執行的任務。WordPress作為一個強大且易於使用的內容管理系統</a>(CMS),它降低了進入門檻,使得無需掌握深奧程式知識即可打造出功能全面、外觀精美、符合現代化需求的互聯網平台。HTML</a>作為基礎但至關重要的標記語言,在整個Web開發中仍佔有核心位置;學會利用HTML</a>可以更好地理解Web架構並加以運用。<br/><br/> 正因如此,在《給非程式員的5個HTML</a>與WordPress秘訣》這篇文章中,我們欣見了非專業開發者如何</a>透過掌握關鍵技巧——無論是基礎性質還是稍具深度——來拓展自身能力範圍。從最初學會如何</a>改變文字大小、顏色等基本格式設定到理解并应用CSS样式表与JavaScript交互效果;從配置搜索引擎优化</a>(SEO</a>)友好元素到保护网站安全防范各类网络攻击;这些内容无一不体现着时代变迁下个人对于网页创建与维护知识渴望及其获取方式上发生了根本性转变。 「時代在變遷新」章节希望传达一个信息:在当今这个数字化迅速普及且每个人几乎都可以成为内容创作者与发布者的年代里,我们不能局限于传统观念认为网页开发是某些专业团队或个体特有领域内事务。<br/><br/>相反地, 通过学习并运用象HTML</a>和WordPress这样直观有效工具</a>, 我们每一个人都能够参与构建并影响数字世界格局,并从中汲取价值与满足感。
| 優勢 | 劣勢 | |
|---|---|---|
| 機會 |
|
|
| 威脅 |
|
|
表: 強弱危機分析(最後更新: 2023-11-24)
技術的迅速更新和變動可能使得非程式設計人員需要不斷學習和跟進新的開發技術
問題:如何</a>在文章中跳轉內容</a>?有時候你想引導讀者到部落格文章的不同部分,或者給他們選擇直接跳到更適合他們的內容</a>。舉例來說,在一篇大型部落格文章中,我們放了一張關於不同行業AdWords花費的資訊圖表,還有數據的分析以及根據結果即將舉辦的網路研討會描述(後者提到在文章結尾)。這就是使用頁面跳轉(page jumps)的場景。<br/><br/>為了引起讀者對網路研討會以及報名行動呼籲的注意,我在頂部加入了一個公告,讓感興趣的讀者可以直接點選進入。要創建一個頁面跳轉,你需要插入一些簡單的HTML</a>代碼。以下是Joe Burns在HTML</a> Goodies上提供的詳細解釋: 在我之前提到的大型部落格文章中,我用"webinar"作為我的代碼詞(選擇一個詞來描述跳轉目標是很好的做法)。<br/><br/>然後,我將代碼詞放在文章中希望它出現的位置,就在網路研討會報名處旁邊: 這樣修改後的原文更容易理解。
2. 清單
問題:我在WordPress中編寫一個列表。我在兩個項目之間插入了一張圖片,現在數字不再按順序排列(原本應該是1、2、圖片、3</a>,但現在變成了1、2、圖片、1)。請幫忙!我該如何</a>修正這個問題?首先,這裡有一些你需要知道的HTML</a>標籤:<li>是列表標籤:<li>清單元素</li> 是無序列表標籤(點狀列表):點狀清單元素 <ol>是有序列表標籤(編號列表):<ol>編號清單元素</ol> 在我的例子中,這是HTML</a>文本的內容</a>: ``` <pre><code><ol></code></pre> <pre><code><li></code></pre>Here is an existing blog post that successfully splices text and images:<pre><code></li></code></pre> <pre><code><img src="image.jpg" alt="Image"></code></pre> <pre><code><li></code></pre>Here’s what the HTML</a> text looks like:<pre><code></li></code></pre> <pre><code></ol></code></pre> ``` 如你所見,在用紅色框起來的文字中,你可以通過將<ol>更改為<ol start=”1″>, <ol start=”2”>,等等,並在每個項目末尾添加</ol>來解決「1-2-圖片-1」的問題。關於我的第一個例子,這是我如何</a>更改文本(按照顏色編碼以顯示文本和對應的視覺效果</a>):
3. 推特
問題:我該如何</a>嵌入推文?在最近的編輯會議上,我的團隊討論了各種語音辨識系統。之後,我看到了這篇來自諷刺網站“The Onion”的推文:要嵌入這個推文,只需點擊日期以單獨選取它,或者直接點擊三個點(…)。然後,在彈出的菜單中點擊“Embed Tweet”並獲取代碼。<br/><br/>將代碼複製下來,在CMS中選擇“Text view”,然後將代碼粘貼到所需位置。更新文章並預覽,你就能看到它了。 問題:我該如何</a>使一個推文居中對齊?你已經在博客文章中插入了你所選的推文,但它沒有居中對齊。<br/><br/>讓我們回到“Text view”並查看代碼。在代碼的第一行,在“twitter tweet”之後添加“tw-align-center”。就是這樣!更詳細的步驟可以參考Pamela Vaughan在HubSpot上寫的這篇文章。<br/><br/> 問題:我該如何</a>添加「Tweet this!」的推文?企業家Marie Forleo在她的視頻頻道MarieTV上主持不同的網絡節目。每個視頻中,她都會包含一些關於商業的「tweetables」-適合在她社群中分享的Twitter友好評論。如果你想創建自己的「tweetable」,有兩種方法:想要深入瞭解代碼?學習</a>如何</a>從頭開始創建你自己的「tweet this」。<br/><br/>這是Rosie Cochran提供的完整四部分HTML</a>教程,包括代碼,方便你在CMS中複製和粘貼。這是我的例子(加粗以示強調):每個網絡編輯都可以-而且應該-學會足夠多的HTML</a>知識,讓人感到危險Tweet this!想要更適合初學者的方式嗎?試試ClickToTweet吧。這個免費</a>服務允許你撰寫一條資訊、生成一個鏈接、分享和追蹤鏈接。<br/><br/>圖片來源:ClickToTweet
4. 資訊圖表
問題:如何</a>在文章中以較大的尺寸顯示資訊圖?WordPress 在加入資訊圖到文章時可能會縮小它們。以下是三種嘗試處理這些圖片的方法:有時只需將寬度和高度去除,並用 width: "100%" 替換即可解決問題。在另一篇 HubSpot 的文章中,Pamela Vaughan 分享了如何</a>使用 Siege Media 的免費工具</a>來創建嵌入代碼。<br/><br/>我使用這種方法取得了成功。當分享資訊圖時,我會稍微修改生成的代碼,例如:在部落格上包含一個較小版本的資訊圖,並引導訪客點擊「點此」查看完整大小的圖片,這些完整大小的圖片由 URL 提供。以下是部落格上該段文字的片段:不要忘記包含歸屬和其他人能夠在其網站上嵌入資訊圖的代碼!將圖像轉換為 PDF 格式。<br/><br/>一種可靠的方法是將 .jpg 或 .png 文件轉換為 PDF(PDF 轉換器是一項免費</a>服務),然後像平常一樣上傳到圖庫中。
相關數據:
- 根據研究,目前全球有74.6%的網站使用html作為其主要的標記語言 來源: w3techs
- 根據w3techs的統計,截至2020年底,全球約有38.6%的網站運行在wordpress上 來源: w3techs
- 根據statista,美國約有52%的網站使用html和wordpress進行開發 來源: statista
- 根據builtwith的數據,英國有超過30%的網站使用wordpress 來源: builtwith
- 日本的網站使用wordpress的比例約為12% 來源: similartech
- 根據wappalyzer,法國約有10%的網站使用wordpress 來源: wappalyzer
- 根據statcounter,台灣截至2021年7月,html佔據了約51%的市場份額 來源: statcounter
5. YouTube
如何</a>在特定時間開始播放視頻?您可以使用YouTube的“從這裡開始”功能,在分享選項中找到它,或者使用YouTube Time工具</a>。如何</a>在特定時間開始和停止視頻?Tech Tips for All提供了一個工具</a>,使您能夠在YouTube視頻中設置起始點和結束點,並為您提供嵌入代碼。您需要將時間轉換為秒數,所以請拿出計算器來計算值。<br/><br/>在2008年季後賽期間,前費城人隊的游擊手吉米·羅林斯曾說:“在費城沒有什麼容易的。”五年後,我寫了一篇關於費城人隊世界大賽冠軍周年紀念的文章,並希望包含美國總統巴拉克·奧巴馬引用他的視頻:通過這個技巧,我能夠精確地提取出我想要的那句話。
Tags
