fbpx
HTML初學程式程式新手網頁前端

HTML入門系列:基本觀念介紹!

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框架現在開始上課!如果你的入門還在單打獨鬥,歡迎來到快樂學程式找到志同道合的夥伴,你的自學之路不孤單。快樂學程式  
jing
April 21, 2021
HTML初學程式程式新手網頁前端

HTML語法整理! 3分鐘快速弄懂常用語法!

什麼是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> 網頁內容的主要呈現部分 </BODY> </HTML> 你可以看到網頁就是由一堆標籤(所謂標籤就是指被<>包起來的語法)集合起來的,透過瀏覽器的消化整理,就是我們所看到的網頁了。簡單而言,通常一份完整的網頁包含了二個部份:抬頭(HEAD)、文件本體(BODY)。而打在<TITLE></TITLE>這裡面的文字會出現在瀏覽器視窗最上頭藍色部份,當作一篇網頁的主題。而最上方及下方的HTML標籤,是為了告訴瀏覽器說這是一份HTML,但這個標籤不是必須的,不過通常都包在網頁的最上下兩端,將所有的原始碼都包起來。 看過上述內容你已經瞭解了一個最基本的HTML檔案格式是什麼樣子,接下來為各位整理了HTML基本語法,讓各位在開發時能更快速查詢自己想要的語法。…
jing
April 21, 2021
PHP初學程式程式新手

PHP是什麼?3分鐘PHP基本介紹!

PHP是什麼?3分鐘PHP基本介紹!       大家安安﹐快樂學程式這一次要跟大家分享PHP這種程式語言。希望幫助對於PHP有興趣的新手們可以透過我們的文章對這種語言有初步認識。一如以往﹐我們會分享以下幾項有關PHP的知識。 PHP是什麼?       PHP語言的全名是(PHP: Hypertext Preprocessor),和ASP、JSP等都是動態網頁開發語言,不過,PHP擁有跨平台的能力,無論是在Linux(最適合)、Unix、 Windows都可以執行運作,不像微軟 的ASP只能在Windows平台上執行,而且PHP是免費的,並可結合多種資料庫伺服器,如:MySQL、PostgreSQL、dBase、mSQL、Informix、ODBC、Oracle等。      PHP語言是伺服器端(Server)執行的網頁,不像一般HTML網頁,只要單機下開啟檔案就可以檢視網頁,PHP必須先在伺服器端執行完後,再將結果傳至使用者端(Client)的瀏覽器中檢視結果,所以必須使用網站伺 服器,且伺服器要支援PHP。 如何學好PHP?       要學好PHP,要有目的,要有一個想寫的東西,寫個學校網站,寫個校友系統,寫個簡單的新聞區或相簿...等,都可以,盡可能的和工作和生活結合,利用程式來簡化繁瑣的人工步驟,或者提昇工作效率,有目標,才會有動力,才會有想法。      學PHP不需要背,背不完的,只要懂就好了。像函數就不用背,常用的打久了你就背起來了,不常用的,等到要用時,知道去哪裡找就好。換言之,函數懂越多,功力越高強。      程式碼可以複製貼上,但一定要知道為什麼要這麼寫,不要傻傻的照著打,可以的話,自己打一遍最好,最上乘就是可以說出每一行程式碼的作用和前因後果。或者,故意打錯,看看會怎樣。錯誤訊息看久了,功力也就提昇了。 PHP程式碼執行方式 透過 Web Server 方式:例如利用 Apache HTTP Server 來執行 .php(或 .php3)副檔名…
jing
April 21, 2021
Javascript小白學程式成長日誌程式新手

網頁日記 # 8|Iris 程式小白

操作完簡單的 Javascript 實作後,馬上來進到下一步 —— 認識重量級函式庫! 那~ 我們馬上來看看 React.js 能帶給我們哪些便利之處吧~ 本篇日記針對 React 的十大特點做概括性的介紹 希望新手朋友們看完此篇對於 React 就能有最基礎的認識&了解 😆   1. React 超基本介紹 為 Javascript 的函式庫 用於建造可重複使用、元件化、具互動性的 UI…
iris
December 5, 2020
小白學程式工程思維程式新手

