HelloME: [HTML] HTML

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...

HelloME

總網頁瀏覽量

2015年10月12日星期一

[HTML] HTML_001-00

HTML Bold and Strong Formatting

HTML Italic and Emphasized Formatting

HTML Small Formatting

HTML Marked Formatting

HTML Deleted Formatting

HTML Inserted Formatting

HTML _Subscript Formatting

HTML ^Superscript Formatting

The HTML Style Attribute

HTML Text Size

HTML Text Alignment

沒有留言:

張貼留言

總網頁瀏覽量

2015年10月12日 星期一

[HTML] HTML_001-00

HTML Bold and Strong Formatting

HTML Italic and Emphasized Formatting

HTML Small Formatting

HTML Marked Formatting

HTML Deleted Formatting

HTML Inserted Formatting

HTML Subscript Formatting

HTML Superscript Formatting

The HTML Style Attribute

HTML Text Size

HTML Text Alignment

沒有留言:

張貼留言

2015年10月12日星期一

HTML _Subscript Formatting

HTML ^Superscript Formatting