iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

第12 屆IT鐵人賽 -Python新手玩玩Web應用系列 第 3

{Day3}開始準備網站模板前的動作

第3章

HTML5? CSS?JAVA SCRIPT我要用PYTHON開發網站有需要學這個嗎?

答案是

因為在MTV(Model-Templetes-Views)的架構上,網站視覺的呈現所需要的樣板是前端各種語法支撐的結果,例如HTML5/CSS/Java Script
所以,在準備好進入MTV(Model-Templetes-Views)的世界前,有個知識必須先學到,就是基本網頁編寫技巧,但今天的文章裡,不會教各位很高超的前端技巧,但身為新手的我們,至少要知道每個標籤功能及用途。

Pycharm 不得不說這個IDE真心覺得好用,你需要的開發環境都準備齊全,文字檔和HTML檔都可以在這個環境底下
一併開發,不用再換軟體,好Pycharm不用嗎?

--- 開工的分隔線---

就讓我們先建立一個templates 的目錄在專案資料夾吧
流程:
對著專案根目錄按下右鍵->建立目錄->templates
說明:
該目錄是FLASK 預設會去搜尋樣板的資料夾。

再來建立一個HTML,和建立新的python檔一樣,只是選項改成了HTML
File->New->Html file ->命名成index.html->

https://ithelp.ithome.com.tw/upload/images/20200903/20125065CPG22Q7x9r.png

瞬間就把基本的標籤建立完成嚕,完全不費工夫的加快了開發的速度!!/images/emoticon/emoticon08.gif
感恩JetBrain,讚嘆Pycharm!!(被拖走....)

接著,就稍微來解說一下HTML 常用的語法吧
一個最基本的HTML的語法結構如下呦!

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

架構圖 引用自網站http://estmary.2020.madeateps.org/html-structure/
Quote from http://estmary.2020.madeateps.org/html-structure/

HTML是由成對的TAG所建立的語法,如程式碼中的<html></html>
這堆成對的標籤和內容,透過瀏覽器的翻譯,讓普羅大眾的使用者們,看到自己想瞭解的內容或想購買的商品。

今天就僅用一些常用的標籤來做個示範

標題 h1 ~ h6 字體大小由1~6 就從最大的標題字變到最小的標題字
<h1> 我是最大的字</h1>
<p>段落文字</p>
<br>斷行
<a href="https://www.google.com.tw">超鏈結到google </a>
<img src="https://www.w3schools.com/html/w3schools.jpg">

<table border=3>
    <th>我是表格標題</th>
    <tr>
        <td>
           第一欄
        </td>
        <td>
          第二欄 
        </td>
    </tr>
</table>

上面這段的效果就像下圖呦
https://ithelp.ithome.com.tw/upload/images/20200903/20125065DztjSuH6zN.png

HTML & CSS 常用學習資源介紹

前端的語法實在是多采多姿,今天就暫時介紹到這,有興趣鑽研的朋友,網路有很多資源,請自行運用&學習呦。
所有的語法都可以在W3School找到

推薦一個線上實測網站可以讓你快速知道語法產生的效果Codepen.io

推薦這次許多新手鐵人寫的有關HTML的系列

Day3. 台北的夜

白居易 夜雨
我有所念人,隔在遠遠鄉。
我有所感事,結在深深腸。
鄉遠去不得,無日不瞻望。
腸深解不得,無夕不思量。
況此殘燈夜,獨宿在空堂。
秋天殊未曉,風雨正蒼蒼。
不學頭陀法,前心安可忘。


上一篇
{Day2} GO GO Flask!!
下一篇
{Day4}啟動你的HTML網頁 GO~
系列文
第12 屆IT鐵人賽 -Python新手玩玩Web應用30

尚未有邦友留言

立即登入留言