網頁日記 # 7|Iris 程式小白

恭喜你們看到倒數第二集啦! 可喜可賀🤩  相信你學 JS 的目的應該也是想走前端或是做出屬於自己香味的網頁吧~ 那這集就是你發揮所學的地方嘍(摩拳擦掌🤛  延續上集下拉式選單的精彩製作,這集要來教大家如何最簡單生出看起來好像很厲害的圖片輪播 Carousel!一起練功吧~   使用 Bootstrap 前注意事項: 使用前必須按指示寫入指定 CSS 和 JS 程式碼(如不清楚可回上一篇日記 review) Carousel 功能不會自動化調整輪播畫面尺寸,因此必須另行定義 Carousel default 功能無附加箭頭 (▶) 和指示…
iris
November 20, 2020
Python初學程式程式新手

Python初學總整理 第9講:Numpy函式庫

嗨,大家好,我是Teresa,這集想來和大家介紹在資料分析、機器學習領域中很經典、必定會用到的函式庫-Numpy,目的主要是做數據的處理,但內容不會涉及統計的理論和延伸,只會做一些基礎的功能介紹和簡易的實作程式碼提供給大家。 什麼是Numpy? Numpy是一個免費且開源的Python函式庫,專門用來處理陣列,由Travis Oliphant於2005年創建,但Numpy的前身是Numeric,是由Jim Hugunin和其他協作者共同開發,Numpy結合另一個同性質程式庫Numarray的特色,並加入了其他擴充功能。原始碼在這個網站中:https://github.com/numpy/numpy 為什麼使用Numpy? En kral yeşilçam porno videoları izlemek için saplamaca'yı ziyaret edin. En güzel yeşilçam pornoları bu sitede 在Python中,我們也有list來存放清單,但其實處理速度很慢,Numpy處理陣列的速度比list快50倍。原因是Numpy會將資料儲存在記憶體中的一個連續位置,可以高效率的找到他們的位置、並使用資料。 安裝Numpy pip…
Teresa
November 11, 2020
Python初學程式程式新手

Python初學總整理 第8講:Matplotlib套件

嗨~各位好,我是Teresa,這集想要和大家介紹Python中實用的套件-Matplotlib,原因是如果心中有個想法想要去實踐,雖然有資料,但需要說服夥伴的話,將你手中擁有的數據轉為圖表是很重要的,這樣一來,你說的話有說服力,觀看者也能簡單易懂。那我們就開始吧! 什麼是Matplotlib? Matplotllib是Python的視覺化套件,可將資料視覺化,也可以稱做繪圖庫,可以和NumPy一起使用。它是由約翰.亨利所創造的,不但開源,且各個平台間也具相容性。Matplotllib的代碼庫在此 github。 如何使用Matplotlib? 要開始使用Matplotlib,就如同其他模組和套件一般,要先安裝並匯入。 pip install matplotlib #安裝 Matplotlib import matplotlib import matplotlib.pyplot as plt #匯入Pyplot 套件並命名為plt 安裝成功後就可以畫圖囉! 繪製 x 和 y點 import…
Teresa
November 11, 2020
Podcast 系列初學程式小白學程式程式新手

Podcast JS 特輯 #1|魔鬼藏在細節裡 — 你真的了解變數嗎?

https://open.spotify.com/episode/6qzhzsD65TWVHNc10jbNhC 變數的概念好簡單? 的確,真的不難,但有非常多概念關乎到 Javascript 基本功的扎實度,這也是身為初學者必須注意和掌握的地方 這集 Podcast 會和大家聊的是 JS 變數的基本邏輯,包括定義、指派等等,更會討論到雙重指派和 hoisting 的情況下會產生哪些奇特的狀況,當然我們不免會提到的是 JS 身為動態型別語言的特性&原理和 hoisting 的背後隱藏邏輯~    其他針對變數定義上的建議上相對而言與定義上的規定同等重要,譬如說怎麼樣才是好的變數命名法和怎麼樣才符合 JS 中變數的定義標準等等都是直得留意的地方。另外,最後也和大家提到 ES 6 中 let 和…
iris
November 9, 2020