iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

1995到2021,php到react網站開發歷程系列 第 3

DAY3-HTML一定要配CSS

前言:

就像吃藥一定要配溫開水一樣,html一定要配CSS!

(貼心提醒:有些藥如果配溫開水其實是會造成反效果的!可以點進下方報導看一下~ https://today.line.me/tw/v2/article/0P38pD,來學程式還被你學到生活知識,真是賺翻了。)

那先歡迎各位來到第三天,今天我打算從html和css這兩個網頁開發基本工具開始介紹,並帶大家做一個個人簡單的小網頁。

教學資源:

這裡我首推Coursera上密西根大學開的Web Applications for Everybody:

https://www.coursera.org/specializations/web-applications

Dr. Chuck把這些東西都教的很簡單,而且教授本人也滿幽默的,整個課程分為四個部分,但其實每個部分內容都不長,如果跟我一樣拚的話應該是可以在coursera七天免費試用期裡看完的,同時還有作業區可以練習,最後還有結業證書可以拿,唯一缺點應該是有些課沒有中文字幕,但教授講的真的很慢,也沒有什麼高深的單字,我相信學習上不會有太大困難。

我都念HTML:

所謂HTML就是超文本標記語言(Hyper Text Markup Language),可以想像成是專門寫給瀏覽器看的語言,而瀏覽器在解讀這些檔案時,就是透過一個一個被Tag(</>)框起來的內容來轉換成我們現在看到的網頁。所以我們接下來要做的事就是知道這些Tag的用法以及什麼時候用該用哪一個Tag,那就讓我們開始吧!

要開始練習首先需要先打開我們昨天介紹到的xampp安裝的資料夾,在打開安裝的資料夾後,找出htdocs這個資料夾,在裡面隨便新增一個新的資料夾,我這裡是取叫30days,之後在這個資料夾中新增一個筆記本檔案,改名為index.html就大功告成啦!

這裡如果你是使用sublime的話,先以sublime打開,從view→syntax中選取html,之後在空白的第一行打html再按tab,這時候應該就會出現基本的html框架了,如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

</body>
</html>

那我們今天的目標是先做出一個個人頁面,通常我們會把內容家在這個標籤裡,所以我先把上面的html擴充成:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>個人網頁</title>
</head>
<body>
		<div class="wrapper">
    <div class="left">
        <img src="./pic/cat.jpg" 
        alt="user" width="100">
        <h4>Sen Chao</h4>
    </div>
    <div class="right">

        <div class="intro">
            <h3>個人簡介</h3>
            <ul>
        <li>
						<p>我是阿森,目前就讀臺灣大學工程科學與海洋工程學系大三。<br/>
						聽到這裡,你可能會好奇,工程科學乾寫網頁什麼事?嗯......的確是完全沒有關聯!
						<strike>那我們30天就到此結束~謝謝各位~~</strike><br/>
            沒有啦!正因為我也不是本科出身的,我相信我可以透過更大眾的說法來和各位分享我的所學,
						也希望大家可以真正學到一些技能,</br>
						並在這30天後有能創作出自己網頁的能力!
						</p>
				</li>

        </ul>
      </div>

        <div class="info">
            <h3>個人資訊</h3>
            <div class="info_data">
                 <div class="data">
                    <h4>Email</h4>
                    <p>senchao0930@gmail.com</p>
                 </div>
                 <div class="data">
                   <h4>手機</h4>
                    <p>09--------</p>
                </div>
                <div class="data">
                   <h4>github</h4>
                    <p>Cooksuhr</p>
                </div>
            </div>
        </div>

      
        <div class="social_media">
            <h3>社交媒體</h3>
            <ul>
              <li><a href="#">Facebook</a></li>

              <li><a href="#">Instgram</a></li>

              <li><a href="#">My Blog</a></li>
          </ul>
      </div>
    </div>
</div>
</body>
</html>

那這裡阿森大致說明一下上面用到的tag吧!

:全名為anchor tag,是用來放一些超連結的tag,在開發的時候可以先用 href="#" 來帶過,等開發近尾聲時再嵌入真正的網址。

接下來需要打開昨天安裝好的xampp control panel,我通常是用左下角的搜尋直接打開。接著把Apache和mysql旁邊的start按下去!應該會長這樣:

再來只需要打開隨便一個瀏覽器,在網址的部分輸入http://localhost/你htdocs裡面的資料夾名/他就會自動導到你剛剛寫好的index.html了!

現在網頁應該還只長這樣:

有沒有發現多了一隻可愛的貓咪,那是透過這個標籤引入的,這也是HTML引入圖片的方法,其語法為這樣:

<img src="./pic/cat.jpg" 
        alt="user" width="100">

其中

./

代表現在這個html檔案所在的資料夾,pic代表這個資料夾中還有一個pic資料夾

pic/cat.jpg

就是這個pic資料夾中的cat.jpg檔的意思。

那html的部分就到此完成囉。

小結:

結束今天的進度後,大家應該都有寫出基本的自我介紹網站的能力了吧!但各位應該也有發現這個網頁不前還有很多不完善的地方,這些地方會用到接下來要介紹的幾個工具,像是php, css等。

明天我們就從最主要的外觀下手吧!也就是今天標題提到的CSS,那今天就到這,明天見!


上一篇
DAY2-必先利其器
下一篇
DAY4-比CS更好玩的CSS
系列文
1995到2021,php到react網站開發歷程30

尚未有邦友留言

立即登入留言