iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
Modern Web

每日1%,你會累趴。系列 第 2

Day2 HTML

每件事情的開頭一定都有屬於他自己的原因,想達成的目標、想解決的問題、後面的文章會繞著三大主軸在運轉:「要做什麼」、「為什麼要做」、「該怎麼做」。

大部分轉職工程師都是走網頁工程師這個方向,先不去考慮工程師的分支:Mobile、前端、後端、資料、大數據、爬蟲等等各式各樣的進化型工程師,至少每個人都開過網頁,上過Ptt表特版看妹,開過FB偷別人菜,上過Youtube看Stanley、丁特絕命雙排,開過Porn什麼我忘記了的網站學術交流過,上過it邦寫鐵人賽吧?更別說近好多年來人手一支手機,坐公車也能看到阿公阿嬤在滑Candy Crush,偷瞄旁邊女生的螢幕在幫自己推推臉推推手之後上傳到Instergram,肚子餓了手機點開叫個油布熊貓就有好料送上門,這些東西其實都算是網頁工程的進化。

先不論以上這些東西多麽復雜、花俏,他們全部都有一個共通點,那就是:Hello World,沒錯就是Hello Word,我想這是每個新手入行時一定會看的字眼,今天要做的就是Hello World。

至於你說為什麼要做Hello World?因為我就菜阿,今天的我只會這個。

那現在做來寫我們的第一個檔案,首先打開記事本,打上 Hello World,然後另存新檔,檔名設定為:HelloWorld.html然後存檔,好了我們的第一個網頁就完成了。什麼?你說怎麼可能這麼簡單?但其實最原始的網頁就是這樣,不相信的話可以在Chrome的右上角小工具點選更多工具->另存網頁為...->存到桌面,之後到桌面就可以看到一個html檔案,將他右鍵開啟檔案,選擇用記事本開啟,你就會發現其實結構是差不多的,只是多塞了非常非常非常非常多的內容進去。

https://ithelp.ithome.com.tw/upload/images/20210902/201150486ECNHW7p8A.png

所以我只要學會使用記事本就可以當網頁工程師了嗎?

https://ithelp.ithome.com.tw/upload/images/20210902/20115048tJ2fpSrVc0.jpg

根據維基百科,如果在西元1993年時你擁有了這樣的技術,或許你真的就可以自稱為網頁工程師了,但經過了28年的時間演化,這種單純的靜態頁面因為畫面不漂亮、沒辦法互動、資料無法被儲存等等原因開始演化成了動態頁面。

但是蓋大樓還是要從地基打起,先把html弄懂比較重要,Html最重要的東西我認為是tag,上面的Hello World範例只會有一個非常無聊的文字呈現而已,如果想要附上一張照片,那你會需要img tag,如果想要一個網址超連結,那你會需要a tag,至於哪些tag可以有哪些功能可以到這裡查詢,那以下就使用一些基礎的tag來做一個頁面吧。

先來一個網頁的標題

<title>Hello World</title>

內文大標題

<h1>我是大標題</h1>

內文小標題

<h6>我是小標題</h6>

文章段落

<p>我是文章段落</p>

列表

<ul>
  <li>吃飯</li>
  <li>睡覺</li>
  <li>打東東</li>
</ul>

超連結

<a href="http://www.lovelykurt.com">我是超連結</a>

照片

<div>
  <img src="/Users/kurt/Desktop/view.png" alt="">
</div>

全部加在一起

https://ithelp.ithome.com.tw/upload/images/20210902/20115048H1C4X46Uzh.png

照片的部分會加上一個div tag是因為要給他一個獨立的空間才不容易跑版,這個版面設計的東西在這裡先不詳細解說,最後存檔的成品就會長成這樣。

https://ithelp.ithome.com.tw/upload/images/20210902/20115048KAOthwOexO.png

這些常用的tag好好熟悉的話已經可以自己做些有趣的東西了,今天的實作就到這邊結束,謝謝觀看的各位,請記得按讚分享開啟小鈴鐺,你的支持會讓按讚數+1。


上一篇
Day1 啟蒙
下一篇
Day3 差點難產的CSS
系列文
每日1%,你會累趴。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言