來分享寫一篇開發網頁自學的 HTML

來介紹一下因為自己想學網頁的東西 上網找找 就看到了 Udemy 教學有很多的資訊  對我來說也是很有幫助。

就從網頁開發2022的開始了我的程式之路，上來寫這個部落格也能讓我記憶程式碼是幹嘛用的 也方便查找

接下來就開始介紹囉 !!!!!!!!!!!!!!!!!

 

HTML 基本架構是我們需要先瞭解的基礎.

首先可以想成 頭部 跟身體。來區分他的程式碼是在幹嘛的  

再來全球公認檔案名稱 都會取個 index.html 的檔案  架構以下的程式碼

 

HTML 標籤語言 (超文件) 做重點

index.html 全國公認網址首頁

 

寫出標題字形大

<h1>我得第一個網頁</h1>

解釋一下這個有分<h1></h1>~<h6></h6>

依序的大小

可對照下面參考 用在 <body></body> 裡面打自己想用的標題 !!~~

 

寫出段落

<p>我的第一個網站</p>

這個代表內文要幹嘛寫甚麼 就會出現在<h1></h1> 的下一個段落 

在介紹一下 <br /> 它可以用來空格 好區分段落唷XD

 

物件 (屬性.行為) 需要知道的架構

<h1 class="heading" style="color:rgb(0, 255, 106)" onclick="alert('按下h1標籤')">

"color” = 設定顏色   onclick = 按下標籤會顯示的東西        "alert"("") 裡面打的東西

 

<html lang="zh"> // 顯示中文

 

以下介紹程式碼

 

HTML 的基本架構

<!DOCTYPE html>
<html lang="en"> // 顯示英文
<head> // 頭部
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一個網頁</title> // 會在網頁的標籤顯示網頁名字
</head>
<body></body>  //身體

// 分開
<!DOCTYPE html>
<html lang="zh-Hant"> // 顯示中文
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>熊貓資訊網</title>
        <meta name="robots" content="index, follow" /> // follow 讓谷哥容易搜尋
        <meta name="description" content="教導熊貓知識" /> // description 網站看到的描述
        <meta name="author" content="JJ" /> // 作者名稱會顯示在網頁上 content裡面來設定要的名稱
        
    </head>
		<body>
				<h1 class="heading" style="color:rgb(0, 255, 106)" onclick="alert('按下h1標籤')">
            保護
        </h1>
        <p>
            保護 熊貓
        </p>
</body>



用法做重點:

<base target="_blank" /> <!--"_blank" 點超連結原本頁面會在。再多出一個新頁面。 "_self" 覆蓋原本頁面 -->

 

以下就是網頁標題名字旁的圖案可以設定圖片

<!--Page Icon goes here 做出網頁標籤的圖案-->

<link rel="shortcut icon" href="./images/pandaIcon.png">

<link rel="bookmark" href="./images/pandaIcon.png">

 

 

<!--裝飾表格 要在<head></head>-->

<!--h1 { color: blue } css屬性讓H1的標題都變成藍色-->

 

程式碼如下 

<head>

    <style>

        table,

        th,

        tb {

                  border-collapse: collapse;    <!-- 邊框折疊 -->

                  border: 1px solid black;   <!-- 邊框的線 1px 黑色 -->

         }

         th,

         td {

               padding: 0.25rem;   <!-- 表示間距0.25rem -->

         }

 

        h1 {

               color: blue;       <!-- h1顏色是藍色 -->

        }

 

    <style>

</head>

 

 

再來的話就是要怎麼載入圖片

 

<img width="550" height="350" src="./images/panda.jpg" alt="panda"> <!-- 貼圖片進去 放在<body></body> 裡面。 ../ = 資料夾最上層 width = 寬 hright = 高 src = 連結 ./圖檔名 有資料夾的話 "./images/panda.jpg" alt = 檔名 -->

 

做一個表格

 

<h2>台灣熊貓</h2>

<ul> <!-- <ul></ul> = 列表的順序 (...) <ol><ol> = (1.2.3) -->

    <li>2008:團團圓圓到台灣</li>

    <li>2013:圓仔出生</li>

</ul>

 

詳細的在講解一ˋ次 table程式碼

 

<h2>熊貓表格</h2> <!-- <table></tabel> = 表格 th = 最上面一格 tr = 最上面的下一格 td = 在下面的一格 -->

<table>

        <tr>

              <th colspan="3">熊貓國家表格</th> <!-- colspan 填滿表格有三列所以"3" -->

        </tr>

        <tr>

               <th>國家</th>

               <th>年分</th>

               <th>熊貓</th>

        </tr>

        <tr>

               <td>墨西哥</td>

               <td>1975</td>

               <td>迎迎、貝貝</td>

        </tr>

        <tr>

              <td>藍</td>

             <td>1976</td>

             <td>迎迎隆隆</td>

        </tr>

