HTML入門&基本觀念介紹！ 構成一個網頁，最重要的就是他的結構，而HTML就像是他的骨架，而CSS就是像是我們身體上的肌肉一般，而JS則像是人體的神經、血管般調整著我們身體、傳遞訊息，那麼HTML究竟是指哪些語法呢？ 什麼是HTML? HTML全文又稱為HyperText Markup language ，也就是所謂的超文本標記語言，是網頁構成的基本要素，換言之，網頁就是由一堆html所構成，透過瀏覽器，顯示文字、圖片、以及其他相關我們可以在網頁上看見的基本元素。而對於剛學程式的朋友來說，HTML有以下幾個重點： HTML的基本架構： HTML的基本觀念與優點1.容易學習-HTML的文檔製作非常簡單易懂﹐功能強大之餘還支持不同格式的文件鑲入。2.製作門檻低-HTML是文本﹐它需要瀏覽器的解釋。只要你學會了HTML﹐你就可以直接在Windows的記事本或寫字版上進行製作和編輯﹐當然你也可以用WPS來編寫﹐只要注意在存檔的時候用.htm或.html來做檔名就可以了3.有利於搜尋引擎理解你的內容，透過HTML所構成的頁面被稱作所謂的”靜態頁面”﹐而Google爬蟲會優先收錄靜態網頁﹐所以HTML對於Google來說就像是鯊魚聞到血腥味一樣﹐有利於吸引Google爬蟲。4.加快瀏覽速度-因為靜態網頁無需連接數據庫﹐因此比打開動態網頁的速度較快﹐對於消費者體驗來說有所幫助。5.網站更安全-因為HTML頁面不會受Asp相關漏洞所影響。 HTML的缺點與限制 1.太簡單﹐不能適應現在越來越發達的網路世界和應用的需要﹐比如手機﹑PDA﹑信息家電等都不能直接顯示HTML2.太龐大﹐由於HTML代碼不規范﹑臃腫﹐瀏覽器需要足夠智能和龐大才能夠正確顯示HTML。顯然在你的PDA上裝一個IE6是不可能的。空間不夠﹐運算也跟不上3.數據與表現混雜。這樣你的頁面要改變顯示﹐就必須重新制作HTML。對不同的網路設備顯示同樣的數據都需要制作不同的HTML4.只能對文本進行排版﹐而且HTML樣式使用標準文本標識﹐不能創建一些特殊效果 所以我該如何學習HTML? 有什麼比較快的方法嗎？ 答案是沒有的﹐學習程式語言就像是學習廚藝一樣﹐只有透過不停的嘗試﹑嘗試和嘗試才能讓自己有所成長﹐並且慢慢強大。過程中你會一直遇上困難和失敗﹐但你在不斷解決困難的過程中能夠不斷發掘新的知識﹐從失敗中發才能不停的成長。無論你是學習那一種程式語言﹐都需要經歷困難和失敗才能讓自己更加強大﹐正所謂:不經一番寒徹骨，怎得梅花撲鼻香呢?對吧﹐我們能做的不是要找捷徑﹐而是透過不同的媒介和平台去不斷學習﹐那麼下面快樂學程式會為大家介紹一些很棒的程式教學網站﹐讓大家可以不斷提升自己。 1.w3schools.com- 語法練習的好地方這個網站是目前全球訪問量最大的網頁開發教程網站﹐網站裡有多種程式語言的教學﹐而且每種程式語言由淺到深的解說﹐從語言的介紹到不同的功能和方法都會分章節說明。所以無論你是從零開始學的白紙﹐還是已經在學習但遇到困難的新手都可以在這個網站上找到相關資訊﹐是個非常不錯的網站。那麼網址我們當然要雙手奉上﹐請慢用https://www.w3schools.com/ 2.CodeAcademy- 免費的教學網站這是全球其中一個最受歡迎的免費coding教學網站﹐已經有超過2400萬人透過這個網站學習到了如何去coding。這個網站是非常適合新手入門的同學去學習的﹐網站會一步一步仔細的教導而且還有實作﹐所以學習起來非常的快速! 3.StackOverflow- 實際案例與疑難雜症的解決處 這個網站比較適合一些已經有在嘗試動手實作的同學﹐當你在coding的時候遇上困難了﹐那麼你可以在這個可以解決超過80種程式語言問題的網站上找到答案﹐讓你的coding之路更加順暢。 如果你覺得爬網站麻煩又費時，不妨直接點擊快樂學程式的網頁前端課程，老師直接手把手帶你入門HTML ！完整的基礎入門課程省下你獨自摸索花費的時間！ 課程上架Udemy ! 準備一個輕鬆的週末，只要一天的時間，帶你建置靜態網頁。從實作中打開靜態網頁的大門，讓你的研究之路不是只有自己，有我們跟你一起努力！課程中你可以瞭解網站建置的世界觀與網站版型掌握HTML5的使用方式掌握 CSS3的使用方式使用Bootstrap處理前端UI框架現在開始上課！如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。快樂學程式
什麼是HTML? HTML全名是HyperText Markup Language，是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，是編寫網頁的基本語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。 HTML介紹與基本語法整理 不管你是小時候從撰寫無名小站為了要修改你的樣式，而開始瞭解HTML和CSS為何物，或是長大因為介面設計或前端工程開始踏入網頁的世界。HTML和CSS對於網站的重要性經過多年依然歷久不衰。在本篇會對HTML進行基礎的介紹並幫你整理出基本語法提供你在寫網頁時的快速參考！ 編寫基本的HTML： 先讓大家看一下一個基本的HTML文件格式為： <HTML> <HEAD> <TITLE>網頁主題</TITLE> <Meta> </HEAD> <BODY>…
Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！ 這篇文章專給... 彷彿聽過，對JS似曾相似，但從來沒有真正了解 愛用Google analytics & inbound marketing (Hubspot) 的行銷人 覺得跟前端工程師錯頻，想了解一下他們星球的語言 想學互動式網頁設計，創建屬於自己的第一個網頁天堂 (more…)
Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！ 這篇文章專給... 彷彿聽過，對JS 似曾相似，但從來沒有真正了解 愛用Google analytics & inbound marketing (Hubspot) 的行銷人 覺得跟前端工程師錯頻，想了解一下他們星球的語言 想學互動式網頁設計，創建屬於自己的第一個網頁天堂 📌 首先，我們先來談談什麼是 DOM 和 Javascript…
Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！ 這篇文章專給... 彷彿聽過，對JS似曾相似，但從來沒有真正了解 愛用Google analytics & inbound marketing (Hubspot) 的行銷人 覺得跟前端工程師錯頻，想了解一下他們星球的語言 想學互動式網頁設計，創建屬於自己的第一個網頁天堂 📌 首先，我們來暖暖身，複習一下何謂變數，又何謂宣告變數？ 如果把變數比喻成一個個空箱子，撰寫程式的我們就是個居家收納達人，我們可以任意地、隨興地把任何和喜歡的東西（像是襪子、內褲、撲克牌等）擺入不同箱子中。於是，原本空的箱子隨著時間內容物就變得越趨豐富，一個個箱子也逐漸出現有了差異。但你一定會疑惑說都是一樣的箱子要怎麼光看表面就知道裡頭裝了些什麼，這時候就要使用到妙用「標籤紙」來讓每個承裝不同性質物品的箱子擁有名字標籤 (name tag)。而宣告變數就是將箱子取名、並告訴大家裡面收納了什麼的過程，像是我們可以定義一個變數為 irisIsTheQueen： var…
Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！ 這篇文章專給... 彷彿聽過，對JS似曾相似，但從來沒有真正了解 愛用Google analytics & inbound marketing (Hubspot) 的行銷人 覺得跟前端工程師錯頻，想了解一下他們星球的語言 想學互動式網頁設計，創建屬於自己的第一個網頁天堂 📌 這次我們的起手式，JS編輯器的初認識🙌 講到「編輯器」我們必然會談到它對應的概念「編譯器」 所以，到底什麼是「編輯器」，又什麼是「編譯器」呢？ 長話短說，編輯器就是個專門編輯程式的Word…
Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！ 這篇文章專給... 彷彿聽過，對JS似曾相似，但從來沒有真正了解 愛用Google analytics & inbound marketing (Hubspot) 的行銷人 覺得跟前端工程師錯頻，想了解一下他們星球的語言 想學互動式網頁設計，創建屬於自己的第一個網頁天堂 (more…)
在網頁設計上，你可能固定使用某幾個動畫庫，但你知道 GitHub 上面其實有超多超夯的前端動畫庫嗎？ 前端動畫不僅能代表該網頁製作者與單位的用心，同時也能增加使用者好的體驗， 這篇文章幫喜愛網頁互動動畫的你整理了10個超多人推薦的前端動畫庫！ 我們趕快往下看吧！ 1. jQuery.countdown 創立者：hilios GitHub 人氣：2.2K stars GitHub 傳送門：https://github.com/hilios/jQuery.countdown 2. aniJS 創立者：anijs GitHub 人氣：3.6K stars…
前言 在這個網路越來越發達的時代，大家每天都在上網，使用瀏覽器查詢資料、看影片、購物等等，都與網頁有關，當你在使用時，你有沒有想過網頁也有區分為靜態網頁以及動態網頁呢，可能會有人覺得動態網頁就是在頁面上有動畫，會動的就是動態網頁，而頁面靜止，不會動的就是靜態網頁，其實不然。以下內容我們將介紹何謂動態網頁以及靜態網頁，讓你可以更加了解平時所使用的網頁喔。 靜態網頁 在了解動態網頁以前，也需要先了解靜態網頁究竟是什麼，這樣才能夠真正搞懂靜態跟動態究竟差在哪裡。 超文件標示語言HyperText Markup Language，簡稱：HTML，HTML是網站建置的基礎技術，常與CSS與Javascript配合成一個適合觀看的網頁，讓瀏覽器去讀取，一般判斷方式為網頁副檔名為html或htm皆為靜態網頁，靜態網頁的優勢為容易為搜尋引擎所接受，所以很多動態網頁會將動態網頁轉變成靜態方式，就是所謂的【偽靜態網頁】來提高搜尋引擎的友善度達到排名優化的成效。 當用戶瀏覽器通過HTTP協議向Web伺服器請求提供網頁內容時，伺服器僅僅是將原先的HTML文檔文檔傳送給用戶瀏覽器，用戶看到的內容是標準的HTML文黨的內容，可能在另外加上GIF格式的動態圖片或是Flash動畫等等，如果想更改網頁上的內容，就必須手動更改HTML文檔。 (more…)
前言在剛開始學程式時，你是不是常常聽到一個說法：HTML、CSS 與 JavaScript 是網頁前端三大要素。HTML 主要是負責資料與結構，CSS 則負責樣式的呈現，而JavaScript 負責行為與互動。但其實JavaScript 並沒有提供網頁的操作方法，前端開發者在網頁的操作方法都是「瀏覽器」提供的。 這些操作方法基本上會分別由這兩種物件所擁有：「BOM」與「DOM」。所以在瀏覽器上的 JavaScript 包含了：JavaScript 核心 (以 ECMAScript 標準為基礎)BOM (Browser Object Model，瀏覽器物件模型)DOM (Document Object…