闪电代写 -代写CS作业_CS代写_Finance代写_Economic代写_Statistics代写_代码代做_IT代写_加急帮助

HTML - HyperText Markup Language

Contents

• Understanding HTML

– Title, Section Headers

– New Paragraph, and Line Break

– Images

– Hyper Links

– Tables

HyperText Markup Language (HTML)

• HTML is the markup language for creating web pages, could be hand-written or generated by tools such as Front Page or Dreamweaver

• What does HTML looks like?

Basic Syntax of a HTML Statement

• Element

– It is a label that identifies and structures the different parts of a web page.

– A non-empty element consists of an opening tag, the content, and a closing tag.

– An empty element consists of the initial less than sign, the element’s name, a space, and the final greater than sign.

Basic Syntax of a HTML Statement

• Attribute and Value

– They contain information that further describe the purpose and content of the element.

– An attribute’s value is enclosed in quotation marks (especially when the value contains space).

Basic HTML Structure

2 <!DOCTYPE html>

3 <html>

4 <head>

5 <meta charset="utf-8">

6 <meta name="author" content="" >

7 <meta name="description" content="" >

8 <meta name="keywords" content="" >

9 <title>Untitled Document</title>

10 </head>

11 <body>

13 </body>

14 </html>

Basic HTML Structure

• Line 3 – <html> Element

– It is efficiently the first element of an HTML/XHTML document.

– The (old) XHTML requires the declaration of its namespace, together with the main language in which your page is written. (e.g. for hyphenation, spell check, left-to-right order…etc)

– In HTML5 we simply writes <html>. Meanwhile the lang property is bound to individual elements to indicate whether the text is in Chinese / English… etc.. (e.g. <p lang="en">…</p> )

Specifying the Language (if needed)

• While saving with the proper encoding and declaring that encoding is essential, it can also be useful to specify the language in which your page is written.

• A list of language code is defined in ISO 639:

http://sunsite.berkeley.edu/amher/iso_639.html

• Instead of binding lang to individual element (preferred), an alternative way is to put the followings inside <head>:

Basic HTML Structure

• <head> Element

– It provides an unordered collection of information about the document, which could be useful for browsers.

Specifying Author, Description and Keywords

• The meta description tag allows you to influence the description of your HTML page in the crawlers that support the tag.

• The meta keywords tag allow you to provide additional text for crawler-based search engines to index along with the body copy.

• Hence, the quality of search results may be improved.

Specifying Author, Description and Keywords

3 <html>

4 <head>

5 <meta charset="utf-8">

6 <meta name="author" content="ebanking team" >

7 <meta name="description" content="Our online payment services provide a simple and easy way to manage your bills" >

8 <meta name="keywords" content="payment, bill payment, autopay" >

9 <title>Untitled Document</title>

10 </head>

11 <body>

13 </body>

14 </html>

Declaring the Encoding

• The most commonly used character encoding is Unicode.

– It is a universal system for encoding all of the characters in all of the world’s languages.

– Each character in each language is assigned a unique code.

– Unicode Code Charts http://www.unicode.org/charts/

• UTF-8 is preferred over regional encoding (e,g, BIG5 / GB2312) as it supports characters from different languages at the same time:

• The encoding you declare must match the encoding with which your page was saved. Otherwise, characters that differ between the encodings will display incorrectly.

Creating a Title

• In most browsers, the title appears in the title bar of the window.

• A title should be short and descriptive.

– It affects page ranking in search engines.

– It is used in History lists, Favorites lists, and Bookmarks menus to identify the page.

• Depending on the <!DOCTYPE> chosen,

<title> could be COMPULSORY. (e.g. in HTML5)

• <title> can only exist inside <head>, not <body>

Creating a Title

3 <html >

4 <head>

5 <meta charset="utf-8">

6 <meta name="author" content="ebanking team" >

7 <meta name="description" content=" Our online payment services provide a simple and easy way to manage your bills " >

8 <meta name="keywords" content="payment, bill payment, autopay" >

9 <title>ABC Banking Corporation Limited</title>

10 </head>

11 <body>

13 </body>

14 </html>

Creating Section Headings / sub-headings

• It briefly describes the topic of the text section it introduces.

• Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

• It provides for up to six levels of headings / sub-headings in the Web page.

<hn> … </hn> where n is a number from 1 to 6

• <h1> is greater than <h2> <h2> is greater than <h3>… however the exact size and style may varies slightly from browser to browser

Creating Section Headers

4 <head>

5 <meta charset="utf-8">

6 <meta name="author" content="ebanking team" >

7 <meta name="description" content=" Our online p…" >

8 <meta name="keywords" content="payment, bill payment, autopay" >

9 <title>ABC Banking Corporation Limited</title>

10 </head>

11 <body>

12 <h1>ABC Banking Corporation Limited</h1>

13 <h2>Online Banking Services</h2>

14 <h3>Payments</h3>

15 <h4>Bill Payments</h4>

