iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0
自我挑戰組

跟我一起學習HTML&CSS網頁設計吧系列 第 1

[DAY_1]文章前言&簡單介紹HTML&CSS

  • 分享至 

  • xImage
  •  

前言

第一次參與ithome鐵人賽,目前就讀相關資訊科系,以前就知道這項比賽了,連續30天發佈主題技術文章,覺得很有趣也非常有挑戰,但因為畏懼自己的能力是否足夠分享所學給大家,遲遲不敢參與;今年因緣際會下開始了我的30天HTML及CSS的技術文章發布,因為喜歡設計排版希望發布的文章能幫助到一些人,在寫文章的同時除了分享所學,也為能更清楚知道自己的能力不足之地,在挑戰中學習。

若文章中有錯誤的部分,歡迎大家留言指教。/images/emoticon/emoticon08.gif


簡單介紹HTML&CSS

大家應該很常聽到HTML這個語法,但其實這是HyperText Markup Language這串文字的縮寫,它是一種目的於建立撰寫網頁,讓大家在統一標準分享網頁資訊。HTML使用於呈現網頁內容及標記的結構化,是架構網站的基礎語法。
除了文字以外,內容也可以寫入各式包含圖片、影像、音檔、超連結、廣告、地圖......其實非常多種內容可以應用。

那它的開法者是誰呀?
其實開發HTML的是一個組織,W3C(全名為World Wide Web Consortium),是全球資訊網的主要國際標準組織、半自治非政府組織,制定的標準。

而CSS(階層式樣式表,style sheet language)是風格頁面語言。在HTML的結構化網頁上,添加更舒適、範圍更廣的美化編輯工作,像是顏色、位置(靜態動態)、線條、字體......等等,他們倆是相輔相成,想要呈現的內容大部分都能藉由撰寫這兩項語言寫出來。


使用工具

本篇30天系列系列,將會使用到google chrome及visual studio。

google chrome 是gooogle公司開發出來的免費網頁瀏覽器,其中chrome的開發者工具使用Windows快速鍵F12,可以查看當前網頁的html,甚至是觀看不同裝置(平板、手機)顯示的不同狀態,可以用來觀摩、參考學習,超級方便的。

visual studio code為原始碼編輯器,介面很人性化,使用者可以更改佈景主題顏色、鍵盤捷徑,實現個人化設定以至使用上的方便,欄位框簡潔一目了然,也可以使用左側內建功能增加輔助功能。
同時也為免費使用,所以推薦若還沒有下載或喜愛的程式語言編輯器,可以一起使用visual studio code


今天就先介紹這些,歡迎大家跟我一起學習網頁設計!下次見/images/emoticon/emoticon76.gif

下一篇gogo!
[DAY_2]visual studio code原始碼編輯器_下載教程

圖片參考:
https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-HTML5_logo_and_wordmark.svg.png
https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/220px-CSS3_logo_and_wordmark.svg.png
https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/800px-Visual_Studio_Code_1.35_icon.svg.png


下一篇
[DAY_2]VScode 優點與下載教程
系列文
跟我一起學習HTML&CSS網頁設計吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言