頁碼   [02]   [03]   [04]   [05]   [06]   [07]   [08]


 

第3章 架站四寶瞬間上手

01 網路溝通橋梁--HTML
02 網頁中的程式--Javascript
03 後端使用最廣程式--PHP
04 手機app製作程式--Inventor2
05 Q&A時間

01 網路溝通橋梁--HTML

HTML入門新手必學   15個常用的HTML標籤與屬性


HTML 是什麼?

HTMLHyperText Markup Language,超文字標記語言)是一種用來建立網頁的標記語言,常與 CSS、JavaScript 一起被用來設計網頁介面,可以說是網頁開發的基石。網頁瀏覽器像是常見的 Chrome、Safari 會讀取 HTML 檔案中的標籤(tag)來辨識網頁長什麼樣子,並顯示給使用者看。

對於網頁前端工程師來說,學會基本的 HTML 語法,是必備的職場技能。


前端 後端 差在哪?

前端是使用者所看到的內容,包括按鈕、核取方塊、圖形和文字訊息等視覺元素。藉助前端,使用者與應用程式進行互動。

後端是使應用程式正常運作的資料和基礎設施。它為使用者儲存和處理應用程式資料



範例1  voice.htm (原始碼 ,在homework01資料夾)

<html>
<head>
<title>有聲雜誌_2018年07月01</title>
</head>
<body >
<input onclick="history.go( -1 );return true;" type="button" value="上頁back" style="background-color: #C0E3B5">
<p><b><font size="5" color="#0000FF">有聲雜誌_2018年07月01<br><br>
<img border="0" src="images/first_01.jpg" width="260" height="56"
><br><br>
<table border="1" width="300">
<tr><td>
<font size="5"><b>01 傾聽 02:28</b></font><font size="4"><br>
<audio src="mp3/1807-01.mp3" controls > </audio><br><br><br>
</font><br>
</tr>
</table>
</body>
</html>

瀏覽器執行結果
























 
[頁首]

02 網頁中的程式--Javascript

資訊概論教學網站  參觀網站



與教學有關之功能

menu區

1.教學計畫(3)
2.教學重點(3)
3.平時作業(3)
4.全班網頁(3)
5.工具軟體
6.w3scools (網路程式教學平台)

top區

1.最新消息
2.學員名單
3.平時作業
4.作業專區

first區

1.福音實務網站設計流程
2.App Inventor2 (程式平台)
3.福音實務手機app設計範例(3)
4.資概網頁空間使用說明


手機 app 範本連結網址    (使用網站內外超連結網址)

工具軟體彙整


 











 

[頁首]


03 後端使用最廣程式--PHP

 

























興南夜市網站  參觀網站

網站服務構想書(範例)  服務構想書全文







[頁首]

04 手機app製作程式--Inventor2

 

App Inventor2 (程式平台)

請先申請Gmail帳號
(申請Gmail信箱★)

至Inventor2平台熟悉程式設計程序。

網站規劃設計 

App Inventor2 開發環境
       我的第一支APP


App Inventor 是Google所提供的Android開發環境,目前版本為第二版(Beta),只要有Google帳戶皆可免費使用。

App Inventor使用拼塊程式 (Blocky) 來撰寫,以圖像方式來呈現讓程式初學者能夠更快上手,同時了解程式設計的脈落及邏輯架構。

App Inventor所開發的程式可以直接在Android手機上執行,也可以安裝Android模擬器在電腦上執行,歡迎進入App Inventor的世界!


我們無須學習眾多應用程式,僅須用WebView元件來連結您設計的網站。


畫面編排



程式設計

 


程式完成後選建置,選擇安裝檔(apk)
系統就幫您打包成apk檔






完成後可選擇下載apk檔至電腦,
或用安著手機掃描Qrcode下載製手機安裝。(有效期間2小時)




城中教會app示範(電腦中執行)






            

前往城中教會之友網站                下載手機app安裝檔

https://go.cmpc99.com/    
https://go.cmpc99.com/cmpc.apk

 

[頁首]


Q & A 時間