16 <h5>AutoPay</h5>

17 </body>

Starting a New Paragraph

• HTML does not recognize the <Enter> or other extra white space that you enter in your text editor.

• The opening and closing p tags are used to enclose each paragraph.

Starting a New Paragraph

11 <body>

12 <h1>ABC Banking Corporation Limited</h1>

13 <h2>Online Banking Services</h2>

14 <h3>Payments</h3>

15 <p>What are payments? </p>

16 <p>Our online payment services provide a simple and easy way to ….</p>

17 <p>Select an account: (1) Bill Payment, (2) AutoPay </p>

19 <h4>Bill Payments</h4>

20 <p>It allows you to make online bill payments to over 200 merchants in ... </p>

21 <p>Feature: (1) Review, pay and organize your bills 24-hour a day, (2) Pay a bill through your bank account, debit card, or credit card, (3) Place payment instructions, up to 60 days in advanced, and (4) Provide a comprehensive report for Bill Payments transactions. </p>

23 <h4>AutoPay</h4>

Creating a Line Break

• Browsers automatically wrap text according to the width of the block or window, creating new lines as necessary.

• The br tag can be used to create manual line breaks anywhere you like.

• Lines of text appear one after another.

<br />

The slash / in <br/> (and other empty tags) is optional in HTML, but is a must for (old) XHTML documents20

Creating a Line Break

11 <body>

12 <h1>ABC Banking Corporation Limited</h1>

13 <h2>Online Banking Services</h2>

14 <h3>Payments</h3>

15 <p>What are payments? </p>

16 <p>Our online payment services provide a simple and easy way to manage your bills.</p>

17 <p>Select an account: <br /> (1) Bill Payment <br /> (2) AutoPay </p>

19 <h4>Bill Payments</h4>

20 <p>It allows you to make online bill payments to over 200 merchants in Hong Kong.</p>

21 <p>Feature: <br/> (1) Review, pay and organize your bills 24-hour a day <br/> (2) Pay a bill through your bank account, debit card, or credit card <br/> (3) Place payment instructions, up to 60 days in advanced <br/> (4) Provide a comprehensive report for Bill Payments transactions. </p>

Adding Comments

Comment is only for human reference and is ignored by the browser

• Text inside

• could be placed on different lines (for long comments)

• Not visible unless user choose to view source

• Ignored by browser and hence not affecting page appearance

• Only for developers’ reference

Images

Inserting Images on a Page

• Common image formats can be placed on the Web page:

– Windows Bitmap (BMP)

– Windows Enhanced Metafile (EMF)

– Graphic Interchange Format (GIF)

– Joint Photographic Experts Group (JPG/JPEG)

– Portable Network Graphics (PNG)

– Scalable Vector Graphic (SVG) (for line drawings like charts)

Images

Inserting Images on a Page

11 <body>

12

13 <h1>ABC Banking Corporation Limited</h1>

14 <h2>Online Banking Services</h2>

16

17 <p>Information</p>

18 <p><img src="../images/loans.jpg" /><br />Loans</p>

20

21 <h3>Payments</h3>

22 <p>Our online payment services provide a simple and easy way to manage your bills.</p>

23 <p>Select a service: <br /> (1) Bill Payment <br /> (2) AutoPay </p>

Images

Absolute URLs vs. Relative URLs

• Uniform Resource Locator (URL)

– It simply means “web address”.

– It contains information about where a file is and what a browser should do with it.

• Absolute URL

– It shows the entire path to the file, including the scheme, server name, the complete path, and the file name itself.

– It is generally used for

• Referencing a file from someone else’s server

• FTP sites, newsgroups, and email address

• Relative URL

– It describes the location of the desired file with reference to the location of the file that contains the URL itself.

– . (single dot) means “current folder” and .. (double dot) means “parent folder”

– It is generally used for the files which is

• In the same/neighboring directory / subdirectory on the same server

Images

Absolute URLs vs. Relative URLs

File name Absolute URL (can be used anywhere) Relative URL (only works in yourarehere.html)

index.html www.site.com/web/index.html index.html

image.gif www.site.com/web/images/image.gif images/image.gif

data.html www.site.com/info/data.html ../info/data.html

homepg.html www.remote.com/pub/homepg.html (none: use absolute)

info.html www.remote.com/bcn/info.html (none: use absolute)

Images

Scaling an Image (legacy method)

• The size of an image can be changed by specifying new height and width values for the image.

– Pixels (color dot)

– Percentages

• Percentages are of the available width or height that the image could fill, usually the width or height of the current window.

• If the width property of an image is specified, but not the height property, the resulting height of the image is sized proportionally to the specified width.

Images

Scaling an Image

11 <body>

12

13 <h1>ABC Banking Corporation Limited</h1>

14 <h2>Online Banking Services</h2>

16

17 <p>Information</p>

18 <p><img src="../images/loans.jpg" width="10%" alt="Personal Loan" />

<br />Loans</p>

20

21 <h3>Payments</h3>