HelloME: HTML

顯示具有 HTML 標籤的文章。顯示所有文章

2016年11月20日星期日

[HTML] 加入 JavaScript

兩種方式：
1. 在 html 中利用 <script> 標籤將 JavaScript 程式碼包含入內．
2. 用 src 屬性引入 ".js" 檔案．

第一種：

<script language="JavaScript>
    JavaScript code
</script>

language 屬性：
告知瀏覽器目前使用哪種 Script 語言，以書中提及的語言有兩種 JavaScript 和 VBScript，
其實也可以直接利用 <script> .. </script> 將程式碼包住就好,
但是就要確定瀏覽器一定將預設的 Script 設定為 JavaScript.

有舊版的瀏覽器無法支援 JavaScript，
避免這些無法支援的瀏覽器在使用 JavaScript 時會直接把 JavaScript 程式碼印，
就可以利用 HTML 的註解 ( ) 和 JavaScript 的註解 (//) 混合使用．

<script language="JavaScript">

<noscript>
瀏覽器不支援 JavaScript
</noscript>

noscript 標籤讓不支援 JavaScript 的瀏覽器執行或顯示標籤內的文字或效果．

使用 src 屬性：

在 IE4.X 和 Netscape 3.X開始, 才可以適用此種方法載入外部 JavaScript 檔案(*.js)

<script=" [Data Name].js>

</script>

Exception：

<HTML>
    <head>
        <meta http-equiv = "Content-Type" content="text/html; charset=big">
        <title> Test connent </title>
        <script language ="JavaScript" src = "welcome.js">
        </script>
    </head>
    <body>
        <a href= "doc8.html">echo</a>
        <script language="JavaScript">
        
        </script>
        <noscript>
            瀏覽器不支援 JavaScript
        </noscript>
    </body>
</HTML>

利用 document.write()　將要在 JavaScript 顯示的語言用此包覆．

JavaScript  放置位置：

可以放在 <head> </head> 和 <body> </body> 標籤內，
在 <head> </head> 內放入程式碼，可以讓 JavaScript 在進入頁面時以視窗顯示．
在 <body> </body> 內放入程式碼，則是在一般網路頁面顯示．

參考來源：HTML & JavaScript 實用寶典

2016年10月9日星期日

[HTML] 學習 006 CSS 怎麼加

先前已經有個簡單的加入CSS的範例了,
那將 CSS 與網頁結合,
主要就會透過 CSS 選取器來對 HTML 標籤進行控制.

選取器有三種:
1. 標籤選取器
2. Class 選取器
3. ID 選取器
利用先前範例來進行修改看看改變狀態.

原先網頁:

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Conntent</title>
</head>
<body bgcolor="99FF99" text="#FFFFFF">
<table width ="608" hright="320" border="1">
    <tr>
        <td align= "center" bgcolor="blue">Blue</td>
        <td align= "center" bgcolor="green">Green</td>
        <td align= "center" bgcolor="red">Red</td>
    </tr>
    <p>
        ABCDEFG
    </p>
</table>
<a href ="http://www.google.com.tw/" target="_black">Botton to connent the network </a>
</body>
</html>

1. 標籤選取器 - 將,<p> 和 </p> 內的字體做調整.

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Conntent</title>
<style>
    p{
        font-family: Arial;
        color:#F00;
    }
</style>
</head>
<body bgcolor="99FF99" text="#FFFFFF">
<table width ="608" hright="320" border="1">
    <tr>
        <td align= "center" bgcolor="blue">Blue</td>
        <td align= "center" bgcolor="green">Green</td>
        <td align= "center" bgcolor="red">Red</td>
    </tr>
    <p>
        ABCDEFG
    </p>
</table>
<a href ="http://www.google.com.tw/" target="_black">Botton to connent the network </a>
</body>
</html>

由粗體部分來看,
利用大括號 { } 將所有屬性與值包起來,
表示一個完整的 CSS 宣告.

其中屬性與值用 : 來區隔, 屬性與屬性用 ; 來區隔.

在 CSS 宣告結束後,
網頁內的所有對應標籤內容就會套用宣告的樣式效果.

2. Class 選取器

3. ID 選取器

From 精通 CSS 網頁設計法則

2016年10月8日星期六

[HTML] 學習 005 CSS 的一些知識

from 精通CSS 網頁設計法則

CSS 的其一個優點是能在任意瀏覽器呈現風格效果,
而能這樣被廣泛應用的原因是因為應用了 W3C 的準則.

W3C world wide consortium

一個網頁三個部分組成
1. Structure
2. Presentation
3. Behavior

Structure
網頁內的元素安排, 如圖片, 標題和內文.
語言如XHTML1.0, XHTML1.1 和 XML1.0.

Presentation
網頁呈現方式, 文字, 背影和色調.
語言如CSS1, CSS2 和 CSS3.

Behavior
網頁內容互動, 如提交資料, 選單顯示等.
語言如ECMAScript 262, D3C DOM.

在W3C中提供了一個判斷用戶的 CSS 是否合於規範的網站,
http://jigsaw.w3.org/css-validator/validator.html.en

2016年10月4日星期二

[HTML] 學習 004 css 與 HTML 轉變顯示語法

先由程式碼來看,
HTML 的程式碼:
doc3.html
<html>
   <head>
   <meta charset="UTF-8">
   <title>Sample document</title>
   <link rel= "stylesheet" href="style1.css">
   </head>

   <body>
       <h3><font color="#000099" face ="微軟整正黑體"> 標籤1 </font></h3>
       <p>正文1</p>
       <h3><font color="#000099" face ="微軟整正黑體"> 標籤2 </font></h3>
       <p>正文2</p>
       正文3
   </body>
</html>

再來看使用了 css 的程式碼
doc4.html
<html>
   <head>
   <meta charset="UTF-8">
   <title>Sample document</title>
    <style>
       h3{
           font-family:"微軟整正黑體";
           color:#000099;
       }
    </style>
    <link rel= "stylesheet" href="style1.css">
   </head>

   <body>
       <h3> 標籤1 </h3>
       <p>正文1</p>
       <h3> 標籤2 </h3>
       <p>正文2</p>
       正文3
   </body>
</html>

利用 css 來將該網頁的 <h3> 標籤所框選的內容直接修改,
在程式碼的情況下程式將變得更加的清晰明瞭.

下圖示以上兩個程式碼執行顯示後的樣子.

2016年9月29日星期四

[HTML] 學習 003 DOM和CSS

MDN 的第三個教學 - How CSS works

https://developer.mozilla.org/zh-TW/docs/Web/Guide/CSS/Getting_Started/How_CSS_works

沒有中文翻譯了
所以只好邊看邊到處去找參考資料了
大概以我的翻譯能力和目前什麼都不懂的情況下去給自己說明

以瀏覽器來顯示文件內容(document)的時候,
文件是和樣式板一起顯示的, 這個文件就會分成兩種情況去執行.

1. 瀏覽器會改變標記式語言和CSS到DOM中.
DOM就表示文件在電腦中的記憶體內.
    DOM便結合了文件內容以及其樣式.

2. 瀏覽器只顯示DOM內容.

標記式語言使用element來定義文件的結構.
使用者會標記這個element, 用的就是 tag,
這個 tag 字串開始為 '<' , 結束為 '>'.
許多的element都是成對的,
在結束的 tag 就會先加上 '/'來表示結尾.

<head>   </head>
_        _ <---- tag
_ _ _ _    _ _ _ _ _ < ----- element

在DOM中會是一個類似 tree 的結構.
每個 element, attribute 和執行的 text 在 DOM 中都變成樹的節點,
最後變成一棵樹.

了解 DOM 是為了幫助設計者設計網頁,
除錯和維護使用的 css,
因為 css 和 DOM 兩兩相關.

從第一次和第二次的練習網頁中都有的程式碼

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

在 DOM 中 p 就如同是 parent.

而 chile 就 strong 和其 text.

P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

the markup language 標記式語言
DOM (Document Object Model) 文件物件模型

2016年9月28日星期三

[HTML] 學習 002 加入css了

MDN 的第二個教學 - 為什麼要用CSS？
https://developer.mozilla.org/zh-TW/docs/Web/Guide/CSS/Getting_started/%E7%82%BA%E4%BB%80%E9%BA%BC%E8%A6%81%E7%94%A8CSS

淺顯易懂好網站ㄎ

html 的標籤說明其實可以自己google,
我直接看 wibibi 也是不錯的網站拉,哈哈,
只是用 wibibi 學對我來說好像沒法有效吸收.

如果許多網站介紹的
HTML 著重於內容的描述
CSS 著重於樣式的表現

把內容與樣式分開利於管理和維護,
可以對於相同標籤同時進行修改,
已可用的標籤來和HTML相比, css 的樣式標籤較多,
不然的話要單獨設計標籤會使得單純的HTML網頁內容龐大,
並利用圖層方式使得網頁有前後關係, 讓使用者設計上更有彈性.

新增一個css檔案叫做style1.css
內容為
   strong {color: red}

而在上一篇 [HTML] 學習 001
所新增的 html來檔拿來修改,
為了和第一次的程式區別所以重新命名為 doc2.html,
修改部分用黑體字表示.

doc2.html
<html>
   <head>
   <meta charset="UTF-8">
   <title>Sample document</title>
   <link rel= "stylesheet" href="style1.css">
   </head>

   <body>
      <p>
         <strong>C</strong>ascading
       <strong>S</strong>tyle
       <strong>S</strong>heets
      </p>
   </body>
</html>

在上一回有提到 <p> 和 </p> ,
利用標籤就可以使段落與段落之間自動分行,
並有一定的間距, 在預設的縮排效果中是沒縮排的,
這時候就可以用 css 來做樣式的變化.

在 html 裡面link標籤位於head中,
用以控制網頁和外部的資源相互關係,
但是引用的css會因為使用者使用的瀏覽器不同導致不同的結果.

   <link 屬性屬性值種類>

之後就會看到差別囉

來和第一次的網頁顯示比對一下

data:image/png;base64,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

2016年9月27日星期二

[HTML] 學習 001 第一個 html 網頁

一曝十寒的學習路 QQ
雖然有計畫其中也有阻饒
但是好像只是為失敗與不努力找藉口
繼續加油吧

兩個學習網站

https://developer.mozilla.org/zh-TW/docs/Web/Guide/CSS/Getting_started
http://www.w3schools.com/css/

由第一個 MDN 的網站開啟學習之路

Code:

<html>
   <head>
   <meta charset="UTF-8">
   <title>Sample document</title>
   </head>

   <body>
      <p>
         <strong>C</strong>ascading
        <strong>S</strong>tyle
        <strong>S</strong>heets
      </p>
   </body>
</html>

由 <title> 和 </title> 所圍起部分為 '網頁標題'
由 <head> 和 </head> 所圍起的部分稱為 '擋頭 ',
通常以規範和說明網頁的相關資訊,
包含 CSS 或 JavaScript的語法,
直接進行宣告但不會顯示於網頁呈現中.

目前會的宣告語法
連結CSS: <link href ="xxx.css">
JS宣告: <script language="javascript" type="text/javascript">

由 <body> 和 </body> 所圍起的部分稱為 '網頁內容',
透過合法 HTML 標籤,
可以在網頁中任意位置加入內容,
再透過 HTML 的標籤或 CSS 樣式來美化.

在 HTML中, 使文字之間產生段落, 分行,
就需要利用標籤來標明, 像是執行樣式的功能.
由 <p> 和 </p> 作為段落的開始與結束,

由 <html> 和 </html> 所圍起的部分稱為 '網頁部分'

而標籤也可以利用屬性來使得呈現方式更多元,
如背景, 顏色和大小等.

strong 是inline element行內元素, 用於強調以粗體表示.

顯示:

2016年5月13日星期五

HTML5 概述

HTML5

　　最新版的HTML，2014年由全國資訊網協會 World Wide Web Consortium ( W3C ) [2] 完成標準制定，目標在於取代 1999年制定的 HTML4.01和 XHTML 1.0 標準.，希望在網路應用發展中，達到輔合的標準與要求。廣義來講，包括 HTML、CSS,、JavaSeript的一組技術組合。期望減少瀏覽器對其他外掛程式之需求，像是AdobeFlash、Microsoft Silverlight、Oracle JavaFX (怎麼沒看到MySQL ?)

[1] https://zh.wikipedia.org/wiki/HTML5
[2] https://www.w3.org/
[3] https://www.w3.org/TR/html5/

2015年10月12日星期一

[HTML] HTML_001-00

HTML_001
Title of the document title

將網頁標題顯示的練習

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">   
        </title>
    </head>

    <body>
        Content of the docment...   
    </body>
</html>

http://www.w3schools.com/html/html5_intro.asp

認識 DOCTYPE 宣告：

　　其實 DOCTYPE 是 Document Type 的縮寫，在 HTML 4.01 版本時出現的，
可譯為文件類型定義。作用就是用來宣告(定義)，該網站網頁編寫的 HTML、XHTML 所用標籤是採用什麼樣的 (X)HTML 版本。宣告中 DTD 文檔類型定義或聲明，其裡頭包含了 HTML、XHTML 標籤規則，瀏覽器依據這個 DTD 來分析 HTML 的編碼。
　　DTD 是用來定義標籤的格式，主要是用來驗證這份文件是否正確，DTD 不能用來定義標籤，與相容性是無關係的。指定 DOCTYPE 好處之一，你可以使用 Markup Validator 等工具來檢查其 (X)HTML 語法的正確性。最重要的是對大多數的瀏覽器而言，一個簡單的 DOCTYPE 聲明能減少許多不必要的猜測行為與錯誤。為考量到網頁可及性設計等問題，W3C 在設計 HTML 標準時，會以 W3C 所制定的 HTML 標準為依規作設計。因此，網頁之起始標題必須註明網頁內容所使用的 HTML 版本，以供不同瀏覽器作識別上的解讀。
　　簡單的說建立此宣告就是為了讓網頁符合 W3C 的標準化，檢查所編寫 HTML、XHTML 的標籤是採用什麼樣的版本。

http://www.webpage.idv.tw/maillist/maillist4/new/02/02.htm

HTML：

HTML is a markup language for describing web documents (web pages).

HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content

--------------------------------------------------------------------------------------------------------------

HTML_002
HTML Basic Examples

<!DOCTYPE html>
<html>
   <body>
       <h1> h1 -> HAAAAAA~ </H1> 
       <h3> h3 -> HAAAAAA~ </H3>
       <h5> h5 -> HAAAAAA~ </H5>
       <p> p -> My first paragraph. </p> 
       <a href = "https://www.google.com.tw/webhp?hl=zh-TW"> This is Google</a>
        

       <img src="803_009_5jg.jpg" alt="W3Schools.com" width="104" height="142">
        
   </body>
</html>

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

--------------------------------------------------------------------------------------------------------------

HTML_003
The lang Attribute

元素 (element) 的全域屬性 (attribute) lang ，設定元素的語言編碼。

<!DOCTYPE html>
<html lang = "en-US">
    <body>
        <h1>My first Heading</h1>
        <p>My first paragraph.</p>
        <p>My second paragraph.</p>
    </body>
</html>

由此可知 <p></p>會自動換行並切行距也會增加

zh-tw 繁體中文(正體中文字)
en      英文
xyxxyz 則不是任何語言編碼

The first two letters specify the language (en).
If there is a dialect, use two more letters (US).

一開始開啟網站會以預設編碼來當檔案依據,
用這個編碼是為了避免日後字體不同產生亂碼.

--------------------------------------------------------------------------------------------------------------

HTML_004
HTML Text Formatting Elements

<!DOCTYPE html>
<html lang = "en-US">
    <body>
        <h1>My first Heading</h1>
        <p tile = "About HaHa"> the &lt p &gt element has a title attribute. The value of the attribute is "About W3Schools":</p>
        <hr>
        <p>This is a paragraph.</p>
        <hr>
        <p><b>This is a paragraph.</p>
        <hr>
    </body>
</html>
跟前一個差不多,
只是這了的<p>多加了tile, 就是對這個段落給予其屬性.

在外國網站上都把<p>這種標示稱為element元素,
後面tile的部分就是給予一個Attribute屬性.

&lt , &gt 算是HTML要印出<>得跳脫字元, 而&就是.

The <hr> tag creates a horizontal line in an HTML page.
就是分隔線的元素, 而且會跳一行並隔一行.

The HTML <br> element defines a line break
換行符號

HTML Bold and Strong Formatting

The HTML <b> element defines bold text, without any extra importance

The HTML <strong> element defines strong text, with added semantic "strong" importance.

<b> 和 <strong> 感覺很像, 就是作重點畫粗的感覺

HTML Italic and Emphasized Formatting

The HTML <i> element defines italic text, without any extra importance.

The HTML <em> element defines emphasized text, with added semantic importance.

<i> 則是傾斜
<em> 相同

HTML Small Formatting

The HTML <small> element defines small text:
<small>則是縮小
<small></small>

HTML Marked Formatting

The HTML <mark> element defines marked or highlighted text
由上面就可以知道, 就像用螢光筆畫線一樣.
<mark></mark>

HTML Deleted Formatting

The HTML <del> element defines deleted (removed) text.
刪除線符號
<del></del>

HTML Inserted Formatting

The HTML <ins> element defines inserted (added) text.
加上底線
<ins></ins>

HTML _Subscript Formatting

The HTML <sub> element defines subscripted text.
把字體縮小 = = 感覺跟small好像, 不過這裡是下標
<sub></sub>

HTML ^Superscript Formatting

The HTML <sup> element defines superscripted text.
這裡就是下標拉~
<sup></sup>

以上範例都在 http://www.w3schools.com/html/html_formatting.asp
--------------------------------------------------------------------------------------------------------------

HTML_005

The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks

<!DOCTYPE html>
<html lang = "en-US">
    <body>
   <p>This poem will display as one line:</p>
   <p>
      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.
   </p>
<hr>
   <pre>
      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.
   </pre>
    </body>
</html>

--------------------------------------------------------------------------------------------------------------

HTML_006
跟改字串的顏色

<!DOCTYPE html>
<html lang = "en-US">
    <body>
    <p>This poem will display as one line:</p>
    <h2 style = "color:red">My Bonnie lies over the sea.</h2>
    <h2 style = "color:Blue">My Bonnie lies over the ocean.</h2>
    </body>
</html>

--------------------------------------------------------------------------------------------------------------

HTML_007
更改背景顏色

<!DOCTYPE html>
<html lang = "en-US">
    <body style="background-color:lightgrey">
       <h1>This is a heading</h1>
       <p>This is a paragraph.</p>
       <h1 style="font-family:verdana">This is a heading</h1>
       <p style="font-family:courier">This is a paragraph.</p>
       <hr>
       <h1 style="font-size:300%">This is a heading</h1>
       <p style="font-size:160%">This is a paragraph.</p>
       <hr>
       <h1 style="text-align:center">Centered Heading</h1>
       <p>This is a paragraph.</p>
    </body>
</html>

The HTML Style Attribute

在body理面可以利用style來改變要顯示的性質
The HTML style attribute has the following syntax:

style="property:value"

The property is a CSS property. The value is a CSS value.

而 font-family: 則是對於字型的做定義.

HTML Text Size

The font-size property defines the text size to be used for an HTML element

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element

--------------------------------------------------------------------------------------------------------------

HTML_00

--------------------------------------------------------------------------------------------------------------

HTML_00

--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------

Content of the docment...

訂閱：文章 (Atom)

總網頁瀏覽量

2016年11月20日 星期日

2016年10月9日 星期日

2016年10月8日 星期六

2016年10月4日 星期二

2016年9月29日 星期四

2016年9月28日 星期三

2016年9月27日 星期二

2016年5月13日 星期五

2015年10月12日 星期一