</table>

 

這是一個連上你要的連結作法 一樣用在 <body></body> 裡面

 

 

<h1>相關連結</h1>

<a href="連結網址">超連結</a> <!--超連結-->

<h1>相關連結</h1>

<div class=""> <!--從原本的併排變直排 <div></div>-->

         <a href="https://www.google.com">Google首頁</a> <!--超連結-->

</div>

<div class="">

        <a href="https://www.youtube.com">youtube</a>

</div>

 

來來講解一寫表格 form 的重點

他是放在 <body></body> 裡面!!!~~~~

以下程式碼 !!!!!!!!~~~~~~~~~~~~~~~~~

~

 

 

<!DOCTYPE html>

<html lang="en">

 

<head>

     <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>熊貓問卷調查</title>

</head>

 

<body>

     <form action=""method="GET">    <!--GET 會顯示網址輸入的東西 POST 不會顯示     form action="  "  意義表單提交向何處發送    -->

          <label for="myname">姓名:</label>     <!--標籤for="" 應當與相關元素id 相同-->    

          <input minlength="2" maxlength="50" id="myname" type="text" name="inputName" required value="JJ" placeholder="請輸入真實              姓名" /> <!-- placeholder 提示作用 --> <!-- minlength="2"  (最少輸入多少字)    maxlength="50" (最多輸入多少字)  type="text" (可以輸入            文字 數字 英文 中文)      required (屬性意義必須在提交之前輸入自段)    -->   

          <!--傳到後端(重要) name=""-->

          <br />

 

              <input id="male" type="radio" name="gender" value="male" required /> <!--radio 只能選一向 要三選一name一定要相等 -->>

          <label for="male">男生</label>

          <!--value="" 傳到後端的碼-->

          <input id="female" type="radio" name="gender" value="female" required /> <!--checkbox 選多項-->

          <label for="female">女生</label>

          <input id="other" type="radio" name="gender" value="other" required /> <!--required 防呆機制 沒輸入會跳出錯誤 -->

          <label for="other">其他</label>

          <br />

          

             以上設定性別的程式碼也可以這樣用

          <label for="gender">性別</label>

           <select name="gender" id="gender" required>    <!-- <select> -- 表示提供一個菜單的控鍵    每個 <option> 元素都有 value 属性  -->

                <option></option>

                <option value="male">男性</option>

                <option value="female">女性</option>

                <option value="other">其他</option>

           </select>                 

           <br /> <!--換行的標籤-->

                <label for="tele">電話</label>

                <input id="tele" type="text" name="telephone">

                <br />

 

                <label for="email">信箱</label>

                <input id="email" type="email" name="email" required />

                <br />

 

                <label for="age">年齡: </label>

                <input id="age" type="number" name="age" value="18" min="0" max="150" required step="1" /> <!-- step 可以讓使用者輸入小數點 0.1=加多少   

具有指定合法數字間隔的輸入字段 -->

                <br />

                <hr />     <!-- 等於插入水平線 -->   

                <label for="area">地區</label>

                <input id="area" type="text" name="area" list="areaList" required>

                <datalist id="areaList">        <!--  <datalist> 標籤 (tag) 用來建立一組資料清單 (list of options)，來和 <input> 欄位結合

在 <input> 欄位會出現一個下拉選單，提供給使用者可以從資料清單中直接選擇一個值 -->

                     <option value="基隆市">基隆</option>

                     <option value="台北市">台北</option>

                     <option value="新北市">新北</option>

                </datalist>

                <br />

                   

                <label for="suggestion">給網站的建議</label>

                <br />  

                <!-- <textarea> 一個文本區元素 使用者可以在裡面輸入文字提供建議等等  -->

                <textarea name="suggestion" id="suggestion" cols="30" rows="10" placeholder="感謝提供建議"></textarea>  <!--使用者可以在裡面打字-->>

                <br />  

                 <input type="checkbox" id="checkbox" name="news" value="newspaper" checked />   <!-- checked 是一個選框打勾勾的按鈕 -->

                 <label for="checkbox">訂閱熊貓電子報</label>

                 <br />

                 <input type="range" min="0" max="100" step="10" name="" value="" />  <!--  type="range"    設定一個可移動卷軸 該值的倍數是 step=" "  -->

                 <br />

 

                 <button type="submit">提交表單</button> <!--  type="submit" 會有一個框框按鈕樣式 類型會被提交按鈕（提交按鈕）——點選的話將提交提交到服務器。 -->

      </form>

</body>

</html>

 

以上重點就先到這邊囉~~~~~~~~~

 

                

         

 

               

               

 

            

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

文章標籤
全站熱搜
創作者介紹
創作者 Jie Jing 的頭像
Jie Jing

Jie Jing的部落格

Jie Jing 發表在 痞客邦 留言(3) 人氣(54)