[HTML/CSS] 線上課程筆記(3-8~3-11)

6/17 
3-8開始撰寫HTML

安裝並使用VScode編輯器建立新文件Hello World
並另存為作為首頁的 index.html

如何開起儲存的html網頁 ?
開啟頁面方式為兩種
A .於Chrome開啟新分頁後，拖曳html檔案至新分頁
B .或直接點及html當按兩下即可

6/19、6/28、7/1
3-9撰寫h1標籤 p段落

了解<h1></h1>及<p></p>的html標籤概念
h1 網頁中最重要的內容、文字標題
而一個網頁中只會有一個h1

從chrome中去檢查認識




左上角按鍵可以點一下就知道頁面中，藍色區域對應的程式碼為何

Q : 打完的字預設出來的字體是不一樣的 ??

讓我們繼續看下去 ~~

註冊Codepen(免費版)寫作業提交助教修改
類似這樣、記得案SAVE儲存唷(SETTING可更改文件名稱)




7/1 
3-11建立HTML環境

介紹標籤、手打html格式環境標籤

html中會有兩個標籤
一個是head、一個是body

要讓使用者觀看的內容都要放在body裡面 如 h1、p

而head中先介紹title這個標籤，是網頁的標題
head的概念、地位如同word中檔案下的資訊欄位顯示此文件的各種摘要(大小、字數、作者)等等的詳細、細部資訊

<!DOCTYPE html>顯示的格式，如同WORD要另存新檔時要儲存的副檔名(DOC、DOCX)決定網頁以哪種格式去做顯示

Q : 為什麼需要使用標籤 ? 使用標籤的意義是什麼 ?

作業練習








留言

張貼留言

這個網誌中的熱門文章

[ 練習傳達 ] 歷史

圖片
從主題來賦予認知 進而透過圖像的呈現   感覺似乎可以這樣的方式，更有內涵的去表達 舉例來說 以「歷史」作為主題練習發揮.... 在初階段我想到的是軍人、戰爭、古代人、旗幟、生活文化、汴京上河圖 會有斑駁的視覺感去呈現 色調的話會有白色、土色與磚紅 在更深入是動見觀瞻(這個實在不易傳達) 歷史可以是紀錄是卷軸也可以是一種傳承 靜態的呈現以動態的表現都不同 後來再回來看 歷史是時間、是紀錄、是研究 也是前進的基石 參考前人試著調整與思考分析 顏色採用斑駁的灰與紅 做完後自己感覺像個書本的封面..?要看大家的想法了~ 希望愈來愈清楚吧~
閱讀完整內容

[HTML/CSS] 線上課程筆記(3-12~3-15)

圖片
 7/2  3-13 Emmet 載入環境語法 每一次都需要輸入標籤，有沒有比較便捷的小工具呢 ? 單元介紹Emmet Emmet近期的編輯器中皆有預設了，原因無他就是使用者愛用~ (先前使用過其他編輯器需要手動安裝的~現在的編輯器好先進) 使用方式 : 輸入一下驚嘆號 「 !」+Enter或是Tab鍵 解釋一下意思 網頁格式UTF-8編碼 配合舊版IE進行設計 手機版、平板響應式版本、調整螢幕解析度 使用方式：生成兩個段落的標籤：p*2 7/2、7/8 3-14 插入圖片，了解圖片路徑規則 網頁檔含有所有資料與圖檔皆可放在同一個資料夾內 介紹 < img   src = "img/logo.png"   alt = "六角logo" > src="檔案路徑"、alt="圖片的顯示名稱" alt為替代的播報工具 src = "img/logo.png" 表示圖片於img資料夾項下 內(本地端下載) 路徑放錯了可是會影響圖片的呈現唷 可能變成破圖 ~ 3-15 載入外部圖片方式 當不想下載圖片到本地端(自己的電腦上)時又該怎麼辦呢 ? 於想要連結的網頁圖片上 複製圖片位址 可適用別人伺服器上的圖片位置 標籤使用方式相同 < img   src = " "   alt = " " > ^ ^ 複製好的圖片位址 破圖時要顯示的說明文字
閱讀完整內容